Как загрузить данные json в поля просмотра в extjs4

Question

Я работаю в extjs4. У меня есть мнение, как-

Ext.define('Balaee.view.qb.qbquestion.editWindow', 
    {extend:'Ext.form.Panel', 
    alias:'widget.editWindow', 
    autoScroll:true, 
    store:'qb.qbquestioncategoryStore', 
    bodyStyle: 'padding: 20px', 
    title: '<\center>Update-Question', 
    items:[ 
      { 
       xtype:'form', 
       items:[{xtype:'hidden', 
         name:'questionId' 
        }, 
        {border:false, 
         layout: 'hbox', 
         margin:'10 0 0 50', 
         items:[ 
        { 
         margin:'5 0 5 50', 
         xtype:'textfield', 
         fieldLabel: 'Question', 
         name: 'question', 
         width:350, 
         emptyText: 'Enter the Question' 
        }, 
        { margin:'5 0 5 10', 
         xtype: 'button', 
         id:'btn5', 
         //scale:'medium', 
         width:50, 
         //name: 'add', 
         text:' Delete ', 
         action:'delete'         
        }] 
        }, 

        { 
         margin:'0 0 5 100', 
         xtype:'textfield', 
         fieldLabel: 'Keyword', 
         name: 'keyword', 
         width:350, 
         emptyText: 'Enter the related word' 
        }, 
        { margin:'0 0 5 100', 
         xtype:'combo', 
         fieldLabel: 'Language', 
         width:250, 
         store:'qb.languageStore', 
         name: 'language', 
         //queryMode:'remote', 
         displayField:'language', 
         valueField:'languageId', 
         emptyText: '---Select---' 
        }, 
        { 
         margin:'0 0 5 50', 
         xtype:'combo', 
         id:'combo1', 
         fieldLabel: 'Elementary', 
         name: 'Elementary', 
         width:250, 
         store:'qb.qbcomplexityStore', 
         //queryMode:'low', 
         displayField:'complexityl', 
         valueField:'complexityId', 
         emptyText: '---Select---' 
        }, 
        { margin:'0 0 5 50', 
         xtype:'combo', 
         id:'combo2', 
         fieldLabel: 'Intermediate', 
         name: 'Intermediate', 
         width:250, 
         store:'qb.qbcomplexityStore', 
         //queryMode:'low', 
         displayField:'complexityl', 
         valueField:'complexityId', 
         emptyText: '---Select---'         
        }, 
        { margin:'0 0 5 50', 
         xtype:'combo', 
         id:'combo3', 
         fieldLabel: 'Expert', 
         name: 'Expert', 
         width:250, 
         store:'qb.qbcomplexityStore', 
         //queryMode:'low', 
         displayField:'complexityl', 
         valueField:'complexityId', 
         emptyText: '---Select---' 
        }, 
        { 
         margin:'0 0 5 100', 
         xtype:'textfield', 
         fieldLabel: 'Option', 
         name: 'option', 
         width:350, 
         emptyText: 'Enter the option', 
         id:'opts' 
        }, 
        { 
         border:false, 
         layout: 'hbox', 
         margin:'7 0 5 100', 
         items:[ { //margin:'0 0 0 15', 
            xtype: 'checkbox', 
            fieldLabel: 'isAnswer', 
            name: 'isAnswer', 
            id:'anss1' 
           }, 
           { 
            margin:'0 0 0 10', 
            xtype: 'button', 
            id:'btn3', 
            //scale:'medium', 
            width:50, 
            //name: 'add', 
            text:' Add ', 
            action:'add'          
           } ] }, 
        { 
         margin:'10 0 5 100', 
         xtype:'grid', 
         id:'grid1', 
         //title : 'Educational Details', 
         store:'qb.qbquestionoptionStore', 
         columns: [ 
           { 
            text: 'Options', 
            dataIndex: 'option', 
            flex: 1 
           }, 
           { 
            text: 'Answer', 
            dataIndex: 'isAnswer', 
            flex: 2.5 
           } 
         ], 
         height: 100, 
         width: 350 
        }, 
        { 
         margin:'0 0 5 200', 
         xtype: 'button', 
         id:'btn4', 
         //scale:'medium', 
         width:50, 
         //name: 'add', 
         text:' Update ', 
         action:'update' }]}}); 

У меня есть данные JSON со стороны сервера как-

{"data":[{"questionId":"29","question":"WRHEdsgdRHW","Elementary":"Low","Intermediate":"Low","Expert":"Low","keyword":"WFHRF","language":"english","Category":[{"category":"Main","id":"1"},{"category":"GK","id":"2"}],"optionarray":[{"option":"dfbsddfb"},{"option":"sdfgsd"},{"option":"sdgsd"}]}]} 

я хочу, чтобы загрузить эти данные в качестве вхождением по умолчанию в полях выше зрения во время обновления functionality.So как загрузить эти данные? Как связать optionarray [] json с сеткой с идентификатором «grid1»?

Answer 1

Создайте Model для своей формы, соответствующей вашим полям. А затем использовать loadRecord:

loadRecord: загружает Ext.data.Model в эту форму (внутренне просто вызывает Ext.form.Basic.loadRecord) Смотрите также trackResetOnLoad.

Это свяжет вашу модель с формой, в дальнейшем вы можете использовать updateRecord для изменения новых данных в поля формы. Вот How to формы использования и привязка модели.