<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;
+ // factory?
+ var ret = new Roo[cfg.xtype](cfg);
+ ret.render(false, ''); // render blank..
+ return ret;
+
+ }
+ return false;
}
});
projects / roojs1 / blobdiff