1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Answers
    2
    Vote Rating
    0
    sliks is on a distinguished road

      0  

    Default Unanswered: typeAhead in Combobox inside rowEditing Grid

    Unanswered: typeAhead in Combobox inside rowEditing Grid


    Hi, I have a Grid that allows row editing. One of the column has a combobox. I would like to set this combobox typeAhead. If I am builidng a form, I used to set queryMode to local and preload the combo options. However, in my row editing grid, when I try to follow this method (preload the options using beforeedit listener), it does not show my data correct. When I first click on the record, the combobox appears to be empty even if I have data in it, but typeAhead does work. If I click on another record after the first one, the combobox will show the value of the first edited record.

    So it keeps displaying the data of my previous record. Am I doing anything wrong here? How can I make typeAhead work when queryMode is local in a row editing grid?


    A snippet of my code is attached:

    Code:
    Ext.define('...', {
        requires: [        
            ...   
               ],
        extend: 'Ext.grid.Panel',
        initComponent: function () {
    
            var rowEditing = Ext.create('Ext.ux.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false,
                scope: this,
                listeners : {
                    beforeedit : function(ev) {
                        Ext.getCmp('degreeId').store.load();
                    }
                }
            });
            
            var storeVar = Ext.create('Ext.empProfile.stores.UserSchoolStore');
    
            this.id = 'userSchoolDataGrid';
            this.plugins = [rowEditing];
            this.store = storeVar;
            this.width = 675;
            this.height = 180;
            this.columns  = [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'schoolName',
                    header: 'School Name',
                    sortable: true,    
                    hideable: false,
                    editor: {
                        allowBlank: false,
                        blankText: 'School Name is required'
                    }
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'degreeId',
                    name: 'degreeId',
                    header: 'Degree',
                    sortable: true,
                    hideable: false,
                    width: 100,
                    renderer: function (value, p , r) {
                        if (!r) {
                            return '';
                        }
                        if (r.data.degreeId === null || r.data.degreeId === '') {
                            return '';
                        }
                        return Ext.String.format(r.data.degreeName);
                    },
                    editor: {
                        xtype: 'combobox',
                        id: 'degreeId',
                        name: 'degreeId',
                        allowBlank: false,
                        store: Ext.create('Ext.empProfile.stores.ListEducationLevel'),
                        editable: true,
                        triggerAction: 'all',
                        forceSelection: true,
                        emptyText: 'Choose degree',
                        displayField: 'name',
                        valueField: 'id',
                        blankText: 'Degree is required',
                        queryMode: 'local',
                        typeAhead: true
                    }
                },
            ];
            
            this.viewConfig = {
                emptyText: '<div style="width:auto; text-align:center; padding-top:5px;padding-bottom:5px;">There is no data available.</div>',
                deferEmptyText: false
            };
            this.renderTo = Ext.getBody();                
            this.callParent();
        },
            this.callParent(arguments);
        }

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Out of curiosity, why are you loading the options in the beforeedit listener rather than just putting autoLoad: true on the store? My first instinct is that the listener is causing your problems.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Answers
    2
    Vote Rating
    0
    sliks is on a distinguished road

      0  

    Default


    I tried add autoLoad:true in my store, but it doesn't help (I also tried removed the beforeedit listener and added the autoLoad:true). I am still very new to ExtJs. So maybe I am missing some really simple things. If so, please show me the correct way to do it or give post a reference/link. Thanks in advance

    Code:
    Ext.define('...', {
        requires: [
          ...
        ],
        model: 'Ext.empProfile.models.UserSchoolRecord',
        extend: 'Ext.data.Store',
        storeId: 'UserSchoolStore',
        autoLoad: true,    
        autoSync: true,
        model: 'Ext.empProfile.models.UserSchoolRecord',
        proxy: {
            type: 'rest',
            api: {
                read: '/inConcert/userSchool/show',
                create: '/inConcert/userSchool/save',
                update: '/inConcert/userSchool/update',
                destroy: '/inConcert/userSchool/delete'
            },
            reader: {
                type: 'json',
                root: 'data'
            },
            writer: {
                type: 'json',
                root: 'data',
                encode: true
            },
        }
    });

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Does disabling type-ahead make any difference or does it still not work? Try to simplify your test case to extract the smallest possible example, currently there's far too much going on for us to help you. If you can reproduce the problem with local data that would obviously be a major simplification.

    I have one guess about what the problem might be. The value in the valueField of the combobox needs to tie up with the value of the dataIndex field in the column. In other words, does the value in degreeId match the value in the combobox store's id field? By 'match' I mean having matching types not just values, number 1 and string "1" are not necessarily going to match. Could you post an example of the data present in the two stores and the model configs?

    Incidentally, you have the model specified twice on your store.

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Answers
    2
    Vote Rating
    0
    sliks is on a distinguished road

      0  

    Default


    Thank you for your prompt replies. I finally give up to make this work in the front end. After all queryMode: local is for local store. Since I have a remote store, it will be just easier to fix my issue in the backend.

    I do have several insights about the issues. One of the possible reasons is that although I call the combobox to load the store explicitly, the store is still not there yet before the combobox is loaded. So it does not see the current data. Instead, it see the previous data and thus display it. But there is no way for me to control when the combobox loads the data (or maybe I just don't know) because I am using an editable grid. In the case of a form, I can just use a callback function and call loadRecord to solve the issue.

    Any suggestions are still welcome. Thanks

Thread Participants: 1