javascript - ExtJS 4.2 Grid Header doesn't show correctly in IE -

the purpose of following code popup window contains 2 column grid. works fine in safari , firefox fails show in ie 8 , ie 10 (which our customers insist on using). in ie, 3rd hidden column not hidden, cover 1st column instead.

i use default css of extjs 4.2, matter?

<link rel="stylesheet" type="text/css" href="js/extjs-4.2.1.883/resources/css/ext-all.css"> 

and here javascript:

    ext.define('base.lov_4_2', {         extend: 'ext.form.triggerfield',         defaultautocreate : {tag: "input", type: "text", size: "16",style:"cursor:default;", autocomplete: "off"}         ,triggercls: 'x-form-search-trigger'         ,lovtitle: ''         ,view: {}         ,window:null         ,windowconfig: {}          ,showlov: function() {             this.renderwindow();             this.window.show();         }          ,onrender: function(ct, position){              base.lov_4_2.superclass.onrender.call(this, ct, position);              this.renderwindow();         }          , ontriggerclick: function(e){             this.showlov();             return false;         }          , renderwindow: function(){              this.windowconfig = ext.apply(this.windowconfig, {                  title: this.lovtitle                 ,width: this.lovwidth                 ,height: this.lovheight                 ,modal: true                 ,closable: true                 ,closeaction:'hide'                 ,items: this.view             },{shadow: false, frame: false, frameheader: false});              if(!this.window){                 this.window = ext.create('ext.window.window', this.windowconfig);                 this.window.on('beforeclose', function(){                     this.window.hide();                 }, this);             }         }     });      ext.define('lovfield.lov_com_scr0010_4_2', {         extend: "base.lov_4_2",         lovtitle:'',         triggercls: 'x-form-search-trigger'         ,initcomponent: function() {             ext.apply(this, {                 lovtitle:this.lovtitle                 ,view: ext.create('ext.grid.panel', {                      store: new ext.data.store({                         id:"storelov_com_scr0010",                         proxy: {                             type: 'ajax',                             url: this.url,                             method: 'post',                             reader: {                                 root:"list",                                 totalproperty:"count"                             },                             actionmethods: {                                 create: 'post', read: 'post', update: 'post', destroy: 'post'                             }                         },                         fields:[{name:"code",type:"string"}                             ,{name:"descr",type:"string"}                             ,{name:"person_sn",type:"string"}                         ]                     }),                     columns: {                         items:[                             {id:'code',text:'id',width:80,dataindex:'code'}                             ,{id:'descr',text:'name',width:100,dataindex:'descr'}                             ,{id:'person_sn',text:'person_sn',width:80,dataindex:'person_sn',hidden:true}                         ]                     }                 })                ,datacomponentname:"lov_com_scr0010"                ,lovwidth:300                ,lovheight:300              });             lovfield.lov_com_scr0010_4_2.superclass.initcomponent.apply(this, arguments);         },         onrender:function() {             lovfield.lov_com_scr0010_4_2.superclass.onrender.apply(this, arguments);         }      });      ext.onready(function(){         var querypanel = ext.create('ext.form.panel', {             id: querypanel,             frame: true,             border: true,             bodypadding: 5,             renderto: ext.getbody(),             width: '100%',             anchor: '20%',             fielddefaults: {                 labelalign: 'left'             },             items: [{                 layout:'column', basecls:'', border:false, items:[{                     width:250, layout: 'form', labelalign:'left', border: false, margin:'0 10 0 10',                     bodystyle: {background: 'transparent'},                     items: [                         new lovfield.lov_com_scr0010_4_2({                             xtype: "lov_com_scr0010_4_2",                             lovtitle:'query',                             fieldmapping: [{column:"descr",field:"query_name"}                                 ,{column:"person_sn",field:"person_sn"}                             ],                             selectonfocus:true,                             name:"query_name",                             id:"query_name",                             fieldlabel:"name"                         })                         ,{                             xtype: 'hidden',                             name: 'person_sn',                             id: 'person_sn'                         }                     ]                 }]             }]         });      });