Ext.onReady(function(){

    Ext.QuickTips.init();

    xg = Ext.grid;
    fm = Ext.form;
    bd = Ext.getBody();
    var gridPageSize = 5;

    // READER TO GO INTO THE STORE
    reader = new Ext.data.ArrayReader({}, [
       {name: 'name', type: 'string'},
       {name: 'role_name', type: 'string'},
       {name: 'email', type: 'string'},
       {name: 'active', type: 'string'},
       {name: 'last_active', type: 'date', dateFormat: 'j/n h:ia'},
    ]);

    // CREATE THE STORE IN GROUPED MODE
    store = new Ext.data.GroupingStore({
            reader: reader,
            data: xg.dummyData,
            sortInfo:{field: 'role_name', direction: "ASC"},
            groupField:'role_name'
    });

    // CREATE THE CHECKBOX MODEL
    checkboxModel = new xg.CheckboxSelectionModel({
        singleSelect: true,
        moveEditorOnEnter: false,
        listeners: {
            // On selection change, set enabled state of the removeButton
            // which was placed into the GridPanel using the ref config
            selectionchange: function(sm) {
                if (sm.getCount() == 1) {
                    grid.editButton.enable();
//                  grid.removeButton.enable();
                } else if(sm.getCount() > 1) {
                    grid.editButton.disable();
//                  grid.removeButton.enable();
                } else {
                    grid.editButton.disable();
//                  grid.removeButton.disable();
                }
            }
        }
    });




    // CREATE THE GRID PANEL, IN EDIT MODE
    grid = new xg.EditorGridPanel({
        ds: store,
        selModel: checkboxModel,
        columns: [
        checkboxModel,
        // ----------------- NAME -------------
            {
                id:'name',
                header: "Name",
                width: 20,
                sortable: true,
                dataIndex: 'name',
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            },
       // --------------- ROLE NAME -----------
            {
                header: "Role Name",
                width: 20,
                sortable: true,
                dataIndex: 'role_name',
                editor: new fm.ComboBox({
                    //typeAhead: true,
                    triggerAction: 'all',
                    // transform the data already specified in html
                    transform: 'role_mapping',
                    lazyRender: true,
                    emptyText: false,
                    editable: false
//                    listClass: 'x-combo-list-small'
                })
            },
        // ------------- EMAIL --------------
            {
                header: "Email",
                width: 40,
                sortable: true,
                dataIndex: 'email',
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
             },
       // -------------- ACTIVE --------------------
            {
                 header: "Active",
                 width: 20,
                 sortable: true,
                 dataIndex: 'active',
                 editor: new fm.ComboBox({
                     //typeAhead: true,
                     triggerAction: 'all',
                     // transform the data already specified in html
                     transform: 'user_active',
                     lazyRender: true,
                     emptyText: false,
                     editable: false,
                     listClass: 'x-combo-list-small'
                 })
            },
       // -------- LAST ACTIVE ------------
            {
                header: "Last Active",
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                dataIndex: 'last_active'
            }
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Users" : "User"]})'
        }),
        frame:true,
//        width: '100%',
//        height: '100%',
//        layout: 'fit',
        clicksToEdit: 2,
        collapsible: true,
        animCollapse: false,
        title: 'User Management',
        iconCls: 'icon-grid',
        renderTo: 'center1',
        // inline toolbars
        tbar:[
              {
                text:'Create User',
                tooltip:'Add a new user',
                iconCls:'add',
                handler: function() {
                    PPIMS_UserManagement.drawCreateForm();
                }
              }, '-',
              {
                text:'Edit User',
                tooltip:'Edit User',
                iconCls:'edit',
                disabled: true,
                ref: '../editButton',
                handler: function() {

                    // Get the form
                    editUserForm = PPIMS_UserManagement.getEditForm();

                    // Get the current selected row's data
                    var userData = grid.getSelectionModel().getSelected().data;

                    // Set some fields.
                    editUserForm.get('edit_name').setValue(userData.name);
                    editUserForm.get('edit_email').setValue(userData.email);
                    editUserForm.get('edit_role_name').setValue(userData.role_name);
                    editUserForm.get('edit_active').setValue(userData.active);

                    PPIMS_UserManagement.drawEditForm();
                }
            }
        ],

        bbar: [
               '->',
               {
                text:'Clear Grouping',
                iconCls: 'icon-clear-group',
                handler : function(){
                       store.clearGrouping();
                }
               },
               '->',
               {
                   text: 'Update Changes'
               }
        ]

    });



});


// Array data for the grids
Ext.grid.dummyData = [
    ['3m Co', 'Member', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3mm Co', 'Admin', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Com', 'Developer', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3mm Com', 'Developer', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Com', 'Member', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Developer', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3masdaa Co', 'Admin', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3mhh Co', 'Member', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Admin', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3msdas Co', 'Developer', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Member', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Coadas', 'Admin', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Member', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3masdas Co', 'Admin', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3mm Com', 'Developer', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3m Com', 'Member', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Developer', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3masdaa Co', 'Admin', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3mhh Co', 'Member', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Admin', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3msdas Co', 'Developer', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Member', 'dragoonis@gmail.com', 'Yes', '1/4 12:00am'],
    ['3m Coadas', 'Admin', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Member', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3masdas Co', 'Admin', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Coadas', 'Member', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Coadas', 'Member', 'dragoonis@php.net', 'Yes', '1/4 12:00am'],
    ['3m Co', 'Developer', 'dragoonis@php.net', 'Yes', '1/4 12:00am']
];