git.roojs.org Git - Pman.Core/blob - widgets/FieldSetEx.js

   1 //<script type="text/javascript">
   2
   3
   4 Ext.form.FieldSetEx = function(config){
   5     Ext.form.FieldSetEx.superclass.constructor.call(this, config);
   6    /* if (!this.id) {
   7         this.id = Ext.id();
   8     }*/
   9     this.addEvents({
  10         expand: true
  11     });
  12 };
  13
  14 Ext.extend(Ext.form.FieldSetEx, Ext.form.FieldSet, {
  15     collapseGroup : false,
  16     expanded: true,
  17     outer: false,
  18     fs : false,
  19     name : false,
  20     hiddenEl: false,
  21     defaultAutoCreate :  {tag: 'fieldset', cn: { tag:'legend' }},
  22     defaultBorder  : '',
  23
  24     onRender : function(ct, position)
  25     {
  26
  27         if(this.el){
  28             this.el = Roo.get(this.el);
  29         }else {
  30             // wrap the fieldset up so wee can  mask the contents..
  31
  32             var cfg = this.getAutoCreate();
  33             this.fs = ct.createChild(cfg, position);
  34             if(this.style){
  35                 this.fs.applyStyles(this.style);
  36             }
  37             // add the hidden value
  38             if (this.name) {
  39                 this.hiddenEl = this.fs.createChild({
  40                         tag: 'input' ,
  41                         type: 'hidden',
  42                         name : this.name,
  43                         value : '',
  44                         cls: 'x-form-item-display-none'
  45                 });
  46             }
  47
  48             this.el = this.fs.createChild({tag: 'div' });
  49             this.el.setVisibilityMode(Ext.Element.DISPLAY);
  50         }
  51
  52
  53
  54         Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
  55
  56         if(this.legend){
  57             this.setLegend(this.legend);
  58         }
  59         if (this.innerHTML) {
  60              this.el.createChild({ tag: 'div', cls: 'x-form-item' , html : this.innerHTML });
  61
  62         }
  63
  64         var l = this.fs.child('legend');
  65         l.setStyle(
  66             'background',
  67             'transparent url('+ Ext.rootURL + '/images/default/menu/chk-sprite.gif)  no-repeat scroll 0 0'
  68         );
  69
  70         l.setStyle('padding', '0 5 0 20');
  71         l.setStyle('cursor', 'pointer');
  72         l.on('click', function() {
  73             this.setExpand(!this.expanded);
  74
  75             // fire event..
  76         }, this);
  77
  78         var t = this;
  79         // not sure why but it always shows up visiable...
  80         setTimeout(function(){
  81             t.expand(t.expanded);
  82         }, 10);
  83
  84     },
  85     setExpand : function(state) // expand/collapse this, and reflect on others...
  86     {
  87         this.expanded = state;
  88         this.expand(state);
  89         this.collapseOthers(state);
  90         this.fireEvent('expand', this, state);
  91     },
  92     expand : function(state)
  93     {
  94         this.expanded = state;
  95         var l = this.fs.child('legend');
  96         l.setStyle('background-position', state ?  '0 -16px': '0 0');
  97         //l.setStyle(
  98         //    'background','transparent url('+ Ext.rootURL + 'images/default/menu/' +
  99         //        (state ? '' : 'un') + 'checked.gif) no-repeat scroll 0 0'
 100         //);
 101         this.fs.setStyle('padding', state && !this.defaultBorder.length ? '10 10 5' : '0 10');
 102         this.fs.setStyle('border', state ? this.defaultBorder : 'none');
 103         var d = this.fs.query('div');
 104         if (this.hiddenEl) {
 105             this.hiddenEl.dom.value = state * 1;
 106         }
 107         this.el.setVisible(state);
 108         //Ext.each(d, function(e) {
 109         //    Ext.get(e).setVisibilityMode(Ext.Element.DISPLAY);
 110         //    Ext.get(e).setVisible(state);
 111         //});
 112
 113
 114     },
 115
 116     collapseOthers:  function(state)
 117     {
 118         if (!this.form) { // needs context
 119             return;
 120         }
 121         var _this = this;
 122         Ext.each(this.form.allItems, function(f){
 123
 124
 125             if (f.collapseGroup &&  f.collapseGroup == _this.collapseGroup && _this.name != f.name) {
 126                 // toggle it!!!
 127                 f.expand(!state);
 128                 if (!state) {
 129                     return false; // no more... (if we unexpand the only the first get's expanded..
 130                 }
 131             }
 132         });
 133     },
 134
 135
 136     setLegend : function(text){
 137         if(this.rendered){
 138             var l = this.fs.child('legend');
 139             l.update(text);
 140
 141         }
 142     }
 143 });