Dynamic tpl for DataView

[nilez]

I have created search panel like following example (like forum-search example)

Ext.onReady(function(){
    var ds = new Ext.data.Store({
        url: 'search.php',
        reader: new Ext.data.JsonReader({
           root: 'topics',
           totalProperty: 'totalCount',
           id: 'post_id'
        }, 
        [
         {name: 'postId', mapping: 'post_id'},
        {name: 'title', mapping: 'topic_title'},
         {name: 'topicId', mapping: 'topic_id'},
        {name: 'author', mapping: 'author'},
         {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
         {name: 'excerpt', mapping: 'post_text'}
     ]

        )
       , autoLoad: false
    });

    var resultTpl = new Ext.XTemplate(
        '<tpl for=".">',
        '<div class="search-item">',
            '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>',
            '<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',
            '<p>{excerpt}</p>',
        '</div></tpl>'
    );

        var panel = new Ext.Panel({
        applyTo: 'search',
        title:'Forum Search',
        height:300,
        autoScroll:true,

        items: new Ext.DataView({
            tpl: resultTpl,
            store: ds,
            loadingText : 'Searching...',
            itemSelector: 'div.search-item'
        }),

        tbar: [
            'Search: ', ' ',
            new Ext.ux.form.SearchField({
                store: ds,
                width:320
            })

    });

});

Search consists of tbar (from SearchField.js) and Data view. See following attached image

greenshot_2010-10-05_17-51-02.png.

The json data can be {\"totalCount\":5,\"topics\":[....]} or {\"totalCount\":0,\"topics\":[]}

If totalCount is 0, "No result to display" should be shown, otherwise data should be shown.

Can I implement dynamic Ext.XTemplate for this data view.

Besides, when I click x button in tbar, all data in dataview should be removed and "No result to display" should not be shown (No data is shown in data view). So, I don't assign any value in emptyText of data view.

Anyone have any idea?


Thank in advance.

[Condor]

Yes, you could do this with the tpl, but this really is a job for emptyText.

If you don't want the emptyText to be shown, then set deferEmptyText to true first, e.g.

dataView.deferEmptyText = true;
dataView.store.removeAll();

[nilez]

Thank Condor.

And how can i implement dynamic tpl for dataview. Can you show any example?

Thank.

[nilez]

Ok, now I have implemented search panel by changing SearchField.js like this

Ext.ns('Ext.ux.form');

Ext.ux.form.SearchField = function(config, dataView) {
   
   // call parent constructor
   this.dataview = dataView;
   Ext.ux.form.SearchField.superclass.constructor.call(this, config);

};

Ext.extend(Ext.ux.form.SearchField, Ext.form.TwinTriggerField, {
    initComponent : function(){
        if (!this.store.baseParams)
        {
           this.store.baseParams = {};
        }
        Ext.ux.form.SearchField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:false,
    width:180,
    hasSearch : false,
    paramName : 'query',

    onTrigger1Click : function(){
        if(this.hasSearch){
           this.setRawValue('');
           this.store.baseParams[this.paramName] = '';
           this.el.dom.value = '';
           this.hasSearch = false;
           this.dataview.deferEmptyText = true;
           this.dataview.emptyText = '';
           this.store.removeAll();
           this.focus();
        }
        else
        {
           this.setRawValue('');
           this.el.dom.value = '';
           this.dataview.deferEmptyText = true;
           this.dataview.emptyText = '';
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
        var o = {start: 0};
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramName] = v;
        this.store.reload({params:o});
        this.hasSearch = true;  
        this.dataview.deferEmptyText = false;
        this.dataview.emptyText = 'No result to display';
    }
});

dataView and store is sent from another js that create search panel

    var dataView = new Ext.DataView({
       tpl: resultTpl,
       id : 'search-data-view',
       store: ds,
       loadingText : 'Searching...',
       itemSelector: 'div.search-item'
    });
    
    var panel = new Ext.Panel({
        applyTo: 'search-panel',
        title:'Forum Search',
        height:300,
        autoScroll:true,

        items: dataView,

        tbar: [
            'Search: ', ' ',
            new Ext.ux.form.SearchField({
                store: ds,
                width:320
            }, dataView)
        ]
      });

Please see on onTrigger1Click and onTrigger2Click function in SearchField.js.

If x button (trigger1) is clicked, I using

           this.dataview.deferEmptyText = true;
           this.dataview.emptyText = '';

If search button (trigger2) is clicked, I using

        this.dataview.deferEmptyText = false;
        this.dataview.emptyText = 'No result to display';

It work! What do you think of this code?

[Condor]

No you are using deferEmptyText you should just be able to leave the emptyText set to 'No result to display' (no need to clear it).