一些EXTJS2.2使用例子

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

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

/**
  *  Grid
  */
// 表格创建
	var sm = new Ext.grid.CheckboxSelectionModel();
	var operation = {
		header : '操作',
		dataIndex : 'orderId',
		align : 'center',
		width : 43,
		renderer : function(val) {
			var htmlStr = '' +
						'编辑';
				htmlStr +=  '|' +
							'' +
								'删除';
				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
  • 详细内容:

    {cOntent}

  • {qDesc}
'), 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. * [email protected] * * 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 '
 
'; }, 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();

你可能感兴趣的:(前端【浅尝辄止!】)