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