Ext.onReady(function()
{
    // create the Data Store
	var store = new Ext.data.JsonStore({
	    url: 'feedback_service.cgi',
	    root: 'feeds',
	    fields: ['name', {name: 'posted', type:'date', dateFormat: 'Y-m-d H:i:s'}, 'feedback'],
	    totalProperty: 'totalCount',
        idProperty: 'id'
	});
    store.setDefaultSort('posted', 'desc');
    
	var pagingBar = new Ext.PagingToolbar({
		pageSize: 25,
		store: store,
		displayInfo: true,
		displayMsg: 'Displaying feedbacks {0} - {1} of {2}',
		emptyMsg: "No feedback to display"
	});

    // pluggable renders
    function renderName(value, p, record)
    {
        return String.format('<b>{0}</b>',value);
    }
    
    function renderPosted(value, p, r)
    {
        return value.dateFormat('M j, Y');
    }

    var grid = new Ext.grid.GridPanel({
        el:'feeds',
        width: 613,
        height: 673,
        title:'User feedback',
        store: store,
        trackMouseOver:false,
        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: "Posted by",
            dataIndex: 'name',
            width: 442,
            renderer: renderName,
            sortable: true
        },{
            header: "Date of post",
            dataIndex: 'posted',
            width: 150,
            renderer: renderPosted,
            sortable: true
        }],
		stripeRows: true,
        // customize view config
        viewConfig: 
        {
            //forceFit:true,
            enableRowBody:true,
            getRowClass : function(record, rowIndex, p, store)
            {
                var cls = '';
				var data = record.data;
				
                p.body = '<p style="padding: 0px 0px 3px 5px">'+record.data.feedback+'</p>';
				return cls;
            }
        },
        // paging bar on the bottom
        bbar: pagingBar
    });

    // render it
    grid.render();
    
    store.load({params:{start:0, limit:25}});
});
/*
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});
*/