PDA

View Full Version : Preview ignores style



medusadelft
20 Jun 2010, 12:05 AM
I started my components with a viewpoint. Added a style: 'padding: 5px;' to it. In the design-window this is honoured.
When I click 'preview', I do not see the padding back in the window. Padding within components seem to work.

My code:

MyCMSUi = Ext.extend(Ext.Viewport, {
layout: 'border',
style: 'padding: 5px;',
id: 'vpCMS',
initComponent: function() {
this.items = [
{
xtype: 'panel',
region: 'west',
width: 300,
layout: 'border',
split: true,
style: 'margin-bottom: 10px;',
stateful: true,
id: 'brdPage',
ref: 'brdPage',
items: [
{
xtype: 'treepanel',
title: 'lang.pages.pageTitle',
region: 'center',
split: true,
stateful: true,
rootVisible: false,
id: 'treePages',
ref: '../treePages',
root: {
text: 'Root Node'
},
loader: {

}
},
{
xtype: 'panel',
title: 'lang.general.notUsed',
region: 'south',
layout: 'fit',
collapseMode: 'mini',
split: true,
stateful: true,
id: 'panPage'
}
]
},
{
xtype: 'tabpanel',
activeTab: 3,
region: 'center',
split: true,
style: 'margin-bottom: 10px;',
bodyBorder: true,
stateful: true,
id: 'tabPage',
ref: 'tabPage',
items: [
{
xtype: 'panel',
title: 'lang.pages.page.title',
bodyBorder: true,
bodyStyle: 'background-color: #DFE8F6;',
id: 'tabBasic',
ref: '../tabBasic',
items: [
{
xtype: 'form',
labelWidth: 200,
labelAlign: 'left',
layout: 'form',
style: 'padding: 10px',
unstyled: true,
border: false,
buttonAlign: 'center',
headerAsText: false,
id: 'frmPageBasics',
ref: '../../frmPageBasics',
items: [
{
xtype: 'textfield',
anchor: '100%',
name: 'idPages',
hidden: true,
hideLabel: true,
id: 'fldIdPages',
ref: '../../../fldIdPages'
},
{
xtype: 'textfield',
fieldLabel: 'lang.pages.page.basic.title',
anchor: '100%',
name: 'pageTitle',
id: 'fldPageTitle',
ref: '../../../fldPageTitle'
},
{
xtype: 'textarea',
fieldLabel: 'lang.pages.page.basic.keywords',
anchor: '100%',
name: 'metaKeywords',
id: 'fldMetaKeywords',
ref: '../../../fldMetaKeywords'
},
{
xtype: 'textarea',
fieldLabel: 'lang.pages.page.basic.description',
anchor: '100%',
name: 'metaDescription',
id: 'fldMetaDescription',
ref: '../../../fldMetaDescription'
}
],
fbar: {
xtype: 'toolbar',
id: 'tbPageBasics',
ref: '../../../tbPageBasics',
items: [
{
xtype: 'button',
text: 'lang.general.save',
id: 'btnPageBasicsSave',
ref: '../../../../btnPageBasicsSave'
}
]
}
}
]
},
{
xtype: 'panel',
title: 'lang.pages.block.plain.title',
bodyStyle: 'background-color: #DFE8F6;',
id: 'tabPlain',
ref: '../tabPlain',
items: [
{
xtype: 'form',
labelWidth: 200,
labelAlign: 'left',
layout: 'form',
buttonAlign: 'center',
style: 'padding: 10px',
headerAsText: false,
unstyled: true,
id: 'frmBlockPlain',
ref: '../../frmBlockPlain',
items: [
{
xtype: 'textfield',
anchor: '100%',
name: 'idPageBlock',
hidden: true,
hideLabel: true,
id: 'fldBPIdPageBlock',
ref: '../../../fldBPIdPageBlock'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'idBlockType',
hidden: true,
hideLabel: true,
id: 'fldBPIdBlockType',
ref: '../../../fldBPIdBlockType'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'idPages',
hidden: true,
hideLabel: true,
id: 'fldBPIdPages',
ref: '../../../fldBPIdPages'
},
{
xtype: 'fieldset',
title: 'lang.page.block.plain.title',
layout: 'form',
collapsible: true,
labelWidth: 190,
stateful: true,
items: [
{
xtype: 'textfield',
fieldLabel: 'lang.page.block.plain.title',
anchor: '100%',
name: 'title',
id: 'fldBPTitle',
ref: '../../../../fldBPTitle'
},
{
xtype: 'textarea',
fieldLabel: 'lang.page.block.plain.description',
anchor: '100%',
name: 'description',
id: 'fldBPDesc',
ref: '../../../../fldBPDesc'
}
]
},
{
xtype: 'textarea',
fieldLabel: 'lang.page.block.plain.text',
anchor: '100%',
name: 'text',
grow: true,
growMax: 500,
growMin: 100,
id: 'fldBPText',
ref: '../../../fldBPText'
}
],
fbar: {
xtype: 'toolbar',
id: 'tbBlockPlain',
ref: '../../../tbBlockPlain',
items: [
{
xtype: 'button',
text: 'lang.general.save',
id: 'btnBlockPlainSave',
ref: '../../../../btnBlockPlainSave'
}
]
}
}
]
},
{
xtype: 'panel',
title: 'lang.pages.block.html.title',
bodyStyle: 'background-color: #DFE8F6;',
id: 'tabHtml',
ref: '../tabHtml',
items: [
{
xtype: 'form',
labelWidth: 200,
labelAlign: 'left',
layout: 'form',
buttonAlign: 'center',
style: 'padding: 10px',
headerAsText: false,
unstyled: true,
id: 'frmBlockHtml',
ref: '../../frmBlockHtml',
items: [
{
xtype: 'textfield',
anchor: '100%',
name: 'idPageBlock',
hidden: true,
hideLabel: true,
id: 'fldBHIdPageBlock',
ref: '../../../fldBHIdPageBlock'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'idBlockType',
hidden: true,
hideLabel: true,
id: 'fldBHIdBlockType',
ref: '../../../fldBHIdBlockType'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'idPages',
hidden: true,
hideLabel: true,
id: 'fldBHIdPages',
ref: '../../../fldBHIdPages'
},
{
xtype: 'fieldset',
title: 'lang.page.block.html.title',
layout: 'form',
collapsible: true,
labelWidth: 190,
stateful: true,
items: [
{
xtype: 'textfield',
fieldLabel: 'lang.page.block.html.title',
anchor: '100%',
name: 'title',
id: 'fldBHTitle',
ref: '../../../../fldBHTitle'
},
{
xtype: 'textarea',
fieldLabel: 'lang.page.block.html.description',
anchor: '100%',
name: 'description',
id: 'fldBHDesc',
ref: '../../../../fldBHDesc'
}
]
},
{
xtype: 'htmleditor',
anchor: '100%',
fieldLabel: 'lang.page.block.html.text',
height: 300,
width: 300,
name: 'text',
id: 'fldBHText',
ref: '../../../fldBHText'
}
],
fbar: {
xtype: 'toolbar',
id: 'tbBlockHtml',
ref: '../../../tbBlockHtml',
items: [
{
xtype: 'button',
text: 'lang.general.save',
id: 'btnBlockHtmlSave',
ref: '../../../../btnBlockHtmlSave'
}
]
}
}
]
},
{
xtype: 'panel',
title: 'lang.pages.block.random.title',
bodyStyle: 'background-color: #DFE8F6;',
id: 'tabRandom',
ref: '../tabRandom',
items: [
{
xtype: 'form',
labelWidth: 200,
labelAlign: 'left',
layout: 'form',
flex: 1,
autoWidth: false,
border: false,
unstyled: true,
buttonAlign: 'center',
style: 'padding: 10px;',
id: 'frmBlockRandom',
ref: '../../frmBlockRandom',
items: [
{
xtype: 'grid',
flex: 1,
height: 150,
border: true,
header: false,
stripeRows: true,
id: 'gridBlock',
ref: '../../../gridBlock',
columns: [
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
},
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
},
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
}
],
tbar: {
xtype: 'toolbar',
id: 'tbBlockGrid',
ref: '../../../../tbBlockGrid',
items: [
{
xtype: 'button',
text: '(classBtnOnlyIcons<> \'x-btn-icons\'?lang.general.add:\'\')',
iconCls: 'classBtnOnlyIcons',
id: 'btnBlockGridAdd',
ref: '../../../../../btnBlockGridAdd'
},
{
xtype: 'button',
text: '(classBtnOnlyIcons<> \'x-btn-icons\'?lang.general.delete:\'\')',
id: 'btnBlockGridDelete',
ref: '../../../../../btnBlockGridDelete'
}
]
}
},
{
xtype: 'textfield',
anchor: '100%',
name: 'idPageBlock',
hidden: true,
hideLabel: true,
id: 'fldBRIdPageBlock',
ref: '../../../fldBRIdPageBlock'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'idBlockType',
hidden: true,
hideLabel: true,
id: 'fldBRIdBlockType',
ref: '../../../fldBRIdBlockType'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'idPages',
hidden: true,
hideLabel: true,
id: 'fldBRIdPages',
ref: '../../../fldBRIdPages'
},
{
xtype: 'fieldset',
title: 'lang.page.block.html.title',
layout: 'form',
collapsible: true,
labelWidth: 190,
stateful: true,
items: [
{
xtype: 'textfield',
fieldLabel: 'lang.page.block.html.title',
anchor: '100%',
name: 'title',
id: 'fldBRTitle',
ref: '../../../../fldBRTitle'
},
{
xtype: 'textarea',
fieldLabel: 'lang.page.block.html.description',
anchor: '100%',
name: 'description',
id: 'fldBRDesc',
ref: '../../../../fldBRDesc'
}
]
},
{
xtype: 'htmleditor',
anchor: '100%',
fieldLabel: 'lang.page.block.html.text',
height: 150,
width: 300,
name: 'text',
style: 'margin: 10px;',
id: 'fldBRText',
ref: '../../../fldBRText'
}
],
fbar: {
xtype: 'toolbar',
id: 'tbBlockRandom',
ref: '../../../tbBlockRandom',
items: [
{
xtype: 'button',
text: 'lang.general.save',
id: 'btnBlockGridSave',
ref: '../../../../btnBlockGridSave'
}
]
}
}
]
}
]
}
];
MyCMSUi.superclass.initComponent.call(this);
}
});


Maurice

jarrednicholls
21 Jun 2010, 3:14 AM
The Viewport is really a representation of the body DOM element. In the Designer, we simulate the Viewport with Panel. Panels will honor some styles that true Viewports would not. That's all you're experiencing. Thanks though.

medusadelft
27 Jun 2010, 10:29 AM
Ok, I understand. Thanks for explaining.