git.roojs.org Git - roojs1/blob - examples/grid/calendar.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
  15 var Example = {
  16     init : function(){
  17         // some data yanked off the web
  18
  19
  20         // create the Grid
  21         this.grid = new Roo.grid.Calendar('grid-example', {
  22             background: false,
  23             eventStore : {
  24                         xtype: 'Store',
  25                         xns: Roo.data,
  26                         listeners : {
  27                             beforeload : function (_self, o){
  28                                 o.params = o.params || {};
  29                                 //var d = new Date().format('Y-m-d');
  30                                 //if(_this.cal){
  31                                 //    d = typeof(_this.cal.activeDate) == 'string' ? _this.cal.activeDate : _this.cal.activeDate.format("Y-m-d");
  32                                 //}
  33                                 //o.params._activeDate = d
  34                             }
  35                         },
  36                         remoteSort : true,
  37                         sortInfo : { direction : 'ASC', field: 'start_dt' },
  38                         proxy : {
  39                             xtype: 'HttpProxy',
  40                             xns: Roo.data,
  41                             method : 'GET',
  42                             url : 'http://roojs.com/admin.php/Roo/mtrack_ticket?_dc=1396967515369&_future_schedule=1&query%5Bviewtype%5D=active&limit=999&sort=summary&dir=ASC'
  43                         },
  44                         reader : {
  45                             xtype: 'JsonReader',
  46                             xns: Roo.data,
  47                             id : 'id',
  48                             root : 'data',
  49                             totalProperty : 'total',
  50                             fields : [{"name":"id","type":"int"},{"name":"title","type":"string"}]
  51                         }
  52                     }
  53         });
  54
  55         var gpanel = new Roo.GridPanel(this.grid);
  56         var layout = Roo.BorderLayout.create({
  57             center: {
  58                 margins:{left:3,top:3,right:3,bottom:3},
  59                 panels: [ gpanel ]
  60             }
  61         }, 'grid-panel');
  62
  63         this.grid.render();
  64         var gridHead = this.grid.getView().getHeaderPanel(true);
  65         var tb = new Roo.Toolbar(gridHead, [ {
  66                             xtype: 'Button',
  67                             xns: Roo.Toolbar,
  68                             listeners : {
  69                                 click : function (_self, e)
  70                                 {
  71                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
  72                                     sd.setMonth(sd.getMonth()-1);
  73                                     _this.monthField.setValue(sd.format('Y-m-d'));
  74                                     _this.grid.ds.load({});
  75                                 }
  76                             },
  77                             text : "Back"
  78                         },
  79                         {
  80                             xtype: 'Separator',
  81                             xns: Roo.Toolbar
  82                         },
  83                         {
  84                             xtype: 'MonthField',
  85                             xns: Roo.form,
  86                             listeners : {
  87                                 render : function (_self)
  88                                 {
  89                                     _this.monthField = _self;
  90                                    // _this.monthField.set  today
  91                                 },
  92                                 select : function (combo, date)
  93                                 {
  94                                     _this.grid.ds.load({});
  95                                 }
  96                             },
  97                             value : (function() { return new Date(); })()
  98                         },
  99                         {
 100                             xtype: 'Separator',
 101                             xns: Roo.Toolbar
 102                         },
 103                         {
 104                             xtype: 'TextItem',
 105                             xns: Roo.Toolbar,
 106                             text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
 107                         },
 108                         {
 109                             xtype: 'Fill',
 110                             xns: Roo.Toolbar
 111                         },
 112                         {
 113                             xtype: 'Button',
 114                             xns: Roo.Toolbar,
 115                             listeners : {
 116                                 click : function (_self, e)
 117                                 {
 118                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
 119                                     sd.setMonth(sd.getMonth()+1);
 120                                     _this.monthField.setValue(sd.format('Y-m-d'));
 121                                     _this.grid.ds.load({});
 122                                 }
 123                             },
 124                             text : "Next"
 125                         }
 126     ]);
 127
 128
 129
 130         //grid.getSelectionModel().selectFirstRow();
 131     }
 132 };
 133 Roo.onReady(Example.init, Example);