PDA

View Full Version : Make components proportional in different resolution



sj_tt6
1 Feb 2013, 8:30 AM
Hi,

I have a problem and need somebody to advice. I design my page in the resolution of 1680x1050. When the page is display by a projector that has resolution of 800x600, all components do not change proportionally. How do I make my page look consistent in different resolution?



{
xtype: 'fieldset',
height: 320,
margin: '20, 0, 22, 0',
collapsible: true,
title: '<span class="fieldset_title">Personal Information</span>',
defaults: {
labelClsExtra: 'label'
},
items: [
{
xtype: 'combobox',
anchor: '28%',
itemId: 'title',
name: 'title',
store: ['Mr', 'Mrs', 'Ms'],
fieldLabel: 'Title'
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
layout: '100%'
},
fieldDefaults: {
labelAlign: 'left',
labelWidth: 30
},
items: [
{
xtype: 'container',
layout: 'column',
items: [
{
xtype: 'textfield',
fieldLabel: 'First',
name: 'residentFirstName',
id: 'residentFirstName',
style: 'margin-right:20',
allowBlank: false,
afterLabelTextTpl: required,
columnWidth: 0.4
},{
xtype: 'splitter',
columnWidth: 0.02
},{
xtype: 'textfield',
fieldLabel: 'Last',
name: 'residentLastName',
id: 'residentLastName',
margin: '0, 15, 5, 0',
allowBlank: false,
afterLabelTextTpl: required,
columnWidth: 0.4
},{
xtype: 'splitter',
columnWidth: 0.02
},{
xtype: 'textfield',
fieldLabel: 'MI',
name: 'residentMiddleName',
id: 'residentMiddleName',
allowBlank: true,
labelWidth:20,
columnWidth: 0.08,
minLength: 0,
maxLength: 1,
enforceMaxLength:true
}
]
}
] //items of fieldcontainer "Name"
},{
xtype : 'fieldcontainer',
fieldLabel : 'Gender',
height: 25,
margin: '5, 0, 6, 0',
defaultType: 'radiofield',
layout: {
defaultMargins: {
top: 0,
right: 10,
bottom: 5,
left: 0
},
type: 'hbox'
},
...



Thank you,

sj_tt6
1 Feb 2013, 8:44 AM
Trying to post the sample more readable


{
xtype: 'fieldset',
height: 320,
margin: '20, 0, 22, 0',
collapsible: true,
title: '<span class="fieldset_title">Personal Information</span>',
defaults: {
labelClsExtra: 'label'
},
items: [
{
xtype: 'combobox',
anchor: '28%',
itemId: 'title';
name: 'title',
store: ['Mr', 'Mrs', 'Ms'],
fieldLabel: 'Title'
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
layout: '100%'
},
fieldDefaults: {
labelAlign: 'left',
labelWidth: 30
},
items: [
{
xtype: 'container',
layout: 'column',
items: [
{
xtype: 'textfield',
fieldLabel: 'First',
name: 'residentFirstName',
id: 'residentFirstName',
style: 'margin-right:20',
allowBlank: false,
afterLabelTextTpl: required,
columnWidth: 0.4
},{
xtype: 'splitter',
columnWidth: 0.02
},{
xtype: 'textfield',
fieldLabel: 'Last',
name: 'residentLastName',
id: 'residentLastName',
margin: '0, 15, 5, 0',
allowBlank: false,
afterLabelTextTpl: required,
columnWidth: 0.4
},{
xtype: 'splitter',
columnWidth: 0.02
},{
xtype: 't extfield',
fieldLabel: 'MI',
name: 'residentMiddleName',
id: 'residentMiddleName',
allowBlank: true,
labelWidth:20,
columnWidth: 0.08,
minLength: 0,
maxLength: 1,
enforceMaxLength:true
}
]
}
] //items of fieldcontainer "Name"
},{
xtype : 'fieldcontainer',
fieldLabel : 'Gender',
height: 25,
margin: '5, 0, 6, 0',
defaultType: 'radiofield',
layout: {
defaultMargins: {
top: 0,
right: 10,
bottom: 5,
left: 0
},
type: 'hbox'
},
...