<!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. Vim粘贴代码时缩进混乱
			
    Vim粘贴代码时缩进混乱 via 背景 在终端Vim中粘贴代码时,发现插入的代码会有多余的缩进,而且会逐行累加.原因是终端把粘贴的文本存入键盘缓存(Keyboard Buffer)中,Vim则把这些内 ...
    
			
    2. 
						
  2. LFS实践
			
    用了三天,编译了两次LFS,把LFS的基本流程和原理都弄清了.用的是LFS 6.3,使用的教程是LFS速成手册(6.3) ,感觉很不错,如果按照它的做法,一步一步来,基本都能编译成功而且没什么错误.不 ...
    
			
    3. 
						
  3. 服务器慢 mysql-bin.000001文件占满磁盘的原因与解决
			
    发现 VPS 服务器上的网站反应超级慢,简单的重启.重启各主要服务,发现mysql 的反应极其不正常. 一方面是问题,这与站点访问量有关.开始时从mysql 的配置文件 my.cnf 考虑,但志文工作 ...
    
			
    4. 
						
  4. RegexKitLite 使用详解
			
    1.去RegexKitLite下载类库,解压出来会有一个例子包及2个文件,其实用到的就这2个文件,添加到工程中. 2.工程中添加libicucore.dylib frameworks. 友情提醒:一般 ...
    
			
    5. 
						
  5. 天草(初级+中级+高级)VIP和黑鹰VIP破解教程(全部iso下载地址)
			
    以下就是我收集的教程地址,之前我收集到的都是一课一课下载的,虽然这样,我也下载完了天草的全部课程.这里分享的是在一起的iso文件,比起一课课下载爽多了.~~ 还有这些教程都是从零起点开始教的,不用担心 ...
    
			
    6. 
						
  6. 盘点 PHP 和 ASP.NET 的10大对比！
			
    [编者按]本文主要针对开源 PHP 和非开源的 ASP.NET 在性能.成本.可扩展性,技术支持和复杂性等方面进行比较. 在网上论坛,总是有成百上千的文章和帖子在讨论 PHP 和 ASP.NET,究竟 ...
    
			
    7. 
						
  7. 难搞的EXCHANGE重新安装错误
			
    Sample Exchange Setup Log III: [8/12/2010 2:59:38 AM] [1] [ERROR] Unable to remove product with code ...
    
			
    8. 
						
  8. c#中总是提示“在代码运行时或者在禁用“只要一个进程中断，就中断所有进程”选项时，不允许进行更改。
			
    但是根据它提示的修改方法,还是提示这个. “此选项可在“工具”->“选项”->“调试”中启用.” 根本不起作用,后来试着,要这样操作: 工具->选项->调试->编辑并继续 ...
    
			
    9. 
						
  9. WCF 托管在IIS中遇到Http的错误
			
    IIS8中部署WCF服务出错:HTTP 错误 404.3 - Not Found http://www.cnblogs.com/xwgli/archive/2013/03/15/2961022.htm ...
    
			
    10. 
						
  10. div居中鼠标悬浮显示下拉列表
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    11.