展现样式如下:
[img]http://dl.iteye.com/upload/attachment/477817/54991c49-5b19-34dc-b34f-687a3b28d7f0.jpg[/img]
[color=red]现在要做的是界面原型,没有后台数据交互。
请问我怎么能做到把formPanel的数据提交的gridPanel中[/color]
写了一个demo 看一下吧
Ext.onReady(function(){
var data = [];
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'name'},
{name:'age'}
])
})
var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false})
var cm = new Ext.grid.ColumnModel([sm,{
header:'Name',
dataIndex:'name'
},{
header:'Age',
dataIndex:'age'
}])
var gridPanel = new Ext.grid.GridPanel({
region:'center',
title:'GridPanel',
sm:sm,
cm:cm,
ds:store,
stripeRows:true
})
var view = new Ext.Viewport({
layout:'border',
border:false,
items:[
new Ext.form.FormPanel({
region:'west',
margins:'5 5 5 5',
padding:5,
width:200,
title:'FormPanel',
labelWidth:50,
buttonAlign:'center',
buttons:[{
text:'Save',
handler:function(){
//关键代码
var Person = new Ext.data.Record.create([{
name:'name',
name:'age'
}]);
var person = new Person({
name:Ext.getCmp("personName").getValue(),
age:Ext.getCmp("personAge").getValue()
});
gridPanel.getStore().add(person);
}
}],
items:[{
xtype:'textfield',
fieldLabel:'name',
id:'personName',
name:'name'
},{
xtype:'textfield',
fieldLabel:'age',
id:'personAge',
name:'age'
}]
}),gridPanel
]
})
})
已经测试过的 可以添加
将from表单内的数据添加到store中 就可以在gridPanel中显示了
GRIDPANEL的数据都是放到STORE里的,只要对STORE进行操作就可以了
STORE有添加数据 的方法
Ext.grid.GridPanel取得store:getStore()
Ext.data.Store的ADD方法
add( Ext.data.Record[] records )
把FORM里的值GETVALUES后,NEW 出一个RECORD,再往STORE里添加就可以了