PDA

View Full Version : When Certain Combobox Value Loaded, The Raio Group is Also Loaded & Showed



zakif
2 Jul 2012, 8:16 PM
There is a window form containing a combo box (the combo box has 3 values, when the value is 2, it should show a radio group) .

Let say, I click the row in grid panel that generating the form window. The combo box value is 2. The problem is the radio group is not automatically shown by default. Instead, I have to click the combobox first and select (again) the value (2).

How to fix that?

Thanks in advance.

Here are the codes:


var range = new Ext.form.RadioGroup ({
fieldLabel: "Range Type",
id: "range_option",
allowBlank: true,
defaults: {xtype: "radio",name: "range_option"},
items: [
{
boxLabel: "Equal",
width: 2,
inputValue: 0,
checked: true
},{
boxLabel: "Min",
width: 2,
inputValue: 1,
},{
boxLabel: "Max",
width: 2,
inputValue: 2,
},{
boxLabel: "Min to Max",
width: 2,
inputValue: 3,
}
]
}).hide();

mytype = new Ext.data.ArrayStore({
fields: ['mytype','name'],
data : Ext.exampledata.oftype
});

var mycombo = new Ext.form.ComboBox({
fieldLabel: 'Field Type',
hiddenName:'mytype',
store: sntype,
valueField:'mytype',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a field type...',
allowBlank:false,
selectOnFocus:true,
anchor : '-25',
listeners: {
select: function(combo, record, index) {
if (combo.getValue()=='2') {
range.show();
}
else {
range.hide();
}
}


}
});

sword-it
2 Jul 2012, 9:58 PM
Hi zakif,


Add after render event on window or form panel and check if form item (combobox) value == 2 then set range.show(); otherwise range.hide(); for example -



listeners:{
afterrender:function(){
if(form.combobox == 2){
form.range.show();
}
else{
form.range.hide()
}
}
}

zakif
2 Jul 2012, 11:29 PM
I've tried the below codes on listener:

afterrender: function(combo) {
if (combo.getValue() ==4) {
range.show();
}
else {
range.hide();
}
}

and also different solution by using the below codes;


combobobo.on('afterrender', function() {
if (combobobo.getValue()=='4') {
range.show();
} else {
range.hide();
}
});

sword-it
2 Jul 2012, 11:54 PM
You can also attach afterrender event on combobox like



var mycombo = new Ext.form.ComboBox({
fieldLabel: 'Field Type',
hiddenName: 'mytype',
store: sntype,
valueField: 'mytype',
displayField: 'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a field type...',
allowBlank: false,
selectOnFocus: true,
anchor: '-25',
listeners: {
select: function(combo, record, index) {
if (combo.getValue() == '2') {
range.show();
}
else {
range.hide();
}
}
afterrender:function(combo){
if (combo.getValue() == '2') {
range.show();
}
else {
range.hide();
}
}
}
});

zakif
19 Jul 2012, 8:31 PM
Well, thanks a lot sword-it.

I have tried all possible solutions by looked at Ext Js documentation on Ext.form.Combobox. Somehow the problem is still there. When I used 'afterrender' event, the radiogroup didn't loaded at all. I guess that I've missed something important (I don't know what).

I guess that combo.getValue()=='4' didn't work well. I've also tried to change Ext.exampledata.ntype from '1','One' to 1,'One' (considering number/string character). I've tried the render, beforeselect, etc events.

So, here I post the whole related code.


Ext.namespace('Ext.exampledata');
Ext.exampledata.ntype = [
['1','One'],
['2','Two'],
['3','Three'],
['4','Four']
];


var range = new Ext.form.RadioGroup ({
fieldLabel: "Range Type",
id: "range_option",
name: "range_option",
allowBlank: true,
defaults: {xtype: "radio",name: "range_option"},
items: [
{
boxLabel: "Equal",
width: 2,
inputValue: 0
},{
boxLabel: "Min",
width: 2,
inputValue: 1,
},{
boxLabel: "Max",
width: 2,
inputValue: 2,
},{
boxLabel: "Min to Max",
width: 2,
inputValue: 3,
}
]
}).hide();

store_ntype = new Ext.data.ArrayStore({
fields: ['ntype','name'],
data : Ext.exampledata.ntype
});

var combobobo = new Ext.form.ComboBox({
fieldLabel: 'Field Type',
hiddenName:'ntype',
store: store_ntype,
valueField:'ntype',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a field type...',
allowBlank:false,
selectOnFocus:true,
anchor : '-25',
listeners: {

select: function(combo, record, index) {
if (combo.getValue()=='4') {
range.show();
}
else {
range.hide();
}
},

afterrender: function(combo) {
if (combo.getValue() =='4') {
range.show();
}
else {
range.hide();
}
}


}
});