}
var buf = [];
for(var key in o){
- var ov = o[key], k = encodeURIComponent(key);
+ var ov = o[key], k = Roo.encodeURIComponent(key);
var type = typeof ov;
if(type == 'undefined'){
buf.push(k, "=&");
}else if(type != "function" && type != "object"){
- buf.push(k, "=", encodeURIComponent(ov), "&");
+ buf.push(k, "=", Roo.encodeURIComponent(ov), "&");
}else if(ov instanceof Array){
if (ov.length) {
for(var i = 0, len = ov.length; i < len; i++) {
- buf.push(k, "=", encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
+ buf.push(k, "=", Roo.encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
}
} else {
buf.push(k, "=&");
}
buf.pop();
return buf.join("");
+ },
+ /**
+ * Safe version of encodeURIComponent
+ * @param {String} data
+ * @return {String}
+ */
+
+ encodeURIComponent : function (data)
+ {
+ try {
+ return encodeURIComponent(data);
+ } catch(e) {} // should be an uri encode error.
+
+ if (data == '' || data == null){
+ return '';
+ }
+ // http://stackoverflow.com/questions/2596483/unicode-and-uri-encoding-decoding-and-escaping-in-javascript
+ function nibble_to_hex(nibble){
+ var chars = '0123456789ABCDEF';
+ return chars.charAt(nibble);
+ }
+ data = data.toString();
+ var buffer = '';
+ for(var i=0; i<data.length; i++){
+ var c = data.charCodeAt(i);
+ var bs = new Array();
+ if (c > 0x10000){
+ // 4 bytes
+ bs[0] = 0xF0 | ((c & 0x1C0000) >>> 18);
+ bs[1] = 0x80 | ((c & 0x3F000) >>> 12);
+ bs[2] = 0x80 | ((c & 0xFC0) >>> 6);
+ bs[3] = 0x80 | (c & 0x3F);
+ }else if (c > 0x800){
+ // 3 bytes
+ bs[0] = 0xE0 | ((c & 0xF000) >>> 12);
+ bs[1] = 0x80 | ((c & 0xFC0) >>> 6);
+ bs[2] = 0x80 | (c & 0x3F);
+ }else if (c > 0x80){
+ // 2 bytes
+ bs[0] = 0xC0 | ((c & 0x7C0) >>> 6);
+ bs[1] = 0x80 | (c & 0x3F);
+ }else{
+ // 1 byte
+ bs[0] = c;
+ }
+ for(var j=0; j<bs.length; j++){
+ var b = bs[j];
+ var hex = nibble_to_hex((b & 0xF0) >>> 4)
+ + nibble_to_hex(b &0x0F);
+ buffer += '%'+hex;
+ }
+ }
+ return buffer;
+
},
/**
i 05 Minutes with leading zeros
s 01 Seconds, with leading zeros
O -0600 Difference to Greenwich time (GMT) in hours
+ P -06:00 Difference to Greenwich time (GMT) with colon between hours and minutes
T CST Timezone setting of the machine running the code
Z -21600 Timezone offset in seconds (negative if west of UTC, positive if east)
</pre>
return "String.leftPad(this.getSeconds(), 2, '0') + ";
case "O":
return "this.getGMTOffset() + ";
+ case "P":
+ return "this.getGMTColonOffset() + ";
case "T":
return "this.getTimezone() + ";
case "Z":
" (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
].join(""),
s:"([+\-]\\d{4})"};
+ case "P":
+ return {g:1,
+ c:[
+ "o = results[", currentGroup, "];\n",
+ "var sn = o.substring(0,1);\n",
+ "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",
+ "var mn = o.substring(4,6) % 60;\n",
+ "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",
+ " (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
+ ].join(""),
+ s:"([+\-]\\d{4})"};
case "T":
return {g:0,
c:null,
+ String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
};
+/**
+ * Get the offset from GMT of the current date (equivalent to the format specifier 'P').
+ * @return {String} 2-characters representing hours and 2-characters representing minutes
+ * seperated by a colon and prefixed with + or - (e.g. '-06:00')
+ */
+Date.prototype.getGMTColonOffset = function() {
+ return (this.getTimezoneOffset() > 0 ? "-" : "+")
+ + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
+ + ":"
+ + String.leftPad(this.getTimezoneOffset() %60, 2, "0");
+}
+
/**
* Get the numeric day number of the year, adjusted for leap year.
* @return {Number} 0 through 364 (365 in leap years)
break;
}
return d;
-};/*
+};
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
for (var j = 0; j < el.options.length; j++) {
if (el.options[j].selected) {
if (Roo.isIE) {
- data += encodeURIComponent(name) + '=' + encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
+ data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
}
else {
- data += encodeURIComponent(name) + '=' + encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
+ data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
}
}
}
case 'radio':
case 'checkbox':
if (el.checked) {
- data += encodeURIComponent(name) + '=' + encodeURIComponent(val) + '&';
+ data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
}
break;
case 'file':
break;
case 'submit':
if(hasSubmit == false) {
- data += encodeURIComponent(name) + '=' + encodeURIComponent(val) + '&';
+ data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
hasSubmit = true;
}
break;
default:
- data += encodeURIComponent(name) + '=' + encodeURIComponent(val) + '&';
+ data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
break;
}
}
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
+
+// nasty IE9 hack - what a pile of crap that is..
+
+ if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
+ Range.prototype.createContextualFragment = function (html) {
+ var doc = window.document;
+ var container = doc.createElement("div");
+ container.innerHTML = html;
+ var frag = doc.createDocumentFragment(), n;
+ while ((n = container.firstChild)) {
+ frag.appendChild(n);
+ }
+ return frag;
+ };
+}
/**
* @class Roo.DomHelper
"start" : "start",
"limit" : "limit",
"sort" : "sort",
- "dir" : "dir"
+ "dir" : "dir",
+ "multisort" : "_multisort"
};
if(config && config.data){
this.relayEvents(this.proxy, ["loadexception"]);
}
this.sortToggle = {};
+ this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
Roo.data.Store.superclass.constructor.call(this);
* @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
*/
/**
+ * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
+ */
+ multiSort: false,
+ /**
* @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
* version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
*/
p[pn["sort"]] = this.sortInfo.field;
p[pn["dir"]] = this.sortInfo.direction;
}
+ if (this.multiSort) {
+ var pn = this.paramNames;
+ p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
+ }
+
this.proxy.load(p, this.reader, this.loadRecords, this, options);
}
},
sort : function(fieldName, dir){
var f = this.fields.get(fieldName);
if(!dir){
- if(this.sortInfo && this.sortInfo.field == f.name){ // toggle sort dir
+ this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
+
+ if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
}else{
dir = f.sortDir;
/** @private */
this.addEvents({
- /**
- * @event beforeclick
- * Fires before a click is processed. Returns false to cancel the default action.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "beforeclick" : true,
- /**
- * @event click
- * Fires when a template node is clicked.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "click" : true,
- /**
- * @event dblclick
- * Fires when a template node is double clicked.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "dblclick" : true,
- /**
- * @event contextmenu
- * Fires when a template node is right clicked.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "contextmenu" : true,
- /**
- * @event selectionchange
- * Fires when the selected nodes change.
- * @param {Roo.View} this
- * @param {Array} selections Array of the selected nodes
- */
- "selectionchange" : true,
-
- /**
- * @event beforeselect
- * Fires before a selection is made. If any handlers return false, the selection is cancelled.
- * @param {Roo.View} this
- * @param {HTMLElement} node The node to be selected
- * @param {Array} selections Array of currently selected nodes
- */
- "beforeselect" : true
- });
+ /**
+ * @event beforeclick
+ * Fires before a click is processed. Returns false to cancel the default action.
+ * @param {Roo.View} this
+ * @param {Number} index The index of the target node
+ * @param {HTMLElement} node The target node
+ * @param {Roo.EventObject} e The raw event object
+ */
+ "beforeclick" : true,
+ /**
+ * @event click
+ * Fires when a template node is clicked.
+ * @param {Roo.View} this
+ * @param {Number} index The index of the target node
+ * @param {HTMLElement} node The target node
+ * @param {Roo.EventObject} e The raw event object
+ */
+ "click" : true,
+ /**
+ * @event dblclick
+ * Fires when a template node is double clicked.
+ * @param {Roo.View} this
+ * @param {Number} index The index of the target node
+ * @param {HTMLElement} node The target node
+ * @param {Roo.EventObject} e The raw event object
+ */
+ "dblclick" : true,
+ /**
+ * @event contextmenu
+ * Fires when a template node is right clicked.
+ * @param {Roo.View} this
+ * @param {Number} index The index of the target node
+ * @param {HTMLElement} node The target node
+ * @param {Roo.EventObject} e The raw event object
+ */
+ "contextmenu" : true,
+ /**
+ * @event selectionchange
+ * Fires when the selected nodes change.
+ * @param {Roo.View} this
+ * @param {Array} selections Array of the selected nodes
+ */
+ "selectionchange" : true,
+
+ /**
+ * @event beforeselect
+ * Fires before a selection is made. If any handlers return false, the selection is cancelled.
+ * @param {Roo.View} this
+ * @param {HTMLElement} node The node to be selected
+ * @param {Array} selections Array of currently selected nodes
+ */
+ "beforeselect" : true,
+ /**
+ * @event preparedata
+ * Fires on every row to render, to allow you to change the data.
+ * @param {Roo.View} this
+ * @param {Object} data to be rendered (change this)
+ */
+ "preparedata" : true
+ });
this.el.on({
"click": this.onClick,
}
for(var i = 0, len = records.length; i < len; i++){
var data = this.prepareData(records[i].data, i, records[i]);
+ this.fireEvent("preparedata", this, data, i, records[i]);
html[html.length] = t.apply(data);
}
this.el.update(html.join(""));
}
}
}
-});/*
+}); /*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
}
if(this.tabPosition != "bottom"){
- /** The body element that contains {@link Roo.TabPanelItem} bodies.
- * @type Roo.Element
- */
- this.bodyEl = Roo.get(this.createBody(this.el.dom));
- this.el.addClass("x-tabs-top");
+ /** The body element that contains {@link Roo.TabPanelItem} bodies. +
+ * @type Roo.Element
+ */
+ this.bodyEl = Roo.get(this.createBody(this.el.dom));
+ this.el.addClass("x-tabs-top");
}
this.items = [];
this.cpad = this.el.getPadding("lr");
this.hiddenCount = 0;
+
+ // toolbar on the tabbar support...
+ if (this.toolbar) {
+ var tcfg = this.toolbar;
+ tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');
+ this.toolbar = new Roo.Toolbar(tcfg);
+ if (Roo.isSafari) {
+ var tbl = tcfg.container.child('table', true);
+ tbl.setAttribute('width', '100%');
+ }
+
+ }
+
+
+
Roo.TabPanel.superclass.constructor.call(this);
};
Roo.extend(Roo.TabPanel, Roo.util.Observable, {
- /*
- *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
- */
+ /*
+ *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
+ */
tabPosition : "top",
- /*
- *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
- */
+ /*
+ *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
+ */
currentTabWidth : 0,
- /*
- *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
- */
+ /*
+ *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
+ */
minTabWidth : 40,
- /*
- *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
- */
+ /*
+ *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
+ */
maxTabWidth : 250,
- /*
- *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
- */
+ /*
+ *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
+ */
preferredTabWidth : 175,
- /*
- *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
- */
+ /*
+ *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
+ */
resizeTabs : false,
- /*
- *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
- */
+ /*
+ *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
+ */
monitorResize : true,
+ /*
+ *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
+ */
+ toolbar : false,
/**
* Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
/** @private */
Roo.TabPanel.prototype.createStripList = function(strip){
// div wrapper for retard IE
- strip.innerHTML = '<div class="x-tabs-strip-wrap"><table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr></tr></tbody></table></div>';
+ // returns the "tr" element.
+ strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
+ '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
+ '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
return strip.firstChild.firstChild.firstChild.firstChild;
};
/** @private */
/** @private */
Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
var td = document.createElement("td");
- stripEl.appendChild(td);
+ stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
+ //stripEl.appendChild(td);
if(closable){
td.className = "x-tabs-closable";
if(!this.closeTpl){
*/
defaultLinkValue : 'http:/'+'/',
-
+ /**
+ * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
+ * Roo.resizable.
+ */
+ resizable : false,
+ /**
+ * @cfg {Number} height (in pixels)
+ */
+ height: 300,
+ /**
+ * @cfg {Number} width (in pixels)
+ */
+ width: 500,
// id of frame..
frameId: false,
onFocus : Roo.emptyFn,
iframePad:3,
hideMode:'offsets',
- defaultAutoCreate : {
+
+ defaultAutoCreate : { // modified by initCompnoent..
tag: "textarea",
style:"width:500px;height:300px;",
autocomplete: "off"
* @param {HtmlEditor} this
*/
editorevent: true
- })
+ });
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
+ autocomplete: "off"
+ };
},
/**
},
// private
- onRender : function(ct, position){
+ onRender : function(ct, position)
+ {
+ var _t = this;
Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
this.el.dom.style.border = '0 none';
this.el.dom.setAttribute('tabIndex', -1);
this.wrap = this.el.wrap({
cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
});
+
+ if (this.resizable) {
+ this.resizeEl = new Roo.Resizable(this.wrap, {
+ pinned : true,
+ wrap: true,
+ dynamic : true,
+ minHeight : this.height,
+ height: this.height,
+ handles : this.resizable,
+ width: this.width,
+ listeners : {
+ resize : function(r, w, h) {
+ _t.onResize(w,h); // -something
+ }
+ }
+ });
+
+ }
this.frameId = Roo.id();
this.createToolbar(this);
Roo.TaskMgr.start(task);
if(!this.width){
- this.setSize(this.el.getSize());
+ this.setSize(this.wrap.getSize());
+ }
+ if (this.resizeEl) {
+ this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
+ // should trigger onReize..
}
},
// private
- onResize : function(w, h){
+ onResize : function(w, h)
+ {
+ //Roo.log('resize: ' +w + ',' + h );
Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
if(this.el && this.iframe){
if(typeof w == 'number'){
var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
+ ah -= 10; // knock a few pixes off for look..
this.el.setHeight(this.adjustWidth('textarea', ah));
this.iframe.style.height = ah + 'px';
if(this.doc){
syncValue : function(){
if(this.initialized){
var bd = (this.doc.body || this.doc.documentElement);
+ this.cleanUpPaste();
var html = bd.innerHTML;
if(Roo.isSafari){
var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
if(v.length < 1){
v = ' ';
}
+
if(this.fireEvent('beforepush', this, v) !== false){
- (this.doc.body || this.doc.documentElement).innerHTML = v;
+ var d = (this.doc.body || this.doc.documentElement);
+ d.innerHTML = v;
+ this.cleanUpPaste();
+ this.el.dom.value = d.innerHTML;
this.fireEvent('push', this, v);
}
}
{
// cleans up the whole document..
// console.log('cleanuppaste');
- this.cleanUpChildren(this.doc.body)
+ this.cleanUpChildren(this.doc.body);
},
return;
}
+ if (Roo.form.HtmlEditor.remove.indexOf(node.tagName.toLowerCase()) > -1) {
+ this.cleanUpChildren(node);
+ // inserts everything just before this node...
+ while (node.childNodes.length) {
+ var cn = node.childNodes[0];
+ node.removeChild(cn);
+ node.parentNode.insertBefore(cn, node);
+ }
+ node.parentNode.removeChild(node);
+ return;
+ }
+
if (!node.attributes || !node.attributes.length) {
this.cleanUpChildren(node);
return;
Roo.each(parts, function(p) {
p = p.replace(/\s+/g,'');
if (!p.length) {
- return;
+ return true;
}
var l = p.split(':').shift().replace(/\s+/g,'');
node.removeAttribute(n);
return false;
}
+ return true;
});
Roo.form.HtmlEditor.clean = [
'script', 'style', 'title', 'xml'
];
-
+Roo.form.HtmlEditor.remove = [
+ 'font'
+];
// attributes..
Roo.form.HtmlEditor.ablack = [
if (!id) {
return ret;
}
- Ext.each(this.allItems, function(f){
+ Roo.each(this.allItems, function(f){
if (f.id == id || f.name == id ){
ret = f;
return false;
//if(this.inputValue !== undefined){
this.wrap = this.el.wrap();
- this.viewEl = this.wrap.createChild({ tag: 'div'});
+ this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
if (this.bodyStyle) {
this.viewEl.applyStyles(this.bodyStyle);
Roo.form.DisplayField.superclass.setValue.call(this, v);
}
+});/*
+ *
+ * Licence- LGPL
+ *
+ */
+
+/**
+ * @class Roo.form.DayPicker
+ * @extends Roo.form.Field
+ * A Day picker show [M] [T] [W] ....
+ * @constructor
+ * Creates a new Day Picker
+ * @param {Object} config Configuration options
+ */
+Roo.form.DayPicker= function(config){
+ Roo.form.DayPicker.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.form.DayPicker, Roo.form.Field, {
+ /**
+ * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+ */
+ focusClass : undefined,
+ /**
+ * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+ */
+ fieldClass: "x-form-field",
+
+ /**
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "checkbox", autocomplete: "off"})
+ */
+ defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
+
+
+ actionMode : 'viewEl',
+ //
+ // private
+
+ inputType : 'hidden',
+
+
+ inputElement: false, // real input element?
+ basedOn: false, // ????
+
+ isFormField: true, // not sure where this is needed!!!!
+
+ onResize : function(){
+ Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+ if(!this.boxLabel){
+ this.el.alignTo(this.wrap, 'c-c');
+ }
+ },
+
+ initEvents : function(){
+ Roo.form.Checkbox.superclass.initEvents.call(this);
+ this.el.on("click", this.onClick, this);
+ this.el.on("change", this.onClick, this);
+ },
+
+
+ getResizeEl : function(){
+ return this.wrap;
+ },
+
+ getPositionEl : function(){
+ return this.wrap;
+ },
+
+
+ // private
+ onRender : function(ct, position){
+ Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+
+ this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
+
+ var r1 = '<table><tr>';
+ var r2 = '<tr class="x-form-daypick-icons">';
+ for (var i=0; i < 7; i++) {
+ r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
+ r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL +'"></td>';
+ }
+
+ var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
+ viewEl.select('img').on('click', this.onClick, this);
+ this.viewEl = viewEl;
+
+
+ // this will not work on Chrome!!!
+ this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
+ this.el.on('propertychange', this.setFromHidden, this); //ie
+
+
+
+
+ },
+
+ // private
+ initValue : Roo.emptyFn,
+
+ /**
+ * Returns the checked state of the checkbox.
+ * @return {Boolean} True if checked, else false
+ */
+ getValue : function(){
+ return this.el.dom.value;
+
+ },
+
+ // private
+ onClick : function(e){
+ //this.setChecked(!this.checked);
+ Roo.get(e.target).toggleClass('x-menu-item-checked');
+ this.refreshValue();
+ //if(this.el.dom.checked != this.checked){
+ // this.setValue(this.el.dom.checked);
+ // }
+ },
+
+ // private
+ refreshValue : function()
+ {
+ var val = '';
+ this.viewEl.select('img',true).each(function(e,i,n) {
+ val += e.is(".x-menu-item-checked") ? String(n) : '';
+ });
+ this.setValue(val, true);
+ },
+
+ /**
+ * Sets the checked state of the checkbox.
+ * On is always based on a string comparison between inputValue and the param.
+ * @param {Boolean/String} value - the value to set
+ * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
+ */
+ setValue : function(v,suppressEvent){
+ if (!this.el.dom) {
+ return;
+ }
+ var old = this.el.dom.value ;
+ this.el.dom.value = v;
+ if (suppressEvent) {
+ return ;
+ }
+
+ // update display..
+ this.viewEl.select('img',true).each(function(e,i,n) {
+
+ var on = e.is(".x-menu-item-checked");
+ var newv = v.indexOf(String(n)) > -1;
+ if (on != newv) {
+ e.toggleClass('x-menu-item-checked');
+ }
+
+ });
+
+
+ this.fireEvent('change', this, v, old);
+
+
+ },
+
+ // handle setting of hidden value by some other method!!?!?
+ setFromHidden: function()
+ {
+ if(!this.el){
+ return;
+ }
+ //console.log("SET FROM HIDDEN");
+ //alert('setFrom hidden');
+ this.setValue(this.el.dom.value);
+ },
+
+ onDestroy : function()
+ {
+ if(this.viewEl){
+ Roo.get(this.viewEl).remove();
+ }
+
+ Roo.form.DayPicker.superclass.onDestroy.call(this);
+ }
+
});//<script type="text/javasscript">
default:
alert("Can not add '" + cfg.xtype + "' to BorderLayout");
- return;
+ return null;
// GridPanel (grid, cfg)
}
* @class Roo.LayoutRegion
* @extends Roo.BasicLayoutRegion
* This class represents a region in a layout manager.
- * @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
- * @cfg {Boolean} collapsed True to set the initial display to collapsed (defaults to false)
- * @cfg {Boolean} floatable False to disable floating (defaults to true)
- * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
- * @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
- * @cfg {String} tabPosition "top" or "bottom" (defaults to "bottom")
- * @cfg {String} collapsedTitle Optional string message to display in the collapsed block of a north or south region
- * @cfg {Boolean} alwaysShowTabs True to always display tabs even when there is only 1 panel (defaults to false)
- * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
- * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
- * @cfg {String} title The title for the region (overrides panel titles)
- * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
- * @cfg {Boolean} autoHide False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
- * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
- * @cfg {Boolean} closeOnTab True to place the close icon on the tabs instead of the region titlebar (defaults to false)
- * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
- * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
- * the space available, similar to FireFox 1.5 tabs (defaults to false)
- * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
- * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
- * @cfg {Boolean} showPin True to show a pin button
-* @cfg {Boolean} hidden True to start the region hidden (defaults to false)
-* @cfg {Boolean} hideWhenEmpty True to hide the region when it has no panels
-* @cfg {Boolean} disableTabTips True to disable tab tooltips
-* @cfg {Number} width For East/West panels
-* @cfg {Number} height For North/South panels
-* @cfg {Boolean} split To show the splitter
+ * @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
+ * @cfg {Boolean} collapsed True to set the initial display to collapsed (defaults to false)
+ * @cfg {Boolean} floatable False to disable floating (defaults to true)
+ * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
+ * @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
+ * @cfg {String} tabPosition "top" or "bottom" (defaults to "bottom")
+ * @cfg {String} collapsedTitle Optional string message to display in the collapsed block of a north or south region
+ * @cfg {Boolean} alwaysShowTabs True to always display tabs even when there is only 1 panel (defaults to false)
+ * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
+ * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
+ * @cfg {String} title The title for the region (overrides panel titles)
+ * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
+ * @cfg {Boolean} autoHide False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
+ * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
+ * @cfg {Boolean} closeOnTab True to place the close icon on the tabs instead of the region titlebar (defaults to false)
+ * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
+ * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
+ * the space available, similar to FireFox 1.5 tabs (defaults to false)
+ * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
+ * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
+ * @cfg {Boolean} showPin True to show a pin button
+ * @cfg {Boolean} hidden True to start the region hidden (defaults to false)
+ * @cfg {Boolean} hideWhenEmpty True to hide the region when it has no panels
+ * @cfg {Boolean} disableTabTips True to disable tab tooltips
+ * @cfg {Number} width For East/West panels
+ * @cfg {Number} height For North/South panels
+ * @cfg {Boolean} split To show the splitter
+ * @cfg {Boolean} toolbar xtype configuration for a toolbar - shows on right of tabbar
*/
Roo.LayoutRegion = function(mgr, config, pos){
Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
// overridden
},
- initTabs : function(){
+ initTabs : function()
+ {
this.bodyEl.setStyle("overflow", "hidden");
- var ts = new Roo.TabPanel(this.bodyEl.dom, {
- tabPosition: this.bottomTabs ? 'bottom' : 'top',
- disableTooltips: this.config.disableTabTips
- });
+ var ts = new Roo.TabPanel(
+ this.bodyEl.dom,
+ {
+ tabPosition: this.bottomTabs ? 'bottom' : 'top',
+ disableTooltips: this.config.disableTabTips,
+ toolbar : this.config.toolbar
+ }
+ );
if(this.config.hideTabs){
ts.stripWrap.setDisplayed(false);
}
* @class Roo.ContentPanel
* @extends Roo.util.Observable
* A basic ContentPanel element.
- * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
- * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
+ * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
+ * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
* @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
- * @cfg {Boolean} closable True if the panel can be closed/removed
- * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {Boolean} closable True if the panel can be closed/removed
+ * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
* @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
- * @cfg {Toolbar} toolbar A toolbar for this panel
- * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
- * @cfg {String} title The title for this panel
- * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
- * @cfg {String} url Calls {@link #setUrl} with this value
- * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
- * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
- * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Toolbar} toolbar A toolbar for this panel
+ * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
+ * @cfg {String} title The title for this panel
+ * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
+ * @cfg {String} url Calls {@link #setUrl} with this value
+ * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
+ * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
+
* @constructor
* Create a new ContentPanel.
* @param {String/HTMLElement/Roo.Element} el The container element for this panel
* @param {Number} width The width after any component adjustments
* @param {Number} height The height after any component adjustments
*/
- "resize" : true
+ "resize" : true,
+
+ /**
+ * @event render
+ * Fires when this tab is created
+ * @param {Roo.ContentPanel} this
+ */
+ "render" : true
+
+
+
});
if(this.autoScroll){
this.resizeEl.setStyle("overflow", "auto");
} else {
// fix randome scrolling
this.el.on('scroll', function() {
+ Roo.log('fix random scolling');
this.scrollTo('top',0);
});
}
Roo.ContentPanel.superclass.constructor.call(this);
+
+ this.fireEvent('render', this);
};
Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
this.el = null;
},
+ /**
+ * form - if the content panel contains a form - this is a reference to it.
+ * @type {Roo.form.Form}
+ */
+ form : false,
+ /**
+ * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
+ * This contains a reference to it.
+ * @type {Roo.View}
+ */
+ view : false,
+
/**
* Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
* <pre><code>
if ( this.form.allItems.length) this.form.render(el.dom);
return this.form;
}
- if (['View', 'JsonView'].indexOf(cfg.xtype) > -1) {
+ // should only have one of theses..
+ if (['View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
// views..
cfg.el = this.el.appendChild(document.createElement("div"));
// factory?
- var ret = new Roo[cfg.xtype](cfg);
- ret.render(false, ''); // render blank..
- return ret;
+ var ret = new Roo.factory(cfg);
+ ret.render && ret.render(false, ''); // render blank..
+ this.view = ret;
+ return ret;
}
return false;
-
}
});
this.dataSource= Roo.factory(this.dataSource, Roo.data);
this.ds = this.dataSource;
this.ds.xmodule = this.xmodule || false;
-
+
}
/**
* @event rowclass
* Fires when a row is rendered, so you can change add a style to it.
- * @param {GridView} gridview The grid view
- * @param {Object} rowcfg contains record, rowIndex and rowClass - set rowClass to add a style.
+ * @param {GridView} gridview The grid view
+ * @param {Object} rowcfg contains record rowIndex and rowClass - set rowClass to add a style.
*/
'rowclass' : true,
/**
* @cfg {String} ddGroup - drag drop group.
- */
-
+ */
+
/**
* @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
- */
- minColumnWidth : 25,
+ */
+ minColumnWidth : 25,
/**
- * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
- * <b>on initial render.</b> It is more efficient to explicitly size the columns
- * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option. Default is false.
- */
- autoSizeColumns : false,
+ * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
+ * <b>on initial render.</b> It is more efficient to explicitly size the columns
+ * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option. Default is false.
+ */
+ autoSizeColumns : false,
- /**
- * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
- */
- autoSizeHeaders : true,
+ /**
+ * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
+ */
+ autoSizeHeaders : true,
- /**
- * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
- */
- monitorWindowResize : true,
+ /**
+ * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+ */
+ monitorWindowResize : true,
- /**
- * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
- * rows measured to get a columns size. Default is 0 (all rows).
- */
- maxRowsToMeasure : 0,
+ /**
+ * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
+ * rows measured to get a columns size. Default is 0 (all rows).
+ */
+ maxRowsToMeasure : 0,
- /**
- * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
- */
- trackMouseOver : true,
+ /**
+ * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+ */
+ trackMouseOver : true,
/**
- * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
- */
+ * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
+ */
- /**
- * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
- */
- enableDragDrop : false,
-
- /**
- * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
- */
- enableColumnMove : true,
-
- /**
- * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
- */
- enableColumnHide : true,
-
- /**
- * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
- */
- enableRowHeightSync : false,
-
- /**
- * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
- */
- stripeRows : true,
-
- /**
- * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
- */
- autoHeight : false,
+ /**
+ * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
+ */
+ enableDragDrop : false,
+
+ /**
+ * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
+ */
+ enableColumnMove : true,
+
+ /**
+ * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
+ */
+ enableColumnHide : true,
+
+ /**
+ * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
+ */
+ enableRowHeightSync : false,
+
+ /**
+ * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
+ */
+ stripeRows : true,
+
+ /**
+ * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
+ */
+ autoHeight : false,
/**
* @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
autoExpandMax : 1000,
/**
- * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
- */
- view : null,
+ * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
+ */
+ view : null,
- /**
- * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
- */
- loadMask : false,
/**
- * @cfg {Roo.dd.DropTarget} dragTarget An {@link Roo.dd.DragTarget} config
- */
- dropTarget: false,
+ * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
+ */
+ loadMask : false,
+ /**
+ * @cfg {Roo.dd.DropTarget} dragTarget An {@link Roo.dd.DragTarget} config
+ */
+ dropTarget: false,
+
+
+
// private
rendered : false,
* Called once after all setup has been completed and the grid is ready to be rendered.
* @return {Roo.grid.Grid} this
*/
- render : function(){
+ render : function()
+ {
var c = this.container;
// try to detect autoHeight/width mode
if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
if (this.toolbar && this.toolbar.xtype) {
this.toolbar.container = this.getView().getHeaderPanel(true);
- this.toolbar = new Ext.Toolbar(this.toolbar);
+ this.toolbar = new Roo.Toolbar(this.toolbar);
}
if (this.footer && this.footer.xtype) {
this.footer.dataSource = this.getDataSource();
if(cindex !== false){
return this.view.getHeaderCell(cindex);
}
+ return null;
},
nextVisible : function(h){
if(!tpls.master){
tpls.master = new Roo.Template(
'<div class="x-grid" hidefocus="true">',
+ '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
'<div class="x-grid-topbar"></div>',
'<div class="x-grid-scroller"><div></div></div>',
'<div class="x-grid-locked">',
'<div class="x-grid-body">{body}</div>',
"</div>",
'<div class="x-grid-bottombar"></div>',
- '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
+
'<div class="x-grid-resize-proxy"> </div>',
"</div>"
);
var cs = el.childNodes;
this.el = new E(el);
- this.headerPanel = new E(el.firstChild);
+
+ this.focusEl = new E(el.firstChild);
+ this.focusEl.swallowEvent("click", true);
+
+ this.headerPanel = new E(cs[1]);
this.headerPanel.enableDisplayMode("block");
- this.scroller = new E(cs[1]);
+ this.scroller = new E(cs[2]);
this.scrollSizer = new E(this.scroller.dom.firstChild);
- this.lockedWrap = new E(cs[2]);
+ this.lockedWrap = new E(cs[3]);
this.lockedHd = new E(this.lockedWrap.dom.firstChild);
this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
- this.mainWrap = new E(cs[3]);
+ this.mainWrap = new E(cs[4]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
- this.footerPanel = new E(cs[4]);
+ this.footerPanel = new E(cs[5]);
this.footerPanel.enableDisplayMode("block");
- this.focusEl = new E(cs[5]);
- this.focusEl.swallowEvent("click", true);
this.resizeProxy = new E(cs[6]);
this.headerSelector = String.format(
* Focuses the specified row.
* @param {Number} row The row index
*/
- focusRow : function(row){
+ focusRow : function(row)
+ {
+ //Roo.log('GridView.focusRow');
var x = this.scroller.dom.scrollLeft;
this.focusCell(row, 0, false);
this.scroller.dom.scrollLeft = x;
* @param {Number} col The column index
* @param {Boolean} hscroll false to disable horizontal scrolling
*/
- focusCell : function(row, col, hscroll){
+ focusCell : function(row, col, hscroll)
+ {
+ //Roo.log('GridView.focusCell');
var el = this.ensureVisible(row, col, hscroll);
this.focusEl.alignTo(el, "tl-tl");
if(Roo.isGecko){
* @param {Number} col The column index
* @param {Boolean} hscroll false to disable horizontal scrolling
*/
- ensureVisible : function(row, col, hscroll){
+ ensureVisible : function(row, col, hscroll)
+ {
+ //Roo.log('GridView.ensureVisible,' + row + ',' + col);
+ //return null; //disable for testing.
if(typeof row != "number"){
row = row.rowIndex;
}
if(row < 0 && row >= this.ds.getCount()){
- return;
+ return null;
}
col = (col !== undefined ? col : 0);
var cm = this.grid.colModel;
var el = this.getCell(row, col);
if(!el){
- return;
+ return null;
}
var c = this.scroller.dom;
var cleft = parseInt(el.offsetLeft, 10);
var cbot = ctop + el.offsetHeight;
var cright = cleft + el.offsetWidth;
-
+
var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
var stop = parseInt(c.scrollTop, 10);
var sleft = parseInt(c.scrollLeft, 10);
var sbot = stop + ch;
var sright = sleft + c.clientWidth;
-
+ /*
+ Roo.log('GridView.ensureVisible:' +
+ ' ctop:' + ctop +
+ ' c.clientHeight:' + c.clientHeight +
+ ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
+ ' stop:' + stop +
+ ' cbot:' + cbot +
+ ' sbot:' + sbot +
+ ' ch:' + ch
+ );
+ */
if(ctop < stop){
- c.scrollTop = ctop;
+ c.scrollTop = ctop;
+ //Roo.log("set scrolltop to ctop DISABLE?");
}else if(cbot > sbot){
+ //Roo.log("set scrolltop to cbot-ch");
c.scrollTop = cbot-ch;
}
-
+
if(hscroll !== false){
if(cleft < sleft){
c.scrollLeft = cleft;
c.scrollLeft = cright-c.clientWidth;
}
}
+
return el;
},
},
getScrollState : function(){
+
var sb = this.scroller.dom;
return {left: sb.scrollLeft, top: sb.scrollTop};
},
},
restoreScroll : function(state){
+ //Roo.log('GridView.restoreScroll');
var sb = this.scroller.dom;
sb.scrollLeft = state.left;
sb.scrollTop = state.top;
},
syncScroll : function(){
+ //Roo.log('GridView.syncScroll');
var sb = this.scroller.dom;
var sh = this.mainHd.dom;
var bs = this.mainBody.dom;
if(this.enableMoveAnim && Roo.enableFx){
this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
}
+ // if multisort - fix sortOrder, and reload..
+ if (this.grid.dataSource.multiSort) {
+ // the we can call sort again..
+ var dm = this.grid.dataSource;
+ var cm = this.grid.colModel;
+ var so = [];
+ for(var i = 0; i < cm.config.length; i++ ) {
+
+ if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined')) {
+ continue; // dont' bother, it's not in sort list or being set.
+ }
+
+ so.push(cm.config[i].dataIndex);
+ };
+ dm.sortOrder = so;
+ dm.load(dm.lastOptions);
+
+
+ }
+
},
updateCell : function(dm, rowIndex, dataIndex){
},
updateHeaderSortState : function(){
- var state = this.ds.getSortState();
- if(!state){
- return;
+
+ // sort state can be single { field: xxx, direction : yyy}
+ // or { xxx=>ASC , yyy : DESC ..... }
+
+ var mstate = {};
+ if (!this.ds.multiSort) {
+ var state = this.ds.getSortState();
+ if(!state){
+ return;
+ }
+ mstate[state.field] = state.direction;
+ // FIXME... - this is not used here.. but might be elsewhere..
+ this.sortState = state;
+
+ } else {
+ mstate = this.ds.sortToggle;
}
- this.sortState = state;
- var sortColumn = this.cm.findColumnIndex(state.field);
- if(sortColumn != -1){
- var sortDir = state.direction;
- var sc = this.sortClasses;
- var hds = this.el.select(this.headerSelector).removeClass(sc);
- hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
+ //remove existing sort classes..
+
+ var sc = this.sortClasses;
+ var hds = this.el.select(this.headerSelector).removeClass(sc);
+
+ for(var f in mstate) {
+
+ var sortColumn = this.cm.findColumnIndex(f);
+
+ if(sortColumn != -1){
+ var sortDir = mstate[f];
+ hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
+ }
}
+
+
+
},
+
handleHeaderClick : function(g, index){
if(this.headersDisabled){
return;
return;
}
g.stopEditing();
+
+ if (dm.multiSort) {
+ // update the sortOrder
+ var so = [];
+ for(var i = 0; i < cm.config.length; i++ ) {
+
+ if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined') && (index != i)) {
+ continue; // dont' bother, it's not in sort list or being set.
+ }
+
+ so.push(cm.config[i].dataIndex);
+ };
+ dm.sortOrder = so;
+ }
+
+
dm.sort(cm.getDataIndex(index));
},
/**
* @class Roo.XComponent
* A delayed Element creator...
+ * Or a way to group chunks of interface together.
*
* Mypart.xyx = new Roo.XComponent({
}
]
*})
+ *
+ *
+ * It can be used to build a big heiracy, with parent etc.
+ * or you can just use this to render a single compoent to a dom element
+ * MYPART.render(Roo.Element | String(id) | dom_element )
+ *
* @extends Roo.util.Observable
* @constructor
* @param cfg {Object} configuration of component
'buildcomplete' : true
});
-
+ this.region = this.region || 'center'; // default..
Roo.XComponent.register(this);
this.modules = false;
this.el = false; // where the layout goes..
* String to display while loading.
*/
name : false,
+ /**
+ * @cfg {String} region
+ * Region to render component to (defaults to center)
+ */
+ region : 'center',
+
/**
* @cfg {Array} items
* A single item array - the first element is the root of the tree..
* It's done this way to stay compatible with the Xtype system...
*/
- items : false
-
-
+ items : false,
+
+
+ /**
+ * render
+ * render element to dom or tree
+ * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
+ */
+
+ render : function(el)
+ {
+
+ el = el || false;
+ var hp = this.parent ? 1 : 0;
+
+ if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
+ // if parent is a '#.....' string, then let's use that..
+ var ename = this.parent.substr(1)
+ this.parent = false;
+ el = Roo.get(ename);
+ if (!el) {
+ Roo.log("Warning - element can not be found :#" + ename );
+ return;
+ }
+ }
+
+
+ if (!this.parent) {
+
+ el = el ? Roo.get(el) : false;
+
+ // it's a top level one..
+ this.parent = {
+ el : new Roo.BorderLayout(el || document.body, {
+
+ center: {
+ titlebar: false,
+ autoScroll:false,
+ closeOnTab: true,
+ tabPosition: 'top',
+ //resizeTabs: true,
+ alwaysShowTabs: el && hp? false : true,
+ hideTabs: el || !hp ? true : false,
+ minTabWidth: 140
+ }
+ })
+ }
+ }
+
+
+
+ var tree = this.tree();
+ tree.region = tree.region || this.region;
+ this.el = this.parent.el.addxtype(tree);
+ this.fireEvent('built', this);
+
+ this.panel = this.el;
+ this.layout = this.panel.layout;
+
+ }
});
/**
* @property modules
* array of modules to be created by registration system.
- * @type Roo.XComponent
+ * @type {Array} of Roo.XComponent
*/
modules : [],
-
+ /**
+ * @property elmodules
+ * array of modules to be created by which use #ID
+ * @type {Array} of Roo.XComponent
+ */
+
+ elmodules : [],
+
/**
* Register components to be built later.
},
/**
* convert a string to an object..
- *
+ * eg. 'AAA.BBB' -> finds AAA.BBB
+
*/
toObject : function(str)
if (!str || typeof(str) == 'object') {
return str;
}
+ if (str.substring(0,1) == '#') {
+ return str;
+ }
+
var ar = str.split('.');
var rt, o;
rt = ar.shift();
/** eval:var:o */
- eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
+ try {
+ eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
+ } catch (e) {
+ throw "Module not found : " + str;
+ }
+
if (o === false) {
throw "Module not found : " + str;
}
}
o = o[e];
});
+
return o;
},
*/
preBuild : function ()
{
-
+ var _t = this;
Roo.each(this.modules , function (obj)
{
- obj.parent = this.toObject(obj.parent);
+ var opar = obj.parent;
+ try {
+ obj.parent = this.toObject(opar);
+ } catch(e) {
+ Roo.log(e.toString());
+ return;
+ }
if (!obj.parent) {
this.topModule = obj;
return;
}
-
+ if (typeof(obj.parent) == 'string') {
+ this.elmodules.push(obj);
+ return;
+ }
+ if (obj.parent.constructor != Roo.XComponent) {
+ Roo.log("Object Parent is not instance of XComponent:" + obj.name)
+ }
if (!obj.parent.modules) {
obj.parent.modules = new Roo.util.MixedCollection(false,
function(o) { return o.order + '' }
var cmp = function(a,b) {
return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
};
-
- if (!this.topModule || !this.topModule.modules) {
+ if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
throw "No top level modules to build";
}
-
- // make a flat list in order of modules to build.
- var mods = [ this.topModule ];
+ // make a flat list in order of modules to build.
+ var mods = this.topModule ? [ this.topModule ] : [];
+ Roo.each(this.elmodules,function(e) { mods.push(e) });
+
// add modules to their parents..
var addMod = function(m) {
}
}
- this.topModule.modules.keySort('ASC', cmp );
- this.topModule.modules.each(addMod);
+ if (this.topModule) {
+ this.topModule.modules.keySort('ASC', cmp );
+ this.topModule.modules.each(addMod);
+ }
return mods;
},
if (!mods.length) {
Roo.debug && Roo.log('hide?');
Roo.MessageBox.hide();
- _this.topModule.fireEvent('buildcomplete', _this.topModule);
- return;
+ if (_this.topModule) {
+ _this.topModule.fireEvent('buildcomplete', _this.topModule);
+ }
+ // THE END...
+ return false;
}
var m = mods.shift();
+
+
Roo.debug && Roo.log(m);
- if (typeof(m) == 'function') { // not sure if this is supported any more..
+ // not sure if this is supported any more.. - modules that are are just function
+ if (typeof(m) == 'function') {
m.call(this);
return progressRun.defer(10, _this);
}
+
+
Roo.MessageBox.updateProgress(
(total - mods.length)/total, "Building Interface " + (total - mods.length) +
" of " + total +
);
-
+ // is the module disabled?
var disabled = (typeof(m.disabled) == 'function') ?
m.disabled.call(m.module.disabled) : m.disabled;
return progressRun(); // we do not update the display!
}
- if (!m.parent) {
- // it's a top level one..
- var layoutbase = new Ext.BorderLayout(document.body, {
-
- center: {
- titlebar: false,
- autoScroll:false,
- closeOnTab: true,
- tabPosition: 'top',
- //resizeTabs: true,
- alwaysShowTabs: true,
- minTabWidth: 140
- }
- });
- var tree = m.tree();
- tree.region = 'center';
- m.el = layoutbase.addxtype(tree);
- m.panel = m.el;
- m.layout = m.panel.layout;
- return progressRun.defer(10, _this);
- }
-
- var tree = m.tree();
- tree.region = tree.region || m.region;
- m.el = m.parent.el.addxtype(tree);
- m.fireEvent('built', m);
- m.panel = m.el;
- m.layout = m.panel.layout;
- progressRun.defer(10, _this);
+ // now build
+ m.render();
+ // it's 10 on top level, and 1 on others??? why...
+ return progressRun.defer(10, _this);
+
}
progressRun.defer(1, _this);
}
+
projects / roojs1 / blobdiff