Results 1 to 6 of 6

Thread: How to add panel as list item

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
      0  

    Default How to add panel as list item

    I am trying to dynamically add list(with its items) to my container. Instead of simple HTML template, I need list items to contain panel with a title bar, image & few more things.To do this I am loading store data and within its callback creating List & array of items. Then I add items to the list and list to the container but end result is just last panel visible instead of sliding list of all panels.Here is my code:

    Code:
    var vLists = [];
        this.load({
            callback: function(records, operation, success) {
                var hccontainer = Ext.getCmp('hccontainer');
                this.each(function(record){
                    var sid = 'styleStore'+record.get('id');
                    var styleTemplate = eval('tpls.styleTemplate_' + record.get('id'));
                    vLists.push({
                        xtype: 'panel',
                        scrollable: 'false',
                        layout: 'fit',
                        cid : record.get('id'),
                        ctype : record.get('type'),
                        cname : record.get('name'),
                        stid : sid,
                        tp : styleTemplate,
                        items: [
                            {
                                xtype : 'titlebar',
                                title : record.get('name'),
                                docked : 'top',
                                cls : 'x-toolbar-transparent-top'
                            },
                            {
                                xtype : 'image',
                                src : record.get('image'),
                            }
                        ]
                    });
                });
                //hccontainer.remove(Ext.getCmp('hc'), true);
                Ext.getCmp('hc').destroy();
                var hc1 = Ext.create('Ext.dataview.List', {
                    layout : 'fit',
                    config: {
                        direction: 'horizontal',
                        id : 'hc'
                    }
                });
                hc1.setItems(vLists);
                Ext.getCmp('hccontainer').add(hc1);
            },
            scope: this
        });
    Is this right way to add items or I am missing something.
    PS Instead of List if I use Carousel, this works fine

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    In Sencha Touch 2.1 you can use components just like DataView using the ListItem.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Can you please elaborate? DO you mean I can add dataview in a list item?

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You can use any component within a List
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Then it should have worked for me because I am adding Panel as list item and I am using 2.1

  6. #6
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Depends how you are doing it and how you want it to look.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

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