Сетка для обновления записей

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. Как Установить сетку внутри Поиск пользователя окна
2. Добавить иконку в сетке, так что при нажатии на эту иконку значения из сетки должны быть заполнены в форме ввода для обновления.

Answer 1

Вот с кодом, я нашел кое-что:

• Использование renderTo: "searchUsers" как для FormPanel и сетки: Вы добавляете FormPanel к окну, так что конфигурация не должно существовать (см до renderTo документ). Поэтому удалите их.
• Используйте frame: true для формы FormPanel и сетки: там у вас есть окно в качестве контейнера, поэтому форма и сетка были framed внутри. Поэтому удалите их.
• Вы динамически добавляете Grid при поиске: Я рекомендую вам создать результат Grid как отдельный компонент (не результат внутреннего успеха) и указать как Form, так и Grid как компоненты окна items. Вы все еще можете настроить сетку с помощью hidden. Когда Ajax успешно, вы можете заполнить Grid возвращаемыми данными и показать их.

• «добавить значок в сетку»: вы можете указать новый столбец в columns сетки и использовать конфигурационную панель сетки renderer, чтобы отобразить кнопку. Например:

  renderer: function (v) { return "< input type = 'button' ... />"; }

Наконец, вы можете поймать itemclick событие сетки, чтобы знать, если столбец щелкнули клетки является клетка, которая содержит кнопку, запись будет заполнен где-то вы хотите. Не забудьте указать модель выбора сетки как cellmodel