[英]Extjs GRID and form
I have a very simple extjs grid. 我有一个非常简单的extjs网格。 (Extjs 5.1.1) My problem: If I would like a simple form when I double click one of the rows. (Extjs 5.1.1)我的问题:如果我想要一个简单的表格,当我双击其中的一行。 But I don't know how. 但是我不知道如何。 And If I modify one of the fields than the background running the update. 并且如果我修改的字段之一比后台运行更新的要多。 ( http://users/update ) The form send JSON data to the backend. ( http:// users / update )表单将JSON数据发送到后端。
My code this: (Read is OK) 我的代码如下:(可以阅读)
var Users = {
init: function() {
itemdblclick: this.editDocument
},
edit: function(grid, roWindex, e) {
var id = grid.getStore().getAt(rowIndex);
Users.openEditForm(id);
},
openEditForm: function(id) {
// form open
}
};
Users.init();
Ext.application({
name: 'Users',
launch: function() {
Ext.widget({
renderTo: Ext.getBody(),
xtype: 'grid',
title: 'Users',
height: 800,
store: {
fields: ['login_id',
'login_name',
'login_firstname',
'login_middlename',
'login_lastname',
'login_email',
'login_mobile',
'login_status'
],
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'http://users/select',
create: 'http://users/insert',
update: 'http://users/update',
destroy: 'http://users/delete'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: false,
root: 'data'
}
}
},
columns: {
items: [{
text: 'ID',
dataIndex: 'login_id',
editor: 'textfield',
width: 200
}, {
text: 'Login Name',
dataIndex: 'login_name',
editor: 'textfield',
width: 200
}, {
text: 'Firstname',
dataIndex: 'login_firstname',
editor: 'textfield',
width: 200
}, {
text: 'Middlename',
dataIndex: 'login_middlename',
editor: 'textfield',
width: 200
}, {
text: 'Lastname',
dataIndex: 'login_lastname',
editor: 'textfield',
width: 200
}, {
text: 'Email',
dataIndex: 'login_email',
editor: 'textfield',
width: 200
}, {
text: 'Mobile',
dataIndex: 'login_mobile',
editor: 'textfield',
width: 200
}, {
text: 'Status',
dataIndex: 'login_status',
editor: 'textfield',
width: 200
}]
},
listeners: {
itemdblclick: function(dv, record, item, index, e) {
// This is row index
alert(index);
}
}
})
}
});
Use Ext.grid.plugin.RowEditing plugin. 使用Ext.grid.plugin.RowEditing插件。 See this example how. 如何看这个例子 。
There are several ways to do this. 有几种方法可以做到这一点。
Try this one: 试试这个:
Ext.define('App.view.Window', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
closable: false,
title: 'myWindow',
height: 600,
width: 800,
frame: false,
maximizable: true,
autoScroll: true,
minHeight: 200,
modal: true,
closeAction: 'hide',
buttons: [{
text: 'Close',
handler: function(button, e, options) {
button.up('mywindow').close()
}
}]
});
listeners: {
itemdblclick: function(grid, record, item, index, e, eOpts) {
Ext.widget('mywindow').show();
}
}
The solution is simple. 解决方案很简单。 I wrote a function: 我写了一个函数:
openWindow = function(record) {
var panel = new Ext.form.Panel( {
renderTo: document.body,
title: 'Users',
height: 400,
width: 400,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'Login',
name: 'login_name',
value: record.data.login_name
},
{
fieldLabel: 'Firstname',
name: 'login_firstname',
value: record.data.login_firstname
}
]
});
var window = new Ext.Window({
id : 'window',
height : 400,
width : 400,
items : [panel]
});
window.show();
}
And my listeners: 我的听众:
listeners: {
celldblclick: function(table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
openWindow(record);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.