This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Cascading Combobox in extjs
Hi I have two comboboxes ,viz..
AcademicClass
{
xtype : 'combobox',
emptyText : 'Academic Class',
displayField : 'name',
id:'comboacademicclass',
valueField : 'id',
store:classstore,
triggerAction:'all',
mode:'local',
listeners : {
'select' : {
fn: function(combo1, value) {
var comboSubject=Ext.getCmp('combo-subject');
var classId=Ext.getCmp('comboacademicclass').getValue();
comboSubject.setDisabled(true);
comboSubject.setValue('');
comboSubject.getStore().removeAll(true);
comboSubject.getStore().load({url:'http://localhost:8080/WebService/rest/type/academicSubjectByClass/'+classId+'.json'});
// Using this loading data in second combobox by passing first combobox Id.:- 'classId'.
comboSubject.setDisabled(false);
}
}
}
}
AcademicSubject:
{
xtype : 'combobox',
emptyText : 'Academic Subject',
id:'combo-subject',
displayField : 'name',
valueField : 'id',
disabled:true,
store:subjectstore,
triggerAction:'all',
mode:'local'
,lastQuery:''
}
Its showing output only first time selection but on second time selection its just showing "Loading" and not dispalying output. Please Help.
Well you should listen with the AcademicSubject combo on the AcademicClass for the select or the change event and activate the listening combo along with it. You will also get the selected value and can so prepare the query for the activate combo. You could do this like
combobox.queryData = [{ property: 'fieldName', value: value}];
combobox.reset();
combobox.doQuery(combobox.queryData);
where combobox is a reference to the activated combo (AcademicSubject ) and value a propertyvalue from the AcademicClass combo. To ensure the use of your new query use
combobox.on('beforequery', function (e) {
e.query = e.combo.queryData;
});
Please note:
For the snippets above I recommend to use queryParam: 'filter' which would enable you to use default serverside filter behavior without the need to introduce a new param.
Related
I am working in extjs4. I have view with following components-
1. xtype: 'boxselect',
displayField: 'emailAddress',
valueField: 'id',
store : store
2.xtype : 'grid',
selModel:Ext.create('Ext.selection.CheckboxModel', {
headerWidth : 40,
showHeaderCheckbox : false,
ignoreRightMouseSelection : true,
checkOnly : true
}),
width :350,
border : true,
store : store,
columns : [{
dataindex : 'firstName',
header : 'firstName'
},{
dataindex : 'lastName',
header : 'lastName'
},{
dataIndex : 'emailAddress',
header : 'email'
}]
3.xtype : 'button',
text : 'Add'
On this add button click, i want to add grid selected multiple values to boxselect's selected values along with its previous selected values and want to show those values in combobox as selected.
i tried it as=
var previousvalues = [12,13,14]
var newvalues = [15,16]
Ext.getCmp('comboId').setValue(previousvalues + newvalues );
But its forming combinely one emailId and setting it as one value, not individual emailId
So how to perform this in extjs4
You can not contact two arrays with + operator in javascript.
ExtJs framework has build in function for merging two arrays Ext.Array.merge()
So you can set new values like this:
var values = Ext.Array.merge( previousvalues, newvalues );
Ext.getCmp('comboId').setValue( values );
i am working in extjs4. I have view with component as=
xtype : 'comboboxselect',
id : 'Id1',
displayField: 'emailAddress',
typeAhead: true,
editable : true,
hideTrigger:true,
forceSelection: false,
i want to allow users to enter new emailIds also. So i kept editable as true. But when i am trying to get combobox's selected value on sumbit button click, its not giving me newly inserted emailsId's in combobox.I tries it as =
Ext.getCmp('Id1').getSubmitData() or Ext.getCmp('Id1').getRawValue()
But its not giving me newly inserted emailId's. So how to perform this in extjs4
If this is Ext.form.field.ComboBox (xtype:'combobox') then getValue() returns the current value of the combobox. More info available on sencha docs
I am working in extjs4. I have combobox with code as-
{
margin:'7 6 5 5',
xtype:'combobox',
fieldLabel:'Language',
name:'language',
id:'combo',
width:190,
allowBlank:false,
emptyText: '--Select language--',
labelWidth: 60,
store: new Ext.data.ArrayStore({
fields: ['id','value'],
data: [
['1','Marathi'],
['2','English']
]
}),
queryMode: 'local',
valueField:'id',
displayField:'value',
editable:false
},
Throuhout my functioning I want to set combobox's value defaultly to user's selected choice. So how to set combobox's value from controller
To select default value you can use event listener. After combobox has been rendered you can set value you need using setValue() method from Ext.form.field.Field and if you need to select combobox value on demand you can get it using Ext.getCmp('combo') and then use setValue() or even better set itemId instead of id and use componentQuery to fetch combobox and set value:
Ext.ComponentQuery.query('#combo')[0].setValue('2');
setValue( value ) : Ext.form.field.Field Sets the specified value(s)
into the field. For each value, if a record is found in the store that
matches based on the valueField, then that record's displayField will
be displayed in the field. If no match is found, and the
valueNotFoundText config option is defined, then that will be
displayed as the default field text. Otherwise a blank value will be
shown, although the value will still be set.
listeners:{
scope: this,
afterRender: function(me){
me.setValue('1');
}
}
Here is an example in fiddle
Try this:
Ext.getCmp('combo').setValue('1' or '2');
I have a comboBox within a form, the valueField is the ObjectId field of a document in mongodb, it displays the proper value of the fields in the comboBox, but it returns just a part of the value with getValue, getRawValue returns the value of the displayField.
This is the code of the comboBox:
{
xtype: 'combo',
fieldLabel:'Firm',
store:Ext.data.StoreManager.lookup('bbCompaniesStore'),
displayField: 'firm',
valueField: '_id',
name: 'country',
labelAlign: 'top',
cls: 'field-margin',
flex: 1
}
This is how I get the value from the form:
var nomeField = formPanel.items.get(0).items.get(0);
var firmField = formPanel.items.get(0).items.get(1);
var noteField = formPanel.items.get(0).items.get(2);
var contact = Ext.ModelManager.create({nome: nomeField.getValue(), note: noteField.getValue(),'firm_id':firmField.getValue()}, 'Contact');
It works but it trunks the value of _id, I checked with firebug, the server sends the rigth data,I think that extjs does some kind of normalization, before I solved using getRawValue, but with combobox it returns the displayField. I do not know how to fix this problem.
I have an editable grid that uses a store. I want to insert a combobox in one of the fields.
This is my store for the grid:
new Ext.data.Store({ ....
proxy: new Ext.data.HttpProxy......
reader: new Ext.data.JsonReader({
root: 'rows',
fields: [..... {name:'wid', mapping: 'wid'},
There is another store for combobox only, which has 'wid' and 'name' fields.
In my column model:
header: 'Worker',
dataIndex: 'wid',
editor: new Ext.grid.GridEditor(workerCmb),
renderer:function(value, p, record){
return record.data['name'];}
And the combo itself:
valueField: 'wid',
displayField: 'name',
When the grid is loaded its field "Worker" is empty (it is ok), but there is no combobox in it. When I start editing it, I see all the list. After editing the 'id' is saved to the store, but the 'name' is not shown, neither is the combobox.
What am I doing wrong?
this helped:
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField || combo.displayField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
If you enable filtering ('queryMode = local') in your combobox keep in mind that every letter you put in is applied to the store. Therefore, the function findRecord will fail to find display names for the ones that are filtered out. This will affect the other lines you have in the same grid since after you finish editing the whole grid view will refresh.
To make sure you don't loose any records when the loop kicks in, remove the filters from the combobox store before you try to find the record.
Ext.util.Format.comboRenderer = function(combo){
return function(value){
combo.store.clearFilter(); // -> addition
var record = combo.findRecord(combo.valueField || combo.displayField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}