2014-01-22 5 views
0

전 ext js에서 새롭고 Grid 용 POC를하고 싶습니다. 오라클 데이터베이스에서 데이터를 읽고 편집기 업데이터를 클릭 한 다음 업데이트 된 내용을 가져 와서 편집을 위해 서블릿에 전달해야합니다.extjs Grid에서 편집 된 데이터를 읽을 수 없습니다.

데이터베이스에서 데이터를 렌더링 할 때까지했으나 업데이트 된 데이터를 가져 와서 서블릿에 전달하는 방법을 알지 못한다고 자랑 할 수 없었습니다.

그리드 내 코드를 찾아주세요 -

Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.util.*', 
    'Ext.state.*' 
]); 

// Define Person entity 
// Null out built in convert functions for performance *because the raw data 


    Ext.onReady(function() { 


Ext.QuickTips.init(); 

// setup the state provider, all state information will be saved to a cookie 
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider')); 


    Ext.define('person', { 
       extend: 'Ext.data.Model', 
       fields: [ 


        {name: 'sso', type: 'string'}, 
        {name: 'fname', type: 'string'}, 

        {name: 'lname', type: 'string'}, 
        {name: 'msso', type: 'string'}, 
        {name: 'email_address', type: 'string'}, 
        {name: 'person_status', type: 'string'}      
       ] 
      }); 

var ds = new Ext.data.Store({ 
      model:'person', 
       autoLoad: true, 
      //url:'/FormAction', 
      actionMethods: {create: "POST", read: "POST", update:   "POST", destroy: "POST"}, 
     proxy: { 
      type: 'ajax',  
      url: '/identityiq/FormAction',  
      reader: {  
       type: 'xml', 
       record: 'record' 
       }, 
      }     

      }); 

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { 
       clicksToEdit: 1 
      }); 

    // create the Grid 
var grid = Ext.create('Ext.grid.Panel', { 
    store: ds, 
    columns: [ 
     { 
      text  : 'SSO', 
      width:80, 
      sortable : true, 
      dataIndex: 'sso' 
     }, 
     { 
        id: 'fname', 
        header: 'First Name', 
        dataIndex: 'fname', 
        width:80, 
        flex: 1, 
        field: { 
         allowBlank: false 
        } 
     }, 
     { 

      id: 'lname', 
      header  : 'Last Name', 
      width:80,    
      sortable : true, 
      dataIndex: 'lname', 
      field: { 
         allowBlank: false 
        } 
     }, 
     { 
      text  : 'Manager SSO', 
      width : 80, 
      sortable : true,    
      dataIndex: 'msso' 
     }, 
     { 
      text  : 'Email Address', 
      width : 80, 
      sortable : true,    
      dataIndex: 'email_address' 
     }, 
     { 
      text  : 'Personstatus', 
      width : 35, 
      sortable : true,    
      dataIndex: 'person_status' 
     } 
    ], 
    selModel: { 
     selType: 'cellmodel' 
    }, 
    height: 350, 
    width: 600, 
    title: 'Array Grid', 
    renderTo: 'myDiv', 
    viewConfig: { 
     stripeRows: true, 
     enableTextSelection: true 
    }, 
    frame: true, 
    tbar: [ 
{ 
    text: 'Save', 


    handler: function() 
    { 
     // myGrid is a reference to your Ext.grid.Panel instance 
     if (grid.editingPlugin.editing) { 


      var value = grid.editingPlugin.getActiveEditor().field.value; 

      alert('Value: ' + value); 
     } 
    } 
} 
], 
    plugins: [cellEditing] 
}); 
}); 

- 형식 오류 있음이 코드에서 내가 점점 오전 오류 : grid.editingPlugin.getActiveEditor (...)이 널 (null)

요청을하는이 내가 붙어있어이 POC를 제시해야하므로이 질문에 답하십시오.

handler: function() 
    { 
     alert(ds.getModifiedRecords()); 
     console.log(ds.getModifiedRecords()); 

     var modified_data ={}; 
     modified_data = ds.getModifiedRecords(); 

     for (var i = 0; i < modified_data.length; i++) { 
    var record =   modified_data[i];     
       alert(record.data.fname); 
     } 
    } 

답변

0

Save 단추 처리기의 문제는 셀의 활성 편집기를 가져 오는 중입니다. 셀 편집기는 포커스를 잃으면 자동으로 제거됩니다. grid.editingPlugin.getActiveEditor() return null.

// Simply use your store method for fetching modified records 
console.log(ds.getModifiedRecords()); 
:

좋은 일이이 작업을 수행 할 필요가 없다는 것입니다, Ext.grid.plugin.CellEditing 자동 그래서 당신은 당신의 Save 단추 처리기 내부의 모든 수정을 얻기 위해 할 일은 이것이다, 당신을 위해 적절한 저장 기록을 갱신

세포가 편집 된 후 무언가를해야한다면 Ext.grid.plugin.CellEditing edit event을 확인해야합니다.

+0

고마워 그것은 작동합니다. 하지만 다시 한 가지 질문 만하십시오. 단일 레코드 각각에 대해 ajax 요청을 피하기 위해 수정 된 레코드 배열을 처리 서블릿에 전달할 수 있습니까? 코드 스 니펫을 얻으면 괜찮을 것입니다. 다시 한번 감사드립니다. 위 코드를 업데이트하여 다른 사람들에게 유용 할 수 있도록하겠습니다. – user3224915

+0

@ user3224915 귀하의 질문을 바로 이해한다면 [Ext.JSON.encode] (http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.JSON- 메소드 - 인코딩) 메소드. 필요한 수정 된 데이터 배열을 인코딩하고,이를 매개 변수로 ajax 요청에 전달하고 서버 측에서 얻은 내용을 디코딩합니다. – sbgoran

+0

@ user3224915 어쩌면 [MVC Architecture] (http://docs.sencha.com/extjs/4.2.2/#!/guide/application_architecture) 문서 페이지도 읽어야합니다. '서버에 저장'섹션에 특히주의하십시오. – sbgoran

0

데이터를 얻을 그리드의 selectionModel의를 사용해보십시오,

같은 - 내가 저장 처리기를 대체 할 경우

감사합니다, 애쉬 위니 코드를 다음 아래의 대답으로 당

는 잘 작동

var valueList = grid.getSelectionModel().getSelection(); //Returns an array of the currently selected records. 
var value = valueList[0].data.fname; //Should get First Name 
+0

감사합니다. 괜찮습니다. 하지만 다시 한 번 질문을 드리겠습니다. 단일 레코드 각각에 대해 ajax 요청을 피하기 위해 수정 된 레코드 배열을 처리 서블릿에 전달할 수 있습니까? 코드 스 니펫을 얻으면 괜찮을 것입니다. 다시 한번 감사드립니다. 위 코드를 업데이트하여 다른 사람들에게 유용 할 수 있도록하겠습니다. – user3224915