Question

I am using extjs 4 with rails 3. I have a form containing a combobox and a dataview. On selection of any item of combobox, an image should be displayed in the dataview from the database. I tried using tpl for static image which works fine. But how to retrive the same dynamically??

Code of dataview and template ::

    {
                xtype: 'dataview',
                store: 'MyStore',
                 id:'viewer',
                 autoHeight:true,
                 tpl: imageTpl,
                 itemSelector: 'div.thumb-wrap',
                 fieldLabel: 'Choose State',
                 emptyText: 'No images available'
            },

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="thumb-wrap">',
          '<img src="/images/rails.png" align="right" />',
        '</div>',
    '</tpl>'
);

Any suggestions??

Thanks!

Answer 1

(First: the ‘MyStore’ is probably not a string but a reference to a real ExtJS data store. You probably do not need the quotes)

The data store contains a list of items of some model. You can read the fields of that model in your template, by putting the field name between accolades { }.

Assuming a model with an ‘url’ field, the template becomes this:

var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
    '<div style="thumb-wrap">',
      '<img src="/images/{url}" align="right" />',
    '</div>',
'</tpl>'
);

Try this tutorial for more information: http://www.sencha.com/learn/legacy/Tutorial:Getting_Started_with_Templates