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

时间：2023-03-09 03:59:19
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: '仗借天下仗借天下仗借天下仗借天下'},
]

运行结果图：

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

通过查文档，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