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