Sencha Touch：基于按钮点击过滤嵌套JSON数据的dataview存储

Question

我有一个dataview列表，它从服务器获取数据，将其放入存储并呈现到模板中。标准的东西。

在UI中的数据视图列表上方是一个包含一些Ext.Buttons的按钮栏。我希望能够点击按钮并根据按钮的名称筛选列表。例如：点击'英语9A'按钮，在'英语9A'的'标题'列表中显示项目。

截至目前，当我点击按钮，列表消失，我得到一个控制台错误：“未捕获TypeError：无法读取未定义的属性'位置'和一个加载微调列表的位置。

我知道那里有类似的问题，但我尝试了所有的解决方案，但没有运气。

样品JSON数据：

{ 
    "ftype":"Announcement", 
    "value":{ 
     "created":"7/18/2013 05:40:06 PM", 
     "content":"Hello class, it is July 29th. This is quiz", 
     "announcementtypename":"HW", 
     "announcementtypeid":2, 
     "expiresdate":"2013-07-19", 
     "isowner":false, 
     "gradable":false, 
     "starred":false, 
     "id":172459, 
     "order":1, 
     "state":1, 
     "statetyped":1, 
     "qnacount":0, 
     "attachmentscount":0, 
     "ownerattachmentscount":0, 
     "title":"Spanish 9A", 
    } 
}, 
{ 
    "ftype":"Announcement", 
    "value":{ 
     "created":"7/18/2013 12:04:45 PM", 
     "content":"Hello class, it is July 18th. Here is an essay", 
     "announcementtypename":"HW", 
     "announcementtypeid":2, 
     "expiresdate":"2013-07-19", 
     "isowner":false, 
     "gradable":false, 
     "starred":false, 
     "id":172009, 
     "order":61, 
     "state":1, 
     "statetyped":1, 
     "qnacount":0, 
     "attachmentscount":0, 
     "ownerattachmentscount":0, 
     "title":"English 9A", 
    } 
} 

型号：

Ext.define('app.model.FeedModel', { 
    extend: 'Ext.data.Model', 
    config: { 
     sorters: 'title', 
     fields: [ 
      {name: 'content',    type: "string"}, 
      {name: 'created',    type: "string"}, 
      {name: 'announcementtypename', type: "string"}, 
      {name: 'announcementtypeid', type: "integer"}, 
      {name: 'attachmentscount',  type: "integer"}, 
      {name: 'applicationscount',  type: "integer"}, 
      {name: 'ftype',     type: "string"}, 
      {name: 'title',     type: "string"}, 
      {name: 'expiresdate',   type: "string"}, 
      {name: 'starred',    type: "boolean"} 
     ] 
    } 
}); 

商店：

Ext.define('app.store.FeedStore',{ 
    extend: 'Ext.data.Store', 
    config:{ 
     storeId:'FeedStore', 
     model:'app.model.FeedModel', 
     filterRoot: 'title',   // * --does nothing 
     filters: [   
      { 
       property: 'title'  // * --does nothing 
      } 
     ], 
    } 
}); 

控制器：（需要帮助）

//the button name matches the "title" node in the json 

filterFeedFunc: function(button){ 
    var name = button.config.name; 
    var sto = Ext.getStore('FeedStore'); 
    var all = "allname"; 
    if (name == all){ 
     sto.clearFilter();   // when they click "all" it should show all items - doesn't work 
    } 

    //sto.clearFilter();   // * --doesn't work 
    //sto.filter('title', name); // * --doesn't work 
    sto.filter({ 
     property: 'title',  // * --doesn't work, need something new here 
     value: name, 
     exactMatch: true 
    }); 
    sto.load(); // no 
}, 

UPDATE/EDIT

查看：

Ext.define('app.view.feed.Feed', { 
    extend: 'Ext.dataview.List', 
    xtype: 'Feed', 
    alias: 'widget.feedlist', 
    config: { 
     cls: 'feedlist', 
     store : 'FeedStore', 
     model: 'FeedModel', 
     title:'', 
     emptyText:'no items', 
     style: 'background-color:#ffffff', 
     itemTpl: new Ext.XTemplate(
      '<tpl for=".">'+ 
       '<div class="feed-item-box">'+ 
         '<tpl if="values.starred == true"> <img src="img/Important.png"> </tpl>'+ 
         '<tpl if="!values.starred"> <img src="img/not-starred.png"> </tpl>'+ 
         '<div class="anntype"><h1>{announcementtypename} </h1></div>' + 
         '<div class="classname"><h2>{title:ellipsis(30)} </h2></div>' + 
         '<div class="content"><h4>{content:ellipsis(50)} {summary}</h4></div>' + 
         '<tpl if="values.attachmentscount || values.applicationscount"><div class="attachment-clip"></div> </tpl>' +  
         '<div class="due"> ' + 
          '<h4>{[this.dueInfo(values.expiresdate)]} </h4>' + 
         '</div>' + 
       '</div>'+ 
      '</tpl>',{ 

       getUrl: function(){ 
        var store = Ext.getStore('UrlStore'); 
        var url = store.last(); 
        return url.data.url; 
       }, 

       dueInfo: function(date){ 
        var origDate = moment(date).format("MMMM Do"); 
        var today = moment().format("MMMM Do"); 
        if (today.match(origDate)){ 
         return "Today" 
        } else{ 
         return origDate 
        } 
       } 
     }), 

     listeners:{ 

      refresh: function(records) { 

       var me = this; 
       var classes = Ext.getStore('ClassListStore')._data.items;            
        me.setItems([{ 
         cls   : 'classbar', 
         docked  : 'top', 
         xtype  : 'dataview', 
         inline: { 
          wrap: false 
         }, 
         scrollable: { 
          direction: 'horizontal', 
          directionLock: true 
         }, 
         height  : 101, 
         html  : '<div class="select-all" style= "float: left"></div>', 
         itemTpl: ''.concat (
          '<tpl for=".">', 
           '<div class="select-{id}"></div>', 
          '</tpl>' 

         ), 
         store  : Ext.getStore('ClassListStore'), 
         model  : 'app.model.ClassListModel', 
         listeners:{ 

          refresh: function(){ 

           var bar = jQuery('.classbar'); 
           function getUserRole(){ 
            var store = Ext.getStore('UserStore'); 
            store.load(); 
            var userRole = store.last(); 
            return userRole.data.roledescription; 
           } 

           if (getUserRole() != app.UserRoles.ADMIN){ 

            for(var i = 0; i < classes.length; i++){ 
             var data = classes[i].data; 
             var render = Ext.DomQuery.select('.classbar .select-' + data.id)[0]; 
             var allbutren = Ext.DomQuery.select('.classbar .select-all')[0]; 
             var button = new Ext.Button({ 
              ui:   'chalk-light', 
              text:   data.name, 
              renderTo:  render, 
              name:   data.name, 
              clazzId:  data.id, 
              cls:   'class-button', 
              action:   'filterFeed', 
              html: '<img width="45" style="margin-top: -45px;" src="https://www.app.com/Course/GetIcon?courseInfoId=' + data.courseinfoid + '"/>' + 
               '<div class="classnamer">' + data.name + '</div>' 
             }); 

             var allbutton = new Ext.Button({ 
              ui:    'chalk-light', 
              text:   'All', 
              renderTo:  allbutren, 
              name:   'allname', 
              clazzId:  'someId', 
              cls:   'class-button x-button-pressing', 
              action:   'filterFeed', 
              html: '<img width="45" style="margin-top: -45px;" src="https://www.app.com/Content/images/common/course-icons/all.png"/>' + 
               '<div class="classnamer">All</div>' 
             }); 
            } 

           } else{ 
            bar.hide(); 
           } 
          } 
         } 
        } 
         , 
         { 
          cls   : 'feedbar', 
          itemId  : 'something', 
          docked  : 'top', 
          xtype  : 'panel', 
          items:[ 
           { 
            xtype: 'panel', 
            html:'Feed', 
            cls: 'feedTitle' 
           }, 
           { 
            xtype: 'button', 
            action: 'feedAll', 
            text: 'All', 
            cls: 'allBtn', 
            ui: 'chalk-light' 
            //see feedController.all() 
           }, 
           { 
            xtype: 'button', 
            action: 'starred', 
            cls: 'impBtn', 
            ui: 'chalk-light', 
            html: '<img src="img/not-starred.png"> &nbsp; Important' 
           } 
          ] 
         }] 
        ); 
      } 
     } 
    } 
}); 

Answer 1

你并不需要设置filterRoot和在商店filters属性，试试这个，让我知道发生了什么事。

filterFeedFunc: function(button){ 
    var name = button.config.name; 
    var sto = Ext.getStore('FeedStore'); 
    sto.load(function(records, operation, success) { 
     if(sto.getCount()){ 
     if (name == "allname") 
     sto.clearFilter();   
     else 
     sto.filter("title", name); 
    } 
    }); 
}