Results 1 to 2 of 2

Thread: (3.0) EditorGridPanel with jsonwriter and HTTPProxy always sending create action.

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2008
    Posts
    8

    Cool (3.0) EditorGridPanel with jsonwriter and HTTPProxy always sending create action.

    (FIXED) -- I was missing the idProperty in the store. Makes total sense to me as you need an id to match on in order to figure out you are updating instead of creating. DOH!

    I have a panel with a drop down users can select a table to manipulate. After they select a table, I populate the panel with an EditorGridPanel using an HTTPProxy that also has a jsonwriter. The "read" CRUD is envoked and seems to process just fine. But when I do an update to an existing record in the table, the CRUD action envoked is "create" instead of update. I also cannot seem to get the destroy CRUD action to do anything. The store recognizes the record was removed, but no http call is made. I thought maybe it had something to do with the relayEvents not getting recognized,but I cannot tell. Any ideas/suggestions?

    Here is a snippet of my code.

    Code:
    var statuses = new Ext.data.SimpleStore({
        fields: ['key','name'],
        data : [['A','ACTIVE'],['I','INACTIVE']]
    });
    
    var statBox = new Ext.form.ComboBox({
        typeAhead        : true,
        tpl: '<tpl for="."><div ext:qtip="{name}" class="x-combo-list-item">{name}</div></tpl>',
        hiddenName         : 'data[status]',
        hiddenId         : 'data[status]',
        id                : 'status',
        displayField    : 'key',
        displayValue    : 'key',
        triggerAction    : 'all',
        lazyRender        : true,
        mode            : 'local',
        value             : 'A',
        store            : statuses
    });
    
    var readercols = [{name: 'cos_id'},{name: 'cos_name', allowBlank: false},
                              {name: 'cos_desc', allowBlank: false},
                              {name: 'cos_code', allowBlank: false},
                              {name: 'status', allowBlank: false}];
    
    var proxy = new Ext.data.HttpProxy({
        url : 'data.php?store=tablemaint'
    });
    
    var writer = new Ext.data.JsonWriter({
        encode: true,
        writeAllFields: true
    });
    
    var store = new Ext.data.Store({
        id: 'tblstore',
        proxy: proxy,
        writer: writer,
        reader: new Ext.data.JsonReader({root: 'data',successProperty: 'success'},readercols),
        listeners: {
            write : function(store, action, result, response, rs) {
                App.setAlert(response.success, response.message);
            }
        }
    });
    
    
    // Application instance for showing user-feedback messages.
    var App = new Ext.App({});
    
    
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
        //filters section
        var filters = new Ext.Panel({
            header        : false,
            region      : 'north',
            split       : true,
            height        : 100,
            anchor        : '100%',
            layout        : 'anchor',
            autoScroll  : false,
            collapsible : false,
            labelAlign    : 'top',
            frame        : true,
            style        : 'border: 3px solid #AABBCC;',
            items:[{
                xtype        : 'label',
                text         : 'Select A Table',
                anchor        : '100%',
                style         : 'padding-left:410px;',
                cls            : 'fltrlbl'
            },{
                layout: 'column',
                border: false,
                anchor: '100%',
                items:[{
                    columnWidth : 1,
                    layout         : 'form',
                    border        : false,
                    anchor        : '95%',
                    style         : 'padding-left:390px;',
                    items : [{
                        xtype            : 'combo',
                        hideLabel        : true,
                        hiddenName        : 'data[tbl]',
                        hiddenId        : 'data[tbl]',
                        id                : 'tbl',
                        border            : false,
                        store            : tables,
                        width            : 180,
                        displayField    : 'name',
                        valueField        : 'key',
                        typeAhead        : true,
                        forceSelection    : true,
                        mode            : 'local',
                        triggerAction    : 'all',
                        value             : '',
                        selectOnFocus    : true,
                        listeners: {select: function(){
                            if(students.getForm().isValid()){
                                getGrid(this.getValue());
                            }
                        }}
                    }]
                }]
            }]
        });
        
        var gridPanel = new Ext.Panel({
            header        : false,
            region      : 'south',
            split       : true,
            height        : 500,
            anchor        : '100%',
            layout        : 'anchor',
            autoScroll  : false,
            collapsible : false,
            labelAlign    : 'top'
        });
    
        function getGrid(mytbl){
            Ext.getBody().mask('Loading Results...');
                if(Ext.getCmp('grid')){
                    gridPanel.removeAll();    
                }
                
                proxy.setUrl('data.php?store=tablemaint&tbl=' + mytbl);
                
                // get the grid column setup for the table chosen
                switch(mytbl){
                    case 'COURSE_OF_STUDY_D':
                        var readercols = [{name: 'cos_id'},{name: 'cos_name', allowBlank: false},
                                          {name: 'cos_desc', allowBlank: false},
                                          {name: 'cos_code', allowBlank: false},
                                          {name: 'status', allowBlank: false}];
                        var tblColumns =  [
                            {header: "ID", width: 40, sortable: true, dataIndex: 'cos_id'},
                            {header: "Name", width: 200, sortable: true, dataIndex: 'cos_name',
                               editor: new Ext.form.TextField({
                               allowBlank: false})},
                            {header: "Description", width: 200, sortable: true, 
                               dataIndex: 'cos_desc', editor: new Ext.form.TextField({
                               allowBlank: false})},
                            {header: "Code", width: 50, sortable: true, dataIndex: 'cos_code',
                               editor: new Ext.form.TextField({
                               allowBlank: false})},
                            {header: "Status", width: 50, sortable: true, dataIndex: 'status', 
                               editor: statBox}
                        ];
                        store.reader = new Ext.data.JsonReader({root: 'data',
                        successProperty: 'success'},readercols);
                        break;
                    case 'RACE_D':
                        var readercols = [{name: 'race_id'},{name: 'race_name', 
                              allowBlank: false},{name: 'race_desc', allowBlank: false},
                              {name: 'race_code', allowBlank: false},{name: 'status', 
                               allowBlank: false}];
                        var tblColumns =  [new Ext.grid.RowNumberer(),
                            {header: "ID", width: 40, sortable: true, dataIndex: 'race_id'},
                            {header: "Name", width: 200, sortable: true, dataIndex: 'race_name',
                               editor: new Ext.form.TextField({
                               allowBlank: false})},
                            {header: "Description", width: 200, sortable: true, 
                               dataIndex: 'race_desc', editor: new Ext.form.TextField({
                               allowBlank: false})},
                            {header: "Code", width: 50, sortable: true, dataIndex: 'race_code',
                               editor: new Ext.form.TextField({
                               allowBlank: false})},
                            {header: "Status", width: 50, sortable: true, dataIndex: 'status', 
                               editor: statBox}
                        ];
                        store.reader = new Ext.data.JsonReader({root: 'data',
                               successProperty: 'success'},readercols);
                        break;
                }
                store.load();
                
                var grid = new Ext.grid.EditorGridPanel({
                    id:'grid',
                    store: store,
                    columns: tblColumns,
                    height: 400,
                    stripeRows: true,
                    anchor: '100% 100%',
                    tbar:[{
                        text: 'Add',
                        iconCls: 'add',
                        handler: function(){
                            switch(mytbl){
                                case 'COURSE_OF_STUDY_D':
                                    var u = new grid.store.recordType({
                                        ID: '',
                                        Name: '',
                                        Description: '',
                                        Code: '',
                                        Status: '',
                                    });
                                    break;
                            }
                            grid.stopEditing();
                            grid.store.insert(0, u);
                            grid.startEditing(0, 1);
                        },
                        scope: this
                    }, '-', {
                        text: 'Delete',
                        iconCls: 'delete',
                        handler: function(){
                            var index = grid.getSelectionModel().getSelectedCell();
                            if (!index) {
                                return false;
                            }
                            var rec = grid.store.getAt(index[0]);
                            grid.store.remove(rec);
                        },
                        scope: this
                    }, '-']
                });
                gridPanel.add(grid);
                grid.getStore().on('loadexception', function(){
                    gridPanel.removeAll(); 
                    var grid = new Ext.form.Label({
                        id        : 'grid',
                        html    :"<div style='font-size:16px; color:red; text-align:center;'>NO DATA FOUND</div>",
                        anchor    : '100%'
                    });
                    gridPanel.add(grid);
                    gridPanel.doLayout();
                    Ext.getBody().unmask();
                    
                });
            gridPanel.doLayout();
            Ext.getBody().unmask();
            grid.relayEvents(grid.store,['update','destroy','save']);
        }    
        var students = new Ext.form.FormPanel({
            formId        : 'student',
            id            : 'stud',
            plain        : true,
            border        : true,
            anchor        : '100%',
            applyTo        : 'table_content',
            items        : [filters,gridPanel]
        });
      
        students.show();
    });
    Last edited by allenlako; 13 Jul 2009 at 12:39 PM. Reason: FIXED---(missing idProperty in store params)

  2. #2
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    293

    Thumbs up

    Hi!
    I went into similar problem , Your solution made my day
    Stju

Posting Permissions

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