我想知道如何在extjs中的按钮点击事件中将textfields值添加到网格中。 我可以看到表单和所有带有验证的控件,但是当我点击按钮时,我无法将此数据添加到网格面板 我的代码如下
app.js
Ext.application({
name: 'app',
launch: function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'dob', type: 'date'},
{name: 'email', type: 'string'},
{name: 'mobile', type: 'string'},
]
});
var data = {
users: [
{
name: 'abc',
dob: '4/12/2012',
email: 'abc@yahoo.com',
mobile:'9800000774'
},
{
name: 'xyz',
dob: '4/13/2012',
email: 'xyz@yahoo.com',
mobile:'9821111774'
}
]
};
//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId:'dataStore',
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.define('MyApp.view.ui.MyWindow', {
extend: 'Ext.window.Window',
height: 505,
width: 462,
title: 'My Window',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
height: 270,
padding: 5,
bodyPadding: 10,
title: 'My Form',
items: [
{
xtype: 'textfield',
id: 'txtnm',
fieldLabel: 'Name',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'textareafield',
id: 'txtadd',
fieldLabel: 'Address',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'datefield',
id: 'dtDob',
fieldLabel: 'DOB',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'textfield',
id: 'txtemail',
fieldLabel: 'Email',
allowBlank: false,
vtype: 'email',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'txtmob',
fieldLabel: 'Mobile no',
allowBlank: false,
maskRe: /[0-9]/,
maxLength: 10,
minLength: 10,
anchor: '100%'
},
{
xtype: 'textfield',
id: 'txtpwd',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false,
anchor: '100%'
}
]
},
{
xtype: 'button',
id: 'btnSubmit',
margin: '0 0 5 200',
text: 'Submit',
listeners:
{
click : function()
{
alert("hi");
//What to write here to add data of a controls in grid
}
}
},
{
xtype: 'gridpanel',
height: 174,
padding: 5,
width: 450,
title: 'My Grid Panel',
store: Ext.data.StoreManager.lookup('dataStore'),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'datecolumn',
dataIndex: 'dob',
text: 'DOB'
},
{
xtype: 'gridcolumn',
dataIndex: 'email',
text: 'Email'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobile',
text: 'Contact no'
},
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
// Ext.define('MyApp.MyWindow', {
// extend: 'Ext.Window',
// title: 'Welcome!',
// initComponent: function () {
// this.items = [{
// xtype: 'textfield',
// name: 'tfName',
// fieldLabel: 'Enter your name'
// }], this.callParent(arguments);
// }
// });
var win = Ext.create('MyApp.view.ui.MyWindow');
win.show();
}
});
Default.aspx的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
答案 0 :(得分:0)
网格附有商店。这部分你说得对。
商店有一系列记录。这一部分你也是对的(我希望至少)。
如果要将记录添加到网格中,则需要将记录添加到商店。查看方法add()
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-add
您的表单尚未附加到模型,因此您可能必须先创建模型,使用表单中的值填充其字段,然后将其添加到商店。查看updateRecord()
方法 - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-updateRecord - 但是您需要更改表单定义以将其映射到模型或每个字段的单个getValue()
调用。
尝试这样的事情后 - 如果您仍有疑问,请发布更新的代码。
最后一个注意事项 - 我假设您正在使用ExtJs4.x是正确的吗?