Extjs4 radiogroup in tabpanel, loads fine on first tab, but not others

Question

I have a tabpanel with a grid in the first tab - called main-grid. I double-click on a row in main-grid and it loads a new tab, with a form-grid. In the form-grid I have set a column layout. I have a grid in the left column and a form with the radiogroup in the right column.

When a new tab opens, the grid from the form-grid loads fine, and when I select a record in the form-grid grid, it loads into the form fine and the radiogroup loads as well with my convert function. The values I am working with from the grid are "Yes" and "No", so I am converting them with my 'convert' function to an INT and then returning them.

Here is a snippet of my code:

Ext.define('ValueRadioGroup',({
    extend: 'Ext.form.RadioGroup',
    alias: 'widget.valueradiogroup',

    fieldLabel: 'Value',
    columns: 2,
    defaults: {
        name: 'rating' //Radio has the same name so the browser will make sure only one is checked at once
    },
    items: [{
        inputValue: '2',
        boxLabel: 'Yey'
    }, {
        inputValue: '1',
        boxLabel: 'Nay'
    }]
}));

Ext.define('TargetViewModel', {
    extend: 'Ext.data.Model',
    fields  : [
        {name: 'ID'},
        {name: 'FAMILYNAME'},
        {name: 'TABLENAME'},
        {name: 'TARGETNAME'},
        {name: 'TARGETLABEL'},
        {name: 'TARGETVALUE'},
        {name: 'ITEMREL'},
        {name: 'ITEMREF'},
        {name: 'ITEMNAME'},
        {name: 'ITEMMNEMONIC'},
        {name: 'ALLOWED'},

        {name: 'rating', type: 'int', convert: convertTARGETVALUE}
    ]
});

... and here is where it is being called:

this.items = [{ 

            // GRID
            columnWidth: .65, // GRID width                        
            xtype: 'ggtargetviewgrid',
            store: this.store,
            listeners: {
                selectionchange: function(model, records) {
                    if (records[0]) {
                        var value = this.up('form').getForm().loadRecord(records[0]);

                    }
                } 
            }                       
        }
        ,
        {
            // FORM
            columnWidth: 0.3, // FORM width
            margin: '0 0 0 10',
            xtype: 'fieldset',
            title:'Target Details',
            defaults: {
                width: 280,
                labelWidth: 50
            },
            defaultType: 'textfield',
            items: [
                {
                    fieldLabel: 'Name',
                    name: 'ITEMNAME'
                }, {

                    xtype: 'valueradiogroup' 
            }]
}]

This is my convert function:

var convertTARGETVALUE = function(value, record) {
    var tval = record.get('TARGETVALUE'), val = 0;

    if (tval === 'Yes') return val+2;
    if (tval === 'No') return val+1;
    return val;
};

The problem is that the radiogroup works fine for the FIRST form-grid opened, but NOT for the second, or ANY subsequent tabs opened.

does selectionchange gets fired? – sha Apr 11 '12 at 18:17 — sha, Apr 11 '12 at 18:17
I am not calling it, but could. – PaulW Apr 12 '12 at 05:51 — PaulW, Apr 12 '12 at 05:51

score 1 · Answer 1 · edited Nov 08 '12 at 08:55

I had the same problem and I solved it like this:

xtype:'radiogroup',
itemId:'storageType',
name:'entdata.storageType',//this give me the idea
items:[           
    {boxLabel:"s0",name:'entdata.storageType',inputValue:"0",checked:true},
    {boxLabel:"s1",name:"entdata.storageType",inputValue:"1"}, 
    {boxLabel:"s2",name:'entdata.storageType',inputValue:"2"}, 
    {boxLabel:"s3",name:'entdata.storageType',inputValue:"3"} ] 

setValue:function(value) {
    if (!Ext.isObject(value)) {
        var obj = new Object();
        obj[this.name] = value;
        value = obj;
    }
    Ext.form.RadioGroup.prototype.setValue.call(this, value);
}

Join name with setValue, then can work.

Extjs4 radiogroup in tabpanel, loads fine on first tab, but not others

1 Answers1