Extjs主界面基础上继续生成导航(step 2)
来源:互联网 发布:电脑打字赚钱软件 编辑:程序博客网 时间:2024/05/22 02:14
文档下载地址: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'
});
- Extjs主界面基础上继续生成导航(step 2)
- Android周学习Step By Step(4)--界面布局
- 使用Automake,Autoconf生成Makefile(Step by step)
- 简易Fragement主界面导航
- Android主界面导航工具
- 数据库2(step by Step)
- Linux 学习 step by step (2)
- 正则表达式(2) step by step
- XCode主界面之导航区域介绍(三)
- Microsoft Expression Blend4 Step By Step 导航
- 导航界面
- 利用JDBC导出数据库并生成静态导航界面文件
- easyui主界面生成分析2
- 继续畅通工程(最小生成树)
- 狼奔代码生成基础上的改善(CodeSmith重新生成controller和views)
- ExtJs的菜单导航
- Extjs 继续起步:研究一下Panel
- 即时通讯系统(建立在ourMsg开源软件基础上)漂亮的界面来自DevComponents DotNetBar
- HDU_4239_Decoding EDSAC Data(模拟)
- Python 新手常犯错误
- mysqldump.exe 问题
- 统计元音 2027
- Cortex-A8上移植rt3070驱动出错
- Extjs主界面基础上继续生成导航(step 2)
- infopath 解析
- python set
- 标准C++ RTTI的仿MFC实现 - 只用2个宏来实现"根据对象名创建对象"
- 数据库之mysql存储过程 触发器
- 阿里集团IPO估值千亿
- poj 3114 Countries in War(Tarjan+floyd)
- 当xml带有命名空间时。dom4j的处理办法
- C#自定义事件