PDA

View Full Version : Controlling one combobox by selection of another combobox



c5m7b4
29 Feb 2012, 8:36 AM
Hello all,
new to Ext JS. Hopefully someone here can help me out a little bit. I have one combobox and based on wether a user selects 'Single Store', 'Group', or 'Sub-Group I want it to call back to a php file and fill the second combobox with the appropriate query. So far I am getting the combobox select function to make the call to the php file and the php file sees the post and is returning a json file back but the second combobox does not populate. Here is my code. Please help me, this is killing me, lol:

groupStore is the one that I am fighting with. It will not populate comboGroup??


Ext.regModel('stypes',{
fields:[
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});

Ext.regModel('sgroups',{
fields:[
{name:'id',type:'int'},
{name:'name',type:'string'}
]
});

var searchTypes = {
stypes:[
{
id:1,
name:'Single Store'
},
{
id:2,
name:'Group'
},
{
id:3,
name:'Sub-Group'
}
]
};

var searchStore = Ext.create('Ext.data.Store',{
autoLoad:true,
model:'stypes',
data: searchTypes,
proxy:{
type:'memory',
reader:{
type:'json',
root:'stypes'
}
}
});

var groupStore = Ext.create('Ext.data.Store',{
autoLoad:true,
autoSync:true,
pruneModifiedRecords:true,
model:'sgroups',
proxy:{
type:'ajax',
url:'data/queryGroups.php',
method:'POST'
},
init:function(){
console.log('groupStore has been instantiated');
}
});

var search = Ext.create('Ext.form.Panel',{
frame:true,
title:'Search',
alias:'widget.searchForm',
bodyPadding:10,
fieldDefaults:{
labelAlign:'left',
labelWidth:40,
anchor:'100%'
},
items:[
{
xtype:'textfield',
name:'searchText',
fieldLabel:'Search'
},
{
xtype:'combobox',
id:'combo1',
fieldLabel:'Type',
store: searchStore,
editable:false,
allowBlank:false,
foreceSelection:true,
valueField:'id',
displayField:'name',
mode:'local',
triggerAction:'all',
listeners:{
'select':function(){
var selVal = this.getValue();
console.log(selVal);
groupStore.load({
url:'data/queryGroups.php?id' + selVal,
method:'POST',
params:{'id':selVal}
});
}
}
},
{
xtype:'combobox',
id:'combogroup',
fieldLabel:'Select',
store:groupStore,
displayField:'group_name',
}
],
dockedItems:[
{
xtype:'toolbar',
dock:'bottom',
ui:'footer',
items:[
{
xtype:'component',
flex:1
},
{
xtype:'button',
text:'Search',
name:'btnSearch'
}
]
}
]
});

Ext.define('DMS.view.store.navigation',{
extend:'Ext.panel.Panel',
alias:'widget.navigation',
width:250,
collapsible:true,
items:[search]
});

mitchellsimoens
29 Feb 2012, 11:59 AM
Add a listener for the select event on one combobox and then do the action you want on the other combobox.

c5m7b4
29 Feb 2012, 12:06 PM
That is what I am attempting to do


listeners:{
'select':function(){
var selVal = this.getValue();
console.log(selVal);
groupStore.load({
url:'data/queryGroups.php?id' + selVal,
method:'POST',
params:{'id': selVal}
});
}
}

I actually get the json formatted data but the other combox never loads anything??

skirtle
1 Mar 2012, 11:07 AM
OK, let's see what I can come up with...

Firstly, please use [CODE] tags when posting code. I've added them in retrospectively to your existing posts.

Ext.regModel is not the correct way to define a model. Just use Ext.define to extend Ext.data.Model. Where did you come across Ext.regModel? If it's in the docs somewhere then they need to be updated.

Your first combobox is an explosion of config options, some of which are in conflict or just don't exist. Here's my attempt at simplifying it (note I haven't actually tried this code so be prepared to fix any small mistakes I've made):


{
xtype: 'combobox',
id: 'combo1', // static ids are bad, I highly recommend removing this
fieldLabel: 'Type',
store: [[1, 'Single Store'], [2, 'Group'], [3, 'Sub-Group']],
editable: false,
listeners:{
change: function(combo, value) {
console.log(value);
groupStore.load({
params: {
id: value
}
});
}
}
},

You'll then need groupStore to be configured something like this:


var groupStore = Ext.create('Ext.data.Store',{
fields: ['id', 'name'] // you could use a model but it doesn't seem worth it
proxy: {
type: 'ajax',
url: 'data/queryGroups.php'
}
});

Note I've removed your use of POST. If you really want to do a POST request you'll need to configure actionMethods.

Now for the other combobox:


{
xtype: 'combobox',
id: 'combogroup', // get rid of this
fieldLabel: 'Select',
queryMode: 'local',
editable: false,
store: groupStore,
displayField: 'name', // this needs to match the field name in your store, which is not group_name
valueField: 'id' // the underlying value, which judging by your store I assume will be 'id'
}

The JSON response from queryGroups.php would then need to be something like this:


[
{"id": 1, "name": "Users"},
{"id": 2: "name": "Admins"}
]

This you can check using the request monitoring available in your browser's debugger. That will confirm that the request is made and the response format is correct. If you actually want the field to be called group_name rather than name then adjust the code accordingly.

Hope that helps. It's unlikely I haven't made a small mistake somewhere in all that code but hopefully it'll get you near where you want to be.

c5m7b4
1 Mar 2012, 11:45 AM
Dude, you are totally awesome. Firstly I will never post code again with the [Code] tag. Sorry for that and thank you for fixing that. Secondly, I don't remember exactly where I found regModel but I have seen that a couple of times searching the net. Most of the information that I can find is for older version of Ext JS so not sure if that is the cause. I tried using both regModel and Ext.define just to try and see if there was a difference. Mostly though I wanted to say that YOU ARE THE MAN. I made the changes that you requested and it works like a charm. Now my second combo box is being populated with the changes. Now I will spend some time to figure out exactly which part/ or parts that I had screwed up. Once again thank you so much. This Ext JS stuff is so powerful but there is a little bit of a learning curve. I'm committed though. Keep it rocking brother, you have some good karma coming your way!!!!!

c5m7b4
1 Mar 2012, 12:27 PM
I do have one more question though. Now that it is populating the combo box. If I select a different selection from the first combo box, it will not repopulate. It's like I have one change per page load. When I make the second selection it is going to the server and I am getting back valid json data but when I click back on the second combo to see if it is loaded, I get the loading animation the data is from then first callback but all grayed out? Any ideas on that one?

skirtle
1 Mar 2012, 12:40 PM
You may have hit a known bug in 4.0.7. Try this:

http://www.sencha.com/forum/showthread.php?152324

c5m7b4
1 Mar 2012, 12:44 PM
Once again my friend, you are dead on. I was just scavenging the net looking for a solution when you posted. Much, much appreciated. Someone needs to tell your boss that you deserve a raise!!