26.Extjs 部门列表信息展示页面

/**
 * @author sux
 * @time 2011-1-14
 * @desc 部门信息显示
 */
deptInfoGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
    id: 'deptInfoPanel',
    //renderTo: Ext.getBody(), //渲染到body
    constructor: function(){
        Ext.QuickTips.init();
        this['store'] = new Ext.data.JsonStore({
            url: 'dept_list.action',//如果有值传入，会为该URL创建一个HttpProxy对象
            root: 'root',//JSON对象的key指定,这里指的是服务器传递过来的json变量的命名
             totalProperty: 'totalProperty',//这里指的是查询出来的条数，也是由服务器传递过来
            //record
            fields: ['deptId','deptName',
            'deptNum','deptMgr','deptRemark']//对象数组集合在实际应用中fields我们可以使用遍历list等方式往里面传值。
        });
        var rowNumber = new Ext.grid.RowNumberer(); //序列号    
        var checkbox = new Ext.grid.CheckboxSelectionModel(); //{默认是多选singleSelect: false}
        deptInfoGridPanel.superclass.constructor.call(this,{
             Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),//获取当前活动的tab
            height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
            /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
            monitorResize: true, 
            doLayout: function() { //必须在调用doLayout()方法，更新一下布局,Ext中表格自适应高度
                this.setWidth(document.body.clientWidth-205);
                this.setHeight(document.body.clientHeight-140);
                Ext.grid.GridPanel.prototype.doLayout.call(this); 
            } ,
            /**end**/
            viewConfig: {//表格视图的配置对象 
                forceFit: true,
                columnsText : "显示/隐藏列",//表格标题菜单中列对应的文字描述 
                sortAscText : "正序排列",//表格标题菜单中升序的文字描述 
                sortDescText : "倒序排列"//表格标题菜单中降序的文字描述 
            },
            sm: checkbox,//表格的选择模式，默认为Ext.grid.RowSelectionModel 
            columns: [
                rowNumber, checkbox,
                {
                    header: '部门编号',//表头文字 
                    dataIndex: 'deptId',//设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称
                    align: 'center'//列数据的对齐方式 
                },{
                    header: '部门名称',
                    dataIndex: 'deptName',
                    align: 'center'                
                },{
                    header: '部门人数',
                    dataIndex: 'deptNum',
                    align: 'center'
                },{
                    header: '部门经理',
                    dataIndex: 'deptMgr',
                    align: 'center'
                },{
                    header: '备注',
                    dataIndex: 'deptRemark',
                    name: 'deptRemark',
                    renderer: Ext.hrmsys.grid.tooltip.subLength,//设置列的自定义单元格渲染函数 
                    align: 'center'
                }],
            tbar: new Ext.Toolbar({//多行工具栏
                style: 'padding: 5px;',
                id: 'departToolbar',
                items: ['条目:',{
                    xtype: 'combo',
                     80,
                    triggerAction: 'all',
                    editable: false,
                    mode: 'local',
                    store: new Ext.data.SimpleStore({
                        fields: ['name','value'],
                        data: [[" ","全部"],["deptId","部门编号"],["deptName","部门名称"],["deptMgr","部门经理"]]
                    }),
                    id: 'condition_dept',
                    displayField: 'value',
                    valueField: 'name',
                    emptyText: '请选择'
                },'内容:',{
                    id: 'condition_dept_value',
                    xtype: 'textfield',
                    listeners : {
                        specialkey : function(field, e) {//添加回车事件
                            if (e.getKey() == Ext.EventObject.ENTER) {
                               queryDeptFn();
                            }
                        }
                    }
                },{
                    text: '查询',
                    tooltip: '查询部门',
                    iconCls: 'search',
                    hidden: 'true',
                    id: 'dept_query',
                    handler: queryDeptFn
                },{
                    text: '删除',
                    tooltip: '删除部门',
                    id: 'dept_delete',
                    iconCls: 'delete',
                    hidden: 'true',
                    handler: delDeptFn
                },{
                    text: '添加',
                    tooltip: '添加部门',
                    id: 'dept_add',
                    hidden: 'true',
                    iconCls: 'add',
                    handler: addDeptFn
                },{
                    text: '修改',
                    id: 'dept_update',
                    iconCls: 'update',
                    hidden: 'true',
                    tooltip: '修改部门',
                    handler: updateDeptFn
                }]
            }),
            bbar: new PagingToolbar(this['store'], 20)//分页工具栏
        });
        this.getStore().load({
            params:{
                start: 0,
                limit: 20
            }
        });
        //new Ext.Viewport().render();
    }
});

addDeptFn = function(){
    deptAddWin = new DeptAddWin();
    deptAddWin.show();
};

delDeptFn = function(){
    gridDel('deptInfoPanel','deptId', 'dept_delete.action');
};

updateDeptFn = function(){
    deptAddWin = new DeptAddWin();
    deptAddWin.title = '部门信息修改';
    var selectionModel = Ext.getCmp('deptInfoPanel').getSelectionModel();
    var record = selectionModel.getSelections();
    if(record.length != 1){
        Ext.Msg.alert('提示','请选择一个');
        return;
    }
    var deptId = record[0].get('deptId');
    Ext.getCmp('deptAddFormId').getForm().load({
        url: 'dept_intoUpdate.action',
        params: {
            deptId: deptId
        }
    })
    deptAddWin.show();
};

queryDeptFn = function(){
    var condition = Ext.getCmp('condition_dept').getValue();
    var conditionValue = Ext.getCmp("condition_dept_value").getValue();
    Ext.getCmp("deptInfoPanel").getStore().reload({
        params: {
            condition: condition,
            conditionValue : conditionValue,
            start: 0,
            limit: 20
        }
    })
};