ExtJs 学习小笔记之表格

xiaoyeshen · 2014-09-15 21:13 · 1533次阅读

表格使用一般比较多,这里的小代码使用了展开信息、分组表头和合计行,图片如下(此处使用的死数据):

![][2]

小代码如下:

 Ext.onReady(function(){
	Ext.QuickTips.init();
    var xg = Ext.grid;
    // 合计
    var summary = new Ext.ux.grid.GridSummary();
    
    var renderSummary = function(o, cs, cm) {
		return gridSum(grid);
    }
    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '


	**学号:** {xh}



',
            '


	**姓名:** {xm}



',
            '


	**分数:** {fs}



',
            '


	**毕业日期:** {byrq}



'
        )
    });
    var group1 = [{}, {
				header : '分组1-1',
				colspan : 6,
				align : 'center'
			}, {}, {
				header : '分组1-2',
				colspan : 5,
				align : 'center'
			}];

	var group2 = [{}, {
				header : '分组2-1',
				colspan : 4,
				align : 'center'
			}, {
				header : '分组2-2',
				colspan : 2,
				align : 'center'
			}, {
				header : '',
				rowmerge:true,
				align : 'center'
			}, {
				header : '分组2-3',
				colspan : 3,
				align : 'center'
			}, {
				header : '分组2-4',
				colspan : 2,
				align : 'center'
			}];
	var group = new Ext.ux.grid.ColumnHeaderGroup({
		rows : [group1, group2]
	});
    var reader = new Ext.data.ArrayReader({
    		
		}, [
	       {name: 'xh'},
	       {name: 'xm'},
	       {name: 'xb'},
	       {name: 'fs'},
	       {name: 'byrq'},
	       {name: 'dw'},
	       {name: 'xh_'},
	       {name: 'xm_'},
	       {name: 'xb_'},
	       {name: 'fs_'},
	       {name: 'byrq_'}
	    ])
    var store = new Ext.data.Store({
    	proxy: new Ext.ux.data.PagingMemoryProxy(xg.dummyData),
        remoteSort:true,
    	reader: reader
    })
    var storeinit = new Ext.data.Store({
    	proxy: new Ext.ux.data.PagingMemoryProxy(xg.dummyData),
    	reader: reader
    })
    var cm = new xg.ColumnModel({
        defaults: {
            width: 15,
            sortable: true
        },
        columns: [
        	new Ext.grid.RowNumberer({header:'No'}),
            expander,
            {header: "学号", dataIndex: 'xh',summaryRenderer:function(o, cs, cm){return "合计";}},
            {header: "姓名", dataIndex: 'xm'},
            {header: "性别", dataIndex: 'xb'},
            {header: "分数", dataIndex: 'fs',summaryRenderer:renderSummary},
            {header: "毕业日期", dataIndex: 'byrq',width:20},
            {header: "单位", dataIndex: 'dw',fixed:true,width:40},
            {header: "学号", dataIndex: 'xh_'},
            {header: "姓名", dataIndex: 'xm_'},
            {header: "性别", dataIndex: 'xb_'},
            {header: "分数", dataIndex: 'fs_'},
            {header: "毕业日期", dataIndex: 'byrq_',width:20}
        ]
    });
    
    // 翻页排序时带上查询条件
    store.on('beforeload', function() {
		this.baseParams = {
			xm : Ext.getCmp('xmcx').getValue()
		};
	});
	
	// 每页显示条数下拉选择框
	var pagesize_combo = new Ext.form.ComboBox({
		name : 'pagesize',
		triggerAction : 'all',
		mode : 'local',
		store : new Ext.data.ArrayStore({
			fields : ['value', 'text'],
			data : [[4, '4条/页'], [8, '8条/页'], [10, '10条/页']]
		}),
		valueField : 'value',
		displayField : 'text',
		editable : false,
		value : 4,
		width : 70
	});
	
	// 改变每页显示条数
	var number = parseInt(pagesize_combo.getValue());
	pagesize_combo.on("select", function(comboBox) {
		bbar.pageSize = parseInt(comboBox.getValue());
		store.load({params:{start:0, limit:bbar.pageSize}});
	});
	
	// 分页工具栏
	var bbar = new Ext.PagingToolbar({
		pageSize : number,
		store : store,
		displayInfo : true,
		displayMsg : '显示{0}条到{1}条,共{2}条',
		plugins : new Ext.ux.ProgressBarPager(), // 分页进度条
		emptyMsg : "没有符合条件的记录",
		items : ['-', '  ', pagesize_combo, '-'
				, {
					text : '合计',
					icon :  "resources/images/yourtheme/dd/drop-add.gif",
					handler : function() {
						summary.toggleSummary();
					}
				}
				]
	});
	// 表格工具栏
	var tbar = new Ext.Toolbar({
		items : [{
				xtype : 'textfield',
				id : 'xmcx',
				name : 'xmcx',
				emptyText : '请输入姓名',
				width : 100,
				enableKeyEvents : true,
				listeners : {
					specialkey : function(field, e) {
						if (e.getKey() == Ext.EventObject.ENTER) {
							queryItem();
						}
					}
				}
			}, {
				text : '查询',
				handler : function() {
					queryItem();
				}
			}, {
				text : '刷新',
				handler : function() {
					store.load({params:{start:0, limit:bbar.pageSize}});
					Ext.getCmp('xmcx').setValue("");
				}
		}]
	});
	
    var grid = new xg.GridPanel({
        store: store,
        bbar : bbar,
        tbar : tbar,
        cm: cm,
        viewConfig: {
            forceFit:true
        },
        width: 700,
        height: 400,
        plugins: [expander,group,summary],
        collapsible: true,
        animCollapse: false,
        title: '表格综合演示六(表头分组)',
        renderTo: document.body
    });
    // 数据源加载
	store.load({params:{start:0, limit:4}});
    var win = new Ext.Window({
    	items:grid
    })
    win.show();
    function gridSum(){
    	var sum = 0;
    	new xg.GridPanel({
	    	store: new Ext.data.Store({
	    		reader : reader,
	    		data : xg.dummyData
	    	})
    	}).store.each(function(record){     
			sum += Number(record.data.fs);   
		});
		return sum;
    }
    // 查询表格数据
    var datazs1 = [['01','张三1','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
    var datazs4 = [['04','张三4','女','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
    var datali1 = [['11','李四1','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
    var dataww4 = [['31','王五4','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
    var datazl1 = [['41','赵六1','女','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
    var datazl4 = [['35','赵六4','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
    var datasq3 = [['35','孙七3','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
    var datasq7 = [['55','孙七7','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20']];
//    var datasq4 = [{xh:'51',xm:'孙七4',xb:'男',fs:100,byrq:'2014-8-20',dw:'人',xh_:'01',xm_:'张三1',xb_:'男',fs_:100,byrq_:'2014-8-20'}];
    
    function queryItem() {
		if(Ext.getCmp('xmcx').getValue()==''){
			Ext.Msg.alert("提示",'输入的姓名为空!')
			store.removeAll();
			store.load({params:{start:0, limit:bbar.pageSize}});
			return null;
		}
		if(Ext.getCmp('xmcx').getValue()=='张三1'){
			store.removeAll();
			store.loadData(datazs1);
		}else if(Ext.getCmp('xmcx').getValue()=='张三4'){
			store.removeAll();
			store.loadData(datazs4);
		}else if(Ext.getCmp('xmcx').getValue()=='李四1'){
			store.removeAll();
			store.loadData(datali1);
		}else if(Ext.getCmp('xmcx').getValue()=='王五4'){
			store.removeAll();
			store.loadData(dataww4);
		}else if(Ext.getCmp('xmcx').getValue()=='赵六1'){
			store.removeAll();
			store.loadData(datazl1);
		}else if(Ext.getCmp('xmcx').getValue()=='赵六4'){
			store.removeAll();
			store.loadData(datazl4);
		}else if(Ext.getCmp('xmcx').getValue()=='孙七3'){
			store.removeAll();
			store.loadData(datasq3);
		}else if(Ext.getCmp('xmcx').getValue()=='孙七4'){
			store.removeAll();
			store.loadData(datasq4);
		}else if(Ext.getCmp('xmcx').getValue()=='孙七7'){
			store.removeAll();
			store.loadData(datasq7);
		}else{
			Ext.Msg.alert("提示",'输入的姓名未找到!')
			store.removeAll();
			store.load({params:{start:0, limit:bbar.pageSize}});
		}
	}
});
Ext.grid.dummyData = [
    ['01','张三1','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['04','张三4','女','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['11','李四1','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['31','王五4','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['41','赵六1','女','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['35','赵六4','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['35','孙七3','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['55','孙七7','男','10','2014-8-20','人','01','张三1','男','10','2014-8-20'],
    ['51','孙七4','男','110','2014-8-20','人','01','张三1','男','10','2014-8-20']
//{xh:'51',xm:'孙七4',xb:'男',fs:100,byrq:'2014-8-20',dw:'人',xh_:'01',xm_:'张三1',xb_:'男',fs_:100,byrq_:'2014-8-20'}
];

里面的分页、合计、展开、表头分组和数据源都需要引入对应的外接js文件及css文件:

[PagingMemoryProxy.js][3]

[Ext.ux.grid.GridSummary.js][4]

[ProgressBarPager.js][5]

[RowExpander.js][6]

[ColumnHeaderGroup.js][7]

[ColumnHeaderGroup.css][8]

[Ext.ux.grid.GridSummary.css][9]

[2]: /images/Y(YN(YY@D96@P$4AL`2EJZD.jpg [3]: /images/PagingMemoryProxy.js [4]: /images/Ext.ux.grid.GridSummary.js [5]: /images/ProgressBarPager.js [6]: /images/RowExpander.js [7]: /images/ColumnHeaderGroup.js [8]: /images/ColumnHeaderGroup.css [9]: /images/Ext.ux.grid.GridSummary.css

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册