一个列表大致有如下之间的组件
Toolbar,GridPanel,PagingToolbar。
首先看工具栏
tbar: new Ext.Toolbar({
items : [
'市:', this.cityCombo, '-', '区县:', this.countyCombo, '-','局站:', this.officeCombo, '-',
'厂商:', this.factoryCombo,'-', 'OLT:', this.oltCombo, '-','过滤条件:', this.nameText,'-',
{text : '查询',iconCls : 'find', handler :this.doQuery,scope : this},'->','-',
{text : '按用户测试',iconCls : 'update', handler :this.userTest,scope : this},'-'
]
})
//this.cityCombo 这类代表下拉框 或者输入框之类的
然后有分页组件
bbar: new Ext.PagingToolbar({
pageSize : 30,
store : this.store,//数据源
firstText : '第一页',
nextText : '下一页',
prevText : '上一页',
refreshText : '刷新',
lastText : '最后一页',
beforePageText : '当前',
afterPageText : '页/共{0}页',
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
doLoad:function(C){ //为了点击下一页传递参数用
var B={};
A=this.paramNames;
B[A.start]=C;
B[A.limit]=this.pageSize;
B['cityId']=cityId;
B['countyId'] = countyId;
B['officeId'] = officeId;
B['oltId'] = oltId;
B['factoryId'] = factoryId ;
B['name'] = name ;
//B代表工具栏上面可选的查询条件
if(this.fireEvent("beforechange",this,B)!==false){
this.store.load({params: B});
}
},
emptyMsg : "没有记录"
}),
//表格列 可从Ext.grid.GridPanel中获取
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{header : 'xxxx',dataIndex:'instanceId', align:'center',width:100, hidden : true},
{header : 'xxxx', dataIndex:'geoName', align:'center', width:100, sortable : true},
{header : 'xxxx',dataIndex:'subGeoName', align:'center', width:100, sortable : true},
{header : 'xxxxx', dataIndex: 'officeName', align:'center', width: 100, sortable : true},
{header : 'xxxxx', dataIndex: 'factoryName', align:'center', width:100, sortable : true},
{header : '设备名称', dataIndex: 'instanceName',align:'center', width:260,sortable : true},
{header : 'xxxxxx', dataIndex: 'ip', align:'center', width:160, sortable : true},
{header : 'xxxxx', dataIndex: 'devType',align:'center', width:100, sortable : true },
{header : 'xxxx',dataIndex: 'userCount', align:'center', width:110, sortable : true},
{header : 'xxxx',dataIndex: 'test', align:'center', width:110, sortable : true, renderer: this.testRender}
]),
//获取数据源以及读取数据
this.store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : 'getXXXXXXX.action', method : 'POST'}),
reader : new Ext.data.JsonReader(
{totalProperty:'total',root:'root'},
///JSON格式的数据
[{name : 'instanceId'}, {name : 'geoName'}, {name : 'subGeoName'},
{name : 'officeName'}, {name : 'factoryName'}, {name : 'instanceName'}, {name : 'ip'},
{name : 'devType'},{name : 'userCount'}]
)
});
//下拉框
this.cityCombo = new Ext.form.ComboBox({
width : 80,
editable : false,
valueField : "geoid",//获取对象的属性
displayField : "geoname",//获取对象的属性
mode : 'local',
selectAllOn:true,
triggerAction : 'all',
allowBlank : true,
emptyText : '请选择',
store: new Ext.data.Store({
//请求数据源
proxy : new Ext.data.HttpProxy({url : '../getXXXXXr.action',method : 'POST'}),
reader : new Ext.data.JsonReader({}, [
{name : 'geoid'}, {name : 'geoname'}
])
})
});
分享到:
相关推荐
随便玩玩的EXTJS3.1的一个页面初学者可以看看, 可以用来学习学习。内容还是很丰富的。随便玩玩的EXTJS3.1的一个页面初学者可以看看, 可以用来学习学习。内容还是很丰富的。
Extjs 下拉列表
extjs界面生成,页面设计,可以用可视化的方式,生成一套extjs系统界面
用extjs写的页面例子,是一个系统,很合适初学者学习
ExtJS页面路由,指定了主页面然后实现的viewport切换路由
ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
用extjs4写的登录页面,希望对你有用,适合初学者
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
ExtJS项目 一个博客系统 ExtJS项目 一个博客系统
实现页面跳转问题,关于extjs的页面跳转问题。。
extjs资料extjs资料extjs资料extjs资料extjs资料
EXTJS页面编辑器,对于使用EXTJS作为项目界面技术支持的人,可以用该编辑器,可以快速的编辑生成你所需要的界面。
自己写的一个简单的EXTJS的例子,开发准备用.
EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端...
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
extjs2.0 画的一个带查询条件和查询结果的页面
一个ExtJs4.1.1版本MVC应用框架,不包含服务器端程序。
新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa