1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    102
    Answers
    1
    Vote Rating
    1
    sj_tt6 is on a distinguished road

      0  

    Default Unanswered: Make components proportional in different resolution

    Unanswered: Make components proportional in different resolution


    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?

    Code:
    {
            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,

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Posts
    102
    Answers
    1
    Vote Rating
    1
    sj_tt6 is on a distinguished road

      0  

    Default


    Trying to post the sample more readable

    Code:
    {
      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'
      },
    ...