Extjs internet explorer object not found problem

Question

this code run firefox , but error on ie why ? please help me.

xxx.js code:

var gridFormf = new Ext.FormPanel({
        id: 'company-form',
        frame: true,
        labelAlign: 'left',
        title: 'İş Emri',
        bodyStyle:'padding:5px',
        width: 1,
         tbar: [
            newIsEmri,delIsEmri,edIsEmri,rapIsEmri,serIsEmri
        ],
        layout: 'column',    // Specifies that the items will now be arranged in columns
        items: [
        {
            columnWidth: 0.3,
            layout: 'fit',
            items: [{
                    columnWidth: 1,
                    xtype: 'fieldset',
                    labelWidth: 90,
                    title:'Ekip / Servis',
                    defaults: {width: 120, border:false},    // Default config options for child items
                    defaultType: 'textfield',
                    autoHeight: true,
                    bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
                    border: true,
                    style: {
                        "margin-left": "10px", // when you add custom margin in IE 6...
                        "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
                    },
                    items: [{
                        fieldLabel: 'Ekip / Personel',
                        name: 'SERVIS_VEREN'
                    }]
                },{
                    columnWidth: 1,
                    xtype: 'fieldset',
                    labelWidth: 90,
                    title:'Ürün',
                    defaults: {width: 120, border:false},    // Default config options for child items
                    defaultType: 'textfield',
                    autoHeight: true,
                    bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
                    border: true,
                    style: {
                        "margin-left": "10px", // when you add custom margin in IE 6...
                        "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
                    },
                    items: [{
                        fieldLabel: 'Cihaz',
                        name: 'URUN_CIHAZ_ADI'
                    },
                    {
                        fieldLabel: 'Marka',
                        name: 'URUN_MARKA_ADI'
                    },
                    {
                        fieldLabel: 'Model',
                        name: 'URUN_MODEL_ADI'
                    },{
                        fieldLabel: 'Seri No',
                        name: 'URUN_SERI_NO'
                    }
                    ]
                }]
        },{
            columnWidth: 0.3,
            layout: 'fit',
            items: [{
                columnWidth: 1,
                xtype: 'fieldset',
                labelWidth: 90,
                title: 'Serviş Geliş Türü',
                defaults: {
                    width: 140,
                    border: false
                }, // Default config options for child items
                defaultType: 'textfield',
                autoHeight: true,
                bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
                border: true,
                style: {
                    "margin-left": "10px", // when you add custom margin in IE 6...
                    "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else
                },
                items: [{
                    fieldLabel: 'Geliş Türü',
                    name: 'SERVIS_GELIS_TURU'
                }]
            },RadioPanels


            ]
        },{
            columnWidth: 0.3,
            layout: 'fit',
            items: [{
                columnWidth:1,
                autoHeight: true,
                border: true,

                items: [gridAksesuar]
            },gridAriza,{
                columnWidth: 1,
                xtype: 'textarea',
                labelWidth: 0,
                width:250,
                defaultType: 'textarea',
                autoHeight: true,
                border: false,
                name:'ARIZA_ACIKLAMASI'

            }]
        },{
            columnWidth: 1.0,
            layout: 'fit',
            items: gridFormx
        }]
    });

My html code :

<script src="/ApplicationJs/xxx.js" type="text/javascript"></script>
<script type="text/javascript">

Ext.onReady(function() {


    var viewport = new Ext.Viewport({
        layout:'fit',
        items: [gridFormf]
    });
</script>

Internet explorer return to error. Error description is object gridFormf is not found.

Answer 1

Check your code for an extraneous comma (,) somewhere. Either in a config object, or possibly in your JSON return for you data store. FF will render, but IE will break.

Run your JS code through JSLint first, then run your JSON through a validator

Answer 2

this is probably a bug with extJs. Try the Sample ViewPort [RSS Feed] app from sencha.com and you will notice that the left collapse fails in Internet Explorer.