입문 기본 학습 ExtJS 노트(1)_extjs

며칠간 대략적으로 책을 읽고 API를 확인했습니다. 머리 속에 기억나는 것이 별로 없기 때문에 직접 해보는 것이 더 좋습니다. 글쓰기를 시작해 보세요.
우선 인터페이스 프레임워크 구축을 시작하세요.
물론 첫 번째 단계는 ExtJ 관련 파일을 인용하는 것입니다.



Ext.Viewport 정의:
항목 속성 설정:
헤더:

코드 복사 코드는 다음과 같습니다.

　　　{
지역: '북',
html: '< h1 class="x-panel-header">CRM 관리 시스템',
autoHeight: false,
border: false,
margins: '0 0 5 0'
}

왼쪽 관리 트리 :

코드 복사 코드는 다음과 같습니다:

{
region: 'west',
collapsible: true,
title: '관리 메뉴',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded : true,
children: [
{
text: '시스템 설정',
leaf: true,
url: 'userlist'
},
{
text: '사용자 관리',
leaf: false,
children: [
{
id: 'userlist', text: 'userlist', leaf: true
}
]
},
{ id: 'news',
text: 'news',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function (node, event) {
//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' node.attributes.text '"')
event.stopEvent( );
var n = contentPanel.getComponent(node.id)
// Alert(n)
if (!n && node.leaf == true) { / / //해제되었는지 확인 패널 열기
n = contentPanel.add({
'id': node.id,
'title': node.text,
closable: true,
autoLoad: {
url: node.id '.html',
scripts: true
} // autoLoad 속성을 통해 대상 페이지를 로드해야 합니다. 스크립트 속성
})
contentPanel.setActiveTab(n)
}
}
}

특정 기능 패널 영역 오른쪽:

코드 복사 코드는 다음과 같습니다.

new Ext.TabPanel({
지역: 'center',
enableTabScroll: true,
activeTab: 0,
items: [{
id: 'homePage',
title: 'Homepage',
autoScroll: true,
html: '

홈페이지

}]
});

이렇게 하면 간단한 인터페이스가 구축됩니다. 인터페이스는 다음과 같습니다: