var gridstore;

Ext.onReady(function(){


    if(document.getElementById('adduserbutton') != null){
            new Ext.Button({
                id:"adduser",
                renderTo:"adduserbutton",
                text: lang('Add Staff'),
                iconAlign: 'left',
                handler:function(){
                    addStaff();
                }
            });
    }

    gridstore = new Ext.data.JsonStore({
            id: "gridstore",
            root: 'staff',
            totalProperty: 'totalcount',
            idProperty: 'id',
            remoteSort: true,
            baseParams: {
            filter: "",
            customerid: "0"
        },
        fields: [
                'id','name','groupname', 'status','email'
        ],
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
                url: 'index.php?fuse=admin&action=GetStaffList'
        })
    });
    gridstore.setDefaultSort('id', 'asc');

    function renderName(value, p, record){
        name = String.format("<a href='index.php?fuse=admin&view=EditAddAdminAccount&adminid={1}'>{0}</a>",record.data.name,record.data.id);
        return name;
    }

    var grid = new Ext.grid.GridPanel({
        el:'staff-grid',
	autoHeight:true,
        store: gridstore,
        trackMouseOver:true,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'id', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Id"),
            width: 50,
			dataIndex : "id",
			hidden:true,
            sortable: false,
			align:"left"
        },{
            id: 'staffname', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Name"),
            width: 320,	
    		dataIndex : "name",
    		renderer: renderName,
            sortable: false
        },{
            id: 'email', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Email"),
            width: 100,	
    		dataIndex : "email",
            sortable: false
        },{
            id: 'groupname', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Group"),
            width: 60,	
    		dataIndex : "groupname",
            sortable: false
        },{
            id: 'status', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Status"),
            width: 40,	
    		dataIndex : "status",
            sortable: false
        }
        ],
		stripeRows: true,
        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            emptyText: lang("There are no staff available to view at this time"),
            scrollOffset:1
        }

    });

    // render it
    grid.render();
    gridstore.setBaseParam('limit', 50);
    gridstore.load({params:{start:0}});

});