sencha grid config

sencha-grid-config

<script type="text/javascript">
var BASE_URL = '<?php echo base_url(); ?>';
var BASE_ICONS = BASE_URL+'assets/icons/';
var grid_state_id = 'grid_<?php echo $section_id;?>';
var grid_panel_id = 'tab-grid-<?php echo $section_id;?>';

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', BASE_URL+'assets/js/ext/ux/');

Ext.require([
    'Ext.selection.*',
    'Ext.window.MessageBox',
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.form.*',
    'Ext.state.*',
    'Ext.ux.CheckColumn',
    'Ext.ux.RowExpander',
    'Ext.toolbar.Paging',
    'Ext.ux.grid.FiltersFeature',
    'Ext.grid.PagingScroller',
    'Ext.ux.form.SearchField'
]);

Ext.define('MetaModel', {
    extend: 'Ext.data.Model'
});

Ext.onReady(function() {

    Ext.QuickTips.init();

    //the zero after $section_id in the URL below indicates we are NOT on the client side
    var full_url = '<?php echo site_url($controllers_folder ."sencha/datatables/analyzer/$questionnaire_id/$section_id") ?>';
	var update_url = '<?php echo site_url($controllers_folder ."sencha/update_cell_data")?>';
    var save_grid_state_url = '<?php echo site_url($controllers_folder ."analyzer/save_grid_state/{$questionnaire_id}")?>';

    //create the store
    // Ext.override(Ext.data.proxy.Ajax, { timeout:900000 });
    var strResponses = Ext.create('Ext.data.Store', {
        model: 'MetaModel',
        id: 'viewResponses',
        autoLoad: true,
        autosync: true,
        remoteFilter: false,
        remoteSort: true, //
        proxy: {
            type: 'ajax',
            url: full_url,
            filterParam: 'query',
            simpleSortMode: true,
            timeout: 5000000,
            reader: {
                type: 'json',
                root: 'data',
            },
            afterRequest: function (request, success) {
                (success) ? $("#mask").remove() : console.log("failed");
            },
            encodeFilters: function(filters) {
                return filters[0].value;
            }
        },
        listeners: {
            metachange: function(store, meta) {
                var new_columns = [{ xtype: 'rownumberer', width: 50, sortable: false }];
               	var status = meta.filterstatus ? 'On' : 'Off';
                grid.down('#filterStatus').update({filterStatus: status});
                if(meta.filterstatus) {
                    grid.down('#filterStatus').addCls('bg-green');
                }
                new_columns.push.apply(new_columns, meta.columns);
                grid.reconfigure(store, new_columns);
            }
        }
    });

    //default filter params
    var filters = {
        ftype: 'filters',
        autoReload: false,
        local : false,
        encode: false, // json encode the filter query
    };

    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
        groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
        startCollapsed: true
    });

    // create the grid
    var grid = Ext.create('Ext.grid.Panel', {
        id: grid_panel_id,
        frame: true,
        style: 'margin:10px auto; width: 100%',
        height: 500,
        store: strResponses,
        columns:  [],
        features: [filters, groupingFeature],
        loadMask: true,
        bodyBorder : true,
        selModel: {
            selType: 'cellmodel'
        },
        trackMouseOver: true,
        // enableLocking: true,
        plugins: [
        <?php if(isset($grid_not_editable) && ! $grid_not_editable)
        {?>
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 2,
                pluginId: 'cellplugin'
            })
        <?php } ?>
        ],
        viewConfig: {
            stripeRows: true,
            singleSelect: true,
            emptyText: '<h1 style="margin:20px"> No matching results or an error occured when preparing the data. Please try again or contact the administrator.</h1>'
        },
        listeners: {
            columnhide: function(cm, column, opts) {
                var _url = '<?php echo site_url("{$controllers_folder}sencha/grid_columns_status/{$questionnaire_id}/{$section_id}"); ?>',
                    _data = {
                        'questionnaire_id' : <?php echo $questionnaire_id ?>,
                        'section_id' : <?php echo $section_id ?>,
                        'state' : 'hidden',
                        'dataIndex' : column.dataIndex
                    };

                ajax_post(_url, _data);
            },
            columnshow: function(cm, column, opts) {
                var _url = '<?php echo site_url("{$controllers_folder}sencha/grid_columns_status/{$questionnaire_id}/{$section_id}"); ?>',
                    _data = {
                        'questionnaire_id' : <?php echo $questionnaire_id ?>,
                        'section_id' : <?php echo $section_id ?>,
                        'state' : 'visible',
                        'dataIndex' : column.dataIndex
                    };

                ajax_post(_url, _data);
            },
            edit: function(editor, e) {
                // commit the changes right after editing finished
                var _data = {
                    'data_entry_number' : grid.getSelectionModel().getSelection()[0].get('_data_entry_number') ,
                    'row_index' : grid.getSelectionModel().getSelection()[0].get('_row_title') ,
                    'column_index' : grid.getSelectionModel().getSelection()[0].get('_column_title') ,
                    'new_value' : e.value,
                    'old_value' : e.originalValue,
                    'field'   : e.field,
                    'questionnaire_id' : '<?php echo $questionnaire_id?>'
                };
                ajax_post(update_url, _data);
            }
        },
        dockedItems: [{
        	dock: 'top',
        	xtype: 'toolbar',
        	items: [
        		{
        			fieldLabel: 'Search',
        			labelWidth: 50,
        			xtype: 'searchfield',
        			store: strResponses
        		},
        		'->',
        		{
        			xtype: 'component',
        			itemId: 'filterStatus',
        			tpl: 'Filters: {filterStatus}',
        			style: 'margin:7px 20px'
        		},
        		'-',
                {
                    text: 'Apply Filters',
                    tooltip: 'Apply Filters',
                    enableToggle: true,
                    handler: function (button, state) {
                        var store = grid.view.getStore();                         
                        // bind the store again so GridFilters is listening to appropriate store event
                        grid.filters.bindStore(store);
                        store.load();
                    } 
                },
        		{
        			text: 'Clear Filters',
        			iconCls: 'icon-clear-group',
        			handler: function() {
        			   window.location = '<?php echo site_url("{$controllers_folder}sencha/clear_filters/{$questionnaire_id}/{$section_id}"); ?>';
        			}
        		},
        		'-',
        		{
        			text:'Clear Grouping',
        			iconCls: 'icon-clear-group',
        			handler : function() {
        				strResponses.clearGrouping();
        				grid.fireEvent("groupchange", grid, null);
        			}
        		}
        	]
        }],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: strResponses,
            displayInfo: true,
            displayMsg: 'Showing {0} - {1} of {2} Records',
            emptyMsg: "No topics to display"
        }),
        renderTo: 'grid'
    });
    
    grid.filter;

    function ajax_post(url, data) {

        Ext.Ajax.request({
            url: url,
            params: data,
            success: function(action){
                if (res = Ext.decode(action.responseText)) {
                    console.log(res.success);
                } else {
                    console.log('Invalid JSON response :' + action.responseText);
                }
            },
            failure: function(action) {
                Ext.Msg.alert('Error',  'Invalid JSON response :' + action.responseText);
            }
        });
    }

    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    //remove the loading mask
    var element = document.getElementById("loading-mask");
    element.parentNode.removeChild(element);
});

</script>