Extjs4 gridPanel 例子

最新推荐文章于 2020-12-20 00:28:05 发布

原创最新推荐文章于 2020-12-20 00:28:05 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

Extjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ExtJS框架创建一个用户管理面板，包括数据模型定义、数据存储配置、表格列设置及分页工具栏等功能。通过JSONP远程加载数据，并实现了基本的UI操作如新增和刷新。

Ext.namespace("PROJECT.SYS.USER");

Ext.define('PROJECT.SYS.USER.GridPanel', {
			extend : 'Ext.panel.Panel',
			layout : 'border',
			pageSize : 10,
			border : false,
			initComponent : function() {
				var t = this;

				Ext.define('dataModel', {
							extend : 'Ext.data.Model',
							fields : ['id', 'name', 'userName', 'passWord',
									'age'],
							idProperty : 'id'
						});

				var store = new Ext.create('Ext.data.Store', {
							pageSize : t.pageSize,
							model : 'dataModel',
							remoteSort : true,
							proxy : {
								type : 'jsonp',
								url : 'sys/user-list.action',
								reader : {
									root : 'data',
									totalProperty : 'totalCount'
								}
							}
						});
				store.load({
							params : {
								start : 0,
								limit : t.pageSize
							}
						});
				var pagingBar = Ext.create('Ext.PagingToolbar', {
							store : store,
							displayInfo : '当前记录 {0} - {1} of {2}',
							emptyMsg : "暂无记录"
						});

				var columns = [{
							text : '编号',
							dataIndex : 'id',
							tooltip : '编号',
							sortable : true
						}, {
							text : '姓名',
							dataIndex : 'name',
							tooltip : '姓名',
							sortable : true
						}, {
							text : '用户名',
							dataIndex : 'userName',
							tooltip : '用户名',
							sortable : true
						}, {
							text : '密码',
							dataIndex : 'passWord',
							tooltip : '密码',
							sortable : true
						}, {
							text : '年龄',
							dataIndex : 'age',
							tooltip : '年龄',
							sortable : true
						}];

				var tb = Ext.create('Ext.toolbar.Toolbar');

				tb.add({
							text : '新增',
							iconCls : 'save',
							handler : Ext.Function.bind(t.addFn, t)
						});
				tb.add({
							text : '刷新',
							iconCls : 'refesh',
							handler : Ext.Function.bind(t.refeshFn, t)
						});

				this.gridPanel = Ext.create('Ext.grid.Panel', {
							title : '用户管理',
							columns : columns,
							bbar : pagingBar,
							region:'center',
							margins:'5 5 5 5',
							store : store,
							loadMask : true,
							viewConfig : {
								stripeRows : true,
								enableTextSelection : true
							}
						});

				this.items = [t.gridPanel]

				this.callParent(arguments);
			},
			addFn : function() {

			},
			refeshFn : function() {

			}

		});