                                                                                                                                                                                                                               
var loadingMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading data, please wait...",id:"loadingMask"});
var add = '<?php echo $_REQUEST["add"]; ?>';
Ext.onReady(function(){
					 loadingMask.show();
    Ext.QuickTips.init();
 	 var xg = Ext.grid;
	 var sm2 = new xg.CheckboxSelectionModel({
        listeners: {
            selectionchange: function(sm) {
                if (sm.getCount() && flgDelete=='true') {
                    grid.removeButton.enable();
                } else {
                    grid.removeButton.disable();
                }
            }
        }
    });  
	var url = {
        remote:  'data/view-user.php'
       };
    var encode = false;
    var local = false;
function confirmDeleteUsers(){
    if(grid.selModel.getCount() == 1)
    {
      Ext.MessageBox.confirm('Confirmation','You are about to delete a User. Continue?', deleteUsers);
    } else if(grid.selModel.getCount() > 1){
      Ext.MessageBox.confirm('Confirmation','Delete these Users?', deleteUsers);
    } 
  } 
function deleteUsers(btn){
    if(btn=='yes'){
         var selections = grid.selModel.getSelections();
         var prez = [];
         for(i = 0; i< grid.selModel.getCount(); i++){
          prez.push(selections[i].json.user_id);
         }
         var encoded_array = Ext.encode(prez);
         Ext.Ajax.request({  
            waitMsg: 'Please Wait',
            url: 'user-grid-delete.php', 
            params: { 
               task: "DELETEUSER", 
               ids:  encoded_array
              }, 
            success: function(response){
              var result=eval(response.responseText);
              switch(result){
              case 1: 
                store.reload();
				Ext.MessageBox.show({
										   title: 'Success',
										   msg: 'User deleted successfully.',
										   buttons: Ext.MessageBox.OK,
										   icon:Ext.MessageBox.INFO
									});
				
                break;
              default:
			  Ext.MessageBox.show({
										   title: 'Warning',
										   msg: 'Could not delete the entire selection.',
										   buttons: Ext.MessageBox.OK,
										   icon:Ext.MessageBox.WARNING
									});
			  
               break;
              }
            },
            failure: function(response){
              var result=response.responseText;
			  Ext.MessageBox.show({
										   title: 'Error',
										   msg: 'could not connect to the database',
										   buttons: Ext.MessageBox.OK,
										   icon:Ext.MessageBox.ERROR
									});
              
              }
         });
      }  
  }
store = new Ext.data.JsonStore({
    	autoDestroy: true,
        url:  'data/view-user.php',
        remoteSort: true,
       sortInfo: {
            field: 'user_id',
            direction: 'ASC'
        },
        storeId: 'myStore',
        idProperty: 'user_id',
        root: 'data',
        totalProperty: 'total',
        fields: [{
            name: 'user_id',
			type:'int'
        }, {
            name: 'user_name'
        }, {
            name: 'user_password'
        }] 
    });
	var filters = new Ext.ux.grid.GridFilters({
		filters:[
			{
				type: 'string',
				dataIndex: 'user_name'
			},
			{
				type: 'string',
				dataIndex: 'user_password'
			}
		]
	});
var createColModel = function (finish, start) {
        var columns = [
		sm2,
		{
			header: "Edit",	
			width:52,
		    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
		 
    	   		return '<a href="create-user.php?ID='+ record.get('user_id') +'">Edit</a>';
			}
		},
		{
            dataIndex: 'user_id',
            header: 'User ID',
			
	        filterable: true
        }, {
            dataIndex: 'user_name',
            header: 'User Name',
			width:125,
            filterable: true
        },
		{
            dataIndex: 'user_password',
            header: 'Password',
			width:125,
			filterable: false
		}];
return new Ext.grid.ColumnModel({
            columns: columns.slice(start || 0, finish),
            defaults: {
                sortable: true
            }
        });
    };
var grid = new Ext.grid.GridPanel({
        store: store,
        colModel: createColModel(40), 
        loadMask: true,
		frame: true,
		enableColLock:false,
		height: 360,    
        width: 360,
        layout: 'fit',
    	selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
    	plugins: [filters],
		sm: sm2,
        listeners: {
            render: {
                fn: function(){
                    store.reload({
                        params: {
                            start: 0,
                            limit: 10    
                        }
                    });
                }
            }
        },
		tbar: [{
            	iconCls: 'icon-add',
           		text: 'Add User',
				id:'btnAdd',
            	handler: function() {
               location.href="create-user.php"; }
        	},'-',
           { 
            text: 'Delete User',
            handler: confirmDeleteUsers,  
            iconCls:'remove',
			ref: '../removeButton',
			disabled: true
      		}
	  ], 
        bbar: new Ext.PagingToolbar({
            store: store,
            pageSize: 10,
			displayInfo: true,
           plugins: [filters]
        })
    });
grid.getBottomToolbar().add([
       '->',
       {
            text: 'Clear Filter Data',
            handler: function () {
                grid.filters.clearFilters();
            } 
        }  
    ]);
	
	store.on('load',function (){					  
	 loadingMask.hide();	
    });
	
 
var UserWindow = new Ext.Window({
        title: 'View User Information',
        height: 380,
		modal:true,
        width: 450,
		border: false,
        layout: 'fit',
		closeAction:'close',
		
		collapsible:'true',
		
        items: grid
    }).show();
	var varWidth =  (screen.width - UserWindow.width)/2;
	UserWindow.setPosition(varWidth,((screen.height/4)-85));
	if(flgAdd == "true"){
				Ext.getCmp('btnAdd').enable();
 }else
{
				Ext.getCmp('btnAdd').disable();
}
if(flgEdit == "false"){
	grid.getColumnModel().setHidden(1, true);
}

	
});