extjs의 버튼 클릭 이벤트에서 텍스트 패널 값에 텍스트 필드 값을 추가하는 방법

Question

extjs의 버튼 클릭 이벤트에서 텍스트 필드 값을 격자에 추가하는 방법을 알고 싶습니다.

이

Ext.application({ 
    name: 'app', 
    launch: function() { 
    Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 

     {name: 'name', type: 'string'}, 
     {name: 'dob', type: 'date'}, 
     {name: 'email', type: 'string'}, 
     {name: 'mobile', type: 'string'}, 

    ] 
}); 


var data = { 
    users: [ 
     { 

      name: 'abc', 
      dob: '4/12/2012', 
      email: 'abc@yahoo.com', 
      mobile:'9800000774' 
     }, 
     { 

      name: 'xyz', 
      dob: '4/13/2012', 
      email: 'xyz@yahoo.com', 
      mobile:'9821111774' 
     } 
    ] 
}; 

//note how we set the 'root' in the reader to match the data structure above 
var store = Ext.create('Ext.data.Store', { 
    autoLoad: true, 
    storeId:'dataStore', 
    model: 'User', 
    data : data, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'users' 
     } 
    } 
}); 
Ext.define('MyApp.view.ui.MyWindow', { 
    extend: 'Ext.window.Window', 

    height: 505, 
    width: 462, 
    title: 'My Window', 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'form', 
        height: 270, 
        padding: 5, 
        bodyPadding: 10, 

        title: 'My Form', 
        items: [ 
         { 
          xtype: 'textfield', 
          id: 'txtnm', 
          fieldLabel: 'Name', 
          allowBlank: false, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textareafield', 
          id: 'txtadd', 
          fieldLabel: 'Address', 
          allowBlank: false, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'datefield', 
          id: 'dtDob', 
          fieldLabel: 'DOB', 
          allowBlank: false, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          id: 'txtemail', 
          fieldLabel: 'Email', 
          allowBlank: false, 
          vtype: 'email', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          id: 'txtmob', 
          fieldLabel: 'Mobile no', 
          allowBlank: false, 
          maskRe: /[0-9]/, 
          maxLength: 10, 
          minLength: 10, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          id: 'txtpwd', 
          inputType: 'password', 
          fieldLabel: 'Password', 
          allowBlank: false, 
          anchor: '100%' 
         } 
        ] 
       }, 
       { 
        xtype: 'button', 
        id: 'btnSubmit', 
        margin: '0 0 5 200', 
        text: 'Submit', 
        listeners: 
        { 
         click : function() 
         { 
          alert("hi"); 
          //What to write here to add data of a controls in grid 
         } 
        } 

       }, 

       { 
        xtype: 'gridpanel', 
        height: 174, 
        padding: 5, 
        width: 450, 
        title: 'My Grid Panel', 
        store: Ext.data.StoreManager.lookup('dataStore'), 
        columns: [ 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'name', 
          text: 'Name' 
         }, 
         { 
          xtype: 'datecolumn', 
          dataIndex: 'dob', 
          text: 'DOB' 
         }, 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'email', 
          text: 'Email' 
         }, 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'mobile', 
          text: 'Contact no' 
         }, 

        ], 
        viewConfig: { 

        } 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 
}); 


//  Ext.define('MyApp.MyWindow', { 
//   extend: 'Ext.Window', 
//   title: 'Welcome!', 
//   initComponent: function() { 
//    this.items = [{ 
//     xtype: 'textfield', 
//     name: 'tfName', 
//     fieldLabel: 'Enter your name' 
//    }], this.callParent(arguments); 
//   } 
//  }); 
     var win = Ext.create('MyApp.view.ui.MyWindow'); 
     win.show(); 
    } 
}); 

을 app.js 아래로 나는 형태와 검증 모든 컨트롤을 볼 수 있지만 내가 버튼을 클릭 할 때 내가 그리드 패널에이 데이터를 추가 할 수 없습니다입니다 내 코드입니다

Default.aspx를

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> 

    <script type="text/javascript" src="extjs/ext-debug.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    </form> 
</body> 
</html> 

Answer 1

그리드에 연결된 상점이있다. 네가 옳은 부분이야.

저장소에는 레코드 배열이 있습니다. 이 부분은 당신도 옳았습니다 (나는 적어도 희망합니다).

그리드에 레코드를 추가하려면 저장소에 레코드를 추가해야합니다. 방법을보세요 add()http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-add

양식이 아직 모델에 첨부되어 있지 않으므로 먼저 모델을 만들고 해당 필드를 양식의 값으로 채운 다음 저장소에 추가해야합니다. updateRecord() 메서드 (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-updateRecord) 중 하나를 찾으십시오. 그러나 폼 정의를 모델에 매핑하거나 각 필드에 대해 개별적으로 getValue()을 호출해야합니다.

다음과 같이 시도한 후에도 질문이있는 경우 업데이트 된 코드를 게시하십시오.

마지막으로 한 메모 - ExtJs4.x를 사용하고 있다고 가정했는데 맞습니까?