<!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

												


											
extjs6.0点击grid一行数据显示在一端的form中的更多相关文章
	

    
								
  1. ExtJS6.0扩展日期选择控件为也可以选择时间
		
    PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...
    
		
    2. 
						
  2. MATLAB：一个K×M的矩阵，第一列是1，其它都是0，从最后一行开始，每循环一次，最后一行的1往右边移一位，移动到末尾后溢出，重新回到最左边，同时上一行的1往右边移一位
		
    问题:一个K×M的矩阵,第一列是1,其它都是0,从最后一行开始,每循环一次,最后一行的1往右边移一位,移动到末尾后溢出,重新回到最左边,同时上一行的1往右边移一位.上一行溢出时,上上一行的1移动一位, ...
    
		
    3. 
						
  3. ExtJs6.0.0随笔
		
    环境:extJs6.0.0GPL,对应SenchaCmd-6.0.2-windows-64bit(注意版本不能太高). 步骤: 1.安装senchaCmd 2.运行生成demo: http://doc ...
    
		
    4. 
						
  4. vue2.0点击其他任何地方隐藏dom
		
    methods: { handleBodyClick(){ if (绿色区域出来了,要判断点击其他地方就要关闭,这样可以避免绿色区域已经关闭还在操作) { let _con = $(目标区域) if  ...
    
		
    5. 
						
  5. 点击a标签，跳转到iframe中，并在iframe中显示指定的页面
		
    点击a标签,跳转到iframe中,并在iframe中显示指定的页面 1.用a标签的target属性 <iframe id="myFrameId" name="myF ...
    
		
    6. 
						
  6. 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件
		
    [源码下载] 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件 作者:w ...
    
		
    7. 
						
  7. ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet
		
    实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...
    
		
    8. 
						
  8. PowerDesigner逆向操作(从mysql5.0生成数据库的物理模型),把Comment写到name中,pdm文件导出为word
		
    PowerDesigner逆向操作(从mysql5.0生成数据库的物理模型) 环境:powderdesigner12.5:mysql5.0步骤:1. 为指定的数据库配置mysql的ODBC数据源先下载 ...
    
		
    9. 
						
  9. Zabbix 4.0.2试用（七）：在Linux主机中安装zabbix agent并添加该主机（yum源安装）
		
    Zabbix 4.0.2试用(七):在Linux主机中安装zabbix agent并添加主机(yum源安装) 2018年12月20日, 上午6:42 之前介绍的是下载源安装包,编译安装的方式来安装ag ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python 函数式编程学习
			
    描述:通过将函数作为参数,使得功能类似的函数实现可以整合到同一个函数. Before def getAdd(lst): result = 0 for item in lst: result += it ...
    
			
    2. 
						
  2. warning: no newline at end of file
			
    编译错误:warning: no newline at end of file原因:程序结尾需要有一个空行解决办法:在程序末尾多打个回车就行了
    
			
    3. 
						
  3. USB驱动能力有限
			
    笔者用USB接一个单片机最小系统,再从单片机最小系统引出电源线接一个数字电路模块.当后边两部分的功率较大时,就会引起USB电压的下降,甚至到3V左右.电压的下降就会使单片机或者数字电路部分芯片不能正常 ...
    
			
    4. 
						
  4. Entity Framework: 视图查询时重复返回第一行值， duplicate frst rows in resultset from a view
			
    http://blog.csdn.net/riverlau/article/details/7476449 1. 使用rownumber给view加上一个标示列 SELECT ROW_NUMBER() ...
    
			
    5. 
						
  5. YUV数据格式
			
    概要: 与RGB编码方法类似,YUV也是一种颜色编码方法,主要用于电视系统以及模拟视频领域,它是指将亮度参量(Y:Luminance或Luma)和色度参量(UV:Chrominance或Chroma) ...
    
			
    6. 
						
  6. BZOJ 1629: [Usaco2007 Demo]Cow Acrobats
			
    Description Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away a ...
    
			
    7. 
						
  7. 小波变换 C++ opencv 实现
			
    小波变换 C++ opencv 实现 小波简介: http://www.blogbus.com/shijuanfeng-logs/221293135.html 源码:   /// 小波变换 Mat W ...
    
			
    8. 
						
  8. maven 根据不同的环境打war包-->资源文件的处理方式
			
    发现犯的错误: 1. 指定了testResource 文件夹与resource 为同一个文件夹.导致不论在resource 里面如何过滤文件,都不起作用.资源文件本来就是共享的.不必这样指定. 2.  ...
    
			
    9. 
						
  9. 【技术贴】三星Note8 N5100实用教程，关闭相机快门声，增加浏览器退出按钮。
			
    需要root 增加快门声按钮: 在\system\csc\目录下,有个others.xml的手机功能定制文件,用root explorer之类可以修改系统文件权限的文本修改工具编辑它,在文件最末添加这 ...
    
			
    10. 
						
  10. Axzue注册码
			
    ahjesus Axure RP 7.0注册码 用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+t ...
    
			
    11.