PDA

View Full Version : ComboBox in panel header



medmathieu
17 Apr 2013, 10:57 AM
I need to add a combo box in a panel header.
I have success to add it, but events are fired only one time.

Here a 4.2 sample code:


Ext.define('MedComponent.task.command.MedCommandChooser' ,{
extend: 'Ext.panel.Panel'

,alias : 'widget.medCommandChooser'

,text_title: "Command :"
,text_command_config_error: "Error in command configuration"
,text_commandName_not_exist: "The command not exists: "

,frame: true
,closable: false
,resizable: false
,collapsible: true
,collapsed: true
,animCollapse: true
,margin: 5

//private component
,cmb_command: null

,className: ''

,initComponent: function()
{
this.title = this.text_title;

this.cmb_command = Ext.create('Ext.form.ComboBox',{
fieldLabel: ''
,store: Ext.getStore('CommandsStr')
,queryMode: 'local'
,displayField: 'name'
,valueField: 'class'
,value: className
,listeners:{
scope: this
,'change': this.onChange
,'select': this.onSelect
}
});

this.items = [
];

//create the command
var newCommand = null;

try{
if(className.length > 0)
newCommand = Ext.create('MedComponent.task.command.MedCommand' + this.className, this.command);
else
newCommand = Ext.create('MedComponent.task.command.MedCommand');
}
catch(ex)
{
Ext.MessageBox.alert(this.text_command_config_error, this.text_commandName_not_exist + this.command.name);
newCommand = null;
}

//insert the command if not null
if(null != newCommand){
this.items.push(newCommand);
}

this.callParent(arguments);
}

,listeners: {
afterrender: function(){
//add the command combobox
this.header.insert(1, this.cmb_command);
}
}

,onChange: function(iCombo, iRecords, iOptions)
{
console.log('change');
}
,onSelect: function(iCombo, iRecords, iOptions)
{
console.log('select');
}
});


When I change the combobox value, I see my two logs.
But if I change another times the value, I haven't the log.

Do you have an idea?
I know, I could create a tbar but I need have this combobox in the header.

slemmon
18 Apr 2013, 10:04 PM
It's working ok for me.

My test code derived from your example:


Ext.define('MedComponent.task.command.MedCommandChooser' ,{
extend: 'Ext.panel.Panel'


,alias : 'widget.medCommandChooser'

,text_title: "Command :"
,text_command_config_error: "Error in command configuration"
,text_commandName_not_exist: "The command not exists: "

,frame: true
,closable: false
,resizable: false
,collapsible: true
,collapsed: true
,animCollapse: true
,margin: 5

//private component
,cmb_command: null

,initComponent: function()
{
this.title = this.text_title;

this.cmb_command = Ext.widget('combobox',{
fieldLabel: ''
,store: Ext.create('Ext.data.Store', {
fields: ['name', 'class']
, data: [{
name: 'name1'
, class: 'class1'
}, {
name: 'name2'
, class: 'class2'
}]
})
,queryMode: 'local'
,displayField: 'name'
,valueField: 'class'
,listeners:{
scope: this
,'change': this.onChange
,'select': this.onSelect
}
});

this.items = [
];

//create the command
var newCommand = null;



//insert the command if not null
if(null != newCommand){
this.items.push(newCommand);
}

this.callParent(arguments);
}


,listeners: {
afterrender: function(){
//add the command combobox
this.header.insert(1, this.cmb_command);
}
}

,onChange: function(iCombo, iRecords, iOptions)
{
console.log('change');
}
,onSelect: function(iCombo, iRecords, iOptions)
{
console.log('select');
}
});


Ext.create('MedComponent.task.command.MedCommandChooser', {
renderTo: document.body
, margin: 15
});

SebTardif
22 Sep 2016, 7:56 AM
This use case is now fully baked in Ext JS 6.2.0, see https://fiddle.sencha.com/#fiddle/1h87