extjs6.0点击grid一行数据显示在一端的form中
2016-09-02 13:28
417 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="ext/css/font-awesome.css"> <link rel="stylesheet" href="theme-neptune/resources/theme-neptune-all_1.css" /> <link rel="stylesheet" href="theme-neptune/resources/theme-neptune-all_1.css" /> <script type="text/javascript" src="ext/ext-bootstrap.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="ext/build/ext-all-debug.js"></script> <script type="text/javascript" src="ext/locale-zh_CN.js"></script> </head> <body> <script type="text/javascript"> var store = Ext.create('Ext.data.Store', { autoLoad: true, fields: [ { name: 'name', type: 'string'}, { name: 'text', type: 'string'}, ], proxy: { type: 'ajax', url: 'grid.json', reader: { type: 'json', // rootProperty: 'items', }, }, }); var center = Ext.create('Ext.panel.Panel', { region: 'center', xtype: 'panel', layout: 'border', items: [{ region: 'west', width: 600, xtype: 'grid', store: store, columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'text', dataIndex: 'inner', flex: 1 } ], listeners: { rowclick: function (a,b,c,d) { //b--Ext.data.Model a--this d--rowIndex var formPanel = Ext.getCmp('formPanel'); formPanel.loadRecord(b); console.log(d) } } },{ region: 'center', xtype: 'form', id: 'formPanel', defaultType: 'textfield', items: [{ fieldLabel: 'Name', name: 'name', },{ fieldLabel: 'text', name: 'inner', }] }] }); var bottom = Ext.create('Ext.panel.Panel', { region: 'south', title: '吕园园', }); Ext.onReady(function () { Ext.create('Ext.container.Viewport', { renderTo: Ext.getBody(), layout: 'border', items: [{ region: 'north', height: 40, html: '<div class="header">yuan_00</div>', border: false, margin: '0 0 5 0' }, center,bottom], }); }) </script> </body> </html>
grid.json
[ {name: '张杰天下', inner: '张杰天下张杰天下张杰天下张杰天下'}, {name: 'zj天下', inner: 'zj天下zj天下zj天下zj天下'}, {name: '仗借天下', inner: '仗借天下仗借天下仗借天下仗借天下'}, ] 运行结果图:
通过查文档,grid不能用select事件,只能用rowIndex事件,因为form自动加载方法有loadRecord方法,它只接受Ext.data.Model类型数据
rowclick: function (a,b,c,d) { //b--Ext.data.Model a--this d--rowIndex var formPanel = Ext.getCmp('formPanel'); formPanel.loadRecord(b); console.log(d) } 虽然功能简单,但只要熟悉查询文档的好习惯,基本没有解决不了的问题。另外,HTML页面头部是一些采用非cmd解压的方式开发Ext所需要的文件,只需导入HTML页面就行了,分别是ext-bootstrap.js,ext-all.js以及一些样式和中文包。
<link rel="stylesheet" href="ext/css/font-awesome.css"> <link rel="stylesheet" href="theme-neptune/resources/theme-neptune-all_1.css" /> <link rel="stylesheet" href="theme-neptune/resources/theme-neptune-all_1.css" /> <script type="text/javascript" src="ext/ext-bootstrap.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="ext/build/ext-all-debug.js"></script> <script type="text/javascript" src="ext/locale-zh_CN.js"></script> 下面是extjs6.0文档中rowclick的详细参数:
rowclick( this, record, tr, rowIndex, e, eOpts )
Fired when table cell is clicked.
Parameters
this : Ext.view.Tablerecord : Ext.data.Model
tr : HTMLElement
The TR element for the cell.
rowIndex : Number
e : Ext.event.Event
position : Ext.grid.CellContext
A CellContext object which defines the target cell.
eOpts : Object
The options object passed to Ext.util.Observable.addListener.
相关文章推荐
- EXTJS系列笔记————点击grid中的数据,显示在form中
- EXTJS 从grid 读取一行数据显示在formpanel中的 date问题
- extjs的grid只显示一行数据的问题
- Extjs学习------MVC结构的开发(从后台获取数据显示到Grid)
- Json化后的时间类型数据在Extjs Grid中的显示问题
- Jquery ajax请求data显示在GridView上,点击GridView中的任何一行alert这行数据
- EXTJS桌面显示窗口(左边:TREE,右边:PANEL),点击按钮弹出窗口编辑数据提交后台PHP。
- extjs grid取到数据而不显示的解决
- extjs grid取到数据而不显示的解决
- ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
- EXTJS Grid数据显示、翻页、增删改查功能实现
- ExtJs4 中 获取grid列表数据绑定到form表单
- ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例
- EXTJS Grid数据显示、翻页、增删改查功能实现
- EXTJS Grid数据显示、翻页、增删改查功能实现
- EXTJS Grid数据显示、翻页、增删改查功能实现
- EXTjs loadRecord方法 将grid中的数据 加载到form表单中去
- Extjs editorgridpanel combox 显示数据问题
- Extjs从grid加载数据到formPanel中combox不显示text
- ExtJs grid取到数据而不显示的解决(亲测)