var data=[{"head":["№","INN","Legal_Form_Desc","Customer_Full_Nm","Source_System_Desc"],"rows":[[1,"2302042152","ООО","АМПЗ БАКАР","БИСКвит: Краснодар",""],[2,"593300087432","ИП","БАЙДИНА ОЛЬГА ПАВЛОВНА","БИСКвит: Самара",""]]}];

Ext.onReady(function(){
    var search_input = document.createElement('input');
    search_input.setAttribute('id', 'search-input');
    document.body.appendChild(search_input);
    
    var body_element = Ext.get(document.body);
    var body_content_width = body_element.getWidth(true);
    var left_padding = parseInt(body_element.getStyle('padding-left'));
    if (left_padding){
        body_content_width = body_content_width - left_padding;
    }
    
    var test = document.createElement('span');
    test.setAttribute('style', 'padding:0;margin:0;position:absolute;');
    document.body.appendChild(test);
    var column_width = [];
    for(var table_counter = 0; table_counter < data.length; table_counter++){
        column_width.push([50, 180]);
        var head = data[table_counter]['head'];
        for(var i = 2; i < head.length; i++){
            test.innerHTML = head[i];
            column_width[table_counter].push(test.offsetWidth);
        }
    }
    document.body.removeChild(test);
    
    var grid_stores = [];
    for(var table_counter = 0; table_counter < data.length; table_counter++){
        var grid_container = document.createElement('div');
        grid_container.setAttribute('id', 'grid-' + table_counter);
        document.body.appendChild(grid_container);
        
        var head = data[table_counter]['head'];
        var rows = data[table_counter]['rows'];
    
        var reader_mapping = [{name: 'number'}];
        var grid_columns = [{
                                id: 'number', 
                                header: head[0], 
                                sortable: true, 
                                dataIndex: 'number', 
                                width: column_width[table_counter][0]
                            }];
        for(var i = 1; i < head.length; i++){
            if (head[i].length > 0){
                reader_mapping.push({name: head[i], mapping: i});
                grid_columns.push({
                                    header: head[i], 
                                    sortable: true, 
                                    dataIndex: head[i], 
                                    align: (i > 1) ? 'center' : undefined,
                                    width: column_width[table_counter][i] 
                                  });
            }
        }
        
        reader_mapping.push({name: 'group'});
        grid_columns.push({header: "group", sortable: true, dataIndex: 'group', hidden: true});
        
        var reader = new Ext.data.ArrayReader({}, reader_mapping);
        
        var grid = new Ext.grid.GridPanel({
            store: new Ext.data.GroupingStore({
                reader: reader,
                data: rows,
                sortInfo: {field: 'number', direction: "ASC"},
                groupField: 'group'
            }),
    
            columns: grid_columns,
    
            view: new Ext.grid.GroupingView({
                groupTextTpl: '{text} ({[values.rs.length]} {["чел."]})'
            }),
            
            frame: false,
            enableHdMenu: false,
            width: body_content_width,
            height: 600,
            collapsible: true,
            animCollapse: false,
            title: 'Таблица ' + (table_counter + 1),
            renderTo: grid_container
        });
        grid_stores.push(grid.store);
    }
    
    function escape(str) {
        var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
        return str.replace(specials, "\\$&");
    }
    
    var SearchField = Ext.extend(Ext.form.TwinTriggerField, {
        initComponent: function(){
            SearchField.superclass.initComponent.call(this);
            this.on('specialkey', function(f, e){
                if(e.getKey() == e.ENTER){
                    this.onTrigger2Click();
                }
            }, this);
        },
        validationEvent: false,
        validateOnBlur: false,
        trigger1Class: 'x-form-clear-trigger',
        trigger2Class: 'x-form-search-trigger',
        hideTrigger1: true,
        width: 320,
        hasSearch: false,
        stores: [],
        
        onTrigger1Click: function(){
            if(this.hasSearch){
                this.el.dom.value = '';
                
                for(var i = 0; i < this.stores.length; i++){
                    this.stores[i].clearFilter();
                }
                
                this.triggers[0].hide();
                this.hasSearch = false;
            }
        },
    
        onTrigger2Click: function(){
            var v = escape(this.getRawValue());
            if(v.length < 1){
                this.onTrigger1Click();
                return;
            }
            for(var i = 0; i < this.stores.length; i++){
                this.stores[i].filter(this.stores[i].fields.keys[1], v, true, false);
            }
            
            this.hasSearch = true;
            this.triggers[0].show();
        }
    });
    var search_field = new SearchField({stores: grid_stores, applyTo: search_input});
});