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