extjs一个普通页面里面有什么 博客分类： g4studioextjs extjsg4studio
现在又在做一个二次开发.(上回是jeecms，这回是G4Studio)。写这篇文章的目的是理清自己的思路，同时积累些二次开发的心得。
二次开发一般大家都是找个合适的开源程序加以运用，来实现快速开发的。
一开始接触，总是喜欢“东张西望”一会，可能是我以前没有做经验总结的原因。首先，我们就要找到核心部分，即最重要的配置文件类似于web.xml（在G4Studio中是struts-config.xml）运气好的话，里面会有注释的，不好的话，一般从那些名字可以看出一些名堂出来的。往小的方向看：关键是要弄懂你自己要做的那部分，对整体的印象要求不是很高。往大的方向看：要基本弄懂这个项目大体框架，怎么实现的，构成的，哪些功能主要是在哪个项目位置，怎么分布的。
我自己接触地不是很多，只能谈谈自己知道的东西。
公共部分：一般至少会包含一个常量类，以及公共方法类（像选择弹窗，字典下拉列表）
页面部分：aaa.js和aaa.jsp
aaa.jsp里面主要是import一些需要的js，还有一些数据的过度
页面最重要的内容是在js里面：
首先是个Ext.onReady.(在ExtJs库文件及页面内容加载完后，ExtJs就会执行onReady里面的函数)。然后就是那个函数里面就是真正的内容了：（我谈的是我自己接触的，仅供借鉴观赏）
1.一个Ext.form.Form.FormPanel，一种专门用于管理表单中输入字段的布局，用来提供搜索参数，实现搜索功能。
var queryForm = new Ext.form.FormPanel({
region : 'north',
title : '<span class="commoncss">查询条件</span>',
collapsible : true,
labelWidth : 50,
labelAlign : 'right',
bodyStyle : 'padding:3 5 0',
buttonAlign : 'center',
height : 95,//65+行数*30
items : [{}],
buttons : [{
text : '查询',
iconCls : 'previewIcon',
handler : function() {
//查询方法
}
}, {
text : '重置',
iconCls : 'tbar_synchronizeIcon',
handler : function() {
xxxForm.getForm().reset();//表单重置
}
}]
});
参数：region ：布局的位置（如north）
title ：标题
collapsible ：是否可以折叠
labelAlign：标签对齐方式
items ：一个独立的容器（里面可以放置隐藏域，文本框，下拉列表等）
2.一个Ext.grid.ColumnModel，用来显示搜索出的结果
var cm = new Ext.grid.ColumnModel([ rownum, {
header : 'ID',
dataIndex : 'id',
hidden : true,
sortable : true
}, {
header : 'ID',
dataIndex : 'id',
hidden : true,
sortable : true
}, {
header : 'ID',
dataIndex : 'id',
hidden : true,
sortable : true
}, {
header : 'ID',
dataIndex : 'id',
hidden : true,
sortable : true
}, {
header : '备注',
dataIndex : 'memo',
hidden : false,
sortable : true
}]);
里面的构造参数是一个config组成的数组，参数有：
header：头部名称
dataIndex ：store中药绑定的字段名称
sortable：是否支持排序
hidden：是否隐藏
renderer ：function 可以使用这个构造参数格式化数据（不是很懂，直接用上了）
3.一个Ext.data.Store，是Ext中用来进行数据交换和数据交互的标准中间件，作用是：从后台获取数据并将其转换成Record供页面使用。（即页面的grid等就可以使用了） 创建完毕之后，执行store.load()就是实现这个转换过程。
var store = new Ext.data.Store({
//获取数据的方式
proxy : new Ext.data.HttpProxy({
url :'请求链接'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'TOTALCOUNT',
root : 'ROOT', //json中列表数据根节点
}, [{
name : 'id'//对应字段name
}, {
name : 'id'
}, {
name : 'id'
}, {
name : 'id'
}, {
name : 'id'
}, {
name : 'id'
}, {
name : 'id'
}])
});
通过proxy从某个路径获取原始资源，然后再通过reader转化成record实例（分页的话，用 totalProperty记录下总条数）
4.一个new Ext.PagingToolbar 分页工具栏
var bbar = new Ext.PagingToolbar({
pageSize : number,
store : store,
displayInfo : true,
displayMsg : '显示{0}条到{1}条,共{2}条',
plugins : new Ext.ux.ProgressBarPager(), //分页进度条
emptyMsg : '没有符合条件的记录',
items : [ '-', ' ', combo ]//combo为你定义的下拉列表
});
pageSize : 总条数
displayMsg : '显示{0}条到{1}条,共{2}条',
emptyMsg : "没有符合条件的记录",
items 一般里面包含着个下拉列表
对这个下拉列表进行事件监听：
combo.on("select",function(){})实现store的reload
5.一个Ext.Toolbar表格工具栏 主要属性items，一般是在这里提供，新增，修改，删除，刷新等功能
items : 用到的参数有：text、iconCls、id、handler
var tbar = new Ext.Toolbar({
items : [{
text : '新增',
iconCls : 'addIcon',
id : 'id_tbi_add',
handler : function() {
addInt();
}
},{
......//按钮属性
handler : function() {
//要调用的方法
}
}]
});
6.一个Ext.grid.GridPanel 最重要的表格实例
我们在这里将store、cm、tbar、bbar扔进去，当然你还有其他一些属性
var grid = new Ext.grid.GridPanel({
title : '',
height : 360,
id : 'id',
autoScroll : true,
frame : true,
region : 'center',
store : store, // 数据存储
stripeRows : true, // 斑马线
cm : cm, // 列模型
tbar : tbar, // 表格工具栏
bbar : bbar,// 分页工具栏
viewConfig : {// 不产横向生滚动条, 适用于列数比较少的情况
forceFit : true
},
loadMask : {
msg : '正在加载数据,请稍等...'
}
});
剩下的就是一些监听事件，及操作方法的实现像新增、查询、重置、删除等几个基本操作