Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: Change template programatically

  1. #11
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    This is working on Sencha Touch 1.1:

    Code:
    Ext.setup({
       
        onReady : function() {
    
    
    Ext.regModel('Contact', {
        fields: ['firstName', 'lastName']
    });
    
    var store = new Ext.data.JsonStore({
        model  : 'Contact',
        sorters: 'lastName',
    
        getGroupString : function(record) {
            return record.get('lastName')[0];
        },
    
        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'},
            {firstName: 'Jamie',   lastName: 'Avins'},
            {firstName: 'Aaron',   lastName: 'Conran'},
            {firstName: 'Dave',    lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jay',     lastName: 'Robinson'}
        ]
    });
    
    var list = new Ext.List({
        fullscreen: true,
        
        itemTpl : '{firstName} {lastName}',
        grouped : true,
        indexBar: true,
        
        store: store,
    
        simpleSelect: true,
    
        listeners: {
             itemtap: function(list, index){
                var rec = list.store.getAt(index)
                alert(rec.get('firstName') + ' ' + rec.get('lastName'));
    
             }
        }
    });
    
    list.show();
            
            list.itemTpl = '{lastName}';
            list.initComponent();
            list.refresh();
            
            //console.log(list);
            
            
        }
    });

  2. #12
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default

    Yes, but if you remove/comment out

    list.itemTpl = '{lastName}';
    list.initComponent();
    list.refresh();

    you will see that the tapped item gets a dark blue background color. This does not happen with the code present. So, something is not quite right.

  3. #13
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    By removing initComponent is working the refresh itself redraw tpl

  4. #14
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default

    Well, that works fine with the DataView component, but not with the List component. There you need list.initComponent() for changes to take affect.

    The reason that the dark blue background is not present after inserting

    list.itemTpl = '{lastName}';
    list.initComponent();
    list.refresh();

    is that in Ext.DataView the onItemDeselect event is triggered right after onItemSelect event (somewhere around line 22965 in sencha-touch-debug.js). Hence the x-item-selected CSS class is removed straight away. Could be a bug in Sencha?

  5. #15

    Default Any new news on this?

    Hi all, I've run into this exact problem, and I'm just wondering if anyone found a good workaround.

    I'm thinking I should create 2 different lists (one for each template) and hiding/showing the different lists instead of changing the template on just 1. Anybody have a better idea?

    Thanks,
    Mike

  6. #16
    Sencha User
    Join Date
    Sep 2011
    Posts
    1

    Default

    Hello.
    To have dark blue oreol around the list item you should select this item manually on itemtap event handler:
    Code:
    itemtap: function(view, ind, item, e){            
         this.getSelectionModel().select(ind,true);
    }
    I tried to use this.select(ind,true), but i had a warning from javascript

Page 2 of 2 FirstFirst 12

Similar Threads

  1. Replies: 6
    Last Post: 13 Jul 2011, 12:08 AM
  2. How to programatically change base-color of application.
    By ViralCipher in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 16 Apr 2011, 6:27 PM
  3. How can I change a panel collapsibility programatically
    By Keith Chadwick in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 2 Dec 2009, 5:34 AM
  4. DataView apply different template programatically
    By repata in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 18 Sep 2008, 12:42 AM

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
  •