1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    12
    Vote Rating
    0
    cdavide75 is on a distinguished road

      0  

    Default autocomplete in a gridpanel

    autocomplete in a gridpanel


    Hi,

    I would like use a autocomplete (a combobox) like a field in a grid... (I don't be sure that is a good idea...
    because of the store of autocomplete is large and so I want load my remote store every time that I digit some chars

    My autocomplete work well but I have this problem... the render of autocompleatein the grid... (Is natural)
    in another grid I use a combobox with remote store but I load the store at load of page and the render work well with this function:
    // create reusable renderer
    Ext.util.Format.comboRenderer = function(combo){
    return function(value){
    var record = combo.findRecord(combo.valueField, value);
    return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
    }


    Ok, but in my autocomplete solution No, because remote store is empty or partial...
    I need for each render call a remote service that say to me the display text to use for lookup my autocomplete...

    What can I solve my problem ? (Ext.Ajax.request?)

    Is possible retrive a unique ID for each autocoplete cell in my grid?

    Is good idea use a autocomplete in a grid? (My lookup field is a large table)

    Thanks

    under I paste a part of my code:


    var store_cboxProv= new Ext.data.JsonStore({
    url:'/Mamba/Anagrafiche/Province/Lookup_Load_likeDescrizione',
    root: 'data',
    fields: [{ name: 'idProvincia' },{ name: 'Descrizione' }] ,
    baseParams : {
    Descrizione : 0
    }
    });

    var cboxProv=new Ext.form.ComboBox({
    lazyRender:true,mode: 'remote',
    typeAhead: true,forceSelection: true,
    store: store_cboxProv,
    emptyText:'...',triggerAction: 'all',editable:true,
    forceSelection :true,//IMPORTANTE
    allowBlank:false,
    displayField:'Descrizione',valueField: 'idProvincia',
    autocomplete: true,
    minChars:3,
    hideTrigger:true,
    validateOnBlur: true
    });


    var cm = new Ext.grid.ColumnModel({
    defaults: {
    sortable: false
    },
    columns: [new Ext.grid.RowNumberer(),
    {header: 'Descript', dataIndex: 'Descrizione',width: 130, editor: new Ext.form.TextField()} ,
    {header: 'Prov', allowBlank:true, dataIndex: 'Provincia',width: 130, editor: cboxProv,renderer: Ext.util.Format.autocompliateRenderer()},
    ]
    });

    Ext.util.Format.autocompliateRenderer = function(combo){
    Ext.util.Format.autocompliateRenderer = function(combo){return function(value){
    //SOME CODE, I TRY n SOLUCTION
    }
    }

  2. #2
    Sencha User
    Join Date
    May 2010
    Posts
    12
    Vote Rating
    0
    cdavide75 is on a distinguished road

      0  

    Default resolve

    resolve


    Hi,
    I resolve my problem with this code:

    In my columns code call the render function "autocompliateRenderer"

    columns: [
    {header: '<%"Provincia").Traduci() %>', allowBlank:true, dataIndex: 'Provincia',width: 130, editor: cboxProv,renderer: Ext.util.Format.autocompliateRenderer(cboxProv)},...]


    .....
    Ext.util.Format.autocompliateRenderer= function(combo ){return function(value,meta, record, row,col , gridStore ){
    Ext.Ajax.request({
    url: '/mamba/anagrafiche/Province/DescrizioneFromID?id=' + value,
    params:{
    id: value
    },
    success: function(response){
    var jsonData = Ext.util.JSON.decode(response.responseText);
    grid.getView().getCell(row, col).textContent= jsonData.data;
    },
    failure: function(response){
    return 'f';
    }
    });
    }
    }

    I do a remote request for each row, pass the ID and return the description of element....

    "var jsonData = Ext.util.JSON.decode(response.responseText);
    grid.getView().getCell(row, col).textContent= jsonData.data;"

    I don't know if is a good idea call a remote request for each element but work well.... I can load the description in an another store o pass the description in the same store but I prefer choose this solution

    I hope this can be a help for someone

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    vishrutsanghvi02 is on a distinguished road

      0  

    Default can any One Help me to provide AutoCompleter in Crud Grid?

    can any One Help me to provide AutoCompleter in Crud Grid?


    hii
    can any one help me to how to use autocompleter in extjs grid textfield...?please provide me code...?

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

      0  

    Default autocomplete with filter of gridpanel

    autocomplete with filter of gridpanel


    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!!!

Similar Threads

  1. autocomplete in tab
    By ives in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 2 Oct 2008, 8:07 AM
  2. Need help on autocomplete
    By gywinston in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 29 Sep 2008, 11:05 AM
  3. Autocomplete
    By raviext in forum Ext 2.x: Help & Discussion
    Replies: 13
    Last Post: 15 Jul 2008, 6:02 AM
  4. YUI autocomplete
    By Alidad in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 4 Jan 2008, 11:59 AM
  5. Autocomplete help
    By rayan.arasteh in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 1 Jul 2007, 2:46 AM

Thread Participants: 2

Tags for this Thread