Results 1 to 3 of 3

Thread: Missing Dataview Empty Text

  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    138
    Answers
    1

    Default Answered: Missing Dataview Empty Text

    I have a dataview that gets filtered through the TPL to only show a subset of store records. The problem is that when the filter returns no records, the emptyText remains hidden. This makes sense since the store does indeed have records. Is there a way to show the empty text when the dataview shows no records even if the store contains records?

    You can check out this Fiddle for an example. The dataview that initially loads has no visible records...and no visible emptyText.


  2. The correct approach is to apply the filtering to the store, not to the dataview's itemTpl.

    Update your store definition:
    Code:
    Ext.define('testEnvironment2.store.tests', {
        extend: 'Ext.data.Store',
    
    
        requires: [
            'testEnvironment2.model.Test'
        ],
    
    
        config: {
            autoLoad: true,
            filters: [{
                property: 'isSubmitted',
                value: false
            }],
            //...
    Update your main view:
    Code:
    itemTpl: [
      //'<tpl if="isSubmitted == 0">',
      '    <div class="testInfo">',
      '        <div class="testType">{testType}</div>',
      '        <div class="{[values.isLocked == 1 ? "locked icon-lock" : ""]}"></div>',
      '        <div class="testDetails">',
      '            <h3>{testName:ellipsis(30, true)}</h3>',
      '            <span>{courseName}</span>',
      '            <span>Number of questions: {[values.questions.length]}</span>',
      '        </div>',
      '    </div>',
      //'</tpl>'
    ],
    Regards,
    Brian


  3. #2
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    The correct approach is to apply the filtering to the store, not to the dataview's itemTpl.

    Update your store definition:
    Code:
    Ext.define('testEnvironment2.store.tests', {
        extend: 'Ext.data.Store',
    
    
        requires: [
            'testEnvironment2.model.Test'
        ],
    
    
        config: {
            autoLoad: true,
            filters: [{
                property: 'isSubmitted',
                value: false
            }],
            //...
    Update your main view:
    Code:
    itemTpl: [
      //'<tpl if="isSubmitted == 0">',
      '    <div class="testInfo">',
      '        <div class="testType">{testType}</div>',
      '        <div class="{[values.isLocked == 1 ? "locked icon-lock" : ""]}"></div>',
      '        <div class="testDetails">',
      '            <h3>{testName:ellipsis(30, true)}</h3>',
      '            <span>{courseName}</span>',
      '            <span>Number of questions: {[values.questions.length]}</span>',
      '        </div>',
      '    </div>',
      //'</tpl>'
    ],
    Regards,
    Brian


  4. #3
    Sencha User
    Join Date
    Apr 2007
    Posts
    138
    Answers
    1

    Default

    Quote Originally Posted by lumberjack View Post
    The correct approach is to apply the filtering to the store, not to the dataview's itemTpl.
    Brian, thanks for the response; it pointed me in the right direction. Since I want to reuse the store in other components, I needed to filter the store dynamically. I created the following controller function to filter the store when the dataview initializes:

    Code:
    onAvailableTestsInitialize: function(component, eOpts) {
        var store = Ext.getStore('tests');
        store.clearFilter();
        store.filter('isSubmitted', false);
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •