1. #1
    Sencha User Surinder singh's Avatar
    Join Date
    May 2009
    Location
    India
    Posts
    39
    Vote Rating
    0
    Surinder singh is on a distinguished road

      0  

    Default Grid FilterRow

    Grid FilterRow


    Hi,
    We are sharing our extjs,joomla mootool,jquery extensions on http://www.developerextensions.com


    one of them is Grid FilterRow by which you can filter the grid from server side.

    You can add any kind of input filter like DropDown/Combobox, Textfield, NumberField, DateField Etc
    And You can clear all filters by one click.

    In this extension you can add more filter options like
    1) if you have a date filter
    then options can be [After,Before,Is,ETC]
    2)if you have a text filter
    then options can be [Equal,Contains,Start With,End With]
    3)if there is number filter
    then options can be [Equal,Greater than,Less Than,Start With,End With, ETC....]

    it is opto you, how u can add more options in backend and frontend, let me show you, how it works

    FrontEnd settings:
    Grid Columns Configurations:-

    var sampleGridColumns= [{
    header: 'Id',
    width:90,
    dataIndex: 'id',
    clearFilter:true//used to show clear filter icon in this column
    },{
    header: 'Title',
    dataIndex: 'title',
    sortable: true,
    width:150,
    filterInput: new Ext.form.TextField(),
    filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
    },{
    header: 'Alias',
    dataIndex: 'alias',
    sortable: true,
    width:230,
    filterInput: new Ext.form.TextField(),
    filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
    },{
    header: 'Created',
    width:130,
    dataIndex: 'created_date',
    filterInput: new Ext.form.DateField({format:'Y-m-d', dataIndex:'created' /* you can pass different dataIndex for filtering into all filter inputs */}),
    filterOptions:[{value:'before', text:'Before'},{value:'after', text:'After'},{value:'contain', text:'Is'}]
    },{
    header: 'Published',
    dataIndex: 'state',
    sortable: true,
    renderer:function(v){if(v==1){return 'Published'}else{return '<span style="color:red">UnPublished</span>'}},
    filterInput : new Ext.form.ComboBox({
    displayField : 'name',
    valueField : 'state',
    triggerAction : 'all',
    typeAhead : false,
    mode : 'local',
    listWidth : 160,
    hideTrigger : false,
    emptyText : 'Select',
    store :[['1','Published'],['0','UnPublished']]
    }),
    filterOptions:[{value:'equal', text:'Is'},{value:'notequal', text:'Not'}]
    }];



    Backend handler:

    <?php
    error_reporting
    (E_ALL&~E_NOTICE);
    include(
    'db.php');

    /**
    * Gets Atricals from the com_extensiondemo_content table by filtering them accroding to $filter option
    *
    * @param $filter as array ('name'=>"John", "name_filterOption"=>'startwith', 'email'=>'@yahoo.com', "email_filterOption"=>'endwith')
    *
    * @access public
    * @return records found
    */
    function filteredMembers( $filter ="" ){
    $where = " WHERE ";
    $where .= buildFilterCondition($filter);

    $sql = "SELECT *, DATE_FORMAT(created, '%b %e, %Y') as created_date FROM com_extensiondemo_content ".$where;
    if(
    $offset > 0 ){
    $sql .= " LIMIT ".intval($start).",".intval($offset);
    }

    $return = loadObjectlist($sql);
    return
    $return;
    }

    /**
    * build the filter condition for query
    *
    * @param $filter as array ('name'=>"John", "name_filterOption"=>'startwith', 'email'=>'@yahoo.com', "email_filterOption"=>'endwith')
    *
    * @access public
    * @return filter as string
    */
    function buildFilterCondition($filter){
    $where = ' 1=1 ';
    if(
    $filter && is_array($filter) && count($filter) ){
    foreach(
    $filter as $fieldIndex=>$val){
    if(
    substr($fieldIndex, -12 ) == 'filterOption' ){
    $fieldName = str_replace('_filterOption', '', $fieldIndex);
    $fieldValue = $filter[$fieldName];
    if(
    $fieldValue===''){
    continue;
    }

    switch(
    $val){
    case
    'startwith':
    $where .= " AND {$fieldName} like '{$fieldValue}%' ";
    break;
    case
    'endwith':
    $where .= " AND {$fieldName} like '%{$fieldValue}' ";
    break;
    case
    'doesnotcontain':
    $where .= " AND {$fieldName} NOT like '%{$fieldValue}%' ";
    break;
    case
    'equal':
    $where .= " AND {$fieldName} = '{$fieldValue}' ";
    break;
    case
    'notequal':
    $where .= " AND {$fieldName} <> '{$fieldValue}' ";
    break;
    case
    'before':
    $where .= " AND {$fieldName} < '{$fieldValue}' ";
    break;
    case
    'after':
    $where .= " AND {$fieldName} > '{$fieldValue}' ";
    break;
    case
    'NoFilter':
    break;
    default:
    case
    'contain':
    $where .= " AND {$fieldName} like '%{$fieldValue}%' ";
    break;
    }
    }
    }
    }
    return
    $where;
    }


    $filter = $_REQUEST['filter'];
    $rows = filteredMembers($filter);
    $result = new stdClass();
    $result->data = $rows;
    $result->total = count($rows);
    $result->success = true;
    echo
    $json = json_encode($result);

    ?>














    Demo URL: http://www.developerextensions.com/i...1.2&Itemid=482


  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Do you have these any extensions in download form? I an interested in the Query Builder.
    (table schema)

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Berne, Switzerland
    Posts
    6
    Vote Rating
    1
    mluethi is on a distinguished road

      0  

    Default


    Hi!

    This is a very nice extension!
    Is it possible to use with the new Ext JS 4?

    I was trying with PR5 and it didn't work...

    FireBug gives me an error on line 141:
    grid.getColumnModel is not a function


    Do you have any experience with FilterRow in Ext JS 4 (PR5)?

    TIA & best regards,
    Marcel

  4. #4
    Sencha User brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
    brittongr is on a distinguished road

      0  

    Default


    Query builder looks nice!!
    Greivin Britton

    My Extensions:
    Ext.ux.NumericField: Number field with support for currencySymbol, thousand separator, international...
    Ext.ux.PagerSizeSelector: A plugin that allows the change page size with just one click.
    Ext.ux.FieldAccess: A plugin to let the user know which fields are editable.

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    244
    Vote Rating
    0
    senacle is on a distinguished road

      0  

    Default


    Nice extension !

    I've made the following change in filterRow.js :

    Code:
    this.grid.store.load();
    in place of
    Code:
    this.grid.store.reload();
    because reload() takes the last parameters used

    In clearAllFilters and getData functions i've replaced 'dataIndex' by 'id'.
    It's for combobox filterInput which have a remote store.

    Some example is better to explain.

    The grid's column and its combobox filterInput
    Code:
            align: 'center',
            dataIndex: 'nom_categorie',
            header   : 'Cat&eacute;gorie',
            filterInput: new Ext.form.ComboBox({
                displayField: 'libelle_categorie',
                hideTrigger: false,
                id: 'categorie.id_categorie',
                listWidth: 160,
                store: store_categorie,
                triggerAction: 'all',
                typeAhead: false,
                valueField: 'id_categorie'
            }),
            filterOptions: [{
                value:'equal', text:'Egal &agrave;'
            },{
                value:'notequal', text:'Diff&eacute;rent de'
            }],
            renderer: style_valeur_grid,
            sortable : true,
            width    : 150

    The datas in the store_categorie coming from remote query

    Code:
    {"id_categorie":"1","libelle_categorie":"Alcool"},{"id_categorie":"33","libelle_categorie":"Alimentaire & Gourmet"}...
    If we use dataIndex, it's "nom_categorie" which will be used as the field's name in the query, and the value could be 1, 33... --> no datas returned by query.

    If we use the filterInput's id, it's "id_categorie" which will be used as the field's name in the query, and the value could be 1, 33... --> some datas returned by query

  6. #6
    Sencha User
    Join Date
    May 2011
    Posts
    5
    Vote Rating
    0
    preichow is on a distinguished road

      0  

    Default Bug with Column Resizing

    Bug with Column Resizing


    Surinder,

    What a wonderful grid filter! I just plugged it into my own grid and it works fine. Thank you for sharing.

    There is just one problem: when I resize the columns, there is a bug: the data gets separated from the column header. I've found this problem on the demonstration grid on your website as well, so I know that it's not just my grid.

    Is there any way to correct this? I hope so, because I think your filter is among the best out there.

Similar Threads

  1. Event queueing for Ext.ux.grid.FilterRow
    By zoja in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 19 Oct 2010, 5:40 AM
  2. GridPanel with Ext.ux.grid.FilterRow and Ext.PagingToolbar
    By epi82 in forum Ext 3.x: User Extensions and Plugins
    Replies: 4
    Last Post: 10 Sep 2010, 2:20 AM
  3. Progress Bar Pager with extension Ext.ux.grid.FilterRow
    By epi82 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 6 Sep 2010, 3:12 AM
  4. FilterRow in ListViews
    By taxidriver in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 1 Sep 2010, 5:52 AM
  5. Lock Grid Column along with Ext.ux.grid.FilterRow plugin
    By taxidriver in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Jul 2010, 1:12 AM

Thread Participants: 5

Tags for this Thread