Results 1 to 6 of 6

Thread: Is it possible to use a NestedList in a formPanel?

  1. #1
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
      0  

    Default 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 User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,984
    Vote Rating
    933
      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'
                }]
            });
        }
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
      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 Attached Images

  4. #4
    Sencha User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,984
    Vote Rating
    933
      0  

    Default

    Not if you copied it exactly... chances are you're missing dimensions somewhere.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
      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 User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,984
    Vote Rating
    933
      0  

    Default

    Not without modifying the class, but if you have a look it's pretty trivial.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •