PDA

View Full Version : Dynamic ComboBox



keithcortis
9 Sep 2009, 5:54 AM
Hi ppl,

I am building up a form with extjs and i would like to implement a dynamic combobox, where i can change some attributes according to what the field is. Taking the following:


var owner_id = new Ext.form.ComboBox({
fieldLabel: "Title",
applyTo: 'combo',
displayField:'title_name',
emptyText:'Select a Title..',
forceSelection: true,
loadingText:'Loading data..',
minChars:1,
selectOnFocus:true,
store: store,
triggerAction: 'all',
typeAhead: true,
valueField:title_id',
width:158
});

i tried to put this inside a function where i passed the values of applyTo, fieldLabel, store, and emptyText as parameters and then i called this function within the items attribute of the FormPanel as follows:

items:[ title(param1,param2,etc...)],

This does not work.. is there any way where i can do this dynamically (where i just call a function maybe) instead of having to declare 5 comboboxes if i need them 5 times?

Thanks!

keithcortis
9 Sep 2009, 10:36 PM
any ideas how this can be done?thks

keithcortis
10 Sep 2009, 10:48 PM
Hi ppl,

I am building up a form with extjs and i would like to implement a dynamic combobox, where i can change some attributes according to what the field is. Taking the following:


var owner_id = new Ext.form.ComboBox({
fieldLabel: "Title",
applyTo: 'combo',
displayField:'title_name',
emptyText:'Select a Title..',
forceSelection: true,
loadingText:'Loading data..',
minChars:1,
selectOnFocus:true,
store: store,
triggerAction: 'all',
typeAhead: true,
valueField:title_id',
width:158
});

i tried to put this inside a function where i passed the values of applyTo, fieldLabel, store, and emptyText as parameters and then i called this function within the items attribute of the FormPanel as follows:

items:[ title(param1,param2,etc...)],

This does not work.. is there any way where i can do this dynamically (where i just call a function maybe) instead of having to declare 5 comboboxes if i need them 5 times?

Thanks!

i tried to create a dynamic combobox in the following order:

function combo(fieldLabel, displayField, applyTo, store, valueField) {
var owner_id = new Ext.form.ComboBox({
fieldLabel: fieldLabel,
applyTo: applyTo,
displayField:displayField,
emptyText:'Select a Title..',
forceSelection: true,
loadingText:'Loading data..',
minChars:1,
selectOnFocus:true,
store: store,
triggerAction: 'all',
typeAhead: true,
valueField:valueField,
width:158
});
}

an then i passed this function within the items 'array'/ attribute within a form as :

items: [ combo("Label",title,"combo1",store,abbr) ] -- but it does not work within this way... anyone has an idea how i can create a dynamic combobox to use it for a number of times and not create a new one each time i want a combo?

thks

jarlau
11 Sep 2009, 2:01 AM
http://www.extjs.com/learn/Tutorial:Extending_Ext_Class

keithcortis
11 Sep 2009, 3:07 AM
i have seen the tutorial but i am not sure if it what i al looking for... where does it show some widget which is reused? thanks

jarlau
11 Sep 2009, 3:22 AM
Once you created your own class, you can simply use it as below,

1.


var combo1 = new Ext.ux.IconCombo({name: 'combo1'});
var combo2 = new Ext.ux.IconCombo({name: 'combo2'});
...


2. add Ext.reg('iconcombo', Ext.ux.IconCombo);


items: [{
xtype: 'iconcombo',
name: 'combo1'
}, {
xtype: 'iconcombo',
name: 'combo2'
}]

Condor
11 Sep 2009, 3:56 AM
Aren't you missing something:

function combo(fieldLabel, displayField, applyTo, store, valueField){
return new Ext.form.ComboBox({
...
});
}

keithcortis
11 Sep 2009, 5:52 AM
thanks a lot - i will try something out although the tutorial does not seem that clear but thanks for your help :)

keithcortis
11 Sep 2009, 6:06 AM
Aren't you missing something:

function combo(fieldLabel, displayField, applyTo, store, valueField){
return new Ext.form.ComboBox({
...
});
}

Condor it works fine how you told me :D thanks a lot :) i forgot to return the combobox

giega
25 Sep 2009, 7:32 AM
This is very interesting.

I would like to know if there is a way to change some attributes of the other existing combobox or a text field depending which option is selected in a combobox.

What I need to accomplish is this:
I have an Officer combobox with E or O options, if O is selected, then I need to make certain fields required and others disabled. The reverse is true for option E. All fields and comboboxes are in a single editable row in a grid.

I have tried using listeners in Officers combobox for select and beforeshow to set attributes for the other fields but the result was inconsistent as only it worked randomly.

I am new to EXTJS.

Condor
25 Sep 2009, 8:09 AM
The 'select' event is indeed the event you need to use.

The 'beforeshow' event won't work. You'll have to update the controls yourself after you set the form values.

giega
25 Sep 2009, 8:19 AM
Now, do I have to use the function call method discussed previously to assign the attributes, or there is an easier simpler way?

For a moment I thought doing fieldName.allowBlank = true within the select listener would work. At this time I am trying to get the function method to work, just no luck so far. I can't get applyTo or renderTo option to apply the new configured combobox to a grid columm as editor.


function combo(allowBlank, disabled){
var GV = new Ext.form.ComboBox({
id: 'nobc-ed',
xtype: 'combo',
applyTo: Ext.getCmp('emp_grid').getColumnModel().getColumnById('colNOBC'),
allowBlank: allowBlank,
disabled: disabled,
displayField: 'DISPLAYNOBC',
valueField: 'NOBC',
mode: 'remote',
lazyRender: true,
triggerAction: 'all',
listWidth: 450,
store: new Ext.data.Store({
url: './grid/cfc/dropdowns.cfc?method=qGetAllNOBCs',
reader: new Ext.data.CFQueryReader(
{id: 'NOBC'},
[
{name: 'DISPLAYNOBC', type: 'string'},
{name: 'NOBC', type: 'string'}
]
)
})
});
}

var miltype_edit = new Ext.form.ComboBox({
id: 'miltype_edit',
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'miltype',
lazyRender: true,
listClass: 'x-combo-list-small',
lastAction: '',
listeners: {
select:{
fn:function(){
if (this.value =='O'){
combo(false,false);
}
else{
combo(true,true);

}
}//eo fn
}//eo beforeshow
}//eo listeners
});

Condor
25 Sep 2009, 8:40 AM
No, no! Don't recreate the combobox each time, just change its settings:

listeners: {
select: function(combo, record, index){
Ext.getCmp('nobc-ed').setDisabled(record.get('value') == 'O');
}
}

giega
25 Sep 2009, 8:55 AM
Thank you, Condor! I am on the right track now!:)

Jack9
25 Sep 2009, 9:01 AM
I do dynamic combos like this:


var applicationStore = new Ext.data.Store({
url:'myurl'
,reader: myreader
,listeners:{
load:function(options){

// Get my values
listStore.loadArr(applicationStore.get('listStoreData'));

}
}
});

var listStore = new Ext.data.ArrayStore({
data: []
,fields: [
{name: 'displayField'}
,{name: 'dataField'}
]
});

var comboDropdown = new Ext.form.ComboBox({
fieldLabel: "Combo List"
,width:400
,hideOnSelect:false
,editable: false
,forceSelection: false
,maxHeight:200
,triggerAction:'all'
,mode:'local'
,allowBlank: true
,disabled: false
,displayField: 'displayField'
,valueField: 'dataField'
,store: listStore
});