Hybrid View

  1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    5
    Vote Rating
    0
    nilez is on a distinguished road

      0  

    Default Dynamic tpl for DataView

    Dynamic tpl for DataView


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

    Code:
    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.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.
    Code:
    dataView.deferEmptyText = true;
    dataView.store.removeAll();

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    5
    Vote Rating
    0
    nilez is on a distinguished road

      0  

    Default


    Thank Condor.

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

    Thank.

  4. #4
    Ext User
    Join Date
    Sep 2010
    Posts
    5
    Vote Rating
    0
    nilez is on a distinguished road

      0  

    Default


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


    Code:
    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

    Code:
        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
    Code:
               this.dataview.deferEmptyText = true;
               this.dataview.emptyText = '';
    If search button (trigger2) is clicked, I using
    Code:
            this.dataview.deferEmptyText = false;
            this.dataview.emptyText = 'No result to display';
    It work! What do you think of this code?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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).

Similar Threads

  1. More than one tpl and dataview?
    By shibbywowdude in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Apr 2010, 12:49 AM
  2. DataView dynamic content pictures
    By okwei in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 31 Mar 2009, 3:57 PM
  3. [FIXED][2.x] DataView tpl config option bug
    By slobo in forum Ext 2.x: Bugs
    Replies: 4
    Last Post: 5 Feb 2009, 8:00 PM
  4. Extend DataView and call a class method from tpl markup
    By analpaper in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 9 Mar 2008, 5:57 PM

Thread Participants: 1