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',
Why does this fail with cannot call method 'getProxy' of undefined?
{
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
}
taken from docs...
It 100% fails at this peice of code.
The problem is likely that you're defining items on the prototype of your object. You shouldn't do that because it means it will be shared by all instances, also it will try to instantiate your store while defining the class, instead of when the class is instantiated.
Instead of
Ext.define('my.Panel', {
items: {
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
}
});
Do
Ext.define('my.Panel', {
initComponent: function() {
this.items = {
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: {
// Let Ext instantiate the store
type: 'array',
// Don't use this, it's an euphemism for a global
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
},
displayField: 'name'
}
});
I think cause it is missing an end quote in 'name
This code works fine
Ext.widget({
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
})
I have a combobox in a form:
{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}
Data is:
1 => Administrator
2 => User
3 => Guest
Now, if I don't touch anything when editing a user, on my server for my combobox I get "Administrator" (displayField), but when I change something in combobox I get the "id" (valueField). I really just want "id" in both cases. I was reading about hiddenName? Is that the case?
If you need any more code, feel free to ask. :)
Thank you!
EDIT (more code)
1.) There is no default value.
Here is the whole view code:
Ext.define('App.view.Suits.Update', {
extend: 'Ext.window.Window',
title: 'Suits',
width: 250,
id: 'UpdateWindowSuits',
defaultType: 'textfield',
items: [{
xtype: 'UpdateFormSuits'
}],
buttons: [
{ text: 'Save', id: 'submitUpdateFormButtonSuits'},
{ text: 'Cancel', id: 'cancelUpdateFormButtonSuits'},
]
});
Ext.define('App.view.Suits.UpdateForm', {
extend: 'Ext.form.Panel',
alias: 'widget.UpdateFormSuits',
layout: 'form',
id: 'UpdateFormSuits',
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id',
hidden: true
},{
fieldLabel: 'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Status',
name: 'status',
allowBlank: false
},{
xtype: 'combobox',
fieldLabel: 'Priority',
name: 'suit_priority_id',
id: 'ComboboxSuitPriorities',
store: Ext.create('App.store.SuitPriorities'),
editable: false,
displayField: 'name',
hiddenName: 'id',
valueField: 'id'
},{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}],
});
Here is the store:
Ext.define('App.store.SuitPriorities', {
extend: 'Ext.data.Store',
// Where is the Model.
model: 'App.model.SuitPriority',
// "id" of the Store.
storeId: 'SuitPriorities',
// Autoload all data on creation.
autoLoad: true,
// Number of records in one page (for pagination).
pagesize: 20,
// Proxy for CRUD.
proxy: {
// Type of request.
type: 'ajax',
// API for CRUD.
api: {
create : 'php/suitpriorities/update',
read : 'php/suitpriorities/read',
update : 'php/suitpriorities/update',
destroy : 'php/suitpriorities/delete'
},
// Type of methods.
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
},
// Reader.
reader: {
// Which type will the reader read.
type: 'json',
// Root of the data.
root: 'suitpriorities',
rootProperty: 'data',
// One record.
record: 'SuitPriority',
// Message and success property.
successProperty: 'success',
messageProperty: 'message'
},
// Writer (when sending data).
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true
},
});
As I sad, the store is getting all the data because it's already loaded when I press the combobox. It's a simple JSON with 'id' and 'name' properties.
EDIT2: I've tried this for my Jurisdictions because I wasn't getting the right data selected in combobox. This is inside my controller.
onJurisdictionComboRender: function(combobox, eOpts){
// Getting the selected row.
var record = this.grid.getSelectionModel().getSelection()[0];
// Selected jurisdiction.
var jurisdiction = record.data.jurisdiction_id;
// Select it in combobox.
combobox.select(jurisdiction);
}
That doesn't make sense... If you read out the combo the correct way, meaning let either the form doing the work or calling getSubmitValue() on your own the combo would always returning the valueField. hiddenName is used for other purposes. Please take a look at the console of this JSFiddle and recheck how you fetch the combo value.
Here's the working demo-code
// The data store containing the list of states
var roles = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data : [
{"id":1, "name":"Administrator"},
{"id":2, "name":"User"},
{"id":3, "name":"Guest"}
//...
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Role',
store: roles,
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
combo.on('select', function(cb){ console.log(cb.getSubmitValue()); })
+1 for everyone for helping but the problems was here:
In my store I've put autoLoad: false and inside my combobox I've put store.load() manually and it works perfectly.
Thank you all! :)
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().
This is my combobox
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store: [
['tr','Türkçe'],
['ru','Русский'],
['en','English']
],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true
},
Generally, when I want to select the first value of a store, I use this methods:
xtype: 'combo',
fieldLabel: 'prov',
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
listeners: {
afterrender: function(combo) {
var recordSelected = combo.getStore().getAt(0);
combo.setValue(recordSelected.get('field1'));
}
}
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
value: 'tr',
selectOnFocus:true
},
For remote comboboxes you need to plug into store's load event to select the value after store is loaded.
You can use the value property like so:
value : 'tr'
then it will display first value by default.
You can use this code, assigning any store element after its id to the default combobox value.
{
xtype: 'combobox',
forceSelection: true,
allowBlank: true,
typeAhead: true,
queryMode: 'local',
colspan: 3,
id: 'filter_column_c',
style: {'margin': '5px 15px 15px 30px'},
fieldLabel: 'Column',
valueField: 'column',
displayField: 'name',
store: nomStores["storeCombo"],
value: nomStores["storeCombo"].getById(1),
},
As an alternative, I faced the need to show a locally stored Store, which was just a matter of listening the afterRender method:
listeners: {
afterRender: function() {
this.select(01);
}
}
01 in this case is the id (valueField) of the element in the Store:
areasCenters: {
data: [{
id: 01,
name: 'Todas'
},
{
id: 02,
name: 'Elegir...'
}
],
autoLoad: true
}