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

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

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

代码：

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": "",
                                "QueryLogicOperator": ""
                            }]
                    },
                    proxy: {
                        type: 'memory',
                        url: '',
                        reader: {
                            type: 'json',
                            root: 'search'
                        }
                    }
                }),
                selType: 'cellmodel', //设置为单元格选择模式
                columns: [{
                        header: '删除',
                        // '5%',
                        sortable: false,
                        fixed: true,
                        align: 'center',
                        xtype: 'actioncolumn',
                        items: [{
                                //icon: DeleteIcon,
                                iconCls: 'icon-action icon-delete-record',
                                handler: function(grid, rowIndex, colIndex) {
                                    //alert(grid.getStore().getCount());
                                    var rec = grid.getStore().getAt(rowIndex);
                                    if (grid.getStore().getCount() != 1) {
                                        Ext.Msg.confirm('提示', '确定要删除吗?', function(btn) {
                                            if (btn == 'yes') {
                                                grid.getStore().remove(rec);
                                            }
                                        });
                                    } else {
                                        Ext.Msg.alert('错误提示','当前是最后一行，不能删除!');
                                    }
                                }
                            }]
                    }, {
                        header: '左括号',
                        // '9%',
                        dataIndex: 'LeftParenthesis',
                        align: 'center',
                        field: {
                            xtype: 'combo',
                            store: new Ext.data.SimpleStore({
                                fields: ['value', 'text'],
                                data: [['1', '('], ['0', '无']]
                            }),
                            valueField: 'text',
                            displayField: 'text',
                            triggerAction: 'all', // 无论有没有内容，下拉列表全部显示，有内容会自动在该内容上高亮显示
                            selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
                            editable: false,
                            emptyText: "--请选择--"
                        }
                    }, {
                        header: '查询条件',
                        dataIndex: 'QueryFieldNametext',
                        // '23%',
                        align: 'center',
                        field: {
                            xtype: 'combobox',
                            hiddenname: 'value',
                            store: fieldStore,
                            valueField: 'text',
                            displayField: 'text',
                            triggerAction: 'all', // 无论有没有内容，下拉列表全部显示，有内容会自动在该内容上高亮显示
                            selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
                            editable: false,
                            emptyText: "--请选择--",
                            // 给查询条件加展开事件
                            listeners: {
                                expand: function() {
                                    // 定义等待效果
                                    if (this.value == "") {
                                        fieldStore.load({
                                            callback: function(records, options, success) {
                                            }
                                        });
                                    }
                                },
                                change: function(e, value, oldValue) {
                                    var index = fieldStore.find('text', e.getValue());

                                    //me.getStore().getAt(0).data.QueryFieldName = "123";
                                    var row = me.getSelectionModel().getCurrentPosition().row;
                                    if (index != -1) {
                                        fieldStore.each(function(rec) {
                                            if (rec.get('text') == e.getValue()) {
                                                //alert(rec.get('value'));
                                                me.getStore().getAt(row).data.QueryFieldName = rec.get('value');
                                            }
                                        });
                                    }
                                    //alert(this.value);
                                    //alert(Ext.JSON.encode(me.getSelectionModel().getCurrentPosition()));
                                }
                            }
                        }
                    }, {
                        header: '查询条件',
                        dataIndex: 'QueryFieldName',
                        align: 'center',
                        hideable: false,
                        hidden: true
                    }, {
                        header: '比较运算符',
                        dataIndex: 'QueryComparisonOperationtext',
                        // '10%',
                        align: 'center',
                        field: {
                            xtype: 'combobox',
                            hiddenname: 'value',
                            store: bijiaoStore,
                            valueField: 'text',
                            displayField: 'text',
                            triggerAction: 'all', // 无论有没有内容，下拉列表全部显示，有内容会自动在该内容上高亮显示
                            selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
                            editable: false,
                            emptyText: '',
                            listeners: {
                                change: function(e, value, oldValue) {
                                    var index = bijiaoStore.find('text', e.getValue());
                                    var row = me.getSelectionModel().getCurrentPosition().row;
                                    if (index != -1) {
                                        bijiaoStore.each(function(rec) {
                                            if (rec.get('text') == e.getValue()) {
                                                me.getStore().getAt(row).data.QueryComparisonOperation = rec.get('value');
                                            }
                                        });
                                    }
                                }
                            }
                        }
                    }, {
                        header: '比较运算符',
                        dataIndex: 'QueryComparisonOperation',
                        align: 'center',
                        hideable: false,
                        hidden: true
                    }, {
                        header: '请输入查询条件',
                        dataIndex: 'QueryText',
                         180,
                        align: 'center',
                        field:{
                            xtype: 'textfield',
                            listeners: {
                                click: function(e, h, rowIndex) {
                                    var rec = me.getStore().getAt(rowIndex).data;
                                    var fieldId = rec.QueryFieldNametext;

                                    if (fieldId == "") {
                                        Ext.Msg.alert("请选择查询条件");
                                        return;
                                    }
                                    if (rec.QueryComparisonOperation == "is null" || rec.QueryComparisonOperation == "is not null"){
                                        return;
                                    }
                                }
                            }
                        }
                    }, {
                        header: '右括号',
                        // '9.6%',
                        dataIndex: 'RightParenthesis',
                        align: 'center',
                        field: {
                            xtype: 'combo',
                            store: new Ext.data.SimpleStore({
                                fields: ['value', 'text'],
                                data: [['1', ')'], ['0', '无']]
                            }),
                            valueField: 'text',
                            displayField: 'text',
                            triggerAction: 'all', // 无论有没有内容，下拉列表全部显示，有内容会自动在该内容上高亮显示
                            selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
                            editable: false,
                            emptyText: "--请选择--"
                        }
                    }, {
                        header: '逻辑运算符',
                        dataIndex: 'QueryLogicOperatortext',
                        // '10%',
                        align: 'center',
                        field: {
                            xtype: 'combo',
                            hiddenname: 'value',
                            store: luojiStore,
                            valueField: 'text',
                            displayField: 'text',
                            triggerAction: 'all', // 无论有没有内容，下拉列表全部显示，有内容会自动在该内容上高亮显示
                            selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
                            editable: false,
                            emptyText: '',
                            listeners: {
                                change: function(e, value, oldValue) {
                                    var index = luojiStore.find('text', e.getValue());
                                    var row = me.getSelectionModel().getCurrentPosition().row;
                                    if (index != -1) {
                                        luojiStore.each(function(rec) {
                                            if (rec.get('text') == e.getValue()) {
                                                me.getStore().getAt(row).data.QueryLogicOperator = rec.get('value');
                                            }
                                        });
                                    }
                                }
                            }
                        }
                    }, {
                        header: '逻辑运算符',
                        dataIndex: 'QueryLogicOperator',
                        align: 'center',
                        hideable: false,
                        hidden: true
                    }, {
                        header: '操作',
                        // '5%',
                        fixed: true,
                        align: 'center',
                        xtype: 'actioncolumn',
                        items: [{
                                //icon: AddIcon,
                                iconCls: 'add',
                                handler: function(grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex).data;
                                    if (rec.QueryFieldName == "") {
                                        Ext.Msg.alert('错误提示','请输入查询条件!');
                                        return;
                                    } else if (rec.QueryComparisonOperation == "") {
                                        Ext.Msg.alert('错误提示','请输入比较运算符!');
                                        return;
                                    } else if (rec.QueryLogicOperator == "") {
                                        Ext.Msg.alert('错误提示','请输入逻辑运算符!');
                                        return;
                                    }
                                    // 插入一行查询条件
                                    me.getStore().insert(rowIndex + 1, '');
                                }
                            }]

                    }],
                dockedItems: [{
                        xtype: 'toolbar',
                        items: [{
                                //icon: SearchIcon,
                                text: '查询',
                                handler: function() {
                                    var SearchStore = me.getStore();
                                    var count = SearchStore.getCount();
                                 
                                    if (count == 1 && SearchStore.getAt(0).data.QueryFieldName == "") {
                                        //alert(SearchStore.getAt(0).data.QueryFieldName);

                                        var LeftParenthesis = SearchStore.getAt(0).data.LeftParenthesis;
                                        var RightParenthesis = SearchStore.getAt(0).data.RightParenthesis;
                                        if (LeftParenthesis == "" && RightParenthesis != "") {
                                            Ext.Msg.alert('错误提示', '括号不匹配,请修改查询条件!');
                                            return;
                                        }
                                        if (LeftParenthesis != "" && RightParenthesis == "") {
                                            Ext.Msg.alert('错误提示', '括号不匹配,请修改查询条件!');
                                            return;
                                        }
                                        me.getStore();
                                        return;
                                    }
                                    
for(var i = 0; i< count; i++){ 
     var a = new Array();
     alert(Ext.JSON.encode(me.getStore().getAt(i).data));
     //alert(me.getStore().getAt(i).data.LeftParenthesis);
     //record = grid.getStore().getAt(i);   
     //var colname = grid.getColumnModel().getDataIndex(i); //获取列名      
     //var celldata = grid.getStore().getAt(cell[0]).get(colname);   //获取数据   
     //Ext.MessageBox.alert("test",colname);   
     //for (var j = 0; j < colIndex; colIndex++) {   
         //Ext.MessageBox.alert("test",grid.getColumnModel().getDataIndex(j));   
    //}   
} 
                                    
                                    //var msg = dynamicPublicSearch(SearchStore);
                                    //if (msg == "") {
                                        //me.getStore();
                                    //}
                                }
                            }]
                    }]
            });

            this.callParent();
        }
    });