Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Change template programatically

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Question Change template programatically

    Hi,

    with the example at http://dev.sencha.com/deploy/touch/docs/?class=Ext.List in mind:

    How can I change the itemTpl property at a later stage, e.g. when clicking a button, and then let the list reflect the changes? I'm almost there with:

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

    but this removes the tap event, among others, and I suspect this is not the way to do it correctly.

    Any feedback is much appreciated!

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

    Default Followup

    When working with a DataView I get exactly what I want with:

    view.tpl = new Ext.XTemplate('{firstName}');
    view.refresh();

    but List seems more problematic. I cannot do:

    list.itemTpl = new Ext.XTemplate('{firstName}');
    list.refresh();

    Ideas, anyone?

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

    Default

    Hi, try with doComponentLayout instead of refresh

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

    Default

    Already tried, with no luck :-(

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    Sorry, you have to do this:

    Code:
    yourList.itemTpl = 'some tpl';
    yourList.initComponent();
    yourList.refresh();

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default

    As you see in my original post I have already tried that, with the side effect that list items are no longer selectable. When clicking/tapping a list item it turns dark blue (link to code in my first post), but after applying the code this no longer happens. Only the light blue tap color is shown.

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    Is because you have an error somewhere, try to debug with Chrome with javascripot console

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default

    Nope, no errors except that "Viewport argument value "device-width;" for key "width" not recognized. Content ignored." message, but that's not relevant.

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    I'm using this in app and is working, no problem on itemTap, without the code it's hard to say...

  10. #10
    Sencha User
    Join Date
    Nov 2010
    Posts
    11

    Default

    Pretty basic:


    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
    });
    
    list.show();
            
            list.itemTpl = '{lastName}';
            list.initComponent();
            list.refresh();
            
            //console.log(list);
            
            
        }
    });

Page 1 of 2 12 LastLast

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
  •