전 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);
}
}
고마워 그것은 작동합니다. 하지만 다시 한 가지 질문 만하십시오. 단일 레코드 각각에 대해 ajax 요청을 피하기 위해 수정 된 레코드 배열을 처리 서블릿에 전달할 수 있습니까? 코드 스 니펫을 얻으면 괜찮을 것입니다. 다시 한번 감사드립니다. 위 코드를 업데이트하여 다른 사람들에게 유용 할 수 있도록하겠습니다. – user3224915
@ user3224915 귀하의 질문을 바로 이해한다면 [Ext.JSON.encode] (http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.JSON- 메소드 - 인코딩) 메소드. 필요한 수정 된 데이터 배열을 인코딩하고,이를 매개 변수로 ajax 요청에 전달하고 서버 측에서 얻은 내용을 디코딩합니다. – sbgoran
@ user3224915 어쩌면 [MVC Architecture] (http://docs.sencha.com/extjs/4.2.2/#!/guide/application_architecture) 문서 페이지도 읽어야합니다. '서버에 저장'섹션에 특히주의하십시오. – sbgoran