Threaded View
-
6 Nov 2012 12:52 PM #1
Change Template in List? (v2.1)
Change Template in List? (v2.1)
I'm trying to extend the new List component in Sencha Touch 2.1 (I'm using RC2) and I can't seem to change the item template dynamically. I'd like to be able to change item templates by pressing a button, but it won't work. It used to work in version 2.0.1. Is there anything I'm missing?
Calling setItemTpl() works in the initialize method, but not in edit() or editCompleted() methods.
Here is the test code I have using.
Code:Ext.application({ name: 'SenchaTest', launch: function () { var app = this; Ext.define('TestModel', { extend: 'Ext.data.Model', config: { fields: [ {name: 'field1'}, {name: 'field2'}, {name: 'field3'}, ] } }); Ext.define('Stx.dataview.MyList', { extend: 'Ext.dataview.List', config: { normalTpl: null, editTpl: null, editing: false, scrollToTopOnRefresh: false, }, initialize: function () { this.callParent(); this.setItemTpl(this.getNormalTpl()); }, edit: function () { if (!this.getEditing()) { this.setEditing(true); this.setItemTpl(this.getEditTpl()); } }, editCompleted: function () { if (this.getEditing()) { this.setEditing(false); this.setItemTpl(this.getNormalTpl()); } }, }); this.store = Ext.create("Ext.data.Store", { model: 'TestModel', data: [ {field1: "data1Field1", field2: "data1Field2", field3: "data1Field3"}, {field1: "data2Field1", field2: "data2Field2", field3: "data2Field3"}, {field1: "data3Field1", field2: "data3Field2", field3: "data3Field3"}, {field1: "data4Field1", field2: "data4Field2", field3: "data4Field3"}, {field1: "data5Field1", field2: "data5Field2", field3: "data5Field3"}, {field1: "data6Field1", field2: "data6Field2", field3: "data6Field3"}, {field1: "data7Field1", field2: "data7Field2", field3: "data7Field3"}, {field1: "data8Field1", field2: "data8Field2", field3: "data8Field3"}, {field1: "data9Field1", field2: "data9Field2", field3: "data9Field3"}, {field1: "data10Field1", field2: "data10Field2", field3: "data10Field3"}, {field1: "data11Field1", field2: "data11Field2", field3: "data11Field3"}, {field1: "data12Field1", field2: "data12Field2", field3: "data12Field3"}, {field1: "data13Field1", field2: "data13Field2", field3: "data13Field3"}, {field1: "data14Field1", field2: "data14Field2", field3: "data14Field3"}, {field1: "data15Field1", field2: "data15Field2", field3: "data15Field3"}, ] }); this.button = Ext.create("Ext.Button", { text: "Edit List", listeners: { tap: function () { if(!app.list.getEditing()) { app.list.edit(); } else { app.list.editCompleted(); } } } }); this.normalTpl = Ext.create("Ext.XTemplate", '{field1}<br/>', '{field2}<br/>', '{field3}', {}); this.editTpl = Ext.create("Ext.XTemplate", '{field1}', {}); this.list = Ext.create("Stx.dataview.MyList", { store: this.store, normalTpl: this.normalTpl, editTpl: this.editTpl, cls: "mylist", flex: 1, }); this.panel = Ext.create('Ext.Panel', { layout: {type: 'vbox'}, padding: 10, style: "background-color: #555555;", items: [ this.button, {style: "height: 10px;"}, this.list, ], }); Ext.Viewport.add(this.panel); } });
Success! Looks like we've fixed this one. According to our records the fix was applied for
TOUCH-3677
in
Sprint 28.


Reply With Quote