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
  26     var config = Roo.apply({
  27         // the values specified in the builder for this element go here...
  28             '|xns' : 'Roo.bootstrap',
  29             cls : 'bg-black',
  30             style : 'min-height: 100%;',
  31             //xns : Roo.bootstrap,
  32             //xtype : 'Body', << not needed...
  33             items : [
  34              {
  35               '|xns' : 'Roo.bootstrap',
  36               cls : 'form-box',
  37               xns : Roo.bootstrap,
  38               xtype : 'Container',
  39               items : [
  40                {
  41                 '|xns' : 'Roo.bootstrap',
  42                 cls : 'header',
  43                 html : STRINGS['b6d4223e60986fa4c9af77ee5f7149c5'],
  44                 xns : Roo.bootstrap,
  45                 xtype : 'Container'
  46                },
  47                {
  48
  49                 // our 'sub component here..
  50                 '|xns' : 'Dynamic.Component',
  51                 xns : Dynamic.Component,
  52                 xtype : 'Form',
  53
  54
  55                },
  56                {
  57                 '|xns' : 'Roo.bootstrap',
  58                 cls : 'footer',
  59                 xns : Roo.bootstrap,
  60                 xtype : 'Container',
  61                 items : [
  62                  {
  63                   '|xns' : 'Roo.bootstrap',
  64                   cls : 'btn-block',
  65                   html : STRINGS['3c0445c81a81e7508168c61674497f7d'],
  66                   weight : 'primary',
  67                   xns : Roo.bootstrap,
  68                   xtype : 'Button'
  69                  },
  70                  {
  71                   '|xns' : 'Roo.bootstrap',
  72                   tag : 'p',
  73                   xns : Roo.bootstrap,
  74                   xtype : 'Container',
  75                   items : [
  76                    {
  77                     '|xns' : 'Roo.bootstrap',
  78                     href : '#',
  79                     html : STRINGS['b05d72142020283dc6812fd3a9bc691c'],
  80                     xns : Roo.bootstrap,
  81                     xtype : 'Link'
  82                    }
  83                   ]
  84
  85                  },
  86                  {
  87                   '|xns' : 'Roo.bootstrap',
  88                   tag : 'p',
  89                   xns : Roo.bootstrap,
  90                   xtype : 'Container',
  91                   items : [
  92                    {
  93                     '|xns' : 'Roo.bootstrap',
  94                     cls : 'text-center',
  95                     href : '#',
  96                     html : STRINGS['11268c03b59cc646b0fb7c4cb592130b'],
  97                     xns : Roo.bootstrap,
  98                     xtype : 'Link'
  99                    }
 100                   ]
 101
 102                  }
 103                 ]
 104
 105                }
 106               ]
 107
 108              }
 109             ]
 110     }, cfg);
 111
 112     Dynamic.Component.superclass.constructor.call(this, config);
 113
 114     // we can add 'events that the extended element creates here..
 115     this.addEvents({
 116         //eg..
 117        // "click" : true,
 118        // "toggle" : true
 119     });
 120
 121
 122
 123 }
 124
 125 Roo.extend(Dynamic.Component, Roo.bootstrap.Body, {
 126
 127     // methods in here...
 128
 129
 130
 131
 132 });
 133
 134 Roo.apply(Dynamic.Component, {
 135  _strings : {
 136   '0c83f57c786a0b4a39efab23731c7ebc' :"email",
 137   '3c0445c81a81e7508168c61674497f7d' :"Sign me in",
 138   'b05d72142020283dc6812fd3a9bc691c' :"I forgot my password",
 139   'b6d4223e60986fa4c9af77ee5f7149c5' :"Sign in",
 140   '5f4dcc3b5aa765d61d8327deb882cf99' :"password",
 141   '11268c03b59cc646b0fb7c4cb592130b' :"Register a new menbership"
 142  }
 143 });
 144
 145 /* ------------------------------------------------------------------------------ */
 146
 147
 148 Dynamic.Component.Form = function(cfg)
 149 {
 150     var _this = this;
 151     var STRINGS = Dynamic.Component.Form._strings;
 152
 153     // in theory you can use 'cfg.XXX to fill in values...' == eg. cfg.XXX || '10'
 154     cfg = Roo.apply(this,cfg);
 155
 156     Roo.apply(  {
 157
 158         items : [
 159          {
 160           '|xns' : 'Roo.bootstrap',
 161           cls : 'body bg-gray',
 162           xns : Roo.bootstrap,
 163           xtype : 'Container',
 164           items : [
 165            {
 166             '|xns' : 'Roo.bootstrap',
 167             placeholder : STRINGS['0c83f57c786a0b4a39efab23731c7ebc'],
 168             xns : Roo.bootstrap,
 169             xtype : 'Input'
 170            },
 171            {
 172             '|xns' : 'Roo.bootstrap',
 173             inputType : 'password',
 174             placeholder : STRINGS['5f4dcc3b5aa765d61d8327deb882cf99'],
 175             xns : Roo.bootstrap,
 176             xtype : 'Input'
 177            },
 178            {
 179             '|xns' : 'Roo.bootstrap',
 180             boxLabel : 'Remember me',
 181             cls : cfg.rememberCls,
 182             xns : Roo.bootstrap,
 183             xtype : 'CheckBox'
 184            }
 185           ]
 186          }
 187         ],cfg // cfg has to be applied to the schema...
 188     });
 189
 190
 191
 192     Dynamic.Component.Form.superclass.constructor.call(this, cfg);
 193
 194     // we can add 'events that the extended element creates here..
 195     this.addEvents({
 196         //eg..
 197        // "click" : true,
 198        // "toggle" : true
 199     });
 200
 201 }
 202
 203 Roo.extend(Dynamic.Component.Form, Roo.bootstrap.Form, {
 204
 205     // methods in here...
 206
 207     // default values here...
 208     rememberCls : 'xxxx', // these could be configurable items.. (the UI can pick them up as optional values.)
 209
 210
 211
 212 });
 213
 214 Roo.apply(Dynamic.Component.Form, {
 215  _strings : {
 216   '0c83f57c786a0b4a39efab23731c7ebc' :"emailx",
 217   '5f4dcc3b5aa765d61d8327deb882cf99' :"password",
 218  }
 219 });