git.roojs.org Git - roojs1/blob - examples/bootstrap4/dynamic-components.js

   1 /*
   2
   3 The idea of this is to work out a new way for the builder to generate code
   4 That is more component based..
   5 -> basically the top level item would be 'extend' something... - like document body, etc..
   6 and then it would render the children...
   7
   8 Changes that might need making?
   9
  10 ?? can we apply it back to the old Roo library?
  11
  12 ** builder--- needs updateing
  13 ** need test for dialogs... - should be pretty similar to existing.
  14 **
  15
  16
  17  */
  18 Roo.debug=1;
  19 Roo.namespace('Dynamic');
  20
  21 Dynamic.Component = function(cfg)
  22 {
  23     var _this = this;
  24     var STRINGS = Dynamic.Component._strings;
  25     Roo.apply(this,cfg);
  26
  27     // by modifying the incomming 'cfg' and adding the 'items' - the xAdd caller get's the new children.
  28     // ** this might cause a problem that you can't add children to 'components?'
  29     // -- example??
  30     // component == a toolbar...
  31     // we might want to add buttons to it..
  32     // let's leave this for now..
  33
  34
  35     cfg.items = [
  36              {
  37               '|xns' : 'Roo.bootstrap',
  38               cls : 'form-box',
  39               xns : Roo.bootstrap,
  40               xtype : 'Container',
  41               items : [
  42                {
  43                 '|xns' : 'Roo.bootstrap',
  44                 cls : 'header',
  45                 html : STRINGS['b6d4223e60986fa4c9af77ee5f7149c5'],
  46                 xns : Roo.bootstrap,
  47                 xtype : 'Container'
  48                },
  49                {
  50
  51                 // our 'sub component here..
  52                 '|xns' : 'Dynamic.Component',
  53                 xns : Dynamic.Component,
  54                 xtype : 'Form',
  55
  56
  57                },
  58                {
  59                 '|xns' : 'Roo.bootstrap',
  60                 cls : 'footer',
  61                 xns : Roo.bootstrap,
  62                 xtype : 'Container',
  63                 items : [
  64                  {
  65                   '|xns' : 'Roo.bootstrap',
  66                   cls : 'btn-block',
  67                   html : STRINGS['3c0445c81a81e7508168c61674497f7d'],
  68                   weight : 'primary',
  69                   xns : Roo.bootstrap,
  70                   xtype : 'Button'
  71                  },
  72                  {
  73                   '|xns' : 'Roo.bootstrap',
  74                   tag : 'p',
  75                   xns : Roo.bootstrap,
  76                   xtype : 'Container',
  77                   items : [
  78                    {
  79                     '|xns' : 'Roo.bootstrap',
  80                     href : '#',
  81                     html : STRINGS['b05d72142020283dc6812fd3a9bc691c'],
  82                     xns : Roo.bootstrap,
  83                     xtype : 'Link'
  84                    }
  85                   ]
  86
  87                  },
  88                  {
  89                   '|xns' : 'Roo.bootstrap',
  90                   tag : 'p',
  91                   xns : Roo.bootstrap,
  92                   xtype : 'Container',
  93                   items : [
  94                    {
  95                     '|xns' : 'Roo.bootstrap',
  96                     cls : 'text-center',
  97                     href : '#',
  98                     html : STRINGS['11268c03b59cc646b0fb7c4cb592130b'],
  99                     xns : Roo.bootstrap,
 100                     xtype : 'Link'
 101                    }
 102                   ]
 103
 104                  }
 105                 ]
 106
 107                }
 108               ]
 109
 110              }
 111             ];
 112
 113     Dynamic.Component.superclass.constructor.call(this, cfg);
 114
 115     // we can add 'events that the extended element creates here..
 116     this.addEvents({
 117         //eg..
 118        // "click" : true,
 119        // "toggle" : true
 120     });
 121
 122     ///this.on(.....)
 123
 124
 125
 126 }
 127
 128 Roo.extend(Dynamic.Component, Roo.bootstrap.Body, {
 129
 130     // methods in here...
 131     // properties here..
 132     '|xns' : 'Roo.bootstrap',
 133     cls : 'bg-black',
 134     style : 'min-height: 100%;',
 135
 136
 137     // listeners??
 138
 139
 140
 141 });
 142
 143 Roo.apply(Dynamic.Component, {
 144  _strings : {
 145   '0c83f57c786a0b4a39efab23731c7ebc' :"email",
 146   '3c0445c81a81e7508168c61674497f7d' :"Sign me in",
 147   'b05d72142020283dc6812fd3a9bc691c' :"I forgot my password",
 148   'b6d4223e60986fa4c9af77ee5f7149c5' :"Sign in",
 149   '5f4dcc3b5aa765d61d8327deb882cf99' :"password",
 150   '11268c03b59cc646b0fb7c4cb592130b' :"Register a new menbership"
 151  }
 152 });
 153
 154 /* ------------------------------------------------------------------------------ */
 155
 156
 157 Dynamic.Component.Form = function(cfg)
 158 {
 159     var _this = this;
 160     var STRINGS = Dynamic.Component.Form._strings;
 161
 162     // in theory you can use 'cfg.XXX to fill in values...' == eg. cfg.XXX || '10'
 163
 164     Roo.apply(this,cfg);
 165
 166     cfg.items  = [
 167          {
 168           '|xns' : 'Roo.bootstrap',
 169           cls : 'body bg-gray',
 170           xns : Roo.bootstrap,
 171           xtype : 'Container',
 172           items : [
 173            {
 174             '|xns' : 'Roo.bootstrap',
 175             placeholder : STRINGS['0c83f57c786a0b4a39efab23731c7ebc'],
 176             xns : Roo.bootstrap,
 177             xtype : 'Input'
 178            },
 179            {
 180             '|xns' : 'Roo.bootstrap',
 181             inputType : 'password',
 182             placeholder : STRINGS['5f4dcc3b5aa765d61d8327deb882cf99'],
 183             xns : Roo.bootstrap,
 184             xtype : 'Input'
 185            },
 186            {
 187             '|xns' : 'Roo.bootstrap',
 188             boxLabel : 'Remember me',
 189             cls : cfg.rememberCls,
 190             xns : Roo.bootstrap,
 191             xtype : 'CheckBox'
 192            }
 193           ]
 194          }
 195         ];
 196
 197
 198
 199
 200     Dynamic.Component.Form.superclass.constructor.call(this, cfg);
 201
 202     // we can add 'events that the extended element creates here..
 203     this.addEvents({
 204         //eg..
 205        // "click" : true,
 206        // "toggle" : true
 207     });
 208
 209 }
 210
 211 Roo.extend(Dynamic.Component.Form, Roo.bootstrap.Form, {
 212
 213     // methods in here...
 214
 215     // default values here...
 216     rememberCls : 'xxxx', // these could be configurable items.. (the UI can pick them up as optional values.)
 217
 218
 219
 220 });
 221
 222 Roo.apply(Dynamic.Component.Form, {
 223  _strings : {
 224   '0c83f57c786a0b4a39efab23731c7ebc' :"emailx",
 225   '5f4dcc3b5aa765d61d8327deb882cf99' :"password",
 226  }
 227 });