I need to load db values to a combo box. I can't figure out, why values are not loading into combo box. By firebug, console.log values are printed out. Here is my code for combo box,
var groups = new Ext.data.JsonStore({
fields: [{
id: 'id'
}, {
name: 'name'
}],
root: 'rows',
autoDestroy: true,
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: GO.settings.modules.schedule.url + 'groups.php',
}),
reader: {
type: 'json',
root: 'rows'
},
listeners: {
load: function (obj, records) {
Ext.each(records, function (rec) {
console.log(rec.get('name'));
});
}
}
});
var taskGroup = new Ext.form.ComboBox({
name: 'Group',
hiddenName: 'group',
triggerAction: 'all',
editable: false,
fieldLabel: 'Group',
mode: 'local',
autoLoad: true,
displayField: 'text',
store: groups,
columns: [{
dataIndex: 'name'
}],
});
You've set the displayField, but you also need the valueField:
valueField: 'id'
Related
I am new to extJS. I have 2 comboboxes which is binded witha common data store.
Below is the store -
comboStore = new Ext.data.JsonStore({
url: 'Getvalues',
root: 'rows',
autoLoad: true,
fields: ['Type', 'TypeDetails']
});
Here Type is a string and TypeDetails is an array list having field Description. A single Type can have multiple Description.
My requirement is, I have to bind one combobox with Type and when ever I select a Type only Description of curresponding Type should be binded with combobox 2.
I have tried -
xtype: 'combo',
id: 'cmbType',
editable: true,
typeAhead: true,
allowBlank: false,
displayField: 'Type',
valueField: 'Type',
hiddenName: 'Type',
store: comboStore,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'Select Type'
, listeners: {
select: function (cmb, record, index) {
}
}
xtype: 'combo',
id: 'cmbDesc',
editable: true,
typeAhead: true,
allowBlank: false,
displayField: 'Description',
valueField: 'Description',
hiddenName: 'Description',
store: comboStore,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'Select Type first'
What should I do in combo1 select?
I am using extJS 3.4
You should use extraParams property of Proxy definition! Like below:
/**
* Model Definition
*/
Ext.define('comboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Type', type: 'int'},
{name: 'TypeDetails', type: 'string'}
]
});
/**
* Model Definition
*/
Ext.define('descModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Description', type: 'int'},
{name: 'DescDetails', type: 'string'}
]
});
/**
* JsonStore Deifinition
*
* Here we will define a JsonStore which will interact server.
* The returning value type from server should be json!
* Also, do not forget to specify root and idProperty
*/
var comboStore = new Ext.data.JsonStore({
model : 'comboModel', // you should identify of your model
proxy: {
type: 'ajax',
url: '/path/to/your/server/url',
reader: {
type: 'json',
root: 'rows',
idProperty: 'ROOT_ID
}
}
});
var descriptionStore = new Ext.data.JsonStore({
model: 'descModel',
proxy: {
type: 'ajax',
url: '/path/to/your/server/url',
reader: {
type: 'json',
root: 'descriptions',
idProperty: 'DESC_ID'
}
}
});
xtype: 'combobox',
store: 'comboStore',
valueField: 'Type',
displayField: 'TypeDetails',
listeners: {
select: function(val) {
// here is the important part, we are sending the query string
// param by url, like /?desc=122332
descriptionStore.proxy.extraParams = {'desc': val.getValue()}
descriptionStore.load();
}
}
xtype: 'combobox',
store: 'descriptionStore',
valueField: 'Description',
displayField: 'DescDetails',
I have a program with 2 DropDownBoxes, where 1 of the drop box value is depanded on the value of the first (users value).
My problem is that I try to get that value from one drop box and I get "cant get value of undefined".
This is the code:
{
xtype: 'combobox',
displayField: 'vendor_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Choose vendor...',
selectOnFocus: true,
fieldLabel: 'Vendor Name',
margin: 10,
id: 'txtBidVendor',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'vendor_name'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendors.jsp',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
{
xtype: 'combobox',
displayField: 'rate_desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Choose Quality...',
selectOnFocus: true,
fieldLabel: 'Vendor Quality',
margin: 10,
id: 'txtBidVendorQuality',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'rate_desc'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}),
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
I get the error in the line where I try getting Ext.getCmp('txtBidVendor').value
You need to mention the valueField for the combo. This will fetch the value for that combobox.
displayField is only used to mention what will be displayed. valueField keeps the real value which will be accessed by Ext.getCmp('txtBidVendor').value
Ofcourse you won't get it.
You have to set this second url in the select event listener of first combo.
Because here before combo is created you are trying to access the value set in combo.
If you have any default value atleast set the 2nd combo url after load of first combo.
I have a 2 DropDownBoxes, where 1 of the drop box value is depanded on the selected value of the first.
How do i create a dynamic store in the second DropDownBoxes.
This is the code:
{
xtype: 'combobox',
displayField: 'vendor_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose vendor...',
selectOnFocus:true,
fieldLabel: 'Vendor Name',
margin: 10,
id: 'txtBidVendor',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'vendor_name'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendors.jsp',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
{
xtype: 'combobox',
displayField: 'rate_desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose Quality...',
selectOnFocus:true,
fieldLabel: 'Vendor Quality',
margin: 10,
id: 'txtBidVendorQuality',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'rate_desc'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}),
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
I get the error: "Cannot read property 'value' of undefined " ,in the line where i try getting "Ext.getCmp('txtBidVendor').value"
About what you are trying to accomplish here I have two considerations:
The error here is that you are trying to access to the txtBidVendor component at definition time (it doesn't exists), when you send a configuration object (like these two comboboxes here) you are not actually creating them, but just setting the initial configuration that will be used by its parent for later instantiation.
What I think you are trying to do is to change the query parameter value for the store, when the selection changes on txtBidVendor combobox. To accomplish that, you must listen for the selection event of the first combobox and then modify and reload the store of the second one. Something like this:
{
xtype: 'combobox',
displayField: 'vendor_name',>
emptyText: 'Choose vendor...',
selectOnFocus: true,
fieldLabel: 'Vendor Name',
id: 'txtBidVendor',
store: vendorStore,
listeners: {
select: function (combo, records, eOpts) {
var record = records[0]; // just want the first selected item
rateStore.getProxy().extraParams.bid_vendor = record.get('vendor_name');
alert('Store will load now with bid_vendor =' + record.get('vendor_name'));
rateStore.load();
}
}
}
For sake of readability it will be good idea to take store definition out of the components definition itself also. Here you can find a working sample of it.
Hope it helps.
I have a form containing 2 comobox fields, which are linked combox fields.
Chapters and lessons
When a user selects a chapter, list of lessons in that chapter will be shown.
How to filter the lessons combo based on chapters combo in EXTjs 4. If chapters combo is selected then only lessons combo should show lessons, otherwise it should be empty.
And how to set the cmobo values selected when form data is loaded from server and populated in form fields.
Chapters store
var chapter_store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['chapter_id', 'chapter_name'],
proxy: {
type: 'ajax',
url: BASE_URL + 'courses/chapters/getChaptersCombo/' + course_id,
actionMethods: {
read: 'POST'
},
noCache: false,
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
storeId: 'chapter_id'
});
Lessons store
var lesson_store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['lesson_id',
//'chapter_name',
'lesson_name', 'lc_relation_id'
],
proxy: {
type: 'ajax',
url: BASE_URL + 'courses/lessons/getLessonsCombo/' + course_id,
actionMethods: {
read: 'POST'
},
noCache: false,
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
storeId: 'lesson_id'
});
Form with linked combos
var quiz_form = Ext.create('Ext.form.Panel', {
items: [{
xtype: 'combobox',
//readOnly:true,
id: 'test_chapter_combo',
name: 'test_chapter_combo',
//hiddenName: 'test_linkchapter_val',
displayField: 'chapter_name',
valueField: 'chapter_id',
fieldLabel: 'Select Chapter',
allowBlank: false,
blankText: 'Chapter is required',
triggerAction: 'all',
queryMode: 'remote',
store: chapter_store,
selectOnFocus: true,
listeners: {
select: {
fn: function (combo, value) {
var comboLesson = Ext.getCmp('test_lesson_combo');
comboLesson.clearValue();
lesson_store.load({
params: {
chapters_id: combo.getValue()
}
});
}
}
}
}, {
xtype: 'combobox',
//readOnly:true,
id: 'test_lesson_combo',
name: 'test_lesson_combo',
//hiddenName: 'test_linklesson_val',
displayField: 'lesson_name',
valueField: 'lc_relation_id',
mode: 'local',
fieldLabel: 'Link To Lesson',
allowBlank: false,
blankText: 'Lesson is required',
triggerAction: 'all',
store: edu_lesson_store,
queryMode: 'remote'
}]
});
Loading form data from server
quiz_form.getForm().load({
url: BASE_URL + 'courses/getCourseTest/' + quiz_id,
method: 'POST'
});
I dunno which server side technology are you using, but i'm sure you can get some inspiration/guidance following these 2 great links:
Extjs Cascading (Dependent) Combo Boxes
ExtJs 4 cascading ComboBox example using Java Servlet and MySQL
HTH!
I've a set of 2 combo boxes. One is countries combo and another is states combo. By default the states combo store is empty when I select a country then based on the combo value field States combo has to be filtered/load according to the first combo. In Extjs2.0 this is working whats the changes in Extjs4.
country store
var country_store = Ext.create('Ext.data.Store', {
//autoLoad: true,
fields: ['id','c_id','c_name'],
proxy: {
type: 'ajax',
url: 'country_list.php',
reader: {
type:'json',
root: 'results'
}
},
storeId: 'edu_context_store'
});
State store
var state_name = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['id','s_id','s_name','parent_country_id'],
proxy: {
type: 'ajax',
url: 'states_list.php',
reader: {
type:'json',
root: 'results'
}
},
storeId: 'state_name'
});
Combo boxes
{
xtype: 'combo',
id: 'country_combo',
hiddenName: 'country_name',
displayField: 'c_name',
valueField: 'c_id',
fieldLabel: 'Country',
queryMode: 'remote',
allowBlank: false,
triggerAction: 'all',
store: country_store,
width: 450,
selectOnFocus: true,
listeners:{
scope: this,
'select': function(combo, rec, idx){
var country_val = combo.getRawValue();
var states_obj = Ext.getCmp('states_combo');
states_obj.clearValue();
//states_obj.store.load();
states_obj.store.filter('parent_country_id', country_val);
}
}
}, {
xtype: 'combo',
id: 'states_combo',
hiddenName:'state_name',
displayField:'s_name',
valueField:'s_id',
queryMode: 'remote',
fieldLabel: 'State',
cls: 'textlineht',
allowBlank: false,
triggerAction: 'all',
store: states_store,
width: 450
}
Anyone knows how to do that ?
Thanks !
combo.getRawValue() will return the value displayed to the user in the combo - not the underlying id value. Try instead combo.getValue().