Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询 --第10强

本文链接：https://blog.csdn.net/haor2756/article/details/9193463

本文介绍如何在Ext JS4中利用grid.plugin.CellEditing实现高级查询功能。虽然仍有部分细节需要调整，但已能展示基本的查询界面。

摘要由CSDN通过智能技术生成

Ext JS4,用grid.plugin.CellEditing做高级查询:

写了90%，界面出来了，小兴奋就贴出来，还有细节要调整，基本能用。

grid 高级查询

代码：

Ext.define('chenghao.admin.SearchGrid', {
        extend: 'Ext.grid.Panel',
        requires: [
            'Ext.selection.*',
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.util.*',
            'Ext.form.*'
        ],
        initComponent: function() {
            this.cellEditing = new Ext.grid.plugin.CellEditing({
                clicksToEdit: 1
            });
            //可用查询项
            var fieldStore = new Ext.data.Store({
                fields: ['value', 'text'],
                proxy: {
                    type: 'ajax',
                    url: CONF.CONN_URL,
                    extraParams: {
                        module: 'admin',
                        action: 'get_search_field_list'
                    },
                    reader: {
                        type: 'json',
                        root: CONF.JSON_READER_ROOT
                    }
                },
                folderSort: true,
                autoLoad: false
            });
            // 比较运算符数据源
            var bijiaoStore = new Ext.data.Store({
                fields: ['value', 'text'],
                proxy: {
                    type: 'ajax',
                    url: CONF.CONN_URL,
                    extraParams: {
                        module: 'admin',
                        action: 'get_search_operator_list'
                    },
                    reader: {
                        type: 'json',
                        root: CONF.JSON_READER_ROOT
                    }
                },
                folderSort: true,
                autoLoad: false
            });
            // 逻辑运算符数据源
            var luojiStore = new Ext.data.Store({
                fields: ['value', 'text'],
                proxy: {
                    type: 'ajax',
                    url: CONF.CONN_URL,
                    extraParams: {
                        module: 'admin',
                        action: 'get_search_operator_list',
                        key: 'logic_operator'
                    },
                    reader: {
                        type: 'json',
                        root: CONF.JSON_READER_ROOT
                    }
                },
                folderSort: true,
                autoLoad: false
            });
            
            var me = this;
            Ext.apply(this, {
                title: '高级查询',
                region: 'north',
                //height: 120,
                split: true, //自动伸展
                collapsible: true, //可折叠


                plugins: [me.cellEditing],
                store: new Ext.data.Store({
                    fields: ['LeftParenthesis', 'QueryFieldNametext', 'QueryFieldName', 'QueryComparisonOperationtext', 'QueryComparisonOperation',
                        'QueryText', 'QueryValue', 'RightParenthesis', 'QueryLogicOperator', 'QueryLogicOperatortext'],
                    data: {
                        'search': [{
                                "LeftParenthesis": "",
                                "QueryFieldName": "",
                                "QueryComparisonOperation": "",
                                "QueryText": "",
                                "RightParenthesis": "",