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
  24 Dynamic.Component = function(cfg)
  25 {
  26     var _this = this;
  27     var STRINGS = Dynamic.Component._strings;
  28
  29     config = Roo.apply({
  30         // the values specified in the builder for this element go here...
  31             '|xns' : 'Roo.bootstrap',
  32             cls : 'bg-black',
  33             style : 'min-height: 100%;',
  34             //xns : Roo.bootstrap,
  35             //xtype : 'Body', << not needed...
  36             items : [
  37              {
  38               '|xns' : 'Roo.bootstrap',
  39               cls : 'form-box',
  40               xns : Roo.bootstrap,
  41               xtype : 'Container',
  42               items : [
  43                {
  44                 '|xns' : 'Roo.bootstrap',
  45                 cls : 'header',
  46                 html : _this._strings['b6d4223e60986fa4c9af77ee5f7149c5'],
  47                 xns : Roo.bootstrap,
  48                 xtype : 'Container'
  49                },
  50                {
  51                 '|xns' : 'Roo.bootstrap',
  52                 xns : Roo.bootstrap,
  53                 xtype : 'Form',
  54                 items : [
  55                  {
  56                   '|xns' : 'Roo.bootstrap',
  57                   cls : 'body bg-gray',
  58                   xns : Roo.bootstrap,
  59                   xtype : 'Container',
  60                   items : [
  61                    {
  62                     '|xns' : 'Roo.bootstrap',
  63                     placeholder : _this._strings['0c83f57c786a0b4a39efab23731c7ebc'],
  64                     xns : Roo.bootstrap,
  65                     xtype : 'Input'
  66                    },
  67                    {
  68                     '|xns' : 'Roo.bootstrap',
  69                     inputType : 'password',
  70                     placeholder : _this._strings['5f4dcc3b5aa765d61d8327deb882cf99'],
  71                     xns : Roo.bootstrap,
  72                     xtype : 'Input'
  73                    },
  74                    {
  75                     '|xns' : 'Roo.bootstrap',
  76                     boxLabel : 'Remember me',
  77                     xns : Roo.bootstrap,
  78                     xtype : 'CheckBox'
  79                    }
  80                   ]
  81
  82                  }
  83                 ]
  84
  85                },
  86                {
  87                 '|xns' : 'Roo.bootstrap',
  88                 cls : 'footer',
  89                 xns : Roo.bootstrap,
  90                 xtype : 'Container',
  91                 items : [
  92                  {
  93                   '|xns' : 'Roo.bootstrap',
  94                   cls : 'btn-block',
  95                   html : _this._strings['3c0445c81a81e7508168c61674497f7d'],
  96                   weight : 'primary',
  97                   xns : Roo.bootstrap,
  98                   xtype : 'Button'
  99                  },
 100                  {
 101                   '|xns' : 'Roo.bootstrap',
 102                   tag : 'p',
 103                   xns : Roo.bootstrap,
 104                   xtype : 'Container',
 105                   items : [
 106                    {
 107                     '|xns' : 'Roo.bootstrap',
 108                     href : '#',
 109                     html : _this._strings['b05d72142020283dc6812fd3a9bc691c'],
 110                     xns : Roo.bootstrap,
 111                     xtype : 'Link'
 112                    }
 113                   ]
 114
 115                  },
 116                  {
 117                   '|xns' : 'Roo.bootstrap',
 118                   tag : 'p',
 119                   xns : Roo.bootstrap,
 120                   xtype : 'Container',
 121                   items : [
 122                    {
 123                     '|xns' : 'Roo.bootstrap',
 124                     cls : 'text-center',
 125                     href : '#',
 126                     html : _this._strings['11268c03b59cc646b0fb7c4cb592130b'],
 127                     xns : Roo.bootstrap,
 128                     xtype : 'Link'
 129                    }
 130                   ]
 131
 132                  }
 133                 ]
 134
 135                }
 136               ]
 137
 138              }
 139             ]
 140     }, cfg);
 141
 142     Dynamic.Component.superclass.constructor.call(this, config);
 143
 144     // we can add 'events that the extended element creates here..
 145     this.addEvents({
 146         //eg..
 147        // "click" : true,
 148        // "toggle" : true
 149     });
 150
 151
 152
 153 }
 154
 155 Roo.extend(Dynamic.Component, Roo.bootstrap.Body, {
 156
 157     // children...
 158
 159     // addxtype << this is the entry point for this component being
 160
 161
 162
 163
 164 });
 165
 166 Roo.apply(Dynamic.Component, {
 167  _strings : {
 168   '0c83f57c786a0b4a39efab23731c7ebc' :"email",
 169   '3c0445c81a81e7508168c61674497f7d' :"Sign me in",
 170   'b05d72142020283dc6812fd3a9bc691c' :"I forgot my password",
 171   'b6d4223e60986fa4c9af77ee5f7149c5' :"Sign in",
 172   '5f4dcc3b5aa765d61d8327deb882cf99' :"password",
 173   '11268c03b59cc646b0fb7c4cb592130b' :"Register a new menbership"
 174  }
 175 });
 176
 177