1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    52
    Vote Rating
    0
    chris24300 is on a distinguished road

      0  

    Question How to generate a form in columns?

    How to generate a form in columns?


    Hi all,

    I have a library I want to display in two columns to make it more user friendly. It's a general list of event scenarios (which is basically anything), e.g. vehicle issues, house issues, etc and these have associated info on what you may encounter. This page in particular is a settings interface where the user can select what info they want displayed on their home screen. The events are split up into fieldsets with x amount of checkboxes.

    Each fieldset has a checkbox group with the selections but what happened is every checkbox option is in the first fieldset and they are all in 1 column...

    Code:
    var leftFields = [{
        xtype: 'fieldset',
        title: 'Home',
        items: [{
            xtype: 'checkboxgroup',
            id: 'homeCbGroup',
            columns: 1,
            items: [
                {id: 'cb1', name: 'cb1', boxLabel: 'Carpentry'},
                {id: 'cb2', name: 'cb2', boxLabel: 'Plumbing'},
                {id: 'cb3', name: 'cb3', boxLabel: 'Electrical'},
                 ...
           ] // items
        }] // fieldset items
    },{
        xtype: 'fieldset',
        title: 'Automotive',
        items: [{
            xtype: 'checkboxgroup',
            id: 'autoCbGroup',
            columns: 1,
            items: [
                {id: 'cb1', name: 'cb1', boxLabel: 'Engine'},
                {id: 'cb2', name: 'cb2', boxLabel: 'Body'},
                {id: 'cb3', name: 'cb3', boxLabel: 'Maintenance'},
                 ...
           ] // items
        }] // fieldset items
    },...]; // left fields
    // same idea for rightFields
    
    var add = [{
                xtype: 'fieldset',
                title: 'Event Scenarios',
                layout: 'form',
                items: [{
                    id: 'scenariosLeftColumn',
                    layout: 'form',
                    border: false,
                    columnWidth: 0.6,
                    items: leftFields
                },{
                    id: 'scenariosRightColumn',
                    layout: 'form',
                    border: false,
                    labelWidth: 65,
                    columnWidth: 0.4,
                    items: rightFields
                }] // items
            }]; // add
    
    this.myPanel.add(add);
    this.myPanel.doLayout();
    Thanks for any advice!

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    52
    Vote Rating
    0
    chris24300 is on a distinguished road

      0  

    Default


    There's no layout expert here?

    I want to do what's done here in the calendar example, in editing and event
    http://dev.sencha.com/deploy/ext-3.3...dar/index.html

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Location
    Denver, Co
    Posts
    9
    Vote Rating
    1
    willjohnathan is on a distinguished road

      0  

    Default


    not sure i am following what you want. Is it something that is demonstrated in this example:
    http://dev.sencha.com/deploy/ext-3.3...eck-radio.html

Thread Participants: 1

Tags for this Thread