文档下载地址：http://download.csdn.net/detail/yeness/5805211
一、生成功能导航，拖拽一个tree panel加入“west”占位符
效果如下
二、建立“导航模型”
添加以下字段
三、建立数据访问“Ext.data.TreeStore”
1、 修改root属性
{
expanded:true
}
2、 修改“autoLoad”和“autoSync”属性
转换 container 为panel ，xtype:panel
3、 设置 “proxy”
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
}
4、 加入div选项
<body>
<divid="divNorth"></div>
<divid="divSouth"></div>
</body>
5、 设置model
6、 详细代码（model）
Ext.define('MyApp.model.GNLBModel',{
extend: 'Ext.data.Model',
fields: [
{
name: 'GNID'
},
{
name: 'PGNID'
},
{
name: 'text'
},
{
name: 'url'
}
]
});
7、 详细代码Ext.data.TreeStore
Ext.define('MyApp.store.GNLBTreeStore',{
extend: 'Ext.data.TreeStore',
requires: [
'MyApp.model.GNLBModel'
],
constructor: function(cfg){
var me= this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'MyApp.model.GNLBModel',
storeId: 'MyTreeStore',
root: {
expanded: true
},
proxy: {
type: 'ajax',
url:'http://localhost:1999/ext-4.2.1.883/MyLayoutDemo/treepanel.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});
8、 详细代码view(MyViewport.js)
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
id: 'MyViewPort',
layout: {
type: 'border'
},
initComponent: function(){
var me=
this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'north',
contentEl: 'divNorth',
height: 42,
id: 'MyNorth',
autoScroll: true
},
{
xtype: 'panel',
collapseMode: 'header',
region: 'west',
split: true,
stateId: 'MyWestStateID',
id: 'MyWest',
maxWidth: 400,
minWidth: 200,
width: 200,
animCollapse: true,
collapseFirst: false,
collapsed: false,
collapsible: true,
items: [
{
xtype: 'treepanel',
border: false,
fixed: true,
autoScroll:
true,
title: '',
store: 'GNLBTreeStore',
lines: false,
root: {
expanded:
true
},
rootVisible:
false,
viewConfig: {
}
}
]
},
{
xtype: 'tabpanel',
region: 'center',
id: 'MyCenter'
},
{
xtype: 'panel',
region: 'south',
contentEl: 'divSouth',
height: 100,
id: 'MySouth',
maxHeight: 100,
minHeight: 100,
animCollapse: true,
collapsed: true,
collapsible: true,
title: '版权、技术支持'
}
]
});
me.callParent(arguments);
}
});
9、 详细代码viw(Viewport.js)
Ext.define('MyApp.view.Viewport',{
extend: 'MyApp.view.MyViewport',
renderTo: Ext.getBody()
});
10、 详细代码 appjs
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
models: [
'GNLBModel'
],
stores: [
'GNLBTreeStore'
],
views: [
'MyViewport'
],
autoCreateViewport: true,
name: 'MyApp'
});