javascript - Sencha Touch store filterBy function -


hi trying work store filterby function unable make work want. have 4 buttons(a b c d) , list data related buttons when click on button should filter accordingly note:- when click ,i should records of when click b , should records of b appended a's list of records when click on buttons should have array of button ids , filter the list using these id's.

  filterlist:function (list, index, target, record){     var categories=[];     categories.push(record.get('id'));                                 for(c=0;c<categories.length;c++)                                 {                                 ext.getstore('mystore').filterby(function(record){                                   var id = record.get('id');                                        if(id==categories[c])                                         {                                                    return true;                                          }                                  });                                 }      }

any appreciated.

what wrong code

the filterby return function should always return boolean value. returning true, , no false. besides filtering store in loop, , parameter record exists twice (as parameter in function filterlist and in return function of filterby).

example

i created fiddle show came with. know extjs instead of sencha touch, idea. step through maincontroller, logic is.

i didn't clean code there duplication, it's concept.

setting logic

first create set of buttons on view. see i'm setting action property.

... tbar: [{     text: 'filter a',     action: 'a' }, {     text: 'filter b',     action: 'b' }], ...

then bind onclick event button. in event use action property searchvalue, of course.

... onclick: function(button, event, eopts) {     var me = this,         grid = me.getmaingrid(),         store = grid.getstore(),         filters = store.getfilters(),         searchvalue = button.action,         regex = regexp(searchvalue, 'i'),         filter = new ext.util.filter({             id: button.id,             filterfn: function(record) {                 var match = false;                 ext.object.each(record.data, function(property, value) {                     match = match || regex.test(string(value));                 });                 return match;             }         });      if (filters.containskey(button.id)) {         store.removefilter(filter);     } else {         store.addfilter(filter);     } }, ...

the magic

the magic in filter instance. adding new filter instances each time filter, can filter several filters. if push button a , button b respect each other. in filter use regex search through data of current model. config id recognize filter can remove afterwards.

filter = new ext.util.filter({     id: button.id,     filterfn: function(record) {         var match = false;         ext.object.each(record.data, function(property, value) {             match = match || regex.test(string(value));         });         return match;     } });

if filter doesn't exists added, otherwise removed.

if (filters.containskey(button.id)) {     store.removefilter(filter); } else {     store.addfilter(filter); }

reset filters

i created textfield search through data. instead of adding , removing filters call clearfilter , add new filter new searchvalue.

onkeyup: function(textfield, event, eopts) {     this.filterstore(textfield.getvalue()); },  filterstore: function(searchvalue) {     var me = this,         grid = me.getmaingrid(),         store = grid.getstore(),         regex = regexp(searchvalue, 'i');      store.clearfilter(true);      store.filter(new ext.util.filter({         filterfn: function(record) {             var match = false;             ext.object.each(record.data, function(property, value) {                 match = match || regex.test(string(value));             });             return match;         }     })); }

the complete maincontroller

ext.define('filtering.controller.maincontroller', {     extend: 'ext.app.controller',      config: {         refs: {             maingrid: 'maingrid'         }     },      init: function() {         var me = this;          me.listen({             global: {},             controller: {},             component: {                 'segmentedbutton': {                     toggle: 'ontoggle'                 },                 'toolbar > button': {                     click: 'onclick'                 },                 'textfield': {                     keyup: 'onkeyup'                 }             },             store: {                 '*': {                     metachange: 'onmetachange',                     filterchange: 'onfilterchange'                 }             },             direct: {}         });     },      onlaunch: function() {         var store = ext.storemanager.lookup('users') || ext.getstore('users');          store.load();     },      onmetachange: function(store, metadata) {         var grid = this.getmaingrid(),             model = store.getmodel(),             // metadata             fields = metadata.fields,             columns = metadata.columns,             gridtitle = metadata.gridtitle;          model.fields = fields;         grid.settitle(gridtitle);         grid.reconfigure(store, columns);     },      onfilterchange: function(store, filters, eopts) {         var me = this,             grid = me.getmaingrid();          grid.getselectionmodel().select(0);     },      /**      * used segmented buttons      */     ontoggle: function(container, button, pressed) {         var me = this,             grid = me.getmaingrid(),             store = grid.getstore(),             //filters = store.getfilters(),             searchvalue = button.action,             regex = regexp(searchvalue, 'i'),             filter = new ext.util.filter({                 id: button.id,                 filterfn: function(record) {                     var match = false;                     ext.object.each(record.data, function(property, value) {                         match = match || regex.test(string(value));                     });                     return match;                 }             });          if (pressed) {             store.addfilter(filter);         } else {             store.removefilter(filter);         }     },      /**      * used toolbar buttons      */     onclick: function(button, event, eopts) {         var me = this,             grid = me.getmaingrid(),             store = grid.getstore(),             filters = store.getfilters(),             searchvalue = button.action,             regex = regexp(searchvalue, 'i'),             filter = new ext.util.filter({                 id: button.id,                 filterfn: function(record) {                     var match = false;                     ext.object.each(record.data, function(property, value) {                         match = match || regex.test(string(value));                     });                     return match;                 }             });          if (filters.containskey(button.id)) {             store.removefilter(filter);         } else {             store.addfilter(filter);         }     },      /**      * used textfield      */     onkeyup: function(textfield, event, eopts) {         this.filterstore(textfield.getvalue());     },      filterstore: function(searchvalue) {         var me = this,             grid = me.getmaingrid(),             store = grid.getstore(),             regex = regexp(searchvalue, 'i');          store.clearfilter(true);          store.filter(new ext.util.filter({             filterfn: function(record) {                 var match = false;                 ext.object.each(record.data, function(property, value) {                     match = match || regex.test(string(value));                 });                 return match;             }         }));     } });

the complete view

ext.define('filtering.view.maingrid', {     extend: 'ext.grid.panel',     xtype: 'maingrid',      tbar: [{         xtype: 'segmentedbutton',         allowmultiple: true,         items: [{             text: 'filter a',             action: 'a'         }, {             text: 'filter b',             action: 'b'         }]     }, {         text: 'filter a',         action: 'a'     }, {         text: 'filter b',         action: 'b'     }, {         xtype: 'textfield',         emptytext: 'search',         enablekeyevents: true     }],     //title: 'users', // title set through metadata     //store: 'users', // reconfigure store in metachange event of store     columns: [] // columns set through metadata of store (but must set empty array avoid problems) });

Comments

Post a Comment

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

consider code: test = function() { } t = new test(); (var = 0; < 8; i++) { result = t instanceof test; } if change number of iterations 8 9 , loop take 100 times longer complete in latest version of firefox (41.0.1). tested on 2 different pcs , magic limit 8. here jsperf test used: http://jsperf.com/instanceof-8-times-vs-9-times does have idea why might happen? seems specific instanceof . not happen if else object, example check property. note: filed bugzilla bug this. jan de mooij mozilla team has posted details in bugzilla thread . here's simplistic interpretation of highly technical answers: in i < 8 case, firefox smart enough hoist result = t instanceof test; statement out of loop (according tests, doesn't seem omit altogether). in i < 9 case, apparently doesn't optimization . why? reason not clear, related fact 9 iterations threshold above function considered "hot" enough run through jit compiler. i < 8 cas...
Read more

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -

following this guide setup app on digital ocean droplet, not working. site not loading , it's throwing: "gateway time-out". the puma server works, since ps aux | grep puma prints: root 15878 0.0 0.4 376832 2168 ? sl 12:50 0:00 puma 2.13.4 (unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock) [20150930164940] root 15881 0.0 0.7 903676 3692 ? sl 12:50 0:06 puma: cluster worker 0: 15878 [20150930164940] root 24654 0.0 0.1 11748 916 pts/2 s+ 18:00 0:00 grep --color=auto puma my nginx config: user root; worker_processes 1; events { worker_connections 1024; } http { upstream puma { server unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock; } server { listen 80; server_name myapp.com; root /var/www/myapp/current/public; access_log /var/www/myapp/current/log/access.log; error_log /...
Read more