Results 1 to 2 of 2

Thread: Combobox in Grid not working

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    2

    Default Combobox in Grid not working

    When I try to add a row to to the grid I have values in the combo boxes, but it only lets me select the first item. Then it does not even show that once the edit is complete. The field is just blank. Any Ideas? here is the code.

    Code:
    Ext.onReady(function () {
             var Step = Ext.data.Record.create([
                {
                    name: 'Id',
                    type: 'string'
                }, {
                    name: 'Step',
                    type: 'string'
                }, {
                    name: 'Status',
                    type: 'string'
                }, {
                    name: 'DueDate',
                    type: 'string'
                }, {
                    name: 'AssignedTo',
                    type: 'string'
                }
            ]);
    
             var User = Ext.data.Record.create([
                {
                    name: 'Id',
                    type: 'string'
                }, {
                    name: 'UserName',
                    type: 'string'
                }, {
                    name: 'UserId',
                    type: 'string'
                }
            ]);
             var Status = Ext.data.Record.create([
                {
                    name: 'Id',
                    type: 'string'
                }, {
                    name: 'StatusName',
                    type: 'string'
                }, {
                    name: 'StatusId',
                    type: 'string'
                }
            ]);
                
         
             var writer = new Ext.data.JsonWriter({
                 encode: false,
                 listful: true,
                 writeAllFields: true
             });
    
             var reader = new Ext.data.JsonReader({
                 totalProperty: 'total',
                 successProperty: 'success',
                 idProperty: 'Id',
                 root: 'data',
                 messageProperty: 'message'  // <-- New "messageProperty" meta-data
             }, Step);
    
             var proxy = new Ext.data.HttpProxy({
                 api: {
                     read: '/Manage/Load',
                     create: '/Manage/Create',
                     update: '/Manage/Update',
                     destroy: '/Manage/Delete'
                 },
                 headers: { 'Content-Type': 'application/json; charset=UTF-8' }
             });
    
             var store = new Ext.data.Store({
                 id: 'step',
                 proxy: proxy,
                 reader: reader,
                 writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
                 autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
             });
    
             store.load();
    
             Ext.data.DataProxy.addListener('exception', function (proxy, type, action, options, res) {
                 Ext.Msg.show({
                     title: 'ERROR',
                     msg: res.message,
                     icon: Ext.MessageBox.ERROR,
                     buttons: Ext.Msg.OK
                 });
             });
             var userreader = new Ext.data.JsonReader({
                 totalProperty: 'total',
                 successProperty: 'success',
                 idProperty: 'Id',
                 root: 'users',
                 messageProperty: 'message'  // <-- New "messageProperty" meta-data
             }, User);
             var usersproxy = new Ext.data.HttpProxy({
                 api: {
                     read: '/Manage/GetAllUsers'
    
                 },
                 headers: { 'Content-Type': 'application/json; charset=UTF-8' }
             });
    
             var usersstore = new Ext.data.Store({
                 id: 'user',
                 proxy: usersproxy,
                 reader: userreader,
                 writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
                 autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
             });
    
             usersstore.load();
             // create reusable renderer
            
             // create the combo instance
             var usercombo = new Ext.form.ComboBox({
                 typeAhead: true,
                 editable: false,
                 triggerAction: 'all',
                 lazyRender: true,
                 mode: 'local',
                 store: usersstore,
                 valueField: 'UserID',
                 displayField: 'UserName',
                 id: 'cboUser' 
                
             });
    
             var statusreader = new Ext.data.JsonReader({
                 totalProperty: 'total',
                 successProperty: 'success',
                 idProperty: 'Id',
                 root: 'statuses',
                 messageProperty: 'message'  // <-- New "messageProperty" meta-data
             }, Status);
             var statusproxy = new Ext.data.HttpProxy({
                 api: {
                     read: '/IdeaManager/GetAllStatuses'
    
                 },
                 headers: { 'Content-Type': 'application/json; charset=UTF-8' }
             });
    
             var statusstore = new Ext.data.Store({
                 id: 'status',
                 proxy: statusproxy,
                 reader: statusreader,
                 fields: ['StatusName', 'StatusID'],
                 writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
                 autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
             });
    
             statusstore.load();
    
    
             // create the combo instance
             var statuscombo = new Ext.form.ComboBox({
                 typeAhead: true,
                 editable: false,
                 triggerAction: 'all',
                 lazyRender: false,
                 mode: 'local',
                 store: statusstore,
                 valueField: 'StatusID',
                 displayField: 'StatusName',
                 id: 'cboStatus',
                 listeners: {
                     change: {
                         fn: function (combo, newValue, oldValue) {
                             Ext.getDom('TagTwoId').value = newValue;
                         }
                     }
                 }
    
             });
              
              // create reusable renderer for ComboBox
            Ext.util.Format.comboRenderer = function(combo){
                        return function(value){
                                                    var record = combo.findRecord(combo.valueField || combo.displayField, value);
                                                    return record ? record.get(combo.displayField) : combo.valueNotFoundText;
                                                 }
                                                    }
          var editor = new Ext.ux.grid.RowEditor({
                 saveText: 'Update'
             });
    
             var grid = new Ext.grid.GridPanel({
                 store: store,
                 columns: [
                    { header: "Step(s)",
                        width: 170,
                        sortable: true,
                        dataIndex: 'Step',
                        editor: {
                            xtype: 'textfield',
                            allowBlank: false
                        }
                    },
                    { header: "Status",
                        
                        width: 160,
                        sortable: true,
                        dataIndex: 'StatusName',
                        editor: statuscombo,// specify reference to combo instance
                        renderer: Ext.util.Format.comboRenderer(statuscombo)  // pass combo instance to reusable renderer
                      
                      
    
                    }, {
                        xtype: 'datecolumn',
                        header: 'Due Date',
                        dataIndex: 'DueDate',
                        format: 'm/d/Y',
                        width: 100,
                        sortable: true,
                        groupRenderer: Ext.util.Format.dateRenderer('M y'),
                        editor: {
                            xtype: 'datefield',
                            allowBlank: false,
                            minValue: '01/01/2006',
                            minText: 'Can\'t have a start date before the company existed!',
                            maxValue: (new Date()).format('m/d/Y')
                        }
                    },
                    { 
                        header: "Assigned To",
                        width: 170,
                        sortable: true,
                        dataIndex: 'AssignedTo',
                        editor: usercombo,
                        renderer: Ext.util.Format.comboRenderer(usercombo) 
                      
                    }
                ],
                 plugins: [editor],
                 title: 'NextSteps',
                 height: 300,
                 width: 510,
                 tbar: [{
                     iconCls: 'icon-user-add',
                     text: 'Add Step',
                     handler: function () {
                         var e = new Step({
                             Step: '',
                             Status: '',
                             DueDate: '',
                             AssignedTo: ''
                         });
                         editor.stopEditing();
                         store.insert(0, e);
                         grid.getView().refresh();
                         grid.getSelectionModel().selectRow(0);
                         editor.startEditing(0);
                     }
                 }, {
                     ref: '../removeBtn',
                     iconCls: 'icon-user-delete',
                     text: 'Remove Step',
                     handler: function () {
                         editor.stopEditing();
                         var s = grid.getSelectionModel().getSelections();
                         for (var i = 0, r; r = s[i]; i++) {
                             store.remove(r);
                         }
                     }
                 }, {
                     iconCls: 'icon-user-save',
                     text: 'Save All Modifications',
                     handler: function () {
                         store.save();
                     }
                 }]
             });
    
             grid.getSelectionModel().on('selectionchange', function (sm) {
                 grid.removeBtn.setDisabled(sm.getCount() < 1);
             });
    
             grid.render('crud-grid');
    
         });     // end of onReady

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    That's far too much code for a help request. Try cutting it down to a minimal test case that exhibits the problem.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •