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