PDA

View Full Version : Events between Grid and Panel



Robert82
14 Oct 2009, 12:40 AM
Hello,

i'm new with ExtJS, so i have several questions. One of them is about the event handling. I read some tutorials and articles, but i couldn't find the answer.

i have a panel "detailView" and a grid "myGrid". The grid fires an event cellclick, now i want to add an listener to "detailView" that the panel can react when the event is fired.

Both, panel and grid, are located in an Ext.Window



//panel for documentView
var doc = new Ext.Panel({
title: 'DocumentList',
width: 200,
height: 500,
layout:'fit',
items:[{
xtype:'mygrid',
border:false,
autoScroll:true
}]
});

//panel for details
var details = new Ext.Panel({
title: 'Details View',
width: 300,
height: 500,
layout:'fit',
items:[{
xtype:'detailView',
border:false,
autoscroll:true
}]
});

var window = new Ext.Window({
title: 'Application',
width: 1000,
height:700,
layout:'table',
layoutConfig: {
columns: 3,
rows:2
},
items:[doc
,details
]
});


the xtype-def for the grid


//namespace for the project
Ext.ns("App");

App.MyGrid = Ext.extend(Ext.grid.GridPanel, {

//configurations
border:false,

initComponent: function(){

var config = {
store: new Ext.data.SimpleStore({
id:0,
fields:[{
name:'Document'
}],
data:[
['document1'],
['document2']
]
}),
columns:[{
id:'name',width:200,dataIndex:'Document'
}]
,tbar: [{
text:"Search"
,iconCls: 'icon-search'
,scope: this
}]
,viewConfig:{forceFit:true}

}; //eo config

//apply config
Ext.apply(this, Ext.apply(this.initialConfig,config));

//call superclass
App.MyGrid.superclass.initComponent.apply(this,arguments);

this.mon(this,'cellclick',function(grid, rowIndex, columnIndex, e){
return rowIndex; //only a sample
},this);


} //eo initComponent




});

Ext.reg('mygrid', App.MyGrid);


and in my panel "detail View" i want to listen the event, but it doesn't work


Ext.ns(MyApp');

MyApp.detailView = Ext.extend(Ext.Panel, {

//soft config
border: false

,initComponent: function(){

var config = {
viewConfig:{forceFit:true}

};

// apply to config
Ext.apply(this,config);
Ext.apply(this.initalConfig,config);

// call superclass
Ext.cruise.uiservice.detailView.superclass.initComponent.call(this);

//install event handlers
this.mon(App.MyGrid,'messageEvent',function(e){
alert("event from grid") //sample
},this);


}


});

//register x-type
Ext.reg('detailView', MyApp.detailView);


Can anyone help me?
Regards,
Robert

aconran
14 Oct 2009, 6:16 AM
Hello Robert -

You are trying to setup an event listener on the Class itself; not on an instance of the class. This is not what you want.

You need to get a reference to the instance of App.MyGrid and setup your event listener. Take a look at the Data Binding example as this is what you are trying to achieve.
http://www.extjs.com/deploy/dev/examples/grid/binding-with-classes.html

Robert82
16 Oct 2009, 4:47 AM
Thanks for the link, this is one problem i have to solve :)

After a look around the code, i have a problem. Firebug tells me, that

Ext.StoreMgr.get('myDocStore').load();My classes look like the following:

My docStore

Ext.ns('App');

App.DocumentStore = function(){
var config = config || {};
Ext.applyIf(config,{
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN',
totalrecords: '@total'
}, [
{name: 'Author', mapping: 'ItemAttribute > Author'},
'Title',
'Manufactorer',
'ProductGroup',
'DetailPageURL'
])
});
App.DocumentStore.superclass.constructor.call(this,config);
};

Ext.extend(App.DocumentStore,Ext.data.Store);
myGrid


//namespace for the project
Ext.ns("App");

App.MyGrid = Ext.extend(Ext.grid.GridPanel, {

//configurations
border:false,
height:null,
width:null,
autoScroll:true,
myElement:null,


initComponent: function(){

var config = {

store: new Ext.cruise.uiservice.DocumentStore({
storeId: 'myDocStore',
url: 'sheldon.xml'
}),
columns:[{
header:'DocTitle',width:200,dataIndex:'Title'
}]
,tbar: [{
text:"Search"
,iconCls: 'icon-search'
,scope: this
}]
,viewConfig:{forceFit:true}

}; //eo config

//apply config
Ext.apply(this, Ext.apply(this.initialConfig,config));

//call superclass
App.MyGrid.superclass.initComponent.apply(this,arguments);

} //eo initComponent




});

Ext.reg('mygrid', App.MyGrid);


and in my main class i want to put both together in a window


var window = new Ext.Window({
title: 'Publication Application',
width: 1000,
height:700,
layout:'table',
layoutConfig: {
columns: 3,
rows:2
},
items:[doc
,details
]
});and after that i call the following


window.show(this);
Ext.StoreMgr.get('myDocStore').load();The grid and the window are pictured, but the store within the grid is empty and i get an error

Ext.StoreMgr.get("myDocStore") is undefined
Ext.StoreMgr.get('myDocStore').load();\r\n
Thx XML file is in the same folder like the index.html.
Can u help me?

Regards,
Robert