git.roojs.org Git - roojs1/blob - Roo/form/ComboNested.js

   1 /*
   2  * RooJS Library 1.1.1
   3  * Copyright(c) 2008-2011  Alan Knowles
   4  *
   5  * License - LGPL
   6  */
   7
   8
   9 /**
  10  * @class Roo.form.ComboNested
  11  * @extends Roo.form.ComboBox
  12  * A combobox for that allows selection of nested items in a list,
  13  * eg.
  14  *
  15  *  Book
  16  *    -> red
  17  *    -> green
  18  *  Table
  19  *    -> square
  20  *      ->red
  21  *      ->green
  22  *    -> rectangle
  23  *      ->green
  24  *
  25  *
  26  * @constructor
  27  * Create a new ComboNested
  28  * @param {Object} config Configuration options
  29  */
  30 Roo.form.ComboNested = function(config){
  31     Roo.form.ComboCheck.superclass.constructor.call(this, config);
  32     // should verify some data...
  33     // like
  34     // hiddenName = required..
  35     // displayField = required
  36     // valudField == required
  37     var req= [ 'hiddenName', 'displayField', 'valueField' ];
  38     var _t = this;
  39     Roo.each(req, function(e) {
  40         if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
  41             throw "Roo.form.ComboNested : missing value for: " + e;
  42         }
  43     });
  44
  45
  46 };
  47
  48 Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
  49
  50
  51     list : null, // the outermost div..
  52     innerLists : null, // the
  53     views : null,
  54     stores : null,
  55     // private
  56     onRender : function(ct, position)
  57     {
  58         Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
  59
  60         if(this.hiddenName){
  61             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
  62                     'before', true);
  63             this.hiddenField.value =
  64                 this.hiddenValue !== undefined ? this.hiddenValue :
  65                 this.value !== undefined ? this.value : '';
  66
  67             // prevent input submission
  68             this.el.dom.removeAttribute('name');
  69
  70
  71         }
  72
  73         if(Roo.isGecko){
  74             this.el.dom.setAttribute('autocomplete', 'off');
  75         }
  76
  77         var cls = 'x-combo-list';
  78
  79         this.list = new Roo.Layer({
  80             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
  81         });
  82
  83         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
  84         this.list.setWidth(lw);
  85         this.list.swallowEvent('mousewheel');
  86         this.assetHeight = 0;
  87
  88         if(this.title){
  89             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
  90             this.assetHeight += this.header.getHeight();
  91         }
  92         this.innerLists = [];
  93         this.views = [];
  94         this.stores = [];
  95         for (var i =0 ; i < 3; i++) {
  96             this.onRenderList( cls, i);
  97         }
  98
  99         if(this.allowBlank && !this.disableClear){
 100             this.footer = this.list.createChild({cls:cls+'-ft'});
 101             this.pageTb = new Roo.Toolbar(this.footer);
 102         }
 103
 104
 105         if (this.pageTb && this.allowBlank && !this.disableClear) {
 106             var _this = this;
 107             this.pageTb.add(new Roo.Toolbar.Fill(), {
 108                 cls: 'x-btn-icon x-btn-clear',
 109                 text: '&#160;',
 110                 handler: function()
 111                 {
 112                     _this.collapse();
 113                     _this.clearValue();
 114                     _this.onSelect(false, -1);
 115                 }
 116             });
 117         }
 118         if (this.footer) {
 119             this.assetHeight += this.footer.getHeight();
 120         }
 121
 122     },
 123     onRenderList : function (  cls, i)
 124     {
 125
 126         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
 127
 128         var il = this.innerLists[i] = this.list.createChild({cls:cls+'-inner'});
 129         il.on('mouseover', this.onViewOver, this, { list:  i });
 130         il.on('mousemove', this.onViewMove, this, { list:  i });
 131         il.setWidth(lw - this.list.getFrameWidth('lr'));
 132
 133
 134
 135         if(!this.tpl){
 136             this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
 137         }
 138
 139         var store  = this.store;
 140         if (i > 0) {
 141             store  = new Roo.data.SimpleStore({
 142                 fields : [ 'key', 'value' ],
 143                 data : [ ]
 144             });
 145         }
 146         this.stores[i]  = store;
 147
 148
 149
 150         var view = this.views[i] = new Roo.View(il, this.tpl, {
 151             singleSelect:true,
 152             store: store,
 153             selectedClass: this.selectedClass
 154         });
 155
 156         view.on('click', this.onViewClick, this);
 157
 158         store.on('beforeload', this.onBeforeLoad, this);
 159         store.on('load', this.onLoad, this);
 160         store.on('loadexception', this.onLoadException, this);
 161
 162
 163
 164
 165
 166     },
 167     onResize : function()  {},
 168
 169     restrictHeight : function()
 170     {
 171         var mh = 0;
 172         Roo.each(this.innerLists, function(il,i) {
 173             il.dom.style.height = '';
 174             var inner = il.dom;
 175             var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
 176             il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
 177             mh = Math.max(il.getHeight(), mh);
 178         }, this);
 179
 180         this.list.beginUpdate();
 181         this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
 182         this.list.alignTo(this.el, this.listAlign);
 183         this.list.endUpdate();
 184
 185     },
 186     select : function(index, scrollIntoView)
 187     {
 188
 189         this.selectedIndex = index;
 190         return;
 191         this.view.select(index);
 192         if(scrollIntoView !== false){
 193             var el = this.view.getNode(index);
 194             if(el){
 195                 this.innerList.scrollChildIntoView(el, false);
 196             }
 197         }
 198     },
 199
 200     // -- store handlers..
 201
 202     // private
 203     onLoad : function(a,b,c,d)
 204     {
 205
 206         if(!this.hasFocus){
 207             return;
 208         }
 209
 210         if(this.store.getCount() > 0) {
 211             this.expand();
 212             this.restrictHeight();
 213         } else {
 214             this.onEmptyResults();
 215         }
 216         //this.el.focus();
 217     },
 218     // private
 219     onLoadException : function()
 220     {
 221         this.collapse();
 222         Roo.log(this.store.reader.jsonData);
 223         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
 224             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
 225         }
 226
 227
 228     } ,
 229
 230     onViewOver : function(e, t){
 231         Roo.log(arguments);
 232         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
 233             return;
 234         }
 235         var item = this.view.findItemFromChild(t);
 236         if(item){
 237             var index = this.view.indexOf(item);
 238             this.select(index, false);
 239         }
 240     },
 241
 242 });