一个简单的grid 传form 传值,用了click事件,其实用select事件更优雅一点。
Ext.onReady(function () {
var data = [
['rowen', 'hohai', 'basketball', '2004-11-01'],
['yyy', 'yizhong', 'football', '2004-01-11'],
['ysc', 'jianzhong', 'pingpong', '2004-01-21'],
['yww', 'jianxiao', 'pingpong', '2004-01-31']];
var reader = new Ext.data.ArrayReader({},
[{
name: 'name'
},
{
name: 'school'
},
{
name: 'sport'
},
{
name: 'year',
type: 'date',
dateFormat: 'Y-m-d'
},
{
name: 'desc'
}]);
var store = new Ext.data.Store({
data: data,
reader: reader,
sortInfo: {
field: 'name',
direction: 'desc'
}
});
var cm = new Ext.grid.ColumnModel([{
header: '姓名',
sortable: true,
width: 160,
dataIndex: 'name'
},
{
header: '入学年份',
sortable: true,
width: 160,
dataIndex: 'school',
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
header: '运动爱好',
sortable: true,
width: 160,
dataIndex: 'sport'
},
{
header: '入学年份',
sortable: true,
width: 160,
dataIndex: 'year',
renderer: Ext.util.Format.dateRenderer('Y-m-d')
}]);
grid = new Ext.grid.GridPanel({
title: 'groupGrid',
store: store,
cm: cm,
width: 600,
height: 200,
frame: true,
//draggable :true,
enableDragDrop: true,
viewConfig: {
forceFit: true
},
//animCollapse:true,
collapsible: true,
// inline toolbars
tbar: [{
text: 'Add Something',
tooltip: 'Add a new row',
iconCls: 'add',
handler: function () {
alert("Add Something");
}
},
'|', {
text: 'Options',
tooltip: 'Blah blah blah blaht',
iconCls: 'option'
},
'|', {
text: 'Remove Something',
tooltip: 'Remove the selected item',
iconCls: 'remove'
}]
});
var form = new Ext.FormPanel({
autoWidth: true,
bodyStyle: 'padding:5px 5px 0',
frame: true,
height: 400,
labelAlign: 'right',
labelWidth: 80,
title: 'form',
width: '120',
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: 0.50,
layout: 'form',
border: false,
items: [{
tabIndex: 1,
anchor: '100%',
fieldLabel: '姓名',
name: 'name',
xtype: 'textfield'
}]
},
{
columnWidth: 0.50,
layout: 'form',
border: false,
items: [{
tabIndex: 12,
anchor: '100%',
fieldLabel: '学校',
name: 'school',
xtype: 'textfield'
}]
},
{
columnWidth: 0.50,
layout: 'form',
border: false,
items: [{
tabIndex: 13,
anchor: '100%',
fieldLabel: '运动爱好',
name: 'sport',
xtype: 'textfield'
}]
},
{
columnWidth: 0.50,
layout: 'form',
border: false,
items: [{
tabIndex: 13,
anchor: '100%',
fieldLabel: '入学年份',
name: 'year',
format: 'Y-m-d',
xtype: 'datefield'
}]
}]
}]
});
var win = new Ext.Window({
title: 'je test',
height: 500,
renderTo: document.body,
width: 600,
items: [grid, form]
});
win.show();
grid.on('click', function () {
var record = grid.getSelectionModel().getSelected()
form.getForm().findField('name').setValue(record.get('name'));
form.getForm().findField('school').setValue(record.get('school'));
form.getForm().findField('sport').setValue(record.get('sport'));
form.getForm().findField('year').setValue(record.get('year'));
});
});
分享到:
相关推荐
ExtJs中表单formPanel的横向布局
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
extjs grid 多表头 插件 extjs grid 多表头 插件
Extjs4 表单从数据库读取数据映射到对应的字段中显示
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1
ExtJs 4.0 Grid 单元格合并控件封装
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
自己写的一个Extjs Grid2Grid拖拽
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
Extjs动态Grid的生成 htm
EXTJS Grid布局总结例子,含源代码。