<!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. BestCoder Round #67 (div.2) N*M bulbs
			
    问题描述 N*M个灯泡排成一片,也就是排成一个N*M的矩形,有些开着,有些关着,为了节约用电,你要关上所有灯,但是你又很懒. 刚好有个熊孩纸路过,他刚好要从左上角的灯泡走去右下角的灯泡,然后离开. 但 ...
    
			
    2. 
						
  2. MDK常用快捷键
			
    一.常用编译相关的快捷键 1.编译(单个文件)  Ctrl+F7 2.连接 F7 二.常用调试相关的快捷键 1.运行/停止     Ctrl+F5 2.Run(全速运行)  F5 3.Stop Deb ...
    
			
    3. 
						
  3. 黑马程序员-------.net基础知识一
			
    一 初识.net  .net是一种多语言的编程平台,可以用多达几十种的语言来进行开发,而C#就是基于.net平台的其中一种开发语言. 它的特点是: ⒈多平台:该系统可以在广泛的计算机上运行,包括从服务 ...
    
			
    4. 
						
  4. iOS Copy 和 MutableCopy的区别 深浅拷贝的区别－供参考
			
    概述 对于系统的非容器类对象,对一不可变对象复制,copy是指针复制(浅拷贝)和mutableCopy就是对象复制(深拷贝).如果是对可变对象复制,都是深拷贝,但是copy返回的对象是不可变的. 对于 ...
    
			
    5. 
						
  5. 关于Action中ValidateXXX方法校验一次失败后\导致以后一直返回input视图的情况
			
    问题:     使用struts2的validateXXX()进行验证,出错后自动返回之前的画面,但是Form中的数据全部丢失了,如何才能保存出错前的Form是要解决的问题. 调查:     调查后发 ...
    
			
    6. 
						
  6. 关于Java（JDBC介绍）
			
    JDBC API 允许用户访问任何形式的表格数据,尤其是存储在关系数据库中的. JDBC 简单功能 连接数据源,如数据库 传给数据库查询和更新指令 获取并处理数据库返回结果(对查询等的响应) 示例代码 ...
    
			
    7. 
						
  7. Tmux：终端复用器
			
    转自Tmux:终端复用器 Tmux 是一个 C 语言编写的终端,它能够在单一窗口中同时访问和控制多个终端.它是一个类似于GNU Screen 的工具.使用它,用户可以在 Linux 系统上管理多个任务 ...
    
			
    8. 
						
  8. 李洪强漫谈iOS开发[C语言-028]-sizeof运算符
			
    
			
    9. 
						
  9. C++控制台程序中使用定时器
			
    转自博客:http://www.cnblogs.com/phinecos/archive/2008/03/08/1096691.html 作者:洞庭散人 “我现在项目是一个控制台程序,用到的Win32 ...
    
			
    10. 
						
  10. Spring In Action 第4版笔记-第一章-001架构
			
    1.Spring’s fundamental mission: Spring simplifies Java development. 2.To back up its attack on Java  ...
    
			
    11.