git.roojs.org Git - roojs1/blob - examples/grid/viewpanel.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 Roo.BLANK_IMAGE_URL  = "../../images/default/s.gif";
  13
  14 var grid = false;
  15
  16 Roo.onReady(function(){
  17     Roo.QuickTips.init();
  18     function formatBoolean(value){
  19         return value ? 'Yes' : 'No';
  20     };
  21
  22     function formatDate(value){
  23         return value ? value.dateFormat('M d, Y') : '';
  24     };
  25     // shorthand alias
  26 //    var fm = Roo.form, Ed = Roo.ViewPanel;
  27
  28     // the column model has information about grid columns
  29     // dataIndex maps the column to the specific data field in
  30     // the data store (created below)
  31     var cm = new Roo.grid.ColumnModel([{
  32            header: "Common Name",
  33            dataIndex: 'url',
  34            width: 220  /*,
  35
  36            editor: new Ed(new fm.TextField({
  37                allowBlank: false
  38            })) */
  39         }]);
  40     Roo.log(cm);
  41     // by default columns are sortable
  42     cm.defaultSortable = true;
  43
  44     // this could be inline, but we want to define the Plant record
  45     // type so we can add records dynamically
  46     //
  47     // create the Data Store
  48     var ds = new Roo.data.Store({
  49         // load using HTTP
  50         proxy: new Roo.data.HttpProxy({url: 'get-images.php'}),
  51         remoteSort : true,
  52
  53         // the return will be XML, so lets set up a reader
  54         reader: new Roo.data.JsonReader({
  55             root: 'images',
  56             totalProperty: 'totalCount',
  57             id: 'id'
  58         }, [
  59             {name: 'name', type: 'string'},
  60             {name: 'size', type: 'string'},
  61             {name: 'lastmod', type: 'string'},
  62             {name: 'url', type: 'string'}
  63         ])
  64     });
  65
  66     // create the editor grid
  67     grid = new Roo.ViewPanel('editor-grid', {
  68         ds: ds,
  69         cm: cm,
  70         enableColLock:false,
  71         multiSort : true,
  72         enableDragDrop : true
  73
  74     });
  75
  76
  77
  78     var layout = Roo.BorderLayout.create({
  79         center: {
  80             margins:{left:3,top:3,right:3,bottom:3},
  81             panels: [new Roo.GridPanel(grid)]
  82         }
  83     }, 'grid-panel');
  84
  85
  86     // render it
  87     grid.render();
  88
  89
  90     var gridHead = grid.getView().getHeaderPanel(true);
  91     var tb = new Roo.Toolbar(gridHead, [{
  92         text: 'Add new',
  93         handler : function(){
  94             Roo.log('clicked');
  95         }
  96     }]);
  97
  98     // trigger the data store load
  99 //    ds.load();
 100
 101     var gridFoot = grid.getView().getFooterPanel(true);
 102
 103     // add a paging toolbar to the grid's footer
 104     var paging = new Roo.PagingToolbar(gridFoot, ds, {
 105         pageSize: 25,
 106         displayInfo: true,
 107         displayMsg: 'Displaying topics {0} - {1} of {2}',
 108         emptyMsg: "No topics to display"
 109     });
 110     // add the detailed view button
 111     paging.add('-', {
 112         pressed: true,
 113         enableToggle:true,
 114         text: 'Detailed View',
 115         cls: 'x-btn-text-icon details',
 116         toggleHandler: toggleDetails
 117     });
 118
 119     // trigger the data store load
 120     ds.load({params:{start:0, limit:25}});
 121
 122     function toggleDetails(btn, pressed){
 123         cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
 124         cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
 125         grid.getView().refresh();
 126     }
 127 });