user1477388
user1477388

Reputation: 21430

Can't use Store with Template in ExtJS

I have the following model:

Ext.define('RateManagement.model.Service', {
    extend: 'Ext.data.Model',

    fields: [
        { name: 'name', type: 'string' }
    ]
});

And, I have the following Store:

Ext.define("RateManagement.store.ServiceStore", {
    extend: 'Ext.data.Store',
    model: 'RateManagement.model.Service',
    autoLoad: true,
    data: [
        {
            name: 'Test Service'
        }
    ]
});

I then create a template like this:

var tpl2 = new Ext.XTemplate(
    '<a href="#">{name}</a>'
).compile();

And, I finally try to use the Store and the Template in my Window like so:

var win = new Ext.Window({
    el:'hello-win',
    //layout:'fit',
    width:500,
    title: 'View All Services',
    height:300,
    closeAction:'hide',
    plain: true,

    items: [
        {
            xtype: 'textfield',
            enableKeyEvents: true,
            listeners: {
                keyup: function(c) {
                    console.log(c.getValue());                       
                }
            }
        },
        {
            xtype: 'panel',
            //title: 'test',
            preventHeader: true,
            height: 100,
            bodyPadding: 10,
            tpl: tpl2,
            store: RateManagement.store.ServiceStore
            //data: data
        }
    ],

    buttons: [{
        text:'Submit',
        disabled:true
    },{
        text: 'Close',
        handler: function(){
            win.hide();
        }
    }]
});

However, the "Test Service" link never appears in my window and there are no errors in the console.

What am I doing wrong?

Thanks.

Edit: Updated with the latest code.

items: [
    {
        xtype: 'textfield',
        enableKeyEvents: true,
        listeners: {
            keyup: function(c) {
                console.log(c.getValue());                       
            }
        }
    },
    {
        xtype: 'dataview',
        itemSelector: 'a.serviceLink',
        tpl: tpl2,
        store: RateManagement.store.ServiceStore
        //data: data
    }
],

Upvotes: 1

Views: 1337

Answers (1)

CD..
CD..

Reputation: 74096

The XTemplate works fine (example), but you are not passing any data to it in your panel.

The tpl is used in conjunction with the data configurations.

Edit:

You need to use an instance of a store.

Example: http://jsfiddle.net/k4ggq/

Upvotes: 2

Related Questions