Ext JS 4.1 beta Doc 어플리케이션 분석7

이제 CSS를 적용해 봅니다. 우선 상단 전체에 백그라운드로 적용 된 CSS를 찾아보자. Docs.view.Viewport 클래스에 region:'north'영역의 아이디가 'north-region'으로 되어 있늘 걸 보면 동일한 이름의 CSS가 이 프로그램이 사용하고 있는 docs/resources/css/app.css에 있는지 확인합니다. 아래 그림처럼 north-region이름으로 css가 존재합니다.

index.html에 위의 css를 넣어 봅니다.

파이어폭스를 통해 해당 north-region이 어디인지 확인 해봅니다.

소스가 수정되었다면 다시 실행해서 css가 적용되었는지 확인합니다.

이제 상단 좌측의 docheader클래스의 영역의 css를 적용해 보자. docheader클래스는 index.html내부의 div 중 'header-content'를 contentEl로 삽입하고 있다 아마도 header-content라는 이름으로 app.css에 css가 존재할 것이다.

Ext.define("Docs.view.Viewport", {
..
..
    initComponent: function () {
    	this.items = [{
    		region: "north",
            id: "north-region",
            style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
            title: "north-region",
            height: 65,
            layout: {
                type: "vbox",
                align: "stretch"
            },
            items: [{
                height: 37,
                xtype: "container",
                layout: "hbox",
                items: [{
                	xtype: "docheader",
                	style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}
                }, {
..

Ext.define("Docs.view.Header", {
    extend: "Ext.container.Container",
    alias: "widget.docheader",
    contentEl: "header-content", // index.html 내부의 header-content div를 현 클래스에 삽입.

index.html에 위의 css를 카피해 넣습니다.

// index.html
	

다시 실행해서 확인해보면 아래 그림처럼 좌측 상단에 로고에 선명하게 css가 적용된 것을 확인 할 수 있다.

상단 탭에 대한 css를 적용합니다. 이전에서 app/controller/Tabs에서 welcome, class 를 탭에 추가하는 코딩을 하였습니다. 해서 이미 보이지는 않지만 탭은 구성이 되어 있습니다. css만 추가하면 화면에 탭이 보여지게 될것 입니다. app.css에서 doctab이라는 이름으로 css를 검색해서 index.html에 추가합니다. 이 때 이미지의 경로는 좀 변경해줘야 합니다. app.css가 있던 위치가 달라졌으므로 index.html기준으로 resourcess/images/xxx.png 이렇게 말입니다.

상단 탭에 대한 css가 적용되었습니다..