Extjs4 用于更新条目的网格
我执行了以下代码来列出网格中搜索的项目Extjs4 用于更新条目的网格,extjs4,Extjs4,我执行了以下代码来列出网格中搜索的项目 Ext.onReady(function(){ var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); var searchUsers = new Ext.FormPanel({ renderTo: "searchUsers", frame: true,
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 500,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
}],
buttons:[
{
text:'Search',
formBind: true,
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
console.log(response); //<--- the server response
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: "searchUsers",
plugins: [rowEditing],
width: 900,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
}]
});
}
});
}
}
}
]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
如何在搜索用户窗口中调整网格
在网格中添加一个图标,以便通过单击该图标可以从
必须将网格填充到条目表单以进行更新。
在您的代码中,我发现了一些东西: 对FormPanel和网格使用renderTo:searchUsers:将FormPanel添加到窗口中,因此此配置不应存在。请参阅renderTo文档。所以把它们去掉。 对FormPanel和网格都使用frame:true:在这里,窗口作为容器,因此窗体和网格已在内部设置框架。所以把它们去掉。 您可以在搜索时动态添加网格:我建议您将结果网格作为单独的组件创建,而不是在success的结果中,并将表单和网格指定为窗口项的组件。您仍然可以使用hidden配置网格。当Ajax成功时,您可以用返回的数据填充网格并显示它。 在网格中添加图标:您可以在网格的列中指定一个新列,并使用网格面板的渲染器配置来显示按钮。例如: 渲染器:functionv{ 回来 }
最后,您可以捕获网格的itemclick事件,以了解单击的单元格的列是否是包含按钮的单元格,条目将填充到您想要的位置。别忘了将网格的选择模型指定为cellmodel嗨,我已经编辑了帖子,请查看一下