ExtJS-3,Ext.grid.GridPanel,多行复选框:如何一次提交所有选中的项目
ExtJS-3, Ext.grid.GridPanel, muti-row checkboxes: how do I submit all checked items at once?
我使用的是ExtJS3,我有一个Ext.grid.GridPanel,每行左侧都有一个复选框。顶部有两个按钮:"刷新"answers"提交"。我希望能够选择多行,并在单击提交按钮时提交所有行。现在,当我选择多行并点击提交时,它将提交第一行,然后从网格中删除该项目,我必须再次点击提交(以前选中的行仍然被选中)。
如何更改以下代码以使提交按钮一次发送所有行?
var dataStore = new Ext.data.SimpleStore({ fields: [
{name: 'node'},
{name: 'ip'},
{name: 'groups'}
]});
var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
var dataGrid = new Ext.grid.GridPanel ({
renderTo: document.body,
clickstoEdit: 2,
selModel : checkBoxSelMod,
xtype: 'grid',
layout: 'fit',
sm: new Ext.grid.CheckboxSelectionModel(),
tbar: [
{
text: 'Refresh',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_refresh.png',
cls: 'x-btn-text-icon',
handler: function() {
window.location = '$nroot/index.php/imaging/index';},
scope: this,
},
{
text: 'Submit Machine(s)',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = dataGrid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+sel.data.node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: sel.data.node,
mgmtip: sel.data.ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}
}
}
],
store: dataStore,
columns: [
checkBoxSelMod,
{ id: 'node', header: "Node", width: 150, sortable: true, dataIndex: 'node'},
{ id: 'ip', header: "IP", width: 120, sortable: false, dataIndex: 'ip'},
{ id: 'groups', header: "Groups", width: 100, sortable: true, dataIndex: 'groups'},
],
stripeRows: true,
autoExpandColumn: 'node',
listeners: {
render: function(){ this.store.loadData(dataList); }
}
})});
当我将代码从getSelected更改为getSelections时,它会在页面加载时返回以下内容:
item type is invalid for AcceptItem action
我找不到任何显示提交GridPanels多选的例子。有我可以参考的吗?
EDIT,基于下面的解决方案,我修改了代码,使其工作如下:
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
Ext.each(sels, function(sel) {
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
node: sel.get('node'),
mgmtip: sel.get('ip')
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
})
}
}
});
}
}
最简单的方法是循环浏览所选记录,并为每条记录询问一个问题。
var sels = sm.getSelections();
Ext.each(sels, function(sel) {
var node = sel.get('node'),
ip = sel.get('ip');
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: node,
mgmtip: ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
});
然而,对于用户来说,为DataGrid中选择的每一行都得到提示可能并不好。但是,如果您的服务('$nroot/index.php/imageing/image/')支持发布多个项目,您可以向用户询问一次并发布所有项目。即
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
nodes: nodes,
mgmtips: ips
},
success: function(resp,opt) {
Ext.each(sels, function() { dataGrid.getStore().remove(this) });
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}
相关文章:
- Netsuite Suitelet:在不达到治理限制的情况下,遍历事务行项目的列表加载和提交记录
- 如何在每次在 php 中单击提交时逐个显示数据库中的项目
- 选择在Javascript中提交时分配的项目类
- 编辑我在表单字段中提交的项目
- 提交带有已使用jQuery移动的列表框项目的隐藏字段
- 在提交表格时计算所有动态项目的总数,包括复制的项目
- 根据条件在 JQuery 表单插件中提交回调之前删除项目
- 如何提交选中的复选框项目
- 如何存储JQuery提交的变量,并在Python/Django项目的后期重用它
- 在ngAutocomplete(Angular)中选择项目时自动提交表单
- ExtJS-3,Ext.grid.GridPanel,多行复选框:如何一次提交所有选中的项目
- 自动完成提交表单上的选择项目,按钮点击和/或输入
- 如何防止从项目外部提交表单
- 从多个下拉列表中选择项目后提交表单- JavaScript
- 试图使嵌入在表单中的表中的每一行可单击,以使项目按设计工作(没有提交按钮)
- 获取项目的当前提交并显示它
- 使用WebStorm将AngularJS种子项目提交到GIT时有警告
- 防止在将项目提交到购物车时重新加载页面
- 点击下拉列表中的项目自动完成提交表单
- 使用vscode时,是否应该提交es6项目的打字员文件夹