www.gusucode.com > EXTJS界面的JSP人事管理系统源码程序 > EXTJS界面的JSP人事管理系统/WebRoot/WebRoot/workIn.js

    WorkIn = Ext.extend(Ext.Panel,{
	closable:true,
	layout:'fit',
	autoScroll : false,
	id : "workIn",
	title : "在职管理",
	margins : '1 2 2 0',
	renderTo : Ext.getBody(),
	createPanel:function(){
		var panel = new Ext.Panel({
			layout:"fit",
			width:1035,
			height:570,
			items:[this.workgroup]
		});
		return panel;
	},
	initComponent:function(){
	this.myDataIn = 
		[	[ '1','李五', '男', '开发部' ],
			[ '2','李四', '女', '开发部' ],
			[ '3','王五','女','销售部' ],
			[ '4','王八','男','业务部' ],
			[ '5','王123','男','调研部' ],
			[ '6','王八3234','女','市场部' ]
		];
	this.reader = new Ext.data.ArrayReader({}, [
       {name: 'no'},
       {name: 'name', type: 'string'},
       {name: 'sex', type: 'string'},
       {name: 'column2', type: 'string'}
    ]);
    this.workgroup = new Ext.grid.GridPanel({
    	id:'gg',
        store: new Ext.data.GroupingStore({
            reader: this.reader,
            data: this.myDataIn,
            sortInfo:{field: 'no', direction: "ASC"},
            groupField:'column2'
        }),

        columns: [
            {id:'no',header: "序号", width: 150, sortable: true, dataIndex: 'no'},
            {header: "姓名", width: 150, sortable: true, dataIndex: 'name'},
            {header: "性别", width: 150, sortable: true, dataIndex: 'sex'},
            {header: "部门", width: 150, sortable: true, dataIndex: 'column2'}
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} 人)'
        }),

        frame:true,
        width: 700,
        height: 450,
        collapsible: true,
        animCollapse: false,
        title: 'Grouping Example',
        iconCls: 'icon-grid'
    });
   	setTimeout(function(){Ext.getCmp('gg').getView().collapseAllGroups();},500);
		this.setVisible(true);
		if (!this.fp) {
			this.fp = this.createPanel();
		}
		this.add(this.fp);
	}
})