1. #1
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
    profunctional is on a distinguished road

      0  

    Default Is it possible to use a NestedList in a formPanel?

    Is it possible to use a NestedList in a formPanel?


    I just tried to add a nestedList into a formPanel with no success.

    My goal is to allow the user to select from the list, much like the native iPhone apps, instead of using a drop-down list. Is this type of nesting possible?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,017
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Yup:

    Code:
    Ext.setup({
        icon: 'icon.png',
        glossOnIcon: false,
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        onReady: function(){
            
            var nestedList = new Ext.NestedList({
                width: 200,
                height: 200,      
                items: [{
                    text: 'Option A',
                    items: [{
                        text: 'Option A.1',
                        customAttribute: 123,
                        items: [{
                            text: 'Option A.1.a'
                        },{
                            text: 'Option A.1.b'
                        }]
                    },{
                        text: 'Option A.2',
                        customAttribute: 389
                    }]
                },{
                    text: 'Option B',
                    items: [{
                        text: 'Option B.1',
                        customAttribute: 233
                    },{
                        text: 'Option B.2',
                        customAttribute: 2390
                    }]
                },{
                    text: 'Option C',
                    items: [{
                        text: 'Option C.1',
                        customAttribute: 903
                    },{
                        text: 'Option C.2',
                        customAttribute: 77
                    }]
                }]        
            });
        
            var foo = new Ext.form.FormPanel({
                items: {
                    xtype: 'fieldset',
                    title: 'Favorite color',
                    items: nestedList
                }
            });
            
            new Ext.TabPanel({
                fullscreen: true,
                type: 'dark',
                sortable: true,
                items: [{
                    xtype: 'container',
                    title: 'Tab 1',
                    layout: 'fit',
                    items: foo
                }, {
                    title: 'Tab 2',
                    html: '2',
                    cls: 'card2'
                }, {
                    title: 'Tab 3',
                    html: '3',
                    cls: 'card3'
                }]
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
    profunctional is on a distinguished road

      0  

    Default


    Thanks for all the quick responses Evan. Using your code, the list rendered a thin line. I have attached a screenshot. Is something missing?
    Attached Images

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,017
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Not if you copied it exactly... chances are you're missing dimensions somewhere.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
    profunctional is on a distinguished road

      0  

    Default


    Thanks Evan, worked my way backwards using your code and it works just fine. Is it possible to hide the Toolbar?

    Thanks again.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,017
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Not without modifying the class, but if you have a look it's pretty trivial.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. how to get nestedlist selected value?
    By wakatanka in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 8 Sep 2010, 11:49 AM
  2. add new items to nestedlist
    By Alexander.K in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 7 Sep 2010, 6:17 PM
  3. Nestedlist scroll down to position
    By Simonhayre in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 1 Jul 2010, 3:42 AM
  4. Is it possible to use different components as parts of a NestedList?
    By irene in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 24 Jun 2010, 11:03 AM

Thread Participants: 1