Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
+ /*
+ * @config {Number} max Number of columns to show
+ */
+
+ maxColumns : 3,
list : null, // the outermost div..
innerLists : null, // the
this.onRenderList( cls, i);
}
- if(this.allowBlank && !this.disableClear){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.Toolbar(this.footer);
- }
-
+ // always needs footer, as we are going to have an 'OK' button.
+ this.footer = this.list.createChild({cls:cls+'-ft'});
+ this.pageTb = new Roo.Toolbar(this.footer);
+ var _this = this;
+ this.pageTb.add( {
+
+ text: 'Done',
+ handler: function()
+ {
+ _this.collapse();
+ }
+ });
- if (this.pageTb && this.allowBlank && !this.disableClear) {
- var _this = this;
+ if ( this.allowBlank && !this.disableClear) {
+
this.pageTb.add(new Roo.Toolbar.Fill(), {
cls: 'x-btn-icon x-btn-clear',
text: ' ',
{
var lw = Math.floor(
- ((this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / 3
- );;
+ ((this.listWidth * 3 || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / 3
+ );
+
+ this.list.setWidth(lw); // default to '1'
var il = this.innerLists[i] = this.list.createChild({cls:cls+'-inner'});
- il.on('mouseover', this.onViewOver, this, { list: i });
- il.on('mousemove', this.onViewMove, this, { list: i });
+ //il.on('mouseover', this.onViewOver, this, { list: i });
+ //il.on('mousemove', this.onViewMove, this, { list: i });
il.setWidth(lw);
-
+ il.setStyle({ 'overflow-x' : 'hidden'});
if(!this.tpl){
- this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+ this.tpl = new Roo.Template({
+ html : '<div class="'+cls+'-item '+cls+'-item-{cn:this.isEmpty}">{' + this.displayField + '}</div>',
+ isEmpty: function (value, allValues) {
+ //Roo.log(value);
+ var dl = typeof(value.data) != 'undefined' ? value.data.length : value.length; ///json is a nested response..
+ return dl ? 'has-children' : 'no-children'
+ }
+ });
}
var store = this.store;
if (i > 0) {
store = new Roo.data.SimpleStore({
- fields : [ 'key', 'value' ],
+ //fields : this.store.reader.meta.fields,
+ reader : this.store.reader,
data : [ ]
});
}
- var view = this.views[i] = new Roo.View(il, this.tpl, {
- singleSelect:true,
- store: store,
- selectedClass: this.selectedClass
- });
+ var view = this.views[i] = new Roo.View(
+ il,
+ this.tpl,
+ {
+ singleSelect:true,
+ store: store,
+ selectedClass: this.selectedClass
+ }
+ );
view.getEl().setWidth(lw);
+ view.getEl().setStyle({
+ position: i < 1 ? 'relative' : 'absolute',
+ top: 0,
+ left: (i * lw ) + 'px',
+ display : i > 0 ? 'none' : 'block'
+ });
+ view.on('selectionchange', this.onSelectChange, this, {list : i });
+ view.on('dblclick', this.onDoubleClick, this, {list : i });
//view.on('click', this.onViewClick, this, { list : i });
store.on('beforeload', this.onBeforeLoad, this);
- store.on('load', this.onLoad, this);
+ store.on('load', this.onLoad, this, { list : i});
store.on('loadexception', this.onLoadException, this);
-
+ // hide the other vies..
el.dom.style.height = '';
var inner = el.dom;
var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
- el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
- il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
- mh = Math.max(el.getHeight(), mh);
+ // only adjust heights on other ones..
+ if (i < 1) {
+
+ el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+ il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+ mh = Math.max(el.getHeight(), mh);
+ }
+
+
}, this);
this.list.beginUpdate();
this.list.endUpdate();
},
- select : function(index, scrollIntoView)
+
+
+ // -- store handlers..
+ // private
+ onBeforeLoad : function()
{
-
- this.selectedIndex = index;
- return;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.innerList.scrollChildIntoView(el, false);
- }
+ if(!this.hasFocus){
+ return;
}
+ this.innerLists[0].update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ this.restrictHeight();
+ this.selectedIndex = -1;
},
-
- // -- store handlers..
-
// private
onLoad : function(a,b,c,d)
{
-
+
if(!this.hasFocus){
return;
}
} else {
this.onEmptyResults();
}
+ /*
+ this.stores[1].loadData([]);
+ this.stores[2].loadData([]);
+ this.views
+ */
+
//this.el.focus();
},
+
+
// private
onLoadException : function()
{
} ,
- onViewOver : function(e, t, opts)
+
+
+ onSelectChange : function (view, sels, opts )
{
- var item = this.views[opts.list].findItemFromChild(t);
- if(item){
- var index = this.views[opts.list].indexOf(item);
- this.select(index, false);
+ var ix = view.getSelectedIndexes();
+
+
+ if (opts.list > 1) {
+
+ this.setFromData(ix.length ? view.store.getAt(ix[0]).data : {});
+ return;
}
+
+ if (!ix.length) {
+ this.setFromData({});
+ this.stores[opts.list+1].loadData( [] );
+ return;
+ }
+
+ var rec = view.store.getAt(ix[0]);
+ this.setFromData(rec.data);
+
+ var lw = Math.floor(
+ ((this.listWidth * 3 || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / 3
+ );
+ var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+ var dl = typeof(data.data) != 'undefined' ? data.total : data.length; ///json is a nested response..
+ this.stores[opts.list+1].loadData( data );
+ this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
+ this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
+ this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
+ this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
+ },
+ onDoubleClick : function()
+ {
+ this.collapse(); //??
},
- onViewClick : function(doFocus, opts)
+
+
+ findRecord : function (prop,value)
{
- Roo.log(arguments);
- var index = this.views[opts.list].getSelectedIndexes()[0];
- var r = this.stores[opts.list].getAt(index);
- if(r){
- this.onSelect(r, index);
- }
- if(doFocus !== false && !this.blockFocus){
- this.el.focus();
- }
+ return this.findRecordInStore(this.store, prop,value);
},
-
+
+ // private
+ findRecordInStore : function(store, prop, value)
+ {
+ var cstore = new Roo.data.SimpleStore({
+ //fields : this.store.reader.meta.fields, // we need array reader.. for
+ reader : this.store.reader,
+ data : [ ]
+ });
+ var _this = this;
+ var record = false;
+ if(store.getCount() > 0){
+ store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ return false;
+ }
+ if (r.data.cn && r.data.cn.length) {
+ cstore.loadData( r.data.cn);
+ var cret = _this.findRecordInStore(cstore, prop, value);
+ if (cret !== false) {
+ record = cret;
+ return false;
+ }
+ }
+
+ return true;
+ });
+ }
+ return record;
+ }
+
+
+
+
});
\ No newline at end of file