extjs 4中TreePanel和GridPanel使用

本示例实现了以下功能：

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