* @type Boolean
*/
isReady : false,
+ /**
+ * Turn on debugging output (currently only the factory uses this)
+ * @type Boolean
+ */
+
+ debug: false,
/**
* True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
return c;
}
if (ns[c.xtype]) {
- if (Roo.debug) console.log("Roo.Factory(" + c.xtype + ")");
+ if (Roo.debug) Roo.log("Roo.Factory(" + c.xtype + ")");
var ret = new ns[c.xtype](c);
ret.xns = false;
return ret;
c.xns = false; // prevent recursion..
return c;
},
-
+ /**
+ * Logs to console if it can.
+ *
+ * @param {String|Object} string
+ * @method log
+ */
+ log : function(s)
+ {
+ if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
+ return; // alerT?
+ }
+ console.log(s);
+
+ },
/**
* Takes an object and converts it to an encoded URL. e.g. Roo.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2". Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
* @param {Object} o
* @return {String} The HTML fragment
*/
applyTemplate : function(values){
- if(this.compiled){
- return this.compiled(values);
- }
- var useF = this.disableFormats !== true;
- var fm = Roo.util.Format, tpl = this;
- var fn = function(m, name, format, args){
- if(format && useF){
- if(format.substr(0, 5) == "this."){
- return tpl.call(format.substr(5), values[name], values);
- }else{
- if(args){
- // quoted values are required for strings in compiled templates,
- // but for non compiled we need to strip them
- // quoted reversed for jsmin
- var re = /^\s*['"](.*)["']\s*$/;
- args = args.split(',');
- for(var i = 0, len = args.length; i < len; i++){
- args[i] = args[i].replace(re, "$1");
- }
- args = [values[name]].concat(args);
+ try {
+
+ if(this.compiled){
+ return this.compiled(values);
+ }
+ var useF = this.disableFormats !== true;
+ var fm = Roo.util.Format, tpl = this;
+ var fn = function(m, name, format, args){
+ if(format && useF){
+ if(format.substr(0, 5) == "this."){
+ return tpl.call(format.substr(5), values[name], values);
}else{
- args = [values[name]];
+ if(args){
+ // quoted values are required for strings in compiled templates,
+ // but for non compiled we need to strip them
+ // quoted reversed for jsmin
+ var re = /^\s*['"](.*)["']\s*$/;
+ args = args.split(',');
+ for(var i = 0, len = args.length; i < len; i++){
+ args[i] = args[i].replace(re, "$1");
+ }
+ args = [values[name]].concat(args);
+ }else{
+ args = [values[name]];
+ }
+ return fm[format].apply(fm, args);
}
- return fm[format].apply(fm, args);
+ }else{
+ return values[name] !== undefined ? values[name] : "";
}
- }else{
- return values[name] !== undefined ? values[name] : "";
- }
- };
- return this.html.replace(this.re, fn);
+ };
+ return this.html.replace(this.re, fn);
+ } catch (e) {
+ Roo.log(e);
+ throw e;
+ }
+
},
/**
*/
setStyle : function(prop, value){
if(typeof prop == "string"){
+
+ if (prop == 'float') {
+ this.setStyle(Roo.isIE ? 'styleFloat' : 'cssFloat', value);
+ return this;
+ }
+
var camel;
if(!(camel = propCache[prop])){
camel = propCache[prop] = prop.replace(camelRe, camelFn);
}
+
if(camel == 'opacity') {
this.setOpacity(value);
}else{
<pre><code>
var store = new Roo.data.Store(...);
- var view = new Roo.View("my-element",
- '<div id="{0}">{2} - {1}</div>', // auto create template
- {
- singleSelect: true,
- selectedClass: "ydataview-selected",
- store: store
+ var view = new Roo.View({
+ el : "my-element",
+ template : '<div id="{0}">{2} - {1}</div>', // auto create template
+
+ singleSelect: true,
+ selectedClass: "ydataview-selected",
+ store: store
});
// listen for node click?
* <br><br>
* <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
* IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
+ *
+ * Note: old style constructor is still suported (container, template, config)
+ *
* @constructor
* Create a new View
- * @param {String/HTMLElement/Element} container The container element where the view is to be rendered.
- * @param {String/DomHelper.Template} tpl The rendering template or a string to create a template with
* @param {Object} config The config object
+ *
*/
-Roo.View = function(container, tpl, config){
- this.el = Roo.get(container);
- if(typeof tpl == "string"){
- tpl = new Roo.Template(tpl);
+Roo.View = function(config, depreciated_tpl, depreciated_config){
+
+ if (typeof(depreciated_tpl) == 'undefined') {
+ // new way.. - universal constructor.
+ Roo.apply(this, config);
+ this.el = Roo.get(this.el);
+ } else {
+ // old format..
+ this.el = Roo.get(config);
+ this.tpl = depreciated_tpl;
+ Roo.apply(this, depreciated_config);
}
- tpl.compile();
- /**
- * The template used by this View
- * @type {Roo.DomHelper.Template}
- */
- this.tpl = tpl;
-
- Roo.apply(this, config);
+
+
+ if(typeof(this.tpl) == "string"){
+ this.tpl = new Roo.Template(this.tpl);
+ }
+
+
+ this.tpl.compile();
+
+
/** @private */
this.addEvents({
/**
};
Roo.extend(Roo.View, Roo.util.Observable, {
+
+ /**
+ * @cfg {Roo.data.Store} store Data store to load data from.
+ */
+ store : false,
+
/**
- * The css class to add to selected nodes
- * @type {Roo.DomHelper.Template}
+ * @cfg {String|Roo.Element} el The container element.
*/
- selectedClass : "x-view-selected",
+ el : '',
+ /**
+ * @cfg {String|Roo.Template} tpl The template used by this View
+ */
+ tpl : false,
+
+ /**
+ * @cfg {String} selectedClass The css class to add to selected nodes
+ */
+ selectedClass : "x-view-selected",
+ /**
+ * @cfg {String} emptyText The empty text to show when nothing is loaded.
+ */
emptyText : "",
/**
* Returns the element this view is bound to.
* @extends Roo.View
* Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
<pre><code>
-var view = new Roo.JsonView("my-element",
- '<div id="{id}">{foo} - {bar}</div>', // auto create template
- { multiSelect: true, jsonRoot: "data" }
-);
+var view = new Roo.JsonView({
+ container: "my-element",
+ template: '<div id="{id}">{foo} - {bar}</div>', // auto create template
+ multiSelect: true,
+ jsonRoot: "data"
+});
// listen for node click?
view.on("click", function(vw, index, node, e){
"</div><hr />"
);
-var moreView = new Roo.JsonView("entry-list", tpl, {
+var moreView = new Roo.JsonView({
+ container : "entry-list",
+ template : tpl,
jsonRoot: "posts"
});
moreView.on("beforerender", this.sortEntries, this);
text: "Loading Blog Entries..."
});
</code></pre>
+*
+* Note: old code is supported with arguments : (container, template, config)
+*
+*
* @constructor
* Create a new JsonView
- * @param {String/HTMLElement/Element} container The container element where the view is to be rendered.
- * @param {Template} tpl The rendering template
+ *
* @param {Object} config The config object
+ *
*/
-Roo.JsonView = function(container, tpl, config){
- Roo.JsonView.superclass.constructor.call(this, container, tpl, config);
+Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
+
+
+ Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
var um = this.el.getUpdateManager();
um.setRenderer(this);
};
Roo.extend(Roo.JsonView, Roo.View, {
/**
- * The root property in the loaded JSON object that contains the data
- * @type {String}
+ * @type {String} The root property in the loaded JSON object that contains the data
*/
jsonRoot : "",
* @param {Object} config Configuration options
*/
Roo.form.BasicForm = function(el, config){
+ this.allItems = [];
+ this.childForms = [];
Roo.apply(this, config);
/*
* The Roo.form.Field items in this form.
* @type MixedCollection
*/
+
+
this.items = new Roo.util.MixedCollection(false, function(o){
return o.id || (o.id = Roo.id());
});
* or setValues() data instead of when the form was first created.
*/
trackResetOnLoad : false,
-
+
+
+ /**
+ * childForms - used for multi-tab forms
+ * @type {Array}
+ */
+ childForms : false,
+
+ /**
+ * allItems - full list of fields.
+ * @type {Array}
+ */
+ allItems : false,
+
/**
* By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
* element by passing it or its id or mask the form itself by passing in true.
return field || null;
},
-
+ /**
+ * Add a secondary form to this one,
+ * Used to provide tabbed forms. One form is primary, with hidden values
+ * which mirror the elements from the other forms.
+ *
+ * @param {Roo.form.Form} form to add.
+ *
+ */
+ addForm : function(form){
+
+ this.childForms.push(form);
+ Roo.each(form.allItems, function (fe) {
+
+ if (this.findField(fe.name)) { // already added..
+ return;
+ }
+ this.add( new Roo.form.Hidden({
+ name : fe.name
+ }));
+ }, this);
+
+ },
/**
* Mark fields in this form invalid in bulk.
* @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
}
}
}
+ Roo.each(this.childForms || [], function (f) {
+ f.markInvalid(errors);
+ });
+
return this;
},
}
}
}
+
+ Roo.each(this.childForms || [], function (f) {
+ f.setValues(values);
+ });
+
return this;
},
* @return {Object}
*/
getValues : function(asString){
+ if (this.childForms) {
+ // copy values from the child forms
+ Roo.each(this.childForms, function (f) {
+ if (f.allFields) {
+ Roo.each(f.allFields, function (e) {
+ if (e.name && e.getValue && this.findField(e.name)) {
+ this.findField(e.name).setValue(e.getValue());
+ }
+ });
+ }
+ }, this);
+ }
+
+
+
var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
if(asString === true){
return fs;
this.items.each(function(f){
f.clearInvalid();
});
+
+ Roo.each(this.childForms || [], function (f) {
+ f.clearInvalid();
+ });
+
+
return this;
},
this.items.each(function(f){
f.reset();
});
+
+ Roo.each(this.childForms || [], function (f) {
+ f.reset();
+ });
+
+
return this;
},
xitems = config.items;
delete config.items;
}
-
+
Roo.form.Form.superclass.constructor.call(this, null, config);
this.url = this.url || this.action;
*/
monitorPoll : 200,
+
/**
* Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
* fields are added and the column is closed. If no fields are passed the column remains open
}
return this;
},
+
+
+
+
+
/**
* Find any element that has been added to a form, using it's ID or name
* This can include framesets, columns etc. along with regular fields..
},
/**
- * Adds a xtype elements to the panel - currently only supports Forms.
+ * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
* <pre><code>
layout.addxtype({
addxtype : function(cfg) {
// add form..
- if (!cfg.xtype.match(/^Form$/)) {
- return false;
- }
- var el = this.el.createChild();
+ if (cfg.xtype.match(/^Form$/)) {
+ var el = this.el.createChild();
- this.form = new Roo.form.Form(cfg);
-
-
- if ( this.form.allItems.length) this.form.render(el.dom);
- return this.form;
+ this.form = new Roo.form.Form(cfg);
+
+
+ if ( this.form.allItems.length) this.form.render(el.dom);
+ return this.form;
+ }
+ if (['View', 'JsonView'].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;
+
+ }
+ return false;
}
});