一个extjs列表页面的形成

最新推荐文章于 2026-06-22 11:35:58 发布

原创最新推荐文章于 2026-06-22 11:35:58 发布 · 194 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#json

extjs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用ExtJS构建包含工具栏、表格和分页功能的应用程序。详细展示了工具栏组件的配置方法，包括多个组合控件及按钮设置；表格列的设计，如列头、宽度、对齐方式等；以及分页组件的自定义样式与功能实现。

一个列表大致有如下之间的组件

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'}
                 ])
			})	
		});