extjs6.0点击grid一行数据显示在一端的form中 

<!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的详细参数：
( this, record, tr, rowIndex, e, eOpts )

Fired when table cell is clicked.

Parameters







		

		
posted @ 
2016-09-02 13:28 
yuan_00 
阅读(1094) 
评论(0) 
编辑 
收藏 
举报