一些EXTJS2.2使用例子

工作中常用的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.
 * [e-mail]
 *
 * 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 : function(record, rowIndex, p, ds){
	        p.cols = p.cols-1;
	        var content = this.bodyContent[record.id];
	        if(!content && !this.lazyRender){
	            content = this.getBodyContent(record, rowIndex);
	        }
	        if(content){
	            p.body = content;
	        }
	        if(this.isCollapsed) return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
	        if(!this.isCollapsed) return this.state[record.id] ? 'x-grid3-row-collapsed' : 'x-grid3-row-expanded';
	    },
	
	    init : function(grid){
	        this.grid = grid;
	        if(!this.isCollapsed) this.lazyRender = false;
	
	        var view = grid.getView();
	        view.getRowClass = this.getRowClass.createDelegate(this);
	
	        view.enableRowBody = true;
	
	        grid.on('render', function(){
	            view.mainBody.on('mousedown', this.onMouseDown, this);
	        }, this);
	    },
	
	    getBodyContent : function(record, index){
	        if(!this.enableCaching){
	            return this.tpl.apply(record.data);
	        }
	        var content = this.bodyContent[record.id];
	        if(!content){
	            content = this.tpl.apply(record.data);
	            this.bodyContent[record.id] = content;
	        }
	        return content;
	    },
	
	    onMouseDown : function(e, t){
	        if(t.className == 'x-grid3-row-expander'){
	            e.stopEvent();
	            var row = e.getTarget('.x-grid3-row');
	            this.toggleRow(row);
	        }
	    },
	
	    renderer : function(v, p, record){
	        p.cellAttr = 'rowspan="2"';
	        return '<div class="x-grid3-row-expander">&#160;</div>';
	    },
	
	    beforeExpand : function(record, body, rowIndex){
	        if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
	            if(this.tpl && this.lazyRender){
	                body.innerHTML = this.getBodyContent(record, rowIndex);
	            }
	            return true;
	        }else{
 	            return false;
 	        }
 	    },
 	
 	    toggleRow : function(row){
 	        if(typeof row == 'number'){
 	            row = this.grid.view.getRow(row);
 	        }
 	        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
 	    },
 	
 	    expandRow : function(row){
 	        if(typeof row == 'number'){
 	            row = this.grid.view.getRow(row);
 	        }
 	        var record = this.grid.store.getAt(row.rowIndex);
 	        var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
 	        if(this.beforeExpand(record, body, row.rowIndex)){
 	            this.state[record.id] = true;
 	            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
 	            this.fireEvent('expand', this, record, body, row.rowIndex);
 	        }
 	    },
 	
 	    collapseRow : function(row){
 	        if(typeof row == 'number'){
 	            row = this.grid.view.getRow(row);
 	        }
 	        var record = this.grid.store.getAt(row.rowIndex);
 	        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
 	        if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
 	            this.state[record.id] = false;
 	            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
 	            this.fireEvent('collapse', this, record, body, row.rowIndex);
 	        }
 	    }
 	});


  
/**
  *  Toolbar
  */
  var toolbar = new Ext.Toolbar({
		border : true,
		autoWidth : true,
		items : [{
			text : '按钮1',
			tooltip : '提示',
			iconCls : 'tb-distribute',
			hidden : !isAdmin,
			handler : function() {
				// ... ... ...
			}
		}
		, '-', {
			text : '按钮2',
			tooltip : '提示',
			iconCls : 'tb-customerview',
			handler : function() {
				// ... ... ...
			}
		}]
	});
	
/**
  *  DataStore
  */

var myStore = new Ext.data.Store({
		proxy : new Ext.data.XXXProxy({
			XXXFunc : function(params) {
				if (params && !params.start && !params.limit) {
					params.start = 0;
					params.limit = 700;
				}
			
				var conditions = this.filter.getValue();
				if(params.ownerId) {
					conditions.ownerId = params.ownerId;
				}
				
				var data = payOrdApi.findHeadInfo(params.start, params.limit, conditions);
				
				return {
					total : data.length,
					list : data
				};
			}.bind(this)
	}),

	reader : new Ext.data.JsonReader({
		root : 'list',
		totalProperty : 'total',
		id : 'orderId'
			} , ['orderId', 'payMOnth', /*... ... ...*/]
		)
	});
	
	myStore.load({
			callback : function() {
				// ... ... ...
				var num = this.getCount();
				// ... ... ...
			}
		});
	
/**
  *  Layout And View
  */
  var view = new Ext.Viewport({
			layout : 'fit',
			items : [{
					layout : 'border',
					defaults : {autoScroll : true},
					items : [{
						region : 'north',	
						title : '上部区域',
						height : 265,
						shim : false,
						collapsible: true,
						items : [panel]
					}, {
						id : 'addTrack_panel',
						hidden : !isAssignedFlag,
						region: 'east',
						title : '右部区域',
						width : 405,
						bodyStyle : 'padding-top:19px;',
						shim : false,
						collapsible: true,
						collapsed : true,
						items : [firstSingleTrackView.panel, singleTrackView.panel]
					}, {
						region: 'center',
						layout : 'fit',
						title : '中心区域',
						border: true,
						shim : false,
						items : [grid]
				}]
			}]
		});
		
		view.show();