extjs의 양식과 미화에 대해 간단히 이야기하다

Extjs 프로젝트는 부유 클라이언트 개발에 강력한 지원을 제공했고 심지어 전단의 개발 방식을 바꾸어 개발을'구성 요소를 향한 것'으로 발전시켰다.인터페이스의 미화에 있어서도 근본적인 변화이다.일반적인 웹 미공은 extjs 프로젝트에 착수할 수 없기 때문에 스크립트 작성자가 미공과 함께 작업을 완성해야 한다. (또한 spketIDE가 제공하는 스타일 수정 도구도 이상적이지 않다.)
 
extjs의 기존 스타일을 수정하는 데는 두 가지 방식이 있다
1. js 코드를 사용하여 동적으로 수정합니다. 예를 들면:
Ext.get(this.header.query('ul')[0]).applyStyles('background-color:aqua');
2. extjs를 덮어쓰는 스타일시트
 
Extjs 프로젝트는 두 번째 방식으로 사용자 정의 스타일을 추천합니다.첫 번째 방식은 단점이 많다는 것을 알 수 있다.
1. 스크립트가 해석되어 실행된 후에야 효력이 발생하고 스크립트의 전체 응답 속도에 영향을 미친다.
2. 유지하기 어렵다.수천 줄의 스크립트에서 이런'양식 코드'를 유지하는 것은 아마도 쉬운 일이 아닐 것이다. 더군다나 코드가 일단 다른 사람에게 맡겨지면 더욱 바다에서 바늘 찾기가 될 것이다.
3.addClass 같은 방식을 사용하면 스크립트 오류를 일으킬 수 있습니다.extjs 원본 코드에서 스타일 이름을 선택기로 대량으로 사용합니다. 만약에 어떤dom에 다른class가 추가되면 이 코드들이 효력을 상실할 수 있습니다.
 
그러나 첫 번째 방법도 때때로 일종의 폭력 수단으로 작용하지 않을 수 없다.
 
따라서 extjs 스타일 이름을 덮어쓰는 방법으로 덮어쓰는 스타일 이름을 하나의 스타일시트 파일에 집중해야 합니다.예를 들어 저자의 프로젝트 중 jsp 파일의 스타일시트 도입 부분
  

<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/js/extJs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/js/extJs/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/css/web3.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/css/calendar-green.css" />

 
웹 3.css는 프로젝트의 사용자 정의 스타일시트입니다. 그 안에 대량의 extjs 스타일을 덮어씁니다.
다음은 웹3.css의 한 단락
  

 /*tab */
span.x-tab-strip-text{
	text-align:center;
}

/* body */
.x-panel-body  , .x-tab-panel-body{
	/*background-color: transparent;*/ /* panel ， ， */
}

/*tab ，tab */
ul.x-tab-strip-top{
	background-image: url("../images/table_titlebg.gif");
	background-repeat:repeat-x;
}

그 중의 스타일 이름은 extjs에서 가장 먼저 정의한 다음에 이 파일에서 덮어씁니다. (대부분의 경우 이 스타일의 일부 정의를 덮어쓰는 것이지 전부가 아닙니다.)어떤 ui 구성 요소의 스타일을 찾으려면 Firebug를 능숙하게 사용해야 합니다. 때로는 층층이 div를 찾아야 하고 인내심과 기교가 필요합니다.
다음은 extjs3에서 언급된 양식을 여러분과 공유합니다.본인은 전문적으로 전단 미화에 종사하지 않기 때문에 이 방면의 수준에 한계가 있기 때문에 이 글을 발표하는 것은 벽돌을 던져 옥을 끌어올리는 역할을 하기를 희망합니다.
1         .x-panel-body  , .x-tab-panel-body
이 스타일은 패널의 바디 부분입니다. ext-all을 참고하십시오.css나 Firebug는 원래의 정의를 이해합니다.개발 과정에서 우리는 패널의 배경색을 사용자 정의해야 한다. 예를 들어 어떤 경우 패널이 투명하기를 바란다. 이렇게 하면 다음과 같은 정의만 하면 된다.
.x-panel-body  , .x-tab-panel-body{
    background-color: transparent;
}
2         .x-grid3
마찬가지로grid 구성 요소의 배경색은 여기에 설정되어 있습니다. 설정하지 않으면 기본적으로 흰색입니다.
3         .x-grid3-hd-row td 헤더 스타일
4         .x-grid3-row 표의 줄마다 스타일
5         .x-grid3-row-alt 표 간격색, 프레임워크는 특정한 줄에 이 스타일을 추가합니다
6 Tab 헤드 문자 가운데
span.x-tab-strip-text{
         text-align:center;
}
    … …
Extjs의 양식은 비교적 많고 깨지기 때문에 한동안 찾아서 덮어써야 합니다. 개발 과정에서 시간을 내서 이 작업을 전문적으로 진행하는 것을 권장합니다. 이것은 코드의 유지보수와 이식에 매우 좋은 것입니다.