2011-05-27 30 views
5

由於某種原因,ExtJS4網格的這種配置不會更新。當你點擊一個單元格時,改變一個值,它會觸發創建的URL,而不是代理中定義的更新URL,並在FF4中使用Firebug進行觀察。奇怪的是,datachanged事件在頁面啓動時加載存儲後觸發,但在數據實際更改後無法啓動。此外,網格將所有行發送到創建網址。ExtJS4網格不會更新遠程數據庫

誰能告訴我我做錯了什麼?

Ext.onReady(function() { 

    Ext.BLANK_IMAGE_URL = '/images/extjs4/s.gif'; 
    Ext.tip.QuickTipManager.init(); 
    //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider')); 

    Ext.define('VendorError', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      {name: 'UnexpSrvID', type: 'int'}, 
      {name: 'VendorID', type: 'int'}, 
      {name: 'VendorName', type: 'string'}, 
      {name: 'VndActID', type: 'int'}, 
      {name: 'VndActNb', type: 'string'}, 
      {name: 'InvoiceID', type: 'int'}, 
      {name: 'VInvNb', type: 'string'}, 
      {name: 'VInvRcptDt', type: 'date', dateFormat: 'Y-m-d' }, 
      {name: 'InvDate', type: 'date', dateFormat: 'Y-m-d' }, 
      {name: 'CodeSpecifier', type: 'string'}, 
      {name: 'Recurrence', type: 'string'}, 
      {name: 'ClientID', type: 'int'}, 
      {name: 'ClientName', type: 'string'}, 
      {name: 'LocID', type: 'int'}, 
      {name: 'LocName', type: 'string'}, 
      {name: 'RecentLocStatus', type: 'string'}, 
      {name: 'RecentLocStatusDate', type: 'date', dateFormat: 'Y-m-d' }, 
      {name: 'UnexpCost', type: 'float'}, 
      {name: 'ConfirmedAmt', type: 'float'}, 
      {name: 'StaffID', type: 'int'}, 
      {name: 'NetworkID', type: 'string'}, 
      {name: 'UnexpStatCode', type: 'string'} 
     ], 
     proxy: { 
      type: 'ajax', 
      simpleSortMode: true, 
      api: { 
       read: '/internal/viewVERext_json.asp', 
       create: '/internal/viewVERext_create.asp', 
       update: '/internal/viewVERext_update.asp', 
       destroy: '/internal/viewVERext_destroy.asp' 
      }, 
      reader: { 
       type: 'json', 
       totalProperty: 'total', 
       successProperty: 'success', 
       messageProperty: 'message', 
       root: 'data' 
      }, 
      writer: { 
       type: 'json', 
       writeAllFields: false, 
       allowSingle: false, 
       root: 'data' 
      }, 
      listeners: { 
       exception: function(proxy, response, operation){ 
        Ext.MessageBox.show({ 
         title: 'REMOTE EXCEPTION', 
         msg: operation.getError(), 
         icon: Ext.MessageBox.ERROR, 
         buttons: Ext.Msg.OK 
        }); 
       } 
      } 
     } 
    }); 

    var store = Ext.create('Ext.data.Store', { 
     model: 'VendorError', 
     autoLoad: true, 
     autoSync: true, 
     pageSize: 20, 
     remoteSort: true, 
     listeners: { 
     // write: function(proxy, operation){ 
     //  if (operation.action == 'destroy') { 
     //   main.child('#form').setActiveRecord(null); 
     //  } 
     //  Ext.example.msg(operation.action, operation.resultSet.message); 
     // } 
      datachanged: function() { 
       var report = ""; 
       store.each( 
        function(rec) { 
         report = report + rec.dirty + '/'; 
        } 
       ) 
       alert(report); 
      } 
     } 
    }); 

    // create the Grid 
    var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     //stateful: true, 
     //stateId: 'stateGrid', 
     columns: [ 
      { text  : 'Vendor', 
       dataIndex: 'VendorName', 
       flex  : 1 
      }, 
      { text  : 'Account', 
       dataIndex: 'VndActNb' 
      }, 
      { text  : 'Invoice', 
       dataIndex: 'VInvNb' 
      }, 
      { text  : 'Invoiced', 
       dataIndex: 'InvDate', 
       xtype : 'datecolumn', 
       align : 'center' 
      }, 
      { text  : 'Receipted', 
       dataIndex: 'VInvRcptDt', 
       xtype : 'datecolumn', 
       align : 'center' 
      }, 
      { text  : 'Description', 
       dataIndex: 'CodeSpecifier' 
      }, 
      { text  : 'Client', 
       dataIndex: 'ClientName' 
      }, 
      { text  : 'Location', 
       dataIndex: 'LocName' 
      }, 
      { text  : 'LStatus', 
       dataIndex: 'RecentLocStatus', 
       align : 'center' 
      }, 
      { text  : 'Credit', 
       dataIndex: 'UnexpCost', 
       tdCls : 'colyellow', 
       renderer : Ext.util.Format.usMoney, 
       align : 'right', 
       field : { xtype:'textfield', allowBlank:false } 
      }, 
      { text  : 'Confirmed', 
       dataIndex: 'ConfirmedAmt', 
       tdCls : 'colyellow', 
       renderer : Ext.util.Format.usMoney, 
       align : 'right', 
       field : { xtype:'textfield', allowBlank:false } 
      }, 
      { text  : 'Recurrence', 
       dataIndex: 'Recurrence', 
       tdCls : 'colyellow', 
       align : 'center', 
       field : { 
        xtype : 'combobox', 
        typeAhead: true, 
        triggerAction: 'all', 
        selectOnTab: true, 
        store: [ 
         ['once','once'],['1st','1st'],['2nd+','2nd+'] 
        ], 
        lazyRender: true 
       } 
      }, 
      { text  : 'CStatus', 
       dataIndex: 'UnexpStatCode', 
       tdCls : 'colyellow', 
       align : 'center', 
       field : { 
        xtype : 'combobox', 
        typeAhead: true, 
        triggerAction: 'all', 
        selectOnTab: true, 
        store: [ 
         <%=cstat_grid%> 
        ], 
        lazyRender: true 
       } 
      }, 
      { text  : 'Owner', 
       dataIndex: 'NetworkID', 
       tdCls : 'colyellow', 
       field : { 
        xtype : 'combobox', 
        typeAhead: true, 
        triggerAction: 'all', 
        selectOnTab: true, 
        store: [ 
         <%=staff_grid%> 
        ], 
        lazyRender: true 
       } 
      } 
     ], 
     layout: 'fit', 
     height: 500, 
     renderTo: 'theGrid', 
     selType: 'cellmodel', 
     plugins: [ 
      Ext.create('Ext.grid.plugin.CellEditing', { 
       clicksToEdit: 1 
      }) 
     ], 
     dockedItems: [ 
      { xtype: 'pagingtoolbar', 
       store: store, 
       dock: 'bottom', 
       displayInfo: true 
      }, 
      { xtype: 'toolbar', 
       dock: 'top', 
       items: [ 
        { xtype:'button', 
         text: 'IsDirty()', 
         handler: function() { 
         var report = ""; 
         store.each( 
          function(rec) { 
           report = report + rec.dirty + '/'; 
          } 
         ) 
         alert(report); 
         } 
        } 
       ] 
      } 
     ], 
     viewConfig: { 
      stripeRows: true 
     } 
    }); 

    Ext.EventManager.onWindowResize(grid.doLayout, grid); 
}); 

回答

2

原來的問題是,加入到網格記錄由一個唯一的ID字段的值檢測爲「不新」。 Sencha論壇上的一種poster指出了這一點。

默認情況下,模型中的該字段預計具有'id'的名稱。所以,你必須提供一個帶有'id'字段的模型,上面我的模型沒有這個字段,或者你必須使用Ext.data.Model的idProperty屬性覆蓋缺省列。我只是將UnexpSrvId列重命名爲id。而且,看哪,我們發送更新update()而不是create()。

這從API文檔中並不明顯,因爲許多不幸的事情是在這個強大的框架中。

0

因爲您的網格使用CellEdit混入可以將監聽器添加到grid編輯後,將更改提交到您的記錄。因此,在你的網格,添加監聽器配置選項定義如下......

listeners: { 
    edit : function(e) { 
     e.record.commit(); 
    } 
} 

編輯:我認爲你正在使用你的代理服務器的錯誤語法...你只能定義讀寫器(由事物的容貌)...

Ed Spencer's article on Proxies

ExtJS 4 API Entry on Proxies

+0

「因爲您的網格正在使用CellEdit mixin」因此,使用插件會導致對單個單元格進行更新以觸發代理上的create(而不是更新)並將所有行發送給它?這似乎是非常錯誤的。另外,問題並不在於服務器沒有任何內容,而是所有20行都被髮送到創建URL! – alphadogg 2011-05-27 23:19:24

+0

我現在只是將ExtJS 4下載到我的機器上,因爲我不確信這是答案......我的道歉,如果它不是 – JamesHalsall 2011-05-27 23:22:10

+1

沒問題!你的時間是最感激。 – alphadogg 2011-05-27 23:22:34