2012-05-02 34 views
0

我做了以下代碼以在網格中列出搜索到的條目。用於更新條目的網格

Ext.onReady(function(){ 
      var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); 

      var searchUsers = new Ext.FormPanel({ 
       renderTo: "searchUsers", 
       frame: true,    
       title: 'Search Users', 
       bodyStyle: 'padding:5px',   
       width: 500, 
       items:[{ 
        xtype:'textfield', 
        fieldLabel: 'Username', 
        name: 'userName'    
       }], 
       buttons:[ 
         { 
          text:'Search', 
          formBind: true, 
          listeners: { 
           click: function(){ 
            Ext.Ajax.request({ 
             method:'GET', 
             url : url+'/lochweb/loch/users/getUser', 
             params : searchUsers.getForm().getValues(), 
             success : function(response){ 
              console.log(response); //<--- the server response       

              Ext.define('userList', { 
                extend: 'Ext.data.Model', 
                fields: [{ name: 'id', mapping: 'id' }, 
                  { name: 'name', mapping: 'name' }, 
                  { name: 'firstName' ,mapping:'personalInfo.firstName'}, 
                  { name: 'lastName' ,mapping:'personalInfo.lastName'} 
                  ] 
              }); 

              var store = Ext.create('Ext.data.Store', { 
                model: 'userList', 
                autoLoad: true, 
                proxy: { 
                 type: 'ajax', 
                 url : url+'/lochweb/loch/users/getUser', 
                 reader: { 
                  type: 'json', 
                  root: 'Users' 
                 } 
                } 
              }); 

              var grid = Ext.create('Ext.grid.Panel', { 
                renderTo: "searchUsers", 
                plugins: [rowEditing], 
                width: 900, 
                height: 300, 
                frame: true, 
                title: 'Users', 
                store: store, 
                iconCls: 'icon-user', 
                columns: [{ 
                 text: 'ID', 
                 width: 40, 
                 sortable: true, 
                 dataIndex: 'id' 
                }, 
                { 
                 text: 'Name', 
                 flex: 1, 
                 sortable: true, 
                 dataIndex: 'name', 
                 field: { 
                  xtype: 'textfield' 
                 } 
                }, 
                { 
                 text: 'FirstName', 
                 flex: 1, 
                 sortable: true, 
                 dataIndex: 'firstName', 
                 field: { 
                  xtype: 'textfield' 
                 } 
                }, 
                { 
                 text: 'LastName', 
                 flex: 1, 
                 sortable: true, 
                 dataIndex: 'lastName', 
                 field: { 
                  xtype: 'textfield' 
                 } 
                }] 
               }); 
             } 
            }); 
           } 
          } 
        } 
       ] 

      }); 


      var win = new Ext.Window({ 
       layout:'fit', 
       closable: false, 
       resizable: true, 
       plain: true, 
       border: false, 
       items: [searchUsers] 
      }); 
      win.show(); 
     }); 
  1. 如何適應電網的搜索用戶窗口
  2. 裏面添加一個圖標的網格中,從而通過單擊該圖標從 格的值必須填寫入境表格更新。 enter image description here
+0

嗨,我已編輯帖子請看看它 – user1321824

回答

0
與您的代碼

這裏,我發現了一些:

  • 使用renderTo: "searchUsers"兩個FormPanel中和電網:您添加FormPanel中的窗口,所以這個配置應該不存在(請參考到renderTo文件)。所以刪除它們。
  • 對於FormPanel和Grid都使用frame: true:在那裏你有一個窗口作爲容器,所以Form和Grid已經在framed裏面。所以刪除它們。
  • 您在搜索時動態添加網格:我建議您創建結果網格作爲單獨的組件(不在成功的結果中),並將窗體和網格指定爲窗口的組件。您仍然可以使用hidden配置網格。當Ajax成功時,您可以使用返回的數據填充Grid並顯示它。
  • 「在網格中添加圖標」:您可以在網格的columns中指定一個新列並使用網格面板的renderer配置來顯示該按鈕。例如:

    渲染器:函數(v){ return「< input type ='button'... />」; }

最後,你可以趕上itemclick事件網格的知道,如果單擊單元格的列是包含該按鈕的小區,該條目將被填充到某個地方你想要的。不要忘了指定網格的選擇模型爲cellmodel