examples/grid/viewpanel.js

diff --git a/examples/grid/viewpanel.js b/examples/grid/viewpanel.js
index bae297f..f7fbcb1 100644 (file)
--- a/examples/grid/viewpanel.js
+++ b/examples/grid/viewpanel.js
@@ -31,13 +31,31 @@ Roo.onReady(function(){
         // turn on remote sorting
         remoteSort: true
     });
-    
+
+
+    // pluggable renders
+    function renderTopic(value, p, record){
+        return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
+    }
+    function renderTopicPlain(value){
+        return String.format('<b><i>{0}</i></b>', value);
+    }
+    function renderLast(value, p, r){
+        return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
+    }
+    function renderLastPlain(value){
+        return value.dateFormat('M j, Y, g:i a');
+    }
+
+    // the column model has information about grid columns
+    // dataIndex maps the column to the specific data field in
+    // the data store
     var cm = new Roo.grid.ColumnModel([{
            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Topic",
            dataIndex: 'title',
            width: 490,
-           renderer: String.format('{0}', 'test'),
+           renderer: renderTopic,
            css: 'white-space:normal;'
         },{
            header: "Author",
@@ -49,18 +67,56 @@ Roo.onReady(function(){
            header: "Last Post",
            dataIndex: 'lastPost',
            width: 150,
-           renderer: String.format('{0}', 'test')
+           renderer: renderLast
         }]);
+
     
-    var view = Roo.grid.ViewPanel("view", {
+
+    // create the editor grid
+    var grid = new Roo.grid.Grid('topic-grid', {
         ds: ds,
         cm: cm,
+        selModel: new Roo.grid.RowSelectionModel({singleSelect:true}),
         enableColLock:false,
         loadMask: true
     });
-    
+
+    // make the grid resizable, do before render for better performance
+    var rz = new Roo.Resizable('topic-grid', {
+        wrap:true,
+        minHeight:100,
+        pinned:true,
+        handles: 's'
+    });
+    rz.on('resize', grid.autoSize, grid);
+
     // render it
-    view.render();
-    
+    grid.render();
+
+    var gridFoot = grid.getView().getFooterPanel(true);
+
+    // add a paging toolbar to the grid's footer
+    var paging = new Roo.PagingToolbar(gridFoot, ds, {
+        pageSize: 25,
+        displayInfo: true,
+        displayMsg: 'Displaying topics {0} - {1} of {2}',
+        emptyMsg: "No topics to display"
+    });
+    // add the detailed view button
+    paging.add('-', {
+        pressed: true,
+        enableToggle:true,
+        text: 'Detailed View',
+        cls: 'x-btn-text-icon details',
+        toggleHandler: toggleDetails
+    });
+
+    // trigger the data store load
+    ds.load({params:{start:0, limit:25}});
 
+    function toggleDetails(btn, pressed){
+        cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
+        cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
+        grid.getView().refresh();
+    }
 });
\ No newline at end of file