1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default Ext.ux.touch.grid.FilterRow plugin

    Ext.ux.touch.grid.FilterRow plugin


    I have created a new plugin for a Ext.ux.touch.grid component.
    Now it's possible to display a filterrow to the top of the grid like this:
    filterrow.jpg

    when the user writes into the specific textfield after one second the store is filtered by this text.


    thanks to mitchelsimoens and estesbubba for the support
    Attached Files

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Nice!
    Mitchell Simoens will be happy about it
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default


    Now it's also possible set the config item nemed "filtersDisabled" to disable filtering actions and to have a personal filtering in "filter" event.
    In this way it's possible to filter not downloaded data with paging feature because I can reload data every filter event.


    PHP Code:
    {                        ftype    'Ext.ux.touch.grid.feature.FilterRow',           launchFn 'initialize',
        
    filtersDisabled:true
    }
    Ext.create('Ext.ux.touch.grid.View', {
                
    fullscreen true,
                
    store      myStore,
                
    features   : [
                            {                                        
    ftype    'Ext.ux.touch.grid.feature.HeaderMenu',                                launchFn 'initialize'                                },
                    {       
    ftype    'Ext.ux.touch.grid.feature.Paging',                            launchFn 'initialize'                        },
                    {       
    ftype    'Ext.ux.touch.grid.feature.Sorter',                            launchFn 'initialize'                                },
                    {                                        
    ftype    'Ext.ux.touch.grid.feature.FilterRow',                            launchFn 'initialize',
                        
    filtersDisabled:true
                            
    }
                        ],        
    columns   : [
                            {                                                
    header    'Code',                                    dataIndex 'code',                                    width     '40%'                                },                        {                                                header    'Description',                                    dataIndex 'descr',                                    width     '60%'                                },

                      ],
                
    listeners:{                                filter:function(filterComponent,grid,store,filtersArray){
                        var 
    where="";                                        var c=0;
                        for (; 
    filtersArray.lengthc++){
                            
    where=where+" AND [myTab].["+filtersArray[c].property+"] LIKE '"+filtersArray[c].value+"%'";
                        }                    
    store.getProxy().url=myProxyUrl where;
                        
    store.load();
                    }
                }
    }); 

    For mitchellsimoens: I hide "Goto Page" button in Paging feauture because it has problems. If you have a time to test why...
    Thanks in advance
    Attached Files

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Default Typo

    Typo


    Thanks for this addition. FYI, there is a typo on line 25 of your script. It reads "cope:this," and should probably read "scope:this,"

    Also, I have implemented your plugin in mitchellsimoens example, and I can't see the fields display using Chrome. The bar displays, and I can trace the HTML elements in the inspector, but the fields just don't display. See attached picture...

    screenGrab.jpg

    Any guess why this is not working?

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default


    I have had some problems using the plugin in MVC app and I have modified the feature in a new grid class that inherits from mitchellsimoens class.
    I attach my class and an example.
    I hope it's a good solution for you.
    Ext.gp.Grid.zip

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Default


    Tino, this is a good solution for me. Thank you very much. Unfortunately, I get an error in my console using Chrome:

    • [COLOR=red !important]Uncaught TypeError: Cannot call method 'call' of undefined[/COLOR]
      It references line 78 in your Ext.gp.Grid class which reads:

      Code:
      store.filter(filtersArray);
      Thus, although the filter fields are displaying correctly now, the filters do not actually function. Also, I have come across an anomaly with mitchellsimoens example, which still shines through using your class. After a row is selected in the grid, if you choose a column to sort on, additional rows become painted as if they were selected in the grid display. See attached picture:

      example.jpg
      Have you run into this before? Have you any suggestions for a workaround? Thanks again.

    • #7
      Sencha User
      Join Date
      Aug 2011
      Location
      Brescia - Italy
      Posts
      102
      Vote Rating
      4
      tino7_03 is on a distinguished road

        0  

      Default


      Have you cheked the vale of
      filtersArray?
      can you try to write console.log(
      filtersArray); before my row 78 for to give me a result?
      Thanks

    • #8
      Sencha User
      Join Date
      Feb 2011
      Posts
      74
      Vote Rating
      3
      shaneavery is on a distinguished road

        0  

      Default


      Tino, here is what is returned from filtersArray:

      Code:
      [Object
      
      
      • property: undefined
      • root: "data"
      • value: "dwila"
      • __proto__: Object
      , Object
      • property: undefined
      • root: "data"
      • value: "shane@averydc.com"
      • __proto__: Object
      , Object
      • property: undefined
      • root: "data"
      • value: "Your table is ready"
      • __proto__: Object
      , Object
      • property: undefined
      • root: "data"
      • value: "Try our steak and egg special - just $4.95!"
      • __proto__: Object
      , Object
      • property: undefined
      • root: "data"
      • value: Date
      • __proto__: Object
      , Object
      • property: undefined
      • root: "data"
      • value: 5
      • __proto__: Object
      , Object
      • property: "Name"
      • root: "data"
      • value: "a"
      • __proto__: Object
      ]
      I am using more than one store in my App. These fields (except for "Name") are from a different store than what I defined in the grid config.

      Thanks

    • #9
      Sencha User
      Join Date
      Aug 2011
      Location
      Brescia - Italy
      Posts
      102
      Vote Rating
      4
      tino7_03 is on a distinguished road

        0  

      Default


      'property' is always empty. This is the model field name. Now I haven't the code with me for a debug, but tomorrow I'll see it. Can you send me the code used from call my class? And if is it possible the Store model definition?

    • #10
      Sencha User
      Join Date
      Feb 2011
      Posts
      74
      Vote Rating
      3
      shaneavery is on a distinguished road

        0  

      Default


      I see you are busy stamping out fires with PR4 on another thread. I am updating my poject code as well, and have run into the same issues. I guess we will need to wait until Mitchell updates his Grid before we can proceed much further with PR4.

      At any rate, here is my code from the PR3 version that you requested...

      View class calling your class (focus on the "Test" item):

      Code:
      Ext.define('dwila.view.Viewport', {
          extend: 'Ext.tab.Panel',
      
          config: {
              fullscreen: true,
      
              tabBar: {
                  docked: 'bottom',
                  layout: {
                      pack: 'center'
                  }
              },
              
              defaults: {
                  scrollable: true
              },
      
              items: [
                  {
                      title: 'Customers',
                      iconCls: 'team',
                      xtype: 'grid',
      
                      features: [
                              {
                                  ftype    : 'Ext.ux.touch.grid.feature.HeaderMenu',
                                  launchFn : 'initialize'
                              },
                              {
                                  ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                                  launchFn : 'initialize'
                              }/*,
                              {
                                     ftype    : 'Ext.ux.touch.grid.feature.FilterRow',
                                     launchFn : 'initialize'
                                     //filtersDisabled : false
                              }*/
                      ]
                  },
                  {
                      title: 'Test',
                      iconCls: 'team',
                      xtype:'gridfr',
                      scope:this,
                      showFilterRow:true,
                      disableFilterRowActions:false,
                      store      : 'Guests',
                      features   : [
                          {
                              ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                              launchFn : 'initialize'
                          }
                      ],
                      items: [
                          {
                              xtype : 'toolbar',
                              docked: 'top',
                              //title: 'Customers',
                              items: [
                                  {
                                      //text: 'Add',
                                      ui: 'confirm',
                                      id: 'guestAdd',
                                      iconCls: 'add',
                                      iconMask: true
                                  },
                                  {
                                      //text: 'Delete',
                                      ui: 'decline',
                                      id: 'guestDelete',
                                      iconCls: 'trash',
                                      iconMask: true
                                  },
                                  {
                                      text: 'Show Hidden',
                                      ui: 'action',
                                      //badgeText: 'Hidden',
                                      //iconCls: 'search',
                                      //iconMask: true,
                                      id: 'showHidden'
                                  },
                                  {
                                      text: 'Show All',
                                      ui: 'action',
                                      //badgeText: 'All',
                                      //iconCls: 'search',
                                      //iconMask: true,
                                      id: 'showAll'
                                  },
                                  {xtype: 'spacer'},
                                  {
                                      text: 'Phone```',
                                      badgeText: '#',
                                      ui: 'action',
                                      //iconCls: 'add',
                                      //iconMask: true,
                                      //right: 1,
                                      //margin : '6 64 0 0',
                                      id: 'phoneAdd'
                                  },
                                  {
                                      text: 'Notify',
                                      ui: 'confirm',
                                      //iconCls: 'action',
                                      //iconMask: true,
                                      id: 'guestNotify'
                                  }
                              ]
                          }
                      ],
                      columns   : [
              /*            {
                              header    : 'ID',
                              dataIndex : 'id',
                              sortable  : false,
                              style     : 'text-align: right; padding-right: 1em;',
                              width     : '10%'
                          },
                          {
                              header    : 'Phone',
                              dataIndex : 'Phone',
                              style     : 'text-align: center;',
                              width     : '10%',
                              sortable  : false,
                              filter    : { type : 'string' }
                          },
                          {
                              header    : 'Carrier',
                              dataIndex : 'Carrier',
                              style     : 'text-align: center;',
                              sortable  : false,
                              filter    : { type : 'string' },
                              width     : '10%'
                          },
                          {
                              header    : 'Seated Time',
                              dataIndex : 'date_seated',
                              style     : 'text-align: center;',
                              width     : '20%',
                              filter    : { type : 'string' }
                          },
                          {
                              header    : 'Notified Time',
                              dataIndex : 'date_sent',
                              style     : 'text-align: center;',
                              width     : '20%',
                              filter    : { type : 'string' }
                          },*/
                          {
                              header    : 'Party',
                              dataIndex : 'Party',
                              style     : 'text-align: center;',
                              width     : '15%',
                              filter    : { type : 'int' }
                          },
                          {
                              header    : 'Name',
                              dataIndex : 'Name',
                              style     : 'padding-left: 4px;',
                              width     : '25%',
                              filter    : { type : 'string' }
                          },
                          {
                              header    : 'Time',
                              dataIndex : 'date_reserved',
                              style     : 'text-align: center;',
                              width     : '22%',
                              filter    : { type : 'date' },
                              renderer  : function(value, values) {
                                  var showtime = Ext.Date.format(value, 'h:ia');
                                  return '<span>' + showtime + '</span>';
                              }
                          },
                          {
                              header    : 'Notified',
                              dataIndex : 'Sent',
                              style     : 'text-align: center;',
                              width     : '19%',
                              filter    : { type : 'boolean' },
                              renderer  : function(value, values) {
                                  var color = (value === true) ? '009933' : 'FF0000',
                                      text = (value === true) ? 'Yes' : 'No';
                                  return '<span style="color: #' + color + ';">' + text + '</span>';
                              }
                          },
                          {
                              header    : 'Seated',
                              dataIndex : 'Seated',
                              style     : 'text-align: center;',
                              width     : '19%',
                              filter    : { type : 'boolean' },
                              renderer  : function(value, values) {
                                  var color = (value === true) ? '009933' : 'FF0000',
                                      text = (value === true) ? 'Yes' : 'No';
                                  return '<span style="color: #' + color + ';">' + text + '</span>';
                              }
                          }
                      ]
                  },
                  {
                      title: 'Settings',
                      iconCls: 'settings',
                      xtype: 'settings'
                  },
                  {
                      title: 'Help',
                      iconCls: 'info',
                      xtype: 'welcomescreen'
                  },
                  {
                      title: 'Exit Dwila',
                      iconCls: 'reply',
                      xtype: 'button',
                      id: 'exitApp'
                  }
              ]
          }
      });
      Store class defined in above view:
      Code:
      Ext.define('dwila.store.Guests', {
          extend: 'Ext.data.Store',
          model: 'dwila.model.Guest',
          autoSync: true,
          sorters: [
              {
                  property : 'date_reserved',
                  direction: 'DESC'
              }
          ],
          autoLoad: true
      });
      Model class defined in above store:
      Code:
      Ext.define('dwila.model.Guest', {
          extend: 'Ext.data.Model',
          fields: [
                  { name: 'id', type: 'string' },
                  { name: 'Party', type: 'int' },
                  { name: 'Name', type: 'string' },
                  { name: 'Phone', type: 'string' },
                  { name: 'Carrier', type: 'string' },
                  { name: 'Tags', type: 'string' },
                  { name: 'Sent', type: 'boolean', defaultValue: false },
                  { name: 'Seated', type: 'boolean', defaultValue: false },
                  { name: 'Hide', type: 'boolean', defaultValue: false },
                  { name: 'Table', type: 'int' },
                  { name: 'date_reserved', type: 'date', defaultValue: new Date(), dateFormat: 'c' },
                  { name: 'date_sent', type: 'date', dateFormat: 'c' },
                  { name: 'date_seated', type: 'date', dateFormat: 'c' }
          ],
          proxy: {
              type: 'localstorage',
              id: 'id',
              reader: {
                  type: 'json',
                  root: 'guests',
                  idProperty : 'id'
              },
              writer: {
                  root: 'guests',
                  type: 'json',
                  writeAllFields: true
              }
          },
          validations: [
              {type: 'format',   name: 'Party', matcher: /\d+/, message: 'must only include numeric characters'},
              {type: 'presence', name: 'Name', message: 'field is required'},
              {type: 'length',   name: 'Phone', min: 10, max: 10, message: 'numbers must be exactly 10 digits'},
              {type: 'format',   name: 'Phone', matcher: /\d+/, message: 'must only include numeric characters'},
              {type: 'format',   name: 'Table', matcher: /\d+/, message: 'must only include numeric characters'}
          ]
      });

    film izle

    hd film izle

    film sitesi

    takipci kazanma sitesi

    takipci kazanma sitesi

    güzel olan herşey

    takipci alma sitesi

    komik eğlenceli videolar