PDA

View Full Version : form fields in column layout css alignment problem in internet explorer 7.0 IE7.0



emredagli
22 Jun 2009, 11:14 PM
Hii,
I try to use form fields in column layout in ExtJS 3.0 rc2.

I think I must miss some points on usage?

this is the sample code:




Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '/admin/'+'ext/resources/images/default/s.gif'; // reference local blank image
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(),
reader: new Ext.data.JsonReader({
root: "resultSet",
id: "value"
}, [
{name: "text", type: 'string'},
{name: 'value', type: 'int'}
]
),
remoteSort: false
});

store.loadData({
resultSet:[{
value:1,
text:'dene'
},{
value:2,
text:'dene2'
}]
});

var itemConfig = [{
layout:'form',
border:false,
xtype:'panel',
defaultType:'testfield',
labelWidth:100,
items:[{
xtype:'textfield',
fieldLabel:'Aloo',
value:'123'
},{
fieldLabel: 'Show',
xtype: 'combo',
editable: false,
store: store,
displayField: 'text',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
value: 1,
width: 100,
forceSelection: true
},{
xtype:'numberfield',
fieldLabel:'Aloo',
value:123
},{
xtype:'checkbox',
fieldLabel:'Aloo'
},{
xtype:'checkbox',
fieldLabel:'Aloo',
boxLabel:'aloo',
value:true
}]
},{
layout:'column',
xtype:'panel',
border:false,
defaults:{border:false},
width:900,
items:[{
xtype:'panel',
html:'Panel',
width:105
},{
xtype:'textfield',
value:'textfield',
width:60
},{
xtype: 'combo',
editable: false,
store: store,
displayField: 'text',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
value: 1,
width: 50,
forceSelection: true
},{
xtype:'numberfield',
width: 50,
value:123
},{
width: 50,
xtype:'checkbox'
},{
xtype:'checkbox',
width: 80,
boxLabel:'aloo',
value:true
},{
xtype:'button',
text:'hebe',
iconCls:'tickets-attachment'
},{
xtype:'button',
text:'hebe'
}]
}];
mainLayoutConfig = {
layout:'border',
border:false,
renterTo: Ext.getBody(),
items:[{
region:'center',
frame: false,
border: false,
split: true,
layout: 'border',
bodyStyle:'background-color:#FFFFFF;',
items:[{
collapsible: false,
//height:300,
border:true,
region:'center',
margins: '5 5 5 5',
layout: 'anchor',
frame: false,
split: true,
layoutConfig: {
animate: true // Layout-specific config values go here
},
style:'padding-top:0px;background-color:rgb(255,255,255);',
bodyStyle:'padding:5px;',
items: itemConfig
}]
},{
region:'north',
height:100,
border: false,
items:[{
xtype:'button',
text:'hebe',
iconCls:'tickets-attachment',
handler:function(){}
},{
xtype:'button',
text:'hebe',
handler:function(){}
}]
}]
};
mainLayout = new Ext.Viewport(mainLayoutConfig);

});

And this is the output in IE7.0:
http://www.emredagli.com/hata44.jpg
The problem is on column layout... How should I correct form fields CSS's on column layout?...

Or should I use other newly created layouts (vbox)?

Thanks for your advance...

emredagli
23 Jun 2009, 4:15 AM
Any suggestions?

Condor
23 Jun 2009, 5:13 AM
Have you tried wrapping the fields in another container?

{
layout:'column',
xtype:'container',
autoEl:'div', // only needed on Ext 2.x
width:900,
defaults:{
xtype:'container',
autoEl:'div', // only needed on Ext 2.x
layout:'anchor',
defaults:{
anchor:'0'
}
}
items:[{
width:165,
layout:'form',
items:{
fieldLabel: 'Panel',
xtype:'textfield',
value:'textfield'
}
},{
width:50,
items:{
xtype: 'combo',
editable: false,
store: store,
displayField: 'text',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
value: 1,
forceSelection: true
}
},{
width:50,
items:{
xtype:'numberfield',
value:123
}
},{
width:50,
items:{
xtype:'checkbox'
}
},{
width:80,
items:{
xtype:'checkbox',
boxLabel:'aloo',
value:true
}
},{
xtype:'button',
text:'hebe',
iconCls:'tickets-attachment'
},{
xtype:'button',
text:'hebe'
}]
}

emredagli
23 Jun 2009, 5:25 AM
Thanks Mr. Condor for your interest.

I try your solution, now it looks like (in IE7.0):
http://www.emredagli.com/hata45.jpg
Still problem in comboboxs and number fields CSS.
And this is the real way to fix it?
If this is the case, long hours waiting for me to fixed whole... :-/

Condor
23 Jun 2009, 5:47 AM
It's the extra wrapping done by form layout. It looks OK if all the fields are in form layout:

{
layout:'column',
xtype:'container',
autoEl:'div', // only needed on Ext 2.x
width:900,
defaults:{
xtype:'container',
autoEl:'div', // only needed on Ext 2.x
layout:'form',
defaults:{
hideLabel:true,
anchor:'0'
}
},
items:[{
width:165,
items:{
hideLabel:false,
fieldLabel: 'Panel',
xtype:'textfield',
value:'textfield'
}
},{
width:50,
items:{
xtype: 'combo',
editable: false,
store: store,
displayField: 'text',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
value: 1,
forceSelection: true
}
},{
width:50,
items:{
xtype:'numberfield',
value:123
}
},{
width:50,
items:{
xtype:'checkbox'
}
},{
width:80,
items:{
xtype:'checkbox',
boxLabel:'aloo',
value:true
}
},{
xtype:'button',
text:'hebe',
iconCls:'tickets-attachment'
},{
xtype:'button',
text:'hebe'
}]
}

emredagli
23 Jun 2009, 6:02 AM
Thanks Mr.Condor,

It now seams to work.

But I sorrow to fix this problem with this way...

What do you think, is there a trick way to do this?

Can we define "columnform" layout with easy manner?

Condor
23 Jun 2009, 6:05 AM
You could switch to using a TableLayout with separate Labels.

There is also a TableFormLayout in the extensions section.

I don't think there is a ColumnFormLayout...

emredagli
1 Nov 2009, 3:04 AM
What do you think about this thread?
http://www.extjs.com/forum/showthread.php?p=174743#post174743