使用Extjs表单提交所有网格行 [英] Submit all of grid rows with Extjs form submit
本文介绍了使用Extjs表单提交所有网格行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
模型：
Ext.define（'FM.model.DefineCode'，{
extends：'Ext.data.Model'，
fields ：[
{name：'id'，type：'int'}，
{name：'name'，type：'string'}，
{name：'filename'，type ：'string'}
]，
验证：[
{type：'presence'，field：'id'}，
{type：'presence'，field：' name'}，
{type：'presence'，field：'filename'}
]
}）;
商店：
code> Ext.define（'FM.store.DefineCode'，{
extends：'Ext.data.Store'，
model：'FM.model.DefineCode'，
autoLoad：true，
data：[]
}）;
查看：
code> Ext.define（'FM.view.map.DefineCode'，{
extends：'Ext.window.Window'，
title：'Define Code'，
alias ：'widget.mmDefineCode'，
width：600，
modal：true，
items：[{
xtype：'form'，
items：[{
xtype：'gridpanel'，
title：'myGrid'，
store：'DefineCode'，
columns：[
{
text：'Id' ，
xtype：'rownumberer'，
width：20
}，{
text：'Name'，
dataIndex：'name'，
flex ：1，
编辑器：{
xtype：'textfield'
}
}，{
文本：'文件'，
dataIndex：'filename'，
width：200，
编辑器：{
xtype：'filefield'，
emptyText：'选择你的图标'，
名称：照片路径'，
buttonText：''，
flex：1，
buttonConfig：{
iconCls：'icon-upload-18x18'
}，
listeners：{
change：function（e，ee，eee）{
var grid = this.up（'grid'）;
var store = grid.getStore（）;
var newStore = Ext.create（'FM.store.DefineCode'，{}）;
store.insert（store.data.items.length，newStore）;
}
}
}，
}，{
text：''，
width：40
}
]
height：200，
width：600，
plugins：[
Ext.create（'Ext.grid.plugin.CellEditing'，{
clicksToEdit：1
}）
]}
]，
}]，
按钮：[{text：'OK'，action：'OK'}]，
initComponent：function（）{
var me = this;
Ext.apply（me，{}）;
me.callParent（arguments）;
}
}）;
控制器：
code> ...
form.submit（{
url：'icon / create'，
}）;
当我提交表单时，只有最后一行发送到服务器。
哪里有问题？
解决方案
为什么要使用这个？
var newStore = Ext.create（'FM.store.Path'，{}）;
store.insert（store.data.items.length，newStore）;
尝试使用rowEditing编辑/提交1行数据：
var rowEditing = Ext.create（'Ext.grid.plugin.RowEditing'，{
clicksToEdit：2，
clicksToMoveEditor：1，
listeners：{
'validateedit'：function（editor，e）{}，
'afteredit'：function（editor，e）{
var me = this;
var jsonData = Ext.encode（e.record.data）;
Ext.Ajax.request（{
method：'POST'，
url：'your_url / save'，
params：{data：jsonData}，
success：function（response）{
e.store.reload（{
callback：function（）{
var newRecordIndex = e。 store.findBy（
function（record，filename）{
if（record.get（'filename'）=== e.record.data.filename）{
return true;
}
return false;
}
）;
me.grid.getSelectionModel（）。select（newRecordIndex）;
}
}）;
}
}）;
返回true;
}
}
}）;
并将其放置到您的插件。
我不尝试它，但可能这将有助于您。
这是为您的控制器添加一个记录从您的网格，您需要一个按钮来触发此功能。
createRecord：function（）{
var model = Ext.ModelMgr .getModel（ 'FM.model.DefineCode'）;
var r = Ext.ModelManager.create（{
id：''，
name：''，
filename：''
}，model）;
this.getYourgrid（）。getStore（）。insert（0，r）;
this.getYourgrid（）。rowEditing.startEdit（0，0）;
}
检查这个为您的需要，这看起来像。您需要指定内容类型。
为了您的java需要，请阅读这个方法来上传文件。
I have a grid panel in a form. Any row of the grid panel have a filefield. I want to send any row (name field and filename field) to server.
Model:
Ext.define('FM.model.DefineCode', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'filename', type: 'string'}
],
validations: [
{type: 'presence', field: 'id'},
{type: 'presence', field: 'name'},
{type: 'presence', field: 'filename'}
]
});
Store:
Ext.define('FM.store.DefineCode', {
extend: 'Ext.data.Store',
model: 'FM.model.DefineCode',
autoLoad: true,
data: []
});
View:
Ext.define('FM.view.map.DefineCode', {
extend: 'Ext.window.Window',
title: 'Define Code',
alias: 'widget.mmDefineCode',
width: 600,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'gridpanel',
title: 'myGrid',
store: 'DefineCode',
columns: [
{
text: 'Id',
xtype: 'rownumberer',
width: 20
}, {
text: 'Name',
dataIndex: 'name',
flex: 1,
editor:{
xtype: 'textfield'
}
}, {
text: 'File',
dataIndex: 'filename',
width: 200,
editor:{
xtype: 'filefield',
emptyText: 'Select your Icon',
name: 'photo-path',
buttonText: '',
flex: 1,
buttonConfig: {
iconCls: 'icon-upload-18x18'
},
listeners: {
change: function(e, ee, eee) {
var grid = this.up('grid');
var store = grid.getStore();
var newStore = Ext.create('FM.store.DefineCode',{});
store.insert(store.data.items.length, newStore);
}
}
},
}, {
text: '',
width: 40
}
],
height: 200,
width: 600,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]}
],
}],
buttons: [{text: 'OK', action: 'OK'}],
initComponent: function() {
var me = this;
Ext.apply(me, {});
me.callParent(arguments);
}
});
Controller:
...
form.submit({
url: 'icon/create',
});
When I submit form, only last row is sending to server. Where is problem?
解决方案
Why you using this ?
var newStore = Ext.create('FM.store.Path', {});
store.insert(store.data.items.length, newStore);
try using rowEditing to edit/submit 1 row data :
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 1,
listeners: {
'validateedit': function(editor, e) {},
'afteredit': function(editor, e) {
var me = this;
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: 'your_url/save',
params: {data: jsonData},
success: function(response){
e.store.reload({
callback: function(){
var newRecordIndex = e.store.findBy(
function(record, filename) {
if (record.get('filename') === e.record.data.filename) {
return true;
}
return false;
}
);
me.grid.getSelectionModel().select(newRecordIndex);
}
});
}
});
return true;
}
}
});
and place it to your plugin. I don't try it first, but may be this will help you a little.
AND this is for your controller to add a record from your grid, you need a button to trigger this function.
createRecord: function() {
var model = Ext.ModelMgr.getModel('FM.model.DefineCode');
var r = Ext.ModelManager.create({
id: '',
name: '',
filename: ''
}, model);
this.getYourgrid().getStore().insert(0, r);
this.getYourgrid().rowEditing.startEdit(0, 0);
}
check this for your need, this is look a like. You need to specify the content-type.
And for your java need, please read this method to upload a file.
这篇关于使用Extjs表单提交所有网格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
