PDA

View Full Version : Mutiple Grid in an application return Null Selection on selectChange



jainman
11 Mar 2012, 7:21 AM
I am a newbee to ExtJs and trying to modify the sample application (Pandora) with my Controller
I have added two grids in my application. The application is working fine when I load it first time.

But if I select another grid, I get the selectionChange event with Null array of selected item. I am suspacting that I am using using two SelectionChange events in my controller and the controller is not able to resolve the correct class correponding to that, so it may be returning a NULL selected item.

Please help to resolve this issue


I get following exception
/*Error is reported at this place with exception
Uncaught TypeError: Cannot call method 'get' of undefined
*/

I have tried several things but still there is problem. Here is my Sample code. I request to solve my problem


Ext.define('MYMeshup.controller.MYApps', {
extend : 'Ext.app.Controller',

refs : [{
ref : 'mYAppsGrid',
selector : 'myappsgrid'
}, {
ref : 'mYAppServiceGrid',
selector : 'myappservicegrid'
}],

stores : ['MYApps', 'MYAppService'],

init : function() {
console.log('*********onMYApps init! ');
this.control({
'myappsgrid' : {
selectionchange : this.onMYAppSelect
}
});

this.control({
'myappservicegrid' : {
selectionchange : this.onMYAppServiceSelect
}
});

// Listen for an application wide event
this.application.on({
meshupappstart : this.onMYAppsStart,
scope : this
});
},

onLaunch : function() {

},

onMYAppsStart : function(myapp) {
var store = this.getMYAppsStore();
store.load({
callback : this.onMYAppsLoad,
params : {
// myapp: myapp.get('id')
},
scope : this
});



},

onMYAppsLoad : function() {
console.log('*********onMYAppsLoad ! ');
var store = this.getMYAppsStore(), selModel = this.getMYAppsGrid()
.getSelectionModel();
store.clearFilter();
selModel.select(store.first());

},

onMYAppSelect : function(selMYAppModel, selection) {

var myappselectedid = selection[0].get('id');
console.log('*********onMYAppSelect ! ' + itappselectedid);
var store = this.getMYAppServiceStore();
store.removeAll(true);
store.load({
callback : this.onMYAppServiceLoad,
params : {
myappid : myappselectedid
},
scope : this
});


},

onMYAppServiceLoad : function(appservice, request) {
console.log('*********onMYAppsLoad ! ');
var store = this.getMYAppServiceStore(), selModel = this
.getMYAppServiceGrid().getSelectionModel();
store.clearFilter();
store.filter('appid', request.params.myappid);
selModel.select(store.first());



},

onMYAppServiceSelect : function(selMYAppServiceModel, selection) {
var myappserviceselectedid = selection[0].get('hostedon');
/*Error is reported at this place with exception
Uncaught TypeError: Cannot call method 'get' of undefined
*/


console.log('*********onMYAppServiceSelect ! '
+ myappserviceselectedid);

var serverstore = this.getServerPieStore();
serverstore.load();
serverstore.clearFilter();
serverstore.filter('hostname', itappserviceselectedid);

}
});

mitchellsimoens
12 Mar 2012, 6:55 AM
Is it a case that since selectionchange will fire if a row is unselected and again for selection that this is happening when the row is unselected?

jainman
12 Mar 2012, 8:12 AM
The behavior is -
Whent this the application loads -
it load first grid MyAppGrid and than load MyAppServiceGrid with the filter of AppID.

It work fine.
Now If I select any row in MyAppGrid I get this error
If Now I select another row in MyAppGrid , It works again,

Somehow I feel that the event is not able to correctly map to Class.

I am really first time working on JS (ExtJs) and don't understand many things.

Request you to provide solution.

mitchellsimoens
12 Mar 2012, 8:17 AM
So it sounds like the error is happening with the already selected row is being unselected. You need to check to see if selection.length is greater than zero.

jainman
12 Mar 2012, 11:07 PM
Thanks a lot mitchellsimoens :):)

If put a following check around all the callbacks of slectionchange if selection.length){

}

With that problem is solved