一些EXTJS2.2使用例子

jarbee

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

虽然版本陈旧，框架性的东西还是记录下来，若以后用到好依葫芦画瓢
/**  *  Grid  */// 表格创建var sm = new Ext.grid.CheckboxSelectionModel();var operation = {header : '操作',dataIndex : 'orderId',align : 'center',width : 43,renderer : function(val) {var htmlStr = '<a  href="#">' +'<img style="border:0px" alt="编辑" src="' + buildURL('/pub/images/tbtn_amend.gif') + '"/></a>';htmlStr +=  '<span>|</span>' +'<a  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.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 : 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"> </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();