1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    6
    Vote Rating
    0
    Annu is on a distinguished road

      0  

    Default Filter(textbox) of Grid Panel having autocomplete functionality like combobox.

    Filter(textbox) of Grid Panel having autocomplete functionality like combobox.


    Hi,
    I am using 4.1.3.
    I create grid panel having its filter functionality to columns. But i want to add autocomplete functionality to filter text. I mean Like extjs combobox I want autocomplete loading Filter Textbox in grid panel.

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi!

    why not use a combo with trigger hide, it will serve your needs...
    sample:-
    Code:
    {
       xtype:'combo'
       triggerAction:'all',
       typeAhead:true,
       mode:'remote',
       minChars:2,
       forceSelection:true,
       hideTrigger:true
    }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    6
    Vote Rating
    0
    Annu is on a distinguished road

      0  

    Default


    Hi,

    I already used a combobox and its working fine. But now I want autocomplete functionality with Grid panel. It have filter On columns and i want autocomplete on that filter.
    Here is my code: I am using some perl code also.

    var filters_config = {
    ftype: 'filters',
    filterCls: 'filter-sort .x-column-header-text',
    onCheckChange: function (item, value) {
    this.getMenuFilter().setActive(value);
    },

    // This function will return filter settings for all columns and build query to set filter setting on respective column.
    onBeforeLoad : function (store, options) {
    options.params = options.params || {};
    this.cleanParams(options.params);
    var params = this.buildQuery(this.getFilterData());
    Ext.apply(options.params, params);
    if(params.filter) {
    filterSetting = Ext.decode(params.filter);
    } else {
    filterSetting = null;
    }
    },
    };

    var grid = Ext.create('Ext.grid.Panel', {
    title: "<% 'tabdiv_' . $tab_divid_cnt |n%>",
    id: "<% $grid_id |js,h%>",
    columns: column,
    store: grid_store,
    columnLines: true,
    loadMask: true,
    tbar: tbar,
    features: [filters_config],
    renderTo: Ext.get('<% 'tabdiv_' . $tab_divid_cnt |n%>'),
    layout: 'fit',
    header: false,
    enableColumnMove: false,
    % if ( not $fetch_data_from_server) {
    autoHeight: true,
    viewConfig: {
    deferEmptyText: false,
    emptyText: "<% defined $no_result_html ? $no_result_html : escape_html($no_result) |n%>",
    autoscroll: true,
    enableTextSelection: true
    },
    % } else {
    height: Ext.getBody().getViewSize().height - 150,
    width: Ext.getBody().getViewSize().width - 240,
    % }
    listeners: {
    afterrender: function(grid) {
    if (!columnSetting && <% $fetch_data_from_server || 0 |h%>) {
    grid.getStore().guaranteeRange(0, <% $display_size |n%>);
    }
    else if (filterSetting) {
    // This is use to set filter icon when page get reload
    grid.filters.createFilters();
    }
    },
    columnhide: function(columns, column, opt) {
    if (Ext.getCmp(columns.container.id)) {
    var columnStruc = columns.items.items;
    if (Ext.getCmp(gridId).filters.getFilterData()[0]) {
    filterSetting = createFilterSetting(Ext.getCmp(gridId).filters.getFilterData());
    columnStruc[0]['filterSetting'] = filterSetting;
    }
    bx.extStateful.saveState(columns.container.id, columnStruc, <% $uid |n%>, 'PUT');
    }
    },
    columnshow: function(columns, column, opt) {
    if (Ext.getCmp(columns.container.id)) {
    var columnStruc = columns.items.items;
    if (Ext.getCmp(gridId).filters.getFilterData()[0]) {
    filterSetting = createFilterSetting(Ext.getCmp(gridId).filters.getFilterData());
    columnStruc[0]['filterSetting'] = filterSetting;
    }
    bx.extStateful.saveState(columns.container.id, columnStruc, <% $uid |n%>, 'PUT')
    }
    }
    }
    });


    Weather I required to add some parameters in filters_config or any other way to add autocomplete functionality.I want autocomplete means when i type a letter in filter textbox of grid panel, related search list according to that letter is needed to displayed.

    thanks!!!