git.roojs.org Git - roojs1/blob - examples/bootstrap/modal.js

   1 /*
   2  * To change this template, choose Tools | Templates
   3  * and open the template in the editor.
   4  */
   5
   6
   7
   8 Roo.example = Roo.example || {};
   9
  10 Roo.example.modal = new Roo.XComponent({
  11     part     :  ["layout","modal"],
  12     order    : '001-modal',
  13     region   : '',
  14     parent   : '#bootstrap',
  15     name     : "unnamed module",
  16     disabled : false,
  17     permname : '',
  18     _tree : function()
  19     {
  20         this.parent = {
  21             el : new Roo.bootstrap.Body()
  22         }
  23         this.parent.el.layout = false;
  24         this.parent.el.render(document.body);
  25
  26         var _this = this;
  27         var MODULE = this;
  28         var baseURL = '/web.eventmanager/demo.local.php';
  29
  30         return {
  31             xtype: 'Modal',
  32             xns: Roo.bootstrap,
  33             title : "Login",
  34             buttons : Roo.bootstrap.Modal.OKCANCEL,
  35             listeners : {
  36                 btnclick : function (name, e) {
  37                     if(name == 'cancel'){
  38                         _this.loginModal.hide();
  39                     }
  40
  41                     Roo.log(name);
  42                 },
  43                 render : function (_self) {
  44                     _this.loginModal = _self;
  45                 }
  46             },
  47             items : [
  48                 {
  49                     xtype: 'Container',
  50                     xns: Roo.bootstrap,
  51                     items : [
  52                         {
  53                             xtype: 'Img',
  54                             xns: Roo.bootstrap,
  55                             src : 'http://www.lifestylecareers.com.au/plugins/p10_mi_loginpanel/log-in-linkedin-small.png',
  56                             href : '{baseURL}'
  57                         }
  58                     ]
  59                 },
  60                 {
  61                     xtype: 'Container',
  62                     xns: Roo.bootstrap,
  63                     well : 'md',
  64                     style : 'margin-top:20px',
  65                     items : [
  66                         {
  67                             xtype: 'Form',
  68                             xns: Roo.bootstrap,
  69                             listeners : {
  70                                 actioncomplete : function (_self, action) {
  71                                     if (action.type =='submit') {
  72                                         _this.loginModal.hide();
  73                                     }
  74                                 }
  75                             },
  76                             items : [
  77                                 {
  78                                     xtype: 'Input',
  79                                     xns: Roo.bootstrap,
  80                                     fieldLabel : 'Email',
  81                                     inputType : 'email',
  82                                     vtype : 'email'
  83                                 },
  84                                 {
  85                                     xtype: 'Input',
  86                                     xns: Roo.bootstrap,
  87                                     fieldLabel : 'Password',
  88                                     inputType : 'password'
  89                                 }
  90                             ]
  91                         }
  92                     ]
  93                 }
  94             ]
  95         };
  96     }
  97 });