PDA

View Full Version : ExtJS 4.2 Grid Header doesn't show correctly in IE



chiahao
5 Mar 2014, 11:05 PM
The purpose of the following code is to popup a window which contains a 2 column grid. But it works fine only in Safari and Firefox but IE 8 and IE 10 (customer insist using). In IE, the 3rd hidden column will not be hidden but cover 1st column instead.
48197
Thanks!!
P.S. I use default css of extjs 4.2, does that matter?
<link rel="stylesheet" type="text/css" href="js/extjs-4.2.1.883/resources/css/ext-all.css">





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'
}
]
}]
}]
});
});

mitchellsimoens
7 Mar 2014, 12:18 PM
Are you sure the hidden column is showing or is it just the leftover space?

chiahao
7 Mar 2014, 4:49 PM
The desired result (Firefox) is following two columns:



ID
NAME








In IE, it would show



PERSON_SN

NAME








and square between PERSON_SN and NAME is somehow the drop-down menu for ID.



Thanks for help.