更新エントリのグリッド

Question

グリッド内の検索されたアイテムを一覧表示するために、次のコードを実行しました。 検索ユーザーウィンドウ

内のグリッドに合わせてどのように

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. そのアイコンをクリックすることで グリッドからの値が入力フォームに移入する必要があるように、グリッド内のアイコンを追加します。更新のために。あなたのコードでここ

Answer 1

、私が見つけた何か：

• FormPanelとグリッドの両方のために使用renderTo: "searchUsers"：あなたがウィンドウにFormPanelを追加するので、この設定が存在してはならない（参照してください〜renderTo文書）。だから、それらを取り除く。
• FormPanelとGridの両方にframe: trueを使用してください。コンテナとしてのウィンドウがあるので、フォームとグリッドはframedです。だから、それらを取り除く。
• 検索でグリッドを動的に追加する：成功の結果ではなく別のコンポーネントとして結果グリッドを作成し、フォームとグリッドの両方をウィンドウのitems 'コンポーネントとして指定することをお勧めします。あなたはまだhiddenでグリッドを設定することができます。 Ajaxが成功すると、返されたデータをGridに入力して表示できます。

• 「グリッドにアイコンを追加」：あなたはグリッドのcolumnsに新しい列を指定し、ボタンを表示するには、グリッドパネルのrenderer設定を使用することができます。たとえば、

  レンダラー：function（v）{ return "< input type = 'button' ... />"; }

最後に、あなたがクリックされたセルの列がボタンを含むセルであるかどうかを知るために、グリッドのitemclickイベントをキャッチすることができ、エントリーはあなたが欲しいどこかに取り込まれます。グリッドのセレクションモデルを指定することを忘れないでくださいcellmodel