Extjs 4.2.x 关于RowExpander的问题

银点 2014-07-05 04:42:40



Ext.override(Ext.grid.plugin.RowExpander, { // Override to fire collapsebody & expandbody

    init: function(grid) {

        this.callParent(arguments);

        grid.getView().addEvents('collapsebody', 'expandbody');

    },

    toggleRow: function(rowIdx, record) {

        var me = this,

            view = me.view,

            rowNode = view.getNode(rowIdx),

            row = Ext.fly(rowNode, '_rowExpander'),

            nextBd = row.down(me.rowBodyTrSelector, true),

            isCollapsed = row.hasCls(me.rowCollapsedCls),

            addOrRemoveCls = isCollapsed ? 'removeCls' : 'addCls',

            ownerLock, rowHeight, fireView;





        // Suspend layouts because of possible TWO views having their height change

        Ext.suspendLayouts();

        row[addOrRemoveCls](me.rowCollapsedCls);

        Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);

        me.recordsExpanded[record.internalId] = isCollapsed;

        view.refreshSize();





        // Sync the height and class of the row on the locked side

        if (me.grid.ownerLockable) {

            ownerLock = me.grid.ownerLockable;

//            fireView = ownerLock.getView();

            view = ownerLock.lockedGrid.view;

            fireView=ownerLock.lockedGrid.view;

            rowHeight = row.getHeight();

            // EXTJSIV-9848: in Firefox the offsetHeight of a row may not match

            // it's actual rendered height due to sub-pixel rounding errors. To ensure

            // the rows heights on both sides of the grid are the same, we have to set

            // them both.

            row.setHeight(isCollapsed ? rowHeight : '');

            row = Ext.fly(view.getNode(rowIdx), '_rowExpander');

            row.setHeight(isCollapsed ? rowHeight : '');

            row[addOrRemoveCls](me.rowCollapsedCls);

            view.refreshSize();

        } else {

            fireView = view;

        }

        fireView.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);

        // Coalesce laying out due to view size changes

        Ext.resumeLayouts(true);

    },

});



//Ext.loader.setConfig({enabled:true});

Ext.onReady(function() {

	Ext.QuickTips.init();

	var store = new Ext.data.Store({

		

		fields:[

		    {name:'fileName',type:'string'},

		    {name:'room',type:'string'},

		    {name:'recordDate',type:'string'},

		  

		],

		data:[

		    {fileName:'文件1',room:'会议室1',recordDate:'2014-07-03'},

		    {fileName:'文件2',room:'会议室2',recordDate:'2014-07-03'},

		    {fileName:'文件3',room:'会议室3',recordDate:'2014-07-03'}

		],

		autoLoad:true

	});

	var expander = new Ext.grid.plugin.RowExpander({

		ptype:'rowexpander',

		rowBodyTpl:new Ext.XTemplate('<div class="detailData">pp</div>'),

		listensers:{

			expandbody:function(){

				console.info('fired');

			}

		}

	});

	

	 Ext.create('Ext.grid.Panel',{

	    xtype: 'row-expander-grid',

	    store: store,

	    renderTo:Ext.getBody(),

	    columns: [

	        {text: "文件名称", flex: 1, dataIndex: 'fileName'},

	        {text: "会议室",  dataIndex: 'room'},

	        {text: "录制日期", renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'recordDate'}

	    ],

	    width: 600,

	    height: 300,

	    plugins:expander,

	    collapsible: true,

	    animCollapse: false,

	    title: 'Expander Rows in a Collapsible Grid',

	    iconCls: 'icon-grid'

	});

});