PDA

View Full Version : [SOLVED] Layout problem...



danielbertini
11 Oct 2010, 7:05 PM
How can i do to set autoHeight tab inside a window?



var promotionAddForm = new Ext.FormPanel({
url: base_url+'marketing/promotion/add',
frame: false,
border: false,
baseCls: 'x-plain',
labelAlign: 'right',
autoHeight: false,
labelWidth: 130,
defaults: {
labelStyle: 'font-size:11px; color:#333; font-weight:bold;',
xtype: 'textfield',
},
items: [{
fieldLabel: 'Nome',
name: 'name',
anchor: '90%',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Status',
name: 'status',
anchor: '90%',
triggerAction: 'all',
editable: false,
allowBlank: false,
store: ['Ativa','Inativa']
},{
xtype: 'tabpanel',
activeTab: 0,
autoHeight: true,
autoScroll: true,
plain: true,
defaults:{
layout: 'form',
frame: false,
autoHeight: true,
bodyStyle: 'padding:12px 0px 0px 0px; background:#f6f6f6;'
},
items:[{
title:'Configurações',
defaults:{
labelStyle: 'font-size:11px; color:#333; font-weight:normal;',
anchor: '90%',
xtype: 'textfield',
},
items:[{
labelStyle: 'font-size:11px; color:#333; font-weight:bold;',
xtype: 'combo',
fieldLabel: 'Tipo de desconto',
name: 'discount_type',
value: 'Porcentagem',
triggerAction: 'all',
editable: false,
anchor: '90%',
allowBlank: false,
store: ['Porcentagem','Valor fixo'],
listeners :{
'select':function(combo, record, idx){
if(idx === 0){
Ext.getCmp('percentage_value').enable();
Ext.getCmp('fixed_value').disable();
Ext.getCmp('fixed_value').setValue('');
}
if(idx === 1){
Ext.getCmp('percentage_value').disable();
Ext.getCmp('fixed_value').enable();
Ext.getCmp('percentage_value').setValue('');
}
}
}
},{
fieldLabel: 'Porcentagem',
name: 'percentage_value',
id: 'percentage_value',
xtype: 'numberfield',
allowNegative: false
},{
disabled: true,
xtype: 'moneyfield',
fieldLabel: 'Valor fixo',
name: 'fixed_value',
id: 'fixed_value'
},{
xtype: 'datefield',
editable: false,
fieldLabel: 'Data de início',
name: 'date_to_start'
},{
editable: false,
xtype: 'datefield',
fieldLabel: 'Data de término',
name: 'date_to_end'
}]
}]
}]
});





var promotionAddWin = new Ext.Window({
id: 'promotion-add-win',
title: 'Adicionar Promoção',
width: 640,
height: 480,
closable: true,
resizable: true,
maximizable: true,
modal: true,
bodyStyle: 'padding:10px;',
layout: 'fit',
items: [promotionAddForm]
});

danielbertini
11 Oct 2010, 7:57 PM
Help please!

laurentParis
11 Oct 2010, 9:04 PM
I suggest to use vbox with 2 items
* first item => form with your 2 fields header
* second item => yor tabpanel with flex:1

Animal
11 Oct 2010, 9:36 PM
Correct.



{
xtype: 'form',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
topContainer,
tabPanel
]
}


Where topContainer is an Ext.Container which uses layout: 'form' to contain those fields.

And tabPanel is your TabPanel configured flex: 1

danielbertini
12 Oct 2010, 11:29 AM
Just Perfect!
The final code is:





var topContainer = new Ext.Container({
layout:'form',
defaults:{
labelStyle: 'font-size:11px; color:#333; font-weight:bold;',
xtype: 'textfield',
},
items: [{
fieldLabel: 'Nome',
name: 'name',
anchor: '90%',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Status',
name: 'status',
anchor: '90%',
triggerAction: 'all',
editable: false,
allowBlank: false,
store: ['Ativa','Inativa']
}]
});

var tabPanel = new Ext.TabPanel({
xtype: 'tabpanel',
activeTab: 0,
autoScroll: true,
plain: true,
flex: 1,
defaults:{
layout: 'form',
frame: false,
autoHeight: true,
bodyStyle: 'padding:12px 0px 0px 0px;'
},
items:[{
title:'Configurações',
defaults:{
labelStyle: 'font-size:11px; color:#333; font-weight:normal;',
anchor: '90%',
xtype: 'textfield',
},
items:[{
labelStyle: 'font-size:11px; color:#333; font-weight:bold;',
xtype: 'combo',
fieldLabel: 'Tipo de desconto',
name: 'discount_type',
value: 'Porcentagem',
triggerAction: 'all',
editable: false,
anchor: '90%',
allowBlank: false,
store: ['Porcentagem','Valor fixo'],
listeners :{
'select':function(combo, record, idx){
if(idx === 0){
Ext.getCmp('percentage_value').enable();
Ext.getCmp('fixed_value').disable();
Ext.getCmp('fixed_value').setValue('');
}
if(idx === 1){
Ext.getCmp('percentage_value').disable();
Ext.getCmp('fixed_value').enable();
Ext.getCmp('percentage_value').setValue('');
}
}
}
},{
fieldLabel: 'Porcentagem',
name: 'percentage_value',
id: 'percentage_value',
xtype: 'numberfield',
allowNegative: false
},{
disabled: true,
xtype: 'moneyfield',
fieldLabel: 'Valor fixo',
name: 'fixed_value',
id: 'fixed_value'
},{
xtype: 'datefield',
editable: false,
fieldLabel: 'Data de início',
name: 'date_to_start'
},{
editable: false,
xtype: 'datefield',
fieldLabel: 'Data de término',
name: 'date_to_end'
}]
}]
});

var promotionAddForm = new Ext.FormPanel({
xtype: 'form',
frame: false,
border: false,
baseCls: 'x-plain',
labelAlign: 'right',
autoHeight: false,
labelWidth: 130,
defaults:{
labelStyle: 'font-size:11px; color:#333; font-weight:bold;',
xtype: 'textfield',
},
layout:{
type: 'vbox',
align: 'stretch'
},
items:[topContainer, tabPanel]
});

danielbertini
12 Oct 2010, 11:30 AM
Thanks!!!