PDA

View Full Version : Form buttons missing



TampaBay55
23 May 2009, 7:57 AM
Gurus!

I have a couple of questions to ask - both of which are related to the following code:


var cliUpdateWindow = new Ext.Window({
id: 'cliupdatewindow',
title:'Client Information Editor',
width:800,
height:600,
layout:'fit',
modal:true,
items:[{
xtype: 'form',
id: 'clidataform',
border: false,
layout: 'fit',
bodyStyle:'background-color:transparent',
labelAlign: 'right',
labelWidth: 90,
items :[{
xtype:'tabpanel',
activeItem:0,
deferredRender:false,
autoScroll:true,
hideMode: 'offsets',
bodyStyle:'background-color:transparent',
defaults:{bodyStyle:'background-color:transparent'},
items:[{
title :'Demographics And Fees',
layout: 'fit',
items :[{
xtype:'textfield',
name: 'CLI_RECORDID',
width: 10,
height: 0,
hidden: true
},{
xtype: 'panel',
border: false,
width: 800,
layout:'column',
bodyStyle:'background-color:transparent;padding:5px',
defaults:{},
items:[{
columnWidth: .55,
bodyStyle:'background-color:transparent',
layout:'form',
border:false,
items:[{
xtype:'fieldset',
title:'Demographics',
items:[{
xtype:'textfield',
name: 'CLI_CLIENTCODE',
fieldLabel: 'Client Code',
width: 140
},{
xtype:'textfield',
name : 'CLI_PRACTICENAME',
fieldLabel: 'Practice Name',
width : 298
},{
xtype:'textfield',
name : 'CLI_CLIENTNAME',
fieldLabel: 'Client Name',
width : 298
},{
xtype:'textfield',
name : 'CLI_ADDRESS1',
fieldLabel: 'Address Line 1',
width : 298
},{
xtype:'textfield',
name : 'CLI_ADDRESS2',
fieldLabel: 'Address Line 2',
width : 298
},{
xtype : 'panel',
border : false,
width : 400,
layout : 'column',
bodyStyle : 'background-color:transparent',
defaults : {border:false,layout:'form',bodyStyle:'padding:0px;background-color:transparent'},
items :[{
columnWidth: .62,
items :[{
xtype : 'textfield',
fieldLabel: 'City/State/Zip',
name : 'CLI_CITY',
width : 140
}]
},{
columnWidth: .12,
items :[{
xtype : 'textfield',
fieldLabel: 'City/St/Zip',
hideLabel : true,
name : 'CLI_STATE',
width : 40
}]
},{
columnWidth: .26,
items :[{
xtype : 'textfield',
fieldLabel: 'City/St/Zip',
hideLabel : true,
name : 'CLI_ZIPCODE',
width : 100
}]
}]
},{
xtype : 'panel',
border : false,
width : 400,
layout : 'column',
bodyStyle : 'background-color:transparent',
defaults : {border:false,layout:'form',bodyStyle:'padding:0px;background-color:transparent'},
items :[{
columnWidth: .50,
items :[{
xtype : 'textfield',
name : 'CLI_TELEPHONE',
fieldLabel: 'Telephone',
width : 100
}]
},{
columnWidth: .50,
items :[{
xtype : 'textfield',
name : 'CLI_FAXNUMBER',
labelWidth: 44,
fieldLabel: 'Fax Number',
width : 98
}]
}]
},{
xtype :'textfield',
name : 'CLI_TAXID',
fieldLabel: 'Tax ID Number',
width : 100
}]
}]
},{
columnWidth: .45,
bodyStyle:'background-color:transparent',
border:false,
items:[{
html: 'A Grid Will Soon Go Here!'
}]
}]
}]
},{
title:'Invoicing',
html :'Tab 2'
},{
title:'Collections',
html :'Tab 3'
}] // Tab Panel Items
},{
buttons:[{
text : 'Save',
handler: function(){
localRequest = 'save';
var formfields = Ext.getCmp('clidataform').getForm().getValues();
cliDataID = formfields['CLI_RECORDID'];
Ext.getCmp('clidataform').getForm().submit({
clientValidation : true,
params :{globalrequest:localRequest,recordid:cliDataID},
success : function(form,action){
cliUpdateWindow.close();
cliDataStore.reload();
}
})
}
},{
text : 'Cancel',
handler: function(){
if(globalRequest=='insert'){
var formfields = Ext.getCmp('clidataform').getForm().getValues();
cliDataID = formfields['CLI_RECORDID'];
localRequest = 'delete';
Ext.getCmp('clidataform').getForm().submit({
params:{globalrequest:localRequest,recordid:cliDataID}
});
}
cliUpdateWindow.close()
}
}]
}]
I have been tinkering with this for a few hours now and I cannot quite figure out why my form buttons are not showing up. Any idea? I could really use some help with this.

Also, and I realize this may be an issue with IE (I use firefox but I test with all browsers). The field CLI_ZIPCODE comes out perfectly aligned to the right with the other fields in IE but is about 4-6 px larger in firefox. Can anyone suggest a workaround? Thanks.

TampaBay55
24 May 2009, 3:04 AM
Can anyone help me with this? Thanks.

Animal
24 May 2009, 3:53 AM
What does layout: 'fit' do?

Then you have:



layout: 'fit',
items :[{
xtype:'textfield',
name: 'CLI_RECORDID',
width: 10,
height: 0,
hidden: true
},{
xtype: 'panel',


Huh?

Animal
24 May 2009, 3:53 AM
items:[{
columnWidth: .55,
bodyStyle:'background-color:transparent',
layout:'form',
border:false,
items:[{
xtype:'fieldset',


Make the Fieldset the column. Do not nest it inside a Panel.

Animal
24 May 2009, 3:55 AM
You should unwind that huge config.

Create the Components (or just their config+xtype objects) first in vars, and then use them to create a simple, readable layout.

TampaBay55
24 May 2009, 4:13 AM
Animal:

Thanks for responding.

The layout:fit should have been removed before I posted the code - I was tinkering with the code.

I nested the columns inside a panel because I was not able to columns to work at all on a tab without it.

I will take your advice here and streamline the config by setting up variable components. I will post my results. Thanks.