工作中常用的ExtJS控件使用实例

虽然版本陈旧，框架性的东西还是记录下来，若以后用到好依葫芦画瓢

/**
  *  Grid
  */
// 表格创建
	var sm = new Ext.grid.CheckboxSelectionModel();
	var operation = {
		header : '操作',
		dataIndex : 'orderId',
		align : 'center',
		width : 43,
		renderer : function(val) {
			var htmlStr = '<a onclick="payOrdList.edit(' + val + '); return false;" href="#">' +
						'<img style="border:0px" alt="编辑" src="' + buildURL('/pub/images/tbtn_amend.gif') + '"/></a>';
				htmlStr +=  '<span>|</span>' +
							'<a onclick="payOrdList.remove(' + val + '); return false;" href="#">' +
								'<img style="border:0px" alt="删除" src="' + buildURL('/pub/images/tbtn_delete.gif') + '"/></a>';
				return htmlStr;
		}
	};
	var cmItems = [sm, operation,
		{
			header : '列1',
			dataIndex : 'payMOnth',
			align : 'center',
			width : 57
		},
		{
			header : '列2',
			dataIndex : 'ordernum',
			width : 115
		},
		{
			header : '列3',
			dataIndex : 'startTime',
			// renderer : formateDateAction,
			width : 65
		},
		{
			header : '列4',
			dataIndex : 'nexttime',
			renderer : function(val) { return formateTime(val); },
			width : 116
		},
		// 其它列项
		{
			header : '列N',
			dataIndex : 'cusstatDesc',
			align : 'center',
			width : 63
		}
	];
	var cm = new Ext.grid.ColumnModel(cmItems);
	var gridConfig = Ext.apply(config, {
		sm : sm,
		cm : cm,
		viewConfig : {
			forceFit : false
		}, 
		loadMask : true，
		store : payOrdGridStore,
		tbar : toolbar
	});
	var grid = new Ext.grid.GridPanel(gridConfig);
	
	var rowdblclick = function(grid, rowIndex, eventobj) {
		var store = grid.getStore();
		var orderId = store.getAt(rowIndex).id;
		
		// ... ... ...
	};
	
	grid.on('rowdblclick', rowdblclick);
	
	// 使用SelectionModel 取已选择的行
	var selectedRows = grid.getSelectionModel().getSelections();
	if(selectedRows.length === 0) {
				Ext.Msg.alert(YoushangTips, '至少选择一条记录！');
				return ;
			}
			
			for(var i=0; i<selectedRows.length; i++) {
				orderIds.push(selectedRows[i].id);
			}
			// ... ... ...
	}
	
/**
  *  Grid Plugin(RowExpander),扩展了一个isCollapsed配置项(可指定行默认是否收起)
  */
  // 使用
  var rx = new Ext.grid.RowExpander({
		tpl : new Ext.Template('<div style="margin: 0px 0px 8px 56px;"><ul><li style="list-style-type:disc;"><h2>详细内容:</h2><p style="width: 450px; line-height: 150%; margin: 3px 0px 5px 25px;">{cOntent}<p/></li>{qDesc}</ul></div>'),
		isCollapsed : false,
		enableCaching : false
	});
	var cm = new Ext.grid.ColumnModel([rx,{
			header : '列1',
			dataIndex : 'recIndex',
			align : 'center',
			width : 56
		},
		// 其它列项
		{
			header : '列N',
			dataIndex : 'callstatDesc',
//			align : 'center',
			width : 100
		}
		]);
		var grid = new Ext.grid.GridPanel({
			store : store,
			tbar : toolbar,
			cm : cm,
			plugins : rx,
			loadMask : true
		});
		
    // RowExpander源文件
/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.grid.RowExpander = function(config){
	    Ext.apply(this, config);
	
	    this.addEvents({
	        beforeexpand : true,
	        expand: true,
	        beforecollapse: true,
	        collapse: true
	    });
	
	    Ext.grid.RowExpander.superclass.constructor.call(this);
	
	    if(this.tpl){
	        if(typeof this.tpl == 'string'){
	            this.tpl = new Ext.Template(this.tpl);
	        }
	        this.tpl.compile();
	    }
	
	    this.state = {};
	    this.bodyContent = {};
	};
	
	Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
	    header: "",
	    width: 20,
	    sortable: false,
	    fixed:true,
	    menuDisabled:true,
	    dataIndex: '',
	    id: 'expander',
	    lazyRender : true,
	    enableCaching: true,
	    isCollapsed : true,	// 默认行是否收缩标志
	
	    getRowClass : fun