1. #1
    Sencha User Surinder singh's Avatar
    Join Date
    May 2009
    Location
    India
    Posts
    38
    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
    8,927
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi