本示例实现了以下功能：
1.用TreePanel展现部门列表
2 .点击部门，可以显示此部门下所有的员工
在extjs 4中GridPanel的分页对于旧版本有所变化，具体变化可以参加下面提供的代码。
Ext.define('MyDesktop.EmployeeWindow', { extend: 'Ext.ux.desktop.Module', id: 'employee-win', init: function () { this.launcher = { text: '员工管理', iconCls: 'icon-grid', handler: this.createWindow, scope: this }; }, createWindow: function () { var desktop = this.app.getDesktop(); var win = desktop.getWindow('employee-win'); var deptStore = Ext.create('Ext.data.TreeStore', { model: 'Department', proxy: { type: 'ajax', url: '/department/getall' } }); var employeeStore = Ext.create('Ext.data.Store', { id: 'employeeStore', model: 'Employee', pageSize: 2, //autoLoad: {start: 0, limit: 2}, proxy: { type: 'ajax', url: '/employee/getpagedbydepartmentid', reader: { type: 'json', root: 'Data', totalProperty: 'Total' }, extraParams: { departmentId: 0 } } }); if (!win) { win = desktop.createWindow({ id: 'employee-win', title: '员工信息', 740, height: 480, iconCls: 'icon-grid', layout: 'border', items: [{ region: 'west', split: true, margins: '2 0 5 5', 275, minSize: 100, maxSize: 500, xtype: 'treepanel', useArrows: true, root: { Name: '所有部门', Id: 0, expanded: true, selected: true }, rootVisible: true, store: deptStore, singleExpand: true, columns: [{ xtype: 'treecolumn', text: '名称', flex: 2, sortable: true, dataIndex: 'Name' }], listeners: { afterrender: function (tree) { tree.getSelectionModel().select(0); }, itemclick: function (tree, record) { employeeStore.currentPage = 1; employeeStore.load({ start: 0, limit: 2, params: { departmentId: record.data.Id } }); } } }, { region: 'center', layout: 'card', margins: '2 5 5 0', border: false, xtype: 'grid', store: employeeStore, columns: [{ text: 'Id', dataIndex: 'Id' }, { text: '编号', dataIndex: 'Number' }, { text: "姓名", dataIndex: 'Name' }, { text: "部门", dataIndex: 'Department', renderer: function (value) { return value.Name; } }, { text: "性别", dataIndex: 'Gender', renderer: function (value) { return value == 0 ? '女' : '男'; } } ], bbar: Ext.create('Ext.PagingToolbar', { store: employeeStore, displayInfo: true, displayMsg: '显示 员工 {0} - {1} / {2}', emptyMsg: '没有员工信息' }) } ], tbar: [{ text: '添加', tooltip: '添加员工信息', handler: function () { var addWin; if (!addWin) { addWin = Ext.create('widget.window', { title: '添加员工信息', 400, modal: true, resizable: false, items: [{ xtype: 'form', frame: true, bodyPadding: '10 10 0', url: '/employee/create', defaults: { anchor: '100%', allowBlank: false, msgTarget: 'side', labelWidth: 50 }, defaultType: 'textfield', items: [{ fieldLabel: '姓名', name: 'name' }, { fieldLabel: '性别', name: 'Gender', value: '0' }], buttons: [{ text: '保存', formBind: true, handler: function () { var form = this.up('form').getForm(); var tree = win.items.items[0]; var selModel = tree.getSelectionModel(); var selected = selModel.getSelection(); var dept = null; if (selected.length > 0) { dept = selected[0].data; } if (form.isValid()) { form.submit({ params: { Number: dept == null ? 0 : dept.Id }, waitTitle: '添加员工信息', waitMsg: '正在处理', success: function (form, action) { form.reset(); employeeStore.load(); }, failure: function (form, action) { Ext.Msg.alert('添加员工信息', '添加员工信息失败'); } }); } } }, { text: '重置', handler: function () { this.up('form').getForm().reset(); } }] }] }); } addWin.show(); } }, '-', { text: '修改', tooltip: '修改员工信息', iconCls: 'update', handler: function () { var grid = win.items.items[0]; var selModel = grid.getSelectionModel(); var selected = selModel.getSelection(); if (selected.length == 0) { Ext.Msg.alert('修改', '请选择员工'); return; } var employee = selected[0].data; var updateWin; if (!updateWin) { updateWin = Ext.create('widget.window', { title: '修改员工信息', 400, modal: true, items: [{ xtype: 'form', frame: true, bodyPadding: '10 10 0', url: '/employee/update', defaults: { anchor: '100%', allowBlank: false, msgTarget: 'side', labelWidth: 50 }, defaultType: 'textfield', items: [{ xtype: 'hiddenfield', name: 'id', value: employee.Id }, { fieldLabel: '名称', name: 'name', value: employee.Name }, { xtype: 'textareafield', fieldLabel: '部门', name: 'number', value: employee.Number }, { fieldLabel: '性别', name: 'gender', value: employee.Gender }], buttons: [{ text: '保存', formBind: true, handler: function () { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ waitTitle: '修改员工信息', waitMsg: '正在处理', success: function (form, action) { form.reset(); employeeStore.load(); }, failure: function (form, action) { Ext.Msg.alert('更新员工信息', '更新员工信息失败'); } }); } } }, { text: '重置', handler: function () { this.up('form').getForm().reset(); } }] }] }); } updateWin.show(); } }] }); } win.show(); return win; } });