PDA

View Full Version : How to stop mousedown event of outer grid



zhaoshixuan
8 Feb 2012, 5:55 PM
Dears,
I used nested grid and encountered a problem.
When I click the child grid, the parent will fire 'mousedown', too.
In child grid, I used stopEvent and stopPropagation (http://tmstest/ext-3.3.1/docs/source/EventManager.html#method-Ext.EventObject-stopPropagation)(). They didn't work.
Could someone give me an advice?
BTW, My purpose is that when I click the outer grid, only the outer grid fires its events.
When I click the child grid, only the child fires its events.
I follow the implementation as this example:



Ext.onReady(function(){



var testData=[



["lugreen","?",26,[["??",100],["??",150]]]



,["lisi","?",25,[["??",100],["??",150]]]



,["zhangsan","?",27,[["??",120],["??",158]]]



];



//



storeTest= new Ext.data.SimpleStore({



fields: ["name","sex","age","grade"]



,data: testData



});



var expander = new Ext.grid.RowExpander({



tpl : new Ext.XTemplate(



'<div class="detailData">',



'',



'</div>'



)



});



expander.on("expand",function(expander,r,body,rowIndex){



//?? grid



window.testEle=body;



//alert(body.id);



if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){



//alert("a");



var data=r.json[3];



var store=new Ext.data.SimpleStore({



fields: ["class","degrade"]



,data:data



});



var cm = new Ext.grid.ColumnModel([



{header: "??",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true}



,{header: "??",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true}



]);



Ext.DomQuery.select("div.detailData")[0];



var grid = new Ext.grid.EditorGridPanel(



{



store:store,



cm:cm,



renderTo:Ext.DomQuery.select("div.detailData",body)[0],



autoWidth:true,



autoHeight:true



}



);







}



});



testData.push(["ranking","?",26,[["EXT",120],["FEED",158]]] );



//var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});



var cm = new Ext.grid.ColumnModel([



expander



,{header: "??",dataIndex: 'name',width: 50,hideable:false,sortable:false}



,{header: "??",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true}



,{header: "??",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true}



]);



var grid = new Ext.grid.EditorGridPanel(



{



id:'testgrid',



store:storeTest,



cm:cm,



renderTo:"grid1",



width:335,



autoHeight:false,



height:280,



listeners:{







click: {



element: 'el', //bind to the underlying el property on the panel



fn: function(){ console.log('click el'); }



}



},tbar : [{



xtype : 'lovcombo',



mode : 'local',



text : 'ddd',



store : new Ext.data.ArrayStore({



idIndex : 0,



fields : ['value', 'label'],



data : [['0', 'Hide rate type & per'],



['1', 'Hide AP Billing Report#'],



['2', 'Hide Approve/Reject By'],



['3', 'Hide payment information']]



}),



valueField : 'value',



displayField : 'label',



width : 300,



name : 'dd',



listeners : {



change : function() {



// this.getValue();



alert(this.getValue());



}



},



scope : this



}],



plugins:[expander]



}



);



});

mitchellsimoens
9 Feb 2012, 7:22 AM
You may just have to live with it. You have a beforeedit you could return false depending on where the click was done.