<!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. phpstorm配置Xdebug进行调试PHP教程
			
    运行环境: PHPSTORM版本 : 8.0.1 PHP版本 : 5.6.2 xdebug版本:php_xdebug-2.2.5-5.6-vc11-x86_64.dll ps : php版本和xdeb ...
    
			
    2. 
						
  2. C语言写解一元二次方程程序心得
			
    前言:在网上看到不少解一元二次方程的小程序,在使用时总得出一大堆小数,感觉很不爽,遂自己重新写了一遍. 首先,先回忆一下一元二次方程的求根公式: 分别读取二次项.一次项和常数项系数并且求出delta  ...
    
			
    3. 
						
  3. Android源码中的FLAG为何使用16进制
			
    1.在阅读源码的时候经常发现有一些标志属性使用一些位操作来判断是否具有该标志,增加标志或者去除标志. 比如View.java中的 /** * This view does not want keyst ...
    
			
    4. 
						
  4. 哈希，哈希表，哈希Map
			
    数组: 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1):数组的特点是:寻址容易,插入和删除困难: 链表: 链表存储区间离散,占用内存比较宽松,故空间复杂 ...
    
			
    5. 
						
  5. 练习--python中的Queue与多进程（multiprocessing）
			
    按官方说法: This module is OBSOLETE and is only provided on PyPI to support old projects that still use i ...
    
			
    6. 
						
  6. [转贴]从零开始学C++之异常（一）：C语言错误处理方法、C++异常处理方法（throw, try, catch）简介
			
    一.C语言错误处理方法 1.返回值(if … else语句判断错误) 2.errno(linux 系统调用) 3.goto语句(函数内局部跳转) 4.setjmp.longjmp(Do not use ...
    
			
    7. 
						
  7. ColorFilter类
			
    以前没用到过LightingColorFilter这个类 ,google了下 @Override protected void onDraw(Canvas canvas) { int mul = 0x ...
    
			
    8. 
						
  8. 关于PowerBuilder 9.0中如何修改项目工程名字
			
    关于PowerBuilder 9.0中如何修改项目工程名字,首先要找到三个文件,xxx.pbl.xxx.pbt.xxx.pbw这三个文件,为何要找这个三号个文件呢? 因为在使用PowerBuilder ...
    
			
    9. 
						
  9. 数据库设主键以及where的应用
			
    二.第二课 create table teacher ( tno int primary key identity(1,1),  --将tno设为主键(primary key identity(1,1 ...
    
			
    10. 
						
  10. 关于Session
			
    转自:http://blog.csdn.net/wang379275614/article/details/9627755 Session理解:   Session:在计算机中,尤其是在网络应用中,称 ...
    
			
    11.