PDA

View Full Version : First item in the combo - Add new item



fabio.policeno
28 Jan 2012, 5:52 AM
Hello!
I have no idea how to implement it, maybe changing the template and making a combo of onclick in the first item, but I wonder if there is a better way or have any plugin for this:

View the combo, plus all the items, the first item to be like a button, or any label, that when the user clicks this, open a form to add new items in this combo.

Thank you!

skirtle
28 Jan 2012, 11:54 AM
I think I'd use a custom tpl for the boundlist then add a click handler. To add the click listener I'd try to use delegation, registering the listener on the main element rather than trying to add it to the first item.

josephkirubakaran
28 Jan 2012, 12:25 PM
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"KEY", "name":"Add new item"},
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});

var mycombo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});

mycombo.on('select', addNewItem );

function addNewItem(combo, records, eOpts){
if(combo.getValue() == 'KEY'){
combo.clearValue();
mywindow.show();
}
}

var mywindow = Ext.create('Ext.window.Window', {
title: 'Add new item',
layout: 'anchor',
modal: true,
closeAction:'hide',
items:[{fieldLabel:'Abbr', xtype:'textfield',id:'itemkey'},{fieldLabel:'Name', xtype:'textfield',id:'itemvalue'}],
buttons: [
{
text: 'Add',
handler:function(){
states.add({abbr:Ext.getCmp('itemkey').getValue(), name: Ext.getCmp('itemvalue').getValue()});
Ext.getCmp('itemkey').setValue('');
Ext.getCmp('itemvalue').setValue('');
mywindow.hide();
}
},
{text:'Close', handler:function(){mywindow.hide();}}
]
});

fabio.policeno
28 Jan 2012, 12:47 PM
The client chose the button next to the combo. Anyway, thank you!