我如何填充形式为json对象的sencha xtemplates,(MVC方法)

时间:2012-11-22 21:01:04

标签: json sencha-touch

我是sencha的新手,我正在尝试填充一些模板,如下所示:

型号:

Ext.define("GS.model.Oferta", {
        extend : 'Ext.data.Model',
        config : {
            fields : [{
                        name : "type",
                        type : "string"
                    }, {
                        name : "logo",
                        type : "string"
                    }, {
                        name : "description",
                        type : "string"
                    }, {
                        name : "product",
                        type : "string"
                    }]
        }
    });

商店:

Ext.define("GS.store.BoxStore", {
        extend : 'Ext.data.Store',

    config: {
        storeId: 'boxStore',
        model : 'GS.model.Oferta',
        proxy : {
            type : 'ajax',
            url : 'TestData.json',
                reader: {
                    type:'json',
                    rootProperty: 'dataArr'
                }
        },
        autoLoad : true
    }
    });

Xtemplate:

Ext.define("GS.view.Box", {
        extend : 'Ext.Panel',
        requires : ['Ext.form.FieldSet'],
        layout : {
            type : 'absolute'
        },

        config : {
            tpl : Ext.XTemplate.from('tp1'),
            data:{}
        }

    });

控制器:

Ext.define('GS.controller.Main', {
 extend: 'Ext.app.Controller',
store: 'boxStore',

config : {
    stores: ['BoxStore'],
    models: ['Oferta'],

    refs : {????
    ????????    },
    control : {
??????????
        }
    }
},

    getData: function(list, index, element, record){
    this.getBox().push({
        xtype: 'panel',
        data :[record.get('type'), record.get('logo'), record.get('logo'),     record.get('product')],
        scrollable: true,
        styleHtmlContent: true
    });
},
//called when the Application is launched, remove if not needed
launch: function(app) {

}
});

HTML:

            <textarea id='tp1' class="tp1">
           <div class="product_small">
             <div class="type" id"type">

             </div>
             <div class="logo"><img src="resources/images/garbarino_logo.png" />
             </div>
             <div class="small_description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </div>
             <div class="product">
                 <span style="color:rgb(0,193,209); font:bold 35px/40px Tahoma,Verdana;">1.700</span><span style="color:rgb(0,193,209); font:bold 13px/20px Tahoma,Verdana;"> puntos</span>
             </div>
            </div>
        </textarea>

如何设置填充模板?我是否应该尝试在控制器中创建一个框并将其设置在那里?

非常感谢你 伊格纳西奥

1 个答案:

答案 0 :(得分:1)

如果要直接使用方法setData更新tpl的数据,否则您可能想尝试使用Ext.DataView而不是Ext.Panel并直接将dataview链接到商店。很难说出究竟需要什么 - 您的示例代码显示您将新面板推送到getBox(可能是具有模板的组件),但您尝试在新面板上设置数据,该面板没有模板。 / p>