PDA

View Full Version : Extjs 4 - form with column layout does not margin fields



fafche
17 Dec 2013, 10:30 AM
Here is my view:


Ext.define('NG.view.order.Header', { extend: 'Ext.form.Panel',
alias: 'widget.orderheader',
scroll: 'vertical',
layout: 'column',
defaults: {
columnWidth: .33,
border: false
},
config: {
order: null
},


constructor: function (config) {
var me = this;


me.items = me.createItems();


me.callParent(arguments);


me.setOrder(config.order);
},


// creates this view items.
createItems: function () {
var items = [{
//column 1
layout: 'form',
defaultType: 'displayfield',
defaults: {
margin:'0 0 15 0'
},
items: [{
fieldLabel: 'No',
name: 'orderNumber'
}, {
fieldLabel: 'Ver',
name: 'version'
}, {
fieldLabel: 'Date',
name: 'orderDate',
renderer: Ext.util.Format.dateRenderer(Date.patterns.defaultFormat)
}, {
fieldLabel: 'Amount',
name: 'totalAmount'
}]


}, {
//column 2
layout: 'form',
defaultType: 'displayfield',
items: [{
fieldLabel: 'Supplier',
name: 'vendorName'
}, {
fieldLabel: 'Supplier No',
name: 'vendorDuns'
}, {
fieldLabel: 'Customer',
name: 'customerName'
}, {
fieldLabel: 'Buyer',
name: 'orderBuyerName'
}]
}]


return items;
}
});

As you can see I have set a margin on the first column fields.
Its seems this value is ignored . I do not see it. it has no effect.
Is this a known issue ??
Is there a workaround?

scottmartin
19 Dec 2013, 8:54 AM
See if the following helps:



var items = [{
//column 1
//layout: 'form',
xtype: 'form', //
//defaultType: 'displayfield',
defaults: {
xtype: 'displayfield', // update existing config
margin:'0 0 15 0'
},
items: [{
fieldLabel: 'No',
name: 'orderNumber'
}, {
fieldLabel: 'Ver',
name: 'version'
}, {
fieldLabel: 'Date',
name: 'orderDate',
//renderer: Ext.util.Format.dateRenderer(Date.patterns.defaultFormat)
}, {
fieldLabel: 'Amount',
name: 'totalAmount'
}]


}, {