ExtJS入門基礎学習メモ(1)_extjs

数日間ざっと本を読み、APIを確認しました。頭ではあまり覚えられないので、実際にやって覚えた方が良いです。
まず第一に: インターフェイス フレームワークの構築を開始します。
最初のステップは、もちろん ExtJ の関連ファイルを引用することです:



Ext.Viewport を定義します:
項目の属性を設定します:
ヘッダー:

コードをコピーします コードは次のとおりです:

{
region: 'north',
html: '< h1 class="x-panel-header">CRM 管理システム'、
autoHeight: false、
border: false、
margins: '0 0 5 0'
}

左側の管理ツリー:

コードをコピー コードは次のとおりです。次のように:

{
region: 'west'、
collapsible: true、
title: 'Management Menu'、
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'
},
{
テキスト: 'ユーザー管理'、
リーフ: false、
子: [
{
id: 'ユーザーリスト'、テキスト: 'ユーザーリスト'、リーフ: true
}
]
},
{ id: 'news',
text: 'news',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function (node,event) {
//Ext.Msg.alert('ナビゲーション ツリーのクリック', 'クリックしました: "'node.attributes.text '"'); 🎜>event.stopEvent( );
var n = contentPanel.getComponent(node.id);
//alert(n); (!n && node.leaf == true) { / / //パネルを開く
n = contentPanel.add({
'id':node.id,
'title':node.text,
closeable: true,
autoLoad: {
url: node.id '.html',
scripts: true
} // autoLoad 属性を使用してターゲット ページをロードします。スクリプトを使用する場合は、追加する必要があります。スクリプト属性
});
}
contentPanel.setActiveTab(n);
}
}
}


右:

コードをコピー コードは次のとおりです。

new Ext.TabPanel({

region: 'center'、
enableTabScroll: true、
activeTab: 0、
items: [{
id: 'homePage'、
title: 'ホームページ'、
autoScroll: true、
html: '

ホームページ

'
}]
});


このようにして、シンプルなインターフェースが構築されます。インターフェースは次のとおりです: