Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    ramannachekuri is on a distinguished road

      0  

    Default hbox layout doesnt work in fieldset

    hbox layout doesnt work in fieldset


    we have multiple views in our app and few of them have fieldsets.we had to implement hbox configuration for few of the fieldsets. This was working fine before 2.1, but now it doesn't work. Here is the code I have
    {
    xtype: 'fieldset',
    margin:0,
    border: false,
    id:'closecaseFieldset',
    items: [


    {
    xtype : 'textfield',
    name : 'tagProductNo',
    label : L.tagProductNo,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    clearIcon:true
    },
    {
    xtype : 'textfield',
    name : 'tagSerialNo',
    label : L.tagSerialNo,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    clearIcon:true

    },


    {
    xtype: 'textfield',
    name: 'tagSysProductNo',
    label: L.tagSysProductNo,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    clearIcon:true
    },
    {
    xtype: 'textfield',
    name: 'tagSysSerialNo',
    id:'tagSysSerialNo',
    label: L.tagSysSerialNo,
    labelCls:'fieldLabelClass',
    hideOnMaskTap:true,
    labelWidth:135,
    clearIcon:true
    },
    {
    xtype: 'selectfield',
    name : 'tagOrderType',
    label: L.tagOrderType,
    labelCls:'fieldLabelClass',
    id:'tagOrderType',
    labelWidth:135,
    usePicker:false,
    store:me.getOrderTypeStore()
    },
    {
    xtype: 'textfield',
    name: 'tagSeviceNoteNo',
    label: L.tagSeviceNoteNo,
    labelCls:'fieldLabelClass',
    hideOnMaskTap:true,
    labelWidth:135,
    clearIcon:true
    },


    {
    xtype: 'textfield',
    name: 'tagCTN',
    label: L.tagCTN,
    labelCls:'fieldLabelClass',
    hideOnMaskTap:true,
    labelWidth:135,
    clearIcon:true
    },




    {
    xtype: 'selectfield',
    name : 'tagRepairClass',
    id : 'tagRepairClass',
    label: L.tagRepairClass,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    usePicker:false,
    store:me.getRepairClassStore()


    },
    {
    xtype: 'selectfield',
    name : 'tagDelayCode',
    id : 'tagDelayCode',
    label: L.tagDelayCode,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    usePicker:false,
    store:me.getDelayCodeStore()
    },
    {
    xtype: 'textareafield',
    name: 'tagClosingSummary',
    id: 'tagClosingSummary',
    label: L.tagClosingSummary,
    labelCls:'fieldLabelClass',
    hideOnMaskTap:true,
    labelWidth:135,
    clearIcon:true
    },
    //tag for arrival time
    {
    xtype: 'datetimepickerfield',
    name : 'tagArrivalTime',
    id:'tagArrivalTime',
    label: L.tagArrivalTime,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    myPicker:gPicker,
    format : gdateFormat5,
    value: new Date()
    },
    //tag for finished time
    {
    xtype: 'datetimepickerfield',
    name : 'tagFinishedTime',
    id:'tagFinishedTime',
    label: L.tagFinishedTime,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    myPicker:gPicker,
    format : gdateFormat5,
    value: new Date()
    },
    //tag for System Fixed Time
    {
    xtype: 'datetimepickerfield',
    name : 'tagSysFixedTime',
    id:'tagSysFixedTime',
    label: L.tagSysFixedTime,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    myPicker:gPicker,
    format : gdateFormat5,
    value: new Date()
    },
    {
    //layout: 'hbox',
    layout: {
    type: 'hbox'
    },
    items: [
    {
    xtype: 'numberfield',
    minValue:0,
    maxValue:24,
    maxLength : 2,
    name: 'tagDurationHr',
    id: 'tagDurationHr',
    label: L.tagDurationHr,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    width : 140,
    //clearIcon:true,
    },
    /*{
    xtype:'spacer',
    html:'Hrs',
    padding:5,
    flex : 1
    //width:10
    },*/
    {
    xtype: 'numberfield',
    minValue:0,
    maxValue:59,
    maxLength : 2,
    name: 'tagDurationMn',
    id : 'tagDurationMn',
    width:145,
    //clearIcon:true,

    }
    ]

    },

    /* {
    xtype: 'numberfield',
    minValue:0,
    maxValue:24,
    name: 'tagDurationHr',
    id: 'tagDurationHr',
    label: L.tagDurationHr,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    width:155,
    clearIcon:true
    },
    {
    xtype: 'numberfield',
    minValue:0,
    maxValue:59,
    name: 'tagDurationMn',
    id : 'tagDurationMn',
    label: L.tagDurationHr,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    width:155,
    clearIcon:true

    },*/


    // tag for travel zone
    {
    xtype: 'selectfield',
    name : 'tagTravelZone',
    id : 'tagTravelZone',
    label: L.tagTravelZone ,
    labelCls:'fieldLabelClass',
    labelWidth:135,
    usePicker:false,
    store:me.getTravelZoneStore()
    }


    ]},




    {
    xtype:'panel',
    name:'warningMsgPanel',
    id:'warningMsgPanel',
    hidden:true,
    layout:'vbox',
    width:'100%',
    //cls:'customMessagePanel',
    cls:'customMessagePanel',
    items:[
    {
    html:"<font color=red><b>WARNING!</b></font>",
    margin:10
    },
    {
    html:"Warningfsfsdfsdf<br> ",
    id:'warningMsg',
    //cls:'customMessagePanel',
    //class:'customMessagePanel',
    margin:10
    },
    {xtype:'spacer'},
    {
    xtype:'panel',
    id:'buttonPanel',
    layout:'hbox',
    items:[
    {xtype:'spacer'},
    {
    xtype:'button',
    ui:'confirm',
    id:'confirmButton',
    text:'YES'
    },
    {xtype:'spacer'},
    {
    xtype:'button',
    ui:'decline',
    id:'declineButton',
    text:'NO'
    },
    {xtype:'spacer'}
    ]

    }

    ]

    }
    duration.JPG

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can't really read your test case as it's not in BBCode CODE tags so I created this test and it works fine for me:

    Code:
    Ext.Viewport.add({
        xtype : 'formpanel',
        items : [
            {
                xtype  : 'fieldset',
                title  : 'Test',
                layout : {
                    type  : 'hbox',
                    align : 'stretch'
                },
                items  : [
                    {
                        xtype : 'textfield',
                        label : 'One',
                        flex  : 1
                    },
                    {
                        xtype : 'textfield',
                        label : 'Two',
                        flex  : 1
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    ramannachekuri is on a distinguished road

      0  

    Default Not on the whole fieldset

    Not on the whole fieldset


    Hi Mitchel,
    I dont want to set HBOX to whole fieldset. I want to have whole fieldset in VBOX and few of the fields in fieldset should be in HBOX. If you look at my code you can see that. I am trying to create a simple test program to reproduce it. Will upload it once I have it.

    Thanks,
    Ramanna

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    ramannachekuri is on a distinguished road

      0  

    Default Here is the example

    Here is the example


    //<debug>
    Ext.Loader.setPath({
    'Ext': '../../src'
    });
    //</debug>


    /**
    * This example is a simple demo of some of the form and field components in Sencha Touch.
    * It also shows how you can bind a Model instance to a form, and then update that instance with values
    * from the form panel.
    */


    /**
    * Here we define a User model. An instance of this model will be used to load data into our form
    * panel. We will also update this form panel when you press the submit button.
    */
    Ext.define('User', {
    extend: 'Ext.data.Model',


    config: {
    fields: [
    { name: 'name', type: 'string' },
    { name: 'password', type: 'string' },
    { name: 'disabled', type: 'string' },
    { name: 'email', type: 'string' },
    { name: 'bio', type: 'string' },
    { name: 'url', type: 'string' },
    { name: 'date', type: 'date' },
    { name: 'number', type: 'integer' },
    { name: 'height', type: 'integer' },
    { name: 'enable', type: 'integer' },
    { name: 'spinner', type: 'integer' },
    { name: 'rank', type: 'string' },
    { name: 'enable', type: 'boolean' },
    { name: 'cool', type: 'boolean' },
    { name: 'color', type: 'string' },
    { name: 'team', type: 'string' },
    { name: 'secret', type: 'boolean' },
    { name: 'single_slider' },
    { name: 'multiple_slider' }
    ]
    }
    });


    // Define our simple application
    Ext.application({
    // Setup the icons and startup screens for phones and tablets.
    startupImage: {
    '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
    '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
    '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
    '768x1004': 'resources/startup/768x1004.png', // Non-retina iPad (first and second generation) in portrait orientation
    '748x1024': 'resources/startup/748x1024.png', // Non-retina iPad (first and second generation) in landscape orientation
    '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
    '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
    },


    isIconPrecomposed: false,
    icon: {
    57: 'resources/icons/icon.png',
    72: 'resources/icons/icon@72.png',
    114: 'resources/icons/icon@2x.png',
    144: 'resources/icons/icon@144.png'
    },


    // Require the components we will be using in this example
    requires: [
    'Ext.form.*',
    'Ext.field.*',
    'Ext.Button',
    'Ext.Toolbar',


    'Ext.data.Store'
    ],


    /**
    * The launch method of our application gets called when the application is good to launch.
    * In here, we are going to build the structure of our application and add it into the Viewport.
    */
    launch: function() {
    // Get all the items for our form.
    var items = this.getFormItems(),
    config, form;


    // Create the configuration of our form.
    // We give it the `formpanel` xtype and give it the items we got above.
    config = {
    xtype: 'formpanel',
    items: items
    };


    // If we are on a phone, we just want to add the form into the viewport as is.
    // This will make it stretch to the size of the Viewport.
    if (Ext.os.deviceType == 'Phone') {
    form = Ext.Viewport.add(config);
    } else {
    // If we are not on a phone, we want to make the formpanel model and give it a fixed with and height.
    Ext.apply(config, {
    modal: true,
    height: 505,
    width: 480,
    centered: true,


    // Disable hideOnMaskTap so it cannot be hidden
    hideOnMaskTap: false
    });


    // Add it to the Viewport and show it.
    form = Ext.Viewport.add(config);
    form.show();
    }


    this.form = form;
    },


    /**
    * This method returns an array of all items we should add into the form panel we create above in our launch function.
    * We have created this function to simply make things cleaner and easier to read and understand. You could just put these items
    * inline up above in the form `config`.
    * @return {Array} items
    */
    getFormItems: function() {
    return [
    {
    xtype: 'fieldset',
    title: 'Personal Info',
    instructions: 'Please enter the information above.',
    defaults: {
    required: true,
    labelAlign: 'left',
    labelWidth: '40%'
    },
    items: [

    {
    xtype: 'textfield',
    name: 'name',
    label: 'Name',
    autoCapitalize: false
    },
    {
    xtype: 'passwordfield',
    name: 'password',
    label: 'Password'
    },
    {
    layout : {
    type : 'hbox',
    align : 'stretch'
    },
    items : [
    {
    xtype : 'textfield',
    label : 'One',
    flex : 1
    },
    {
    xtype : 'textfield',
    label : 'Two',
    flex : 1
    }

    ]


    },
    {
    xtype: 'textfield',
    name: 'disabled',
    label: 'Disabled',
    disabled: true
    },
    {
    xtype: 'emailfield',
    name: 'email',
    label: 'Email',
    placeHolder: 'you@sencha.com'
    },
    {
    xtype: 'urlfield',
    name: 'url',
    label: 'Url',
    placeHolder: 'http://sencha.com'
    },
    {
    xtype: 'checkboxfield',
    name: 'cool',
    label: 'Cool',
    value: true
    },
    {
    xtype: 'spinnerfield',
    name: 'spinner',
    label: 'Spinner'
    },
    {
    xtype: 'selectfield',
    name: 'rank',
    label: 'Rank',
    valueField: 'rank',
    displayField: 'title',
    store: {
    data: [
    { rank: 'master', title: 'Master'},
    { rank: 'padawan', title: 'Student'},
    { rank: 'teacher', title: 'Instructor'},
    { rank: 'aid', title: 'Assistant'}
    ]
    }
    },
    {
    xtype: 'datepickerfield',
    name: 'date',
    label: 'Start Date',
    value: new Date(),
    picker: {
    yearFrom: 1980
    }
    },
    {
    xtype: 'hiddenfield',
    name: 'secret',
    value: 'false'
    },
    {
    xtype: 'textareafield',
    name: 'bio',
    label: 'Bio',
    maxRows: 10
    },
    {
    xtype: 'sliderfield',
    name: 'height',
    label: 'Height'
    },
    {
    xtype: 'togglefield',
    name: 'enable',
    label: 'Security Mode'
    },
    {
    xtype: 'radiofield',
    name: 'team',
    label: 'Red Team',
    value: 'redteam'
    },
    {
    xtype: 'radiofield',
    name: 'team',
    label: 'Blue Team',
    value: 'blueteam'
    }
    ]
    },
    {
    xtype: 'fieldset',
    title: 'Favorite color',
    defaults: { xtype: 'radiofield' },
    items: [
    { name: 'color', label: 'Red', value: 'red' },
    { name: 'color', label: 'Green', checked: true, value: 'green'}
    ]
    },
    {
    xtype: 'fieldset',
    title: 'HTML5',
    items: [
    {
    xtype: 'numberfield',
    name: 'number',
    label: 'Number'
    },
    {
    xtype: 'emailfield',
    name: 'email2',
    label: 'Email',
    clearIcon: true
    },
    {
    xtype: 'urlfield',
    name: 'url2',
    label: 'URL',
    clearIcon: true
    }
    ]
    },
    {
    xtype: 'fieldset',
    title: 'Single Select',
    items: [
    {
    xtype: 'selectfield',
    name: 'options',
    options: [
    {text: 'This is just a big select with text that is overflowing', value: '1'},
    {text: 'Another item', value: '2'}
    ]
    }
    ]
    },
    {
    xtype: 'fieldset',
    title: 'Single Text',
    items: [
    {
    xtype: 'textfield',
    name: 'single_text',
    clearIcon: true
    }
    ]
    },
    {
    xtype: 'fieldset',
    title: 'Single Toggle',
    items: [
    {
    xtype: 'togglefield',
    name: 'single_toggle',
    value: 1
    }
    ]
    },
    {
    xtype: 'fieldset',
    title: 'Single Slider',
    items: [
    {
    xtype: 'sliderfield',
    name: 'single_slider',
    value: 60
    }
    ]
    },
    {
    xtype: 'fieldset',
    title: 'Multiple Slider Thumbs',
    items: [
    {
    xtype: 'sliderfield',
    name: 'multiple_slider',
    values: [40, 90]
    }
    ]
    },


    // Create a docked bottom toolbar which will contain buttons to trigger various functions in our formpanel.
    {
    xtype: 'toolbar',
    docked: 'bottom',
    items: [
    // Lets add a load button which will load the formpanel with a User model
    {
    text: 'Load Model',
    ui: 'round',
    scope: this,
    handler: function() {
    var form = this.form;


    // Check if we have already created a user model yet. if we haven't, then lets create one.
    if (!form.user) {
    // Create a date for the datepicker field
    var date = new Date();
    date.setMonth(4);
    date.setYear(1989);
    date.setDate(1);


    // Create a new instance of the User model with a bunch of fake values.
    form.user = Ext.create('User', {
    name: 'Akura',
    password: 'secret',
    email: 'saru@sencha.com',
    disabled: 'disabled',
    url: 'http://sencha.com',
    bio: 'Learned the hard way!',
    number: 20,
    height: 20,
    spinner: 5,
    enable: 1,
    cool: true,
    date: date,
    team: 'redteam',
    color: 'blue',
    rank: 'padawan',
    secret: true,
    single_slider: 10,
    multiple_slider: [20, 40]
    });
    }


    // Set the record of the form to the User record instance.
    form.setRecord(form.user);
    }
    },


    { xtype: 'spacer' },


    // Here we add a reset button which will reset all fields within the form panel back to their original value
    {
    text: 'Reset',


    // Ensure the scope is 'this' so we have access to the global 'form' instance
    scope: this,
    handler: function() {
    // Call the form.reset method
    this.form.reset();
    }
    },


    // Finally we add a Save button which will mask the formpanel, and update the current record in the formpanel with
    // the latest values from the formpanel.
    {
    text: 'Save',
    ui: 'confirm',
    scope: this,
    handler: function() {
    var form = this.form;


    // Mask the form
    form.setMasked({
    xtype: 'loadmask',
    message: 'Saving...'
    });


    // Put it inside a timeout so it feels like it is going to a server.
    setTimeout(function() {
    if (form.user) {
    // Call the updateRecord method of formpanel with the user record instance. This will update the user record
    // with the latest values.
    form.updateRecord(form.user, true);
    }


    // Unmask the formpanel
    form.setMasked(false);
    }, 1000);
    }
    }
    ]
    }
    ];
    }
    });

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    ramannachekuri is on a distinguished road

      0  

    Default


    Hi Mitchellsimoens,
    Did you get a chance to look at this issue?

    Ramanna




  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Please give it more than 2 hours to reply. Also, will say again, please use BBCode CODE tags so I can read your code easily, it's not hard to do.

    Looking at your code in 2.1.0 the One and Two fields are properly laid out. Here is a screen shot:

    Screen Shot 2012-11-07 at 7.59.25 AM.png
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Location
    Sacramento, California
    Posts
    75
    Vote Rating
    9
    gypsie will become famous soon enough

      0  

    Default


    Original poster is absolutely right. Placing formpanel into panel or container and then setting layout to vbox or hbox on both creates all kinds of problems. Form is literally invisible with that setup. Only what seems to be working is setting outer panel to vbox/hbox and inner just flex to 1. But this only works in web browser. Once loaded on iPad only left fields are visible. Changing inner formpanel to just panel fixes this for iPad but the togglefield stops working and toggle moves only 1/5th. I am on 2.1 commercial.

Thread Participants: 2