Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'topics',
        totalProperty: 'totalCount',
        idProperty: 'threadid',
        remoteSort: true,

        fields: [
            'title', 'forumtitle', 'forumid', 'author',
            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
            'lastposter', 'excerpt', 'url'
        ],

        // 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: '/modulos/noticias/paging-items.php'
        })

    });



    // pluggable renders
    function renderTopic(value, p, record){
        return String.format(
                '<table border="0"><tr><td width="30"><img src="/img/web/lasticon.png" width="30" heigth="30"/></td><td><b><a href="{2}">{0}</a></b><a href="{2}">{1}</a></td></table>',
                value, record.data.forumtitle, record.data.url, record.data.forumid);
    }
    function renderLast(value, p, r){
        return String.format('{0}<br/>por {1}', r.data.lastposter, 'Admin');
    }



    var grid = new Ext.grid.GridPanel({
        el:'noticias',
        width:550,
        store: store,
		border: false,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,
		autoHeight:true,
        columns:[{
            id: 'topic',
			header: "Contenido",
            dataIndex: 'title',
			menuDisabled:true,
            width: 420,
            renderer: renderTopic
        },{
            id: 'last',
            header: "Publicacion",
			dataIndex: 'lastpost',
			menuDisabled:true,
            width: 150,
            renderer: renderLast
        }],

        // customize view config
        viewConfig: {
			scrollOffset:0,
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p style="margin-left:10px;margin-bottom:5px;cursor:hand;cursor:pointer;" onclick="location.href=\''+record.data.url+'\'">'+record.data.excerpt+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        }
    });


    // render it
    grid.render();

    // trigger the data store load
    store.load({params:{start:0, limit:4}});
});




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();
    }
});