/**
* Reinitializes the tabs component, clearing out old tabs and finding new ones.
- * @return {Roo.TabPanel} The tabs component
+ * @return {Roo.panel.Tab} The tabs component
*/
initTabs : function(){
var tabs = this.getTabs();
},
/**
- * Returns the TabPanel component (creates it if it doesn't exist).
+ * Returns the panel.Tab component (creates it if it doesn't exist).
* Note: If you wish to simply check for the existence of tabs without creating them,
* check for a null 'tabs' property.
- * @return {Roo.TabPanel} The tabs component
+ * @return {Roo.panel.Tab} The tabs component
*/
getTabs : function(){
if(!this.tabs){
this.el.addClass("x-dlg-auto-tabs");
this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
- this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
+ this.tabs = new Roo.panel.Tab(this.body.dom, this.tabPosition == "bottom");
}
return this.tabs;
},
* @event beforeremove
* Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
* @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
+ * @param {Roo.panel.Content} panel The panel
* @param {Object} e The cancel event object
*/
"beforeremove" : true,
* @event paneladded
* Fires when a panel is added.
* @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
+ * @param {Roo.panel.Content} panel The panel
*/
"paneladded" : true,
/**
* @event panelremoved
* Fires when a panel is removed.
* @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
+ * @param {Roo.panel.Content} panel The panel
*/
"panelremoved" : true,
/**
* @event panelactivated
* Fires when a panel is activated.
* @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The activated panel
+ * @param {Roo.panel.Content} panel The activated panel
*/
"panelactivated" : true,
/**
/**
* Show the specified panel.
- * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
- * @return {Roo.ContentPanel} The shown panel or null
+ * @param {Number/String/panel.Content} panelId The panels index, id or the panel itself
+ * @return {Roo.panel.Content} The shown panel or null
*/
showPanel : function(panel){
if(panel = this.getPanel(panel)){
/**
* Get the active panel for this region.
- * @return {Roo.ContentPanel} The active panel or null
+ * @return {Roo.panel.Content} The active panel or null
*/
getActivePanel : function(){
return this.activePanel;
/**
* Add the passed ContentPanel(s)
- * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
- * @return {Roo.ContentPanel} The panel added (if only one was added)
+ * @param {panel.Content...} panel The ContentPanel(s) to add (you can pass more than one)
+ * @return {Roo.panel.Content} The panel added (if only one was added)
*/
add : function(panel){
if(arguments.length > 1){
/**
* Returns true if the panel is in this region.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
* @return {Boolean}
*/
hasPanel : function(panel){
/**
* Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
* @param {Boolean} preservePanel Overrides the config preservePanel option
- * @return {Roo.ContentPanel} The panel that was removed
+ * @return {Roo.panel.Content} The panel that was removed
*/
remove : function(panel, preservePanel){
panel = this.getPanel(panel);
/**
* Returns the panel specified or null if it's not in this region.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
- * @return {Roo.ContentPanel}
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
+ * @return {Roo.panel.Content}
*/
getPanel : function(id){
if(typeof id == "object"){ // must be panel obj
/**
* @class Roo.BorderLayout
* @extends Roo.LayoutManager
- * @children Roo.ContentPanel
+ * @children Roo.panel.Content
* This class represents a common layout manager used in desktop applications. For screenshots and more details,
* please see: <br><br>
* <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
});
// shorthand
-var CP = Roo.ContentPanel;
+var CP = Roo.panel.Content;
layout.beginUpdate();
layout.add("north", new CP("north", "North"));
/**
* Adds a ContentPanel (or subclass) to this layout.
* @param {String} target The target region key (north, south, east, west or center).
- * @param {Roo.ContentPanel} panel The panel to add
- * @return {Roo.ContentPanel} The added panel
+ * @param {Roo.panel.Content} panel The panel to add
+ * @return {Roo.panel.Content} The added panel
*/
add : function(target, panel){
/**
* Remove a ContentPanel (or subclass) to this layout.
* @param {String} target The target region key (north, south, east, west or center).
- * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
- * @return {Roo.ContentPanel} The removed panel
+ * @param {Number/String/Roo.panel.Content} panel The index, id or panel to remove
+ * @return {Roo.panel.Content} The removed panel
*/
remove : function(target, panel){
target = target.toLowerCase();
/**
* Searches all regions for a panel with the specified id
* @param {String} panelId
- * @return {Roo.ContentPanel} The panel or null if it wasn't found
+ * @return {Roo.panel.Content} The panel or null if it wasn't found
*/
findPanel : function(panelId){
var rs = this.regions;
/**
* Searches all regions for a panel with the specified id and activates (shows) it.
- * @param {String/ContentPanel} panelId The panels id or the panel itself
- * @return {Roo.ContentPanel} The shown panel or null
+ * @param {String/panel.Content} panelId The panels id or the panel itself
+ * @return {Roo.panel.Content} The shown panel or null
*/
showPanel : function(panelId) {
var rs = this.regions;
// private
addTypedPanels : function(lr, ps){
if(typeof ps == 'string'){
- lr.add(new Roo.ContentPanel(ps));
+ lr.add(new Roo.panel.Content(ps));
}
else if(ps instanceof Array){
for(var i =0, len = ps.length; i < len; i++){
else if(!ps.events){ // raw config?
var el = ps.el;
delete ps.el; // prevent conflict
- lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
+ lr.add(new Roo.panel.Content(el || Roo.id(), ps));
}
else { // panel object assumed!
lr.add(ps);
// can accept a layout region..!?!?
//Roo.log('Roo.BorderLayout add ' + cfg.xtype)
- if (!cfg.xtype.match(/Panel$/)) {
- return false;
- }
+ // if (!cfg.xtype.match(/Panel$/)) {
+ // return false;
+ // }
var ret = false;
-
+
if (typeof(cfg.region) == 'undefined') {
Roo.log("Failed to add Panel, region was not set");
Roo.log(cfg);
switch(cfg.xtype)
{
- case 'ContentPanel': // ContentPanel (el, cfg)
+ case 'Content':
+ if(cfg.autoCreate) {
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ } else {
+ var el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](el, cfg); // new panel!!!!!
+ }
+
+ this.add(region, ret);
+ break;
+ case 'Grid':
+ // needs grid and region
+
+ //var el = this.getRegion(region).el.createChild();
+ var el = this.el.createChild();
+ // create the grid first...
+
+ var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+ delete cfg.grid;
+ if (region == 'center' && this.active ) {
+ cfg.background = false;
+ }
+ ret = new Roo.panel[cfg.xtype](grid, cfg); // new panel!!!!!
+
+ this.add(region, ret);
+ if (cfg.background) {
+ ret.on('activate', function(gp) {
+ if (!gp.grid.rendered) {
+ gp.grid.render();
+ }
+ });
+ } else {
+ grid.render();
+ }
+ break;
+ case 'NestedLayout':
+ // create a new Layout (which is a Border Layout...
+ var el = this.el.createChild();
+ var clayout = cfg.layout;
+ delete cfg.layout;
+ clayout.items = clayout.items || [];
+ // replace this exitems with the clayout ones..
+ xitems = clayout.items;
+
+
+ if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+ cfg.background = false;
+ }
+ var layout = new Roo.BorderLayout(el, clayout);
+
+ ret = new Roo.panel[cfg.xtype](layout, cfg); // new panel!!!!!
+ //console.log('adding nested layout panel ' + cfg.toSource());
+ this.add(region, ret);
+ nb = {}; /// find first...
+ break;
+
+ case 'Calendar':
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'Tree': // our new panel!
+ cfg.el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'ContentPanel':
case 'ScrollPanel': // ContentPanel (el, cfg)
case 'ViewPanel':
if(cfg.autoCreate) {
* <script type="text/javascript">
*/
/**
- * @class Roo.ContentPanel
+ * @class Roo.panel.Content
* @extends Roo.util.Observable
* @children Roo.form.Form Roo.JsonView Roo.View
* @parent Roo.BorderLayout Roo.LayoutDialog builder
- * A basic ContentPanel element.
+ * A basic Content Panel 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|Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
* @cfg {Roo.menu.Menu} menu popup menu
* @constructor
- * Create a new ContentPanel.
+ * Create a new Content Panel.
* @param {String/HTMLElement/Roo.Element} el The container element for this panel
* @param {String/Object} config A string to set only the title or a config object
* @param {String} content (optional) Set the HTML content for this panel
* @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
*/
-Roo.ContentPanel = function(el, config, content){
+Roo.panel.Content = function(el, config, content){
/*
if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
/**
* @event activate
* Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
+ * @param {Roo.panel.Content} this
*/
"activate" : true,
/**
* @event deactivate
* Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
+ * @param {Roo.panel.Content} this
*/
"deactivate" : true,
/**
* @event resize
* Fires when this panel is resized if fitToFrame is true.
- * @param {Roo.ContentPanel} this
+ * @param {Roo.panel.Content} this
* @param {Number} width The width after any component adjustments
* @param {Number} height The height after any component adjustments
*/
/**
* @event render
* Fires when this tab is created
- * @param {Roo.ContentPanel} this
+ * @param {Roo.panel.Content} this
*/
"render" : true
- Roo.ContentPanel.superclass.constructor.call(this);
+ Roo.panel.Content.superclass.constructor.call(this);
if (this.view && typeof(this.view.xtype) != 'undefined') {
this.view.el = this.el.appendChild(document.createElement("div"));
this.fireEvent('render', this);
};
-Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
+Roo.extend(Roo.panel.Content, Roo.util.Observable, {
tabTip:'',
setRegion : function(region){
this.region = region;
* @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
* @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
* @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
- * @return {Roo.ContentPanel} this
+ * @return {Roo.panel.Content} this
*/
load : function(){
var um = this.el.getUpdateManager();
/**
* @class Roo.LayoutDialog
* @extends Roo.BasicDialog
- * @children Roo.ContentPanel
+ * @children Roo.panel.Content
* @parent builder none
* Dialog which provides adjustments for working with a layout in a Dialog.
* Add your necessary layout config options to the dialog's config.<br>
}
});
innerLayout.beginUpdate();
- innerLayout.add("east", new Roo.ContentPanel("dl-details"));
- innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
+ innerLayout.add("east", new Roo.panel.Content("dl-details"));
+ innerLayout.add("center", new Roo.panel.Content("selection-panel"));
innerLayout.endUpdate(true);
var layout = dialog.getLayout();
layout.beginUpdate();
- layout.add("center", new Roo.ContentPanel("standard-panel",
+ layout.add("center", new Roo.panel.Content("standard-panel",
{title: "Download the Source", fitToFrame:true}));
- layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
+ layout.add("center", new Roo.panel.NestedLayout(innerLayout,
{title: "Build your own roo.js"}));
layout.getRegion("center").showPanel(sp);
layout.endUpdate();
initTabs : function()
{
this.bodyEl.setStyle("overflow", "hidden");
- var ts = new Roo.TabPanel(
+ var ts = new Roo.panel.Tab(
this.bodyEl.dom,
{
tabPosition: this.bottomTabs ? 'bottom' : 'top',
/**
* Shows the specified panel.
- * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
- * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
+ * @param {Number/String/panel.Content} panelId The panel's index, id or the panel itself
+ * @return {Roo.panel.Content} The shown panel, or null if a panel could not be found from panelId
*/
showPanel : function(panel)
{
/**
* Get the active panel for this region.
- * @return {Roo.ContentPanel} The active panel or null
+ * @return {Roo.panel.Content} The active panel or null
*/
getActivePanel : function(){
return this.activePanel;
/**
* Adds the passed ContentPanel(s) to this region.
- * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
- * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
+ * @param {panel.Content...} panel The ContentPanel(s) to add (you can pass more than one)
+ * @return {Roo.panel.Content} The panel added (if only one was added; null otherwise)
*/
add : function(panel){
if(arguments.length > 1){
/**
* Hides the tab for the specified panel.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
*/
hidePanel : function(panel){
if(this.tabs && (panel = this.getPanel(panel))){
/**
* Unhides the tab for a previously hidden panel.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
*/
unhidePanel : function(panel){
if(this.tabs && (panel = this.getPanel(panel))){
/**
* Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
* @param {Boolean} preservePanel Overrides the config preservePanel option
- * @return {Roo.ContentPanel} The panel that was removed
+ * @return {Roo.panel.Content} The panel that was removed
*/
remove : function(panel, preservePanel){
panel = this.getPanel(panel);
/**
* Returns the TabPanel component used by this region
- * @return {Roo.TabPanel}
+ * @return {Roo.panel.Tab}
*/
getTabs : function(){
return this.tabs;
items : [
{
- xtype : 'ContentPanel',
- xns : Roo,
+ xtype : 'Content',
+ xns : Roo.panel,
region: 'center',
fitToFrame : true,
* Example:
<pre><code>
var reader = new Roo.ReaderLayout();
-var CP = Roo.ContentPanel; // shortcut for adding
+var CP = Roo.panel.Content; // shortcut for adding
reader.beginUpdate();
reader.add("north", new CP("north", "North"));
minHeight:200
}, c.listView)
});
- this.add('center', new Roo.NestedLayoutPanel(inner,
+ this.add('center', new Roo.panel.NestedLayout(inner,
Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
this.endUpdate();
this.el = wrap; this.up = up; this.down = down;
};
-Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
+Roo.extend(Roo.ScrollPanel, Roo.panel.Content, {
increment : 100,
wheelIncrement : 5,
scrollUp : function(){
*/
/**
- * @class Roo.GridPanel
- * @extends Roo.ContentPanel
+ * @class Roo.ViewPanel
+ * @extends Roo.panel.Content
* @constructor
- * Create a new GridPanel.
+ * Create a new ViewPanel.
* @param {Roo.grid.Grid} grid The grid for this panel
* @param {String/Object} config A string to set only the panel's title, or a config object
*/
//this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
};
-Roo.extend(Roo.ViewPanel, Roo.ContentPanel, {
+Roo.extend(Roo.ViewPanel, Roo.panel.Content, {
autoCreate : true,
getId : function(){
destroy : function(){
this.grid.destroy();
delete this.grid;
- Roo.GridPanel.superclass.destroy.call(this);
+ Roo.panel.Grid.superclass.destroy.call(this);
}
});
\ No newline at end of file
--- /dev/null
+// old names for panel elements
+Roo.GridPanel = Roo.panel.Grid;
+Roo.CalendarPanel = Roo.panel.Calendar;
+Roo.ContentPanel = Roo.panel.Content;
+Roo.NestedLayoutPanel = Roo.panel.NestedLayout;
+Roo.TabPanel = Roo.panel.Tab;
+Roo.TabPanelItem = Roo.panel.TabItem;
+Roo.TreePanel = Roo.panel.Tree;
\ No newline at end of file
+++ /dev/null
-Roo.dialog = {};
\ No newline at end of file
* @param {Object} config The config object
*/
-Roo.CalendarPanel = function(config){
+Roo.panel.Calendar = function(config){
Roo.log("cal panel ctr");
//this.wrapper.dom.appendChild(grid.getGridEl().dom);
- Roo.CalendarPanel.superclass.constructor.call(this, this.wrapper, config);
+ Roo.panel.Calendar.superclass.constructor.call(this, this.wrapper, config);
Roo.log(this.el);
};
-Roo.extend(Roo.CalendarPanel, Roo.ContentPanel, {
+Roo.extend(Roo.panel.Calendar, Roo.panel.Content, {
render : function()
--- /dev/null
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.panel.Content
+ * @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * A basic Content Panel 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|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 {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Roo.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) [required] 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.)
+ * @cfg {String} style Extra style to add to the content panel
+ * @cfg {Roo.menu.Menu} menu popup menu
+
+ * @constructor
+ * Create a new Content Panel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+Roo.panel.Content = function(el, config, content){
+
+ /*
+ if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ if (config && config.parentLayout) {
+ el = config.parentLayout.el.createChild();
+ }
+ */
+ if(el.autoCreate){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ this.el = Roo.get(el);
+ if(!this.el && config && config.autoCreate){
+ if(typeof config.autoCreate == "object"){
+ if(!config.autoCreate.id){
+ config.autoCreate.id = config.id||el;
+ }
+ this.el = Roo.DomHelper.append(document.body,
+ config.autoCreate, true);
+ }else{
+ this.el = Roo.DomHelper.append(document.body,
+ {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
+ }
+ }
+
+
+ this.closable = false;
+ this.loaded = false;
+ this.active = false;
+ if(typeof config == "string"){
+ this.title = config;
+ }else{
+ Roo.apply(this, config);
+ }
+
+ if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+ this.wrapEl = this.el.wrap();
+ this.toolbar.container = this.el.insertSibling(false, 'before');
+ this.toolbar = new Roo.Toolbar(this.toolbar);
+ }
+
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+ if (!this.wrapEl) {
+ this.wrapEl = this.el.wrap();
+ }
+
+ this.footer.container = this.wrapEl.createChild();
+
+ this.footer = Roo.factory(this.footer, Roo);
+
+ }
+
+ if(this.resizeEl){
+ this.resizeEl = Roo.get(this.resizeEl, true);
+ }else{
+ this.resizeEl = this.el;
+ }
+ // handle view.xtype
+
+
+
+
+ this.addEvents({
+ /**
+ * @event activate
+ * Fires when this panel is activated.
+ * @param {Roo.panel.Content} this
+ */
+ "activate" : true,
+ /**
+ * @event deactivate
+ * Fires when this panel is activated.
+ * @param {Roo.panel.Content} this
+ */
+ "deactivate" : true,
+
+ /**
+ * @event resize
+ * Fires when this panel is resized if fitToFrame is true.
+ * @param {Roo.panel.Content} this
+ * @param {Number} width The width after any component adjustments
+ * @param {Number} height The height after any component adjustments
+ */
+ "resize" : true,
+
+ /**
+ * @event render
+ * Fires when this tab is created
+ * @param {Roo.panel.Content} 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);
+ });
+ }
+ content = content || this.content;
+ if(content){
+ this.setContent(content);
+ }
+ if(config && config.url){
+ this.setUrl(this.url, this.params, this.loadOnce);
+ }
+
+
+
+ Roo.panel.Content.superclass.constructor.call(this);
+
+ if (this.view && typeof(this.view.xtype) != 'undefined') {
+ this.view.el = this.el.appendChild(document.createElement("div"));
+ this.view = Roo.factory(this.view);
+ this.view.render && this.view.render(false, '');
+ }
+
+
+ this.fireEvent('render', this);
+};
+
+Roo.extend(Roo.panel.Content, Roo.util.Observable, {
+ tabTip:'',
+ setRegion : function(region){
+ this.region = region;
+ if(region){
+ this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
+ }else{
+ this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
+ }
+ },
+
+ /**
+ * Returns the toolbar for this Panel if one was configured.
+ * @return {Roo.Toolbar}
+ */
+ getToolbar : function(){
+ return this.toolbar;
+ },
+
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent("deactivate", this);
+ }else{
+ this.fireEvent("activate", this);
+ }
+ },
+ /**
+ * Updates this panel's element
+ * @param {String} content The new content
+ * @param {Boolean} loadScripts (optional) true to look for and process scripts
+ */
+ setContent : function(content, loadScripts){
+ this.el.update(content, loadScripts);
+ },
+
+ ignoreResize : function(w, h){
+ if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
+ return true;
+ }else{
+ this.lastSize = {width: w, height: h};
+ return false;
+ }
+ },
+ /**
+ * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ getUpdateManager : function(){
+ return this.el.getUpdateManager();
+ },
+ /**
+ * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
+ * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
+<pre><code>
+panel.load({
+ url: "your-url.php",
+ params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+ callback: yourFunction,
+ scope: yourObject, //(optional scope)
+ discardUrl: false,
+ nocache: false,
+ text: "Loading...",
+ timeout: 30,
+ scripts: false
+});
+</code></pre>
+ * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
+ * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
+ * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
+ * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
+ * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+ * @return {Roo.panel.Content} this
+ */
+ load : function(){
+ var um = this.el.getUpdateManager();
+ um.update.apply(um, arguments);
+ return this;
+ },
+
+
+ /**
+ * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
+ * @param {String/Function} url The URL to load the content from or a function to call to get the URL
+ * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+ * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.removeListener("activate", this.refreshDelegate);
+ }
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on("activate", this.refreshDelegate);
+ return this.el.getUpdateManager();
+ },
+
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.el.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
+ }
+ },
+
+ _setLoaded : function(){
+ this.loaded = true;
+ },
+
+ /**
+ * Returns this panel's id
+ * @return {String}
+ */
+ getId : function(){
+ return this.el.id;
+ },
+
+ /**
+ * Returns this panel's element - used by regiosn to add.
+ * @return {Roo.Element}
+ */
+ getEl : function(){
+ return this.wrapEl || this.el;
+ },
+
+ adjustForComponents : function(width, height)
+ {
+ //Roo.log('adjustForComponents ');
+ if(this.resizeEl != this.el){
+ width -= this.el.getFrameWidth('lr');
+ height -= this.el.getFrameWidth('tb');
+ }
+ if(this.toolbar){
+ var te = this.toolbar.getEl();
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+ if(this.footer){
+ var te = this.footer.getEl();
+ //Roo.log("footer:" + te.getHeight());
+
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+
+
+ if(this.adjustments){
+ width += this.adjustments[0];
+ height += this.adjustments[1];
+ }
+ return {"width": width, "height": height};
+ },
+
+ setSize : function(width, height){
+ if(this.fitToFrame && !this.ignoreResize(width, height)){
+ if(this.fitContainer && this.resizeEl != this.el){
+ this.el.setSize(width, height);
+ }
+ var size = this.adjustForComponents(width, height);
+ this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
+ this.fireEvent('resize', this, size.width, size.height);
+ }
+ },
+
+ /**
+ * Returns this panel's title
+ * @return {String}
+ */
+ getTitle : function(){
+ return this.title;
+ },
+
+ /**
+ * Set this panel's title
+ * @param {String} title
+ */
+ setTitle : function(title){
+ this.title = title;
+ if(this.region){
+ this.region.updatePanelTitle(this, title);
+ }
+ },
+
+ /**
+ * Returns true is this panel was configured to be closable
+ * @return {Boolean}
+ */
+ isClosable : function(){
+ return this.closable;
+ },
+
+ beforeSlide : function(){
+ this.el.clip();
+ this.resizeEl.clip();
+ },
+
+ afterSlide : function(){
+ this.el.unclip();
+ this.resizeEl.unclip();
+ },
+
+ /**
+ * Force a content refresh from the URL specified in the {@link #setUrl} method.
+ * Will fail silently if the {@link #setUrl} method has not been called.
+ * This does not activate the panel, just updates its content.
+ */
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
+ }
+ },
+
+ /**
+ * Destroys this panel
+ */
+ destroy : function(){
+ this.el.removeAllListeners();
+ var tempEl = document.createElement("span");
+ tempEl.appendChild(this.el.dom);
+ tempEl.innerHTML = "";
+ this.el.remove();
+ 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>
+
+layout.addxtype({
+ xtype : 'Form',
+ items: [ .... ]
+ }
+);
+
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+
+ addxtype : function(cfg) {
+ if(cfg.xtype.match(/^Cropbox$/)) {
+
+ this.cropbox = new Roo.factory(cfg);
+
+ this.cropbox.render(this.el);
+
+ return this.cropbox;
+ }
+ // add form..
+ if (cfg.xtype.match(/^Form$/)) {
+
+ var el;
+ //if (this.footer) {
+ // el = this.footer.container.insertSibling(false, 'before');
+ //} else {
+ el = this.el.createChild();
+ //}
+
+ this.form = new Roo.form.Form(cfg);
+
+
+ if ( this.form.allItems.length) {
+ this.form.render(el.dom);
+ }
+ return this.form;
+ }
+ // should only have one of theses..
+ if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
+ // views.. should not be just added - used named prop 'view''
+
+ cfg.el = this.el.appendChild(document.createElement("div"));
+ // factory?
+
+ var ret = new Roo.factory(cfg);
+
+ ret.render && ret.render(false, ''); // render blank..
+ this.view = ret;
+ return ret;
+ }
+ return false;
+ }
+});
+
+
+
+
+
+
+
+
+
+
+
*/
/**
- * @class Roo.dialog.UploadCropbox
+ * @class Roo.panel.Cropbox
* @extends Roo.BoxComponent
- * Dialog UploadCropbox class
+ * Panel Cropbox class
* @cfg {String} emptyText show when image has been loaded
* @cfg {String} rotateNotify show when image too small to rotate
* @cfg {Number} errorTimeout default 3000
* @cfg {Boolean} loadingText default 'Loading...'
*
* @constructor
- * Create a new UploadCropbox
+ * Create a new Cropbox
* @param {Object} config The config object
*/
- Roo.dialog.UploadCropbox = function(config){
- Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
+ Roo.panel.Cropbox = function(config){
+ Roo.panel.Cropbox.superclass.constructor.call(this, config);
this.addEvents({
/**
* @event beforeselectfile
* Fire before select file
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
*/
"beforeselectfile" : true,
/**
* @event initial
* Fire after initEvent
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
*/
"initial" : true,
/**
* @event crop
* Fire after initEvent
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {String} data
*/
"crop" : true,
/**
* @event prepare
* Fire when preparing the file data
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {Object} file
*/
"prepare" : true,
/**
* @event exception
* Fire when get exception
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {XMLHttpRequest} xhr
*/
"exception" : true,
/**
* @event beforeloadcanvas
* Fire before load the canvas
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {String} src
*/
"beforeloadcanvas" : true,
/**
* @event trash
* Fire when trash image
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
*/
"trash" : true,
/**
* @event download
* Fire when download the image
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
*/
"download" : true,
/**
* @event footerbuttonclick
* Fire when footerbuttonclick
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {String} type
*/
"footerbuttonclick" : true,
/**
* @event resize
* Fire when resize
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
*/
"resize" : true,
/**
* @event rotate
* Fire when rotate the image
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {String} pos
*/
"rotate" : true,
/**
* @event inspect
* Fire when inspect the file
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {Object} file
*/
"inspect" : true,
/**
* @event upload
* Fire when xhr upload the file
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {Object} data
*/
"upload" : true,
/**
* @event arrange
* Fire when arrange the file data
- * @param {Roo.dialog.UploadCropbox} this
+ * @param {Roo.panel.Cropbox} this
* @param {Object} formData
*/
"arrange" : true,
/**
* @event loadcanvas
* Fire after load the canvas
- * @param {Roo.dialog.UploadCropbox}
+ * @param {Roo.panel.Cropbox}
* @param {Object} imgEl
*/
"loadcanvas" : true
});
- this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
+ this.buttons = this.buttons || Roo.panel.Cropbox.footer.STANDARD;
};
-Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, {
+Roo.extend(Roo.panel.Cropbox, Roo.Component, {
emptyText : 'Click to upload image',
rotateNotify : 'Image is too small to rotate',
onRender : function(ct, position)
{
- Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
+ Roo.panel.Cropbox.superclass.onRender.call(this, ct, position);
if(this.el){
if (this.el.attr('xtype')) {
if(
typeof(this.exif) != 'undefined' &&
- typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
- [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
+ typeof(this.exif[Roo.panel.Cropbox['tags']['Orientation']]) != 'undefined' &&
+ [1, 3, 6, 8].indexOf(this.exif[Roo.panel.Cropbox['tags']['Orientation']]) != -1
){
- this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
+ this.baseRotate = this.exif[Roo.panel.Cropbox['tags']['Orientation']];
}
- this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
+ this.rotate = Roo.panel.Cropbox['Orientation'][this.baseRotate];
},
getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
{
- var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
+ var tagType = Roo.panel.Cropbox.exifTagTypes[type],
tagSize,
dataOffset,
values,
});
-Roo.apply(Roo.dialog.UploadCropbox, {
+Roo.apply(Roo.panel.Cropbox, {
tags : {
'Orientation': 0x0112
},
/**
- * @class Roo.GridPanel
- * @extends Roo.ContentPanel
+ * @class Roo.panel.Grid
+ * @extends Roo.panel.Content
* @parent Roo.BorderLayout Roo.LayoutDialog builder
* @constructor
* Create a new GridPanel.
* @cfg {Roo.grid.Grid} grid The grid for this panel
*/
-Roo.GridPanel = function(grid, config){
+Roo.panel.Grid = function(grid, config){
// universal ctor...
if (typeof(grid.grid) != 'undefined') {
this.wrapper.dom.appendChild(grid.getGridEl().dom);
- Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
+ Roo.panel.Grid.superclass.constructor.call(this, this.wrapper, config);
if(this.toolbar){
this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
};
-Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
+Roo.extend(Roo.panel.Grid, Roo.panel.Content, {
getId : function(){
return this.grid.id;
},
destroy : function(){
this.grid.destroy();
delete this.grid;
- Roo.GridPanel.superclass.destroy.call(this);
+ Roo.panel.Grid.superclass.destroy.call(this);
}
});
/**
- * @class Roo.NestedLayoutPanel
- * @extends Roo.ContentPanel
+ * @class Roo.panel.NestedLayout
+ * @extends Roo.panel.Content
* @parent Roo.BorderLayout Roo.LayoutDialog builder
* @cfg {Roo.BorderLayout} layout [required] The layout for this panel
*
* @param {Roo.BorderLayout} layout [required] The layout for this panel
* @param {String/Object} config A string to set only the title or a config object
*/
-Roo.NestedLayoutPanel = function(layout, config)
+Roo.panel.NestedLayout = function(layout, config)
{
// construct with only one argument..
/* FIXME - implement nicer consturctors
*/
- Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
+ Roo.panel.NestedLayout.superclass.constructor.call(this, layout.getEl(), config);
layout.monitorWindowResize = false; // turn off autosizing
this.layout = layout;
};
-Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+Roo.extend(Roo.panel.NestedLayout, Roo.panel.Content, {
layout : false,
);
panel.addxtype({
- xtype : 'NestedLayoutPanel',
+ xtype : 'panel.NestedLayout',
region: 'west',
layout: {
center: { },
* <script type="text/javascript">
*/
/**
- * @class Roo.TabPanel
+ * @class Roo.panel.Tab
* @extends Roo.util.Observable
* A lightweight tab container.
* <br><br>
* Usage:
* <pre><code>
// basic tabs 1, built from existing content
-var tabs = new Roo.TabPanel("tabs1");
+var tabs = new Roo.panel.Tab("tabs1");
tabs.addTab("script", "View Script");
tabs.addTab("markup", "View Markup");
tabs.activate("script");
// more advanced tabs, built from javascript
-var jtabs = new Roo.TabPanel("jtabs");
+var jtabs = new Roo.panel.Tab("jtabs");
jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
// set up the UpdateManager
* @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
* @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
*/
-Roo.TabPanel = function(container, config){
+Roo.panel.Tab = function(container, config){
/**
* The container element for this TabPanel.
* @type Roo.Element
Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
}
if(this.tabPosition != "bottom"){
- /** The body element that contains {@link Roo.TabPanelItem} bodies. +
+ /** The body element that contains {@link Roo.panel.TabItem} bodies. +
* @type Roo.Element
*/
this.bodyEl = Roo.get(this.createBody(this.el.dom));
/**
* @event tabchange
* Fires when the active tab changes
- * @param {Roo.TabPanel} this
- * @param {Roo.TabPanelItem} activePanel The new active tab
+ * @param {Roo.panel.Tab} this
+ * @param {Roo.panel.TabItem} activePanel The new active tab
*/
"tabchange": true,
/**
* @event beforetabchange
* Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
- * @param {Roo.TabPanel} this
+ * @param {Roo.panel.Tab} this
* @param {Object} e Set cancel to true on this object to cancel the tab change
- * @param {Roo.TabPanelItem} tab The tab being changed to
+ * @param {Roo.panel.TabItem} tab The tab being changed to
*/
"beforetabchange" : true
});
- Roo.TabPanel.superclass.constructor.call(this);
+ Roo.panel.Tab.superclass.constructor.call(this);
};
-Roo.extend(Roo.TabPanel, Roo.util.Observable, {
+Roo.extend(Roo.panel.Tab, Roo.util.Observable, {
/*
*@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
*/
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.
+ * Creates a new {@link Roo.panel.TabItem} by looking for an existing element with the provided id -- if it's not found it creates one.
* @param {String} id The id of the div to use <b>or create</b>
* @param {String} text The text for the tab
* @param {String} content (optional) Content to put in the TabPanelItem body
* @param {Boolean} closable (optional) True to create a close icon on the tab
- * @return {Roo.TabPanelItem} The created TabPanelItem
+ * @return {Roo.panel.TabItem} The created TabPanelItem
*/
addTab : function(id, text, content, closable){
- var item = new Roo.TabPanelItem(this, id, text, closable);
+ var item = new Roo.panel.TabItem(this, id, text, closable);
this.addTabItem(item);
if(content){
item.setContent(content);
},
/**
- * Returns the {@link Roo.TabPanelItem} with the specified id/index
+ * Returns the {@link Roo.panel.TabItem} with the specified id/index
* @param {String/Number} id The id or index of the TabPanelItem to fetch.
- * @return {Roo.TabPanelItem}
+ * @return {Roo.panel.TabItem}
*/
getTab : function(id){
return this.items[id];
},
/**
- * Hides the {@link Roo.TabPanelItem} with the specified id/index
+ * Hides the {@link Roo.panel.TabItem} with the specified id/index
* @param {String/Number} id The id or index of the TabPanelItem to hide.
*/
hideTab : function(id){
},
/**
- * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
+ * "Unhides" the {@link Roo.panel.TabItem} with the specified id/index.
* @param {String/Number} id The id or index of the TabPanelItem to unhide.
*/
unhideTab : function(id){
},
/**
- * Adds an existing {@link Roo.TabPanelItem}.
- * @param {Roo.TabPanelItem} item The TabPanelItem to add
+ * Adds an existing {@link Roo.panel.TabItem}.
+ * @param {Roo.panel.TabItem} item The TabPanelItem to add
*/
addTabItem : function(item){
this.items[item.id] = item;
},
/**
- * Removes a {@link Roo.TabPanelItem}.
+ * Removes a {@link Roo.panel.TabItem}.
* @param {String/Number} id The id or index of the TabPanelItem to remove.
*/
removeTab : function(id){
},
/**
- * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
+ * Disables a {@link Roo.panel.TabItem}. It cannot be the active tab, if it is this call is ignored.
* @param {String/Number} id The id or index of the TabPanelItem to disable.
*/
disableTab : function(id){
},
/**
- * Enables a {@link Roo.TabPanelItem} that is disabled.
+ * Enables a {@link Roo.panel.TabItem} that is disabled.
* @param {String/Number} id The id or index of the TabPanelItem to enable.
*/
enableTab : function(id){
},
/**
- * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
+ * Activates a {@link Roo.panel.TabItem}. The currently active one will be deactivated.
* @param {String/Number} id The id or index of the TabPanelItem to activate.
- * @return {Roo.TabPanelItem} The TabPanelItem.
+ * @return {Roo.panel.TabItem} The TabPanelItem.
*/
activate : function(id){
var tab = this.items[id];
},
/**
- * Gets the active {@link Roo.TabPanelItem}.
- * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
+ * Gets the active {@link Roo.panel.TabItem}.
+ * @return {Roo.panel.TabItem} The active TabPanelItem or null if none are active.
*/
getActiveTab : function(){
return this.active;
}
});
-/**
- * @class Roo.TabPanelItem
- * @extends Roo.util.Observable
- * Represents an individual item (tab plus body) in a TabPanel.
- * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @param {String} id The id of this TabPanelItem
- * @param {String} text The text for the tab of this TabPanelItem
- * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
- */
-Roo.TabPanelItem = function(tabPanel, id, text, closable){
- /**
- * The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @type Roo.TabPanel
- */
- this.tabPanel = tabPanel;
- /**
- * The id for this TabPanelItem
- * @type String
- */
- this.id = id;
- /** @private */
- this.disabled = false;
- /** @private */
- this.text = text;
- /** @private */
- this.loaded = false;
- this.closable = closable;
-
- /**
- * The body element for this TabPanelItem.
- * @type Roo.Element
- */
- this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
- this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
- this.bodyEl.setStyle("display", "block");
- this.bodyEl.setStyle("zoom", "1");
- this.hideAction();
-
- var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
- /** @private */
- this.el = Roo.get(els.el, true);
- this.inner = Roo.get(els.inner, true);
- this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
- this.pnode = Roo.get(els.el.parentNode, true);
- this.el.on("mousedown", this.onTabMouseDown, this);
- this.el.on("click", this.onTabClick, this);
- /** @private */
- if(closable){
- var c = Roo.get(els.close, true);
- c.dom.title = this.closeText;
- c.addClassOnOver("close-over");
- c.on("click", this.closeClick, this);
- }
-
- this.addEvents({
- /**
- * @event activate
- * Fires when this tab becomes the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "activate": true,
- /**
- * @event beforeclose
- * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
- * @param {Roo.TabPanelItem} this
- * @param {Object} e Set cancel to true on this object to cancel the close.
- */
- "beforeclose": true,
- /**
- * @event close
- * Fires when this tab is closed.
- * @param {Roo.TabPanelItem} this
- */
- "close": true,
- /**
- * @event deactivate
- * Fires when this tab is no longer the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "deactivate" : true
- });
- this.hidden = false;
-
- Roo.TabPanelItem.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
- purgeListeners : function(){
- Roo.util.Observable.prototype.purgeListeners.call(this);
- this.el.removeAllListeners();
- },
- /**
- * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
- */
- show : function(){
- this.pnode.addClass("on");
- this.showAction();
- if(Roo.isOpera){
- this.tabPanel.stripWrap.repaint();
- }
- this.fireEvent("activate", this.tabPanel, this);
- },
-
- /**
- * Returns true if this tab is the active tab.
- * @return {Boolean}
- */
- isActive : function(){
- return this.tabPanel.getActiveTab() == this;
- },
-
- /**
- * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
- */
- hide : function(){
- this.pnode.removeClass("on");
- this.hideAction();
- this.fireEvent("deactivate", this.tabPanel, this);
- },
-
- hideAction : function(){
- this.bodyEl.hide();
- this.bodyEl.setStyle("position", "absolute");
- this.bodyEl.setLeft("-20000px");
- this.bodyEl.setTop("-20000px");
- },
-
- showAction : function(){
- this.bodyEl.setStyle("position", "relative");
- this.bodyEl.setTop("");
- this.bodyEl.setLeft("");
- this.bodyEl.show();
- },
-
- /**
- * Set the tooltip for the tab.
- * @param {String} tooltip The tab's tooltip
- */
- setTooltip : function(text){
- if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
- this.textEl.dom.qtip = text;
- this.textEl.dom.removeAttribute('title');
- }else{
- this.textEl.dom.title = text;
- }
- },
-
- onTabClick : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
- },
-
- onTabMouseDown : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
- },
-
- getWidth : function(){
- return this.inner.getWidth();
- },
- setWidth : function(width){
- var iwidth = width - this.pnode.getPadding("lr");
- this.inner.setWidth(iwidth);
- this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
- this.pnode.setWidth(width);
- },
-
- /**
- * Show or hide the tab
- * @param {Boolean} hidden True to hide or false to show.
- */
- setHidden : function(hidden){
- this.hidden = hidden;
- this.pnode.setStyle("display", hidden ? "none" : "");
- },
-
- /**
- * Returns true if this tab is "hidden"
- * @return {Boolean}
- */
- isHidden : function(){
- return this.hidden;
- },
-
- /**
- * Returns the text for this tab
- * @return {String}
- */
- getText : function(){
- return this.text;
- },
-
- autoSize : function(){
- //this.el.beginMeasure();
- this.textEl.setWidth(1);
- /*
- * #2804 [new] Tabs in Roojs
- * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
- */
- this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
- //this.el.endMeasure();
- },
-
- /**
- * Sets the text for the tab (Note: this also sets the tooltip text)
- * @param {String} text The tab's text and tooltip
- */
- setText : function(text){
- this.text = text;
- this.textEl.update(text);
- this.setTooltip(text);
- if(!this.tabPanel.resizeTabs){
- this.autoSize();
- }
- },
- /**
- * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
- */
- activate : function(){
- this.tabPanel.activate(this.id);
- },
-
- /**
- * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
- */
- disable : function(){
- if(this.tabPanel.active != this){
- this.disabled = true;
- this.pnode.addClass("disabled");
- }
- },
-
- /**
- * Enables this TabPanelItem if it was previously disabled.
- */
- enable : function(){
- this.disabled = false;
- this.pnode.removeClass("disabled");
- },
-
- /**
- * Sets the content for this TabPanelItem.
- * @param {String} content The content
- * @param {Boolean} loadScripts true to look for and load scripts
- */
- setContent : function(content, loadScripts){
- this.bodyEl.update(content, loadScripts);
- },
-
- /**
- * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
- * @return {Roo.UpdateManager} The UpdateManager
- */
- getUpdateManager : function(){
- return this.bodyEl.getUpdateManager();
- },
-
- /**
- * Set a URL to be used to load the content for this TabPanelItem.
- * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
- * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
- * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
- * @return {Roo.UpdateManager} The UpdateManager
- */
- setUrl : function(url, params, loadOnce){
- if(this.refreshDelegate){
- this.un('activate', this.refreshDelegate);
- }
- this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
- this.on("activate", this.refreshDelegate);
- return this.bodyEl.getUpdateManager();
- },
-
- /** @private */
- _handleRefresh : function(url, params, loadOnce){
- if(!loadOnce || !this.loaded){
- var updater = this.bodyEl.getUpdateManager();
- updater.update(url, params, this._setLoaded.createDelegate(this));
- }
- },
-
- /**
- * Forces a content refresh from the URL specified in the {@link #setUrl} method.
- * Will fail silently if the setUrl method has not been called.
- * This does not activate the panel, just updates its content.
- */
- refresh : function(){
- if(this.refreshDelegate){
- this.loaded = false;
- this.refreshDelegate();
- }
- },
-
- /** @private */
- _setLoaded : function(){
- this.loaded = true;
- },
-
- /** @private */
- closeClick : function(e){
- var o = {};
- e.stopEvent();
- this.fireEvent("beforeclose", this, o);
- if(o.cancel !== true){
- this.tabPanel.removeTab(this.id);
- }
- },
- /**
- * The text displayed in the tooltip for the close icon.
- * @type String
- */
- closeText : "Close this tab"
-});
-
-/** @private */
-Roo.TabPanel.prototype.createStrip = function(container){
- var strip = document.createElement("div");
- strip.className = "x-tabs-wrap";
- container.appendChild(strip);
- return strip;
-};
/** @private */
-Roo.TabPanel.prototype.createStripList = function(strip){
+Roo.panel.Tab.prototype.createStripList = function(strip){
// div wrapper for retard IE
// returns the "tr" element.
strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
return strip.firstChild.firstChild.firstChild.firstChild;
};
/** @private */
-Roo.TabPanel.prototype.createBody = function(container){
+Roo.panel.Tab.prototype.createBody = function(container){
var body = document.createElement("div");
Roo.id(body, "tab-body");
Roo.fly(body).addClass("x-tabs-body");
return body;
};
/** @private */
-Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
+Roo.panel.Tab.prototype.createItemBody = function(bodyEl, id){
var body = Roo.getDom(id);
if(!body){
body = document.createElement("div");
return body;
};
/** @private */
-Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
+Roo.panel.Tab.prototype.createStripElements = function(stripEl, text, closable){
var td = document.createElement("td");
stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
//stripEl.appendChild(td);
--- /dev/null
+/**
+ * @class Roo.panel.TabItem
+ * @extends Roo.util.Observable
+ * Represents an individual item (tab plus body) in a TabPanel.
+ * @param {Roo.panel.Tab} tabPanel The {@link Roo.panel.Tab} this TabPanelItem belongs to
+ * @param {String} id The id of this TabPanelItem
+ * @param {String} text The text for the tab of this TabPanelItem
+ * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
+ */
+ Roo.panel.TabItem = function(tabPanel, id, text, closable){
+ /**
+ * The {@link Roo.panel.Tab} this TabPanelItem belongs to
+ * @type Roo.panel.Tab
+ */
+ this.tabPanel = tabPanel;
+ /**
+ * The id for this TabPanelItem
+ * @type String
+ */
+ this.id = id;
+ /** @private */
+ this.disabled = false;
+ /** @private */
+ this.text = text;
+ /** @private */
+ this.loaded = false;
+ this.closable = closable;
+
+ /**
+ * The body element for this TabPanelItem.
+ * @type Roo.Element
+ */
+ this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
+ this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
+ this.bodyEl.setStyle("display", "block");
+ this.bodyEl.setStyle("zoom", "1");
+ this.hideAction();
+
+ var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
+ /** @private */
+ this.el = Roo.get(els.el, true);
+ this.inner = Roo.get(els.inner, true);
+ this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
+ this.pnode = Roo.get(els.el.parentNode, true);
+ this.el.on("mousedown", this.onTabMouseDown, this);
+ this.el.on("click", this.onTabClick, this);
+ /** @private */
+ if(closable){
+ var c = Roo.get(els.close, true);
+ c.dom.title = this.closeText;
+ c.addClassOnOver("close-over");
+ c.on("click", this.closeClick, this);
+ }
+
+ this.addEvents({
+ /**
+ * @event activate
+ * Fires when this tab becomes the active tab.
+ * @param {Roo.panel.Tab} tabPanel The parent TabPanel
+ * @param {Roo.panel.TabItem} this
+ */
+ "activate": true,
+ /**
+ * @event beforeclose
+ * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
+ * @param {Roo.panel.TabItem} this
+ * @param {Object} e Set cancel to true on this object to cancel the close.
+ */
+ "beforeclose": true,
+ /**
+ * @event close
+ * Fires when this tab is closed.
+ * @param {Roo.panel.TabItem} this
+ */
+ "close": true,
+ /**
+ * @event deactivate
+ * Fires when this tab is no longer the active tab.
+ * @param {Roo.panel.Tab} tabPanel The parent TabPanel
+ * @param {Roo.panel.TabItem} this
+ */
+ "deactivate" : true
+ });
+ this.hidden = false;
+
+ Roo.panel.TabItem.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.panel.TabItem, Roo.util.Observable, {
+ purgeListeners : function(){
+ Roo.util.Observable.prototype.purgeListeners.call(this);
+ this.el.removeAllListeners();
+ },
+ /**
+ * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
+ */
+ show : function(){
+ this.pnode.addClass("on");
+ this.showAction();
+ if(Roo.isOpera){
+ this.tabPanel.stripWrap.repaint();
+ }
+ this.fireEvent("activate", this.tabPanel, this);
+ },
+
+ /**
+ * Returns true if this tab is the active tab.
+ * @return {Boolean}
+ */
+ isActive : function(){
+ return this.tabPanel.getActiveTab() == this;
+ },
+
+ /**
+ * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
+ */
+ hide : function(){
+ this.pnode.removeClass("on");
+ this.hideAction();
+ this.fireEvent("deactivate", this.tabPanel, this);
+ },
+
+ hideAction : function(){
+ this.bodyEl.hide();
+ this.bodyEl.setStyle("position", "absolute");
+ this.bodyEl.setLeft("-20000px");
+ this.bodyEl.setTop("-20000px");
+ },
+
+ showAction : function(){
+ this.bodyEl.setStyle("position", "relative");
+ this.bodyEl.setTop("");
+ this.bodyEl.setLeft("");
+ this.bodyEl.show();
+ },
+
+ /**
+ * Set the tooltip for the tab.
+ * @param {String} tooltip The tab's tooltip
+ */
+ setTooltip : function(text){
+ if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
+ this.textEl.dom.qtip = text;
+ this.textEl.dom.removeAttribute('title');
+ }else{
+ this.textEl.dom.title = text;
+ }
+ },
+
+ onTabClick : function(e){
+ e.preventDefault();
+ this.tabPanel.activate(this.id);
+ },
+
+ onTabMouseDown : function(e){
+ e.preventDefault();
+ this.tabPanel.activate(this.id);
+ },
+
+ getWidth : function(){
+ return this.inner.getWidth();
+ },
+
+ setWidth : function(width){
+ var iwidth = width - this.pnode.getPadding("lr");
+ this.inner.setWidth(iwidth);
+ this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
+ this.pnode.setWidth(width);
+ },
+
+ /**
+ * Show or hide the tab
+ * @param {Boolean} hidden True to hide or false to show.
+ */
+ setHidden : function(hidden){
+ this.hidden = hidden;
+ this.pnode.setStyle("display", hidden ? "none" : "");
+ },
+
+ /**
+ * Returns true if this tab is "hidden"
+ * @return {Boolean}
+ */
+ isHidden : function(){
+ return this.hidden;
+ },
+
+ /**
+ * Returns the text for this tab
+ * @return {String}
+ */
+ getText : function(){
+ return this.text;
+ },
+
+ autoSize : function(){
+ //this.el.beginMeasure();
+ this.textEl.setWidth(1);
+ /*
+ * #2804 [new] Tabs in Roojs
+ * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
+ */
+ this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
+ //this.el.endMeasure();
+ },
+
+ /**
+ * Sets the text for the tab (Note: this also sets the tooltip text)
+ * @param {String} text The tab's text and tooltip
+ */
+ setText : function(text){
+ this.text = text;
+ this.textEl.update(text);
+ this.setTooltip(text);
+ if(!this.tabPanel.resizeTabs){
+ this.autoSize();
+ }
+ },
+ /**
+ * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
+ */
+ activate : function(){
+ this.tabPanel.activate(this.id);
+ },
+
+ /**
+ * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
+ */
+ disable : function(){
+ if(this.tabPanel.active != this){
+ this.disabled = true;
+ this.pnode.addClass("disabled");
+ }
+ },
+
+ /**
+ * Enables this TabPanelItem if it was previously disabled.
+ */
+ enable : function(){
+ this.disabled = false;
+ this.pnode.removeClass("disabled");
+ },
+
+ /**
+ * Sets the content for this TabPanelItem.
+ * @param {String} content The content
+ * @param {Boolean} loadScripts true to look for and load scripts
+ */
+ setContent : function(content, loadScripts){
+ this.bodyEl.update(content, loadScripts);
+ },
+
+ /**
+ * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ getUpdateManager : function(){
+ return this.bodyEl.getUpdateManager();
+ },
+
+ /**
+ * Set a URL to be used to load the content for this TabPanelItem.
+ * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
+ * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+ * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.un('activate', this.refreshDelegate);
+ }
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on("activate", this.refreshDelegate);
+ return this.bodyEl.getUpdateManager();
+ },
+
+ /** @private */
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.bodyEl.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
+ }
+ },
+
+ /**
+ * Forces a content refresh from the URL specified in the {@link #setUrl} method.
+ * Will fail silently if the setUrl method has not been called.
+ * This does not activate the panel, just updates its content.
+ */
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
+ }
+ },
+
+ /** @private */
+ _setLoaded : function(){
+ this.loaded = true;
+ },
+
+ /** @private */
+ closeClick : function(e){
+ var o = {};
+ e.stopEvent();
+ this.fireEvent("beforeclose", this, o);
+ if(o.cancel !== true){
+ this.tabPanel.removeTab(this.id);
+ }
+ },
+ /**
+ * The text displayed in the tooltip for the close icon.
+ * @type String
+ */
+ closeText : "Close this tab"
+});
+
+/** @private */
+Roo.panel.Tab.prototype.createStrip = function(container){
+ var strip = document.createElement("div");
+ strip.className = "x-tabs-wrap";
+ container.appendChild(strip);
+ return strip;
+};
\ No newline at end of file
/**
- * @class Roo.TreePanel
- * @extends Roo.ContentPanel
+ * @class Roo.panel.Tree
+ * @extends Roo.panel.Content
* @parent Roo.BorderLayout Roo.LayoutDialog builder
* Treepanel component
*
* Create a new TreePanel. - defaults to fit/scoll contents.
* @param {String/Object} config A string to set only the panel's title, or a config object
*/
-Roo.TreePanel = function(config){
+Roo.panel.Tree = function(config){
var el = config.el;
var tree = config.tree;
delete config.tree;
- Roo.TreePanel.superclass.constructor.call(this, el, config);
+ Roo.panel.Tree.superclass.constructor.call(this, el, config);
this.tree = new Roo.tree.TreePanel(treeEl , tree);
};
-Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
+Roo.extend(Roo.panel.Tree, Roo.panel.Content, {
fitToFrame : true,
autoScroll : true,
/*
- * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
+ * @cfg {Roo.tree.panel.Tree} tree [required] The tree TreePanel, with config etc.
*/
tree : false
--- /dev/null
+Roo.panel = {};
\ No newline at end of file
Roo.bootstrap.Component
Roo.bootstrap.Calendar
-Roo.CalendarPanel
+Roo.panel.Calendar
// *** Can be Optional ***
Roo.DatePicker
-Roo.TabPanel
+Roo.panel.namespace
+Roo.panel.Cropbox
+
+Roo.panel.Tab
+Roo.panel.TabItem
Roo.Button
Roo.SplitButton
Roo.SplitLayoutRegion
Roo.CenterLayoutRegion
Roo.LayoutStateManager
-Roo.ContentPanel
-Roo.GridPanel
-Roo.NestedLayoutPanel
+Roo.panel.Content
+Roo.panel.Grid
+Roo.panel.NestedLayout
Roo.ScrollPanel
-Roo.TreePanel
+Roo.panel.Tree
// *** Can be Optional *** - only if you use it..
Roo.ReaderLayout
// is this ready yet? - is it used?
// Roo.Login
-Roo.dialog.namespace
-Roo.dialog.UploadCropbox
+Roo.depreicated
--- /dev/null
+//<script type="text/javascript">
+
+
+Roo.onReady(function(){
+
+ Roo.QuickTips.init();
+ MainBody.init();
+
+
+
+});
+MainBody = {
+ layout: false,
+ cookie: false,
+ init: function()
+ {
+
+ this.cookie = new Roo.state.CookieProvider({})
+
+ MainBody.layout = new Roo.BorderLayout(document.body, {
+ north: {
+ split:true,
+ initialSize: 30,
+ titlebar: false,
+ collapsible: false
+
+ },
+ west: {
+ split:true,
+ initialSize: 200,
+ titlebar: true,
+ collapsible: true
+
+ },
+ center: {
+ autoScroll: false,
+ titlebar: true,
+ resizeTabs:true,
+ minTabWidth: 100,
+ preferredTabWidth:250
+ }
+ });
+ var layout = MainBody.layout;
+ MainBody.layout.beginUpdate();
+ var hd = this.layout.getEl().createChild( {
+ tag:'div' ,
+ style: 'background-colour:#000; font-weight: bold;' +
+ 'font-size:16px;' +
+ 'font-family:Arial,Verdana,\'Bitstream Vera Sans\',Helvetica,sans-serif;',
+ html: '<img src="../images/roojs_logo.jpg" height="25" align="right"/>' +
+ '<div style="margin-left:10px;margin-top:3px;">Roo Version 1.1.2 - Documentation</div>'
+ });
+ layout.add('north', new Roo.panel.Content(hd, {fitToFrame:true, closable:false }));
+
+ //innerLayout.add('south', new Roo.panel.Content('inner1', "More Information"));
+ //innerLayout.add('center', new Roo.panel.Content('inner2')); // right bottom Tree
+
+
+ //alert("initing");
+
+ ClassTree.init();
+
+ //var frame = this.layout.getEl().createChild({ tag:'div' , frameborder: "no"});
+ var frame = this.layout.getEl().createChild({ tag:'iframe' , id:'viewFrame', name:'viewFrame',frameborder: "no"});
+
+
+
+
+ this.preview = new Roo.panel.Content(frame, {title:
+ ' <a target="viewFrame" href="/roojs1/buildSDK/indexPage.html">Contents / Examples</a>' +
+ ' | Class Details',
+ fitToFrame:true,
+ autoScroll: true
+ });
+
+ //// ---- HANLE CLICKS ON OUR CHILD PAGE???
+ /*
+ this.preview.getEl().on('click', function(e, target)
+ {
+ //console.log("click pressed?");
+
+ if(target = e.getTarget('a:not(.exi)', 3)) {
+ var cls = Roo.fly(target).getAttributeNS('roo', 'cls');
+ e.stopEvent();
+ if(cls){
+ var member = Roo.fly(target).getAttributeNS('roo', 'member');
+ //this.loadClass(target.href, cls, member);
+
+ if (/^src\//.test(cls)) {
+ cls = cls.replace(/.js$/, ''); // get rid of .js for source links..
+ }
+
+
+ MainBody.loadPage("symbols/"+ cls +".html");
+ return;
+ }
+ if(target.className == 'inner-link'){ // go to #
+ this.getActiveTab().scrollToSection(target.href.split('#')[1]);
+ return;
+ }
+ window.open(target.href);
+
+ return; // no more...
+ }
+ if(target = e.getTarget('.micon', 2)){
+
+ e.stopEvent();
+ var tr = Roo.fly(target.parentNode);
+ if(tr.hasClass('expandable')){
+ tr.toggleClass('expanded');
+ }
+ }
+
+ });
+ */
+
+ window.setInterval(function() {
+ // check
+ //console.log("check");
+ if (CommentDialog.showCommentId.length) {
+ var id = '' + CommentDialog.showCommentId;
+ if (Roo.isSafari) {
+ Roo.get(document.getElementsByTagName('iframe')[0]).setVisible(false);
+ }
+ // alert(id);
+ CommentDialog.showCommentId= '';
+
+
+
+ CommentDialog.show(id);
+ }
+ }, 500); // check every half second..
+
+
+
+
+ var cp = this.layout.add('center', this.preview);
+ MainBody.loadPage("/roojs1/buildSDK/indexPage.html");
+
+
+ MainBody.layout.endUpdate();
+
+ CommentDialog.build();
+
+ Roo.get(document.getElementsByTagName('iframe')[0]).setVisibilityMode(Roo.Element.DISPLAY);
+
+ },
+
+
+ loadPage: function(src) {
+ this.preview.el.dom.src = src;
+
+ //this.preview.load(src);
+ }
+
+
+}
+
+
+ClassTree = {
+ tree: false,
+
+ init : function ()
+ {
+ if (this.tree) {
+ return;
+ }
+
+ var ct = MainBody.layout.getEl().createChild({tag:'div'});
+ var viewEl = ct.createChild({tag:'div'});
+ var folders = MainBody.layout.add('west',
+ new Roo.panel.Content(ct, {
+ title:'Tree',
+ fitToFrame:true,
+ autoScroll:true,
+ autoCreate:true,
+ // toolbar: tb,
+ resizeEl:viewEl
+ }));
+ this.tree = new Roo.tree.TreePanel(viewEl, {
+ animate:true,
+ enableDD:false,
+ containerScroll: true,
+ ddGroup: 'organizerDD',
+ rootVisible:false,
+ listeners : {
+
+ click : function(node, e) {
+ // do stuff.
+ // load:
+ //console.log(node.attributes.openUrl);
+ if (!node.attributes.openUrl) {
+ return;
+ }
+ MainBody.loadPage("symbols/"+ node.attributes.openUrl +".html");
+
+ //MainBody.layout.getRegion('center').getPanel(0).setTitle(ClassTree.getTitleHtml(file)); // methods
+ }
+
+
+ }
+ });
+ new Roo.tree.TreeSorter(this.tree, {folderSort:true});
+ var root = new Roo.tree.TreeNode({
+ text: '',
+ allowDrag:false,
+ allowDrop:false
+ });
+ this.tree.setRootNode(root);
+ // loop through
+ function addNodes(parent, ar, pref)
+ {
+ for(var nm in ar) {
+ if (nm.substring(0,1) == "_") { // skip desc..
+ continue;
+ }
+ //console.log("nm : " + nm + " = isNS:"+ar[nm]._isNS + " ? PN:" + nd.getDepth());
+ var hasChildNodes = ar[nm]._hasChildren && (ar[nm]._isNS || (parent.getDepth() < 1));
+
+
+ var nd = new Roo.tree.TreeNode( {
+ text:pref +nm,
+ cls: 'album-node' ,
+ allowDrag:false,
+ leaf : !hasChildNodes,
+ openUrl: ar[nm].hasOwnProperty('_full') ? ar[nm]._full : false,
+ isNS : ar[nm]._isNS
+ });
+
+ // add a duplacate reference - if it's got children and
+ /*
+ if (ar[nm]._hasChildren && (!ar[nm]._isNS) {
+ //console.log("Adding node.." + nm);
+ var xn = new Roo.tree.TreeNode( {
+ text: nm,
+ cls: 'album-node' ,
+ allowDrag:false,
+ leaf : true,
+ openUrl: ar[nm].hasOwnProperty('_full') ? ar[nm]._full : false
+
+
+ });
+ parent.appendChild(xn);
+ }
+ */
+ parent.appendChild(nd);
+
+ //if (typeof(ar[nm]) == "object") {
+
+ if (ar[nm]._hasChildren) {
+ //console.log("nm : " + nm + " = isNS:"+ar[nm]._isNS + " ? PN:" + nd.getDepth());
+
+ if (hasChildNodes) {
+ // namespace -- make a tre..
+ addNodes(nd, ar[nm],'');
+
+
+
+ } else {
+ addNodes(parent, ar[nm], pref + nm + '.');
+
+
+
+
+
+ }
+
+ }
+ }
+
+
+ }
+ ClassTree.load();
+ // class tree comes from outside!!!
+ addNodes(root, ClassTree.nodes,'');
+
+ this.tree.render();
+
+
+ root.eachChild(function(n) { n.expand(); });
+ //new Roo.tree.TreeSorter(this.tree);
+ ///this.tree.expand();
+
+ },
+ nodes : { },
+ load: function(file)
+ {
+
+ ClassTree.nodes = { _hasChildren: true, _isNameSpace: true };
+
+ Roo.get('classlist').select('li').each( function(n) {
+ var dvs = n.select('div');
+
+ var cn = {
+ name : dvs.item(0).dom.innerHTML,
+ desc : '', //dvs.item(1).dom.innerHTML
+ isNS : dvs.item(0).getAttributeNS('roo','isns') == "yes"
+ }
+ //console.log("ADD: " + cn.name);
+ var nbits = cn.name.split(".");
+
+ // top is where we stick everything in...
+
+ var top= ClassTree.nodes;
+
+ for (var i = 0; i < nbits.length; i++) {
+ // is the last one..
+ var nm = nbits[i];
+
+ if (i == (nbits.length-1)) {
+ if (top.hasOwnProperty(nm)) {
+ top[nm]._full = cn.name;
+ top[nm]._desc = cn.desc;
+ break; // all done..
+ }
+ top._hasChildren =true;
+ top[nm] = {
+ /// _parent : "Object", // not sure abou this bit!!!
+ _full : cn.name,
+ _desc : cn.name,
+ _hasChildren : false ,
+ _isNS : cn.isNS
+ }
+ break;
+ }
+ // not the top.
+ if (top.hasOwnProperty(nm)) {
+ top = top[nm];
+ continue;
+ }
+ top[nm] = { _hasChildren : false };
+ top = top[nm];
+ }
+
+
+
+
+ });
+
+ //console.log(ClassTree.nodes);
+
+
+
+ // load page into right hand panel....
+ }
+ /*
+ getTitleHtml : function (file)
+ {
+ var bits = file.split(".");
+ // what about 'Gtk/G etc.'
+ if (bits.length < 2) {
+ return file;
+ }
+ // should not really happen..
+ if (!(bits[0] in classtree)) {
+ return file;
+ }
+ if (!(bits[1] in classtree[bits[0]])) {
+ return file;
+ }
+ var parent = classtree[bits[0]][bits[1]]._parent;
+ if (bits.length == 3) {
+ if (!(bits[2] in classtree[bits[0]][bits[1]])) {
+ return file;
+ }
+ parent = classtree[bits[0]][bits[1]][bits[2]]._parent;
+ }
+
+ // add parent...
+ var ret = "<u onclick=\"ClassTree.load('"+file+"')\">" + file + "</u> > ";
+ return ret + ClassTree.getTitleHtml(parent);
+ }
+ */
+
+
+}
+
+
+
+
+
+
+
+
+CommentDialog = {
+
+ dialog : false,
+ form: false,
+ ids: false,
+ showCommentId: '', /// id of comment to show as scoping on konq/safari is borked
+ show: function (cls) {
+ this.build();
+ this.ids = cls;
+ this.form.reset();
+ this.form.setValues( {
+ "comment[title]" : "General Comment",
+ "comment[wikifile]" : cls
+ });
+ this.form.setValues( MainBody.cookie.state );
+
+ this.dialog.show();
+ if (this.form.getValues()["comment[author]"].length) {
+ CommentDialog.form.items.items[4].focus();
+ } else {
+ CommentDialog.form.items.items[0].focus();
+ }
+
+ },
+ build: function ()
+ {
+
+ if (this.dialog) {
+ return;
+ }
+
+ this.dialog = new Roo.LayoutDialog(Roo.id(), {
+ autoCreate: true,
+ modal:true,
+ title: "Add Comment",
+ //autoTabs:true,
+ titlebar: true,
+
+ modal:true,
+ width:550,
+ height:450,
+ shadow:true,
+
+
+ center:{
+ autoScroll:false
+
+ }
+
+ });
+
+ this.dialog.addKeyListener(27, this.hide, this);
+ this.dialog.addButton('Cancel', this.hide, this);
+ this.dialog.addButton('Submit', this.submit, this);
+
+ var layout = this.dialog.getLayout();
+ var cd = this;
+ // create the dialog....
+ this.form = new Roo.form.Form({
+ labelWidth: 160,
+
+ listeners : {
+ actionfailed : function(f, act) {
+ cd.dialog.el.unmask();
+ Roo.MessageBox.alert("Error", "Saving failed = fix errors and try again");
+ // we dont do loads....
+
+
+ },
+ actioncomplete: function(f, act) {
+
+ cd.dialog.el.unmask();
+ cd.hide();
+ cd.form.reset();
+ //hopefully this hsould work!
+ var p = parent;
+ while (p.parent != p) {
+ p = p.parent;
+ }
+ console.log("trying : " + "comments-" + cd.ids);
+ p.frames[0].document.getElementById("comments-" + cd.ids).contentDocument.location.reload();
+
+ // unmask??
+ }
+ }
+
+
+
+ });
+ // simple array store
+ var ctypes = new Roo.data.SimpleStore({
+ fields: ['value'],
+ data : [
+ [ "General Comment" ],
+ [ "Example Code" ],
+ [ "Introduction" ],
+ [ "Bug" ]
+ ]
+ });
+
+ this.form.add(
+
+
+ new Roo.form.TextField({
+ fieldLabel: 'Your Name',
+ name: 'comment[author]',
+ width: 300,
+ allowBlank:false,
+ autoCreate: {tag: "input", type: "text", size: "20", autocomplete: "on"}
+ }),
+ new Roo.form.TextField({
+ fieldLabel: 'Your Email address',
+ name: 'comment[email]',
+ width: 300,
+ allowBlank:false,
+ vtype: "email",
+ autoCreate: {tag: "input", type: "text", size: "20", autocomplete: "on"}
+
+ }),
+ new Roo.form.TextField({
+ fieldLabel: 'Your Web site (optional)',
+ name: 'comment[url]',
+ width: 300,
+ allowBlank:true,
+ vtype: "url"
+ }),
+ new Roo.form.ComboBox({
+ fieldLabel: 'Type of Comment',
+ name: 'comment[title]',
+ editable: false,
+ forceSelection: true,
+ store: ctypes,
+ displayField:'value',
+ typeAhead: false,
+ mode: 'local',
+ triggerAction: 'all',
+ defaultValue: "General Comment",
+ allowBlank:false,
+ selectOnFocus:true
+
+ }),
+ new Roo.form.TextArea({
+ fieldLabel: 'Comment',
+ name: 'comment[body]',
+ width:300,
+ growMin:200,
+ grow: true,
+ allowBlank:false
+ }),
+ new Roo.form.Hidden({
+ name: 'comment[wikifile]',
+ value : ''
+ }),
+ new Roo.form.Hidden({
+ name: 'jsonRequest',
+ value : 'yes'
+ })
+
+
+ );
+
+
+ var ef = layout.getEl().createChild({tag: 'div', style: 'margin: 5px'});
+ ef.dom.style.margin = 10;
+ ef.dom.style.position = "fixed";
+
+ //console.log("form container");
+ //console.log(ef);
+
+
+
+ var vp = layout.add('center', new Roo.panel.Content(ef, {
+ autoCreate : true,
+ fitToFrame:true
+ }));
+
+ this.form.render(ef.dom);
+
+
+
+
+ },
+ submit: function()
+ {
+
+
+ var cd = typeof(CommentDialog) == "undefined" ? parent.CommentDialog : CommentDialog;
+ if (!cd.form.isValid()) {
+ Roo.MessageBox.alert("Error", "Please Fill in all the details");
+ return;
+ }
+ var p = cd.form.getValues();
+
+ var mb = typeof(MainBody) == "undefined" ? parent.MainBody : MainBody;
+
+ mb.cookie.set("comment[author]", p["comment[author]"]);
+ mb.cookie.set("comment[email]", p["comment[email]"]);
+ mb.cookie.set("comment[url]", p["comment[url]"]);
+ cd.dialog.el.mask("Saving Data");
+
+
+ cd.form.doAction('submit', {
+ url: '/blog.php/GtkDjsComments/' + cd.ids + '.html',
+ method: 'POST'
+ });
+
+
+
+
+ },
+ hide : function()
+ {
+
+ if (Roo.isSafari) {
+ Roo.get(document.getElementsByTagName('iframe')[0]).setVisible(true);
+ }
+ this.dialog.hide();
+ }
+
+
+
+
+}
+
+
+
+
+
+
\ No newline at end of file
@import url("undoreset.css");
-/* css for Roo.dialog.UploadCropbox */
+/* css for Roo.panel.Cropbox */
@import url("alert.css");
@import url("buttons.css");
@import url("button-groups.css");
--- /dev/null
+<html><head><title>Roo/form/Password.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-var">Roo.form.Password </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+ </span><span class="jsdoc-var">Roo.form.Password.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+
+ </span><span class="jsdoc-var">this.inputType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'password'</span><span class="jsdoc-syntax">;
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Password</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.TextField</span><span class="jsdoc-syntax">, {
+ </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
+ {
+ </span><span class="jsdoc-var">Roo.form.Password.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+
+ </span><span class="jsdoc-var">this.parentEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'form-password'</span><span class="jsdoc-syntax">);
+
+ </span><span class="jsdoc-var">this.wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.wrap</span><span class="jsdoc-syntax">({
+ </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'password-wrap'
+ </span><span class="jsdoc-syntax">});
+
+ </span><span class="jsdoc-var">this.toggle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.wrap.createChild</span><span class="jsdoc-syntax">({
+ </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
+ </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'password-toggle'
+ </span><span class="jsdoc-syntax">});
+
+
+ </span><span class="jsdoc-var">this.toggleEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'password-hidden'</span><span class="jsdoc-syntax">);
+
+ </span><span class="jsdoc-var">this.toggleEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onToggleClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);;
+ },
+
+ </span><span class="jsdoc-var">parentEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+ {
+ </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.x-form-element'</span><span class="jsdoc-syntax">, 5, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+ },
+
+ </span><span class="jsdoc-var">toggleEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+ {
+ </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.parentEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'button.password-toggle'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+ },
+
+ </span><span class="jsdoc-var">onToggleClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+ {
+ </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">input </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toggleEl</span><span class="jsdoc-syntax">();
+
+ </span><span class="jsdoc-var">toggle.removeClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">'password-visible'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'password-hidden'</span><span class="jsdoc-syntax">]);
+
+ </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">input.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'type'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'password'</span><span class="jsdoc-syntax">) {
+ </span><span class="jsdoc-var">input.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'type'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'text'</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">toggle.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'password-visible'</span><span class="jsdoc-syntax">);
+ }
+ </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+ </span><span class="jsdoc-var">input.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'type'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'password'</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">toggle.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'password-hidden'</span><span class="jsdoc-syntax">);
+ }
+ }
+});</span></code></body></html>
\ No newline at end of file
},
items : [
{
- xtype: 'ContentPanel',
- xns: Roo,
+ xtype: 'Content',
+ xns: Roo.panel,
region : "center"
}
},
items : [
{
- xtype: 'ContentPanel',
- xns: Roo,
+ xtype: 'Content',
+ xns: Roo.panel,
region : "center"
}
}
};
- \r
-\r
-// using onDocumentReady instead of window.onload initializes the application\r
-// when the DOM is ready, without waiting for images and other resources to load\r
+
+
+// using onDocumentReady instead of window.onload initializes the application
+// when the DOM is ready, without waiting for images and other resources to load
Roo.onReady(function() {
Roo.get('show-dialog-btn').on('click',function () {
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";
+/*\r
+ * Based on:\r
+ * Ext JS Library 1.1.1\r
+ * Copyright(c) 2006-2007, Ext JS, LLC.\r
+ *\r
+ * Originally Released Under LGPL - original licence link has changed is not relivant.\r
+ *\r
+ * Fork - LGPL\r
+ * <script type="text/javascript">\r
+ */\r
+Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";\r
\r
// create the LayoutExample application (single instance)\r
var LayoutExample = function(){\r
\r
var layout = dialog.getLayout();\r
layout.beginUpdate();\r
- layout.add('west', new Roo.ContentPanel('west', {title: 'West'}));\r
- layout.add('center', new Roo.ContentPanel('center', {title: 'The First Tab'}));\r
+ layout.add('west', new Roo.panel.Content('west', {title: 'West'}));\r
+ layout.add('center', new Roo.panel.Content('center', {title: 'The First Tab'}));\r
// generate some other tabs\r
- layout.add('center', new Roo.ContentPanel(Roo.id(), {\r
+ layout.add('center', new Roo.panel.Content(Roo.id(), {\r
autoCreate:true, title: 'Another Tab', background:true}));\r
- layout.add('center', new Roo.ContentPanel(Roo.id(), {\r
+ layout.add('center', new Roo.panel.Content(Roo.id(), {\r
autoCreate:true, title: 'Third Tab', closable:true, background:true}));\r
layout.endUpdate();\r
}\r
*
* Fork - LGPL
* <script type="text/javascript">
- */\r
+ */
Roo.BLANK_IMAGE_URL = '../../images/default/s.gif';
Roo.example = function(){
layout.beginUpdate();
//this.view = new Roo.ContentPanel(Roo.id(), { autoCreate:true, title: '', background:true});
var frm = layout.getEl().createChild({ tag:'div' });
- this.contentPanel = new Roo.ContentPanel(frm, {title: 'View Source', fitContainer: true, autoScroll: true});
+ this.contentPanel = new Roo.panel.Content(frm, {title: 'View Source', fitContainer: true, autoScroll: true});
this.contentPanel.getEl().getUpdateManager().setRenderer(new Roo.UpdateManager.RawRenderer());
layout.add('center', this.contentPanel);
layout.endUpdate();
},
"items" : [
{
- "xtype" : "GridPanel",
- "$ xns" : "Roo",
+ "xtype" : "Grid",
+ "$ xns" : "Roo.Grid",
"items" : [
{
"listeners" : {
var _this = this;
var MODULE = this;
return {
- xtype : 'GridPanel',
- xns : Roo,
+ xtype : 'Grid',
+ xns : Roo.panel,
'|xns' : 'Roo',
grid : {
xtype : 'Grid',
var layout = Roo.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
- panels: [new Roo.GridPanel(grid)]
+ panels: [new Roo.panel.Grid(grid)]
}
}, 'grid-panel');
}
});
- var gpanel = new Roo.GridPanel(this.grid);
+ var gpanel = new Roo.panel.Grid(this.grid);
var layout = Roo.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
var layout = Roo.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
- panels: [new Roo.GridPanel(grid)]
+ panels: [new Roo.panel.Grid(grid)]
}
}, 'grid-panel');
var layout = Roo.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
- panels: [new Roo.GridPanel(grid)]
+ panels: [new Roo.panel.Grid(grid)]
}
}, 'grid-panel');
var _this = this;
var MODULE = this;
return {
- xtype: 'NestedLayoutPanel',
- xns: Roo,
+ xtype: 'NestedLayout',
+ xns: Roo.panel,
region : 'center',
layout : {
xtype: 'BorderLayout',
xns: Roo,
items : [
{
- xtype: 'CalendarPanel',
- xns: Roo,
+ xtype: 'Calendar',
+ xns: Roo.Panel,
region : 'center',
listeners : {
activate : function (_self)
"items": [
{
"region": "center",
- "xtype": "NestedLayoutPanel",
- "|xns": "Roo",
+ "xtype": "NestedLayout",
+ "|xns": "Roo.panel",
"items": [
{
"|xns": "Roo",
"render": "function (_self)\n{\n _this.bodypanel = _self;\n \n Roo.log('render');\n}"
},
"region": "center",
- "xtype": "ContentPanel",
+ "xtype": "Content",
"|autoCreate": "true",
- "|xns": "Roo",
+ "|xns": "Roo.panel",
"items": [
{
"|xns": "Roo",
var _this = this;
var MODULE = this;
return {
- xtype: 'NestedLayoutPanel',
- xns: Roo,
+ xtype: 'NestedLayout',
+ xns: Roo.panel,
region : 'center',
layout : {
xtype: 'BorderLayout',
xns: Roo,
items : [
{
- xtype: 'ContentPanel',
- xns: Roo,
+ xtype: 'Content',
+ xns: Roo.panel,
listeners : {
activate : function (_self)
{
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>Upload Cropbox Dialog Example</title>
+ <title>Cropbox Panel Example</title>
<link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
<link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="../examples.css" />
<script type="text/javascript" src="../../roojs-debug.js"></script>
- <script type="text/javascript" src="../../Roo/dialog/UploadCropbox.js"></script>
- <script language="javascript" src="uploadCropbox.js"></script>
+ <script type="text/javascript" src="../../Roo/panel/Cropbox.js"></script>
+ <script language="javascript" src="cropbox.js"></script>
<script type="text/javascript" src="../examples.js"></script>
</head>
<body>
-<h1>Upload Cropbox Dialog</h1>
-<p>This example shows how to create a very simple BasicDialog with "UploadCropbox".</p>
+<h1>Cropbox Panel</h1>
+<p>This example shows how to create a very simple BasicDialog with "Cropbox".</p>
<input type="button" id="show-dialog-btn" value="test" /><br /><br />
<p>Note that the js is not minified so it is readable. See
-<button type="button" onclick="RooDocs.viewSource.show('../../../Roo/dialog/UploadCropbox.js')">UploadCropbox.js</button>for the full source code.</p>
+<button type="button" onclick="RooDocs.viewSource.show('../../../Roo/panel/Cropbox.js')">Cropbox.js</button>for the full source code.</p>
</div>
</body>
-var uploadCropbox = {
+var cropboxDialog = {
dialog : false,
callback : false,
},
items : [
{
- xtype: 'ContentPanel',
- xns: Roo,
+ xtype: 'Content',
+ xns: Roo.panel,
region : "center",
items : [
{
- xtype : 'UploadCropbox',
- xns : Roo.dialog,
+ xtype : 'Cropbox',
+ xns : Roo.panel,
minWidth : 720,
minHeight : 480,
outputMaxWidth : 1200,
},
items : [
{
- xns : Roo,
- xtype: 'GridPanel',
+ xns : Roo.panel,
+ xtype: 'Grid',
region : "center",
grid : {
- xns : Roo.grid,
+ xns : Roo.panel,
xtype : 'Grid',
cm : [
{
text : 'Add',
listeners : {
click : function () {
- uploadCropbox.show();
+ cropboxDialog.show();
document.body.onfocus = function(e) {
- if(!uploadCropbox.cropbox.selectorEl.dom.files.length) {
- uploadCropbox.dialog.hide();
+ if(!cropboxDialog.cropbox.selectorEl.dom.files.length) {
+ cropboxDialog.dialog.hide();
}
}
- uploadCropbox.cropbox.selectorEl.dom.click();
+ cropboxDialog.cropbox.selectorEl.dom.click();
}
}
}
*
* Fork - LGPL
* <script type="text/javascript">
- */\r
+ */
Roo.onReady(function(){
- var tabs = new Roo.TabPanel('tab-panel1', {
+ var tabs = new Roo.panel.Tab('tab-panel1', {
resizeTabs:true, // turn on tab resizing
minTabWidth: 20,
preferredTabWidth:150
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
+/*\r
+ * Based on:\r
+ * Ext JS Library 1.1.1\r
+ * Copyright(c) 2006-2007, Ext JS, LLC.\r
+ *\r
+ * Originally Released Under LGPL - original licence link has changed is not relivant.\r
+ *\r
+ * Fork - LGPL\r
+ * <script type="text/javascript">\r
*/\r
var TabsExample = {\r
init : function(){\r
// basic tabs 1, built from existing content\r
- var tabs = new Roo.TabPanel('tabs1');\r
+ var tabs = new Roo.panel.Tab('tabs1');\r
tabs.addTab('script', "View Script");\r
tabs.addTab('markup', "View Markup");\r
tabs.activate('script');\r
\r
// second tabs built from JS\r
- var jtabs = new Roo.TabPanel('jtabs');\r
+ var jtabs = new Roo.panel.Tab('jtabs');\r
jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction.");\r
\r
var tab2 = jtabs.addTab('jtabs-2', "Ajax Tab 1");\r
});
var viewEl = albums.createChild({tag:'div', id:'folders'});
- var folders = layout.add('west', new Roo.ContentPanel(albums, {
+ var folders = layout.add('west', new Roo.panel.Content(albums, {
title:'My Albums',
fitToFrame:true,
autoScroll:true,
resizeEl:viewEl
}));
- var images = layout.add('center', new Roo.ContentPanel('images', {
+ var images = layout.add('center', new Roo.panel.Content('images', {
title:'My Images',
fitToFrame:true,
autoScroll:true,
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+/*\r
+ * Based on:\r
+ * Ext JS Library 1.1.1\r
+ * Copyright(c) 2006-2007, Ext JS, LLC.\r
+ *\r
+ * Originally Released Under LGPL - original licence link has changed is not relivant.\r
+ *\r
+ * Fork - LGPL\r
+ * <script type="text/javascript">\r
+ */\r
\r
var ImageChooser = function(config){\r
// create the dialog from scratch\r
\r
// add the panels to the layout\r
layout.beginUpdate();\r
- var vp = layout.add('center', new Roo.ContentPanel(Roo.id(), {\r
+ var vp = layout.add('center', new Roo.panel.Content(Roo.id(), {\r
autoCreate : true,\r
toolbar: this.tb,\r
fitToFrame:true\r
}));\r
- var dp = layout.add('east', new Roo.ContentPanel(Roo.id(), {\r
+ var dp = layout.add('east', new Roo.panel.Content(Roo.id(), {\r
autoCreate : true,\r
fitToFrame:true\r
}));\r
Roo.grid.Grid.prototype.ddText = "選擇了 {0} 行";
}
- if(Roo.TabPanelItem){
+ if(Roo.panel.TabItem){
Roo.TabPanelItem.prototype.closeText = "關閉此標籤";
}
R(this,F[i]);}for(;i<B;i++){intDay=i-D+1;G[i].innerHTML=(intDay);d.setDate(d.getDate()+1);F[i].className="x-date-active";R(this,F[i]);}var S=0;for(;i<42;i++){G[i].innerHTML=(++S);d.setDate(d.getDate()+1);F[i].className="x-date-nextday";R(this,F[i]);}this.mbtn.setText(this.monthNames[A.getMonth()]+" "+A.getFullYear());
this.fireEvent('monthchange',this,A);if(!this.internalRender){var T=this.el.dom.firstChild;var w=T.offsetWidth;this.el.setWidth(w+this.el.getBorderWidth("lr"));Roo.fly(T).setWidth(w);this.internalRender=true;if(Roo.isOpera&&!this.secondPass){T.rows[0].cells[1].style.width=(w-(T.rows[0].cells[0].offsetWidth+T.rows[0].cells[2].offsetWidth))+"px";
this.secondPass=true;this.update.defer(10,this,[A]);}}}});
-// Roo/TabPanel.js
-Roo.TabPanel=function(A,B){this.el=Roo.get(A,true);if(B){if(typeof B=="boolean"){this.tabPosition=B?"bottom":"top";}else{Roo.apply(this,B);}}if(this.tabPosition=="bottom"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("x-tabs-bottom");
+// Roo/panel/namespace.js
+Roo.panel={};
+// Roo/panel/Cropbox.js
+Roo.panel.Cropbox=function(A){Roo.panel.Cropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true}
+);this.buttons=this.buttons||Roo.panel.Cropbox.footer.STANDARD;};Roo.extend(Roo.panel.Cropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,windowSize:300,file:false,exif:{}
+,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'}
+,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify}
+]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){Roo.panel.Cropbox.superclass.onRender.call(this,ct,A);if(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype'));
+this.el.dom.removeAttribute('xtype');this.initEvents();}}else{var B=Roo.apply({},this.getAutoCreate());B.id=this.id||Roo.id();if(this.cls){B.cls=(typeof(B.cls)=='undefined'?this.cls:B.cls)+' '+this.cls;}if(this.style){B.style=(typeof(B.style)=='undefined'?this.style:B.style)+'; '+this.style;
+}this.el=ct.createChild(B,A);this.initEvents();}if(this.buttons.length){Roo.each(this.buttons,function(bb){var C=this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);C.on('click',this.onFooterButtonClick.createDelegate(this,[bb.action],true));
+},this);}if(this.loadMask){this.maskEl=this.el;}},initEvents:function(){this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);this.bodyEl=this.el.select('.roo-upload-cropbox-body',true).first();
+this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl=this.el.select('.roo-upload-cropbox-selector',true).first();this.selectorEl.hide();this.previewEl=this.el.select('.roo-upload-cropbox-preview',true).first();this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.thumbEl=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl.hide();this.notifyEl=this.el.select('.roo-upload-cropbox-empty-notify',true).first();this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.errorEl=this.el.select('.roo-upload-cropbox-error-notify',true).first();this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl.hide();this.footerEl=this.el.select('.roo-upload-cropbox-footer',true).first();this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.footerEl.hide();this.setThumbBoxSize();this.bind();this.resize();this.fireEvent('initial',this);},bind:function(){var A=this;window.addEventListener("resize",function(){A.resize();});this.bodyEl.on('click',this.beforeSelectFile,this);if(Roo.isTouch){this.bodyEl.on('touchstart',this.onTouchStart,this);
+this.bodyEl.on('touchmove',this.onTouchMove,this);this.bodyEl.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.bodyEl.on('mousedown',this.onMouseDown,this);this.bodyEl.on('mousemove',this.onMouseMove,this);var B=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';
+this.bodyEl.on(B,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);}this.selectorEl.on('change',this.onFileSelected,this);},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.baseRotate=1;this.dragable=false;this.pinching=false;
+this.mouseX=0;this.mouseY=0;this.cropData=false;this.notifyEl.dom.innerHTML=this.emptyText;},resize:function(){if(this.fireEvent('resize',this)!=false){this.setThumbBoxPosition();this.setCanvasPosition();}},onFooterButtonClick:function(e,el,o,A){switch(A){case 'rotate-left':this.onRotateLeft(e);
+break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.beforeSelectFile(e);break;case 'trash':this.trash(e);break;case 'crop':this.crop(e);break;case 'download':this.download(e);break;case 'center':this.center(e);break;default:break;}this.fireEvent('footerbuttonclick',this,A);
+},beforeSelectFile:function(e){e.preventDefault();if(this.fireEvent('beforeselectfile',this)!=false){this.selectorEl.dom.click();}},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;
+}var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);},center:function(e){this.setCanvasPosition();},loadCanvas:function(A){if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();
+this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;
+if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();if(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();
+this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(A=true){if(!this.canvasEl){return;}var B=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);var C=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);
+if(A){this.previewEl.setLeft(B);this.previewEl.setTop(C);return;}var D=this.baseScale*Math.pow(1.02,this.startScale);var E=Math.floor(this.imageEl.OriginWidth*D);var F=Math.floor(this.imageEl.OriginHeight*D);var G=Math.ceil((this.bodyEl.getWidth()-E)/2);var H=Math.ceil((this.bodyEl.getHeight()-F)/2);
+var I=B-G;var J=C-H;var K=this.previewEl.getLeft(true)+I;var L=this.previewEl.getTop(true)+J;this.previewEl.setLeft(K);this.previewEl.setTop(L);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;if(this.isDocument&&(this.canvasEl.width<this.thumbEl.getWidth()||this.canvasEl.height<this.thumbEl.getHeight())){this.dragable=false;
+return;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.canvasLoaded){return;}if(!this.dragable){return;}var A=this.canvasEl.width/0.9*0.05;
+var B=A*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){A=(this.canvasEl.height*this.minWidth/this.minHeight-this.canvasEl.width)/2+A;}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){B=(this.canvasEl.width*this.minHeight/this.minWidth-this.canvasEl.height)/2+B;
+}var C=Math.ceil(this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-this.canvasEl.width-A);var D=Math.ceil(this.thumbEl.getTop(true)+this.thumbEl.getHeight()-this.canvasEl.height-B);var E=Math.ceil(this.thumbEl.getLeft(true)+A);var F=Math.ceil(this.thumbEl.getTop(true)+B);
+if(C>E){var G=C;C=E;E=G;}if(D>F){var H=D;D=F;F=H;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var I=Math.ceil(x+this.previewEl.getLeft(true));
+var J=Math.ceil(y+this.previewEl.getTop(true));I=(I<C)?C:((I>E)?E:I);J=(J<D)?D:((J>F)?F:J);this.previewEl.setLeft(I);this.previewEl.setTop(J);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();
+},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.startScale=this.scale;this.scale=(e.getWheelDelta()>0)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();
+return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth<this.minHeight){A=this.thumbEl.getHeight()/this.minHeight;}var B=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel()/A);var C=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel()/A);
+var D=this.imageEl.OriginWidth;var E=this.imageEl.OriginHeight;var F=Math.floor(this.imageEl.OriginWidth*this.getScaleLevel());var G=Math.floor(this.imageEl.OriginHeight*this.getScaleLevel());var H=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);
+var I=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);var J=Math.ceil((this.bodyEl.getWidth()-F)/2);var K=Math.ceil((this.bodyEl.getHeight()-G)/2);var L=J-H;var M=K-I;var N=this.previewEl.getLeft(true)+L;var O=this.previewEl.getTop(true)+M;var P=N-this.thumbEl.getLeft(true);
+var Q=O-this.thumbEl.getTop(true);var R=this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-F-N;var S=this.thumbEl.getTop(true)+this.thumbEl.getHeight()-G-O;var T=F/0.9*0.05;var U=T*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){T=(G*this.minWidth/this.minHeight-F)/2+T;
+}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){U=(F*this.minHeight/this.minWidth-G)/2+U;}if(this.isDocument&&(this.rotate==0||this.rotate==180)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minWidth&&C<this.minHeight))){return false;
+}if(this.isDocument&&(this.rotate==90||this.rotate==270)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minHeight&&C<this.minWidth))){return false;}if(!this.isDocument&&(this.rotate==0||this.rotate==180)&&(P>T||R>T||Q>U||S>U||B>D||C>E)){return false;
+}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(B<this.minHeight||B>this.imageEl.OriginWidth||C<this.minWidth||C>this.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;
+var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
+}this.rotate=(this.rotate<90)?270:this.rotate-90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate<90)?270:this.rotate-90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
+}this.draw();this.fireEvent('rotate',this,'left');},onRotateRight:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
+var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
+}this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
+}this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){this.previewEl.dom.innerHTML='';var A=document.createElement("canvas");
+var B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidth<this.imageEl.OriginHeight){A.width=this.imageEl.OriginHeight*this.getScaleLevel();
+A.height=this.imageEl.OriginHeight*this.getScaleLevel();C=this.imageEl.OriginHeight/2;}B.scale(this.getScaleLevel(),this.getScaleLevel());B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);
+this.canvasEl=document.createElement("canvas");this.contextEl=this.canvasEl.getContext("2d");switch(this.rotate){case 0:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;case 90:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();
+if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;}this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;case 270:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;}this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;default:break;}this.previewEl.appendChild(this.canvasEl);this.setCanvasPosition(false);
+},crop:function(){if(!this.canvasLoaded){return;}var A=document.createElement("canvas");var B=A.getContext("2d");A.width=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;A.height=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;
+var C=A.width/2;B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);var D=document.createElement("canvas");var E=D.getContext("2d");
+D.width=this.thumbEl.getWidth()/this.getScaleLevel();D.height=this.thumbEl.getHeight()/this.getScaleLevel();switch(this.rotate){case 0:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());
+var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var sx=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true);var sy=this.thumbEl.getTop(true)-this.previewEl.getTop(true);
+sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());if(D.width>this.outputMaxWidth){var H=this.outputMaxWidth/D.width;D.width=D.width*H;D.height=D.height*H;E.scale(H,H);}E.fillStyle='white';E.fillRect(0,0,this.thumbEl.getWidth()/this.getScaleLevel(),this.thumbEl.getHeight()/this.getScaleLevel());
+E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 90:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());
+var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
+var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
+var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;
+E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 180:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());
+var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
+var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
+var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
+sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 270:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());
+var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
+}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
+sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);E.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);
+if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight);
+B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=this.windowSize;
+A=Math.ceil(this.minWidth*B/this.minHeight);if(this.minWidth>this.minHeight){A=this.windowSize;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);
+var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.panel.Cropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.panel.Cropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.panel.Cropbox['tags']['Orientation']];
+}this.rotate=Roo.panel.Cropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();
+this.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;
+}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getWidth()){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;
+}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getHeight()){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginWidth;
+}}return;}A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getHeight()){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getHeight();
+this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;}}if(this.imageEl.OriginWidth<this.minWidth||this.imageEl.OriginHeight<this.minHeight){this.baseScale=A/this.minWidth;
+}return;},getScaleLevel:function(){return this.baseScale*Math.pow(1.02,this.scale);},onTouchStart:function(e){if(!this.canvasLoaded){this.beforeSelectFile(e);return;}var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;}if(A.length!=2){return;
+}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){if(!this.pinching&&!this.dragable){return;
+}var A=e.browserEvent.touches;if(!A){return;}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);this.scale=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));
+if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();},onTouchEnd:function(e){this.pinching=false;this.dragable=false;},process:function(A,B){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.xhr=new XMLHttpRequest();A.xhr=this.xhr;
+this.xhr.open(this.method,this.url,true);var C={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};for(var D in C){var E=C[D];if(E){this.xhr.setRequestHeader(D,E);}}var F=this;this.xhr.onload=function(){F.xhrOnLoad(F.xhr);
+};this.xhr.onerror=function(){F.xhrOnError(F.xhr);};var G=new FormData();G.append('returnHTML','NO');if(B){G.append('crop',B);var H=atob(B.split(',')[1]);var I=[];for(var i=0;i<H.length;i++){I.push(H.charCodeAt(i));}var J=new Blob([new Uint8Array(I)],{type:this.cropType}
+);G.append(this.paramName,J,A.name);}if(typeof(A.filename)!='undefined'){G.append('filename',A.filename);}if(typeof(A.mimetype)!='undefined'){G.append('mimetype',A.mimetype);}if(this.fireEvent('arrange',this,G)!=false){this.xhr.send(G);};},xhrOnLoad:function(A){if(this.loadMask){this.maskEl.unmask();
+}if(A.readyState!==4){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);if(!B.success){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);this.fireEvent('upload',this,B);},xhrOnError:function(){if(this.loadMask){this.maskEl.unmask();
+}Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);Roo.log(A);},prepare:function(A){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.file=false;this.exif={};if(typeof(A)==='string'){this.loadCanvas(A);return;}if(!A||!this.urlAPI){return;
+}this.file=A;if(typeof(A.type)!='undefined'&&A.type.length!=0){this.cropType=A.type;}var B=this;if(this.fireEvent('prepare',this,this.file)!=false){var C=new FileReader();C.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var D=e.target.result,E=new DataView(D),F=2,G=E.byteLength-4,H,I;
+if(E.getUint16(0)===0xffd8){while(F<G){H=E.getUint16(F);if((H>=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}if(H==0xffe1){B.parseExifData(E,F,I);}F+=I;continue;}break;
+}}var J=B.urlAPI.createObjectURL(B.file);B.loadCanvas(J);return;};C.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');
+return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;default:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;
+}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;if(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');
+return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);
+},getExifValue:function(A,B,C,D,E,F){var G=Roo.panel.Cropbox.exifTagTypes[D],H,I,J,i,K,c;if(!G){Roo.log('Invalid Exif data: Invalid tag type.');return;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');
+return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);}if(G.ascii){K='';for(i=0;i<J.length;i+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.panel.Cropbox,{tags:{'Orientation':0x0112
+}
+,Orientation:{1:0,3:180,6:90,8:270},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);},size:1},2:{getValue:function(A,B){return String.fromCharCode(A.getUint8(B));},size:1,ascii:true},3:{getValue:function(A,B,C){return A.getUint16(B,C);},size:2}
+,4:{getValue:function(A,B,C){return A.getUint32(B,C);},size:4},5:{getValue:function(A,B,C){return A.getUint32(B,C)/A.getUint32(B+4,C);},size:8},9:{getValue:function(A,B,C){return A.getInt32(B,C);},size:4},10:{getValue:function(A,B,C){return A.getInt32(B,C)/A.getInt32(B+4,C);
+},size:8}},footer:{STANDARD:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-picture-o"></i>'}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-download"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-crop"></i>'}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-trash"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
+]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
+]}],CENTER:[{tag:'div',cls:'btn-group roo-upload-cropbox-center',action:'center',cn:[{tag:'button',cls:'btn btn-default',html:'CENTER'}]}]}});
+// Roo/panel/Tab.js
+Roo.panel.Tab=function(A,B){this.el=Roo.get(A,true);if(B){if(typeof B=="boolean"){this.tabPosition=B?"bottom":"top";}else{Roo.apply(this,B);}}if(this.tabPosition=="bottom"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("x-tabs-bottom");
}this.stripWrap=Roo.get(this.createStrip(this.el.dom),true);this.stripEl=Roo.get(this.createStripList(this.stripWrap.dom),true);this.stripBody=Roo.get(this.stripWrap.dom.firstChild.firstChild,true);if(Roo.isIE){Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x","hidden");
}if(this.tabPosition!="bottom"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("x-tabs-top");}this.items=[];this.bodyEl.setStyle("position","relative");this.active=null;this.activateDelegate=this.activate.createDelegate(this);this.addEvents({"tabchange":true,"beforetabchange":true}
);Roo.EventManager.onWindowResize(this.onResize,this);this.cpad=this.el.getPadding("lr");this.hiddenCount=0;if(this.toolbar){var C=this.toolbar;C.container=this.stripEl.child('td.x-tab-strip-toolbar');this.toolbar=new Roo.Toolbar(C);if(Roo.isSafari){var D=C.container.child('table',true);
-D.setAttribute('width','100%');}}Roo.TabPanel.superclass.constructor.call(this);};Roo.extend(Roo.TabPanel,Roo.util.Observable,{tabPosition:"top",currentTabWidth:0,minTabWidth:40,maxTabWidth:250,preferredTabWidth:175,resizeTabs:false,monitorResize:true,toolbar:false,addTab:function(id,A,B,C){var D=new Roo.TabPanelItem(this,id,A,C);
+D.setAttribute('width','100%');}}Roo.panel.Tab.superclass.constructor.call(this);};Roo.extend(Roo.panel.Tab,Roo.util.Observable,{tabPosition:"top",currentTabWidth:0,minTabWidth:40,maxTabWidth:250,preferredTabWidth:175,resizeTabs:false,monitorResize:true,toolbar:false,addTab:function(id,A,B,C){var D=new Roo.panel.TabItem(this,id,A,C);
this.addTabItem(D);if(B){D.setContent(B);}return D;},getTab:function(id){return this.items[id];},hideTab:function(id){var t=this.items[id];if(!t.isHidden()){t.setHidden(true);this.hiddenCount++;this.autoSizeTabs();}},unhideTab:function(id){var t=this.items[id];
if(t.isHidden()){t.setHidden(false);this.hiddenCount--;this.autoSizeTabs();}},addTabItem:function(A){this.items[A.id]=A;this.items.push(A);if(this.resizeTabs){A.setWidth(this.currentTabWidth||this.preferredTabWidth);this.autoSizeTabs();}else{A.autoSize();
}},removeTab:function(id){var A=this.items;var B=A[id];if(!B){return;}var C=A.indexOf(B);if(this.active==B&&A.length>1){var D=this.getNextAvailable(C);if(D){D.activate();}}this.stripEl.dom.removeChild(B.pnode.dom);if(B.bodyEl.dom.parentNode==this.bodyEl.dom){this.bodyEl.dom.removeChild(B.bodyEl.dom);
}},beginUpdate:function(){this.updating=true;},endUpdate:function(){this.updating=false;this.autoSizeTabs();},autoSizeTabs:function(){var A=this.items.length;var B=A-this.hiddenCount;if(!this.resizeTabs||A<1||B<1||this.updating){return;}var w=Math.max(this.el.getWidth()-this.cpad,10);
var C=Math.floor(w/B);var b=this.stripBody;if(b.getWidth()>w){var D=this.items;this.setTabWidth(Math.max(C,this.minTabWidth)-2);if(C<this.minTabWidth){}}else{if(this.currentTabWidth<this.preferredTabWidth){this.setTabWidth(Math.min(C,this.preferredTabWidth)-2);
}}},getCount:function(){return this.items.length;},setTabWidth:function(A){this.currentTabWidth=A;for(var i=0,B=this.items.length;i<B;i++){if(!this.items[i].isHidden()){this.items[i].setWidth(A);}}},destroy:function(A){Roo.EventManager.removeResizeListener(this.onResize,this);
-for(var i=0,B=this.items.length;i<B;i++){this.items[i].purgeListeners();}if(A===true){this.el.update("");this.el.remove();}}});Roo.TabPanelItem=function(A,id,B,C){this.tabPanel=A;this.id=id;this.disabled=false;this.text=B;this.loaded=false;this.closable=C;
-this.bodyEl=Roo.get(A.createItemBody(A.bodyEl.dom,id));this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);this.bodyEl.setStyle("display","block");this.bodyEl.setStyle("zoom","1");this.hideAction();var D=A.createStripElements(A.stripEl.dom,B,C);this.el=Roo.get(D.el,true);
-this.inner=Roo.get(D.inner,true);this.textEl=Roo.get(this.el.dom.firstChild.firstChild.firstChild,true);this.pnode=Roo.get(D.el.parentNode,true);this.el.on("mousedown",this.onTabMouseDown,this);this.el.on("click",this.onTabClick,this);if(C){var c=Roo.get(D.close,true);
-c.dom.title=this.closeText;c.addClassOnOver("close-over");c.on("click",this.closeClick,this);}this.addEvents({"activate":true,"beforeclose":true,"close":true,"deactivate":true});this.hidden=false;Roo.TabPanelItem.superclass.constructor.call(this);};Roo.extend(Roo.TabPanelItem,Roo.util.Observable,{purgeListeners:function(){Roo.util.Observable.prototype.purgeListeners.call(this);
-this.el.removeAllListeners();},show:function(){this.pnode.addClass("on");this.showAction();if(Roo.isOpera){this.tabPanel.stripWrap.repaint();}this.fireEvent("activate",this.tabPanel,this);},isActive:function(){return this.tabPanel.getActiveTab()==this;},hide:function(){this.pnode.removeClass("on");
-this.hideAction();this.fireEvent("deactivate",this.tabPanel,this);},hideAction:function(){this.bodyEl.hide();this.bodyEl.setStyle("position","absolute");this.bodyEl.setLeft("-20000px");this.bodyEl.setTop("-20000px");},showAction:function(){this.bodyEl.setStyle("position","relative");
-this.bodyEl.setTop("");this.bodyEl.setLeft("");this.bodyEl.show();},setTooltip:function(A){if(Roo.QuickTips&&Roo.QuickTips.isEnabled()){this.textEl.dom.qtip=A;this.textEl.dom.removeAttribute('title');}else{this.textEl.dom.title=A;}},onTabClick:function(e){e.preventDefault();
-this.tabPanel.activate(this.id);},onTabMouseDown:function(e){e.preventDefault();this.tabPanel.activate(this.id);},getWidth:function(){return this.inner.getWidth();},setWidth:function(A){var B=A-this.pnode.getPadding("lr");this.inner.setWidth(B);this.textEl.setWidth(B-this.inner.getPadding("lr"));
+for(var i=0,B=this.items.length;i<B;i++){this.items[i].purgeListeners();}if(A===true){this.el.update("");this.el.remove();}}});Roo.panel.Tab.prototype.createStripList=function(A){A.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 A.firstChild.firstChild.firstChild.firstChild;};Roo.panel.Tab.prototype.createBody=function(A){var B=document.createElement("div");Roo.id(B,"tab-body");Roo.fly(B).addClass("x-tabs-body");A.appendChild(B);return B;};Roo.panel.Tab.prototype.createItemBody=function(A,id){var B=Roo.getDom(id);
+if(!B){B=document.createElement("div");B.id=id;}Roo.fly(B).addClass("x-tabs-item-body");A.insertBefore(B,A.firstChild);return B;};Roo.panel.Tab.prototype.createStripElements=function(A,B,C){var td=document.createElement("td");A.insertBefore(td,A.childNodes[A.childNodes.length-1]);
+if(C){td.className="x-tabs-closable";if(!this.closeTpl){this.closeTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span>'+'<div unselectable="on" class="close-icon"> </div></em></span></a>');
+}var el=this.closeTpl.overwrite(td,{"text":B});var D=el.getElementsByTagName("div")[0];var E=el.getElementsByTagName("em")[0];return {"el":el,"close":D,"inner":E};}else{if(!this.tabTpl){this.tabTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span></em></span></a>');
+}var el=this.tabTpl.overwrite(td,{"text":B});var E=el.getElementsByTagName("em")[0];return {"el":el,"inner":E};}};
+// Roo/panel/TabItem.js
+Roo.panel.TabItem=function(A,id,B,C){this.tabPanel=A;this.id=id;this.disabled=false;this.text=B;this.loaded=false;this.closable=C;this.bodyEl=Roo.get(A.createItemBody(A.bodyEl.dom,id));this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);this.bodyEl.setStyle("display","block");
+this.bodyEl.setStyle("zoom","1");this.hideAction();var D=A.createStripElements(A.stripEl.dom,B,C);this.el=Roo.get(D.el,true);this.inner=Roo.get(D.inner,true);this.textEl=Roo.get(this.el.dom.firstChild.firstChild.firstChild,true);this.pnode=Roo.get(D.el.parentNode,true);
+this.el.on("mousedown",this.onTabMouseDown,this);this.el.on("click",this.onTabClick,this);if(C){var c=Roo.get(D.close,true);c.dom.title=this.closeText;c.addClassOnOver("close-over");c.on("click",this.closeClick,this);}this.addEvents({"activate":true,"beforeclose":true,"close":true,"deactivate":true}
+);this.hidden=false;Roo.panel.TabItem.superclass.constructor.call(this);};Roo.extend(Roo.panel.TabItem,Roo.util.Observable,{purgeListeners:function(){Roo.util.Observable.prototype.purgeListeners.call(this);this.el.removeAllListeners();},show:function(){this.pnode.addClass("on");
+this.showAction();if(Roo.isOpera){this.tabPanel.stripWrap.repaint();}this.fireEvent("activate",this.tabPanel,this);},isActive:function(){return this.tabPanel.getActiveTab()==this;},hide:function(){this.pnode.removeClass("on");this.hideAction();this.fireEvent("deactivate",this.tabPanel,this);
+},hideAction:function(){this.bodyEl.hide();this.bodyEl.setStyle("position","absolute");this.bodyEl.setLeft("-20000px");this.bodyEl.setTop("-20000px");},showAction:function(){this.bodyEl.setStyle("position","relative");this.bodyEl.setTop("");this.bodyEl.setLeft("");
+this.bodyEl.show();},setTooltip:function(A){if(Roo.QuickTips&&Roo.QuickTips.isEnabled()){this.textEl.dom.qtip=A;this.textEl.dom.removeAttribute('title');}else{this.textEl.dom.title=A;}},onTabClick:function(e){e.preventDefault();this.tabPanel.activate(this.id);
+},onTabMouseDown:function(e){e.preventDefault();this.tabPanel.activate(this.id);},getWidth:function(){return this.inner.getWidth();},setWidth:function(A){var B=A-this.pnode.getPadding("lr");this.inner.setWidth(B);this.textEl.setWidth(B-this.inner.getPadding("lr"));
this.pnode.setWidth(A);},setHidden:function(A){this.hidden=A;this.pnode.setStyle("display",A?"none":"");},isHidden:function(){return this.hidden;},getText:function(){return this.text;},autoSize:function(){this.textEl.setWidth(1);this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr")+2);
},setText:function(A){this.text=A;this.textEl.update(A);this.setTooltip(A);if(!this.tabPanel.resizeTabs){this.autoSize();}},activate:function(){this.tabPanel.activate(this.id);},disable:function(){if(this.tabPanel.active!=this){this.disabled=true;this.pnode.addClass("disabled");
}},enable:function(){this.disabled=false;this.pnode.removeClass("disabled");},setContent:function(A,B){this.bodyEl.update(A,B);},getUpdateManager:function(){return this.bodyEl.getUpdateManager();},setUrl:function(A,B,C){if(this.refreshDelegate){this.un('activate',this.refreshDelegate);
}this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);return this.bodyEl.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.loaded){var D=this.bodyEl.getUpdateManager();D.update(A,B,this._setLoaded.createDelegate(this));
}},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();}},_setLoaded:function(){this.loaded=true;},closeClick:function(e){var o={};e.stopEvent();this.fireEvent("beforeclose",this,o);if(o.cancel!==true){this.tabPanel.removeTab(this.id);
-}},closeText:"Close this tab"});Roo.TabPanel.prototype.createStrip=function(A){var B=document.createElement("div");B.className="x-tabs-wrap";A.appendChild(B);return B;};Roo.TabPanel.prototype.createStripList=function(A){A.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 A.firstChild.firstChild.firstChild.firstChild;};Roo.TabPanel.prototype.createBody=function(A){var B=document.createElement("div");Roo.id(B,"tab-body");Roo.fly(B).addClass("x-tabs-body");A.appendChild(B);return B;};Roo.TabPanel.prototype.createItemBody=function(A,id){var B=Roo.getDom(id);
-if(!B){B=document.createElement("div");B.id=id;}Roo.fly(B).addClass("x-tabs-item-body");A.insertBefore(B,A.firstChild);return B;};Roo.TabPanel.prototype.createStripElements=function(A,B,C){var td=document.createElement("td");A.insertBefore(td,A.childNodes[A.childNodes.length-1]);
-if(C){td.className="x-tabs-closable";if(!this.closeTpl){this.closeTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span>'+'<div unselectable="on" class="close-icon"> </div></em></span></a>');
-}var el=this.closeTpl.overwrite(td,{"text":B});var D=el.getElementsByTagName("div")[0];var E=el.getElementsByTagName("em")[0];return {"el":el,"close":D,"inner":E};}else{if(!this.tabTpl){this.tabTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span></em></span></a>');
-}var el=this.tabTpl.overwrite(td,{"text":B});var E=el.getElementsByTagName("em")[0];return {"el":el,"inner":E};}};
+}},closeText:"Close this tab"});Roo.panel.Tab.prototype.createStrip=function(A){var B=document.createElement("div");B.className="x-tabs-wrap";A.appendChild(B);return B;};
// Roo/Button.js
Roo.Button=function(A,B){if(!B){B=A;A=B.renderTo||false;}Roo.apply(this,B);this.addEvents({"click":true,"toggle":true,'mouseover':true,'mouseout':true,'render':true});if(this.menu){this.menu=Roo.menu.MenuMgr.get(this.menu);}Roo.util.Observable.call(this);if(A){this.render(A);
}};Roo.extend(Roo.Button,Roo.util.Observable,{hidden:false,disabled:false,pressed:false,tabIndex:undefined,enableToggle:false,menu:undefined,menuAlign:"tl-bl?",iconCls:undefined,type:'button',menuClassTarget:'tr',clickEvent:'click',handleMouseEvents:true,tooltipType:'qtip',render:function(A){var B;
w+=this.body.getMargins("lr")+this.bwrap.getMargins("lr")+this.centerBg.getPadding("lr");h+=this.body.getPadding("tb")+this.bwrap.getBorderWidth("tb")+this.body.getBorderWidth("tb")+this.el.getBorderWidth("tb");w+=this.body.getPadding("lr")+this.bwrap.getBorderWidth("lr")+this.body.getBorderWidth("lr")+this.bwrap.getPadding("lr")+this.el.getBorderWidth("lr");
if(this.tabs){h+=this.tabs.stripWrap.getHeight()+this.tabs.bodyEl.getMargins("tb")+this.tabs.bodyEl.getPadding("tb");w+=this.tabs.bodyEl.getMargins("lr")+this.tabs.bodyEl.getPadding("lr");}this.resizeTo(w,h);return this;},addKeyListener:function(A,fn,B){var C,D,E,F;
if(typeof A=="object"&&!(A instanceof Array)){C=A["key"];D=A["shift"];E=A["ctrl"];F=A["alt"];}else{C=A;}var G=function(H,e){if((!D||e.shiftKey)&&(!E||e.ctrlKey)&&(!F||e.altKey)){var k=e.getKey();if(C instanceof Array){for(var i=0,I=C.length;i<I;i++){if(C[i]==k){fn.call(B||window,H,k,e);
-return;}}}else{if(k==C){fn.call(B||window,H,k,e);}}}};this.on("keydown",G);return this;},getTabs:function(){if(!this.tabs){this.el.addClass("x-dlg-auto-tabs");this.body.addClass(this.tabPosition=="bottom"?"x-tabs-bottom":"x-tabs-top");this.tabs=new Roo.TabPanel(this.body.dom,this.tabPosition=="bottom");
+return;}}}else{if(k==C){fn.call(B||window,H,k,e);}}}};this.on("keydown",G);return this;},getTabs:function(){if(!this.tabs){this.el.addClass("x-dlg-auto-tabs");this.body.addClass(this.tabPosition=="bottom"?"x-tabs-bottom":"x-tabs-top");this.tabs=new Roo.panel.Tab(this.body.dom,this.tabPosition=="bottom");
}return this.tabs;},addButton:function(A,B,C){var dh=Roo.DomHelper;if(!this.footer){this.footer=dh.append(this.bwrap,{tag:"div",cls:"x-dlg-ft"},true);}if(!this.btnContainer){var tb=this.footer.createChild({cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'}
,null,true);this.btnContainer=tb.firstChild.firstChild.firstChild;}var D={handler:B,scope:C,minWidth:this.minButtonWidth,hideParent:true};if(typeof A=="string"){D.text=A;}else{if(A.tag){D.dhconfig=A;}else{Roo.apply(D,A);}}var fc=false;if((typeof(D.position)!='undefined')&&D.position<this.btnContainer.childNodes.length-1){D.position=Math.max(0,D.position);
fc=this.btnContainer.childNodes[D.position];}var E=new Roo.Button(fc?this.btnContainer.insertBefore(document.createElement("td"),fc):this.btnContainer.appendChild(document.createElement("td")),D);this.syncBodyHeight();if(!this.buttons){this.buttons=[];}this.buttons.push(E);
}this.el.repaint();this.fireEvent("layout",this);},safeBox:function(A){A.width=Math.max(0,A.width);A.height=Math.max(0,A.height);return A;},add:function(A,B){A=A.toLowerCase();return this.regions[A].add(B);},remove:function(A,B){A=A.toLowerCase();return this.regions[A].remove(B);
},findPanel:function(A){var rs=this.regions;for(var B in rs){if(typeof rs[B]!="function"){var p=rs[B].getPanel(A);if(p){return p;}}}return null;},showPanel:function(A){var rs=this.regions;for(var B in rs){var r=rs[B];if(typeof r!="function"){if(r.hasPanel(A)){return r.showPanel(A);
}}}return null;},restoreState:function(A){if(!A){A=Roo.state.Manager;}var sm=new Roo.LayoutStateManager();sm.init(this,A);},batchAdd:function(A){this.beginUpdate();for(var B in A){var lr=this.regions[B];if(lr){this.addTypedPanels(lr,A[B]);}}this.endUpdate();
-},addTypedPanels:function(lr,ps){if(typeof ps=='string'){lr.add(new Roo.ContentPanel(ps));}else if(ps instanceof Array){for(var i=0,A=ps.length;i<A;i++){this.addTypedPanels(lr,ps[i]);}}else if(!ps.events){var el=ps.el;delete ps.el;lr.add(new Roo.ContentPanel(el||Roo.id(),ps));
-}else{lr.add(ps);}},addxtype:function(A){if(!A.xtype.match(/Panel$/)){return false;}var B=false;if(typeof(A.region)=='undefined'){Roo.log("Failed to add Panel, region was not set");Roo.log(A);return false;}var C=A.region;delete A.region;var D=[];if(A.items){D=A.items;
-delete A.items;}var nb=false;switch(A.xtype){case 'ContentPanel':case 'ScrollPanel':case 'ViewPanel':if(A.autoCreate){B=new Roo[A.xtype](A);}else{var el=this.el.createChild();B=new Roo[A.xtype](el,A);}this.add(C,B);break;case 'TreePanel':A.el=this.el.createChild();
-B=new Roo[A.xtype](A);this.add(C,B);break;case 'NestedLayoutPanel':var el=this.el.createChild();var E=A.layout;delete A.layout;E.items=E.items||[];D=E.items;if(C=='center'&&this.active&&this.getRegion('center').panels.length<1){A.background=false;}var F=new Roo.BorderLayout(el,E);
-B=new Roo[A.xtype](F,A);this.add(C,B);nb={};break;case 'GridPanel':var el=this.el.createChild();var G=new Roo.grid[A.grid.xtype](el,A.grid);delete A.grid;if(C=='center'&&this.active){A.background=false;}B=new Roo[A.xtype](G,A);this.add(C,B);if(A.background){B.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.render();
-}});}else{G.render();}break;default:if(typeof(Roo[A.xtype])!='undefined'){B=new Roo[A.xtype](A);this.add(C,B);}else{alert("Can not add '"+A.xtype+"' to BorderLayout");return null;}}this.beginUpdate();var C='';var H={};Roo.each(D,function(i){C=nb&&i.region?i.region:false;
-var I=B.addxtype(i);if(C){nb[C]=nb[C]==undefined?0:nb[C]+1;if(!i.background){H[C]=nb[C];}}});this.endUpdate();if(nb){for(var r in H){C=this.getRegion(r);if(C){C.showPanel(H[r]);}}}return B;}});Roo.BorderLayout.create=function(A,B){var C=new Roo.BorderLayout(B||document.body,A);
-C.beginUpdate();var D=Roo.BorderLayout.RegionFactory.validRegions;for(var j=0,E=D.length;j<E;j++){var lr=D[j];if(C.regions[lr]&&A[lr].panels){var r=C.regions[lr];var ps=A[lr].panels;C.addTypedPanels(r,ps);}}C.endUpdate();return C;};Roo.BorderLayout.RegionFactory={validRegions:["north","south","east","west","center"],create:function(A,B,C){A=A.toLowerCase();
+},addTypedPanels:function(lr,ps){if(typeof ps=='string'){lr.add(new Roo.panel.Content(ps));}else if(ps instanceof Array){for(var i=0,A=ps.length;i<A;i++){this.addTypedPanels(lr,ps[i]);}}else if(!ps.events){var el=ps.el;delete ps.el;lr.add(new Roo.panel.Content(el||Roo.id(),ps));
+}else{lr.add(ps);}},addxtype:function(A){var B=false;if(typeof(A.region)=='undefined'){Roo.log("Failed to add Panel, region was not set");Roo.log(A);return false;}var C=A.region;delete A.region;var D=[];if(A.items){D=A.items;delete A.items;}var nb=false;switch(A.xtype){case 'Content':if(A.autoCreate){B=new Roo.panel[A.xtype](A);
+}else{var el=this.el.createChild();B=new Roo.panel[A.xtype](el,A);}this.add(C,B);break;case 'Grid':var el=this.el.createChild();var E=new Roo.grid[A.grid.xtype](el,A.grid);delete A.grid;if(C=='center'&&this.active){A.background=false;}B=new Roo.panel[A.xtype](E,A);
+this.add(C,B);if(A.background){B.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.render();}});}else{E.render();}break;case 'NestedLayout':var el=this.el.createChild();var F=A.layout;delete A.layout;F.items=F.items||[];D=F.items;if(C=='center'&&this.active&&this.getRegion('center').panels.length<1){A.background=false;
+}var G=new Roo.BorderLayout(el,F);B=new Roo.panel[A.xtype](G,A);this.add(C,B);nb={};break;case 'Calendar':B=new Roo.panel[A.xtype](A);this.add(C,B);break;case 'Tree':A.el=this.el.createChild();B=new Roo.panel[A.xtype](A);this.add(C,B);break;case 'ContentPanel':case 'ScrollPanel':case 'ViewPanel':if(A.autoCreate){B=new Roo[A.xtype](A);
+}else{var el=this.el.createChild();B=new Roo[A.xtype](el,A);}this.add(C,B);break;case 'TreePanel':A.el=this.el.createChild();B=new Roo[A.xtype](A);this.add(C,B);break;case 'NestedLayoutPanel':var el=this.el.createChild();var F=A.layout;delete A.layout;F.items=F.items||[];
+D=F.items;if(C=='center'&&this.active&&this.getRegion('center').panels.length<1){A.background=false;}var G=new Roo.BorderLayout(el,F);B=new Roo[A.xtype](G,A);this.add(C,B);nb={};break;case 'GridPanel':var el=this.el.createChild();var E=new Roo.grid[A.grid.xtype](el,A.grid);
+delete A.grid;if(C=='center'&&this.active){A.background=false;}B=new Roo[A.xtype](E,A);this.add(C,B);if(A.background){B.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.render();}});}else{E.render();}break;default:if(typeof(Roo[A.xtype])!='undefined'){B=new Roo[A.xtype](A);
+this.add(C,B);}else{alert("Can not add '"+A.xtype+"' to BorderLayout");return null;}}this.beginUpdate();var C='';var H={};Roo.each(D,function(i){C=nb&&i.region?i.region:false;var I=B.addxtype(i);if(C){nb[C]=nb[C]==undefined?0:nb[C]+1;if(!i.background){H[C]=nb[C];
+}}});this.endUpdate();if(nb){for(var r in H){C=this.getRegion(r);if(C){C.showPanel(H[r]);}}}return B;}});Roo.BorderLayout.create=function(A,B){var C=new Roo.BorderLayout(B||document.body,A);C.beginUpdate();var D=Roo.BorderLayout.RegionFactory.validRegions;
+for(var j=0,E=D.length;j<E;j++){var lr=D[j];if(C.regions[lr]&&A[lr].panels){var r=C.regions[lr];var ps=A[lr].panels;C.addTypedPanels(r,ps);}}C.endUpdate();return C;};Roo.BorderLayout.RegionFactory={validRegions:["north","south","east","west","center"],create:function(A,B,C){A=A.toLowerCase();
if(C.lightweight||C.basic){return new Roo.BasicLayoutRegion(B,C,A);}switch(A){case "north":return new Roo.NorthLayoutRegion(B,C);case "south":return new Roo.SouthLayoutRegion(B,C);case "east":return new Roo.EastLayoutRegion(B,C);case "west":return new Roo.WestLayoutRegion(B,C);
case "center":return new Roo.CenterLayoutRegion(B,C);}throw 'Layout region "'+A+'" not supported.';}};
// Roo/BasicLayoutRegion.js
}},collapseClick:function(e){if(this.isSlid){e.stopPropagation();this.slideIn();}else{e.stopPropagation();this.slideOut();}},collapse:function(A,B){if(this.collapsed){return;}if(B||this.fireEvent("beforecollapse",this)!=false){this.collapsed=true;if(this.split){this.split.el.hide();
}if(this.config.animate&&A!==true){this.fireEvent("invalidated",this);this.animateCollapse();}else{this.el.setLocation(-20000,-20000);this.el.hide();this.collapsedEl.show();this.fireEvent("collapsed",this);this.fireEvent("invalidated",this);}}},animateCollapse:function(){}
,expand:function(e,A){if(e){e.stopPropagation();}if(!this.collapsed||this.el.hasActiveFx()){return;}if(this.isSlid){this.afterSlideIn();A=true;}this.collapsed=false;if(this.config.animate&&A!==true){this.animateExpand();}else{this.el.show();if(this.split){this.split.el.show();
-}this.collapsedEl.setLocation(-2000,-2000);this.collapsedEl.hide();this.fireEvent("invalidated",this);this.fireEvent("expanded",this);}},animateExpand: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,toolbar:this.config.toolbar}
+}this.collapsedEl.setLocation(-2000,-2000);this.collapsedEl.hide();this.fireEvent("invalidated",this);this.fireEvent("expanded",this);}},animateExpand:function(){},initTabs:function(){this.bodyEl.setStyle("overflow","hidden");var ts=new Roo.panel.Tab(this.bodyEl.dom,{tabPosition:this.bottomTabs?'bottom':'top',disableTooltips:this.config.disableTabTips,toolbar:this.config.toolbar}
);if(this.config.hideTabs){ts.stripWrap.setDisplayed(false);}this.tabs=ts;ts.resizeTabs=this.config.resizeTabs===true;ts.minTabWidth=this.config.minTabWidth||40;ts.maxTabWidth=this.config.maxTabWidth||250;ts.preferredTabWidth=this.config.preferredTabWidth||150;
ts.monitorResize=false;ts.bodyEl.setStyle("overflow",this.config.autoScroll?"auto":"hidden");ts.bodyEl.addClass('x-layout-tabs-body');this.panels.each(this.initPanelAsTab,this);},initPanelAsTab:function(A){var ti=this.tabs.addTab(A.getEl().id,A.getTitle(),null,this.config.closeOnTab&&A.isClosable());
if(A.tabTip!==undefined){ti.setTooltip(A.tabTip);}ti.on("activate",function(){this.setActivePanel(A);},this);if(this.config.closeOnTab){ti.on("beforeclose",function(t,e){e.cancel=true;this.remove(A);},this);}return ti;},updatePanelTitle:function(A,B){if(this.activePanel==A){this.updateTitle(B);
var r=A.getRegion(E);if(r&&F){if(F.size){r.resizeTo(F.size);}if(F.collapsed==true){r.collapse(true);}else{r.expand(null,true);}}}}if(!D){A.endUpdate();}this.state=C;}this.layout=A;A.on("regionresized",this.onRegionResized,this);A.on("regioncollapsed",this.onRegionCollapsed,this);
A.on("regionexpanded",this.onRegionExpanded,this);},storeState:function(){this.provider.set(this.layout.id+"-layout-state",this.state);},onRegionResized:function(A,B){this.state[A.getPosition()].size=B;this.storeState();},onRegionCollapsed:function(A){this.state[A.getPosition()].collapsed=true;
this.storeState();},onRegionExpanded:function(A){this.state[A.getPosition()].collapsed=false;this.storeState();}};
-// Roo/ContentPanel.js
-Roo.ContentPanel=function(el,A,B){if(el.autoCreate){A=el;el=Roo.id();}this.el=Roo.get(el);if(!this.el&&A&&A.autoCreate){if(typeof A.autoCreate=="object"){if(!A.autoCreate.id){A.autoCreate.id=A.id||el;}this.el=Roo.DomHelper.append(document.body,A.autoCreate,true);
+// Roo/panel/Content.js
+Roo.panel.Content=function(el,A,B){if(el.autoCreate){A=el;el=Roo.id();}this.el=Roo.get(el);if(!this.el&&A&&A.autoCreate){if(typeof A.autoCreate=="object"){if(!A.autoCreate.id){A.autoCreate.id=A.id||el;}this.el=Roo.DomHelper.append(document.body,A.autoCreate,true);
}else{this.el=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-inactive-content",id:A.id||el},true);}}this.closable=false;this.loaded=false;this.active=false;if(typeof A=="string"){this.title=A;}else{Roo.apply(this,A);}if(this.toolbar&&!this.toolbar.el&&this.toolbar.xtype){this.wrapEl=this.el.wrap();
this.toolbar.container=this.el.insertSibling(false,'before');this.toolbar=new Roo.Toolbar(this.toolbar);}if(this.footer&&!this.footer.el&&this.footer.xtype){if(!this.wrapEl){this.wrapEl=this.el.wrap();}this.footer.container=this.wrapEl.createChild();this.footer=Roo.factory(this.footer,Roo);
}if(this.resizeEl){this.resizeEl=Roo.get(this.resizeEl,true);}else{this.resizeEl=this.el;}this.addEvents({"activate":true,"deactivate":true,"resize":true,"render":true});if(this.autoScroll){this.resizeEl.setStyle("overflow","auto");}else{this.el.on('scroll',function(){Roo.log('fix random scolling');
-this.scrollTo('top',0);});}B=B||this.content;if(B){this.setContent(B);}if(A&&A.url){this.setUrl(this.url,this.params,this.loadOnce);}Roo.ContentPanel.superclass.constructor.call(this);if(this.view&&typeof(this.view.xtype)!='undefined'){this.view.el=this.el.appendChild(document.createElement("div"));
-this.view=Roo.factory(this.view);this.view.render&&this.view.render(false,'');}this.fireEvent('render',this);};Roo.extend(Roo.ContentPanel,Roo.util.Observable,{tabTip:'',setRegion:function(A){this.region=A;if(A){this.el.replaceClass("x-layout-inactive-content","x-layout-active-content");
+this.scrollTo('top',0);});}B=B||this.content;if(B){this.setContent(B);}if(A&&A.url){this.setUrl(this.url,this.params,this.loadOnce);}Roo.panel.Content.superclass.constructor.call(this);if(this.view&&typeof(this.view.xtype)!='undefined'){this.view.el=this.el.appendChild(document.createElement("div"));
+this.view=Roo.factory(this.view);this.view.render&&this.view.render(false,'');}this.fireEvent('render',this);};Roo.extend(Roo.panel.Content,Roo.util.Observable,{tabTip:'',setRegion:function(A){this.region=A;if(A){this.el.replaceClass("x-layout-inactive-content","x-layout-active-content");
}else{this.el.replaceClass("x-layout-active-content","x-layout-inactive-content");}},getToolbar:function(){return this.toolbar;},setActiveState:function(A){this.active=A;if(!A){this.fireEvent("deactivate",this);}else{this.fireEvent("activate",this);}},setContent:function(A,B){this.el.update(A,B);
},ignoreResize:function(w,h){if(this.lastSize&&this.lastSize.width==w&&this.lastSize.height==h){return true;}else{this.lastSize={width:w,height:h};return false;}},getUpdateManager:function(){return this.el.getUpdateManager();},load:function(){var um=this.el.getUpdateManager();
um.update.apply(um,arguments);return this;},setUrl:function(A,B,C){if(this.refreshDelegate){this.removeListener("activate",this.refreshDelegate);}this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);
te.setWidth(A);}if(this.adjustments){A+=this.adjustments[0];B+=this.adjustments[1];}return {"width":A,"height":B};},setSize:function(A,B){if(this.fitToFrame&&!this.ignoreResize(A,B)){if(this.fitContainer&&this.resizeEl!=this.el){this.el.setSize(A,B);}var C=this.adjustForComponents(A,B);
this.resizeEl.setSize(this.autoWidth?"auto":C.width,this.autoHeight?"auto":C.height);this.fireEvent('resize',this,C.width,C.height);}},getTitle:function(){return this.title;},setTitle:function(A){this.title=A;if(this.region){this.region.updatePanelTitle(this,A);
}},isClosable:function(){return this.closable;},beforeSlide:function(){this.el.clip();this.resizeEl.clip();},afterSlide:function(){this.el.unclip();this.resizeEl.unclip();},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();
-}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^UploadCropbox$/)){this.cropbox=new Roo.factory(A);
+}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^Cropbox$/)){this.cropbox=new Roo.factory(A);
this.cropbox.render(this.el);return this.cropbox;}if(A.xtype.match(/^Form$/)){var el;el=this.el.createChild();this.form=new Roo.form.Form(A);if(this.form.allItems.length){this.form.render(el.dom);}return this.form;}if(['View','JsonView','DatePicker'].indexOf(A.xtype)>-1){A.el=this.el.appendChild(document.createElement("div"));
var B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});
-// Roo/GridPanel.js
-Roo.GridPanel=function(A,B){if(typeof(A.grid)!='undefined'){B=A;A=B.grid;}this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-grid-wrapper x-layout-inactive-content"},true);this.wrapper.dom.appendChild(A.getGridEl().dom);Roo.GridPanel.superclass.constructor.call(this,this.wrapper,B);
+// Roo/panel/Grid.js
+Roo.panel.Grid=function(A,B){if(typeof(A.grid)!='undefined'){B=A;A=B.grid;}this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-grid-wrapper x-layout-inactive-content"},true);this.wrapper.dom.appendChild(A.getGridEl().dom);Roo.panel.Grid.superclass.constructor.call(this,this.wrapper,B);
if(this.toolbar){this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);}if(this.footer&&!this.footer.el&&this.footer.xtype){this.footer.container=this.grid.getView().getFooterPanel(true);this.footer.dataSource=this.grid.dataSource;this.footer=Roo.factory(this.footer,Roo);
-}A.monitorWindowResize=false;A.autoHeight=false;A.autoWidth=false;this.grid=A;this.grid.getGridEl().replaceClass("x-layout-inactive-content","x-layout-component-panel");};Roo.extend(Roo.GridPanel,Roo.ContentPanel,{getId:function(){return this.grid.id;},getGrid:function(){return this.grid;
+}A.monitorWindowResize=false;A.autoHeight=false;A.autoWidth=false;this.grid=A;this.grid.getGridEl().replaceClass("x-layout-inactive-content","x-layout-component-panel");};Roo.extend(Roo.panel.Grid,Roo.panel.Content,{getId:function(){return this.grid.id;},getGrid:function(){return this.grid;
},setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.grid;var D=this.adjustForComponents(A,B);C.getGridEl().setSize(D.width,D.height);C.autoSize();}},beforeSlide:function(){this.grid.getView().scroller.clip();},afterSlide:function(){this.grid.getView().scroller.unclip();
-},destroy:function(){this.grid.destroy();delete this.grid;Roo.GridPanel.superclass.destroy.call(this);}});
-// Roo/NestedLayoutPanel.js
-Roo.NestedLayoutPanel=function(A,B){Roo.NestedLayoutPanel.superclass.constructor.call(this,A.getEl(),B);A.monitorWindowResize=false;this.layout=A;this.layout.getEl().addClass("x-layout-nested-layout");};Roo.extend(Roo.NestedLayoutPanel,Roo.ContentPanel,{layout:false,setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.adjustForComponents(A,B);
+},destroy:function(){this.grid.destroy();delete this.grid;Roo.panel.Grid.superclass.destroy.call(this);}});
+// Roo/panel/NestedLayout.js
+Roo.panel.NestedLayout=function(A,B){Roo.panel.NestedLayout.superclass.constructor.call(this,A.getEl(),B);A.monitorWindowResize=false;this.layout=A;this.layout.getEl().addClass("x-layout-nested-layout");};Roo.extend(Roo.panel.NestedLayout,Roo.panel.Content,{layout:false,setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.adjustForComponents(A,B);
var el=this.layout.getEl();el.setSize(C.width,C.height);var D=el.dom.offsetWidth;this.layout.layout();if(Roo.isIE&&!this.initialized){this.initialized=true;this.layout.layout();}}},setActiveState:function(A){this.active=A;if(!A){this.fireEvent("deactivate",this);
return;}this.fireEvent("activate",this);if(!this.layout){return;}var B=false;for(var r in this.layout.regions){B=this.layout.getRegion(r);if(B.getActivePanel()){B.setActivePanel(B.getActivePanel());continue;}if(!B.panels.length){continue;}B.showPanel(B.getPanel(0));
}},getLayout:function(){return this.layout;},addxtype:function(A){return this.layout.addxtype(A);}});
Roo.ScrollPanel=function(el,A,B){A=A||{};A.fitToFrame=true;Roo.ScrollPanel.superclass.constructor.call(this,el,A,B);this.el.dom.style.overflow="hidden";var C=this.el.wrap({cls:"x-scroller x-layout-inactive-content"});this.el.removeClass("x-layout-inactive-content");
this.el.on("mousewheel",this.onWheel,this);var up=C.createChild({cls:"x-scroller-up",html:" "},this.el.dom);var D=C.createChild({cls:"x-scroller-down",html:" "});up.unselectable();D.unselectable();up.on("click",this.scrollUp,this);D.on("click",this.scrollDown,this);
up.addClassOnOver("x-scroller-btn-over");D.addClassOnOver("x-scroller-btn-over");up.addClassOnClick("x-scroller-btn-click");D.addClassOnClick("x-scroller-btn-click");this.adjustments=[0,-(up.getHeight()+D.getHeight())];this.resizeEl=this.el;this.el=C;this.up=up;
-this.down=D;};Roo.extend(Roo.ScrollPanel,Roo.ContentPanel,{increment:100,wheelIncrement:5,scrollUp:function(){this.resizeEl.scroll("up",this.increment,{callback:this.afterScroll,scope:this});},scrollDown:function(){this.resizeEl.scroll("down",this.increment,{callback:this.afterScroll,scope:this}
+this.down=D;};Roo.extend(Roo.ScrollPanel,Roo.panel.Content,{increment:100,wheelIncrement:5,scrollUp:function(){this.resizeEl.scroll("up",this.increment,{callback:this.afterScroll,scope:this});},scrollDown:function(){this.resizeEl.scroll("down",this.increment,{callback:this.afterScroll,scope:this}
);},afterScroll:function(){var el=this.resizeEl;var t=el.dom.scrollTop,h=el.dom.scrollHeight,ch=el.dom.clientHeight;this.up[t==0?"addClass":"removeClass"]("x-scroller-btn-disabled");this.down[h-t<=ch?"addClass":"removeClass"]("x-scroller-btn-disabled");},setSize:function(){Roo.ScrollPanel.superclass.setSize.apply(this,arguments);
this.afterScroll();},onWheel:function(e){var d=e.getWheelDelta();this.resizeEl.dom.scrollTop-=(d*this.wheelIncrement);this.afterScroll();e.stopEvent();},setContent:function(A,B){this.resizeEl.update(A,B);}});
-// Roo/TreePanel.js
-Roo.TreePanel=function(A){var el=A.el;var B=A.tree;delete A.tree;delete A.el;var C=el.createChild();A.resizeEl=C;Roo.TreePanel.superclass.constructor.call(this,el,A);this.tree=new Roo.tree.TreePanel(C,B);this.on('activate',function(){if(this.tree.rendered){return;
-}this.tree.render();});};Roo.extend(Roo.TreePanel,Roo.ContentPanel,{fitToFrame:true,autoScroll:true,tree:false});
+// Roo/panel/Tree.js
+Roo.panel.Tree=function(A){var el=A.el;var B=A.tree;delete A.tree;delete A.el;var C=el.createChild();A.resizeEl=C;Roo.panel.Tree.superclass.constructor.call(this,el,A);this.tree=new Roo.tree.TreePanel(C,B);this.on('activate',function(){if(this.tree.rendered){return;
+}this.tree.render();});};Roo.extend(Roo.panel.Tree,Roo.panel.Content,{fitToFrame:true,autoScroll:true,tree:false});
// Roo/ReaderLayout.js
Roo.ReaderLayout=function(A,B){var c=A||{size:{}};Roo.ReaderLayout.superclass.constructor.call(this,B||document.body,{north:c.north!==false?Roo.apply({split:false,initialSize:32,titlebar:false},c.north):false,west:c.west!==false?Roo.apply({split:true,initialSize:200,minSize:175,maxSize:400,titlebar:true,collapsible:true,animate:true,margins:{left:5,right:0,bottom:5,top:5}
,cmargins:{left:5,right:5,bottom:5,top:5}},c.west):false,east:c.east!==false?Roo.apply({split:true,initialSize:200,minSize:175,maxSize:400,titlebar:true,collapsible:true,animate:true,margins:{left:0,right:5,bottom:5,top:5},cmargins:{left:5,right:5,bottom:5,top:5}
},c.east):false,center:Roo.apply({tabPosition:'top',autoScroll:false,closeOnTab:true,titlebar:false,margins:{left:c.west!==false?0:5,right:c.east!==false?0:5,bottom:5,top:2}},c.center)});this.el.addClass('x-reader');this.beginUpdate();var C=new Roo.BorderLayout(Roo.get(document.body).createChild(),{south:c.preview!==false?Roo.apply({split:true,initialSize:200,minSize:100,autoScroll:true,collapsible:true,titlebar:true,cmargins:{top:5,left:0,right:0,bottom:0}
-},c.preview):false,center:Roo.apply({autoScroll:false,titlebar:false,minHeight:200},c.listView)});this.add('center',new Roo.NestedLayoutPanel(C,Roo.apply({title:c.mainTitle||'',tabTip:''},c.innerPanelCfg)));this.endUpdate();this.regions.preview=C.getRegion('south');
+},c.preview):false,center:Roo.apply({autoScroll:false,titlebar:false,minHeight:200},c.listView)});this.add('center',new Roo.panel.NestedLayout(C,Roo.apply({title:c.mainTitle||'',tabTip:''},c.innerPanelCfg)));this.endUpdate();this.regions.preview=C.getRegion('south');
this.regions.listView=C.getRegion('center');};Roo.extend(Roo.ReaderLayout,Roo.BorderLayout);
// Roo/grid/Grid.js
Roo.grid.Grid=function(A,B){this.container=Roo.get(A);this.container.update("");this.container.setStyle("overflow","hidden");this.container.addClass('x-grid-container');this.id=this.container.id;Roo.apply(this,B);if(this.ds){this.dataSource=this.ds;delete this.ds;
}return "'"+A+H+C+")"+A+"'";};var B;if(Roo.isGecko){B="tpl.compiled = function(values, parent){ with(values) { return '"+tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn)+"';};};";}else{B=["tpl.compiled = function(values, parent){ with (values) { return ['"];
B.push(tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn));B.push("'].join('');};};");B=B.join('');}Roo.debug&&Roo.log(B.replace(/\\n/,'\n'));eval(B);return this;},applyTemplate:function(A){return this.master.compiled.call(this,A,{}
);},apply:function(){return this.applyTemplate.apply(this,arguments);}});Roo.XTemplate.from=function(el){el=Roo.getDom(el);return new Roo.XTemplate(el.value||el.innerHTML);};
-// Roo/dialog/namespace.js
-Roo.dialog={};
-// Roo/dialog/UploadCropbox.js
-Roo.dialog.UploadCropbox=function(A){Roo.dialog.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true}
-);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,windowSize:300,file:false,exif:{}
-,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'}
-,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify}
-]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);if(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype'));
-this.el.dom.removeAttribute('xtype');this.initEvents();}}else{var B=Roo.apply({},this.getAutoCreate());B.id=this.id||Roo.id();if(this.cls){B.cls=(typeof(B.cls)=='undefined'?this.cls:B.cls)+' '+this.cls;}if(this.style){B.style=(typeof(B.style)=='undefined'?this.style:B.style)+'; '+this.style;
-}this.el=ct.createChild(B,A);this.initEvents();}if(this.buttons.length){Roo.each(this.buttons,function(bb){var C=this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);C.on('click',this.onFooterButtonClick.createDelegate(this,[bb.action],true));
-},this);}if(this.loadMask){this.maskEl=this.el;}},initEvents:function(){this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);this.bodyEl=this.el.select('.roo-upload-cropbox-body',true).first();
-this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl=this.el.select('.roo-upload-cropbox-selector',true).first();this.selectorEl.hide();this.previewEl=this.el.select('.roo-upload-cropbox-preview',true).first();this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.thumbEl=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl.hide();this.notifyEl=this.el.select('.roo-upload-cropbox-empty-notify',true).first();this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.errorEl=this.el.select('.roo-upload-cropbox-error-notify',true).first();this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl.hide();this.footerEl=this.el.select('.roo-upload-cropbox-footer',true).first();this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.footerEl.hide();this.setThumbBoxSize();this.bind();this.resize();this.fireEvent('initial',this);},bind:function(){var A=this;window.addEventListener("resize",function(){A.resize();});this.bodyEl.on('click',this.beforeSelectFile,this);if(Roo.isTouch){this.bodyEl.on('touchstart',this.onTouchStart,this);
-this.bodyEl.on('touchmove',this.onTouchMove,this);this.bodyEl.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.bodyEl.on('mousedown',this.onMouseDown,this);this.bodyEl.on('mousemove',this.onMouseMove,this);var B=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';
-this.bodyEl.on(B,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);}this.selectorEl.on('change',this.onFileSelected,this);},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.baseRotate=1;this.dragable=false;this.pinching=false;
-this.mouseX=0;this.mouseY=0;this.cropData=false;this.notifyEl.dom.innerHTML=this.emptyText;},resize:function(){if(this.fireEvent('resize',this)!=false){this.setThumbBoxPosition();this.setCanvasPosition();}},onFooterButtonClick:function(e,el,o,A){switch(A){case 'rotate-left':this.onRotateLeft(e);
-break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.beforeSelectFile(e);break;case 'trash':this.trash(e);break;case 'crop':this.crop(e);break;case 'download':this.download(e);break;case 'center':this.center(e);break;default:break;}this.fireEvent('footerbuttonclick',this,A);
-},beforeSelectFile:function(e){e.preventDefault();if(this.fireEvent('beforeselectfile',this)!=false){this.selectorEl.dom.click();}},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;
-}var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);},center:function(e){this.setCanvasPosition();},loadCanvas:function(A){if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();
-this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;
-if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();if(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();
-this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(A=true){if(!this.canvasEl){return;}var B=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);var C=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);
-if(A){this.previewEl.setLeft(B);this.previewEl.setTop(C);return;}var D=this.baseScale*Math.pow(1.02,this.startScale);var E=Math.floor(this.imageEl.OriginWidth*D);var F=Math.floor(this.imageEl.OriginHeight*D);var G=Math.ceil((this.bodyEl.getWidth()-E)/2);var H=Math.ceil((this.bodyEl.getHeight()-F)/2);
-var I=B-G;var J=C-H;var K=this.previewEl.getLeft(true)+I;var L=this.previewEl.getTop(true)+J;this.previewEl.setLeft(K);this.previewEl.setTop(L);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;if(this.isDocument&&(this.canvasEl.width<this.thumbEl.getWidth()||this.canvasEl.height<this.thumbEl.getHeight())){this.dragable=false;
-return;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.canvasLoaded){return;}if(!this.dragable){return;}var A=this.canvasEl.width/0.9*0.05;
-var B=A*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){A=(this.canvasEl.height*this.minWidth/this.minHeight-this.canvasEl.width)/2+A;}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){B=(this.canvasEl.width*this.minHeight/this.minWidth-this.canvasEl.height)/2+B;
-}var C=Math.ceil(this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-this.canvasEl.width-A);var D=Math.ceil(this.thumbEl.getTop(true)+this.thumbEl.getHeight()-this.canvasEl.height-B);var E=Math.ceil(this.thumbEl.getLeft(true)+A);var F=Math.ceil(this.thumbEl.getTop(true)+B);
-if(C>E){var G=C;C=E;E=G;}if(D>F){var H=D;D=F;F=H;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var I=Math.ceil(x+this.previewEl.getLeft(true));
-var J=Math.ceil(y+this.previewEl.getTop(true));I=(I<C)?C:((I>E)?E:I);J=(J<D)?D:((J>F)?F:J);this.previewEl.setLeft(I);this.previewEl.setTop(J);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();
-},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.startScale=this.scale;this.scale=(e.getWheelDelta()>0)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();
-return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth<this.minHeight){A=this.thumbEl.getHeight()/this.minHeight;}var B=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel()/A);var C=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel()/A);
-var D=this.imageEl.OriginWidth;var E=this.imageEl.OriginHeight;var F=Math.floor(this.imageEl.OriginWidth*this.getScaleLevel());var G=Math.floor(this.imageEl.OriginHeight*this.getScaleLevel());var H=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);
-var I=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);var J=Math.ceil((this.bodyEl.getWidth()-F)/2);var K=Math.ceil((this.bodyEl.getHeight()-G)/2);var L=J-H;var M=K-I;var N=this.previewEl.getLeft(true)+L;var O=this.previewEl.getTop(true)+M;var P=N-this.thumbEl.getLeft(true);
-var Q=O-this.thumbEl.getTop(true);var R=this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-F-N;var S=this.thumbEl.getTop(true)+this.thumbEl.getHeight()-G-O;var T=F/0.9*0.05;var U=T*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){T=(G*this.minWidth/this.minHeight-F)/2+T;
-}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){U=(F*this.minHeight/this.minWidth-G)/2+U;}if(this.isDocument&&(this.rotate==0||this.rotate==180)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minWidth&&C<this.minHeight))){return false;
-}if(this.isDocument&&(this.rotate==90||this.rotate==270)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minHeight&&C<this.minWidth))){return false;}if(!this.isDocument&&(this.rotate==0||this.rotate==180)&&(P>T||R>T||Q>U||S>U||B>D||C>E)){return false;
-}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(B<this.minHeight||B>this.imageEl.OriginWidth||C<this.minWidth||C>this.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;
-var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
-}this.rotate=(this.rotate<90)?270:this.rotate-90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate<90)?270:this.rotate-90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
-}this.draw();this.fireEvent('rotate',this,'left');},onRotateRight:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
-var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
-}this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
-}this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){this.previewEl.dom.innerHTML='';var A=document.createElement("canvas");
-var B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidth<this.imageEl.OriginHeight){A.width=this.imageEl.OriginHeight*this.getScaleLevel();
-A.height=this.imageEl.OriginHeight*this.getScaleLevel();C=this.imageEl.OriginHeight/2;}B.scale(this.getScaleLevel(),this.getScaleLevel());B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);
-this.canvasEl=document.createElement("canvas");this.contextEl=this.canvasEl.getContext("2d");switch(this.rotate){case 0:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;case 90:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();
-if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;}this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;case 270:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;}this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;default:break;}this.previewEl.appendChild(this.canvasEl);this.setCanvasPosition(false);
-},crop:function(){if(!this.canvasLoaded){return;}var A=document.createElement("canvas");var B=A.getContext("2d");A.width=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;A.height=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;
-var C=A.width/2;B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);var D=document.createElement("canvas");var E=D.getContext("2d");
-D.width=this.thumbEl.getWidth()/this.getScaleLevel();D.height=this.thumbEl.getHeight()/this.getScaleLevel();switch(this.rotate){case 0:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());
-var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
-var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var sx=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true);var sy=this.thumbEl.getTop(true)-this.previewEl.getTop(true);
-sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());if(D.width>this.outputMaxWidth){var H=this.outputMaxWidth/D.width;D.width=D.width*H;D.height=D.height*H;E.scale(H,H);}E.fillStyle='white';E.fillRect(0,0,this.thumbEl.getWidth()/this.getScaleLevel(),this.thumbEl.getHeight()/this.getScaleLevel());
-E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 90:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());
-var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
-var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
-var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;
-E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 180:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());
-var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
-var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
-var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
-sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 270:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());
-var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
-var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
-}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
-sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);E.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);
-if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight);
-B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=this.windowSize;
-A=Math.ceil(this.minWidth*B/this.minHeight);if(this.minWidth>this.minHeight){A=this.windowSize;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);
-var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
-}this.rotate=Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();
-this.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;
-}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getWidth()){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;
-}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getHeight()){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginWidth;
-}}return;}A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getHeight()){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getHeight();
-this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;}}if(this.imageEl.OriginWidth<this.minWidth||this.imageEl.OriginHeight<this.minHeight){this.baseScale=A/this.minWidth;
-}return;},getScaleLevel:function(){return this.baseScale*Math.pow(1.02,this.scale);},onTouchStart:function(e){if(!this.canvasLoaded){this.beforeSelectFile(e);return;}var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;}if(A.length!=2){return;
-}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){if(!this.pinching&&!this.dragable){return;
-}var A=e.browserEvent.touches;if(!A){return;}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);this.scale=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));
-if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();},onTouchEnd:function(e){this.pinching=false;this.dragable=false;},process:function(A,B){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.xhr=new XMLHttpRequest();A.xhr=this.xhr;
-this.xhr.open(this.method,this.url,true);var C={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};for(var D in C){var E=C[D];if(E){this.xhr.setRequestHeader(D,E);}}var F=this;this.xhr.onload=function(){F.xhrOnLoad(F.xhr);
-};this.xhr.onerror=function(){F.xhrOnError(F.xhr);};var G=new FormData();G.append('returnHTML','NO');if(B){G.append('crop',B);var H=atob(B.split(',')[1]);var I=[];for(var i=0;i<H.length;i++){I.push(H.charCodeAt(i));}var J=new Blob([new Uint8Array(I)],{type:this.cropType}
-);G.append(this.paramName,J,A.name);}if(typeof(A.filename)!='undefined'){G.append('filename',A.filename);}if(typeof(A.mimetype)!='undefined'){G.append('mimetype',A.mimetype);}if(this.fireEvent('arrange',this,G)!=false){this.xhr.send(G);};},xhrOnLoad:function(A){if(this.loadMask){this.maskEl.unmask();
-}if(A.readyState!==4){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);if(!B.success){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);this.fireEvent('upload',this,B);},xhrOnError:function(){if(this.loadMask){this.maskEl.unmask();
-}Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);Roo.log(A);},prepare:function(A){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.file=false;this.exif={};if(typeof(A)==='string'){this.loadCanvas(A);return;}if(!A||!this.urlAPI){return;
-}this.file=A;if(typeof(A.type)!='undefined'&&A.type.length!=0){this.cropType=A.type;}var B=this;if(this.fireEvent('prepare',this,this.file)!=false){var C=new FileReader();C.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var D=e.target.result,E=new DataView(D),F=2,G=E.byteLength-4,H,I;
-if(E.getUint16(0)===0xffd8){while(F<G){H=E.getUint16(F);if((H>=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}if(H==0xffe1){B.parseExifData(E,F,I);}F+=I;continue;}break;
-}}var J=B.urlAPI.createObjectURL(B.file);B.loadCanvas(J);return;};C.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');
-return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;default:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;
-}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;if(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');
-return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);
-},getExifValue:function(A,B,C,D,E,F){var G=Roo.dialog.UploadCropbox.exifTagTypes[D],H,I,J,i,K,c;if(!G){Roo.log('Invalid Exif data: Invalid tag type.');return;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');
-return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);}if(G.ascii){K='';for(i=0;i<J.length;i+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.dialog.UploadCropbox,{tags:{'Orientation':0x0112
-}
-,Orientation:{1:0,3:180,6:90,8:270},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);},size:1},2:{getValue:function(A,B){return String.fromCharCode(A.getUint8(B));},size:1,ascii:true},3:{getValue:function(A,B,C){return A.getUint16(B,C);},size:2}
-,4:{getValue:function(A,B,C){return A.getUint32(B,C);},size:4},5:{getValue:function(A,B,C){return A.getUint32(B,C)/A.getUint32(B+4,C);},size:8},9:{getValue:function(A,B,C){return A.getInt32(B,C);},size:4},10:{getValue:function(A,B,C){return A.getInt32(B,C)/A.getInt32(B+4,C);
-},size:8}},footer:{STANDARD:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-picture-o"></i>'}
-]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
-]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-download"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-crop"></i>'}
-]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-trash"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
-]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
-]}],CENTER:[{tag:'div',cls:'btn-group roo-upload-cropbox-center',action:'center',cn:[{tag:'button',cls:'btn btn-default',html:'CENTER'}]}]}});
+// Roo/depreicated.js
+Roo.GridPanel=Roo.panel.Grid;Roo.CalendarPanel=Roo.panel.Calendar;Roo.ContentPanel=Roo.panel.Content;Roo.NestedLayoutPanel=Roo.panel.NestedLayout;Roo.TabPanel=Roo.panel.Tab;Roo.TabPanelItem=Roo.panel.TabItem;Roo.TreePanel=Roo.panel.Tree;
}
-}); /*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.TabPanel
- * @extends Roo.util.Observable
- * A lightweight tab container.
- * <br><br>
- * Usage:
- * <pre><code>
-// basic tabs 1, built from existing content
-var tabs = new Roo.TabPanel("tabs1");
-tabs.addTab("script", "View Script");
-tabs.addTab("markup", "View Markup");
-tabs.activate("script");
-
-// more advanced tabs, built from javascript
-var jtabs = new Roo.TabPanel("jtabs");
-jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
-
-// set up the UpdateManager
-var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
-var updater = tab2.getUpdateManager();
-updater.setDefaultUrl("ajax1.htm");
-tab2.on('activate', updater.refresh, updater, true);
-
-// Use setUrl for Ajax loading
-var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
-tab3.setUrl("ajax2.htm", null, true);
-
-// Disabled tab
-var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
-tab4.disable();
+});Roo.panel = {};
+/*
+* Licence: LGPL
+*/
-jtabs.activate("jtabs-1");
- * </code></pre>
+/**
+ * @class Roo.panel.Cropbox
+ * @extends Roo.BoxComponent
+ * Panel Cropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Number} windowSize default 300
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ *
* @constructor
- * Create a new TabPanel.
- * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
- * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
+ * Create a new Cropbox
+ * @param {Object} config The config object
*/
-Roo.TabPanel = function(container, config){
- /**
- * The container element for this TabPanel.
- * @type Roo.Element
- */
- this.el = Roo.get(container, true);
- if(config){
- if(typeof config == "boolean"){
- this.tabPosition = config ? "bottom" : "top";
- }else{
- Roo.apply(this, config);
- }
- }
- if(this.tabPosition == "bottom"){
- this.bodyEl = Roo.get(this.createBody(this.el.dom));
- this.el.addClass("x-tabs-bottom");
- }
- this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
- this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
- this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
- if(Roo.isIE){
- 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");
- }
- this.items = [];
-
- this.bodyEl.setStyle("position", "relative");
-
- this.active = null;
- this.activateDelegate = this.activate.createDelegate(this);
+ Roo.panel.Cropbox = function(config){
+ Roo.panel.Cropbox.superclass.constructor.call(this, config);
+
this.addEvents({
/**
- * @event tabchange
- * Fires when the active tab changes
- * @param {Roo.TabPanel} this
- * @param {Roo.TabPanelItem} activePanel The new active tab
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.panel.Cropbox} this
*/
- "tabchange": true,
+ "beforeselectfile" : true,
/**
- * @event beforetabchange
- * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
- * @param {Roo.TabPanel} this
- * @param {Object} e Set cancel to true on this object to cancel the tab change
- * @param {Roo.TabPanelItem} tab The tab being changed to
+ * @event initial
+ * Fire after initEvent
+ * @param {Roo.panel.Cropbox} this
*/
- "beforetabchange" : true
+ "initial" : true,
+ /**
+ * @event crop
+ * Fire after initEvent
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} data
+ */
+ "crop" : true,
+ /**
+ * @event prepare
+ * Fire when preparing the file data
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} file
+ */
+ "prepare" : true,
+ /**
+ * @event exception
+ * Fire when get exception
+ * @param {Roo.panel.Cropbox} this
+ * @param {XMLHttpRequest} xhr
+ */
+ "exception" : true,
+ /**
+ * @event beforeloadcanvas
+ * Fire before load the canvas
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} src
+ */
+ "beforeloadcanvas" : true,
+ /**
+ * @event trash
+ * Fire when trash image
+ * @param {Roo.panel.Cropbox} this
+ */
+ "trash" : true,
+ /**
+ * @event download
+ * Fire when download the image
+ * @param {Roo.panel.Cropbox} this
+ */
+ "download" : true,
+ /**
+ * @event footerbuttonclick
+ * Fire when footerbuttonclick
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} type
+ */
+ "footerbuttonclick" : true,
+ /**
+ * @event resize
+ * Fire when resize
+ * @param {Roo.panel.Cropbox} this
+ */
+ "resize" : true,
+ /**
+ * @event rotate
+ * Fire when rotate the image
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} pos
+ */
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true,
+ /**
+ * @event loadcanvas
+ * Fire after load the canvas
+ * @param {Roo.panel.Cropbox}
+ * @param {Object} imgEl
+ */
+ "loadcanvas" : true
});
+
+ this.buttons = this.buttons || Roo.panel.Cropbox.footer.STANDARD;
+};
- Roo.EventManager.onWindowResize(this.onResize, this);
- this.cpad = this.el.getPadding("lr");
- this.hiddenCount = 0;
-
+Roo.extend(Roo.panel.Cropbox, Roo.Component, {
+
+ emptyText : 'Click to upload image',
+ rotateNotify : 'Image is too small to rotate',
+ errorTimeout : 3000,
+ scale : 0,
+ baseScale : 1,
+ rotate : 0,
+ dragable : false,
+ pinching : false,
+ mouseX : 0,
+ mouseY : 0,
+ cropData : false,
+ minWidth : 300,
+ minHeight : 300,
+ outputMaxWidth : 1200,
+ windowSize : 300,
+ file : false,
+ exif : {},
+ baseRotate : 1,
+ cropType : 'image/jpeg',
+ buttons : false,
+ canvasLoaded : false,
+ isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ tag : 'div',
+ cls : 'roo-upload-cropbox',
+ cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-body',
+ style : 'cursor:pointer',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-preview'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-thumb'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-empty-notify',
+ html : this.emptyText
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-error-notify alert alert-danger',
+ html : this.rotateNotify
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-footer',
+ cn : {
+ tag : 'div',
+ cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
+ cn : []
+ }
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.panel.Cropbox.superclass.onRender.call(this, ct, position);
- // 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%');
+ if(this.el){
+ if (this.el.attr('xtype')) {
+ this.el.attr('xtypex', this.el.attr('xtype'));
+ this.el.dom.removeAttribute('xtype');
+
+ this.initEvents();
+ }
}
+ else {
+ var cfg = Roo.apply({}, this.getAutoCreate());
- }
-
-
-
- Roo.TabPanel.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.TabPanel, Roo.util.Observable, {
- /*
- *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
- */
- tabPosition : "top",
- /*
- *@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)
- */
- minTabWidth : 40,
- /*
- *@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)
- */
- preferredTabWidth : 175,
- /*
- *@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)
- */
- 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.
- * @param {String} id The id of the div to use <b>or create</b>
- * @param {String} text The text for the tab
- * @param {String} content (optional) Content to put in the TabPanelItem body
- * @param {Boolean} closable (optional) True to create a close icon on the tab
- * @return {Roo.TabPanelItem} The created TabPanelItem
- */
- addTab : function(id, text, content, closable){
- var item = new Roo.TabPanelItem(this, id, text, closable);
- this.addTabItem(item);
- if(content){
- item.setContent(content);
+ cfg.id = this.id || Roo.id();
+
+ if (this.cls) {
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
+ }
+
+ if (this.style) { // fixme needs to support more complex style data.
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
+ }
+
+ this.el = ct.createChild(cfg, position);
+
+ this.initEvents();
+ }
+
+ if (this.buttons.length) {
+
+ Roo.each(this.buttons, function(bb) {
+
+ var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
+
+ btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
+
+ }, this);
+ }
+
+ if(this.loadMask){
+ this.maskEl = this.el;
}
- return item;
},
-
- /**
- * Returns the {@link Roo.TabPanelItem} with the specified id/index
- * @param {String/Number} id The id or index of the TabPanelItem to fetch.
- * @return {Roo.TabPanelItem}
- */
- getTab : function(id){
- return this.items[id];
+
+ initEvents : function()
+ {
+ this.urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+ this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
+ this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
+ this.selectorEl.hide();
+
+ this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
+ this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
+ this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.thumbEl.hide();
+
+ this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
+ this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
+ this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.errorEl.hide();
+
+ this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
+ this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.footerEl.hide();
+
+ this.setThumbBoxSize();
+
+ this.bind();
+
+ this.resize();
+
+ this.fireEvent('initial', this);
},
- /**
- * Hides the {@link Roo.TabPanelItem} with the specified id/index
- * @param {String/Number} id The id or index of the TabPanelItem to hide.
- */
- hideTab : function(id){
- var t = this.items[id];
- if(!t.isHidden()){
- t.setHidden(true);
- this.hiddenCount++;
- this.autoSizeTabs();
+ bind : function()
+ {
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
+ this.bodyEl.on('click', this.beforeSelectFile, this);
+
+ if(Roo.isTouch){
+ this.bodyEl.on('touchstart', this.onTouchStart, this);
+ this.bodyEl.on('touchmove', this.onTouchMove, this);
+ this.bodyEl.on('touchend', this.onTouchEnd, this);
}
- },
-
- /**
- * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
- * @param {String/Number} id The id or index of the TabPanelItem to unhide.
- */
- unhideTab : function(id){
- var t = this.items[id];
- if(t.isHidden()){
- t.setHidden(false);
- this.hiddenCount--;
- this.autoSizeTabs();
+
+ if(!Roo.isTouch){
+ this.bodyEl.on('mousedown', this.onMouseDown, this);
+ this.bodyEl.on('mousemove', this.onMouseMove, this);
+ var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+ this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
}
+
+ this.selectorEl.on('change', this.onFileSelected, this);
},
-
- /**
- * Adds an existing {@link Roo.TabPanelItem}.
- * @param {Roo.TabPanelItem} item The TabPanelItem to add
- */
- addTabItem : function(item){
- this.items[item.id] = item;
- this.items.push(item);
- if(this.resizeTabs){
- item.setWidth(this.currentTabWidth || this.preferredTabWidth);
- this.autoSizeTabs();
- }else{
- item.autoSize();
- }
+
+ reset : function()
+ {
+ this.scale = 0;
+ this.baseScale = 1;
+ this.rotate = 0;
+ this.baseRotate = 1;
+ this.dragable = false;
+ this.pinching = false;
+ this.mouseX = 0;
+ this.mouseY = 0;
+ this.cropData = false;
+ this.notifyEl.dom.innerHTML = this.emptyText;
+
+ // this.selectorEl.dom.value = '';
+
},
-
- /**
- * Removes a {@link Roo.TabPanelItem}.
- * @param {String/Number} id The id or index of the TabPanelItem to remove.
- */
- removeTab : function(id){
- var items = this.items;
- var tab = items[id];
- if(!tab) { return; }
- var index = items.indexOf(tab);
- if(this.active == tab && items.length > 1){
- var newTab = this.getNextAvailable(index);
- if(newTab) {
- newTab.activate();
- }
- }
- this.stripEl.dom.removeChild(tab.pnode.dom);
- if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
- this.bodyEl.dom.removeChild(tab.bodyEl.dom);
+
+ resize : function()
+ {
+ if(this.fireEvent('resize', this) != false){
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
}
- items.splice(index, 1);
- delete this.items[tab.id];
- tab.fireEvent("close", tab);
- tab.purgeListeners();
- this.autoSizeTabs();
},
-
- getNextAvailable : function(start){
- var items = this.items;
- var index = start;
- // look for a next tab that will slide over to
- // replace the one being removed
- while(index < items.length){
- var item = items[++index];
- if(item && !item.isHidden()){
- return item;
- }
- }
- // if one isn't found select the previous tab (on the left)
- index = start;
- while(index >= 0){
- var item = items[--index];
- if(item && !item.isHidden()){
- return item;
- }
+
+ onFooterButtonClick : function(e, el, o, type)
+ {
+ switch (type) {
+ case 'rotate-left' :
+ this.onRotateLeft(e);
+ break;
+ case 'rotate-right' :
+ this.onRotateRight(e);
+ break;
+ case 'picture' :
+ this.beforeSelectFile(e);
+ break;
+ case 'trash' :
+ this.trash(e);
+ break;
+ case 'crop' :
+ this.crop(e);
+ break;
+ case 'download' :
+ this.download(e);
+ break;
+ case 'center' :
+ this.center(e);
+ break;
+ default :
+ break;
}
- return null;
+
+ this.fireEvent('footerbuttonclick', this, type);
},
-
- /**
- * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
- * @param {String/Number} id The id or index of the TabPanelItem to disable.
- */
- disableTab : function(id){
- var tab = this.items[id];
- if(tab && this.active != tab){
- tab.disable();
+
+ beforeSelectFile : function(e)
+ {
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
}
},
-
- /**
- * Enables a {@link Roo.TabPanelItem} that is disabled.
- * @param {String/Number} id The id or index of the TabPanelItem to enable.
- */
- enableTab : function(id){
- var tab = this.items[id];
- tab.enable();
- },
-
- /**
- * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
- * @param {String/Number} id The id or index of the TabPanelItem to activate.
- * @return {Roo.TabPanelItem} The TabPanelItem.
- */
- activate : function(id){
- var tab = this.items[id];
- if(!tab){
- return null;
- }
- if(tab == this.active || tab.disabled){
- return tab;
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
}
- var e = {};
- this.fireEvent("beforetabchange", this, e, tab);
- if(e.cancel !== true && !tab.disabled){
- if(this.active){
- this.active.hide();
- }
- this.active = this.items[id];
- this.active.show();
- this.fireEvent("tabchange", this, this.active);
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
}
- return tab;
- },
-
- /**
- * Gets the active {@link Roo.TabPanelItem}.
- * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
- */
- getActiveTab : function(){
- return this.active;
- },
-
- /**
- * Updates the tab body element to fit the height of the container element
- * for overflow scrolling
- * @param {Number} targetHeight (optional) Override the starting height from the elements height
- */
- syncHeight : function(targetHeight){
- var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
- var bm = this.bodyEl.getMargins();
- var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
- this.bodyEl.setHeight(newHeight);
- return newHeight;
+
},
-
- onResize : function(){
- if(this.monitorResize){
- this.autoSizeTabs();
- }
+
+ trash : function(e)
+ {
+ this.fireEvent('trash', this);
},
-
- /**
- * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
- */
- beginUpdate : function(){
- this.updating = true;
+
+ download : function(e)
+ {
+ this.fireEvent('download', this);
},
- /**
- * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
- */
- endUpdate : function(){
- this.updating = false;
- this.autoSizeTabs();
+ center : function(e)
+ {
+ this.setCanvasPosition();
},
-
- /**
- * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
- */
- autoSizeTabs : function(){
- var count = this.items.length;
- var vcount = count - this.hiddenCount;
- if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
- return;
- }
- var w = Math.max(this.el.getWidth() - this.cpad, 10);
- var availWidth = Math.floor(w / vcount);
- var b = this.stripBody;
- if(b.getWidth() > w){
- var tabs = this.items;
- this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
- if(availWidth < this.minTabWidth){
- /*if(!this.sleft){ // incomplete scrolling code
- this.createScrollButtons();
- }
- this.showScroll();
- this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
- }
- }else{
- if(this.currentTabWidth < this.preferredTabWidth){
- this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
- }
+
+ loadCanvas : function(src)
+ {
+ if(this.fireEvent('beforeloadcanvas', this, src) != false){
+
+ this.reset();
+
+ this.imageEl = document.createElement('img');
+
+ var _this = this;
+
+ this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
+
+ this.imageEl.src = src;
}
},
+
+ onLoadCanvas : function()
+ {
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
- /**
- * Returns the number of tabs in this TabPanel.
- * @return {Number}
- */
- getCount : function(){
- return this.items.length;
- },
-
- /**
- * Resizes all the tabs to the passed width
- * @param {Number} The new width
- */
- setTabWidth : function(width){
- this.currentTabWidth = width;
- for(var i = 0, len = this.items.length; i < len; i++) {
- if(!this.items[i].isHidden()) {
- this.items[i].setWidth(width);
+ if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
+
+ this.bodyEl.un('click', this.beforeSelectFile, this);
+
+ this.notifyEl.hide();
+ this.thumbEl.show();
+ this.footerEl.show();
+
+ this.baseRotateLevel();
+
+ if(this.isDocument){
+ this.setThumbBoxSize();
}
+
+ this.setThumbBoxPosition();
+
+ this.baseScaleLevel();
+
+ this.draw();
+
+ this.resize();
+
+ this.canvasLoaded = true;
+
}
- },
-
- /**
- * Destroys this TabPanel
- * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
- */
- destroy : function(removeEl){
- Roo.EventManager.removeResizeListener(this.onResize, this);
- for(var i = 0, len = this.items.length; i < len; i++){
- this.items[i].purgeListeners();
+
+ if(this.loadMask){
+ this.maskEl.unmask();
}
- if(removeEl === true){
- this.el.update("");
- this.el.remove();
+
+ },
+
+ setCanvasPosition : function(center = true)
+ {
+ if(!this.canvasEl){
+ return;
}
- }
-});
-/**
- * @class Roo.TabPanelItem
- * @extends Roo.util.Observable
- * Represents an individual item (tab plus body) in a TabPanel.
- * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @param {String} id The id of this TabPanelItem
- * @param {String} text The text for the tab of this TabPanelItem
- * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
- */
-Roo.TabPanelItem = function(tabPanel, id, text, closable){
- /**
- * The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @type Roo.TabPanel
- */
- this.tabPanel = tabPanel;
- /**
- * The id for this TabPanelItem
- * @type String
- */
- this.id = id;
- /** @private */
- this.disabled = false;
- /** @private */
- this.text = text;
- /** @private */
- this.loaded = false;
- this.closable = closable;
+ var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var newCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
- /**
- * The body element for this TabPanelItem.
- * @type Roo.Element
- */
- this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
- this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
- this.bodyEl.setStyle("display", "block");
- this.bodyEl.setStyle("zoom", "1");
- this.hideAction();
+ if(center) {
+ this.previewEl.setLeft(newCenterLeft);
+ this.previewEl.setTop(newCenterTop);
- var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
- /** @private */
- this.el = Roo.get(els.el, true);
- this.inner = Roo.get(els.inner, true);
- this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
- this.pnode = Roo.get(els.el.parentNode, true);
- this.el.on("mousedown", this.onTabMouseDown, this);
- this.el.on("click", this.onTabClick, this);
- /** @private */
- if(closable){
- var c = Roo.get(els.close, true);
- c.dom.title = this.closeText;
- c.addClassOnOver("close-over");
- c.on("click", this.closeClick, this);
- }
+ return;
+ }
+
+ var oldScaleLevel = this.baseScale * Math.pow(1.02, this.startScale);
+ var oldCanvasWidth = Math.floor(this.imageEl.OriginWidth * oldScaleLevel);
+ var oldCanvasHeight = Math.floor(this.imageEl.OriginHeight * oldScaleLevel);
- this.addEvents({
- /**
- * @event activate
- * Fires when this tab becomes the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "activate": true,
- /**
- * @event beforeclose
- * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
- * @param {Roo.TabPanelItem} this
- * @param {Object} e Set cancel to true on this object to cancel the close.
- */
- "beforeclose": true,
- /**
- * @event close
- * Fires when this tab is closed.
- * @param {Roo.TabPanelItem} this
- */
- "close": true,
- /**
- * @event deactivate
- * Fires when this tab is no longer the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "deactivate" : true
- });
- this.hidden = false;
+ var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - oldCanvasWidth) / 2);
+ var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - oldCanvasHeight) / 2);
- Roo.TabPanelItem.superclass.constructor.call(this);
-};
+ var leftDiff = newCenterLeft - oldCenterLeft;
+ var topDiff = newCenterTop - oldCenterTop;
-Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
- purgeListeners : function(){
- Roo.util.Observable.prototype.purgeListeners.call(this);
- this.el.removeAllListeners();
+ var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+ var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+
+ this.previewEl.setLeft(newPreviewLeft);
+ this.previewEl.setTop(newPreviewTop);
+
},
- /**
- * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
- */
- show : function(){
- this.pnode.addClass("on");
- this.showAction();
- if(Roo.isOpera){
- this.tabPanel.stripWrap.repaint();
+
+ onMouseDown : function(e)
+ {
+ e.stopEvent();
+
+ this.dragable = true;
+ this.pinching = false;
+
+ if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
+ this.dragable = false;
+ return;
}
- this.fireEvent("activate", this.tabPanel, this);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
},
+
+ onMouseMove : function(e)
+ {
+ e.stopEvent();
+
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ if (!this.dragable){
+ return;
+ }
- /**
- * Returns true if this tab is the active tab.
- * @return {Boolean}
- */
- isActive : function(){
- return this.tabPanel.getActiveTab() == this;
- },
+ var maxPaddingLeft = this.canvasEl.width / 0.9 * 0.05;
+ var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
- /**
- * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
- */
- hide : function(){
- this.pnode.removeClass("on");
- this.hideAction();
- this.fireEvent("deactivate", this.tabPanel, this);
- },
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+ maxPaddingLeft = (this.canvasEl.height * this.minWidth / this.minHeight - this.canvasEl.width) / 2 + maxPaddingLeft;
+ }
- hideAction : function(){
- this.bodyEl.hide();
- this.bodyEl.setStyle("position", "absolute");
- this.bodyEl.setLeft("-20000px");
- this.bodyEl.setTop("-20000px");
- },
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+ maxPaddingTop = (this.canvasEl.width * this.minHeight / this.minWidth - this.canvasEl.height) / 2 + maxPaddingTop;
+ }
+
+ var minX = Math.ceil(this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - this.canvasEl.width - maxPaddingLeft);
+ var minY = Math.ceil(this.thumbEl.getTop(true) + this.thumbEl.getHeight() - this.canvasEl.height - maxPaddingTop);
+
+ var maxX = Math.ceil(this.thumbEl.getLeft(true) + maxPaddingLeft);
+ var maxY = Math.ceil(this.thumbEl.getTop(true) + maxPaddingTop);
- showAction : function(){
- this.bodyEl.setStyle("position", "relative");
- this.bodyEl.setTop("");
- this.bodyEl.setLeft("");
- this.bodyEl.show();
- },
+ if(minX > maxX) {
+ var tempX = minX;
+ minX = maxX;
+ maxX = tempX;
+ }
- /**
- * Set the tooltip for the tab.
- * @param {String} tooltip The tab's tooltip
- */
- setTooltip : function(text){
- if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
- this.textEl.dom.qtip = text;
- this.textEl.dom.removeAttribute('title');
- }else{
- this.textEl.dom.title = text;
+ if(minY > maxY) {
+ var tempY = minY;
+ minY = maxY;
+ maxY = tempY;
}
- },
- onTabClick : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
- },
+ var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
+ x = x - this.mouseX;
+ y = y - this.mouseY;
- onTabMouseDown : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
+ var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+ var bgY = Math.ceil(y + this.previewEl.getTop(true));
+
+ bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
+ bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+
+ this.previewEl.setLeft(bgX);
+ this.previewEl.setTop(bgY);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
},
-
- getWidth : function(){
- return this.inner.getWidth();
+
+ onMouseUp : function(e)
+ {
+ e.stopEvent();
+
+ this.dragable = false;
},
+
+ onMouseWheel : function(e)
+ {
+ e.stopEvent();
+
+ this.startScale = this.scale;
+ this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1);
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
- setWidth : function(width){
- var iwidth = width - this.pnode.getPadding("lr");
- this.inner.setWidth(iwidth);
- this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
- this.pnode.setWidth(width);
- },
-
- /**
- * Show or hide the tab
- * @param {Boolean} hidden True to hide or false to show.
- */
- setHidden : function(hidden){
- this.hidden = hidden;
- this.pnode.setStyle("display", hidden ? "none" : "");
+
+ this.draw();
+
+ return;
},
+
+ zoomable : function()
+ {
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ if(this.minWidth < this.minHeight){
+ minScale = this.thumbEl.getHeight() / this.minHeight;
+ }
+
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
+
+ var maxWidth = this.imageEl.OriginWidth;
+ var maxHeight = this.imageEl.OriginHeight;
- /**
- * Returns true if this tab is "hidden"
- * @return {Boolean}
- */
- isHidden : function(){
- return this.hidden;
- },
- /**
- * Returns the text for this tab
- * @return {String}
- */
- getText : function(){
- return this.text;
- },
+ var newCanvasWidth = Math.floor(this.imageEl.OriginWidth * this.getScaleLevel());
+ var newCanvasHeight = Math.floor(this.imageEl.OriginHeight * this.getScaleLevel());
- autoSize : function(){
- //this.el.beginMeasure();
- this.textEl.setWidth(1);
- /*
- * #2804 [new] Tabs in Roojs
- * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
- */
- this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
- //this.el.endMeasure();
- },
+ var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
- /**
- * Sets the text for the tab (Note: this also sets the tooltip text)
- * @param {String} text The tab's text and tooltip
- */
- setText : function(text){
- this.text = text;
- this.textEl.update(text);
- this.setTooltip(text);
- if(!this.tabPanel.resizeTabs){
- this.autoSize();
- }
- },
- /**
- * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
- */
- activate : function(){
- this.tabPanel.activate(this.id);
- },
+ var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - newCanvasWidth) / 2);
+ var newCenterTop = Math.ceil((this.bodyEl.getHeight() - newCanvasHeight) / 2);
- /**
- * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
- */
- disable : function(){
- if(this.tabPanel.active != this){
- this.disabled = true;
- this.pnode.addClass("disabled");
- }
- },
+ var leftDiff = newCenterLeft - oldCenterLeft;
+ var topDiff = newCenterTop - oldCenterTop;
- /**
- * Enables this TabPanelItem if it was previously disabled.
- */
- enable : function(){
- this.disabled = false;
- this.pnode.removeClass("disabled");
- },
+ var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+ var newPreviewTop = this.previewEl.getTop(true) + topDiff;
- /**
- * Sets the content for this TabPanelItem.
- * @param {String} content The content
- * @param {Boolean} loadScripts true to look for and load scripts
- */
- setContent : function(content, loadScripts){
- this.bodyEl.update(content, loadScripts);
- },
+ var paddingLeft = newPreviewLeft - this.thumbEl.getLeft(true);
+ var paddingTop = newPreviewTop - this.thumbEl.getTop(true);
- /**
- * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
- * @return {Roo.UpdateManager} The UpdateManager
- */
- getUpdateManager : function(){
- return this.bodyEl.getUpdateManager();
- },
+ var paddingRight = this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - newCanvasWidth - newPreviewLeft;
+ var paddingBottom = this.thumbEl.getTop(true) + this.thumbEl.getHeight() - newCanvasHeight - newPreviewTop;
- /**
- * Set a URL to be used to load the content for this TabPanelItem.
- * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
- * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
- * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
- * @return {Roo.UpdateManager} The UpdateManager
- */
- setUrl : function(url, params, loadOnce){
- if(this.refreshDelegate){
- this.un('activate', this.refreshDelegate);
- }
- this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
- this.on("activate", this.refreshDelegate);
- return this.bodyEl.getUpdateManager();
- },
+ var maxPaddingLeft = newCanvasWidth / 0.9 * 0.05;
+ var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
- /** @private */
- _handleRefresh : function(url, params, loadOnce){
- if(!loadOnce || !this.loaded){
- var updater = this.bodyEl.getUpdateManager();
- updater.update(url, params, this._setLoaded.createDelegate(this));
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+ maxPaddingLeft = (newCanvasHeight * this.minWidth / this.minHeight - newCanvasWidth) / 2 + maxPaddingLeft;
}
- },
- /**
- * Forces a content refresh from the URL specified in the {@link #setUrl} method.
- * Will fail silently if the setUrl method has not been called.
- * This does not activate the panel, just updates its content.
- */
- refresh : function(){
- if(this.refreshDelegate){
- this.loaded = false;
- this.refreshDelegate();
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+ maxPaddingTop = (newCanvasWidth * this.minHeight / this.minWidth - newCanvasHeight) / 2 + maxPaddingTop;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minWidth && height < this.minHeight)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minHeight && height < this.minWidth)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ // for zoom out
+ paddingLeft > maxPaddingLeft ||
+ paddingRight > maxPaddingLeft ||
+ paddingTop > maxPaddingTop ||
+ paddingBottom > maxPaddingTop ||
+ // for zoom in
+ width > maxWidth ||
+ height > maxHeight
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width < this.minHeight ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minWidth ||
+ height > this.imageEl.OriginHeight
+ )
+ ){
+ return false;
}
+
+ return true;
+
},
+
+ onRotateLeft : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
+
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
- /** @private */
- _setLoaded : function(){
- this.loaded = true;
- },
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
+ return false;
+ }
+
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
- /** @private */
- closeClick : function(e){
- var o = {};
- e.stopEvent();
- this.fireEvent("beforeclose", this, o);
- if(o.cancel !== true){
- this.tabPanel.removeTab(this.id);
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
}
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'left');
+
},
- /**
- * The text displayed in the tooltip for the close icon.
- * @type String
- */
- closeText : "Close this tab"
-});
+
+ onRotateRight : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
+
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-/** @private */
-Roo.TabPanel.prototype.createStrip = function(container){
- var strip = document.createElement("div");
- strip.className = "x-tabs-wrap";
- container.appendChild(strip);
- return strip;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripList = function(strip){
- // div wrapper for retard IE
- // 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 */
-Roo.TabPanel.prototype.createBody = function(container){
- var body = document.createElement("div");
- Roo.id(body, "tab-body");
- Roo.fly(body).addClass("x-tabs-body");
- container.appendChild(body);
- return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
- var body = Roo.getDom(id);
- if(!body){
- body = document.createElement("div");
- body.id = id;
- }
- Roo.fly(body).addClass("x-tabs-item-body");
- bodyEl.insertBefore(body, bodyEl.firstChild);
- return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
- var td = document.createElement("td");
- stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
- //stripEl.appendChild(td);
- if(closable){
- td.className = "x-tabs-closable";
- if(!this.closeTpl){
- this.closeTpl = new Roo.Template(
- '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
- '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
- '<div unselectable="on" class="close-icon"> </div></em></span></a>'
- );
- }
- var el = this.closeTpl.overwrite(td, {"text": text});
- var close = el.getElementsByTagName("div")[0];
- var inner = el.getElementsByTagName("em")[0];
- return {"el": el, "close": close, "inner": inner};
- } else {
- if(!this.tabTpl){
- this.tabTpl = new Roo.Template(
- '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
- '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
- );
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
+ return false;
}
- var el = this.tabTpl.overwrite(td, {"text": text});
- var inner = el.getElementsByTagName("em")[0];
- return {"el": el, "inner": inner};
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-/**
- * @class Roo.Button
- * @extends Roo.util.Observable
- * Simple Button class
- * @cfg {String} text The button text
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
- * @cfg {Object} scope The scope of the handler
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
- * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
- * @cfg {Boolean} hidden True to start hidden (defaults to false)
- * @cfg {Boolean} disabled True to start disabled (defaults to false)
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
- applies if enableToggle = true)
- * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
- an {@link Roo.util.ClickRepeater} config object (defaults to false).
- * @constructor
- * Create a new button
- * @param {Object} config The config object
- */
-Roo.Button = function(renderTo, config)
-{
- if (!config) {
- config = renderTo;
- renderTo = config.renderTo || false;
- }
-
- Roo.apply(this, config);
- this.addEvents({
- /**
- * @event click
- * Fires when this button is clicked
- * @param {Button} this
- * @param {EventObject} e The click event
- */
- "click" : true,
- /**
- * @event toggle
- * Fires when the "pressed" state of this button changes (only if enableToggle = true)
- * @param {Button} this
- * @param {Boolean} pressed
- */
- "toggle" : true,
- /**
- * @event mouseover
- * Fires when the mouse hovers over the button
- * @param {Button} this
- * @param {Event} e The event object
- */
- 'mouseover' : true,
- /**
- * @event mouseout
- * Fires when the mouse exits the button
- * @param {Button} this
- * @param {Event} e The event object
- */
- 'mouseout': true,
- /**
- * @event render
- * Fires when the button is rendered
- * @param {Button} this
- */
- 'render': true
- });
- if(this.menu){
- this.menu = Roo.menu.MenuMgr.get(this.menu);
- }
- // register listeners first!! - so render can be captured..
- Roo.util.Observable.call(this);
- if(renderTo){
- this.render(renderTo);
- }
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'right');
+ },
-
-};
-
-Roo.extend(Roo.Button, Roo.util.Observable, {
- /**
- *
- */
+ onRotateFail : function()
+ {
+ this.errorEl.show(true);
+
+ var _this = this;
+
+ (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
+ },
- /**
- * Read-only. True if this button is hidden
- * @type Boolean
- */
- hidden : false,
- /**
- * Read-only. True if this button is disabled
- * @type Boolean
- */
- disabled : false,
- /**
- * Read-only. True if this button is pressed (only if enableToggle = true)
- * @type Boolean
- */
- pressed : false,
+ draw : function()
+ {
+ this.previewEl.dom.innerHTML = '';
+
+ var canvasEl = document.createElement("canvas");
+
+ var contextEl = canvasEl.getContext("2d");
+
+ canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+ var center = this.imageEl.OriginWidth / 2;
+
+ if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+ canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+ center = this.imageEl.OriginHeight / 2;
+ }
+
+ contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
+
+ contextEl.translate(center, center);
+ contextEl.rotate(this.rotate * Math.PI / 180);
- /**
- * @cfg {Number} tabIndex
- * The DOM tabIndex for this button (defaults to undefined)
- */
- tabIndex : undefined,
+ contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ this.canvasEl = document.createElement("canvas");
+
+ this.contextEl = this.canvasEl.getContext("2d");
+
+ switch (this.rotate) {
+ case 0 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 90 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 180 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 270 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ default :
+ break;
+ }
+
+ this.previewEl.appendChild(this.canvasEl);
+
+ this.setCanvasPosition(false);
+ },
+
+ crop : function()
+ {
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ var imageCanvas = document.createElement("canvas");
+
+ var imageContext = imageCanvas.getContext("2d");
+
+ imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+ imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+
+ var center = imageCanvas.width / 2;
+
+ imageContext.translate(center, center);
+
+ imageContext.rotate(this.rotate * Math.PI / 180);
+
+ imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ var canvas = document.createElement("canvas");
+
+ var context = canvas.getContext("2d");
- /**
- * @cfg {Boolean} enableToggle
- * True to enable pressed/not pressed toggling (defaults to false)
- */
- enableToggle: false,
- /**
- * @cfg {Roo.menu.Menu} menu
- * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
- */
- menu : undefined,
- /**
- * @cfg {String} menuAlign
- * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
- */
- menuAlign : "tl-bl?",
+ canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+
+ canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
- /**
- * @cfg {String} iconCls
- * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
- */
- iconCls : undefined,
- /**
- * @cfg {String} type
- * The button's type, corresponding to the DOM input element type attribute. Either "submit," "reset" or "button" (default).
- */
- type : 'button',
+ switch (this.rotate) {
+ case 0 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+ var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
- // private
- menuClassTarget: 'tr',
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
- /**
- * @cfg {String} clickEvent
- * The type of event to map to the button's event handler (defaults to 'click')
- */
- clickEvent : 'click',
+ if(canvas.width > this.outputMaxWidth) {
+ var scale = this.outputMaxWidth / canvas.width;
+ canvas.width = canvas.width * scale;
+ canvas.height = canvas.height * scale;
+ context.scale(scale, scale);
+ }
- /**
- * @cfg {Boolean} handleMouseEvents
- * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
- */
- handleMouseEvents : true,
+ context.fillStyle = 'white';
+ context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel());
- /**
- * @cfg {String} tooltipType
- * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
- */
- tooltipType : 'qtip',
- /**
- * @cfg {String} cls
- * A CSS class to apply to the button's main element.
- */
-
- /**
- * @cfg {Roo.Template} template (Optional)
- * An {@link Roo.Template} with which to create the Button's main element. This Template must
- * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
- * require code modifications if required elements (e.g. a button) aren't present.
- */
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 90 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
- // private
- render : function(renderTo){
- var btn;
- if(this.hideParent){
- this.parentEl = Roo.get(renderTo);
- }
- if(!this.dhconfig){
- if(!this.template){
- if(!Roo.Button.buttonTemplate){
- // hideous table template
- Roo.Button.buttonTemplate = new Roo.Template(
- '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
- '<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
- "</tr></tbody></table>");
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 180 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
}
- this.template = Roo.Button.buttonTemplate;
- }
- btn = this.template.append(renderTo, [this.text || ' ', this.type], true);
- var btnEl = btn.child("button:first");
- btnEl.on('focus', this.onFocus, this);
- btnEl.on('blur', this.onBlur, this);
- if(this.cls){
- btn.addClass(this.cls);
- }
- if(this.icon){
- btnEl.setStyle('background-image', 'url(' +this.icon +')');
- }
- if(this.iconCls){
- btnEl.addClass(this.iconCls);
- if(!this.cls){
- btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
}
- }
- if(this.tabIndex !== undefined){
- btnEl.dom.tabIndex = this.tabIndex;
- }
- if(this.tooltip){
- if(typeof this.tooltip == 'object'){
- Roo.QuickTips.tips(Roo.apply({
- target: btnEl.id
- }, this.tooltip));
- } else {
- btnEl.dom[this.tooltipType] = this.tooltip;
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
}
- }
- }else{
- btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
- }
- this.el = btn;
- if(this.id){
- this.el.dom.id = this.el.id = this.id;
- }
- if(this.menu){
- this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
- this.menu.on("show", this.onMenuShow, this);
- this.menu.on("hide", this.onMenuHide, this);
- }
- btn.addClass("x-btn");
- if(Roo.isIE && !Roo.isIE7){
- this.autoWidth.defer(1, this);
- }else{
- this.autoWidth();
- }
- if(this.handleMouseEvents){
- btn.on("mouseover", this.onMouseOver, this);
- btn.on("mouseout", this.onMouseOut, this);
- btn.on("mousedown", this.onMouseDown, this);
- }
- btn.on(this.clickEvent, this.onClick, this);
- //btn.on("mouseup", this.onMouseUp, this);
- if(this.hidden){
- this.hide();
- }
- if(this.disabled){
- this.disable();
- }
- Roo.ButtonToggleMgr.register(this);
- if(this.pressed){
- this.el.addClass("x-btn-pressed");
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 270 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ default :
+ break;
}
- if(this.repeat){
- var repeater = new Roo.util.ClickRepeater(btn,
- typeof this.repeat == "object" ? this.repeat : {}
- );
- repeater.on("click", this.onClick, this);
+
+ this.cropData = canvas.toDataURL(this.cropType);
+
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
}
- this.fireEvent('render', this);
+ return;
},
- /**
- * Returns the button's underlying element
- * @return {Roo.Element} The element
- */
- getEl : function(){
- return this.el;
- },
- /**
- * Destroys this Button and removes any listeners.
- */
- destroy : function(){
- Roo.ButtonToggleMgr.unregister(this);
- this.el.removeAllListeners();
- this.purgeListeners();
- this.el.remove();
- },
-
- // private
- autoWidth : function(){
- if(this.el){
- this.el.setWidth("auto");
- if(Roo.isIE7 && Roo.isStrict){
- var ib = this.el.child('button');
- if(ib && ib.getWidth() > 20){
- ib.clip();
- ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
- }
- }
- if(this.minWidth){
- if(this.hidden){
- this.el.beginMeasure();
- }
- if(this.el.getWidth() < this.minWidth){
- this.el.setWidth(this.minWidth);
- }
- if(this.hidden){
- this.el.endMeasure();
- }
+ setThumbBoxSize : function()
+ {
+ var width, height;
+
+ if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+ width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+ height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+
+ this.minWidth = width;
+ this.minHeight = height;
+
+ if(this.rotate == 90 || this.rotate == 270){
+ this.minWidth = height;
+ this.minHeight = width;
}
}
- },
-
- /**
- * Assigns this button's click handler
- * @param {Function} handler The function to call when the button is clicked
- * @param {Object} scope (optional) Scope for the function passed in
- */
- setHandler : function(handler, scope){
- this.handler = handler;
- this.scope = scope;
- },
-
- /**
- * Sets this button's text
- * @param {String} text The button text
- */
- setText : function(text){
- this.text = text;
- if(this.el){
- this.el.child("td.x-btn-center button.x-btn-text").update(text);
+
+ height = this.windowSize;
+ width = Math.ceil(this.minWidth * height / this.minHeight);
+
+ if(this.minWidth > this.minHeight){
+ width = this.windowSize;
+ height = Math.ceil(this.minHeight * width / this.minWidth);
}
- this.autoWidth();
- },
-
- /**
- * Gets the text for this button
- * @return {String} The button text
- */
- getText : function(){
- return this.text;
+
+ this.thumbEl.setStyle({
+ width : width + 'px',
+ height : height + 'px'
+ });
+
+ return;
+
},
- /**
- * Show this button
- */
- show: function(){
- this.hidden = false;
- if(this.el){
- this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
- }
+ setThumbBoxPosition : function()
+ {
+ var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
+ var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
+
+ this.thumbEl.setLeft(x);
+ this.thumbEl.setTop(y);
+
},
- /**
- * Hide this button
- */
- hide: function(){
- this.hidden = true;
- if(this.el){
- this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
+ baseRotateLevel : function()
+ {
+ this.baseRotate = 1;
+
+ if(
+ typeof(this.exif) != 'undefined' &&
+ typeof(this.exif[Roo.panel.Cropbox['tags']['Orientation']]) != 'undefined' &&
+ [1, 3, 6, 8].indexOf(this.exif[Roo.panel.Cropbox['tags']['Orientation']]) != -1
+ ){
+ this.baseRotate = this.exif[Roo.panel.Cropbox['tags']['Orientation']];
}
+
+ this.rotate = Roo.panel.Cropbox['Orientation'][this.baseRotate];
+
},
- /**
- * Convenience function for boolean show/hide
- * @param {Boolean} visible True to show, false to hide
- */
- setVisible: function(visible){
- if(visible) {
- this.show();
- }else{
- this.hide();
- }
- },
- /**
- * Similar to toggle, but does not trigger event.
- * @param {Boolean} state [required] Force a particular state
- */
- setPressed : function(state)
- {
- if(state != this.pressed){
- if(state){
- this.el.addClass("x-btn-pressed");
- this.pressed = true;
- }else{
- this.el.removeClass("x-btn-pressed");
- this.pressed = false;
+ baseScaleLevel : function()
+ {
+ var width, height;
+
+ if(this.isDocument){
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginHeight;
+ }
+
+ return;
+ }
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
}
+
+ return;
}
- },
-
- /**
- * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
- * @param {Boolean} state (optional) Force a particular state
- */
- toggle : function(state){
- state = state === undefined ? !this.pressed : state;
- if(state != this.pressed){
- if(state){
- this.el.addClass("x-btn-pressed");
- this.pressed = true;
- this.fireEvent("toggle", this, true);
- }else{
- this.el.removeClass("x-btn-pressed");
- this.pressed = false;
- this.fireEvent("toggle", this, false);
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
}
- if(this.toggleHandler){
- this.toggleHandler.call(this.scope || this, this, state);
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+ }
+
+ return;
+ }
+
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
}
+
+ }
+
+ if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
+ this.baseScale = width / this.minWidth;
}
+
+ return;
},
-
-
- /**
- * Focus the button
- */
- focus : function(){
- this.el.child('button:first').focus();
+ getScaleLevel : function()
+ {
+ return this.baseScale * Math.pow(1.02, this.scale);
},
- /**
- * Disable this button
- */
- disable : function(){
- if(this.el){
- this.el.addClass("x-btn-disabled");
+ onTouchStart : function(e)
+ {
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
}
- this.disabled = true;
- },
-
- /**
- * Enable this button
- */
- enable : function(){
- if(this.el){
- this.el.removeClass("x-btn-disabled");
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
}
- this.disabled = false;
- },
-
- /**
- * Convenience function for boolean enable/disable
- * @param {Boolean} enabled True to enable, false to disable
- */
- setDisabled : function(v){
- this[v !== true ? "enable" : "disable"]();
- },
-
- // private
- onClick : function(e)
- {
- if(e){
- e.preventDefault();
+
+ if(touches.length == 1){
+ this.onMouseDown(e);
+ return;
}
- if(e.button != 0){
+
+ if(touches.length != 2){
return;
}
- if(!this.disabled){
- if(this.enableToggle){
- this.toggle();
- }
- if(this.menu && !this.menu.isVisible()){
- this.menu.show(this.el, this.menuAlign);
- }
- this.fireEvent("click", this, e);
- if(this.handler){
- this.el.removeClass("x-btn-over");
- this.handler.call(this.scope || this, this, e);
- }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
}
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.startDistance = Math.sqrt(x + y);
+
+ this.startScale = this.scale;
+
+ this.pinching = true;
+ this.dragable = false;
+
},
- // private
- onMouseOver : function(e){
- if(!this.disabled){
- this.el.addClass("x-btn-over");
- this.fireEvent('mouseover', this, e);
+
+ onTouchMove : function(e)
+ {
+ if(!this.pinching && !this.dragable){
+ return;
}
- },
- // private
- onMouseOut : function(e){
- if(!e.within(this.el, true)){
- this.el.removeClass("x-btn-over");
- this.fireEvent('mouseout', this, e);
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
}
- },
- // private
- onFocus : function(e){
- if(!this.disabled){
- this.el.addClass("x-btn-focus");
+
+ if(this.dragable){
+ this.onMouseMove(e);
+ return;
}
- },
- // private
- onBlur : function(e){
- this.el.removeClass("x-btn-focus");
- },
- // private
- onMouseDown : function(e){
- if(!this.disabled && e.button == 0){
- this.el.addClass("x-btn-click");
- Roo.get(document).on('mouseup', this.onMouseUp, this);
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
}
- },
- // private
- onMouseUp : function(e){
- if(e.button == 0){
- this.el.removeClass("x-btn-click");
- Roo.get(document).un('mouseup', this.onMouseUp, this);
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.endDistance = Math.sqrt(x + y);
+
+ this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
}
+
+ this.draw();
+
},
- // private
- onMenuShow : function(e){
- this.el.addClass("x-btn-menu-active");
+
+ onTouchEnd : function(e)
+ {
+ this.pinching = false;
+ this.dragable = false;
+
},
- // private
- onMenuHide : function(e){
- this.el.removeClass("x-btn-menu-active");
- }
-});
-
-// Private utility class used by Button
-Roo.ButtonToggleMgr = function(){
- var groups = {};
-
- function toggleGroup(btn, state){
- if(state){
- var g = groups[btn.toggleGroup];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != btn){
- g[i].toggle(false);
- }
- }
- }
- }
-
- return {
- register : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(!g){
- g = groups[btn.toggleGroup] = [];
- }
- g.push(btn);
- btn.on("toggle", toggleGroup);
- },
-
- unregister : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(g){
- g.remove(btn);
- btn.un("toggle", toggleGroup);
- }
- }
- };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.SplitButton
- * @extends Roo.Button
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
- * click event of the button. Typically this would be used to display a dropdown menu that provides additional
- * options to the primary button action, but any custom handler can provide the arrowclick implementation.
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
- * @cfg {String} arrowTooltip The title attribute of the arrow
- * @constructor
- * Create a new menu button
- * @param {String/HTMLElement/Element} renderTo The element to append the button to
- * @param {Object} config The config object
- */
-Roo.SplitButton = function(renderTo, config){
- Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
- /**
- * @event arrowclick
- * Fires when this button's arrow is clicked
- * @param {SplitButton} this
- * @param {EventObject} e The click event
- */
- this.addEvents({"arrowclick":true});
-};
-
-Roo.extend(Roo.SplitButton, Roo.Button, {
- render : function(renderTo){
- // this is one sweet looking template!
- var tpl = new Roo.Template(
- '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
- '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
- '<tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
- "</tbody></table></td><td>",
- '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
- '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button"> </button></td><td class="x-btn-right"><i> </i></td></tr>',
- "</tbody></table></td></tr></table>"
- );
- var btn = tpl.append(renderTo, [this.text, this.type], true);
- var btnEl = btn.child("button");
- if(this.cls){
- btn.addClass(this.cls);
- }
- if(this.icon){
- btnEl.setStyle('background-image', 'url(' +this.icon +')');
+
+ process : function(file, crop)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
}
- if(this.iconCls){
- btnEl.addClass(this.iconCls);
- if(!this.cls){
- btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
}
}
- this.el = btn;
- if(this.handleMouseEvents){
- btn.on("mouseover", this.onMouseOver, this);
- btn.on("mouseout", this.onMouseOut, this);
- btn.on("mousedown", this.onMouseDown, this);
- btn.on("mouseup", this.onMouseUp, this);
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
}
- btn.on(this.clickEvent, this.onClick, this);
- if(this.tooltip){
- if(typeof this.tooltip == 'object'){
- Roo.QuickTips.tips(Roo.apply({
- target: btnEl.id
- }, this.tooltip));
- } else {
- btnEl.dom[this.tooltipType] = this.tooltip;
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ var blobBin = atob(crop.split(',')[1]);
+ var array = [];
+ for(var i = 0; i < blobBin.length; i++) {
+ array.push(blobBin.charCodeAt(i));
}
+ var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
+ formData.append(this.paramName, croppedFile, file.name);
}
- if(this.arrowTooltip){
- btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
}
- if(this.hidden){
- this.hide();
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
}
- if(this.disabled){
- this.disable();
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
}
- if(this.pressed){
- this.el.addClass("x-btn-pressed");
+
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
}
- if(Roo.isIE && !Roo.isIE7){
- this.autoWidth.defer(1, this);
- }else{
- this.autoWidth();
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
}
- if(this.menu){
- this.menu.on("show", this.onMenuShow, this);
- this.menu.on("hide", this.onMenuHide, this);
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
}
- this.fireEvent('render', this);
- },
-
- // private
- autoWidth : function(){
- if(this.el){
- var tbl = this.el.child("table:first");
- var tbl2 = this.el.child("table:last");
- this.el.setWidth("auto");
- tbl.setWidth("auto");
- if(Roo.isIE7 && Roo.isStrict){
- var ib = this.el.child('button:first');
- if(ib && ib.getWidth() > 20){
- ib.clip();
- ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
- }
- }
- if(this.minWidth){
- if(this.hidden){
- this.el.beginMeasure();
- }
- if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
- tbl.setWidth(this.minWidth-tbl2.getWidth());
- }
- if(this.hidden){
- this.el.endMeasure();
- }
- }
- this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
- }
- },
- /**
- * Sets this button's click handler
- * @param {Function} handler The function to call when the button is clicked
- * @param {Object} scope (optional) Scope for the function passed above
- */
- setHandler : function(handler, scope){
- this.handler = handler;
- this.scope = scope;
- },
-
- /**
- * Sets this button's arrow click handler
- * @param {Function} handler The function to call when the arrow is clicked
- * @param {Object} scope (optional) Scope for the function passed above
- */
- setArrowHandler : function(handler, scope){
- this.arrowHandler = handler;
- this.scope = scope;
+
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
},
- /**
- * Focus the button
- */
- focus : function(){
- if(this.el){
- this.el.child("button:first").focus();
+ prepare : function(file)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
}
- },
-
- // private
- onClick : function(e){
- e.preventDefault();
- if(!this.disabled){
- if(e.getTarget(".x-btn-menu-arrow-wrap")){
- if(this.menu && !this.menu.isVisible()){
- this.menu.show(this.el, this.menuAlign);
- }
- this.fireEvent("arrowclick", this, e);
- if(this.arrowHandler){
- this.arrowHandler.call(this.scope || this, this, e);
+
+ this.file = false;
+ this.exif = {};
+
+ if(typeof(file) === 'string'){
+ this.loadCanvas(file);
+ return;
+ }
+
+ if(!file || !this.urlAPI){
+ return;
+ }
+
+ this.file = file;
+ if(typeof(file.type) != 'undefined' && file.type.length != 0) {
+ this.cropType = file.type;
+ }
+
+ var _this = this;
+
+ if(this.fireEvent('prepare', this, this.file) != false){
+
+ var reader = new FileReader();
+
+ reader.onload = function (e) {
+ if (e.target.error) {
+ Roo.log(e.target.error);
+ return;
}
- }else{
- this.fireEvent("click", this, e);
- if(this.handler){
- this.handler.call(this.scope || this, this, e);
+
+ var buffer = e.target.result,
+ dataView = new DataView(buffer),
+ offset = 2,
+ maxOffset = dataView.byteLength - 4,
+ markerBytes,
+ markerLength;
+
+ if (dataView.getUint16(0) === 0xffd8) {
+ while (offset < maxOffset) {
+ markerBytes = dataView.getUint16(offset);
+
+ if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
+ markerLength = dataView.getUint16(offset + 2) + 2;
+ if (offset + markerLength > dataView.byteLength) {
+ Roo.log('Invalid meta data: Invalid segment size.');
+ break;
+ }
+
+ if(markerBytes == 0xffe1){
+ _this.parseExifData(
+ dataView,
+ offset,
+ markerLength
+ );
+ }
+
+ offset += markerLength;
+
+ continue;
+ }
+
+ break;
+ }
+
}
+
+ var url = _this.urlAPI.createObjectURL(_this.file);
+
+ _this.loadCanvas(url);
+
+ return;
}
+
+ reader.readAsArrayBuffer(this.file);
+
}
+
},
- // private
- onMouseDown : function(e){
- if(!this.disabled){
- Roo.fly(e.getTarget("table")).addClass("x-btn-click");
- }
- },
- // private
- onMouseUp : function(e){
- Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
- }
-});
-
-
-// backwards compat
-Roo.MenuButton = Roo.SplitButton;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.Toolbar
- * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
- * Basic Toolbar class.
- * @constructor
- * Creates a new Toolbar
- * @param {Object} container The config object
- */
-Roo.Toolbar = function(container, buttons, config)
-{
- /// old consturctor format still supported..
- if(container instanceof Array){ // omit the container for later rendering
- buttons = container;
- config = buttons;
- container = null;
- }
- if (typeof(container) == 'object' && container.xtype) {
- config = container;
- container = config.container;
- buttons = config.buttons || []; // not really - use items!!
- }
- var xitems = [];
- if (config && config.items) {
- xitems = config.items;
- delete config.items;
- }
- Roo.apply(this, config);
- this.buttons = buttons;
- if(container){
- this.render(container);
- }
- this.xitems = xitems;
- Roo.each(xitems, function(b) {
- this.add(b);
- }, this);
+ parseExifData : function(dataView, offset, length)
+ {
+ var tiffOffset = offset + 10,
+ littleEndian,
+ dirOffset;
-};
-
-Roo.Toolbar.prototype = {
- /**
- * @cfg {Array} items
- * array of button configs or elements to add (will be converted to a MixedCollection)
- */
- items: false,
- /**
- * @cfg {String/HTMLElement/Element} container
- * The id or element that will contain the toolbar
- */
- // private
- render : function(ct){
- this.el = Roo.get(ct);
- if(this.cls){
- this.el.addClass(this.cls);
- }
- // using a table allows for vertical alignment
- // 100% width is needed by Safari...
- this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
- this.tr = this.el.child("tr", true);
- var autoId = 0;
- this.items = new Roo.util.MixedCollection(false, function(o){
- return o.id || ("item" + (++autoId));
- });
- if(this.buttons){
- this.add.apply(this, this.buttons);
- delete this.buttons;
- }
- },
-
- /**
- * Adds element(s) to the toolbar -- this function takes a variable number of
- * arguments of mixed type and adds them to the toolbar.
- * @param {Mixed} arg1 The following types of arguments are all valid:<br />
- * <ul>
- * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
- * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
- * <li>Field: Any form field (equivalent to {@link #addField})</li>
- * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
- * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
- * Note that there are a few special strings that are treated differently as explained nRoo.</li>
- * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
- * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
- * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
- * </ul>
- * @param {Mixed} arg2
- * @param {Mixed} etc.
- */
- add : function(){
- var a = arguments, l = a.length;
- for(var i = 0; i < l; i++){
- this._add(a[i]);
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
}
- },
- // private..
- _add : function(el) {
- if (el.xtype) {
- el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
+ // Check for the ASCII code for "Exif" (0x45786966):
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
}
-
- if (el.applyTo){ // some kind of form field
- return this.addField(el);
- }
- if (el.render){ // some kind of Toolbar.Item
- return this.addItem(el);
+ if (tiffOffset + 8 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid segment size.');
+ return;
}
- if (typeof el == "string"){ // string
- if(el == "separator" || el == "-"){
- return this.addSeparator();
- }
- if (el == " "){
- return this.addSpacer();
- }
- if(el == "->"){
- return this.addFill();
- }
- return this.addText(el);
-
+ // Check for the two null bytes:
+ if (dataView.getUint16(offset + 8) !== 0x0000) {
+ Roo.log('Invalid Exif data: Missing byte alignment offset.');
+ return;
}
- if(el.tagName){ // element
- return this.addElement(el);
+ // Check the byte alignment:
+ switch (dataView.getUint16(tiffOffset)) {
+ case 0x4949:
+ littleEndian = true;
+ break;
+ case 0x4D4D:
+ littleEndian = false;
+ break;
+ default:
+ Roo.log('Invalid Exif data: Invalid byte alignment marker.');
+ return;
}
- if(typeof el == "object"){ // must be button config?
- return this.addButton(el);
+ // Check for the TIFF tag marker (0x002A):
+ if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
+ Roo.log('Invalid Exif data: Missing TIFF marker.');
+ return;
}
- // and now what?!?!
- return false;
+ // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+ dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+ this.parseExifTags(
+ dataView,
+ tiffOffset,
+ tiffOffset + dirOffset,
+ littleEndian
+ );
},
- /**
- * Add an Xtype element
- * @param {Object} xtype Xtype Object
- * @return {Object} created Object
- */
- addxtype : function(e){
- return this.add(e);
+ parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
+ {
+ var tagsNumber,
+ dirEndOffset,
+ i;
+ if (dirOffset + 6 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory offset.');
+ return;
+ }
+ tagsNumber = dataView.getUint16(dirOffset, littleEndian);
+ dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+ if (dirEndOffset + 4 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory size.');
+ return;
+ }
+ for (i = 0; i < tagsNumber; i += 1) {
+ this.parseExifTag(
+ dataView,
+ tiffOffset,
+ dirOffset + 2 + 12 * i, // tag offset
+ littleEndian
+ );
+ }
+ // Return the offset to the next directory:
+ return dataView.getUint32(dirEndOffset, littleEndian);
},
- /**
- * Returns the Element for this toolbar.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
+ parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
+ {
+ var tag = dataView.getUint16(offset, littleEndian);
+
+ this.exif[tag] = this.getExifValue(
+ dataView,
+ tiffOffset,
+ offset,
+ dataView.getUint16(offset + 2, littleEndian), // tag type
+ dataView.getUint32(offset + 4, littleEndian), // tag length
+ littleEndian
+ );
},
- /**
- * Adds a separator
- * @return {Roo.Toolbar.Item} The separator item
- */
- addSeparator : function(){
- return this.addItem(new Roo.Toolbar.Separator());
- },
-
- /**
- * Adds a spacer element
- * @return {Roo.Toolbar.Spacer} The spacer item
- */
- addSpacer : function(){
- return this.addItem(new Roo.Toolbar.Spacer());
- },
-
- /**
- * Adds a fill element that forces subsequent additions to the right side of the toolbar
- * @return {Roo.Toolbar.Fill} The fill item
- */
- addFill : function(){
- return this.addItem(new Roo.Toolbar.Fill());
- },
-
- /**
- * Adds any standard HTML element to the toolbar
- * @param {String/HTMLElement/Element} el The element or id of the element to add
- * @return {Roo.Toolbar.Item} The element's item
- */
- addElement : function(el){
- return this.addItem(new Roo.Toolbar.Item(el));
- },
- /**
- * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
- * @type Roo.util.MixedCollection
- */
- items : false,
-
- /**
- * Adds any Toolbar.Item or subclass
- * @param {Roo.Toolbar.Item} item
- * @return {Roo.Toolbar.Item} The item
- */
- addItem : function(item){
- var td = this.nextBlock();
- item.render(td);
- this.items.add(item);
- return item;
- },
+ getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
+ {
+ var tagType = Roo.panel.Cropbox.exifTagTypes[type],
+ tagSize,
+ dataOffset,
+ values,
+ i,
+ str,
+ c;
- /**
- * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
- * @param {Object/Array} config A button config or array of configs
- * @return {Roo.Toolbar.Button/Array}
- */
- addButton : function(config){
- if(config instanceof Array){
- var buttons = [];
- for(var i = 0, len = config.length; i < len; i++) {
- buttons.push(this.addButton(config[i]));
- }
- return buttons;
+ if (!tagType) {
+ Roo.log('Invalid Exif data: Invalid tag type.');
+ return;
}
- var b = config;
- if(!(config instanceof Roo.Toolbar.Button)){
- b = config.split ?
- new Roo.Toolbar.SplitButton(config) :
- new Roo.Toolbar.Button(config);
+
+ tagSize = tagType.size * length;
+ // Determine if the value is contained in the dataOffset bytes,
+ // or if the value at the dataOffset is a pointer to the actual data:
+ dataOffset = tagSize > 4 ?
+ tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
+ if (dataOffset + tagSize > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid data offset.');
+ return;
}
- var td = this.nextBlock();
- b.render(td);
- this.items.add(b);
- return b;
+ if (length === 1) {
+ return tagType.getValue(dataView, dataOffset, littleEndian);
+ }
+ values = [];
+ for (i = 0; i < length; i += 1) {
+ values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ }
+
+ if (tagType.ascii) {
+ str = '';
+ // Concatenate the chars:
+ for (i = 0; i < values.length; i += 1) {
+ c = values[i];
+ // Ignore the terminating NULL byte(s):
+ if (c === '\u0000') {
+ break;
+ }
+ str += c;
+ }
+ return str;
+ }
+ return values;
+ }
+
+});
+
+Roo.apply(Roo.panel.Cropbox, {
+ tags : {
+ 'Orientation': 0x0112
},
- /**
- * Adds text to the toolbar
- * @param {String} text The text to add
- * @return {Roo.Toolbar.Item} The element's item
- */
- addText : function(text){
- return this.addItem(new Roo.Toolbar.TextItem(text));
+ Orientation: {
+ 1: 0, //'top-left',
+// 2: 'top-right',
+ 3: 180, //'bottom-right',
+// 4: 'bottom-left',
+// 5: 'left-top',
+ 6: 90, //'right-top',
+// 7: 'right-bottom',
+ 8: 270 //'left-bottom'
},
- /**
- * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
- * @param {Number} index The index where the item is to be inserted
- * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
- * @return {Roo.Toolbar.Button/Item}
- */
- insertButton : function(index, item){
- if(item instanceof Array){
- var buttons = [];
- for(var i = 0, len = item.length; i < len; i++) {
- buttons.push(this.insertButton(index + i, item[i]));
- }
- return buttons;
- }
- if (!(item instanceof Roo.Toolbar.Button)){
- item = new Roo.Toolbar.Button(item);
+ exifTagTypes : {
+ // byte, 8-bit unsigned int:
+ 1: {
+ getValue: function (dataView, dataOffset) {
+ return dataView.getUint8(dataOffset);
+ },
+ size: 1
+ },
+ // ascii, 8-bit byte:
+ 2: {
+ getValue: function (dataView, dataOffset) {
+ return String.fromCharCode(dataView.getUint8(dataOffset));
+ },
+ size: 1,
+ ascii: true
+ },
+ // short, 16 bit int:
+ 3: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint16(dataOffset, littleEndian);
+ },
+ size: 2
+ },
+ // long, 32 bit int:
+ 4: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // rational = two long values, first is numerator, second is denominator:
+ 5: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian) /
+ dataView.getUint32(dataOffset + 4, littleEndian);
+ },
+ size: 8
+ },
+ // slong, 32 bit signed int:
+ 9: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // srational, two slongs, first is numerator, second is denominator:
+ 10: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian) /
+ dataView.getInt32(dataOffset + 4, littleEndian);
+ },
+ size: 8
}
- var td = document.createElement("td");
- this.tr.insertBefore(td, this.tr.childNodes[index]);
- item.render(td);
- this.items.insert(index, item);
- return item;
},
- /**
- * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
- * @param {Object} config
- * @return {Roo.Toolbar.Item} The element's item
- */
- addDom : function(config, returnEl){
- var td = this.nextBlock();
- Roo.DomHelper.overwrite(td, config);
- var ti = new Roo.Toolbar.Item(td.firstChild);
- ti.render(td);
- this.items.add(ti);
- return ti;
- },
+ footer : {
+ STANDARD : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-picture',
+ action : 'picture',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-picture-o"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ DOCUMENT : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-download',
+ action : 'download',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-download"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-crop',
+ action : 'crop',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-crop"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-trash',
+ action : 'trash',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-trash"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ ROTATOR : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ CENTER : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-center',
+ action : 'center',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : 'CENTER'
+ }
+ ]
+ }
+ ]
+ }
+});
+ /*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.panel.Tab
+ * @extends Roo.util.Observable
+ * A lightweight tab container.
+ * <br><br>
+ * Usage:
+ * <pre><code>
+// basic tabs 1, built from existing content
+var tabs = new Roo.panel.Tab("tabs1");
+tabs.addTab("script", "View Script");
+tabs.addTab("markup", "View Markup");
+tabs.activate("script");
- /**
- * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
- * @type Roo.util.MixedCollection
- */
- fields : false,
-
- /**
- * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
- * Note: the field should not have been rendered yet. For a field that has already been
- * rendered, use {@link #addElement}.
- * @param {Roo.form.Field} field
- * @return {Roo.ToolbarItem}
- */
-
-
- addField : function(field) {
- if (!this.fields) {
- var autoId = 0;
- this.fields = new Roo.util.MixedCollection(false, function(o){
- return o.id || ("item" + (++autoId));
- });
+// more advanced tabs, built from javascript
+var jtabs = new Roo.panel.Tab("jtabs");
+jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
- }
-
- var td = this.nextBlock();
- field.render(td);
- var ti = new Roo.Toolbar.Item(td.firstChild);
- ti.render(td);
- this.items.add(ti);
- this.fields.add(field);
- return ti;
- },
- /**
- * Hide the toolbar
- * @method hide
- */
-
-
- hide : function()
- {
- this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
- this.el.child('div').hide();
- },
- /**
- * Show the toolbar
- * @method show
- */
- show : function()
- {
- this.el.child('div').show();
- },
-
- // private
- nextBlock : function(){
- var td = document.createElement("td");
- this.tr.appendChild(td);
- return td;
- },
+// set up the UpdateManager
+var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
+var updater = tab2.getUpdateManager();
+updater.setDefaultUrl("ajax1.htm");
+tab2.on('activate', updater.refresh, updater, true);
- // private
- destroy : function(){
- if(this.items){ // rendered?
- Roo.destroy.apply(Roo, this.items.items);
- }
- if(this.fields){ // rendered?
- Roo.destroy.apply(Roo, this.fields.items);
- }
- Roo.Element.uncache(this.el, this.tr);
- }
-};
+// Use setUrl for Ajax loading
+var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
+tab3.setUrl("ajax2.htm", null, true);
-/**
- * @class Roo.Toolbar.Item
- * The base class that other classes should extend in order to get some basic common toolbar item functionality.
+// Disabled tab
+var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
+tab4.disable();
+
+jtabs.activate("jtabs-1");
+ * </code></pre>
* @constructor
- * Creates a new Item
- * @param {HTMLElement} el
+ * Create a new TabPanel.
+ * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
+ * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
*/
-Roo.Toolbar.Item = function(el){
- var cfg = {};
- if (typeof (el.xtype) != 'undefined') {
- cfg = el;
- el = cfg.el;
+Roo.panel.Tab = function(container, config){
+ /**
+ * The container element for this TabPanel.
+ * @type Roo.Element
+ */
+ this.el = Roo.get(container, true);
+ if(config){
+ if(typeof config == "boolean"){
+ this.tabPosition = config ? "bottom" : "top";
+ }else{
+ Roo.apply(this, config);
+ }
}
-
- this.el = Roo.getDom(el);
- this.id = Roo.id(this.el);
- this.hidden = false;
-
+ if(this.tabPosition == "bottom"){
+ this.bodyEl = Roo.get(this.createBody(this.el.dom));
+ this.el.addClass("x-tabs-bottom");
+ }
+ this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
+ this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+ this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+ if(Roo.isIE){
+ Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
+ }
+ if(this.tabPosition != "bottom"){
+ /** The body element that contains {@link Roo.panel.TabItem} bodies. +
+ * @type Roo.Element
+ */
+ this.bodyEl = Roo.get(this.createBody(this.el.dom));
+ this.el.addClass("x-tabs-top");
+ }
+ this.items = [];
+
+ this.bodyEl.setStyle("position", "relative");
+
+ this.active = null;
+ this.activateDelegate = this.activate.createDelegate(this);
+
this.addEvents({
- /**
- * @event render
- * Fires when the button is rendered
- * @param {Button} this
- */
- 'render': true
+ /**
+ * @event tabchange
+ * Fires when the active tab changes
+ * @param {Roo.panel.Tab} this
+ * @param {Roo.panel.TabItem} activePanel The new active tab
+ */
+ "tabchange": true,
+ /**
+ * @event beforetabchange
+ * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
+ * @param {Roo.panel.Tab} this
+ * @param {Object} e Set cancel to true on this object to cancel the tab change
+ * @param {Roo.panel.TabItem} tab The tab being changed to
+ */
+ "beforetabchange" : true
});
- Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
+
+ Roo.EventManager.onWindowResize(this.onResize, this);
+ 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.panel.Tab.superclass.constructor.call(this);
};
-Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
-//Roo.Toolbar.Item.prototype = {
-
+
+Roo.extend(Roo.panel.Tab, Roo.util.Observable, {
+ /*
+ *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
+ */
+ tabPosition : "top",
+ /*
+ *@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)
+ */
+ minTabWidth : 40,
+ /*
+ *@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)
+ */
+ preferredTabWidth : 175,
+ /*
+ *@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)
+ */
+ monitorResize : true,
+ /*
+ *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
+ */
+ toolbar : false,
+
/**
- * Get this item's HTML Element
- * @return {HTMLElement}
+ * Creates a new {@link Roo.panel.TabItem} by looking for an existing element with the provided id -- if it's not found it creates one.
+ * @param {String} id The id of the div to use <b>or create</b>
+ * @param {String} text The text for the tab
+ * @param {String} content (optional) Content to put in the TabPanelItem body
+ * @param {Boolean} closable (optional) True to create a close icon on the tab
+ * @return {Roo.panel.TabItem} The created TabPanelItem
*/
- getEl : function(){
- return this.el;
+ addTab : function(id, text, content, closable){
+ var item = new Roo.panel.TabItem(this, id, text, closable);
+ this.addTabItem(item);
+ if(content){
+ item.setContent(content);
+ }
+ return item;
},
- // private
- render : function(td){
-
- this.td = td;
- td.appendChild(this.el);
-
- this.fireEvent('render', this);
- },
-
/**
- * Removes and destroys this item.
+ * Returns the {@link Roo.panel.TabItem} with the specified id/index
+ * @param {String/Number} id The id or index of the TabPanelItem to fetch.
+ * @return {Roo.panel.TabItem}
*/
- destroy : function(){
- this.td.parentNode.removeChild(this.td);
+ getTab : function(id){
+ return this.items[id];
},
-
+
/**
- * Shows this item.
+ * Hides the {@link Roo.panel.TabItem} with the specified id/index
+ * @param {String/Number} id The id or index of the TabPanelItem to hide.
*/
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
+ hideTab : function(id){
+ var t = this.items[id];
+ if(!t.isHidden()){
+ t.setHidden(true);
+ this.hiddenCount++;
+ this.autoSizeTabs();
+ }
},
-
+
/**
- * Hides this item.
+ * "Unhides" the {@link Roo.panel.TabItem} with the specified id/index.
+ * @param {String/Number} id The id or index of the TabPanelItem to unhide.
*/
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
+ unhideTab : function(id){
+ var t = this.items[id];
+ if(t.isHidden()){
+ t.setHidden(false);
+ this.hiddenCount--;
+ this.autoSizeTabs();
+ }
},
-
+
/**
- * Convenience function for boolean show/hide.
- * @param {Boolean} visible true to show/false to hide
+ * Adds an existing {@link Roo.panel.TabItem}.
+ * @param {Roo.panel.TabItem} item The TabPanelItem to add
*/
- setVisible: function(visible){
- if(visible) {
- this.show();
+ addTabItem : function(item){
+ this.items[item.id] = item;
+ this.items.push(item);
+ if(this.resizeTabs){
+ item.setWidth(this.currentTabWidth || this.preferredTabWidth);
+ this.autoSizeTabs();
}else{
- this.hide();
+ item.autoSize();
}
},
-
+
/**
- * Try to focus this item.
+ * Removes a {@link Roo.panel.TabItem}.
+ * @param {String/Number} id The id or index of the TabPanelItem to remove.
*/
- focus : function(){
- Roo.fly(this.el).focus();
+ removeTab : function(id){
+ var items = this.items;
+ var tab = items[id];
+ if(!tab) { return; }
+ var index = items.indexOf(tab);
+ if(this.active == tab && items.length > 1){
+ var newTab = this.getNextAvailable(index);
+ if(newTab) {
+ newTab.activate();
+ }
+ }
+ this.stripEl.dom.removeChild(tab.pnode.dom);
+ if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
+ this.bodyEl.dom.removeChild(tab.bodyEl.dom);
+ }
+ items.splice(index, 1);
+ delete this.items[tab.id];
+ tab.fireEvent("close", tab);
+ tab.purgeListeners();
+ this.autoSizeTabs();
},
-
- /**
- * Disables this item.
- */
- disable : function(){
- Roo.fly(this.td).addClass("x-item-disabled");
- this.disabled = true;
- this.el.disabled = true;
+
+ getNextAvailable : function(start){
+ var items = this.items;
+ var index = start;
+ // look for a next tab that will slide over to
+ // replace the one being removed
+ while(index < items.length){
+ var item = items[++index];
+ if(item && !item.isHidden()){
+ return item;
+ }
+ }
+ // if one isn't found select the previous tab (on the left)
+ index = start;
+ while(index >= 0){
+ var item = items[--index];
+ if(item && !item.isHidden()){
+ return item;
+ }
+ }
+ return null;
},
-
+
/**
- * Enables this item.
+ * Disables a {@link Roo.panel.TabItem}. It cannot be the active tab, if it is this call is ignored.
+ * @param {String/Number} id The id or index of the TabPanelItem to disable.
*/
- enable : function(){
- Roo.fly(this.td).removeClass("x-item-disabled");
- this.disabled = false;
- this.el.disabled = false;
- }
-});
-
-
-/**
- * @class Roo.Toolbar.Separator
- * @extends Roo.Toolbar.Item
- * A simple toolbar separator class
- * @constructor
- * Creates a new Separator
- */
-Roo.Toolbar.Separator = function(cfg){
-
- var s = document.createElement("span");
- s.className = "ytb-sep";
- if (cfg) {
- cfg.el = s;
- }
-
- Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Spacer
- * @extends Roo.Toolbar.Item
- * A simple element that adds extra horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Spacer = function(cfg){
- var s = document.createElement("div");
- s.className = "ytb-spacer";
- if (cfg) {
- cfg.el = s;
- }
- Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Fill
- * @extends Roo.Toolbar.Spacer
- * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
- // private
- render : function(td){
- td.style.width = '100%';
- Roo.Toolbar.Fill.superclass.render.call(this, td);
- }
-});
+ disableTab : function(id){
+ var tab = this.items[id];
+ if(tab && this.active != tab){
+ tab.disable();
+ }
+ },
-/**
- * @class Roo.Toolbar.TextItem
- * @extends Roo.Toolbar.Item
- * A simple class that renders text directly into a toolbar.
- * @constructor
- * Creates a new TextItem
- * @cfg {string} text
- */
-Roo.Toolbar.TextItem = function(cfg){
- var text = cfg || "";
- if (typeof(cfg) == 'object') {
- text = cfg.text || "";
- } else {
- cfg = null;
- }
- var s = document.createElement("span");
- s.className = "ytb-text";
- s.innerHTML = text;
- if (cfg) {
- cfg.el = s;
- }
-
- Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
-
-
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn,
- /**
- * Shows this button
+ /**
+ * Enables a {@link Roo.panel.TabItem} that is disabled.
+ * @param {String/Number} id The id or index of the TabPanelItem to enable.
*/
- show: function(){
- this.hidden = false;
- this.el.style.display = "";
+ enableTab : function(id){
+ var tab = this.items[id];
+ tab.enable();
},
-
+
/**
- * Hides this button
+ * Activates a {@link Roo.panel.TabItem}. The currently active one will be deactivated.
+ * @param {String/Number} id The id or index of the TabPanelItem to activate.
+ * @return {Roo.panel.TabItem} The TabPanelItem.
*/
- hide: function(){
- this.hidden = true;
- this.el.style.display = "none";
- }
-
-});
-
-/**
- * @class Roo.Toolbar.Button
- * @extends Roo.Button
- * A button that renders into a toolbar.
- * @constructor
- * Creates a new Button
- * @param {Object} config A standard {@link Roo.Button} config object
- */
-Roo.Toolbar.Button = function(config){
- Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.Toolbar.Button, Roo.Button,
-{
-
-
- render : function(td){
- this.td = td;
- Roo.Toolbar.Button.superclass.render.call(this, td);
+ activate : function(id){
+ var tab = this.items[id];
+ if(!tab){
+ return null;
+ }
+ if(tab == this.active || tab.disabled){
+ return tab;
+ }
+ var e = {};
+ this.fireEvent("beforetabchange", this, e, tab);
+ if(e.cancel !== true && !tab.disabled){
+ if(this.active){
+ this.active.hide();
+ }
+ this.active = this.items[id];
+ this.active.show();
+ this.fireEvent("tabchange", this, this.active);
+ }
+ return tab;
},
-
+
/**
- * Removes and destroys this button
+ * Gets the active {@link Roo.panel.TabItem}.
+ * @return {Roo.panel.TabItem} The active TabPanelItem or null if none are active.
*/
- destroy : function(){
- Roo.Toolbar.Button.superclass.destroy.call(this);
- this.td.parentNode.removeChild(this.td);
+ getActiveTab : function(){
+ return this.active;
},
-
+
/**
- * Shows this button
+ * Updates the tab body element to fit the height of the container element
+ * for overflow scrolling
+ * @param {Number} targetHeight (optional) Override the starting height from the elements height
*/
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
+ syncHeight : function(targetHeight){
+ var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+ var bm = this.bodyEl.getMargins();
+ var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
+ this.bodyEl.setHeight(newHeight);
+ return newHeight;
},
-
+
+ onResize : function(){
+ if(this.monitorResize){
+ this.autoSizeTabs();
+ }
+ },
+
/**
- * Hides this button
+ * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
*/
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
+ beginUpdate : function(){
+ this.updating = true;
},
/**
- * Disables this item
+ * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
*/
- disable : function(){
- Roo.fly(this.td).addClass("x-item-disabled");
- this.disabled = true;
+ endUpdate : function(){
+ this.updating = false;
+ this.autoSizeTabs();
},
/**
- * Enables this item
+ * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
*/
- enable : function(){
- Roo.fly(this.td).removeClass("x-item-disabled");
- this.disabled = false;
- }
-});
-// backwards compat
-Roo.ToolbarButton = Roo.Toolbar.Button;
-
-/**
- * @class Roo.Toolbar.SplitButton
- * @extends Roo.SplitButton
- * A menu button that renders into a toolbar.
- * @constructor
- * Creates a new SplitButton
- * @param {Object} config A standard {@link Roo.SplitButton} config object
- */
-Roo.Toolbar.SplitButton = function(config){
- Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
- render : function(td){
- this.td = td;
- Roo.Toolbar.SplitButton.superclass.render.call(this, td);
+ autoSizeTabs : function(){
+ var count = this.items.length;
+ var vcount = count - this.hiddenCount;
+ if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
+ return;
+ }
+ var w = Math.max(this.el.getWidth() - this.cpad, 10);
+ var availWidth = Math.floor(w / vcount);
+ var b = this.stripBody;
+ if(b.getWidth() > w){
+ var tabs = this.items;
+ this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
+ if(availWidth < this.minTabWidth){
+ /*if(!this.sleft){ // incomplete scrolling code
+ this.createScrollButtons();
+ }
+ this.showScroll();
+ this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
+ }
+ }else{
+ if(this.currentTabWidth < this.preferredTabWidth){
+ this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
+ }
+ }
},
-
+
/**
- * Removes and destroys this button
+ * Returns the number of tabs in this TabPanel.
+ * @return {Number}
*/
- destroy : function(){
- Roo.Toolbar.SplitButton.superclass.destroy.call(this);
- this.td.parentNode.removeChild(this.td);
- },
-
+ getCount : function(){
+ return this.items.length;
+ },
+
/**
- * Shows this button
+ * Resizes all the tabs to the passed width
+ * @param {Number} The new width
*/
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
+ setTabWidth : function(width){
+ this.currentTabWidth = width;
+ for(var i = 0, len = this.items.length; i < len; i++) {
+ if(!this.items[i].isHidden()) {
+ this.items[i].setWidth(width);
+ }
+ }
},
-
+
/**
- * Hides this button
+ * Destroys this TabPanel
+ * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
*/
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
+ destroy : function(removeEl){
+ Roo.EventManager.removeResizeListener(this.onResize, this);
+ for(var i = 0, len = this.items.length; i < len; i++){
+ this.items[i].purgeListeners();
+ }
+ if(removeEl === true){
+ this.el.update("");
+ this.el.remove();
+ }
}
});
-// backwards compat
-Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.PagingToolbar
- * @extends Roo.Toolbar
- * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
- * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
- * @constructor
- * Create a new PagingToolbar
- * @param {Object} config The config object
- */
-Roo.PagingToolbar = function(el, ds, config)
-{
- // old args format still supported... - xtype is prefered..
- if (typeof(el) == 'object' && el.xtype) {
- // created from xtype...
- config = el;
- ds = el.dataSource;
- el = config.container;
- }
- var items = [];
- if (config.items) {
- items = config.items;
- config.items = [];
+
+/** @private */
+Roo.panel.Tab.prototype.createStripList = function(strip){
+ // div wrapper for retard IE
+ // 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 */
+Roo.panel.Tab.prototype.createBody = function(container){
+ var body = document.createElement("div");
+ Roo.id(body, "tab-body");
+ Roo.fly(body).addClass("x-tabs-body");
+ container.appendChild(body);
+ return body;
+};
+/** @private */
+Roo.panel.Tab.prototype.createItemBody = function(bodyEl, id){
+ var body = Roo.getDom(id);
+ if(!body){
+ body = document.createElement("div");
+ body.id = id;
}
-
- Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
- this.ds = ds;
- this.cursor = 0;
- this.renderButtons(this.el);
- this.bind(ds);
-
- // supprot items array.
-
- Roo.each(items, function(e) {
- this.add(Roo.factory(e));
- },this);
-
+ Roo.fly(body).addClass("x-tabs-item-body");
+ bodyEl.insertBefore(body, bodyEl.firstChild);
+ return body;
};
-
-Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
-
- /**
- * @cfg {String/HTMLElement/Element} container
- * container The id or element that will contain the toolbar
- */
- /**
- * @cfg {Boolean} displayInfo
- * True to display the displayMsg (defaults to false)
- */
-
-
- /**
- * @cfg {Number} pageSize
- * The number of records to display per page (defaults to 20)
- */
- pageSize: 20,
- /**
- * @cfg {String} displayMsg
- * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
- */
- displayMsg : 'Displaying {0} - {1} of {2}',
+/** @private */
+Roo.panel.Tab.prototype.createStripElements = function(stripEl, text, closable){
+ var td = document.createElement("td");
+ stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
+ //stripEl.appendChild(td);
+ if(closable){
+ td.className = "x-tabs-closable";
+ if(!this.closeTpl){
+ this.closeTpl = new Roo.Template(
+ '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
+ '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
+ '<div unselectable="on" class="close-icon"> </div></em></span></a>'
+ );
+ }
+ var el = this.closeTpl.overwrite(td, {"text": text});
+ var close = el.getElementsByTagName("div")[0];
+ var inner = el.getElementsByTagName("em")[0];
+ return {"el": el, "close": close, "inner": inner};
+ } else {
+ if(!this.tabTpl){
+ this.tabTpl = new Roo.Template(
+ '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
+ '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
+ );
+ }
+ var el = this.tabTpl.overwrite(td, {"text": text});
+ var inner = el.getElementsByTagName("em")[0];
+ return {"el": el, "inner": inner};
+ }
+};/**
+ * @class Roo.panel.TabItem
+ * @extends Roo.util.Observable
+ * Represents an individual item (tab plus body) in a TabPanel.
+ * @param {Roo.panel.Tab} tabPanel The {@link Roo.panel.Tab} this TabPanelItem belongs to
+ * @param {String} id The id of this TabPanelItem
+ * @param {String} text The text for the tab of this TabPanelItem
+ * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
+ */
+ Roo.panel.TabItem = function(tabPanel, id, text, closable){
/**
- * @cfg {String} emptyMsg
- * The message to display when no records are found (defaults to "No data to display")
+ * The {@link Roo.panel.Tab} this TabPanelItem belongs to
+ * @type Roo.panel.Tab
*/
- emptyMsg : 'No data to display',
+ this.tabPanel = tabPanel;
/**
- * Customizable piece of the default paging text (defaults to "Page")
+ * The id for this TabPanelItem
* @type String
*/
- beforePageText : "Page",
+ this.id = id;
+ /** @private */
+ this.disabled = false;
+ /** @private */
+ this.text = text;
+ /** @private */
+ this.loaded = false;
+ this.closable = closable;
+
/**
- * Customizable piece of the default paging text (defaults to "of %0")
- * @type String
+ * The body element for this TabPanelItem.
+ * @type Roo.Element
*/
- afterPageText : "of {0}",
+ this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
+ this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
+ this.bodyEl.setStyle("display", "block");
+ this.bodyEl.setStyle("zoom", "1");
+ this.hideAction();
+
+ var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
+ /** @private */
+ this.el = Roo.get(els.el, true);
+ this.inner = Roo.get(els.inner, true);
+ this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
+ this.pnode = Roo.get(els.el.parentNode, true);
+ this.el.on("mousedown", this.onTabMouseDown, this);
+ this.el.on("click", this.onTabClick, this);
+ /** @private */
+ if(closable){
+ var c = Roo.get(els.close, true);
+ c.dom.title = this.closeText;
+ c.addClassOnOver("close-over");
+ c.on("click", this.closeClick, this);
+ }
+
+ this.addEvents({
+ /**
+ * @event activate
+ * Fires when this tab becomes the active tab.
+ * @param {Roo.panel.Tab} tabPanel The parent TabPanel
+ * @param {Roo.panel.TabItem} this
+ */
+ "activate": true,
+ /**
+ * @event beforeclose
+ * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
+ * @param {Roo.panel.TabItem} this
+ * @param {Object} e Set cancel to true on this object to cancel the close.
+ */
+ "beforeclose": true,
+ /**
+ * @event close
+ * Fires when this tab is closed.
+ * @param {Roo.panel.TabItem} this
+ */
+ "close": true,
+ /**
+ * @event deactivate
+ * Fires when this tab is no longer the active tab.
+ * @param {Roo.panel.Tab} tabPanel The parent TabPanel
+ * @param {Roo.panel.TabItem} this
+ */
+ "deactivate" : true
+ });
+ this.hidden = false;
+
+ Roo.panel.TabItem.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.panel.TabItem, Roo.util.Observable, {
+ purgeListeners : function(){
+ Roo.util.Observable.prototype.purgeListeners.call(this);
+ this.el.removeAllListeners();
+ },
/**
- * Customizable piece of the default paging text (defaults to "First Page")
- * @type String
+ * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
*/
- firstText : "First Page",
+ show : function(){
+ this.pnode.addClass("on");
+ this.showAction();
+ if(Roo.isOpera){
+ this.tabPanel.stripWrap.repaint();
+ }
+ this.fireEvent("activate", this.tabPanel, this);
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Previous Page")
- * @type String
+ * Returns true if this tab is the active tab.
+ * @return {Boolean}
*/
- prevText : "Previous Page",
+ isActive : function(){
+ return this.tabPanel.getActiveTab() == this;
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Next Page")
- * @type String
+ * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
*/
- nextText : "Next Page",
+ hide : function(){
+ this.pnode.removeClass("on");
+ this.hideAction();
+ this.fireEvent("deactivate", this.tabPanel, this);
+ },
+
+ hideAction : function(){
+ this.bodyEl.hide();
+ this.bodyEl.setStyle("position", "absolute");
+ this.bodyEl.setLeft("-20000px");
+ this.bodyEl.setTop("-20000px");
+ },
+
+ showAction : function(){
+ this.bodyEl.setStyle("position", "relative");
+ this.bodyEl.setTop("");
+ this.bodyEl.setLeft("");
+ this.bodyEl.show();
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Last Page")
- * @type String
+ * Set the tooltip for the tab.
+ * @param {String} tooltip The tab's tooltip
*/
- lastText : "Last Page",
+ setTooltip : function(text){
+ if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
+ this.textEl.dom.qtip = text;
+ this.textEl.dom.removeAttribute('title');
+ }else{
+ this.textEl.dom.title = text;
+ }
+ },
+
+ onTabClick : function(e){
+ e.preventDefault();
+ this.tabPanel.activate(this.id);
+ },
+
+ onTabMouseDown : function(e){
+ e.preventDefault();
+ this.tabPanel.activate(this.id);
+ },
+
+ getWidth : function(){
+ return this.inner.getWidth();
+ },
+
+ setWidth : function(width){
+ var iwidth = width - this.pnode.getPadding("lr");
+ this.inner.setWidth(iwidth);
+ this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
+ this.pnode.setWidth(width);
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Refresh")
- * @type String
+ * Show or hide the tab
+ * @param {Boolean} hidden True to hide or false to show.
*/
- refreshText : "Refresh",
+ setHidden : function(hidden){
+ this.hidden = hidden;
+ this.pnode.setStyle("display", hidden ? "none" : "");
+ },
- // private
- renderButtons : function(el){
- Roo.PagingToolbar.superclass.render.call(this, el);
- this.first = this.addButton({
- tooltip: this.firstText,
- cls: "x-btn-icon x-grid-page-first",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["first"])
- });
- this.prev = this.addButton({
- tooltip: this.prevText,
- cls: "x-btn-icon x-grid-page-prev",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["prev"])
- });
- //this.addSeparator();
- this.add(this.beforePageText);
- this.field = Roo.get(this.addDom({
- tag: "input",
- type: "text",
- size: "3",
- value: "1",
- cls: "x-grid-page-number"
- }).el);
- this.field.on("keydown", this.onPagingKeydown, this);
- this.field.on("focus", function(){this.dom.select();});
- this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
- this.field.setHeight(18);
- //this.addSeparator();
- this.next = this.addButton({
- tooltip: this.nextText,
- cls: "x-btn-icon x-grid-page-next",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["next"])
- });
- this.last = this.addButton({
- tooltip: this.lastText,
- cls: "x-btn-icon x-grid-page-last",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["last"])
- });
- //this.addSeparator();
- this.loading = this.addButton({
- tooltip: this.refreshText,
- cls: "x-btn-icon x-grid-loading",
- handler: this.onClick.createDelegate(this, ["refresh"])
- });
+ /**
+ * Returns true if this tab is "hidden"
+ * @return {Boolean}
+ */
+ isHidden : function(){
+ return this.hidden;
+ },
- if(this.displayInfo){
- this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
- }
+ /**
+ * Returns the text for this tab
+ * @return {String}
+ */
+ getText : function(){
+ return this.text;
},
- // private
- updateInfo : function(){
- if(this.displayEl){
- var count = this.ds.getCount();
- var msg = count == 0 ?
- this.emptyMsg :
- String.format(
- this.displayMsg,
- this.cursor+1, this.cursor+count, this.ds.getTotalCount()
- );
- this.displayEl.update(msg);
+ autoSize : function(){
+ //this.el.beginMeasure();
+ this.textEl.setWidth(1);
+ /*
+ * #2804 [new] Tabs in Roojs
+ * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
+ */
+ this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
+ //this.el.endMeasure();
+ },
+
+ /**
+ * Sets the text for the tab (Note: this also sets the tooltip text)
+ * @param {String} text The tab's text and tooltip
+ */
+ setText : function(text){
+ this.text = text;
+ this.textEl.update(text);
+ this.setTooltip(text);
+ if(!this.tabPanel.resizeTabs){
+ this.autoSize();
}
},
+ /**
+ * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
+ */
+ activate : function(){
+ this.tabPanel.activate(this.id);
+ },
- // private
- onLoad : function(ds, r, o){
- this.cursor = o.params ? o.params.start : 0;
- var d = this.getPageData(), ap = d.activePage, ps = d.pages;
+ /**
+ * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
+ */
+ disable : function(){
+ if(this.tabPanel.active != this){
+ this.disabled = true;
+ this.pnode.addClass("disabled");
+ }
+ },
- this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
- this.field.dom.value = ap;
- this.first.setDisabled(ap == 1);
- this.prev.setDisabled(ap == 1);
- this.next.setDisabled(ap == ps);
- this.last.setDisabled(ap == ps);
- this.loading.enable();
- this.updateInfo();
+ /**
+ * Enables this TabPanelItem if it was previously disabled.
+ */
+ enable : function(){
+ this.disabled = false;
+ this.pnode.removeClass("disabled");
},
- // private
- getPageData : function(){
- var total = this.ds.getTotalCount();
- return {
- total : total,
- activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
- pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
- };
+ /**
+ * Sets the content for this TabPanelItem.
+ * @param {String} content The content
+ * @param {Boolean} loadScripts true to look for and load scripts
+ */
+ setContent : function(content, loadScripts){
+ this.bodyEl.update(content, loadScripts);
},
- // private
- onLoadError : function(){
- this.loading.enable();
+ /**
+ * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ getUpdateManager : function(){
+ return this.bodyEl.getUpdateManager();
},
- // private
- onPagingKeydown : function(e){
- var k = e.getKey();
- var d = this.getPageData();
- if(k == e.RETURN){
- var v = this.field.dom.value, pageNum;
- if(!v || isNaN(pageNum = parseInt(v, 10))){
- this.field.dom.value = d.activePage;
- return;
- }
- pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
- this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
- e.stopEvent();
- }
- else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
- {
- var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
- this.field.dom.value = pageNum;
- this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
- e.stopEvent();
- }
- else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
- {
- var v = this.field.dom.value, pageNum;
- var increment = (e.shiftKey) ? 10 : 1;
- if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
- increment *= -1;
- }
- if(!v || isNaN(pageNum = parseInt(v, 10))) {
- this.field.dom.value = d.activePage;
- return;
- }
- else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
- {
- this.field.dom.value = parseInt(v, 10) + increment;
- pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
- this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
- }
- e.stopEvent();
+ /**
+ * Set a URL to be used to load the content for this TabPanelItem.
+ * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
+ * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+ * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.un('activate', this.refreshDelegate);
}
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on("activate", this.refreshDelegate);
+ return this.bodyEl.getUpdateManager();
},
- // private
- beforeLoad : function(){
- if(this.loading){
- this.loading.disable();
+ /** @private */
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.bodyEl.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
}
},
+
/**
- * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
- * @param {String} which (first|prev|next|last|refresh) which button to press.
- *
+ * Forces a content refresh from the URL specified in the {@link #setUrl} method.
+ * Will fail silently if the setUrl method has not been called.
+ * This does not activate the panel, just updates its content.
*/
- // private
- onClick : function(which){
- var ds = this.ds;
- switch(which){
- case "first":
- ds.load({params:{start: 0, limit: this.pageSize}});
- break;
- case "prev":
- ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
- break;
- case "next":
- ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
- break;
- case "last":
- var total = ds.getTotalCount();
- var extra = total % this.pageSize;
- var lastStart = extra ? (total - extra) : total-this.pageSize;
- ds.load({params:{start: lastStart, limit: this.pageSize}});
- break;
- case "refresh":
- ds.load({params:{start: this.cursor, limit: this.pageSize}});
- break;
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
}
},
- /**
- * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
- * @param {Roo.data.Store} store The data store to unbind
- */
- unbind : function(ds){
- ds.un("beforeload", this.beforeLoad, this);
- ds.un("load", this.onLoad, this);
- ds.un("loadexception", this.onLoadError, this);
- ds.un("remove", this.updateInfo, this);
- ds.un("add", this.updateInfo, this);
- this.ds = undefined;
+ /** @private */
+ _setLoaded : function(){
+ this.loaded = true;
},
+ /** @private */
+ closeClick : function(e){
+ var o = {};
+ e.stopEvent();
+ this.fireEvent("beforeclose", this, o);
+ if(o.cancel !== true){
+ this.tabPanel.removeTab(this.id);
+ }
+ },
/**
- * Binds the paging toolbar to the specified {@link Roo.data.Store}
- * @param {Roo.data.Store} store The data store to bind
+ * The text displayed in the tooltip for the close icon.
+ * @type String
*/
- bind : function(ds){
- ds.on("beforeload", this.beforeLoad, this);
- ds.on("load", this.onLoad, this);
- ds.on("loadexception", this.onLoadError, this);
- ds.on("remove", this.updateInfo, this);
- ds.on("add", this.updateInfo, this);
- this.ds = ds;
- }
-});/*
+ closeText : "Close this tab"
+});
+
+/** @private */
+Roo.panel.Tab.prototype.createStrip = function(container){
+ var strip = document.createElement("div");
+ strip.className = "x-tabs-wrap";
+ container.appendChild(strip);
+ return strip;
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.Resizable
+ * @class Roo.Button
* @extends Roo.util.Observable
- * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
- * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
- * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
- * the element will be wrapped for you automatically.</p>
- * <p>Here is the list of valid resize handles:</p>
- * <pre>
-Value Description
------- -------------------
- 'n' north
- 's' south
- 'e' east
- 'w' west
- 'nw' northwest
- 'sw' southwest
- 'se' southeast
- 'ne' northeast
- 'hd' horizontal drag
- 'all' all
-</pre>
- * <p>Here's an example showing the creation of a typical Resizable:</p>
- * <pre><code>
-var resizer = new Roo.Resizable("element-id", {
- handles: 'all',
- minWidth: 200,
- minHeight: 100,
- maxWidth: 500,
- maxHeight: 400,
- pinned: true
-});
-resizer.on("resize", myHandler);
-</code></pre>
- * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
- * resizer.east.setDisplayed(false);</p>
- * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
- * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
- * resize operation's new size (defaults to [0, 0])
- * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
- * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
- * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
- * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
- * @cfg {Boolean} enabled False to disable resizing (defaults to true)
- * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
- * @cfg {Number} width The width of the element in pixels (defaults to null)
- * @cfg {Number} height The height of the element in pixels (defaults to null)
- * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
- * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
- * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
- * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
- * @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
- * in favor of the handles config option (defaults to false)
- * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
- * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
- * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
- * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
- * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
- * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
- * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
- * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
- * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
- * @constructor
- * Create a new resizable component
- * @param {String/HTMLElement/Roo.Element} el The id or element to resize
- * @param {Object} config configuration options
- */
-Roo.Resizable = function(el, config)
-{
- this.el = Roo.get(el);
-
- if(config && config.wrap){
- config.resizeChild = this.el;
- this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
- this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
- this.el.setStyle("overflow", "hidden");
- this.el.setPositioning(config.resizeChild.getPositioning());
- config.resizeChild.clearPositioning();
- if(!config.width || !config.height){
- var csize = config.resizeChild.getSize();
- this.el.setSize(csize.width, csize.height);
- }
- if(config.pinned && !config.adjustments){
- config.adjustments = "auto";
- }
- }
-
- this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
- this.proxy.unselectable();
- this.proxy.enableDisplayMode('block');
-
- Roo.apply(this, config);
-
- if(this.pinned){
- this.disableTrackOver = true;
- this.el.addClass("x-resizable-pinned");
- }
- // if the element isn't positioned, make it relative
- var position = this.el.getStyle("position");
- if(position != "absolute" && position != "fixed"){
- this.el.setStyle("position", "relative");
- }
- if(!this.handles){ // no handles passed, must be legacy style
- this.handles = 's,e,se';
- if(this.multiDirectional){
- this.handles += ',n,w';
- }
- }
- if(this.handles == "all"){
- this.handles = "n s e w ne nw se sw";
- }
- var hs = this.handles.split(/\s*?[,;]\s*?| /);
- var ps = Roo.Resizable.positions;
- for(var i = 0, len = hs.length; i < len; i++){
- if(hs[i] && ps[hs[i]]){
- var pos = ps[hs[i]];
- this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
- }
- }
- // legacy
- this.corner = this.southeast;
-
- // updateBox = the box can move..
- if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
- this.updateBox = true;
- }
-
- this.activeHandle = null;
-
- if(this.resizeChild){
- if(typeof this.resizeChild == "boolean"){
- this.resizeChild = Roo.get(this.el.dom.firstChild, true);
- }else{
- this.resizeChild = Roo.get(this.resizeChild, true);
- }
+ * Simple Button class
+ * @cfg {String} text The button text
+ * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
+ * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
+ * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
+ * @cfg {Object} scope The scope of the handler
+ * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
+ * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
+ * @cfg {Boolean} hidden True to start hidden (defaults to false)
+ * @cfg {Boolean} disabled True to start disabled (defaults to false)
+ * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+ * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
+ applies if enableToggle = true)
+ * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
+ * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
+ an {@link Roo.util.ClickRepeater} config object (defaults to false).
+ * @constructor
+ * Create a new button
+ * @param {Object} config The config object
+ */
+Roo.Button = function(renderTo, config)
+{
+ if (!config) {
+ config = renderTo;
+ renderTo = config.renderTo || false;
}
- if(this.adjustments == "auto"){
- var rc = this.resizeChild;
- var hw = this.west, he = this.east, hn = this.north, hs = this.south;
- if(rc && (hw || hn)){
- rc.position("relative");
- rc.setLeft(hw ? hw.el.getWidth() : 0);
- rc.setTop(hn ? hn.el.getHeight() : 0);
- }
- this.adjustments = [
- (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
- (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
- ];
- }
-
- if(this.draggable){
- this.dd = this.dynamic ?
- this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
- this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
- }
-
- // public events
+ Roo.apply(this, config);
this.addEvents({
/**
- * @event beforeresize
- * Fired before resize is allowed. Set enabled to false to cancel resize.
- * @param {Roo.Resizable} this
- * @param {Roo.EventObject} e The mousedown event
- */
- "beforeresize" : true,
+ * @event click
+ * Fires when this button is clicked
+ * @param {Button} this
+ * @param {EventObject} e The click event
+ */
+ "click" : true,
/**
- * @event resizing
- * Fired a resizing.
- * @param {Roo.Resizable} this
- * @param {Number} x The new x position
- * @param {Number} y The new y position
- * @param {Number} w The new w width
- * @param {Number} h The new h hight
- * @param {Roo.EventObject} e The mouseup event
- */
- "resizing" : true,
+ * @event toggle
+ * Fires when the "pressed" state of this button changes (only if enableToggle = true)
+ * @param {Button} this
+ * @param {Boolean} pressed
+ */
+ "toggle" : true,
/**
- * @event resize
- * Fired after a resize.
- * @param {Roo.Resizable} this
- * @param {Number} width The new width
- * @param {Number} height The new height
- * @param {Roo.EventObject} e The mouseup event
- */
- "resize" : true
+ * @event mouseover
+ * Fires when the mouse hovers over the button
+ * @param {Button} this
+ * @param {Event} e The event object
+ */
+ 'mouseover' : true,
+ /**
+ * @event mouseout
+ * Fires when the mouse exits the button
+ * @param {Button} this
+ * @param {Event} e The event object
+ */
+ 'mouseout': true,
+ /**
+ * @event render
+ * Fires when the button is rendered
+ * @param {Button} this
+ */
+ 'render': true
});
-
- if(this.width !== null && this.height !== null){
- this.resizeTo(this.width, this.height);
- }else{
- this.updateChildSize();
+ if(this.menu){
+ this.menu = Roo.menu.MenuMgr.get(this.menu);
}
- if(Roo.isIE){
- this.el.dom.style.zoom = 1;
+ // register listeners first!! - so render can be captured..
+ Roo.util.Observable.call(this);
+ if(renderTo){
+ this.render(renderTo);
}
- Roo.Resizable.superclass.constructor.call(this);
+
+
};
-Roo.extend(Roo.Resizable, Roo.util.Observable, {
- resizeChild : false,
- adjustments : [0, 0],
- minWidth : 5,
- minHeight : 5,
- maxWidth : 10000,
- maxHeight : 10000,
- enabled : true,
- animate : false,
- duration : .35,
- dynamic : false,
- handles : false,
- multiDirectional : false,
- disableTrackOver : false,
- easing : 'easeOutStrong',
- widthIncrement : 0,
- heightIncrement : 0,
- pinned : false,
- width : null,
- height : null,
- preserveRatio : false,
- transparent: false,
- minX: 0,
- minY: 0,
- draggable: false,
+Roo.extend(Roo.Button, Roo.util.Observable, {
+ /**
+ *
+ */
+
+ /**
+ * Read-only. True if this button is hidden
+ * @type Boolean
+ */
+ hidden : false,
+ /**
+ * Read-only. True if this button is disabled
+ * @type Boolean
+ */
+ disabled : false,
+ /**
+ * Read-only. True if this button is pressed (only if enableToggle = true)
+ * @type Boolean
+ */
+ pressed : false,
- /**
- * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
- */
- constrainTo: undefined,
- /**
- * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
- */
- resizeRegion: undefined,
+ /**
+ * @cfg {Number} tabIndex
+ * The DOM tabIndex for this button (defaults to undefined)
+ */
+ tabIndex : undefined,
+ /**
+ * @cfg {Boolean} enableToggle
+ * True to enable pressed/not pressed toggling (defaults to false)
+ */
+ enableToggle: false,
+ /**
+ * @cfg {Roo.menu.Menu} menu
+ * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
+ */
+ menu : undefined,
+ /**
+ * @cfg {String} menuAlign
+ * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
+ */
+ menuAlign : "tl-bl?",
/**
- * Perform a manual resize
- * @param {Number} width
- * @param {Number} height
+ * @cfg {String} iconCls
+ * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
*/
- resizeTo : function(width, height){
- this.el.setSize(width, height);
- this.updateChildSize();
- this.fireEvent("resize", this, width, height, null);
- },
+ iconCls : undefined,
+ /**
+ * @cfg {String} type
+ * The button's type, corresponding to the DOM input element type attribute. Either "submit," "reset" or "button" (default).
+ */
+ type : 'button',
// private
- startSizing : function(e, handle){
- this.fireEvent("beforeresize", this, e);
- if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
-
- if(!this.overlay){
- this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: " "});
- this.overlay.unselectable();
- this.overlay.enableDisplayMode("block");
- this.overlay.on("mousemove", this.onMouseMove, this);
- this.overlay.on("mouseup", this.onMouseUp, this);
- }
- this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
+ menuClassTarget: 'tr',
- this.resizing = true;
- this.startBox = this.el.getBox();
- this.startPoint = e.getXY();
- this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
- (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+ /**
+ * @cfg {String} clickEvent
+ * The type of event to map to the button's event handler (defaults to 'click')
+ */
+ clickEvent : 'click',
- this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- this.overlay.show();
+ /**
+ * @cfg {Boolean} handleMouseEvents
+ * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
+ */
+ handleMouseEvents : true,
- if(this.constrainTo) {
- var ct = Roo.get(this.constrainTo);
- this.resizeRegion = ct.getRegion().adjust(
- ct.getFrameWidth('t'),
- ct.getFrameWidth('l'),
- -ct.getFrameWidth('b'),
- -ct.getFrameWidth('r')
- );
- }
+ /**
+ * @cfg {String} tooltipType
+ * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
+ */
+ tooltipType : 'qtip',
- this.proxy.setStyle('visibility', 'hidden'); // workaround display none
- this.proxy.show();
- this.proxy.setBox(this.startBox);
- if(!this.dynamic){
- this.proxy.setStyle('visibility', 'visible');
- }
- }
- },
+ /**
+ * @cfg {String} cls
+ * A CSS class to apply to the button's main element.
+ */
+
+ /**
+ * @cfg {Roo.Template} template (Optional)
+ * An {@link Roo.Template} with which to create the Button's main element. This Template must
+ * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
+ * require code modifications if required elements (e.g. a button) aren't present.
+ */
// private
- onMouseDown : function(handle, e){
- if(this.enabled){
- e.stopEvent();
- this.activeHandle = handle;
- this.startSizing(e, handle);
+ render : function(renderTo){
+ var btn;
+ if(this.hideParent){
+ this.parentEl = Roo.get(renderTo);
}
- },
-
- // private
- onMouseUp : function(e){
- var size = this.resizeElement();
- this.resizing = false;
- this.handleOut();
- this.overlay.hide();
- this.proxy.hide();
- this.fireEvent("resize", this, size.width, size.height, e);
- },
-
- // private
- updateChildSize : function(){
-
- if(this.resizeChild){
- var el = this.el;
- var child = this.resizeChild;
- var adj = this.adjustments;
- if(el.dom.offsetWidth){
- var b = el.getSize(true);
- child.setSize(b.width+adj[0], b.height+adj[1]);
+ if(!this.dhconfig){
+ if(!this.template){
+ if(!Roo.Button.buttonTemplate){
+ // hideous table template
+ Roo.Button.buttonTemplate = new Roo.Template(
+ '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
+ '<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
+ "</tr></tbody></table>");
+ }
+ this.template = Roo.Button.buttonTemplate;
}
- // Second call here for IE
- // The first call enables instant resizing and
- // the second call corrects scroll bars if they
- // exist
- if(Roo.isIE){
- setTimeout(function(){
- if(el.dom.offsetWidth){
- var b = el.getSize(true);
- child.setSize(b.width+adj[0], b.height+adj[1]);
- }
- }, 10);
+ btn = this.template.append(renderTo, [this.text || ' ', this.type], true);
+ var btnEl = btn.child("button:first");
+ btnEl.on('focus', this.onFocus, this);
+ btnEl.on('blur', this.onBlur, this);
+ if(this.cls){
+ btn.addClass(this.cls);
+ }
+ if(this.icon){
+ btnEl.setStyle('background-image', 'url(' +this.icon +')');
+ }
+ if(this.iconCls){
+ btnEl.addClass(this.iconCls);
+ if(!this.cls){
+ btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+ }
}
+ if(this.tabIndex !== undefined){
+ btnEl.dom.tabIndex = this.tabIndex;
+ }
+ if(this.tooltip){
+ if(typeof this.tooltip == 'object'){
+ Roo.QuickTips.tips(Roo.apply({
+ target: btnEl.id
+ }, this.tooltip));
+ } else {
+ btnEl.dom[this.tooltipType] = this.tooltip;
+ }
+ }
+ }else{
+ btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
}
- },
-
- // private
- snap : function(value, inc, min){
- if(!inc || !value) {
- return value;
+ this.el = btn;
+ if(this.id){
+ this.el.dom.id = this.el.id = this.id;
}
- var newValue = value;
- var m = value % inc;
- if(m > 0){
- if(m > (inc/2)){
- newValue = value + (inc-m);
- }else{
- newValue = value - m;
- }
+ if(this.menu){
+ this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
+ this.menu.on("show", this.onMenuShow, this);
+ this.menu.on("hide", this.onMenuHide, this);
}
- return Math.max(min, newValue);
- },
-
- // private
- resizeElement : function(){
- var box = this.proxy.getBox();
- if(this.updateBox){
- this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
+ btn.addClass("x-btn");
+ if(Roo.isIE && !Roo.isIE7){
+ this.autoWidth.defer(1, this);
}else{
- this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
+ this.autoWidth();
}
- this.updateChildSize();
- if(!this.dynamic){
- this.proxy.hide();
+ if(this.handleMouseEvents){
+ btn.on("mouseover", this.onMouseOver, this);
+ btn.on("mouseout", this.onMouseOut, this);
+ btn.on("mousedown", this.onMouseDown, this);
}
- return box;
- },
-
- // private
- constrain : function(v, diff, m, mx){
- if(v - diff < m){
- diff = v - m;
- }else if(v - diff > mx){
- diff = mx - v;
+ btn.on(this.clickEvent, this.onClick, this);
+ //btn.on("mouseup", this.onMouseUp, this);
+ if(this.hidden){
+ this.hide();
}
- return diff;
+ if(this.disabled){
+ this.disable();
+ }
+ Roo.ButtonToggleMgr.register(this);
+ if(this.pressed){
+ this.el.addClass("x-btn-pressed");
+ }
+ if(this.repeat){
+ var repeater = new Roo.util.ClickRepeater(btn,
+ typeof this.repeat == "object" ? this.repeat : {}
+ );
+ repeater.on("click", this.onClick, this);
+ }
+
+ this.fireEvent('render', this);
+
+ },
+ /**
+ * Returns the button's underlying element
+ * @return {Roo.Element} The element
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+ /**
+ * Destroys this Button and removes any listeners.
+ */
+ destroy : function(){
+ Roo.ButtonToggleMgr.unregister(this);
+ this.el.removeAllListeners();
+ this.purgeListeners();
+ this.el.remove();
},
// private
- onMouseMove : function(e){
-
- if(this.enabled){
- try{// try catch so if something goes wrong the user doesn't get hung
-
- if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
- return;
- }
-
- //var curXY = this.startPoint;
- var curSize = this.curSize || this.startBox;
- var x = this.startBox.x, y = this.startBox.y;
- var ox = x, oy = y;
- var w = curSize.width, h = curSize.height;
- var ow = w, oh = h;
- var mw = this.minWidth, mh = this.minHeight;
- var mxw = this.maxWidth, mxh = this.maxHeight;
- var wi = this.widthIncrement;
- var hi = this.heightIncrement;
-
- var eventXY = e.getXY();
- var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
- var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
-
- var pos = this.activeHandle.position;
-
- switch(pos){
- case "east":
- w += diffX;
- w = Math.min(Math.max(mw, w), mxw);
- break;
-
- case "south":
- h += diffY;
- h = Math.min(Math.max(mh, h), mxh);
- break;
- case "southeast":
- w += diffX;
- h += diffY;
- w = Math.min(Math.max(mw, w), mxw);
- h = Math.min(Math.max(mh, h), mxh);
- break;
- case "north":
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- break;
- case "hdrag":
-
- if (wi) {
- var adiffX = Math.abs(diffX);
- var sub = (adiffX % wi); // how much
- if (sub > (wi/2)) { // far enough to snap
- diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
- } else {
- // remove difference..
- diffX = (diffX > 0) ? diffX-sub : diffX+sub;
- }
- }
- x += diffX;
- x = Math.max(this.minX, x);
- break;
- case "west":
- diffX = this.constrain(w, diffX, mw, mxw);
- x += diffX;
- w -= diffX;
- break;
- case "northeast":
- w += diffX;
- w = Math.min(Math.max(mw, w), mxw);
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- break;
- case "northwest":
- diffX = this.constrain(w, diffX, mw, mxw);
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- x += diffX;
- w -= diffX;
- break;
- case "southwest":
- diffX = this.constrain(w, diffX, mw, mxw);
- h += diffY;
- h = Math.min(Math.max(mh, h), mxh);
- x += diffX;
- w -= diffX;
- break;
- }
-
- var sw = this.snap(w, wi, mw);
- var sh = this.snap(h, hi, mh);
- if(sw != w || sh != h){
- switch(pos){
- case "northeast":
- y -= sh - h;
- break;
- case "north":
- y -= sh - h;
- break;
- case "southwest":
- x -= sw - w;
- break;
- case "west":
- x -= sw - w;
- break;
- case "northwest":
- x -= sw - w;
- y -= sh - h;
- break;
+ autoWidth : function(){
+ if(this.el){
+ this.el.setWidth("auto");
+ if(Roo.isIE7 && Roo.isStrict){
+ var ib = this.el.child('button');
+ if(ib && ib.getWidth() > 20){
+ ib.clip();
+ ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
}
- w = sw;
- h = sh;
}
-
- if(this.preserveRatio){
- switch(pos){
- case "southeast":
- case "east":
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- w = ow * (h/oh);
- break;
- case "south":
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- break;
- case "northeast":
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- break;
- case "north":
- var tw = w;
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- x += (tw - w) / 2;
- break;
- case "southwest":
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- var tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case "west":
- var th = h;
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- y += (th - h) / 2;
- var tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case "northwest":
- var tw = w;
- var th = h;
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- w = ow * (h/oh);
- y += th - h;
- x += tw - w;
- break;
-
+ if(this.minWidth){
+ if(this.hidden){
+ this.el.beginMeasure();
+ }
+ if(this.el.getWidth() < this.minWidth){
+ this.el.setWidth(this.minWidth);
+ }
+ if(this.hidden){
+ this.el.endMeasure();
}
}
- if (pos == 'hdrag') {
- w = ow;
- }
- this.proxy.setBounds(x, y, w, h);
- if(this.dynamic){
- this.resizeElement();
- }
- }catch(e){}
}
- this.fireEvent("resizing", this, x, y, w, h, e);
},
- // private
- handleOver : function(){
- if(this.enabled){
- this.el.addClass("x-resizable-over");
- }
+ /**
+ * Assigns this button's click handler
+ * @param {Function} handler The function to call when the button is clicked
+ * @param {Object} scope (optional) Scope for the function passed in
+ */
+ setHandler : function(handler, scope){
+ this.handler = handler;
+ this.scope = scope;
},
-
- // private
- handleOut : function(){
- if(!this.resizing){
- this.el.removeClass("x-resizable-over");
+
+ /**
+ * Sets this button's text
+ * @param {String} text The button text
+ */
+ setText : function(text){
+ this.text = text;
+ if(this.el){
+ this.el.child("td.x-btn-center button.x-btn-text").update(text);
}
+ this.autoWidth();
},
-
+
/**
- * Returns the element this component is bound to.
- * @return {Roo.Element}
+ * Gets the text for this button
+ * @return {String} The button text
*/
- getEl : function(){
- return this.el;
+ getText : function(){
+ return this.text;
},
-
+
/**
- * Returns the resizeChild element (or null).
- * @return {Roo.Element}
+ * Show this button
*/
- getResizeChild : function(){
- return this.resizeChild;
+ show: function(){
+ this.hidden = false;
+ if(this.el){
+ this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
+ }
},
- groupHandler : function()
- {
-
+
+ /**
+ * Hide this button
+ */
+ hide: function(){
+ this.hidden = true;
+ if(this.el){
+ this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
+ }
},
+
/**
- * Destroys this resizable. If the element was wrapped and
- * removeEl is not true then the element remains.
- * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+ * Convenience function for boolean show/hide
+ * @param {Boolean} visible True to show, false to hide
*/
- destroy : function(removeEl){
- this.proxy.remove();
- if(this.overlay){
- this.overlay.removeAllListeners();
- this.overlay.remove();
+ setVisible: function(visible){
+ if(visible) {
+ this.show();
+ }else{
+ this.hide();
}
- var ps = Roo.Resizable.positions;
- for(var k in ps){
- if(typeof ps[k] != "function" && this[ps[k]]){
- var h = this[ps[k]];
- h.el.removeAllListeners();
- h.el.remove();
+ },
+ /**
+ * Similar to toggle, but does not trigger event.
+ * @param {Boolean} state [required] Force a particular state
+ */
+ setPressed : function(state)
+ {
+ if(state != this.pressed){
+ if(state){
+ this.el.addClass("x-btn-pressed");
+ this.pressed = true;
+ }else{
+ this.el.removeClass("x-btn-pressed");
+ this.pressed = false;
}
}
- if(removeEl){
- this.el.update("");
- this.el.remove();
+ },
+
+ /**
+ * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
+ * @param {Boolean} state (optional) Force a particular state
+ */
+ toggle : function(state){
+ state = state === undefined ? !this.pressed : state;
+ if(state != this.pressed){
+ if(state){
+ this.el.addClass("x-btn-pressed");
+ this.pressed = true;
+ this.fireEvent("toggle", this, true);
+ }else{
+ this.el.removeClass("x-btn-pressed");
+ this.pressed = false;
+ this.fireEvent("toggle", this, false);
+ }
+ if(this.toggleHandler){
+ this.toggleHandler.call(this.scope || this, this, state);
+ }
}
- }
-});
-
-// private
-// hash to map config positions to true positions
-Roo.Resizable.positions = {
- n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast",
- hd: "hdrag"
-};
-
-// private
-Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
- if(!this.tpl){
- // only initialize the template if resizable is used
- var tpl = Roo.DomHelper.createTemplate(
- {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
- );
- tpl.compile();
- Roo.Resizable.Handle.prototype.tpl = tpl;
- }
- this.position = pos;
- this.rz = rz;
- // show north drag fro topdra
- var handlepos = pos == 'hdrag' ? 'north' : pos;
+ },
- this.el = this.tpl.append(rz.el.dom, [handlepos], true);
- if (pos == 'hdrag') {
- this.el.setStyle('cursor', 'pointer');
- }
- this.el.unselectable();
- if(transparent){
- this.el.setOpacity(0);
- }
- this.el.on("mousedown", this.onMouseDown, this);
- if(!disableTrackOver){
- this.el.on("mouseover", this.onMouseOver, this);
- this.el.on("mouseout", this.onMouseOut, this);
- }
-};
+
+
+ /**
+ * Focus the button
+ */
+ focus : function(){
+ this.el.child('button:first').focus();
+ },
+
+ /**
+ * Disable this button
+ */
+ disable : function(){
+ if(this.el){
+ this.el.addClass("x-btn-disabled");
+ }
+ this.disabled = true;
+ },
+
+ /**
+ * Enable this button
+ */
+ enable : function(){
+ if(this.el){
+ this.el.removeClass("x-btn-disabled");
+ }
+ this.disabled = false;
+ },
-// private
-Roo.Resizable.Handle.prototype = {
- afterResize : function(rz){
- Roo.log('after?');
- // do nothing
+ /**
+ * Convenience function for boolean enable/disable
+ * @param {Boolean} enabled True to enable, false to disable
+ */
+ setDisabled : function(v){
+ this[v !== true ? "enable" : "disable"]();
},
+
// private
- onMouseDown : function(e){
- this.rz.onMouseDown(this, e);
+ onClick : function(e)
+ {
+ if(e){
+ e.preventDefault();
+ }
+ if(e.button != 0){
+ return;
+ }
+ if(!this.disabled){
+ if(this.enableToggle){
+ this.toggle();
+ }
+ if(this.menu && !this.menu.isVisible()){
+ this.menu.show(this.el, this.menuAlign);
+ }
+ this.fireEvent("click", this, e);
+ if(this.handler){
+ this.el.removeClass("x-btn-over");
+ this.handler.call(this.scope || this, this, e);
+ }
+ }
},
// private
onMouseOver : function(e){
- this.rz.handleOver(this, e);
+ if(!this.disabled){
+ this.el.addClass("x-btn-over");
+ this.fireEvent('mouseover', this, e);
+ }
},
// private
onMouseOut : function(e){
- this.rz.handleOut(this, e);
- }
-};/*
+ if(!e.within(this.el, true)){
+ this.el.removeClass("x-btn-over");
+ this.fireEvent('mouseout', this, e);
+ }
+ },
+ // private
+ onFocus : function(e){
+ if(!this.disabled){
+ this.el.addClass("x-btn-focus");
+ }
+ },
+ // private
+ onBlur : function(e){
+ this.el.removeClass("x-btn-focus");
+ },
+ // private
+ onMouseDown : function(e){
+ if(!this.disabled && e.button == 0){
+ this.el.addClass("x-btn-click");
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
+ }
+ },
+ // private
+ onMouseUp : function(e){
+ if(e.button == 0){
+ this.el.removeClass("x-btn-click");
+ Roo.get(document).un('mouseup', this.onMouseUp, this);
+ }
+ },
+ // private
+ onMenuShow : function(e){
+ this.el.addClass("x-btn-menu-active");
+ },
+ // private
+ onMenuHide : function(e){
+ this.el.removeClass("x-btn-menu-active");
+ }
+});
+
+// Private utility class used by Button
+Roo.ButtonToggleMgr = function(){
+ var groups = {};
+
+ function toggleGroup(btn, state){
+ if(state){
+ var g = groups[btn.toggleGroup];
+ for(var i = 0, l = g.length; i < l; i++){
+ if(g[i] != btn){
+ g[i].toggle(false);
+ }
+ }
+ }
+ }
+
+ return {
+ register : function(btn){
+ if(!btn.toggleGroup){
+ return;
+ }
+ var g = groups[btn.toggleGroup];
+ if(!g){
+ g = groups[btn.toggleGroup] = [];
+ }
+ g.push(btn);
+ btn.on("toggle", toggleGroup);
+ },
+
+ unregister : function(btn){
+ if(!btn.toggleGroup){
+ return;
+ }
+ var g = groups[btn.toggleGroup];
+ if(g){
+ g.remove(btn);
+ btn.un("toggle", toggleGroup);
+ }
+ }
+ };
+}();/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
- * @class Roo.Editor
- * @extends Roo.Component
- * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
+ * @class Roo.SplitButton
+ * @extends Roo.Button
+ * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
+ * click event of the button. Typically this would be used to display a dropdown menu that provides additional
+ * options to the primary button action, but any custom handler can provide the arrowclick implementation.
+ * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
+ * @cfg {String} arrowTooltip The title attribute of the arrow
* @constructor
- * Create a new Editor
- * @param {Roo.form.Field} field The Field object (or descendant)
+ * Create a new menu button
+ * @param {String/HTMLElement/Element} renderTo The element to append the button to
* @param {Object} config The config object
*/
-Roo.Editor = function(field, config){
- Roo.Editor.superclass.constructor.call(this, config);
- this.field = field;
- this.addEvents({
- /**
- * @event beforestartedit
- * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
- * false from the handler of this event.
- * @param {Editor} this
- * @param {Roo.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The field value being set
- */
- "beforestartedit" : true,
- /**
- * @event startedit
- * Fires when this editor is displayed
- * @param {Roo.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The starting field value
- */
- "startedit" : true,
- /**
- * @event beforecomplete
- * Fires after a change has been made to the field, but before the change is reflected in the underlying
- * field. Saving the change to the field can be canceled by returning false from the handler of this event.
- * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
- * event will not fire since no edit actually occurred.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "beforecomplete" : true,
- /**
- * @event complete
- * Fires after editing is complete and any changed value has been written to the underlying field.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "complete" : true,
- /**
- * @event specialkey
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
- * {@link Roo.EventObject#getKey} to determine which key was pressed.
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event object
- */
- "specialkey" : true
- });
-};
-
-Roo.extend(Roo.Editor, Roo.Component, {
- /**
- * @cfg {Boolean/String} autosize
- * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
- * or "height" to adopt the height only (defaults to false)
- */
- /**
- * @cfg {Boolean} revertInvalid
- * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
- * validation fails (defaults to true)
- */
- /**
- * @cfg {Boolean} ignoreNoChange
- * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
- * the value has not changed (defaults to false). Applies only to string values - edits for other data types
- * will never be ignored.
- */
- /**
- * @cfg {Boolean} hideEl
- * False to keep the bound element visible while the editor is displayed (defaults to true)
- */
- /**
- * @cfg {Mixed} value
- * The data value of the underlying field (defaults to "")
- */
- value : "",
- /**
- * @cfg {String} alignment
- * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
- */
- alignment: "c-c?",
- /**
- * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
- * for bottom-right shadow (defaults to "frame")
- */
- shadow : "frame",
- /**
- * @cfg {Boolean} constrain True to constrain the editor to the viewport
- */
- constrain : false,
- /**
- * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
- */
- completeOnEnter : false,
- /**
- * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
- */
- cancelOnEsc : false,
+Roo.SplitButton = function(renderTo, config){
+ Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
/**
- * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
+ * @event arrowclick
+ * Fires when this button's arrow is clicked
+ * @param {SplitButton} this
+ * @param {EventObject} e The click event
*/
- updateEl : false,
+ this.addEvents({"arrowclick":true});
+};
- // private
- onRender : function(ct, position){
- this.el = new Roo.Layer({
- shadow: this.shadow,
- cls: "x-editor",
- parentEl : ct,
- shim : this.shim,
- shadowOffset:4,
- id: this.id,
- constrain: this.constrain
- });
- this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
- if(this.field.msgTarget != 'title'){
- this.field.msgTarget = 'qtip';
+Roo.extend(Roo.SplitButton, Roo.Button, {
+ render : function(renderTo){
+ // this is one sweet looking template!
+ var tpl = new Roo.Template(
+ '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
+ '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
+ '<tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
+ "</tbody></table></td><td>",
+ '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
+ '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button"> </button></td><td class="x-btn-right"><i> </i></td></tr>',
+ "</tbody></table></td></tr></table>"
+ );
+ var btn = tpl.append(renderTo, [this.text, this.type], true);
+ var btnEl = btn.child("button");
+ if(this.cls){
+ btn.addClass(this.cls);
}
- this.field.render(this.el);
- if(Roo.isGecko){
- this.field.el.dom.setAttribute('autocomplete', 'off');
+ if(this.icon){
+ btnEl.setStyle('background-image', 'url(' +this.icon +')');
}
- this.field.on("specialkey", this.onSpecialKey, this);
- if(this.swallowKeys){
- this.field.el.swallowEvent(['keydown','keypress']);
+ if(this.iconCls){
+ btnEl.addClass(this.iconCls);
+ if(!this.cls){
+ btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+ }
}
- this.field.show();
- this.field.on("blur", this.onBlur, this);
- if(this.field.grow){
- this.field.on("autosize", this.el.sync, this.el, {delay:1});
+ this.el = btn;
+ if(this.handleMouseEvents){
+ btn.on("mouseover", this.onMouseOver, this);
+ btn.on("mouseout", this.onMouseOut, this);
+ btn.on("mousedown", this.onMouseDown, this);
+ btn.on("mouseup", this.onMouseUp, this);
}
- },
-
- onSpecialKey : function(field, e)
- {
- //Roo.log('editor onSpecialKey');
- if(this.completeOnEnter && e.getKey() == e.ENTER){
- e.stopEvent();
- this.completeEdit();
- return;
+ btn.on(this.clickEvent, this.onClick, this);
+ if(this.tooltip){
+ if(typeof this.tooltip == 'object'){
+ Roo.QuickTips.tips(Roo.apply({
+ target: btnEl.id
+ }, this.tooltip));
+ } else {
+ btnEl.dom[this.tooltipType] = this.tooltip;
+ }
}
- // do not fire special key otherwise it might hide close the editor...
- if(e.getKey() == e.ENTER){
- return;
+ if(this.arrowTooltip){
+ btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
}
- if(this.cancelOnEsc && e.getKey() == e.ESC){
- this.cancelEdit();
- return;
- }
- this.fireEvent('specialkey', field, e);
-
- },
-
- /**
- * Starts the editing process and shows the editor.
- * @param {String/HTMLElement/Element} el The element to edit
- * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
- * to the innerHTML of el.
- */
- startEdit : function(el, value){
- if(this.editing){
- this.completeEdit();
+ if(this.hidden){
+ this.hide();
}
- this.boundEl = Roo.get(el);
- var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
- if(!this.rendered){
- this.render(this.parentEl || document.body);
+ if(this.disabled){
+ this.disable();
}
- if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
- return;
+ if(this.pressed){
+ this.el.addClass("x-btn-pressed");
}
- this.startValue = v;
- this.field.setValue(v);
- if(this.autoSize){
- var sz = this.boundEl.getSize();
- switch(this.autoSize){
- case "width":
- this.setSize(sz.width, "");
- break;
- case "height":
- this.setSize("", sz.height);
- break;
- default:
- this.setSize(sz.width, sz.height);
- }
+ if(Roo.isIE && !Roo.isIE7){
+ this.autoWidth.defer(1, this);
+ }else{
+ this.autoWidth();
}
- this.el.alignTo(this.boundEl, this.alignment);
- this.editing = true;
- if(Roo.QuickTips){
- Roo.QuickTips.disable();
+ if(this.menu){
+ this.menu.on("show", this.onMenuShow, this);
+ this.menu.on("hide", this.onMenuHide, this);
}
- this.show();
+ this.fireEvent('render', this);
},
- /**
- * Sets the height and width of this editor.
- * @param {Number} width The new width
- * @param {Number} height The new height
- */
- setSize : function(w, h){
- this.field.setSize(w, h);
+ // private
+ autoWidth : function(){
if(this.el){
- this.el.sync();
- }
+ var tbl = this.el.child("table:first");
+ var tbl2 = this.el.child("table:last");
+ this.el.setWidth("auto");
+ tbl.setWidth("auto");
+ if(Roo.isIE7 && Roo.isStrict){
+ var ib = this.el.child('button:first');
+ if(ib && ib.getWidth() > 20){
+ ib.clip();
+ ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
+ }
+ }
+ if(this.minWidth){
+ if(this.hidden){
+ this.el.beginMeasure();
+ }
+ if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
+ tbl.setWidth(this.minWidth-tbl2.getWidth());
+ }
+ if(this.hidden){
+ this.el.endMeasure();
+ }
+ }
+ this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
+ }
},
-
/**
- * Realigns the editor to the bound field based on the current alignment config value.
+ * Sets this button's click handler
+ * @param {Function} handler The function to call when the button is clicked
+ * @param {Object} scope (optional) Scope for the function passed above
*/
- realign : function(){
- this.el.alignTo(this.boundEl, this.alignment);
+ setHandler : function(handler, scope){
+ this.handler = handler;
+ this.scope = scope;
},
-
+
/**
- * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
+ * Sets this button's arrow click handler
+ * @param {Function} handler The function to call when the arrow is clicked
+ * @param {Object} scope (optional) Scope for the function passed above
*/
- completeEdit : function(remainVisible){
- if(!this.editing){
- return;
- }
- var v = this.getValue();
- if(this.revertInvalid !== false && !this.field.isValid()){
- v = this.startValue;
- this.cancelEdit(true);
- }
- if(String(v) === String(this.startValue) && this.ignoreNoChange){
- this.editing = false;
- this.hide();
- return;
- }
- if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
- this.editing = false;
- if(this.updateEl && this.boundEl){
- this.boundEl.update(v);
- }
- if(remainVisible !== true){
- this.hide();
- }
- this.fireEvent("complete", this, v, this.startValue);
- }
- },
-
- // private
- onShow : function(){
- this.el.show();
- if(this.hideEl !== false){
- this.boundEl.hide();
- }
- this.field.show();
- if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
- this.fixIEFocus = true;
- this.deferredFocus.defer(50, this);
- }else{
- this.field.focus();
- }
- this.fireEvent("startedit", this.boundEl, this.startValue);
- },
-
- deferredFocus : function(){
- if(this.editing){
- this.field.focus();
- }
+ setArrowHandler : function(handler, scope){
+ this.arrowHandler = handler;
+ this.scope = scope;
},
-
+
/**
- * Cancels the editing process and hides the editor without persisting any changes. The field value will be
- * reverted to the original starting value.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
- * cancel (defaults to false)
+ * Focus the button
*/
- cancelEdit : function(remainVisible){
- if(this.editing){
- this.setValue(this.startValue);
- if(remainVisible !== true){
- this.hide();
- }
+ focus : function(){
+ if(this.el){
+ this.el.child("button:first").focus();
}
},
// private
- onBlur : function(){
- if(this.allowBlur !== true && this.editing){
- this.completeEdit();
+ onClick : function(e){
+ e.preventDefault();
+ if(!this.disabled){
+ if(e.getTarget(".x-btn-menu-arrow-wrap")){
+ if(this.menu && !this.menu.isVisible()){
+ this.menu.show(this.el, this.menuAlign);
+ }
+ this.fireEvent("arrowclick", this, e);
+ if(this.arrowHandler){
+ this.arrowHandler.call(this.scope || this, this, e);
+ }
+ }else{
+ this.fireEvent("click", this, e);
+ if(this.handler){
+ this.handler.call(this.scope || this, this, e);
+ }
+ }
}
},
-
// private
- onHide : function(){
- if(this.editing){
- this.completeEdit();
- return;
- }
- this.field.blur();
- if(this.field.collapse){
- this.field.collapse();
- }
- this.el.hide();
- if(this.hideEl !== false){
- this.boundEl.show();
- }
- if(Roo.QuickTips){
- Roo.QuickTips.enable();
+ onMouseDown : function(e){
+ if(!this.disabled){
+ Roo.fly(e.getTarget("table")).addClass("x-btn-click");
}
},
+ // private
+ onMouseUp : function(e){
+ Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
+ }
+});
- /**
- * Sets the data value of the editor
- * @param {Mixed} value Any valid value supported by the underlying field
- */
- setValue : function(v){
- this.field.setValue(v);
- },
- /**
- * Gets the data value of the editor
- * @return {Mixed} The data value
- */
- getValue : function(){
- return this.field.getValue();
- }
-});/*
+// backwards compat
+Roo.MenuButton = Roo.SplitButton;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
- * @class Roo.BasicDialog
- * @extends Roo.util.Observable
- * @parent none builder
- * Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
- * <pre><code>
-var dlg = new Roo.BasicDialog("my-dlg", {
- height: 200,
- width: 300,
- minHeight: 100,
- minWidth: 150,
- modal: true,
- proxyDrag: true,
- shadow: true
-});
-dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
-dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
-dlg.addButton('Cancel', dlg.hide, dlg);
-dlg.show();
-</code></pre>
- <b>A Dialog should always be a direct child of the body element.</b>
- * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
- * @cfg {String} title Default text to display in the title bar (defaults to null)
- * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
- * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
- * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
- * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
- * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
- * (defaults to null with no animation)
- * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
- * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
- * property for valid values (defaults to 'all')
- * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
- * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
- * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
- * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
- * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
- * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
- * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
- * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
- * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
- * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
- * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
- * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
- * draggable = true (defaults to false)
- * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- * shadow (defaults to false)
- * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
- * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
- * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
- * @cfg {Array} buttons Array of buttons
- * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
+ * @class Roo.Toolbar
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
+ * Basic Toolbar class.
* @constructor
- * Create a new BasicDialog.
- * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
- * @param {Object} config Configuration options
- */
-Roo.BasicDialog = function(el, config){
- this.el = Roo.get(el);
- var dh = Roo.DomHelper;
- if(!this.el && config && config.autoCreate){
- if(typeof config.autoCreate == "object"){
- if(!config.autoCreate.id){
- config.autoCreate.id = el;
- }
- this.el = dh.append(document.body,
- config.autoCreate, true);
- }else{
- this.el = dh.append(document.body,
- {tag: "div", id: el, style:'visibility:hidden;'}, true);
- }
+ * Creates a new Toolbar
+ * @param {Object} container The config object
+ */
+Roo.Toolbar = function(container, buttons, config)
+{
+ /// old consturctor format still supported..
+ if(container instanceof Array){ // omit the container for later rendering
+ buttons = container;
+ config = buttons;
+ container = null;
}
- el = this.el;
- el.setDisplayed(true);
- el.hide = this.hideAction;
- this.id = el.id;
- el.addClass("x-dlg");
-
- Roo.apply(this, config);
-
- this.proxy = el.createProxy("x-dlg-proxy");
- this.proxy.hide = this.hideAction;
- this.proxy.setOpacity(.5);
- this.proxy.hide();
-
- if(config.width){
- el.setWidth(config.width);
- }
- if(config.height){
- el.setHeight(config.height);
- }
- this.size = el.getSize();
- if(typeof config.x != "undefined" && typeof config.y != "undefined"){
- this.xy = [config.x,config.y];
- }else{
- this.xy = el.getCenterXY(true);
- }
- /** The header element @type Roo.Element */
- this.header = el.child("> .x-dlg-hd");
- /** The body element @type Roo.Element */
- this.body = el.child("> .x-dlg-bd");
- /** The footer element @type Roo.Element */
- this.footer = el.child("> .x-dlg-ft");
-
- if(!this.header){
- this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
- }
- if(!this.body){
- this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
- }
-
- this.header.unselectable();
- if(this.title){
- this.header.update(this.title);
- }
- // this element allows the dialog to be focused for keyboard event
- this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
- this.focusEl.swallowEvent("click", true);
-
- this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
-
- // wrap the body and footer for special rendering
- this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
- if(this.footer){
- this.bwrap.dom.appendChild(this.footer.dom);
- }
-
- this.bg = this.el.createChild({
- tag: "div", cls:"x-dlg-bg",
- html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center"> </div></div></div>'
- });
- this.centerBg = this.bg.child("div.x-dlg-bg-center");
-
-
- if(this.autoScroll !== false && !this.autoTabs){
- this.body.setStyle("overflow", "auto");
- }
-
- this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
-
- if(this.closable !== false){
- this.el.addClass("x-dlg-closable");
- this.close = this.toolbox.createChild({cls:"x-dlg-close"});
- this.close.on("click", this.closeClick, this);
- this.close.addClassOnOver("x-dlg-close-over");
- }
- if(this.collapsible !== false){
- this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
- this.collapseBtn.on("click", this.collapseClick, this);
- this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
- this.header.on("dblclick", this.collapseClick, this);
- }
- if(this.resizable !== false){
- this.el.addClass("x-dlg-resizable");
- this.resizer = new Roo.Resizable(el, {
- minWidth: this.minWidth || 80,
- minHeight:this.minHeight || 80,
- handles: this.resizeHandles || "all",
- pinned: true
- });
- this.resizer.on("beforeresize", this.beforeResize, this);
- this.resizer.on("resize", this.onResize, this);
- }
- if(this.draggable !== false){
- el.addClass("x-dlg-draggable");
- if (!this.proxyDrag) {
- var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
- }
- else {
- var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
- }
- dd.setHandleElId(this.header.id);
- dd.endDrag = this.endMove.createDelegate(this);
- dd.startDrag = this.startMove.createDelegate(this);
- dd.onDrag = this.onDrag.createDelegate(this);
- dd.scroll = false;
- this.dd = dd;
- }
- if(this.modal){
- this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
- this.mask.enableDisplayMode("block");
- this.mask.hide();
- this.el.addClass("x-dlg-modal");
- }
- if(this.shadow){
- this.shadow = new Roo.Shadow({
- mode : typeof this.shadow == "string" ? this.shadow : "sides",
- offset : this.shadowOffset
- });
- }else{
- this.shadowOffset = 0;
- }
- if(Roo.useShims && this.shim !== false){
- this.shim = this.el.createShim();
- this.shim.hide = this.hideAction;
- this.shim.hide();
- }else{
- this.shim = false;
- }
- if(this.autoTabs){
- this.initTabs();
+ if (typeof(container) == 'object' && container.xtype) {
+ config = container;
+ container = config.container;
+ buttons = config.buttons || []; // not really - use items!!
}
- if (this.buttons) {
- var bts= this.buttons;
- this.buttons = [];
- Roo.each(bts, function(b) {
- this.addButton(b);
- }, this);
+ var xitems = [];
+ if (config && config.items) {
+ xitems = config.items;
+ delete config.items;
}
+ Roo.apply(this, config);
+ this.buttons = buttons;
+ if(container){
+ this.render(container);
+ }
+ this.xitems = xitems;
+ Roo.each(xitems, function(b) {
+ this.add(b);
+ }, this);
- this.addEvents({
- /**
- * @event keydown
- * Fires when a key is pressed
- * @param {Roo.BasicDialog} this
- * @param {Roo.EventObject} e
- */
- "keydown" : true,
- /**
- * @event move
- * Fires when this dialog is moved by the user.
- * @param {Roo.BasicDialog} this
- * @param {Number} x The new page X
- * @param {Number} y The new page Y
- */
- "move" : true,
- /**
- * @event resize
- * Fires when this dialog is resized by the user.
- * @param {Roo.BasicDialog} this
- * @param {Number} width The new width
- * @param {Number} height The new height
- */
- "resize" : true,
- /**
- * @event beforehide
- * Fires before this dialog is hidden.
- * @param {Roo.BasicDialog} this
- */
- "beforehide" : true,
- /**
- * @event hide
- * Fires when this dialog is hidden.
- * @param {Roo.BasicDialog} this
- */
- "hide" : true,
- /**
- * @event beforeshow
- * Fires before this dialog is shown.
- * @param {Roo.BasicDialog} this
- */
- "beforeshow" : true,
- /**
- * @event show
- * Fires when this dialog is shown.
- * @param {Roo.BasicDialog} this
- */
- "show" : true
- });
- el.on("keydown", this.onKeyDown, this);
- el.on("mousedown", this.toFront, this);
- Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
- this.el.hide();
- Roo.DialogManager.register(this);
- Roo.BasicDialog.superclass.constructor.call(this);
};
-Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
- shadowOffset: Roo.isIE ? 6 : 5,
- minHeight: 80,
- minWidth: 200,
- minButtonWidth: 75,
- defaultButton: null,
- buttonAlign: "right",
- tabTag: 'div',
- firstShow: true,
-
+Roo.Toolbar.prototype = {
/**
- * Sets the dialog title text
- * @param {String} text The title text to display
- * @return {Roo.BasicDialog} this
+ * @cfg {Array} items
+ * array of button configs or elements to add (will be converted to a MixedCollection)
*/
- setTitle : function(text){
- this.header.update(text);
- return this;
- },
-
- // private
- closeClick : function(){
- this.hide();
- },
-
- // private
- collapseClick : function(){
- this[this.collapsed ? "expand" : "collapse"]();
- },
-
+ items: false,
/**
- * Collapses the dialog to its minimized state (only the title bar is visible).
- * Equivalent to the user clicking the collapse dialog button.
+ * @cfg {String/HTMLElement/Element} container
+ * The id or element that will contain the toolbar
*/
- collapse : function(){
- if(!this.collapsed){
- this.collapsed = true;
- this.el.addClass("x-dlg-collapsed");
- this.restoreHeight = this.el.getHeight();
- this.resizeTo(this.el.getWidth(), this.header.getHeight());
+ // private
+ render : function(ct){
+ this.el = Roo.get(ct);
+ if(this.cls){
+ this.el.addClass(this.cls);
+ }
+ // using a table allows for vertical alignment
+ // 100% width is needed by Safari...
+ this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
+ this.tr = this.el.child("tr", true);
+ var autoId = 0;
+ this.items = new Roo.util.MixedCollection(false, function(o){
+ return o.id || ("item" + (++autoId));
+ });
+ if(this.buttons){
+ this.add.apply(this, this.buttons);
+ delete this.buttons;
}
},
/**
- * Expands a collapsed dialog back to its normal state. Equivalent to the user
- * clicking the expand dialog button.
+ * Adds element(s) to the toolbar -- this function takes a variable number of
+ * arguments of mixed type and adds them to the toolbar.
+ * @param {Mixed} arg1 The following types of arguments are all valid:<br />
+ * <ul>
+ * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
+ * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
+ * <li>Field: Any form field (equivalent to {@link #addField})</li>
+ * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
+ * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
+ * Note that there are a few special strings that are treated differently as explained nRoo.</li>
+ * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
+ * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
+ * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
+ * </ul>
+ * @param {Mixed} arg2
+ * @param {Mixed} etc.
*/
- expand : function(){
- if(this.collapsed){
- this.collapsed = false;
- this.el.removeClass("x-dlg-collapsed");
- this.resizeTo(this.el.getWidth(), this.restoreHeight);
+ add : function(){
+ var a = arguments, l = a.length;
+ for(var i = 0; i < l; i++){
+ this._add(a[i]);
}
},
-
- /**
- * Reinitializes the tabs component, clearing out old tabs and finding new ones.
- * @return {Roo.TabPanel} The tabs component
- */
- initTabs : function(){
- var tabs = this.getTabs();
- while(tabs.getTab(0)){
- tabs.removeTab(0);
+ // private..
+ _add : function(el) {
+
+ if (el.xtype) {
+ el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
}
- this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
- var dom = el.dom;
- tabs.addTab(Roo.id(dom), dom.title);
- dom.title = "";
- });
- tabs.activate(0);
- return tabs;
+
+ if (el.applyTo){ // some kind of form field
+ return this.addField(el);
+ }
+ if (el.render){ // some kind of Toolbar.Item
+ return this.addItem(el);
+ }
+ if (typeof el == "string"){ // string
+ if(el == "separator" || el == "-"){
+ return this.addSeparator();
+ }
+ if (el == " "){
+ return this.addSpacer();
+ }
+ if(el == "->"){
+ return this.addFill();
+ }
+ return this.addText(el);
+
+ }
+ if(el.tagName){ // element
+ return this.addElement(el);
+ }
+ if(typeof el == "object"){ // must be button config?
+ return this.addButton(el);
+ }
+ // and now what?!?!
+ return false;
+
},
-
- // private
- beforeResize : function(){
- this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
+
+ /**
+ * Add an Xtype element
+ * @param {Object} xtype Xtype Object
+ * @return {Object} created Object
+ */
+ addxtype : function(e){
+ return this.add(e);
},
-
- // private
- onResize : function(){
- this.refreshSize();
- this.syncBodyHeight();
- this.adjustAssets();
- this.focus();
- this.fireEvent("resize", this, this.size.width, this.size.height);
+
+ /**
+ * Returns the Element for this toolbar.
+ * @return {Roo.Element}
+ */
+ getEl : function(){
+ return this.el;
},
-
- // private
- onKeyDown : function(e){
- if(this.isVisible()){
- this.fireEvent("keydown", this, e);
- }
+
+ /**
+ * Adds a separator
+ * @return {Roo.Toolbar.Item} The separator item
+ */
+ addSeparator : function(){
+ return this.addItem(new Roo.Toolbar.Separator());
},
/**
- * Resizes the dialog.
- * @param {Number} width
- * @param {Number} height
- * @return {Roo.BasicDialog} this
+ * Adds a spacer element
+ * @return {Roo.Toolbar.Spacer} The spacer item
*/
- resizeTo : function(width, height){
- this.el.setSize(width, height);
- this.size = {width: width, height: height};
- this.syncBodyHeight();
- if(this.fixedcenter){
- this.center();
- }
- if(this.isVisible()){
- this.constrainXY();
- this.adjustAssets();
- }
- this.fireEvent("resize", this, width, height);
- return this;
+ addSpacer : function(){
+ return this.addItem(new Roo.Toolbar.Spacer());
},
-
/**
- * Resizes the dialog to fit the specified content size.
- * @param {Number} width
- * @param {Number} height
- * @return {Roo.BasicDialog} this
+ * Adds a fill element that forces subsequent additions to the right side of the toolbar
+ * @return {Roo.Toolbar.Fill} The fill item
*/
- setContentSize : function(w, h){
- h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
- w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
- //if(!this.el.isBorderBox()){
- h += this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
- w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
- //}
- if(this.tabs){
- h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
- w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
- }
- this.resizeTo(w, h);
- return this;
+ addFill : function(){
+ return this.addItem(new Roo.Toolbar.Fill());
},
/**
- * Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be
- * executed in response to a particular key being pressed while the dialog is active.
- * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
- * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function
- * @return {Roo.BasicDialog} this
+ * Adds any standard HTML element to the toolbar
+ * @param {String/HTMLElement/Element} el The element or id of the element to add
+ * @return {Roo.Toolbar.Item} The element's item
*/
- addKeyListener : function(key, fn, scope){
- var keyCode, shift, ctrl, alt;
- if(typeof key == "object" && !(key instanceof Array)){
- keyCode = key["key"];
- shift = key["shift"];
- ctrl = key["ctrl"];
- alt = key["alt"];
- }else{
- keyCode = key;
- }
- var handler = function(dlg, e){
- if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
- var k = e.getKey();
- if(keyCode instanceof Array){
- for(var i = 0, len = keyCode.length; i < len; i++){
- if(keyCode[i] == k){
- fn.call(scope || window, dlg, k, e);
- return;
- }
- }
- }else{
- if(k == keyCode){
- fn.call(scope || window, dlg, k, e);
- }
- }
- }
- };
- this.on("keydown", handler);
- return this;
+ addElement : function(el){
+ return this.addItem(new Roo.Toolbar.Item(el));
},
-
/**
- * Returns the TabPanel component (creates it if it doesn't exist).
- * Note: If you wish to simply check for the existence of tabs without creating them,
- * check for a null 'tabs' property.
- * @return {Roo.TabPanel} The tabs component
+ * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
+ * @type Roo.util.MixedCollection
*/
- getTabs : function(){
- if(!this.tabs){
- this.el.addClass("x-dlg-auto-tabs");
- this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
- this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
- }
- return this.tabs;
+ items : false,
+
+ /**
+ * Adds any Toolbar.Item or subclass
+ * @param {Roo.Toolbar.Item} item
+ * @return {Roo.Toolbar.Item} The item
+ */
+ addItem : function(item){
+ var td = this.nextBlock();
+ item.render(td);
+ this.items.add(item);
+ return item;
},
-
+
/**
- * Adds a button to the footer section of the dialog.
- * @param {String/Object} config A string becomes the button text, an object can either be a Button config
- * object or a valid Roo.DomHelper element config
- * @param {Function} handler The function called when the button is clicked
- * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
- * @return {Roo.Button} The new button
+ * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
+ * @param {Object/Array} config A button config or array of configs
+ * @return {Roo.Toolbar.Button/Array}
*/
- addButton : function(config, handler, scope){
- var dh = Roo.DomHelper;
- if(!this.footer){
- this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
+ addButton : function(config){
+ if(config instanceof Array){
+ var buttons = [];
+ for(var i = 0, len = config.length; i < len; i++) {
+ buttons.push(this.addButton(config[i]));
+ }
+ return buttons;
}
- if(!this.btnContainer){
- var tb = this.footer.createChild({
-
- cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
- html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
- }, null, true);
- this.btnContainer = tb.firstChild.firstChild.firstChild;
+ var b = config;
+ if(!(config instanceof Roo.Toolbar.Button)){
+ b = config.split ?
+ new Roo.Toolbar.SplitButton(config) :
+ new Roo.Toolbar.Button(config);
}
- var bconfig = {
- handler: handler,
- scope: scope,
- minWidth: this.minButtonWidth,
- hideParent:true
- };
- if(typeof config == "string"){
- bconfig.text = config;
- }else{
- if(config.tag){
- bconfig.dhconfig = config;
- }else{
- Roo.apply(bconfig, config);
- }
- }
- var fc = false;
- if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
- bconfig.position = Math.max(0, bconfig.position);
- fc = this.btnContainer.childNodes[bconfig.position];
- }
-
- var btn = new Roo.Button(
- fc ?
- this.btnContainer.insertBefore(document.createElement("td"),fc)
- : this.btnContainer.appendChild(document.createElement("td")),
- //Roo.get(this.btnContainer).createChild( { tag: 'td'}, fc ),
- bconfig
- );
- this.syncBodyHeight();
- if(!this.buttons){
- /**
- * Array of all the buttons that have been added to this dialog via addButton
- * @type Array
- */
- this.buttons = [];
- }
- this.buttons.push(btn);
- return btn;
+ var td = this.nextBlock();
+ b.render(td);
+ this.items.add(b);
+ return b;
},
-
+
/**
- * Sets the default button to be focused when the dialog is displayed.
- * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
- * @return {Roo.BasicDialog} this
+ * Adds text to the toolbar
+ * @param {String} text The text to add
+ * @return {Roo.Toolbar.Item} The element's item
*/
- setDefaultButton : function(btn){
- this.defaultButton = btn;
- return this;
- },
-
- // private
- getHeaderFooterHeight : function(safe){
- var height = 0;
- if(this.header){
- height += this.header.getHeight();
- }
- if(this.footer){
- var fm = this.footer.getMargins();
- height += (this.footer.getHeight()+fm.top+fm.bottom);
- }
- height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
- height += this.centerBg.getPadding("tb");
- return height;
- },
-
- // private
- syncBodyHeight : function()
- {
- var bd = this.body, // the text
- cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
- bw = this.bwrap;
- var height = this.size.height - this.getHeaderFooterHeight(false);
- bd.setHeight(height-bd.getMargins("tb"));
- var hh = this.header.getHeight();
- var h = this.size.height-hh;
- cb.setHeight(h);
-
- bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
- bw.setHeight(h-cb.getPadding("tb"));
-
- bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
- bd.setWidth(bw.getWidth(true));
- if(this.tabs){
- this.tabs.syncHeight();
- if(Roo.isIE){
- this.tabs.el.repaint();
- }
- }
+ addText : function(text){
+ return this.addItem(new Roo.Toolbar.TextItem(text));
},
-
+
/**
- * Restores the previous state of the dialog if Roo.state is configured.
- * @return {Roo.BasicDialog} this
+ * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
+ * @param {Number} index The index where the item is to be inserted
+ * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
+ * @return {Roo.Toolbar.Button/Item}
*/
- restoreState : function(){
- var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
- if(box && box.width){
- this.xy = [box.x, box.y];
- this.resizeTo(box.width, box.height);
- }
- return this;
- },
-
- // private
- beforeShow : function(){
- this.expand();
- if(this.fixedcenter){
- this.xy = this.el.getCenterXY(true);
+ insertButton : function(index, item){
+ if(item instanceof Array){
+ var buttons = [];
+ for(var i = 0, len = item.length; i < len; i++) {
+ buttons.push(this.insertButton(index + i, item[i]));
+ }
+ return buttons;
}
- if(this.modal){
- Roo.get(document.body).addClass("x-body-masked");
- this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- this.mask.show();
+ if (!(item instanceof Roo.Toolbar.Button)){
+ item = new Roo.Toolbar.Button(item);
}
- this.constrainXY();
+ var td = document.createElement("td");
+ this.tr.insertBefore(td, this.tr.childNodes[index]);
+ item.render(td);
+ this.items.insert(index, item);
+ return item;
},
-
- // private
- animShow : function(){
- var b = Roo.get(this.animateTarget).getBox();
- this.proxy.setSize(b.width, b.height);
- this.proxy.setLocation(b.x, b.y);
- this.proxy.show();
- this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
- true, .35, this.showEl.createDelegate(this));
+
+ /**
+ * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
+ * @param {Object} config
+ * @return {Roo.Toolbar.Item} The element's item
+ */
+ addDom : function(config, returnEl){
+ var td = this.nextBlock();
+ Roo.DomHelper.overwrite(td, config);
+ var ti = new Roo.Toolbar.Item(td.firstChild);
+ ti.render(td);
+ this.items.add(ti);
+ return ti;
},
/**
- * Shows the dialog.
- * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
- * @return {Roo.BasicDialog} this
+ * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
+ * @type Roo.util.MixedCollection
*/
- show : function(animateTarget){
- if (this.fireEvent("beforeshow", this) === false){
- return;
- }
- if(this.syncHeightBeforeShow){
- this.syncBodyHeight();
- }else if(this.firstShow){
- this.firstShow = false;
- this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
- }
- this.animateTarget = animateTarget || this.animateTarget;
- if(!this.el.isVisible()){
- this.beforeShow();
- if(this.animateTarget && Roo.get(this.animateTarget)){
- this.animShow();
- }else{
- this.showEl();
- }
- }
- return this;
- },
+ fields : false,
+
+ /**
+ * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
+ * Note: the field should not have been rendered yet. For a field that has already been
+ * rendered, use {@link #addElement}.
+ * @param {Roo.form.Field} field
+ * @return {Roo.ToolbarItem}
+ */
+
+
+ addField : function(field) {
+ if (!this.fields) {
+ var autoId = 0;
+ this.fields = new Roo.util.MixedCollection(false, function(o){
+ return o.id || ("item" + (++autoId));
+ });
- // private
- showEl : function(){
- this.proxy.hide();
- this.el.setXY(this.xy);
- this.el.show();
- this.adjustAssets(true);
- this.toFront();
- this.focus();
- // IE peekaboo bug - fix found by Dave Fenwick
- if(Roo.isIE){
- this.el.repaint();
}
- this.fireEvent("show", this);
+
+ var td = this.nextBlock();
+ field.render(td);
+ var ti = new Roo.Toolbar.Item(td.firstChild);
+ ti.render(td);
+ this.items.add(ti);
+ this.fields.add(field);
+ return ti;
},
-
/**
- * Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
- * dialog itself will receive focus.
+ * Hide the toolbar
+ * @method hide
*/
- focus : function(){
- if(this.defaultButton){
- this.defaultButton.focus();
- }else{
- this.focusEl.focus();
- }
- },
-
- // private
- constrainXY : function(){
- if(this.constraintoviewport !== false){
- if(!this.viewSize){
- if(this.container){
- var s = this.container.getSize();
- this.viewSize = [s.width, s.height];
- }else{
- this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
- }
- }
- var s = Roo.get(this.container||document).getScroll();
-
- var x = this.xy[0], y = this.xy[1];
- var w = this.size.width, h = this.size.height;
- var vw = this.viewSize[0], vh = this.viewSize[1];
- // only move it if it needs it
- var moved = false;
- // first validate right/bottom
- if(x + w > vw+s.left){
- x = vw - w;
- moved = true;
- }
- if(y + h > vh+s.top){
- y = vh - h;
- moved = true;
- }
- // then make sure top/left isn't negative
- if(x < s.left){
- x = s.left;
- moved = true;
- }
- if(y < s.top){
- y = s.top;
- moved = true;
- }
- if(moved){
- // cache xy
- this.xy = [x, y];
- if(this.isVisible()){
- this.el.setLocation(x, y);
- this.adjustAssets();
- }
- }
- }
+
+
+ hide : function()
+ {
+ this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
+ this.el.child('div').hide();
},
-
- // private
- onDrag : function(){
- if(!this.proxyDrag){
- this.xy = this.el.getXY();
- this.adjustAssets();
- }
+ /**
+ * Show the toolbar
+ * @method show
+ */
+ show : function()
+ {
+ this.el.child('div').show();
},
-
+
// private
- adjustAssets : function(doShow){
- var x = this.xy[0], y = this.xy[1];
- var w = this.size.width, h = this.size.height;
- if(doShow === true){
- if(this.shadow){
- this.shadow.show(this.el);
- }
- if(this.shim){
- this.shim.show();
- }
- }
- if(this.shadow && this.shadow.isVisible()){
- this.shadow.show(this.el);
- }
- if(this.shim && this.shim.isVisible()){
- this.shim.setBounds(x, y, w, h);
- }
+ nextBlock : function(){
+ var td = document.createElement("td");
+ this.tr.appendChild(td);
+ return td;
},
// private
- adjustViewport : function(w, h){
- if(!w || !h){
- w = Roo.lib.Dom.getViewWidth();
- h = Roo.lib.Dom.getViewHeight();
- }
- // cache the size
- this.viewSize = [w, h];
- if(this.modal && this.mask.isVisible()){
- this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
- this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ destroy : function(){
+ if(this.items){ // rendered?
+ Roo.destroy.apply(Roo, this.items.items);
}
- if(this.isVisible()){
- this.constrainXY();
+ if(this.fields){ // rendered?
+ Roo.destroy.apply(Roo, this.fields.items);
}
- },
+ Roo.Element.uncache(this.el, this.tr);
+ }
+};
+/**
+ * @class Roo.Toolbar.Item
+ * The base class that other classes should extend in order to get some basic common toolbar item functionality.
+ * @constructor
+ * Creates a new Item
+ * @param {HTMLElement} el
+ */
+Roo.Toolbar.Item = function(el){
+ var cfg = {};
+ if (typeof (el.xtype) != 'undefined') {
+ cfg = el;
+ el = cfg.el;
+ }
+
+ this.el = Roo.getDom(el);
+ this.id = Roo.id(this.el);
+ this.hidden = false;
+
+ this.addEvents({
+ /**
+ * @event render
+ * Fires when the button is rendered
+ * @param {Button} this
+ */
+ 'render': true
+ });
+ Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
+};
+Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
+//Roo.Toolbar.Item.prototype = {
+
/**
- * Destroys this dialog and all its supporting elements (including any tabs, shim,
- * shadow, proxy, mask, etc.) Also removes all event listeners.
- * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+ * Get this item's HTML Element
+ * @return {HTMLElement}
*/
- destroy : function(removeEl){
- if(this.isVisible()){
- this.animateTarget = null;
- this.hide();
- }
- Roo.EventManager.removeResizeListener(this.adjustViewport, this);
- if(this.tabs){
- this.tabs.destroy(removeEl);
- }
- Roo.destroy(
- this.shim,
- this.proxy,
- this.resizer,
- this.close,
- this.mask
- );
- if(this.dd){
- this.dd.unreg();
- }
- if(this.buttons){
- for(var i = 0, len = this.buttons.length; i < len; i++){
- this.buttons[i].destroy();
- }
- }
- this.el.removeAllListeners();
- if(removeEl === true){
- this.el.update("");
- this.el.remove();
- }
- Roo.DialogManager.unregister(this);
- },
-
- // private
- startMove : function(){
- if(this.proxyDrag){
- this.proxy.show();
- }
- if(this.constraintoviewport !== false){
- this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
- }
+ getEl : function(){
+ return this.el;
},
// private
- endMove : function(){
- if(!this.proxyDrag){
- Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
- }else{
- Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
- this.proxy.hide();
- }
- this.refreshSize();
- this.adjustAssets();
- this.focus();
- this.fireEvent("move", this, this.xy[0], this.xy[1]);
+ render : function(td){
+
+ this.td = td;
+ td.appendChild(this.el);
+
+ this.fireEvent('render', this);
},
-
+
/**
- * Brings this dialog to the front of any other visible dialogs
- * @return {Roo.BasicDialog} this
+ * Removes and destroys this item.
*/
- toFront : function(){
- Roo.DialogManager.bringToFront(this);
- return this;
+ destroy : function(){
+ this.td.parentNode.removeChild(this.td);
},
-
+
/**
- * Sends this dialog to the back (under) of any other visible dialogs
- * @return {Roo.BasicDialog} this
+ * Shows this item.
*/
- toBack : function(){
- Roo.DialogManager.sendToBack(this);
- return this;
+ show: function(){
+ this.hidden = false;
+ this.td.style.display = "";
},
-
+
/**
- * Centers this dialog in the viewport
- * @return {Roo.BasicDialog} this
+ * Hides this item.
*/
- center : function(){
- var xy = this.el.getCenterXY(true);
- this.moveTo(xy[0], xy[1]);
- return this;
+ hide: function(){
+ this.hidden = true;
+ this.td.style.display = "none";
},
-
+
/**
- * Moves the dialog's top-left corner to the specified point
- * @param {Number} x
- * @param {Number} y
- * @return {Roo.BasicDialog} this
+ * Convenience function for boolean show/hide.
+ * @param {Boolean} visible true to show/false to hide
*/
- moveTo : function(x, y){
- this.xy = [x,y];
- if(this.isVisible()){
- this.el.setXY(this.xy);
- this.adjustAssets();
+ setVisible: function(visible){
+ if(visible) {
+ this.show();
+ }else{
+ this.hide();
}
- return this;
},
-
+
/**
- * Aligns the dialog to the specified element
- * @param {String/HTMLElement/Roo.Element} element The element to align to.
- * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @return {Roo.BasicDialog} this
+ * Try to focus this item.
*/
- alignTo : function(element, position, offsets){
- this.xy = this.el.getAlignToXY(element, position, offsets);
- if(this.isVisible()){
- this.el.setXY(this.xy);
- this.adjustAssets();
- }
- return this;
+ focus : function(){
+ Roo.fly(this.el).focus();
},
-
+
/**
- * Anchors an element to another element and realigns it when the window is resized.
- * @param {String/HTMLElement/Roo.Element} element The element to align to.
- * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
- * is a number, it is used as the buffer delay (defaults to 50ms).
- * @return {Roo.BasicDialog} this
- */
- anchorTo : function(el, alignment, offsets, monitorScroll){
- var action = function(){
- this.alignTo(el, alignment, offsets);
- };
- Roo.EventManager.onWindowResize(action, this);
- var tm = typeof monitorScroll;
- if(tm != 'undefined'){
- Roo.EventManager.on(window, 'scroll', action, this,
- {buffer: tm == 'number' ? monitorScroll : 50});
- }
- action.call(this);
- return this;
- },
-
- /**
- * Returns true if the dialog is visible
- * @return {Boolean}
+ * Disables this item.
*/
- isVisible : function(){
- return this.el.isVisible();
- },
-
- // private
- animHide : function(callback){
- var b = Roo.get(this.animateTarget).getBox();
- this.proxy.show();
- this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
- this.el.hide();
- this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
- this.hideEl.createDelegate(this, [callback]));
+ disable : function(){
+ Roo.fly(this.td).addClass("x-item-disabled");
+ this.disabled = true;
+ this.el.disabled = true;
},
-
+
/**
- * Hides the dialog.
- * @param {Function} callback (optional) Function to call when the dialog is hidden
- * @return {Roo.BasicDialog} this
+ * Enables this item.
*/
- hide : function(callback){
- if (this.fireEvent("beforehide", this) === false){
- return;
- }
- if(this.shadow){
- this.shadow.hide();
- }
- if(this.shim) {
- this.shim.hide();
- }
- // sometimes animateTarget seems to get set.. causing problems...
- // this just double checks..
- if(this.animateTarget && Roo.get(this.animateTarget)) {
- this.animHide(callback);
- }else{
- this.el.hide();
- this.hideEl(callback);
- }
- return this;
- },
-
- // private
- hideEl : function(callback){
- this.proxy.hide();
- if(this.modal){
- this.mask.hide();
- Roo.get(document.body).removeClass("x-body-masked");
- }
- this.fireEvent("hide", this);
- if(typeof callback == "function"){
- callback();
- }
- },
-
- // private
- hideAction : function(){
- this.setLeft("-10000px");
- this.setTop("-10000px");
- this.setStyle("visibility", "hidden");
- },
-
- // private
- refreshSize : function(){
- this.size = this.el.getSize();
- this.xy = this.el.getXY();
- Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
- },
-
- // private
- // z-index is managed by the DialogManager and may be overwritten at any time
- setZIndex : function(index){
- if(this.modal){
- this.mask.setStyle("z-index", index);
- }
- if(this.shim){
- this.shim.setStyle("z-index", ++index);
- }
- if(this.shadow){
- this.shadow.setZIndex(++index);
- }
- this.el.setStyle("z-index", ++index);
- if(this.proxy){
- this.proxy.setStyle("z-index", ++index);
- }
- if(this.resizer){
- this.resizer.proxy.setStyle("z-index", ++index);
- }
+ enable : function(){
+ Roo.fly(this.td).removeClass("x-item-disabled");
+ this.disabled = false;
+ this.el.disabled = false;
+ }
+});
- this.lastZIndex = index;
- },
- /**
- * Returns the element for this dialog
- * @return {Roo.Element} The underlying dialog Element
- */
- getEl : function(){
- return this.el;
+/**
+ * @class Roo.Toolbar.Separator
+ * @extends Roo.Toolbar.Item
+ * A simple toolbar separator class
+ * @constructor
+ * Creates a new Separator
+ */
+Roo.Toolbar.Separator = function(cfg){
+
+ var s = document.createElement("span");
+ s.className = "ytb-sep";
+ if (cfg) {
+ cfg.el = s;
}
+
+ Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
+};
+Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
+ enable:Roo.emptyFn,
+ disable:Roo.emptyFn,
+ focus:Roo.emptyFn
});
/**
- * @class Roo.DialogManager
- * Provides global access to BasicDialogs that have been created and
- * support for z-indexing (layering) multiple open dialogs.
+ * @class Roo.Toolbar.Spacer
+ * @extends Roo.Toolbar.Item
+ * A simple element that adds extra horizontal space to a toolbar.
+ * @constructor
+ * Creates a new Spacer
*/
-Roo.DialogManager = function(){
- var list = {};
- var accessList = [];
- var front = null;
-
- // private
- var sortDialogs = function(d1, d2){
- return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
- };
+Roo.Toolbar.Spacer = function(cfg){
+ var s = document.createElement("div");
+ s.className = "ytb-spacer";
+ if (cfg) {
+ cfg.el = s;
+ }
+ Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
+};
+Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
+ enable:Roo.emptyFn,
+ disable:Roo.emptyFn,
+ focus:Roo.emptyFn
+});
+/**
+ * @class Roo.Toolbar.Fill
+ * @extends Roo.Toolbar.Spacer
+ * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
+ * @constructor
+ * Creates a new Spacer
+ */
+Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
// private
- var orderDialogs = function(){
- accessList.sort(sortDialogs);
- var seed = Roo.DialogManager.zseed;
- for(var i = 0, len = accessList.length; i < len; i++){
- var dlg = accessList[i];
- if(dlg){
- dlg.setZIndex(seed + (i*10));
- }
- }
- };
-
- return {
- /**
- * The starting z-index for BasicDialogs (defaults to 9000)
- * @type Number The z-index value
- */
- zseed : 9000,
-
- // private
- register : function(dlg){
- list[dlg.id] = dlg;
- accessList.push(dlg);
- },
-
- // private
- unregister : function(dlg){
- delete list[dlg.id];
- var i=0;
- var len=0;
- if(!accessList.indexOf){
- for( i = 0, len = accessList.length; i < len; i++){
- if(accessList[i] == dlg){
- accessList.splice(i, 1);
- return;
- }
- }
- }else{
- i = accessList.indexOf(dlg);
- if(i != -1){
- accessList.splice(i, 1);
- }
- }
- },
-
- /**
- * Gets a registered dialog by id
- * @param {String/Object} id The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- get : function(id){
- return typeof id == "object" ? id : list[id];
- },
-
- /**
- * Brings the specified dialog to the front
- * @param {String/Object} dlg The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- bringToFront : function(dlg){
- dlg = this.get(dlg);
- if(dlg != front){
- front = dlg;
- dlg._lastAccess = new Date().getTime();
- orderDialogs();
- }
- return dlg;
- },
-
- /**
- * Sends the specified dialog to the back
- * @param {String/Object} dlg The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- sendToBack : function(dlg){
- dlg = this.get(dlg);
- dlg._lastAccess = -(new Date().getTime());
- orderDialogs();
- return dlg;
- },
-
- /**
- * Hides all dialogs
- */
- hideAll : function(){
- for(var id in list){
- if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
- list[id].hide();
- }
- }
- }
- };
-}();
+ render : function(td){
+ td.style.width = '100%';
+ Roo.Toolbar.Fill.superclass.render.call(this, td);
+ }
+});
/**
- * @class Roo.LayoutDialog
- * @extends Roo.BasicDialog
- * @children Roo.ContentPanel
- * @parent builder none
- * Dialog which provides adjustments for working with a layout in a Dialog.
- * Add your necessary layout config options to the dialog's config.<br>
- * Example usage (including a nested layout):
- * <pre><code>
-if(!dialog){
- dialog = new Roo.LayoutDialog("download-dlg", {
- modal: true,
- width:600,
- height:450,
- shadow:true,
- minWidth:500,
- minHeight:350,
- autoTabs:true,
- proxyDrag:true,
- // layout config merges with the dialog config
- center:{
- tabPosition: "top",
- alwaysShowTabs: true
- }
- });
- dialog.addKeyListener(27, dialog.hide, dialog);
- dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
- dialog.addButton("Build It!", this.getDownload, this);
-
- // we can even add nested layouts
- var innerLayout = new Roo.BorderLayout("dl-inner", {
- east: {
- initialSize: 200,
- autoScroll:true,
- split:true
- },
- center: {
- autoScroll:true
- }
- });
- innerLayout.beginUpdate();
- innerLayout.add("east", new Roo.ContentPanel("dl-details"));
- innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
- innerLayout.endUpdate(true);
-
- var layout = dialog.getLayout();
- layout.beginUpdate();
- layout.add("center", new Roo.ContentPanel("standard-panel",
- {title: "Download the Source", fitToFrame:true}));
- layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
- {title: "Build your own roo.js"}));
- layout.getRegion("center").showPanel(sp);
- layout.endUpdate();
-}
-</code></pre>
- * @constructor
- * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
- * @param {Object} config configuration options
- */
-Roo.LayoutDialog = function(el, cfg){
-
- var config= cfg;
- if (typeof(cfg) == 'undefined') {
- config = Roo.apply({}, el);
- // not sure why we use documentElement here.. - it should always be body.
- // IE7 borks horribly if we use documentElement.
- // webkit also does not like documentElement - it creates a body element...
- el = Roo.get( document.body || document.documentElement ).createChild();
- //config.autoCreate = true;
+ * @class Roo.Toolbar.TextItem
+ * @extends Roo.Toolbar.Item
+ * A simple class that renders text directly into a toolbar.
+ * @constructor
+ * Creates a new TextItem
+ * @cfg {string} text
+ */
+Roo.Toolbar.TextItem = function(cfg){
+ var text = cfg || "";
+ if (typeof(cfg) == 'object') {
+ text = cfg.text || "";
+ } else {
+ cfg = null;
}
-
-
- config.autoTabs = false;
- Roo.LayoutDialog.superclass.constructor.call(this, el, config);
- this.body.setStyle({overflow:"hidden", position:"relative"});
- this.layout = new Roo.BorderLayout(this.body.dom, config);
- this.layout.monitorWindowResize = false;
- this.el.addClass("x-dlg-auto-layout");
- // fix case when center region overwrites center function
- this.center = Roo.BasicDialog.prototype.center;
- this.on("show", this.layout.layout, this.layout, true);
- if (config.items) {
- var xitems = config.items;
- delete config.items;
- Roo.each(xitems, this.addxtype, this);
+ var s = document.createElement("span");
+ s.className = "ytb-text";
+ s.innerHTML = text;
+ if (cfg) {
+ cfg.el = s;
}
-
+ Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg || s);
};
-Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
-
+Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
- /**
- * @cfg {Roo.LayoutRegion} east
- */
- /**
- * @cfg {Roo.LayoutRegion} west
- */
- /**
- * @cfg {Roo.LayoutRegion} south
+
+ enable:Roo.emptyFn,
+ disable:Roo.emptyFn,
+ focus:Roo.emptyFn,
+ /**
+ * Shows this button
*/
+ show: function(){
+ this.hidden = false;
+ this.el.style.display = "";
+ },
+
/**
- * @cfg {Roo.LayoutRegion} north
+ * Hides this button
*/
+ hide: function(){
+ this.hidden = true;
+ this.el.style.display = "none";
+ }
+
+});
+
+/**
+ * @class Roo.Toolbar.Button
+ * @extends Roo.Button
+ * A button that renders into a toolbar.
+ * @constructor
+ * Creates a new Button
+ * @param {Object} config A standard {@link Roo.Button} config object
+ */
+Roo.Toolbar.Button = function(config){
+ Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
+};
+Roo.extend(Roo.Toolbar.Button, Roo.Button,
+{
+
+
+ render : function(td){
+ this.td = td;
+ Roo.Toolbar.Button.superclass.render.call(this, td);
+ },
+
/**
- * @cfg {Roo.LayoutRegion} center
+ * Removes and destroys this button
*/
+ destroy : function(){
+ Roo.Toolbar.Button.superclass.destroy.call(this);
+ this.td.parentNode.removeChild(this.td);
+ },
+
/**
- * @cfg {Roo.Button} buttons[] Bottom buttons..
+ * Shows this button
*/
-
+ show: function(){
+ this.hidden = false;
+ this.td.style.display = "";
+ },
/**
- * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
- * @deprecated
+ * Hides this button
*/
- endUpdate : function(){
- this.layout.endUpdate();
+ hide: function(){
+ this.hidden = true;
+ this.td.style.display = "none";
},
/**
- * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
- * @deprecated
+ * Disables this item
*/
- beginUpdate : function(){
- this.layout.beginUpdate();
+ disable : function(){
+ Roo.fly(this.td).addClass("x-item-disabled");
+ this.disabled = true;
},
/**
- * Get the BorderLayout for this dialog
- * @return {Roo.BorderLayout}
+ * Enables this item
*/
- getLayout : function(){
- return this.layout;
- },
-
- showEl : function(){
- Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
- if(Roo.isIE7){
- this.layout.layout();
- }
- },
+ enable : function(){
+ Roo.fly(this.td).removeClass("x-item-disabled");
+ this.disabled = false;
+ }
+});
+// backwards compat
+Roo.ToolbarButton = Roo.Toolbar.Button;
- // private
- // Use the syncHeightBeforeShow config option to control this automatically
- syncBodyHeight : function(){
- Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
- if(this.layout){this.layout.layout();}
+/**
+ * @class Roo.Toolbar.SplitButton
+ * @extends Roo.SplitButton
+ * A menu button that renders into a toolbar.
+ * @constructor
+ * Creates a new SplitButton
+ * @param {Object} config A standard {@link Roo.SplitButton} config object
+ */
+Roo.Toolbar.SplitButton = function(config){
+ Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
+};
+Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
+ render : function(td){
+ this.td = td;
+ Roo.Toolbar.SplitButton.superclass.render.call(this, td);
},
- /**
- * Add an xtype element (actually adds to the layout.)
- * @return {Object} xdata xtype object data.
+ /**
+ * Removes and destroys this button
*/
+ destroy : function(){
+ Roo.Toolbar.SplitButton.superclass.destroy.call(this);
+ this.td.parentNode.removeChild(this.td);
+ },
- addxtype : function(c) {
- return this.layout.addxtype(c);
- }
-});/*
- * Based on:
+ /**
+ * Shows this button
+ */
+ show: function(){
+ this.hidden = false;
+ this.td.style.display = "";
+ },
+
+ /**
+ * Hides this button
+ */
+ hide: function(){
+ this.hidden = true;
+ this.td.style.display = "none";
+ }
+});
+
+// backwards compat
+Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
+ * Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*
*/
/**
- * @class Roo.MessageBox
- * @static
- * Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
- * Example usage:
- *<pre><code>
-// Basic alert:
-Roo.Msg.alert('Status', 'Changes saved successfully.');
-
-// Prompt for user data:
-Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
- if (btn == 'ok'){
- // process text value...
+ * @class Roo.PagingToolbar
+ * @extends Roo.Toolbar
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
+ * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
+ * @constructor
+ * Create a new PagingToolbar
+ * @param {Object} config The config object
+ */
+Roo.PagingToolbar = function(el, ds, config)
+{
+ // old args format still supported... - xtype is prefered..
+ if (typeof(el) == 'object' && el.xtype) {
+ // created from xtype...
+ config = el;
+ ds = el.dataSource;
+ el = config.container;
}
-});
+ var items = [];
+ if (config.items) {
+ items = config.items;
+ config.items = [];
+ }
+
+ Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
+ this.ds = ds;
+ this.cursor = 0;
+ this.renderButtons(this.el);
+ this.bind(ds);
+
+ // supprot items array.
+
+ Roo.each(items, function(e) {
+ this.add(Roo.factory(e));
+ },this);
+
+};
-// Show a dialog using config options:
-Roo.Msg.show({
- title:'Save Changes?',
- msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
- buttons: Roo.Msg.YESNOCANCEL,
- fn: processResult,
- animEl: 'elId'
-});
-</code></pre>
- * @static
- */
-Roo.MessageBox = function(){
- var dlg, opt, mask, waitTimer;
- var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
- var buttons, activeTextEl, bwidth;
+Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
+
+ /**
+ * @cfg {String/HTMLElement/Element} container
+ * container The id or element that will contain the toolbar
+ */
+ /**
+ * @cfg {Boolean} displayInfo
+ * True to display the displayMsg (defaults to false)
+ */
+
+
+ /**
+ * @cfg {Number} pageSize
+ * The number of records to display per page (defaults to 20)
+ */
+ pageSize: 20,
+ /**
+ * @cfg {String} displayMsg
+ * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
+ */
+ displayMsg : 'Displaying {0} - {1} of {2}',
+ /**
+ * @cfg {String} emptyMsg
+ * The message to display when no records are found (defaults to "No data to display")
+ */
+ emptyMsg : 'No data to display',
+ /**
+ * Customizable piece of the default paging text (defaults to "Page")
+ * @type String
+ */
+ beforePageText : "Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "of %0")
+ * @type String
+ */
+ afterPageText : "of {0}",
+ /**
+ * Customizable piece of the default paging text (defaults to "First Page")
+ * @type String
+ */
+ firstText : "First Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Previous Page")
+ * @type String
+ */
+ prevText : "Previous Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Next Page")
+ * @type String
+ */
+ nextText : "Next Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Last Page")
+ * @type String
+ */
+ lastText : "Last Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Refresh")
+ * @type String
+ */
+ refreshText : "Refresh",
// private
- var handleButton = function(button){
- dlg.hide();
- Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
- };
+ renderButtons : function(el){
+ Roo.PagingToolbar.superclass.render.call(this, el);
+ this.first = this.addButton({
+ tooltip: this.firstText,
+ cls: "x-btn-icon x-grid-page-first",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["first"])
+ });
+ this.prev = this.addButton({
+ tooltip: this.prevText,
+ cls: "x-btn-icon x-grid-page-prev",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["prev"])
+ });
+ //this.addSeparator();
+ this.add(this.beforePageText);
+ this.field = Roo.get(this.addDom({
+ tag: "input",
+ type: "text",
+ size: "3",
+ value: "1",
+ cls: "x-grid-page-number"
+ }).el);
+ this.field.on("keydown", this.onPagingKeydown, this);
+ this.field.on("focus", function(){this.dom.select();});
+ this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
+ this.field.setHeight(18);
+ //this.addSeparator();
+ this.next = this.addButton({
+ tooltip: this.nextText,
+ cls: "x-btn-icon x-grid-page-next",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["next"])
+ });
+ this.last = this.addButton({
+ tooltip: this.lastText,
+ cls: "x-btn-icon x-grid-page-last",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["last"])
+ });
+ //this.addSeparator();
+ this.loading = this.addButton({
+ tooltip: this.refreshText,
+ cls: "x-btn-icon x-grid-loading",
+ handler: this.onClick.createDelegate(this, ["refresh"])
+ });
- // private
- var handleHide = function(){
- if(opt && opt.cls){
- dlg.el.removeClass(opt.cls);
- }
- if(waitTimer){
- Roo.TaskMgr.stop(waitTimer);
- waitTimer = null;
+ if(this.displayInfo){
+ this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
}
- };
+ },
// private
- var updateButtons = function(b){
- var width = 0;
- if(!b){
- buttons["ok"].hide();
- buttons["cancel"].hide();
- buttons["yes"].hide();
- buttons["no"].hide();
- dlg.footer.dom.style.display = 'none';
- return width;
- }
- dlg.footer.dom.style.display = '';
- for(var k in buttons){
- if(typeof buttons[k] != "function"){
- if(b[k]){
- buttons[k].show();
- buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
- width += buttons[k].el.getWidth()+15;
- }else{
- buttons[k].hide();
- }
- }
+ updateInfo : function(){
+ if(this.displayEl){
+ var count = this.ds.getCount();
+ var msg = count == 0 ?
+ this.emptyMsg :
+ String.format(
+ this.displayMsg,
+ this.cursor+1, this.cursor+count, this.ds.getTotalCount()
+ );
+ this.displayEl.update(msg);
}
- return width;
- };
+ },
// private
- var handleEsc = function(d, k, e){
- if(opt && opt.closable !== false){
- dlg.hide();
- }
- if(e){
- e.stopEvent();
- }
- };
+ onLoad : function(ds, r, o){
+ this.cursor = o.params ? o.params.start : 0;
+ var d = this.getPageData(), ap = d.activePage, ps = d.pages;
- return {
- /**
- * Returns a reference to the underlying {@link Roo.BasicDialog} element
- * @return {Roo.BasicDialog} The BasicDialog element
- */
- getDialog : function(){
- if(!dlg){
- dlg = new Roo.BasicDialog("x-msg-box", {
- autoCreate : true,
- shadow: true,
- draggable: true,
- resizable:false,
- constraintoviewport:false,
- fixedcenter:true,
- collapsible : false,
- shim:true,
- modal: true,
- width:400, height:100,
- buttonAlign:"center",
- closeClick : function(){
- if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
- handleButton("no");
- }else{
- handleButton("cancel");
- }
- }
- });
-
- dlg.on("hide", handleHide);
- mask = dlg.mask;
- dlg.addKeyListener(27, handleEsc);
- buttons = {};
- var bt = this.buttonText;
- buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
- buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
- buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
- buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
- bodyEl = dlg.body.createChild({
+ this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
+ this.field.dom.value = ap;
+ this.first.setDisabled(ap == 1);
+ this.prev.setDisabled(ap == 1);
+ this.next.setDisabled(ap == ps);
+ this.last.setDisabled(ap == ps);
+ this.loading.enable();
+ this.updateInfo();
+ },
- html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar"> </div></div></div>'
- });
- msgEl = bodyEl.dom.firstChild;
- textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
- textboxEl.enableDisplayMode();
- textboxEl.addKeyListener([10,13], function(){
- if(dlg.isVisible() && opt && opt.buttons){
- if(opt.buttons.ok){
- handleButton("ok");
- }else if(opt.buttons.yes){
- handleButton("yes");
- }
- }
- });
- textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
- textareaEl.enableDisplayMode();
- progressEl = Roo.get(bodyEl.dom.childNodes[4]);
- progressEl.enableDisplayMode();
- var pf = progressEl.dom.firstChild;
- if (pf) {
- pp = Roo.get(pf.firstChild);
- pp.setHeight(pf.offsetHeight);
- }
-
- }
- return dlg;
- },
+ // private
+ getPageData : function(){
+ var total = this.ds.getTotalCount();
+ return {
+ total : total,
+ activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
+ pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
+ };
+ },
- /**
- * Updates the message box body text
- * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
- * the XHTML-compliant non-breaking space character '&#160;')
- * @return {Roo.MessageBox} This message box
- */
- updateText : function(text){
- if(!dlg.isVisible() && !opt.width){
- dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
- }
- msgEl.innerHTML = text || ' ';
-
- var cw = Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
- //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
- var w = Math.max(
- Math.min(opt.width || cw , this.maxWidth),
- Math.max(opt.minWidth || this.minWidth, bwidth)
- );
- if(opt.prompt){
- activeTextEl.setWidth(w);
- }
- if(dlg.isVisible()){
- dlg.fixedcenter = false;
- }
- // to big, make it scroll. = But as usual stupid IE does not support
- // !important..
-
- if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
- bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
- bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
- } else {
- bodyEl.dom.style.height = '';
- bodyEl.dom.style.overflowY = '';
- }
- if (cw > w) {
- bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
- } else {
- bodyEl.dom.style.overflowX = '';
- }
-
- dlg.setContentSize(w, bodyEl.getHeight());
- if(dlg.isVisible()){
- dlg.fixedcenter = true;
- }
- return this;
- },
+ // private
+ onLoadError : function(){
+ this.loading.enable();
+ },
- /**
- * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
- * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
- * @param {Number} value Any number between 0 and 1 (e.g., .5)
- * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
- * @return {Roo.MessageBox} This message box
- */
- updateProgress : function(value, text){
- if(text){
- this.updateText(text);
- }
- if (pp) { // weird bug on my firefox - for some reason this is not defined
- pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
+ // private
+ onPagingKeydown : function(e){
+ var k = e.getKey();
+ var d = this.getPageData();
+ if(k == e.RETURN){
+ var v = this.field.dom.value, pageNum;
+ if(!v || isNaN(pageNum = parseInt(v, 10))){
+ this.field.dom.value = d.activePage;
+ return;
}
- return this;
- },
+ pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
+ this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+ e.stopEvent();
+ }
+ else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
+ {
+ var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
+ this.field.dom.value = pageNum;
+ this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
+ e.stopEvent();
+ }
+ else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
+ {
+ var v = this.field.dom.value, pageNum;
+ var increment = (e.shiftKey) ? 10 : 1;
+ if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
+ increment *= -1;
+ }
+ if(!v || isNaN(pageNum = parseInt(v, 10))) {
+ this.field.dom.value = d.activePage;
+ return;
+ }
+ else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
+ {
+ this.field.dom.value = parseInt(v, 10) + increment;
+ pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
+ this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+ }
+ e.stopEvent();
+ }
+ },
- /**
- * Returns true if the message box is currently displayed
- * @return {Boolean} True if the message box is visible, else false
- */
- isVisible : function(){
- return dlg && dlg.isVisible();
- },
+ // private
+ beforeLoad : function(){
+ if(this.loading){
+ this.loading.disable();
+ }
+ },
+ /**
+ * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
+ * @param {String} which (first|prev|next|last|refresh) which button to press.
+ *
+ */
+ // private
+ onClick : function(which){
+ var ds = this.ds;
+ switch(which){
+ case "first":
+ ds.load({params:{start: 0, limit: this.pageSize}});
+ break;
+ case "prev":
+ ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
+ break;
+ case "next":
+ ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
+ break;
+ case "last":
+ var total = ds.getTotalCount();
+ var extra = total % this.pageSize;
+ var lastStart = extra ? (total - extra) : total-this.pageSize;
+ ds.load({params:{start: lastStart, limit: this.pageSize}});
+ break;
+ case "refresh":
+ ds.load({params:{start: this.cursor, limit: this.pageSize}});
+ break;
+ }
+ },
- /**
- * Hides the message box if it is displayed
- */
- hide : function(){
- if(this.isVisible()){
- dlg.hide();
- }
- },
+ /**
+ * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
+ * @param {Roo.data.Store} store The data store to unbind
+ */
+ unbind : function(ds){
+ ds.un("beforeload", this.beforeLoad, this);
+ ds.un("load", this.onLoad, this);
+ ds.un("loadexception", this.onLoadError, this);
+ ds.un("remove", this.updateInfo, this);
+ ds.un("add", this.updateInfo, this);
+ this.ds = undefined;
+ },
- /**
- * Displays a new message box, or reinitializes an existing message box, based on the config options
- * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
- * The following config object properties are supported:
- * <pre>
-Property Type Description
----------- --------------- ------------------------------------------------------------------------------------
-animEl String/Element An id or Element from which the message box should animate as it opens and
- closes (defaults to undefined)
-buttons Object/Boolean A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
- cancel:'Bar'}), or false to not show any buttons (defaults to false)
-closable Boolean False to hide the top-right close button (defaults to true). Note that
- progress and wait dialogs will ignore this property and always hide the
- close button as they can only be closed programmatically.
-cls String A custom CSS class to apply to the message box element
-defaultTextHeight Number The default height in pixels of the message box's multiline textarea if
- displayed (defaults to 75)
-fn Function A callback function to execute after closing the dialog. The arguments to the
- function will be btn (the name of the button that was clicked, if applicable,
- e.g. "ok"), and text (the value of the active text field, if applicable).
- Progress and wait dialogs will ignore this option since they do not respond to
- user actions and can only be closed programmatically, so any required function
- should be called by the same code after it closes the dialog.
-icon String A CSS class that provides a background image to be used as an icon for
- the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
-maxWidth Number The maximum width in pixels of the message box (defaults to 600)
-minWidth Number The minimum width in pixels of the message box (defaults to 100)
-modal Boolean False to allow user interaction with the page while the message box is
- displayed (defaults to true)
-msg String A string that will replace the existing message box body text (defaults
- to the XHTML-compliant non-breaking space character ' ')
-multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
-progress Boolean True to display a progress bar (defaults to false)
-progressText String The text to display inside the progress bar if progress = true (defaults to '')
-prompt Boolean True to prompt the user to enter single-line text (defaults to false)
-proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
-title String The title text
-value String The string value to set into the active textbox element if displayed
-wait Boolean True to display a progress bar (defaults to false)
-width Number The width of the dialog in pixels
+ /**
+ * Binds the paging toolbar to the specified {@link Roo.data.Store}
+ * @param {Roo.data.Store} store The data store to bind
+ */
+ bind : function(ds){
+ ds.on("beforeload", this.beforeLoad, this);
+ ds.on("load", this.onLoad, this);
+ ds.on("loadexception", this.onLoadError, this);
+ ds.on("remove", this.updateInfo, this);
+ ds.on("add", this.updateInfo, this);
+ this.ds = ds;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.Resizable
+ * @extends Roo.util.Observable
+ * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
+ * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
+ * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
+ * the element will be wrapped for you automatically.</p>
+ * <p>Here is the list of valid resize handles:</p>
+ * <pre>
+Value Description
+------ -------------------
+ 'n' north
+ 's' south
+ 'e' east
+ 'w' west
+ 'nw' northwest
+ 'sw' southwest
+ 'se' southeast
+ 'ne' northeast
+ 'hd' horizontal drag
+ 'all' all
</pre>
- *
- * Example usage:
- * <pre><code>
-Roo.Msg.show({
- title: 'Address',
- msg: 'Please enter your address:',
- width: 300,
- buttons: Roo.MessageBox.OKCANCEL,
- multiline: true,
- fn: saveAddress,
- animEl: 'addAddressBtn'
+ * <p>Here's an example showing the creation of a typical Resizable:</p>
+ * <pre><code>
+var resizer = new Roo.Resizable("element-id", {
+ handles: 'all',
+ minWidth: 200,
+ minHeight: 100,
+ maxWidth: 500,
+ maxHeight: 400,
+ pinned: true
});
+resizer.on("resize", myHandler);
</code></pre>
- * @param {Object} config Configuration options
- * @return {Roo.MessageBox} This message box
- */
- show : function(options)
- {
-
- // this causes nightmares if you show one dialog after another
- // especially on callbacks..
-
- if(this.isVisible()){
-
- this.hide();
- Roo.log("[Roo.Messagebox] Show called while message displayed:" );
- Roo.log("Old Dialog Message:" + msgEl.innerHTML );
- Roo.log("New Dialog Message:" + options.msg )
- //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
- //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
-
- }
- var d = this.getDialog();
- opt = options;
- d.setTitle(opt.title || " ");
- d.close.setDisplayed(opt.closable !== false);
- activeTextEl = textboxEl;
- opt.prompt = opt.prompt || (opt.multiline ? true : false);
- if(opt.prompt){
- if(opt.multiline){
- textboxEl.hide();
- textareaEl.show();
- textareaEl.setHeight(typeof opt.multiline == "number" ?
- opt.multiline : this.defaultTextHeight);
- activeTextEl = textareaEl;
- }else{
- textboxEl.show();
- textareaEl.hide();
- }
- }else{
- textboxEl.hide();
- textareaEl.hide();
- }
- progressEl.setDisplayed(opt.progress === true);
- this.updateProgress(0);
- activeTextEl.dom.value = opt.value || "";
- if(opt.prompt){
- dlg.setDefaultButton(activeTextEl);
- }else{
- var bs = opt.buttons;
- var db = null;
- if(bs && bs.ok){
- db = buttons["ok"];
- }else if(bs && bs.yes){
- db = buttons["yes"];
- }
- dlg.setDefaultButton(db);
- }
- bwidth = updateButtons(opt.buttons);
- this.updateText(opt.msg);
- if(opt.cls){
- d.el.addClass(opt.cls);
- }
- d.proxyDrag = opt.proxyDrag === true;
- d.modal = opt.modal !== false;
- d.mask = opt.modal !== false ? mask : false;
- if(!d.isVisible()){
- // force it to the end of the z-index stack so it gets a cursor in FF
- document.body.appendChild(dlg.el.dom);
- d.animateTarget = null;
- d.show(options.animEl);
- }
- dlg.toFront();
- return this;
- },
+ * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
+ * resizer.east.setDisplayed(false);</p>
+ * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
+ * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
+ * resize operation's new size (defaults to [0, 0])
+ * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
+ * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
+ * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+ * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+ * @cfg {Boolean} enabled False to disable resizing (defaults to true)
+ * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
+ * @cfg {Number} width The width of the element in pixels (defaults to null)
+ * @cfg {Number} height The height of the element in pixels (defaults to null)
+ * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
+ * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
+ * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
+ * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
+ * @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
+ * in favor of the handles config option (defaults to false)
+ * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
+ * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
+ * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
+ * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
+ * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
+ * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
+ * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
+ * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+ * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
+ * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
+ * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
+ * @constructor
+ * Create a new resizable component
+ * @param {String/HTMLElement/Roo.Element} el The id or element to resize
+ * @param {Object} config configuration options
+ */
+Roo.Resizable = function(el, config)
+{
+ this.el = Roo.get(el);
- /**
- * Displays a message box with a progress bar. This message box has no buttons and is not closeable by
- * the user. You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
- * and closing the message box when the process is complete.
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @return {Roo.MessageBox} This message box
- */
- progress : function(title, msg){
- this.show({
- title : title,
- msg : msg,
- buttons: false,
- progress:true,
- closable:false,
- minWidth: this.minProgressWidth,
- modal : true
- });
- return this;
- },
+ if(config && config.wrap){
+ config.resizeChild = this.el;
+ this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
+ this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
+ this.el.setStyle("overflow", "hidden");
+ this.el.setPositioning(config.resizeChild.getPositioning());
+ config.resizeChild.clearPositioning();
+ if(!config.width || !config.height){
+ var csize = config.resizeChild.getSize();
+ this.el.setSize(csize.width, csize.height);
+ }
+ if(config.pinned && !config.adjustments){
+ config.adjustments = "auto";
+ }
+ }
- /**
- * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
- * If a callback function is passed it will be called after the user clicks the button, and the
- * id of the button that was clicked will be passed as the only parameter to the callback
- * (could also be the top-right close button).
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @return {Roo.MessageBox} This message box
- */
- alert : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OK,
- fn: fn,
- scope : scope,
- modal : true
- });
- return this;
- },
+ this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
+ this.proxy.unselectable();
+ this.proxy.enableDisplayMode('block');
- /**
- * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
- * interaction while waiting for a long-running process to complete that does not have defined intervals.
- * You are responsible for closing the message box when the process is complete.
- * @param {String} msg The message box body text
- * @param {String} title (optional) The title bar text
- * @return {Roo.MessageBox} This message box
- */
- wait : function(msg, title){
- this.show({
- title : title,
- msg : msg,
- buttons: false,
- closable:false,
- progress:true,
- modal:true,
- width:300,
- wait:true
- });
- waitTimer = Roo.TaskMgr.start({
- run: function(i){
- Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
- },
- interval: 1000
- });
- return this;
- },
+ Roo.apply(this, config);
- /**
- * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
- * If a callback function is passed it will be called after the user clicks either button, and the id of the
- * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @return {Roo.MessageBox} This message box
- */
- confirm : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.YESNO,
- fn: fn,
- scope : scope,
- modal : true
- });
- return this;
- },
+ if(this.pinned){
+ this.disableTrackOver = true;
+ this.el.addClass("x-resizable-pinned");
+ }
+ // if the element isn't positioned, make it relative
+ var position = this.el.getStyle("position");
+ if(position != "absolute" && position != "fixed"){
+ this.el.setStyle("position", "relative");
+ }
+ if(!this.handles){ // no handles passed, must be legacy style
+ this.handles = 's,e,se';
+ if(this.multiDirectional){
+ this.handles += ',n,w';
+ }
+ }
+ if(this.handles == "all"){
+ this.handles = "n s e w ne nw se sw";
+ }
+ var hs = this.handles.split(/\s*?[,;]\s*?| /);
+ var ps = Roo.Resizable.positions;
+ for(var i = 0, len = hs.length; i < len; i++){
+ if(hs[i] && ps[hs[i]]){
+ var pos = ps[hs[i]];
+ this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
+ }
+ }
+ // legacy
+ this.corner = this.southeast;
+
+ // updateBox = the box can move..
+ if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
+ this.updateBox = true;
+ }
- /**
- * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
- * JavaScript's Window.prompt). The prompt can be a single-line or multi-line textbox. If a callback function
- * is passed it will be called after the user clicks either button, and the id of the button that was clicked
- * (could also be the top-right close button) and the text that was entered will be passed as the two
- * parameters to the callback.
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
- * property, or the height in pixels to create the textbox (defaults to false / single-line)
- * @return {Roo.MessageBox} This message box
- */
- prompt : function(title, msg, fn, scope, multiline){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OKCANCEL,
- fn: fn,
- minWidth:250,
- scope : scope,
- prompt:true,
- multiline: multiline,
- modal : true
- });
- return this;
- },
+ this.activeHandle = null;
- /**
- * Button config that displays a single OK button
- * @type Object
- */
- OK : {ok:true},
- /**
- * Button config that displays Yes and No buttons
- * @type Object
- */
- YESNO : {yes:true, no:true},
- /**
- * Button config that displays OK and Cancel buttons
- * @type Object
- */
- OKCANCEL : {ok:true, cancel:true},
- /**
- * Button config that displays Yes, No and Cancel buttons
- * @type Object
- */
- YESNOCANCEL : {yes:true, no:true, cancel:true},
+ if(this.resizeChild){
+ if(typeof this.resizeChild == "boolean"){
+ this.resizeChild = Roo.get(this.el.dom.firstChild, true);
+ }else{
+ this.resizeChild = Roo.get(this.resizeChild, true);
+ }
+ }
+
+ if(this.adjustments == "auto"){
+ var rc = this.resizeChild;
+ var hw = this.west, he = this.east, hn = this.north, hs = this.south;
+ if(rc && (hw || hn)){
+ rc.position("relative");
+ rc.setLeft(hw ? hw.el.getWidth() : 0);
+ rc.setTop(hn ? hn.el.getHeight() : 0);
+ }
+ this.adjustments = [
+ (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
+ (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
+ ];
+ }
+
+ if(this.draggable){
+ this.dd = this.dynamic ?
+ this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
+ this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
+ }
+ // public events
+ this.addEvents({
/**
- * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
- * @type Number
+ * @event beforeresize
+ * Fired before resize is allowed. Set enabled to false to cancel resize.
+ * @param {Roo.Resizable} this
+ * @param {Roo.EventObject} e The mousedown event
*/
- defaultTextHeight : 75,
+ "beforeresize" : true,
/**
- * The maximum width in pixels of the message box (defaults to 600)
- * @type Number
+ * @event resizing
+ * Fired a resizing.
+ * @param {Roo.Resizable} this
+ * @param {Number} x The new x position
+ * @param {Number} y The new y position
+ * @param {Number} w The new w width
+ * @param {Number} h The new h hight
+ * @param {Roo.EventObject} e The mouseup event
*/
- maxWidth : 600,
+ "resizing" : true,
/**
- * The minimum width in pixels of the message box (defaults to 100)
- * @type Number
+ * @event resize
+ * Fired after a resize.
+ * @param {Roo.Resizable} this
+ * @param {Number} width The new width
+ * @param {Number} height The new height
+ * @param {Roo.EventObject} e The mouseup event
*/
- minWidth : 100,
+ "resize" : true
+ });
+
+ if(this.width !== null && this.height !== null){
+ this.resizeTo(this.width, this.height);
+ }else{
+ this.updateChildSize();
+ }
+ if(Roo.isIE){
+ this.el.dom.style.zoom = 1;
+ }
+ Roo.Resizable.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.Resizable, Roo.util.Observable, {
+ resizeChild : false,
+ adjustments : [0, 0],
+ minWidth : 5,
+ minHeight : 5,
+ maxWidth : 10000,
+ maxHeight : 10000,
+ enabled : true,
+ animate : false,
+ duration : .35,
+ dynamic : false,
+ handles : false,
+ multiDirectional : false,
+ disableTrackOver : false,
+ easing : 'easeOutStrong',
+ widthIncrement : 0,
+ heightIncrement : 0,
+ pinned : false,
+ width : null,
+ height : null,
+ preserveRatio : false,
+ transparent: false,
+ minX: 0,
+ minY: 0,
+ draggable: false,
+
/**
- * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
- * for setting a different minimum width than text-only dialogs may need (defaults to 250)
- * @type Number
+ * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
*/
- minProgressWidth : 250,
+ constrainTo: undefined,
/**
- * An object containing the default button text strings that can be overriden for localized language support.
- * Supported properties are: ok, cancel, yes and no.
- * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
- * @type Object
+ * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
*/
- buttonText : {
- ok : "OK",
- cancel : "Cancel",
- yes : "Yes",
- no : "No"
- }
- };
-}();
+ resizeRegion: undefined,
-/**
- * Shorthand for {@link Roo.MessageBox}
- */
-Roo.Msg = Roo.MessageBox;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.QuickTips
- * Provides attractive and customizable tooltips for any element.
- * @static
- */
-Roo.QuickTips = function(){
- var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
- var ce, bd, xy, dd;
- var visible = false, disabled = true, inited = false;
- var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
-
- var onOver = function(e){
- if(disabled){
- return;
- }
- var t = e.getTarget();
- if(!t || t.nodeType !== 1 || t == document || t == document.body){
- return;
- }
- if(ce && t == ce.el){
- clearTimeout(hideProc);
- return;
- }
- if(t && tagEls[t.id]){
- tagEls[t.id].el = t;
- showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
- return;
- }
- var ttp, et = Roo.fly(t);
- var ns = cfg.namespace;
- if(tm.interceptTitles && t.title){
- ttp = t.title;
- t.qtip = ttp;
- t.removeAttribute("title");
- e.preventDefault();
- }else{
- ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
- }
- if(ttp){
- showProc = show.defer(tm.showDelay, tm, [{
- el: t,
- text: ttp.replace(/\\n/g,'<br/>'),
- width: et.getAttributeNS(ns, cfg.width),
- autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
- title: et.getAttributeNS(ns, cfg.title),
- cls: et.getAttributeNS(ns, cfg.cls)
- }]);
- }
- };
-
- var onOut = function(e){
- clearTimeout(showProc);
- var t = e.getTarget();
- if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
- hideProc = setTimeout(hide, tm.hideDelay);
- }
- };
-
- var onMove = function(e){
- if(disabled){
- return;
- }
- xy = e.getXY();
- xy[1] += 18;
- if(tm.trackMouse && ce){
- el.setXY(xy);
- }
- };
-
- var onDown = function(e){
- clearTimeout(showProc);
- clearTimeout(hideProc);
- if(!e.within(el)){
- if(tm.hideOnClick){
- hide();
- tm.disable();
- tm.enable.defer(100, tm);
+
+ /**
+ * Perform a manual resize
+ * @param {Number} width
+ * @param {Number} height
+ */
+ resizeTo : function(width, height){
+ this.el.setSize(width, height);
+ this.updateChildSize();
+ this.fireEvent("resize", this, width, height, null);
+ },
+
+ // private
+ startSizing : function(e, handle){
+ this.fireEvent("beforeresize", this, e);
+ if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
+
+ if(!this.overlay){
+ this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: " "});
+ this.overlay.unselectable();
+ this.overlay.enableDisplayMode("block");
+ this.overlay.on("mousemove", this.onMouseMove, this);
+ this.overlay.on("mouseup", this.onMouseUp, this);
}
- }
- };
-
- var getPad = function(){
- return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
- };
+ this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
- var show = function(o){
- if(disabled){
- return;
+ this.resizing = true;
+ this.startBox = this.el.getBox();
+ this.startPoint = e.getXY();
+ this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
+ (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+
+ this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this.overlay.show();
+
+ if(this.constrainTo) {
+ var ct = Roo.get(this.constrainTo);
+ this.resizeRegion = ct.getRegion().adjust(
+ ct.getFrameWidth('t'),
+ ct.getFrameWidth('l'),
+ -ct.getFrameWidth('b'),
+ -ct.getFrameWidth('r')
+ );
+ }
+
+ this.proxy.setStyle('visibility', 'hidden'); // workaround display none
+ this.proxy.show();
+ this.proxy.setBox(this.startBox);
+ if(!this.dynamic){
+ this.proxy.setStyle('visibility', 'visible');
+ }
}
- clearTimeout(dismissProc);
- ce = o;
- if(removeCls){ // in case manually hidden
- el.removeClass(removeCls);
- removeCls = null;
+ },
+
+ // private
+ onMouseDown : function(handle, e){
+ if(this.enabled){
+ e.stopEvent();
+ this.activeHandle = handle;
+ this.startSizing(e, handle);
}
- if(ce.cls){
- el.addClass(ce.cls);
- removeCls = ce.cls;
+ },
+
+ // private
+ onMouseUp : function(e){
+ var size = this.resizeElement();
+ this.resizing = false;
+ this.handleOut();
+ this.overlay.hide();
+ this.proxy.hide();
+ this.fireEvent("resize", this, size.width, size.height, e);
+ },
+
+ // private
+ updateChildSize : function(){
+
+ if(this.resizeChild){
+ var el = this.el;
+ var child = this.resizeChild;
+ var adj = this.adjustments;
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ // Second call here for IE
+ // The first call enables instant resizing and
+ // the second call corrects scroll bars if they
+ // exist
+ if(Roo.isIE){
+ setTimeout(function(){
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ }, 10);
+ }
}
- if(ce.title){
- tipTitle.update(ce.title);
- tipTitle.show();
- }else{
- tipTitle.update('');
- tipTitle.hide();
+ },
+
+ // private
+ snap : function(value, inc, min){
+ if(!inc || !value) {
+ return value;
}
- el.dom.style.width = tm.maxWidth+'px';
- //tipBody.dom.style.width = '';
- tipBodyText.update(o.text);
- var p = getPad(), w = ce.width;
- if(!w){
- var td = tipBodyText.dom;
- var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
- if(aw > tm.maxWidth){
- w = tm.maxWidth;
- }else if(aw < tm.minWidth){
- w = tm.minWidth;
+ var newValue = value;
+ var m = value % inc;
+ if(m > 0){
+ if(m > (inc/2)){
+ newValue = value + (inc-m);
}else{
- w = aw;
- }
- }
- //tipBody.setWidth(w);
- el.setWidth(parseInt(w, 10) + p);
- if(ce.autoHide === false){
- close.setDisplayed(true);
- if(dd){
- dd.unlock();
- }
- }else{
- close.setDisplayed(false);
- if(dd){
- dd.lock();
+ newValue = value - m;
}
}
- if(xy){
- el.avoidY = xy[1]-18;
- el.setXY(xy);
- }
- if(tm.animate){
- el.setOpacity(.1);
- el.setStyle("visibility", "visible");
- el.fadeIn({callback: afterShow});
+ return Math.max(min, newValue);
+ },
+
+ // private
+ resizeElement : function(){
+ var box = this.proxy.getBox();
+ if(this.updateBox){
+ this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
}else{
- afterShow();
- }
- };
-
- var afterShow = function(){
- if(ce){
- el.show();
- esc.enable();
- if(tm.autoDismiss && ce.autoHide !== false){
- dismissProc = setTimeout(hide, tm.autoDismissDelay);
- }
+ this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
}
- };
-
- var hide = function(noanim){
- clearTimeout(dismissProc);
- clearTimeout(hideProc);
- ce = null;
- if(el.isVisible()){
- esc.disable();
- if(noanim !== true && tm.animate){
- el.fadeOut({callback: afterHide});
- }else{
- afterHide();
- }
+ this.updateChildSize();
+ if(!this.dynamic){
+ this.proxy.hide();
}
- };
-
- var afterHide = function(){
- el.hide();
- if(removeCls){
- el.removeClass(removeCls);
- removeCls = null;
+ return box;
+ },
+
+ // private
+ constrain : function(v, diff, m, mx){
+ if(v - diff < m){
+ diff = v - m;
+ }else if(v - diff > mx){
+ diff = mx - v;
}
- };
-
- return {
- /**
- * @cfg {Number} minWidth
- * The minimum width of the quick tip (defaults to 40)
- */
- minWidth : 40,
- /**
- * @cfg {Number} maxWidth
- * The maximum width of the quick tip (defaults to 300)
- */
- maxWidth : 300,
- /**
- * @cfg {Boolean} interceptTitles
- * True to automatically use the element's DOM title value if available (defaults to false)
- */
- interceptTitles : false,
- /**
- * @cfg {Boolean} trackMouse
- * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
- */
- trackMouse : false,
- /**
- * @cfg {Boolean} hideOnClick
- * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
- */
- hideOnClick : true,
- /**
- * @cfg {Number} showDelay
- * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
- */
- showDelay : 500,
- /**
- * @cfg {Number} hideDelay
- * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
- */
- hideDelay : 200,
- /**
- * @cfg {Boolean} autoHide
- * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
- * Used in conjunction with hideDelay.
- */
- autoHide : true,
- /**
- * @cfg {Boolean}
- * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
- * (defaults to true). Used in conjunction with autoDismissDelay.
- */
- autoDismiss : true,
- /**
- * @cfg {Number}
- * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
- */
- autoDismissDelay : 5000,
- /**
- * @cfg {Boolean} animate
- * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
- */
- animate : false,
+ return diff;
+ },
- /**
- * @cfg {String} title
- * Title text to display (defaults to ''). This can be any valid HTML markup.
- */
- title: '',
- /**
- * @cfg {String} text
- * Body text to display (defaults to ''). This can be any valid HTML markup.
- */
- text : '',
- /**
- * @cfg {String} cls
- * A CSS class to apply to the base quick tip element (defaults to '').
- */
- cls : '',
- /**
- * @cfg {Number} width
- * Width in pixels of the quick tip (defaults to auto). Width will be ignored if it exceeds the bounds of
- * minWidth or maxWidth.
- */
- width : null,
+ // private
+ onMouseMove : function(e){
+
+ if(this.enabled){
+ try{// try catch so if something goes wrong the user doesn't get hung
- /**
- * Initialize and enable QuickTips for first use. This should be called once before the first attempt to access
- * or display QuickTips in a page.
- */
- init : function(){
- tm = Roo.QuickTips;
- cfg = tm.tagConfig;
- if(!inited){
- if(!Roo.isReady){ // allow calling of init() before onReady
- Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
- return;
- }
- el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
- el.fxDefaults = {stopFx: true};
- // maximum custom styling
- //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
- el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');
- tipTitle = el.child('h3');
- tipTitle.enableDisplayMode("block");
- tipBody = el.child('div.x-tip-bd');
- tipBodyText = el.child('div.x-tip-bd-inner');
- //bdLeft = el.child('div.x-tip-bd-left');
- //bdRight = el.child('div.x-tip-bd-right');
- close = el.child('div.x-tip-close');
- close.enableDisplayMode("block");
- close.on("click", hide);
- var d = Roo.get(document);
- d.on("mousedown", onDown);
- d.on("mouseover", onOver);
- d.on("mouseout", onOut);
- d.on("mousemove", onMove);
- esc = d.addKeyListener(27, hide);
- esc.disable();
- if(Roo.dd.DD){
- dd = el.initDD("default", null, {
- onDrag : function(){
- el.sync();
- }
- });
- dd.setHandleElId(tipTitle.id);
- dd.lock();
- }
- inited = true;
- }
- this.enable();
- },
+ if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
+ return;
+ }
- /**
- * Configures a new quick tip instance and assigns it to a target element. The following config options
- * are supported:
- * <pre>
-Property Type Description
----------- --------------------- ------------------------------------------------------------------------
-target Element/String/Array An Element, id or array of ids that this quick tip should be tied to
- * </ul>
- * @param {Object} config The config object
- */
- register : function(config){
- var cs = config instanceof Array ? config : arguments;
- for(var i = 0, len = cs.length; i < len; i++) {
- var c = cs[i];
- var target = c.target;
- if(target){
- if(target instanceof Array){
- for(var j = 0, jlen = target.length; j < jlen; j++){
- tagEls[target[j]] = c;
- }
- }else{
- tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
- }
- }
- }
- },
+ //var curXY = this.startPoint;
+ var curSize = this.curSize || this.startBox;
+ var x = this.startBox.x, y = this.startBox.y;
+ var ox = x, oy = y;
+ var w = curSize.width, h = curSize.height;
+ var ow = w, oh = h;
+ var mw = this.minWidth, mh = this.minHeight;
+ var mxw = this.maxWidth, mxh = this.maxHeight;
+ var wi = this.widthIncrement;
+ var hi = this.heightIncrement;
- /**
- * Removes this quick tip from its element and destroys it.
- * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
- */
- unregister : function(el){
- delete tagEls[Roo.id(el)];
- },
+ var eventXY = e.getXY();
+ var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
+ var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
- /**
- * Enable this quick tip.
- */
- enable : function(){
- if(inited && disabled){
- locks.pop();
- if(locks.length < 1){
- disabled = false;
- }
- }
- },
+ var pos = this.activeHandle.position;
- /**
- * Disable this quick tip.
- */
- disable : function(){
- disabled = true;
- clearTimeout(showProc);
- clearTimeout(hideProc);
- clearTimeout(dismissProc);
- if(ce){
- hide(true);
- }
- locks.push(1);
- },
+ switch(pos){
+ case "east":
+ w += diffX;
+ w = Math.min(Math.max(mw, w), mxw);
+ break;
+
+ case "south":
+ h += diffY;
+ h = Math.min(Math.max(mh, h), mxh);
+ break;
+ case "southeast":
+ w += diffX;
+ h += diffY;
+ w = Math.min(Math.max(mw, w), mxw);
+ h = Math.min(Math.max(mh, h), mxh);
+ break;
+ case "north":
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ break;
+ case "hdrag":
+
+ if (wi) {
+ var adiffX = Math.abs(diffX);
+ var sub = (adiffX % wi); // how much
+ if (sub > (wi/2)) { // far enough to snap
+ diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
+ } else {
+ // remove difference..
+ diffX = (diffX > 0) ? diffX-sub : diffX+sub;
+ }
+ }
+ x += diffX;
+ x = Math.max(this.minX, x);
+ break;
+ case "west":
+ diffX = this.constrain(w, diffX, mw, mxw);
+ x += diffX;
+ w -= diffX;
+ break;
+ case "northeast":
+ w += diffX;
+ w = Math.min(Math.max(mw, w), mxw);
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ break;
+ case "northwest":
+ diffX = this.constrain(w, diffX, mw, mxw);
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ x += diffX;
+ w -= diffX;
+ break;
+ case "southwest":
+ diffX = this.constrain(w, diffX, mw, mxw);
+ h += diffY;
+ h = Math.min(Math.max(mh, h), mxh);
+ x += diffX;
+ w -= diffX;
+ break;
+ }
- /**
- * Returns true if the quick tip is enabled, else false.
- */
- isEnabled : function(){
- return !disabled;
- },
+ var sw = this.snap(w, wi, mw);
+ var sh = this.snap(h, hi, mh);
+ if(sw != w || sh != h){
+ switch(pos){
+ case "northeast":
+ y -= sh - h;
+ break;
+ case "north":
+ y -= sh - h;
+ break;
+ case "southwest":
+ x -= sw - w;
+ break;
+ case "west":
+ x -= sw - w;
+ break;
+ case "northwest":
+ x -= sw - w;
+ y -= sh - h;
+ break;
+ }
+ w = sw;
+ h = sh;
+ }
- // private
- tagConfig : {
- namespace : "roo", // was ext?? this may break..
- alt_namespace : "ext",
- attribute : "qtip",
- width : "width",
- target : "target",
- title : "qtitle",
- hide : "hide",
- cls : "qclass"
- }
- };
-}();
+ if(this.preserveRatio){
+ switch(pos){
+ case "southeast":
+ case "east":
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ w = ow * (h/oh);
+ break;
+ case "south":
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ break;
+ case "northeast":
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ break;
+ case "north":
+ var tw = w;
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ x += (tw - w) / 2;
+ break;
+ case "southwest":
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ var tw = w;
+ w = ow * (h/oh);
+ x += tw - w;
+ break;
+ case "west":
+ var th = h;
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ y += (th - h) / 2;
+ var tw = w;
+ w = ow * (h/oh);
+ x += tw - w;
+ break;
+ case "northwest":
+ var tw = w;
+ var th = h;
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ w = ow * (h/oh);
+ y += th - h;
+ x += tw - w;
+ break;
-// backwards compat
-Roo.QuickTips.tips = Roo.QuickTips.register;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+ }
+ }
+ if (pos == 'hdrag') {
+ w = ow;
+ }
+ this.proxy.setBounds(x, y, w, h);
+ if(this.dynamic){
+ this.resizeElement();
+ }
+ }catch(e){}
+ }
+ this.fireEvent("resizing", this, x, y, w, h, e);
+ },
-/**
- * @class Roo.tree.TreePanel
- * @extends Roo.data.Tree
- * @cfg {Roo.tree.TreeNode} root The root node
- * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
- * @cfg {Boolean} lines false to disable tree lines (defaults to true)
- * @cfg {Boolean} enableDD true to enable drag and drop
- * @cfg {Boolean} enableDrag true to enable just drag
- * @cfg {Boolean} enableDrop true to enable just drop
- * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
- * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
- * @cfg {String} ddGroup The DD group this TreePanel belongs to
- * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
- * @cfg {Boolean} ddScroll true to enable YUI body scrolling
- * @cfg {Boolean} containerScroll true to register this container with ScrollManager
- * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
- * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
- * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
- * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
- * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
- * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
- * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
- * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
- * @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- * @cfg {Function} rendererTip DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- *
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.tree.TreePanel = function(el, config){
- var root = false;
- var loader = false;
- if (config.root) {
- root = config.root;
- delete config.root;
- }
- if (config.loader) {
- loader = config.loader;
- delete config.loader;
- }
-
- Roo.apply(this, config);
- Roo.tree.TreePanel.superclass.constructor.call(this);
- this.el = Roo.get(el);
- this.el.addClass('x-tree');
- //console.log(root);
- if (root) {
- this.setRootNode( Roo.factory(root, Roo.tree));
- }
- if (loader) {
- this.loader = Roo.factory(loader, Roo.tree);
- }
- /**
- * Read-only. The id of the container element becomes this TreePanel's id.
- */
- this.id = this.el.id;
- this.addEvents({
- /**
- * @event beforeload
- * Fires before a node is loaded, return false to cancel
- * @param {Node} node The node being loaded
- */
- "beforeload" : true,
- /**
- * @event load
- * Fires when a node is loaded
- * @param {Node} node The node that was loaded
- */
- "load" : true,
- /**
- * @event textchange
- * Fires when the text for a node is changed
- * @param {Node} node The node
- * @param {String} text The new text
- * @param {String} oldText The old text
- */
- "textchange" : true,
- /**
- * @event beforeexpand
- * Fires before a node is expanded, return false to cancel.
- * @param {Node} node The node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforeexpand" : true,
- /**
- * @event beforecollapse
- * Fires before a node is collapsed, return false to cancel.
- * @param {Node} node The node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforecollapse" : true,
- /**
- * @event expand
- * Fires when a node is expanded
- * @param {Node} node The node
- */
- "expand" : true,
- /**
- * @event disabledchange
- * Fires when the disabled status of a node changes
- * @param {Node} node The node
- * @param {Boolean} disabled
- */
- "disabledchange" : true,
- /**
- * @event collapse
- * Fires when a node is collapsed
- * @param {Node} node The node
- */
- "collapse" : true,
- /**
- * @event beforeclick
- * Fires before click processing on a node. Return false to cancel the default action.
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "beforeclick":true,
- /**
- * @event checkchange
- * Fires when a node with a checkbox's checked property changes
- * @param {Node} this This node
- * @param {Boolean} checked
- */
- "checkchange":true,
- /**
- * @event click
- * Fires when a node is clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "click":true,
- /**
- * @event dblclick
- * Fires when a node is double clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "dblclick":true,
- /**
- * @event contextmenu
- * Fires when a node is right clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "contextmenu":true,
- /**
- * @event beforechildrenrendered
- * Fires right before the child nodes for a node are rendered
- * @param {Node} node The node
- */
- "beforechildrenrendered":true,
- /**
- * @event startdrag
- * Fires when a node starts being dragged
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {event} e The raw browser event
- */
- "startdrag" : true,
- /**
- * @event enddrag
- * Fires when a drag operation is complete
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {event} e The raw browser event
- */
- "enddrag" : true,
- /**
- * @event dragdrop
- * Fires when a dragged node is dropped on a valid DD target
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {DD} dd The dd it was dropped on
- * @param {event} e The raw browser event
- */
- "dragdrop" : true,
- /**
- * @event beforenodedrop
- * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
- * to be inserted by setting them on this object.</li>
- * <li>cancel - Set this to true to cancel the drop.</li>
- * </ul>
- * @param {Object} dropEvent
- */
- "beforenodedrop" : true,
- /**
- * @event nodedrop
- * Fires after a DD object is dropped on a node in this tree. The dropEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Dropped node(s).</li>
- * </ul>
- * @param {Object} dropEvent
- */
- "nodedrop" : true,
- /**
- * @event nodedragover
- * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Drop node(s) provided by the source.</li>
- * <li>cancel - Set this to true to signal drop not allowed.</li>
- * </ul>
- * @param {Object} dragOverEvent
- */
- "nodedragover" : true,
- /**
- * @event appendnode
- * Fires when append node to the tree
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {Number} index The index of the newly appended node
- */
- "appendnode" : true
-
- });
- if(this.singleExpand){
- this.on("beforeexpand", this.restrictExpand, this);
- }
- if (this.editor) {
- this.editor.tree = this;
- this.editor = Roo.factory(this.editor, Roo.tree);
- }
-
- if (this.selModel) {
- this.selModel = Roo.factory(this.selModel, Roo.tree);
- }
-
-};
-Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
- rootVisible : true,
- animate: Roo.enableFx,
- lines : true,
- enableDD : false,
- hlDrop : Roo.enableFx,
-
- renderer: false,
-
- rendererTip: false,
// private
- restrictExpand : function(node){
- var p = node.parentNode;
- if(p){
- if(p.expandedChild && p.expandedChild.parentNode == p){
- p.expandedChild.collapse();
- }
- p.expandedChild = node;
+ handleOver : function(){
+ if(this.enabled){
+ this.el.addClass("x-resizable-over");
}
},
- // private override
- setRootNode : function(node){
- Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
- if(!this.rootVisible){
- node.ui = new Roo.tree.RootTreeNodeUI(node);
+ // private
+ handleOut : function(){
+ if(!this.resizing){
+ this.el.removeClass("x-resizable-over");
}
- return node;
},
/**
- * Returns the container element for this TreePanel
+ * Returns the element this component is bound to.
+ * @return {Roo.Element}
*/
getEl : function(){
return this.el;
},
/**
- * Returns the default TreeLoader for this TreePanel
- */
- getLoader : function(){
- return this.loader;
- },
-
- /**
- * Expand all nodes
+ * Returns the resizeChild element (or null).
+ * @return {Roo.Element}
*/
- expandAll : function(){
- this.root.expand(true);
+ getResizeChild : function(){
+ return this.resizeChild;
},
-
- /**
- * Collapse all nodes
- */
- collapseAll : function(){
- this.root.collapse(true);
+ groupHandler : function()
+ {
+
},
-
/**
- * Returns the selection model used by this TreePanel
+ * Destroys this resizable. If the element was wrapped and
+ * removeEl is not true then the element remains.
+ * @param {Boolean} removeEl (optional) true to remove the element from the DOM
*/
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.tree.DefaultSelectionModel();
+ destroy : function(removeEl){
+ this.proxy.remove();
+ if(this.overlay){
+ this.overlay.removeAllListeners();
+ this.overlay.remove();
}
- return this.selModel;
- },
-
- /**
- * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
- * @param {String} attribute (optional) Defaults to null (return the actual nodes)
- * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
- * @return {Array}
- */
- getChecked : function(a, startNode){
- startNode = startNode || this.root;
- var r = [];
- var f = function(){
- if(this.attributes.checked){
- r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
- }
- }
- startNode.cascade(f);
- return r;
- },
-
- /**
- * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
- * @param {String} path
- * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
- * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
- * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
- */
- expandPath : function(path, attr, callback){
- attr = attr || "id";
- var keys = path.split(this.pathSeparator);
- var curNode = this.root;
- if(curNode.attributes[attr] != keys[1]){ // invalid root
- if(callback){
- callback(false, null);
+ var ps = Roo.Resizable.positions;
+ for(var k in ps){
+ if(typeof ps[k] != "function" && this[ps[k]]){
+ var h = this[ps[k]];
+ h.el.removeAllListeners();
+ h.el.remove();
}
- return;
}
- var index = 1;
- var f = function(){
- if(++index == keys.length){
- if(callback){
- callback(true, curNode);
- }
- return;
- }
- var c = curNode.findChild(attr, keys[index]);
- if(!c){
- if(callback){
- callback(false, curNode);
- }
- return;
- }
- curNode = c;
- c.expand(false, false, f);
- };
- curNode.expand(false, false, f);
- },
-
- /**
- * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
- * @param {String} path
- * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
- * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
- * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
- */
- selectPath : function(path, attr, callback){
- attr = attr || "id";
- var keys = path.split(this.pathSeparator);
- var v = keys.pop();
- if(keys.length > 0){
- var f = function(success, node){
- if(success && node){
- var n = node.findChild(attr, v);
- if(n){
- n.select();
- if(callback){
- callback(true, n);
- }
- }else if(callback){
- callback(false, n);
- }
- }else{
- if(callback){
- callback(false, n);
- }
- }
- };
- this.expandPath(keys.join(this.pathSeparator), attr, f);
- }else{
- this.root.select();
- if(callback){
- callback(true, this.root);
- }
+ if(removeEl){
+ this.el.update("");
+ this.el.remove();
}
- },
+ }
+});
- getTreeEl : function(){
- return this.el;
- },
+// private
+// hash to map config positions to true positions
+Roo.Resizable.positions = {
+ n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast",
+ hd: "hdrag"
+};
- /**
- * Trigger rendering of this TreePanel
- */
- render : function(){
- if (this.innerCt) {
- return this; // stop it rendering more than once!!
- }
-
- this.innerCt = this.el.createChild({tag:"ul",
- cls:"x-tree-root-ct " +
- (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
+// private
+Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
+ if(!this.tpl){
+ // only initialize the template if resizable is used
+ var tpl = Roo.DomHelper.createTemplate(
+ {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
+ );
+ tpl.compile();
+ Roo.Resizable.Handle.prototype.tpl = tpl;
+ }
+ this.position = pos;
+ this.rz = rz;
+ // show north drag fro topdra
+ var handlepos = pos == 'hdrag' ? 'north' : pos;
+
+ this.el = this.tpl.append(rz.el.dom, [handlepos], true);
+ if (pos == 'hdrag') {
+ this.el.setStyle('cursor', 'pointer');
+ }
+ this.el.unselectable();
+ if(transparent){
+ this.el.setOpacity(0);
+ }
+ this.el.on("mousedown", this.onMouseDown, this);
+ if(!disableTrackOver){
+ this.el.on("mouseover", this.onMouseOver, this);
+ this.el.on("mouseout", this.onMouseOut, this);
+ }
+};
- if(this.containerScroll){
- Roo.dd.ScrollManager.register(this.el);
- }
- if((this.enableDD || this.enableDrop) && !this.dropZone){
- /**
- * The dropZone used by this tree if drop is enabled
- * @type Roo.tree.TreeDropZone
- */
- this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
- ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
- });
- }
- if((this.enableDD || this.enableDrag) && !this.dragZone){
- /**
- * The dragZone used by this tree if drag is enabled
- * @type Roo.tree.TreeDragZone
- */
- this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
- ddGroup: this.ddGroup || "TreeDD",
- scroll: this.ddScroll
- });
- }
- this.getSelectionModel().init(this);
- if (!this.root) {
- Roo.log("ROOT not set in tree");
- return this;
- }
- this.root.render();
- if(!this.rootVisible){
- this.root.renderChildren();
- }
- return this;
+// private
+Roo.Resizable.Handle.prototype = {
+ afterResize : function(rz){
+ Roo.log('after?');
+ // do nothing
+ },
+ // private
+ onMouseDown : function(e){
+ this.rz.onMouseDown(this, e);
+ },
+ // private
+ onMouseOver : function(e){
+ this.rz.handleOver(this, e);
+ },
+ // private
+ onMouseOut : function(e){
+ this.rz.handleOut(this, e);
}
-});/*
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
/**
- * @class Roo.tree.DefaultSelectionModel
- * @extends Roo.util.Observable
- * The default single selection for a TreePanel.
- * @param {Object} cfg Configuration
+ * @class Roo.Editor
+ * @extends Roo.Component
+ * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
+ * @constructor
+ * Create a new Editor
+ * @param {Roo.form.Field} field The Field object (or descendant)
+ * @param {Object} config The config object
*/
-Roo.tree.DefaultSelectionModel = function(cfg){
- this.selNode = null;
-
-
-
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selected node changes
- * @param {DefaultSelectionModel} this
- * @param {TreeNode} node the new selection
- */
- "selectionchange" : true,
-
- /**
- * @event beforeselect
- * Fires before the selected node changes, return false to cancel the change
- * @param {DefaultSelectionModel} this
- * @param {TreeNode} node the new selection
- * @param {TreeNode} node the old selection
- */
- "beforeselect" : true
- });
-
- Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
+Roo.Editor = function(field, config){
+ Roo.Editor.superclass.constructor.call(this, config);
+ this.field = field;
+ this.addEvents({
+ /**
+ * @event beforestartedit
+ * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
+ * false from the handler of this event.
+ * @param {Editor} this
+ * @param {Roo.Element} boundEl The underlying element bound to this editor
+ * @param {Mixed} value The field value being set
+ */
+ "beforestartedit" : true,
+ /**
+ * @event startedit
+ * Fires when this editor is displayed
+ * @param {Roo.Element} boundEl The underlying element bound to this editor
+ * @param {Mixed} value The starting field value
+ */
+ "startedit" : true,
+ /**
+ * @event beforecomplete
+ * Fires after a change has been made to the field, but before the change is reflected in the underlying
+ * field. Saving the change to the field can be canceled by returning false from the handler of this event.
+ * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
+ * event will not fire since no edit actually occurred.
+ * @param {Editor} this
+ * @param {Mixed} value The current field value
+ * @param {Mixed} startValue The original field value
+ */
+ "beforecomplete" : true,
+ /**
+ * @event complete
+ * Fires after editing is complete and any changed value has been written to the underlying field.
+ * @param {Editor} this
+ * @param {Mixed} value The current field value
+ * @param {Mixed} startValue The original field value
+ */
+ "complete" : true,
+ /**
+ * @event specialkey
+ * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
+ * {@link Roo.EventObject#getKey} to determine which key was pressed.
+ * @param {Roo.form.Field} this
+ * @param {Roo.EventObject} e The event object
+ */
+ "specialkey" : true
+ });
};
-Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
- init : function(tree){
- this.tree = tree;
- tree.getTreeEl().on("keydown", this.onKeyDown, this);
- tree.on("click", this.onNodeClick, this);
- },
-
- onNodeClick : function(node, e){
- if (e.ctrlKey && this.selNode == node) {
- this.unselect(node);
- return;
- }
- this.select(node);
- },
-
+Roo.extend(Roo.Editor, Roo.Component, {
/**
- * Select a node.
- * @param {TreeNode} node The node to select
- * @return {TreeNode} The selected node
+ * @cfg {Boolean/String} autosize
+ * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
+ * or "height" to adopt the height only (defaults to false)
*/
- select : function(node){
- var last = this.selNode;
- if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
- if(last){
- last.ui.onSelectedChange(false);
- }
- this.selNode = node;
- node.ui.onSelectedChange(true);
- this.fireEvent("selectionchange", this, node, last);
- }
- return node;
- },
-
/**
- * Deselect a node.
- * @param {TreeNode} node The node to unselect
+ * @cfg {Boolean} revertInvalid
+ * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
+ * validation fails (defaults to true)
*/
- unselect : function(node){
- if(this.selNode == node){
- this.clearSelections();
- }
- },
-
/**
- * Clear all selections
+ * @cfg {Boolean} ignoreNoChange
+ * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
+ * the value has not changed (defaults to false). Applies only to string values - edits for other data types
+ * will never be ignored.
*/
- clearSelections : function(){
- var n = this.selNode;
- if(n){
- n.ui.onSelectedChange(false);
- this.selNode = null;
- this.fireEvent("selectionchange", this, null);
- }
- return n;
- },
-
/**
- * Get the selected node
- * @return {TreeNode} The selected node
+ * @cfg {Boolean} hideEl
+ * False to keep the bound element visible while the editor is displayed (defaults to true)
*/
- getSelectedNode : function(){
- return this.selNode;
- },
-
/**
- * Returns true if the node is selected
- * @param {TreeNode} node The node to check
- * @return {Boolean}
+ * @cfg {Mixed} value
+ * The data value of the underlying field (defaults to "")
*/
- isSelected : function(node){
- return this.selNode == node;
+ value : "",
+ /**
+ * @cfg {String} alignment
+ * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
+ */
+ alignment: "c-c?",
+ /**
+ * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
+ * for bottom-right shadow (defaults to "frame")
+ */
+ shadow : "frame",
+ /**
+ * @cfg {Boolean} constrain True to constrain the editor to the viewport
+ */
+ constrain : false,
+ /**
+ * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
+ */
+ completeOnEnter : false,
+ /**
+ * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
+ */
+ cancelOnEsc : false,
+ /**
+ * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
+ */
+ updateEl : false,
+
+ // private
+ onRender : function(ct, position){
+ this.el = new Roo.Layer({
+ shadow: this.shadow,
+ cls: "x-editor",
+ parentEl : ct,
+ shim : this.shim,
+ shadowOffset:4,
+ id: this.id,
+ constrain: this.constrain
+ });
+ this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
+ if(this.field.msgTarget != 'title'){
+ this.field.msgTarget = 'qtip';
+ }
+ this.field.render(this.el);
+ if(Roo.isGecko){
+ this.field.el.dom.setAttribute('autocomplete', 'off');
+ }
+ this.field.on("specialkey", this.onSpecialKey, this);
+ if(this.swallowKeys){
+ this.field.el.swallowEvent(['keydown','keypress']);
+ }
+ this.field.show();
+ this.field.on("blur", this.onBlur, this);
+ if(this.field.grow){
+ this.field.on("autosize", this.el.sync, this.el, {delay:1});
+ }
+ },
+
+ onSpecialKey : function(field, e)
+ {
+ //Roo.log('editor onSpecialKey');
+ if(this.completeOnEnter && e.getKey() == e.ENTER){
+ e.stopEvent();
+ this.completeEdit();
+ return;
+ }
+ // do not fire special key otherwise it might hide close the editor...
+ if(e.getKey() == e.ENTER){
+ return;
+ }
+ if(this.cancelOnEsc && e.getKey() == e.ESC){
+ this.cancelEdit();
+ return;
+ }
+ this.fireEvent('specialkey', field, e);
+
},
/**
- * Selects the node above the selected node in the tree, intelligently walking the nodes
- * @return TreeNode The new selection
+ * Starts the editing process and shows the editor.
+ * @param {String/HTMLElement/Element} el The element to edit
+ * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
+ * to the innerHTML of el.
*/
- selectPrevious : function(){
- var s = this.selNode || this.lastSelNode;
- if(!s){
- return null;
+ startEdit : function(el, value){
+ if(this.editing){
+ this.completeEdit();
}
- var ps = s.previousSibling;
- if(ps){
- if(!ps.isExpanded() || ps.childNodes.length < 1){
- return this.select(ps);
- } else{
- var lc = ps.lastChild;
- while(lc && lc.isExpanded() && lc.childNodes.length > 0){
- lc = lc.lastChild;
- }
- return this.select(lc);
+ this.boundEl = Roo.get(el);
+ var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
+ if(!this.rendered){
+ this.render(this.parentEl || document.body);
+ }
+ if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
+ return;
+ }
+ this.startValue = v;
+ this.field.setValue(v);
+ if(this.autoSize){
+ var sz = this.boundEl.getSize();
+ switch(this.autoSize){
+ case "width":
+ this.setSize(sz.width, "");
+ break;
+ case "height":
+ this.setSize("", sz.height);
+ break;
+ default:
+ this.setSize(sz.width, sz.height);
}
- } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
- return this.select(s.parentNode);
}
- return null;
+ this.el.alignTo(this.boundEl, this.alignment);
+ this.editing = true;
+ if(Roo.QuickTips){
+ Roo.QuickTips.disable();
+ }
+ this.show();
},
/**
- * Selects the node above the selected node in the tree, intelligently walking the nodes
- * @return TreeNode The new selection
+ * Sets the height and width of this editor.
+ * @param {Number} width The new width
+ * @param {Number} height The new height
*/
- selectNext : function(){
- var s = this.selNode || this.lastSelNode;
- if(!s){
- return null;
+ setSize : function(w, h){
+ this.field.setSize(w, h);
+ if(this.el){
+ this.el.sync();
}
- if(s.firstChild && s.isExpanded()){
- return this.select(s.firstChild);
- }else if(s.nextSibling){
- return this.select(s.nextSibling);
- }else if(s.parentNode){
- var newS = null;
- s.parentNode.bubble(function(){
- if(this.nextSibling){
- newS = this.getOwnerTree().selModel.select(this.nextSibling);
- return false;
- }
- });
- return newS;
- }
- return null;
},
- onKeyDown : function(e){
- var s = this.selNode || this.lastSelNode;
- // undesirable, but required
- var sm = this;
- if(!s){
- return;
- }
- var k = e.getKey();
- switch(k){
- case e.DOWN:
- e.stopEvent();
- this.selectNext();
- break;
- case e.UP:
- e.stopEvent();
- this.selectPrevious();
- break;
- case e.RIGHT:
- e.preventDefault();
- if(s.hasChildNodes()){
- if(!s.isExpanded()){
- s.expand();
- }else if(s.firstChild){
- this.select(s.firstChild, e);
- }
- }
- break;
- case e.LEFT:
- e.preventDefault();
- if(s.hasChildNodes() && s.isExpanded()){
- s.collapse();
- }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
- this.select(s.parentNode, e);
- }
- break;
- };
- }
-});
-
-/**
- * @class Roo.tree.MultiSelectionModel
- * @extends Roo.util.Observable
- * Multi selection for a TreePanel.
- * @param {Object} cfg Configuration
- */
-Roo.tree.MultiSelectionModel = function(){
- this.selNodes = [];
- this.selMap = {};
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selected nodes change
- * @param {MultiSelectionModel} this
- * @param {Array} nodes Array of the selected nodes
- */
- "selectionchange" : true
- });
- Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
-
-};
-
-Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
- init : function(tree){
- this.tree = tree;
- tree.getTreeEl().on("keydown", this.onKeyDown, this);
- tree.on("click", this.onNodeClick, this);
- },
-
- onNodeClick : function(node, e){
- this.select(node, e, e.ctrlKey);
- },
-
/**
- * Select a node.
- * @param {TreeNode} node The node to select
- * @param {EventObject} e (optional) An event associated with the selection
- * @param {Boolean} keepExisting True to retain existing selections
- * @return {TreeNode} The selected node
+ * Realigns the editor to the bound field based on the current alignment config value.
*/
- select : function(node, e, keepExisting){
- if(keepExisting !== true){
- this.clearSelections(true);
- }
- if(this.isSelected(node)){
- this.lastSelNode = node;
- return node;
- }
- this.selNodes.push(node);
- this.selMap[node.id] = node;
- this.lastSelNode = node;
- node.ui.onSelectedChange(true);
- this.fireEvent("selectionchange", this, this.selNodes);
- return node;
+ realign : function(){
+ this.el.alignTo(this.boundEl, this.alignment);
},
-
+
/**
- * Deselect a node.
- * @param {TreeNode} node The node to unselect
+ * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
+ * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
*/
- unselect : function(node){
- if(this.selMap[node.id]){
- node.ui.onSelectedChange(false);
- var sn = this.selNodes;
- var index = -1;
- if(sn.indexOf){
- index = sn.indexOf(node);
- }else{
- for(var i = 0, len = sn.length; i < len; i++){
- if(sn[i] == node){
- index = i;
- break;
- }
- }
+ completeEdit : function(remainVisible){
+ if(!this.editing){
+ return;
+ }
+ var v = this.getValue();
+ if(this.revertInvalid !== false && !this.field.isValid()){
+ v = this.startValue;
+ this.cancelEdit(true);
+ }
+ if(String(v) === String(this.startValue) && this.ignoreNoChange){
+ this.editing = false;
+ this.hide();
+ return;
+ }
+ if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
+ this.editing = false;
+ if(this.updateEl && this.boundEl){
+ this.boundEl.update(v);
}
- if(index != -1){
- this.selNodes.splice(index, 1);
+ if(remainVisible !== true){
+ this.hide();
}
- delete this.selMap[node.id];
- this.fireEvent("selectionchange", this, this.selNodes);
+ this.fireEvent("complete", this, v, this.startValue);
}
},
-
+
+ // private
+ onShow : function(){
+ this.el.show();
+ if(this.hideEl !== false){
+ this.boundEl.hide();
+ }
+ this.field.show();
+ if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
+ this.fixIEFocus = true;
+ this.deferredFocus.defer(50, this);
+ }else{
+ this.field.focus();
+ }
+ this.fireEvent("startedit", this.boundEl, this.startValue);
+ },
+
+ deferredFocus : function(){
+ if(this.editing){
+ this.field.focus();
+ }
+ },
+
/**
- * Clear all selections
+ * Cancels the editing process and hides the editor without persisting any changes. The field value will be
+ * reverted to the original starting value.
+ * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
+ * cancel (defaults to false)
*/
- clearSelections : function(suppressEvent){
- var sn = this.selNodes;
- if(sn.length > 0){
- for(var i = 0, len = sn.length; i < len; i++){
- sn[i].ui.onSelectedChange(false);
- }
- this.selNodes = [];
- this.selMap = {};
- if(suppressEvent !== true){
- this.fireEvent("selectionchange", this, this.selNodes);
+ cancelEdit : function(remainVisible){
+ if(this.editing){
+ this.setValue(this.startValue);
+ if(remainVisible !== true){
+ this.hide();
}
}
},
-
- /**
- * Returns true if the node is selected
- * @param {TreeNode} node The node to check
- * @return {Boolean}
- */
- isSelected : function(node){
- return this.selMap[node.id] ? true : false;
+
+ // private
+ onBlur : function(){
+ if(this.allowBlur !== true && this.editing){
+ this.completeEdit();
+ }
},
-
+
+ // private
+ onHide : function(){
+ if(this.editing){
+ this.completeEdit();
+ return;
+ }
+ this.field.blur();
+ if(this.field.collapse){
+ this.field.collapse();
+ }
+ this.el.hide();
+ if(this.hideEl !== false){
+ this.boundEl.show();
+ }
+ if(Roo.QuickTips){
+ Roo.QuickTips.enable();
+ }
+ },
+
/**
- * Returns an array of the selected nodes
- * @return {Array}
+ * Sets the data value of the editor
+ * @param {Mixed} value Any valid value supported by the underlying field
*/
- getSelectedNodes : function(){
- return this.selNodes;
+ setValue : function(v){
+ this.field.setValue(v);
},
- onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
-
- selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
-
- selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
+ /**
+ * Gets the data value of the editor
+ * @return {Mixed} The data value
+ */
+ getValue : function(){
+ return this.field.getValue();
+ }
});/*
* Based on:
* Ext JS Library 1.1.1
*/
/**
- * @class Roo.tree.TreeNode
- * @extends Roo.data.Node
- * @cfg {String} text The text for this node
- * @cfg {Boolean} expanded true to start the node expanded
- * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
- * @cfg {Boolean} allowDrop false if this node cannot be drop on
- * @cfg {Boolean} disabled true to start the node disabled
- * @cfg {String} icon The path to an icon for the node. The preferred way to do this
- * is to use the cls or iconCls attributes and add the icon via a CSS background image.
- * @cfg {String} cls A css class to be added to the node
- * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
- * @cfg {String} href URL of the link used for the node (defaults to #)
- * @cfg {String} hrefTarget target frame for the link
- * @cfg {String} qtip An Ext QuickTip for the node
- * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
- * @cfg {Boolean} singleClickExpand True for single click expand on this node
- * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
- * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
- * (defaults to undefined with no checkbox rendered)
+ * @class Roo.BasicDialog
+ * @extends Roo.util.Observable
+ * @parent none builder
+ * Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
+ * <pre><code>
+var dlg = new Roo.BasicDialog("my-dlg", {
+ height: 200,
+ width: 300,
+ minHeight: 100,
+ minWidth: 150,
+ modal: true,
+ proxyDrag: true,
+ shadow: true
+});
+dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
+dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
+dlg.addButton('Cancel', dlg.hide, dlg);
+dlg.show();
+</code></pre>
+ <b>A Dialog should always be a direct child of the body element.</b>
+ * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
+ * @cfg {String} title Default text to display in the title bar (defaults to null)
+ * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
+ * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
+ * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
+ * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
+ * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
+ * (defaults to null with no animation)
+ * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
+ * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
+ * property for valid values (defaults to 'all')
+ * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
+ * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
+ * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
+ * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
+ * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
+ * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
+ * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
+ * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
+ * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
+ * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
+ * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
+ * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
+ * draggable = true (defaults to false)
+ * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+ * shadow (defaults to false)
+ * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
+ * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
+ * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
+ * @cfg {Array} buttons Array of buttons
+ * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
* @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ * Create a new BasicDialog.
+ * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
+ * @param {Object} config Configuration options
*/
-Roo.tree.TreeNode = function(attributes){
- attributes = attributes || {};
- if(typeof attributes == "string"){
- attributes = {text: attributes};
+Roo.BasicDialog = function(el, config){
+ this.el = Roo.get(el);
+ var dh = Roo.DomHelper;
+ if(!this.el && config && config.autoCreate){
+ if(typeof config.autoCreate == "object"){
+ if(!config.autoCreate.id){
+ config.autoCreate.id = el;
+ }
+ this.el = dh.append(document.body,
+ config.autoCreate, true);
+ }else{
+ this.el = dh.append(document.body,
+ {tag: "div", id: el, style:'visibility:hidden;'}, true);
+ }
}
- this.childrenRendered = false;
- this.rendered = false;
- Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
- this.expanded = attributes.expanded === true;
- this.isTarget = attributes.isTarget !== false;
- this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
- this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
+ el = this.el;
+ el.setDisplayed(true);
+ el.hide = this.hideAction;
+ this.id = el.id;
+ el.addClass("x-dlg");
- /**
- * Read-only. The text for this node. To change it use setText().
- * @type String
- */
- this.text = attributes.text;
- /**
- * True if this node is disabled.
- * @type Boolean
- */
- this.disabled = attributes.disabled === true;
+ Roo.apply(this, config);
- this.addEvents({
- /**
- * @event textchange
- * Fires when the text for this node is changed
- * @param {Node} this This node
- * @param {String} text The new text
- * @param {String} oldText The old text
- */
- "textchange" : true,
- /**
- * @event beforeexpand
- * Fires before this node is expanded, return false to cancel.
- * @param {Node} this This node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforeexpand" : true,
- /**
- * @event beforecollapse
- * Fires before this node is collapsed, return false to cancel.
- * @param {Node} this This node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforecollapse" : true,
- /**
- * @event expand
- * Fires when this node is expanded
- * @param {Node} this This node
- */
- "expand" : true,
- /**
- * @event disabledchange
- * Fires when the disabled status of this node changes
- * @param {Node} this This node
- * @param {Boolean} disabled
- */
- "disabledchange" : true,
- /**
- * @event collapse
- * Fires when this node is collapsed
- * @param {Node} this This node
- */
- "collapse" : true,
- /**
- * @event beforeclick
- * Fires before click processing. Return false to cancel the default action.
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "beforeclick":true,
- /**
- * @event checkchange
- * Fires when a node with a checkbox's checked property changes
- * @param {Node} this This node
- * @param {Boolean} checked
- */
- "checkchange":true,
- /**
- * @event click
- * Fires when this node is clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "click":true,
- /**
- * @event dblclick
- * Fires when this node is double clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "dblclick":true,
- /**
- * @event contextmenu
- * Fires when this node is right clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "contextmenu":true,
- /**
- * @event beforechildrenrendered
- * Fires right before the child nodes for this node are rendered
- * @param {Node} this This node
- */
- "beforechildrenrendered":true
- });
+ this.proxy = el.createProxy("x-dlg-proxy");
+ this.proxy.hide = this.hideAction;
+ this.proxy.setOpacity(.5);
+ this.proxy.hide();
- var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
+ if(config.width){
+ el.setWidth(config.width);
+ }
+ if(config.height){
+ el.setHeight(config.height);
+ }
+ this.size = el.getSize();
+ if(typeof config.x != "undefined" && typeof config.y != "undefined"){
+ this.xy = [config.x,config.y];
+ }else{
+ this.xy = el.getCenterXY(true);
+ }
+ /** The header element @type Roo.Element */
+ this.header = el.child("> .x-dlg-hd");
+ /** The body element @type Roo.Element */
+ this.body = el.child("> .x-dlg-bd");
+ /** The footer element @type Roo.Element */
+ this.footer = el.child("> .x-dlg-ft");
- /**
- * Read-only. The UI for this node
- * @type TreeNodeUI
- */
- this.ui = new uiClass(this);
-
- // finally support items[]
- if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
- return;
+ if(!this.header){
+ this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
+ }
+ if(!this.body){
+ this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
}
-
-
- Roo.each(this.attributes.items, function(c) {
- this.appendChild(Roo.factory(c,Roo.Tree));
- }, this);
- delete this.attributes.items;
-
-
-
-};
-Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
- preventHScroll: true,
- /**
- * Returns true if this node is expanded
- * @return {Boolean}
- */
- isExpanded : function(){
- return this.expanded;
- },
- /**
- * Returns the UI object for this node
- * @return {TreeNodeUI}
- */
- getUI : function(){
- return this.ui;
- },
+ this.header.unselectable();
+ if(this.title){
+ this.header.update(this.title);
+ }
+ // this element allows the dialog to be focused for keyboard event
+ this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
+ this.focusEl.swallowEvent("click", true);
- // private override
- setFirstChild : function(node){
- var of = this.firstChild;
- Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
- if(this.childrenRendered && of && node != of){
- of.renderIndent(true, true);
- }
- if(this.rendered){
- this.renderIndent(true, true);
- }
- },
+ this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
- // private override
- setLastChild : function(node){
- var ol = this.lastChild;
- Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
- if(this.childrenRendered && ol && node != ol){
- ol.renderIndent(true, true);
- }
- if(this.rendered){
- this.renderIndent(true, true);
- }
- },
+ // wrap the body and footer for special rendering
+ this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
+ if(this.footer){
+ this.bwrap.dom.appendChild(this.footer.dom);
+ }
- // these methods are overridden to provide lazy rendering support
- // private override
- appendChild : function()
- {
- var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
- if(node && this.childrenRendered){
- node.render();
- }
- this.ui.updateExpandIcon();
- return node;
- },
+ this.bg = this.el.createChild({
+ tag: "div", cls:"x-dlg-bg",
+ html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center"> </div></div></div>'
+ });
+ this.centerBg = this.bg.child("div.x-dlg-bg-center");
- // private override
- removeChild : function(node){
- this.ownerTree.getSelectionModel().unselect(node);
- Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
- // if it's been rendered remove dom node
- if(this.childrenRendered){
- node.ui.remove();
- }
- if(this.childNodes.length < 1){
- this.collapse(false, false);
- }else{
- this.ui.updateExpandIcon();
+
+ if(this.autoScroll !== false && !this.autoTabs){
+ this.body.setStyle("overflow", "auto");
+ }
+
+ this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
+
+ if(this.closable !== false){
+ this.el.addClass("x-dlg-closable");
+ this.close = this.toolbox.createChild({cls:"x-dlg-close"});
+ this.close.on("click", this.closeClick, this);
+ this.close.addClassOnOver("x-dlg-close-over");
+ }
+ if(this.collapsible !== false){
+ this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
+ this.collapseBtn.on("click", this.collapseClick, this);
+ this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
+ this.header.on("dblclick", this.collapseClick, this);
+ }
+ if(this.resizable !== false){
+ this.el.addClass("x-dlg-resizable");
+ this.resizer = new Roo.Resizable(el, {
+ minWidth: this.minWidth || 80,
+ minHeight:this.minHeight || 80,
+ handles: this.resizeHandles || "all",
+ pinned: true
+ });
+ this.resizer.on("beforeresize", this.beforeResize, this);
+ this.resizer.on("resize", this.onResize, this);
+ }
+ if(this.draggable !== false){
+ el.addClass("x-dlg-draggable");
+ if (!this.proxyDrag) {
+ var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
}
- if(!this.firstChild) {
- this.childrenRendered = false;
+ else {
+ var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
}
- return node;
- },
+ dd.setHandleElId(this.header.id);
+ dd.endDrag = this.endMove.createDelegate(this);
+ dd.startDrag = this.startMove.createDelegate(this);
+ dd.onDrag = this.onDrag.createDelegate(this);
+ dd.scroll = false;
+ this.dd = dd;
+ }
+ if(this.modal){
+ this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
+ this.mask.enableDisplayMode("block");
+ this.mask.hide();
+ this.el.addClass("x-dlg-modal");
+ }
+ if(this.shadow){
+ this.shadow = new Roo.Shadow({
+ mode : typeof this.shadow == "string" ? this.shadow : "sides",
+ offset : this.shadowOffset
+ });
+ }else{
+ this.shadowOffset = 0;
+ }
+ if(Roo.useShims && this.shim !== false){
+ this.shim = this.el.createShim();
+ this.shim.hide = this.hideAction;
+ this.shim.hide();
+ }else{
+ this.shim = false;
+ }
+ if(this.autoTabs){
+ this.initTabs();
+ }
+ if (this.buttons) {
+ var bts= this.buttons;
+ this.buttons = [];
+ Roo.each(bts, function(b) {
+ this.addButton(b);
+ }, this);
+ }
+
+
+ this.addEvents({
+ /**
+ * @event keydown
+ * Fires when a key is pressed
+ * @param {Roo.BasicDialog} this
+ * @param {Roo.EventObject} e
+ */
+ "keydown" : true,
+ /**
+ * @event move
+ * Fires when this dialog is moved by the user.
+ * @param {Roo.BasicDialog} this
+ * @param {Number} x The new page X
+ * @param {Number} y The new page Y
+ */
+ "move" : true,
+ /**
+ * @event resize
+ * Fires when this dialog is resized by the user.
+ * @param {Roo.BasicDialog} this
+ * @param {Number} width The new width
+ * @param {Number} height The new height
+ */
+ "resize" : true,
+ /**
+ * @event beforehide
+ * Fires before this dialog is hidden.
+ * @param {Roo.BasicDialog} this
+ */
+ "beforehide" : true,
+ /**
+ * @event hide
+ * Fires when this dialog is hidden.
+ * @param {Roo.BasicDialog} this
+ */
+ "hide" : true,
+ /**
+ * @event beforeshow
+ * Fires before this dialog is shown.
+ * @param {Roo.BasicDialog} this
+ */
+ "beforeshow" : true,
+ /**
+ * @event show
+ * Fires when this dialog is shown.
+ * @param {Roo.BasicDialog} this
+ */
+ "show" : true
+ });
+ el.on("keydown", this.onKeyDown, this);
+ el.on("mousedown", this.toFront, this);
+ Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
+ this.el.hide();
+ Roo.DialogManager.register(this);
+ Roo.BasicDialog.superclass.constructor.call(this);
+};
- // private override
- insertBefore : function(node, refNode){
- var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
- if(newNode && refNode && this.childrenRendered){
- node.render();
- }
- this.ui.updateExpandIcon();
- return newNode;
- },
+Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
+ shadowOffset: Roo.isIE ? 6 : 5,
+ minHeight: 80,
+ minWidth: 200,
+ minButtonWidth: 75,
+ defaultButton: null,
+ buttonAlign: "right",
+ tabTag: 'div',
+ firstShow: true,
/**
- * Sets the text for this node
- * @param {String} text
+ * Sets the dialog title text
+ * @param {String} text The title text to display
+ * @return {Roo.BasicDialog} this
*/
- setText : function(text){
- var oldText = this.text;
- this.text = text;
- this.attributes.text = text;
- if(this.rendered){ // event without subscribing
- this.ui.onTextChange(this, text, oldText);
- }
- this.fireEvent("textchange", this, text, oldText);
+ setTitle : function(text){
+ this.header.update(text);
+ return this;
},
- /**
- * Triggers selection of this node
- */
- select : function(){
- this.getOwnerTree().getSelectionModel().select(this);
+ // private
+ closeClick : function(){
+ this.hide();
},
- /**
- * Triggers deselection of this node
- */
- unselect : function(){
- this.getOwnerTree().getSelectionModel().unselect(this);
+ // private
+ collapseClick : function(){
+ this[this.collapsed ? "expand" : "collapse"]();
},
/**
- * Returns true if this node is selected
- * @return {Boolean}
+ * Collapses the dialog to its minimized state (only the title bar is visible).
+ * Equivalent to the user clicking the collapse dialog button.
*/
- isSelected : function(){
- return this.getOwnerTree().getSelectionModel().isSelected(this);
+ collapse : function(){
+ if(!this.collapsed){
+ this.collapsed = true;
+ this.el.addClass("x-dlg-collapsed");
+ this.restoreHeight = this.el.getHeight();
+ this.resizeTo(this.el.getWidth(), this.header.getHeight());
+ }
},
/**
- * Expand this node.
- * @param {Boolean} deep (optional) True to expand all children as well
- * @param {Boolean} anim (optional) false to cancel the default animation
- * @param {Function} callback (optional) A callback to be called when
- * expanding this node completes (does not wait for deep expand to complete).
- * Called with 1 parameter, this node.
+ * Expands a collapsed dialog back to its normal state. Equivalent to the user
+ * clicking the expand dialog button.
*/
- expand : function(deep, anim, callback){
- if(!this.expanded){
- if(this.fireEvent("beforeexpand", this, deep, anim) === false){
- return;
- }
- if(!this.childrenRendered){
- this.renderChildren();
- }
- this.expanded = true;
-
- if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
- this.ui.animExpand(function(){
- this.fireEvent("expand", this);
- if(typeof callback == "function"){
- callback(this);
- }
- if(deep === true){
- this.expandChildNodes(true);
- }
- }.createDelegate(this));
- return;
- }else{
- this.ui.expand();
- this.fireEvent("expand", this);
- if(typeof callback == "function"){
- callback(this);
- }
- }
- }else{
- if(typeof callback == "function"){
- callback(this);
- }
- }
- if(deep === true){
- this.expandChildNodes(true);
+ expand : function(){
+ if(this.collapsed){
+ this.collapsed = false;
+ this.el.removeClass("x-dlg-collapsed");
+ this.resizeTo(this.el.getWidth(), this.restoreHeight);
}
},
- isHiddenRoot : function(){
- return this.isRoot && !this.getOwnerTree().rootVisible;
- },
-
/**
- * Collapse this node.
- * @param {Boolean} deep (optional) True to collapse all children as well
- * @param {Boolean} anim (optional) false to cancel the default animation
+ * Reinitializes the tabs component, clearing out old tabs and finding new ones.
+ * @return {Roo.panel.Tab} The tabs component
*/
- collapse : function(deep, anim){
- if(this.expanded && !this.isHiddenRoot()){
- if(this.fireEvent("beforecollapse", this, deep, anim) === false){
- return;
- }
- this.expanded = false;
- if((this.getOwnerTree().animate && anim !== false) || anim){
- this.ui.animCollapse(function(){
- this.fireEvent("collapse", this);
- if(deep === true){
- this.collapseChildNodes(true);
- }
- }.createDelegate(this));
- return;
- }else{
- this.ui.collapse();
- this.fireEvent("collapse", this);
- }
- }
- if(deep === true){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(true, false);
- }
+ initTabs : function(){
+ var tabs = this.getTabs();
+ while(tabs.getTab(0)){
+ tabs.removeTab(0);
}
+ this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
+ var dom = el.dom;
+ tabs.addTab(Roo.id(dom), dom.title);
+ dom.title = "";
+ });
+ tabs.activate(0);
+ return tabs;
},
// private
- delayedExpand : function(delay){
- if(!this.expandProcId){
- this.expandProcId = this.expand.defer(delay, this);
- }
+ beforeResize : function(){
+ this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
},
// private
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
- }
- this.expandProcId = false;
+ onResize : function(){
+ this.refreshSize();
+ this.syncBodyHeight();
+ this.adjustAssets();
+ this.focus();
+ this.fireEvent("resize", this, this.size.width, this.size.height);
},
- /**
- * Toggles expanded/collapsed state of the node
- */
- toggle : function(){
- if(this.expanded){
- this.collapse();
- }else{
- this.expand();
+ // private
+ onKeyDown : function(e){
+ if(this.isVisible()){
+ this.fireEvent("keydown", this, e);
}
},
/**
- * Ensures all parent nodes are expanded
+ * Resizes the dialog.
+ * @param {Number} width
+ * @param {Number} height
+ * @return {Roo.BasicDialog} this
*/
- ensureVisible : function(callback){
- var tree = this.getOwnerTree();
- tree.expandPath(this.parentNode.getPath(), false, function(){
- tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
- Roo.callback(callback);
- }.createDelegate(this));
+ resizeTo : function(width, height){
+ this.el.setSize(width, height);
+ this.size = {width: width, height: height};
+ this.syncBodyHeight();
+ if(this.fixedcenter){
+ this.center();
+ }
+ if(this.isVisible()){
+ this.constrainXY();
+ this.adjustAssets();
+ }
+ this.fireEvent("resize", this, width, height);
+ return this;
},
+
/**
- * Expand all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
+ * Resizes the dialog to fit the specified content size.
+ * @param {Number} width
+ * @param {Number} height
+ * @return {Roo.BasicDialog} this
*/
- expandChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].expand(deep);
+ setContentSize : function(w, h){
+ h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
+ w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
+ //if(!this.el.isBorderBox()){
+ h += this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
+ w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
+ //}
+ if(this.tabs){
+ h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
+ w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
}
+ this.resizeTo(w, h);
+ return this;
},
/**
- * Collapse all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
+ * Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be
+ * executed in response to a particular key being pressed while the dialog is active.
+ * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
+ * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope of the function
+ * @return {Roo.BasicDialog} this
*/
- collapseChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(deep);
+ addKeyListener : function(key, fn, scope){
+ var keyCode, shift, ctrl, alt;
+ if(typeof key == "object" && !(key instanceof Array)){
+ keyCode = key["key"];
+ shift = key["shift"];
+ ctrl = key["ctrl"];
+ alt = key["alt"];
+ }else{
+ keyCode = key;
}
+ var handler = function(dlg, e){
+ if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
+ var k = e.getKey();
+ if(keyCode instanceof Array){
+ for(var i = 0, len = keyCode.length; i < len; i++){
+ if(keyCode[i] == k){
+ fn.call(scope || window, dlg, k, e);
+ return;
+ }
+ }
+ }else{
+ if(k == keyCode){
+ fn.call(scope || window, dlg, k, e);
+ }
+ }
+ }
+ };
+ this.on("keydown", handler);
+ return this;
},
/**
- * Disables this node
+ * Returns the panel.Tab component (creates it if it doesn't exist).
+ * Note: If you wish to simply check for the existence of tabs without creating them,
+ * check for a null 'tabs' property.
+ * @return {Roo.panel.Tab} The tabs component
*/
- disable : function(){
- this.disabled = true;
- this.unselect();
- if(this.rendered && this.ui.onDisableChange){ // event without subscribing
- this.ui.onDisableChange(this, true);
+ getTabs : function(){
+ if(!this.tabs){
+ this.el.addClass("x-dlg-auto-tabs");
+ this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
+ this.tabs = new Roo.panel.Tab(this.body.dom, this.tabPosition == "bottom");
}
- this.fireEvent("disabledchange", this, true);
+ return this.tabs;
},
/**
- * Enables this node
+ * Adds a button to the footer section of the dialog.
+ * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+ * object or a valid Roo.DomHelper element config
+ * @param {Function} handler The function called when the button is clicked
+ * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
+ * @return {Roo.Button} The new button
*/
- enable : function(){
- this.disabled = false;
- if(this.rendered && this.ui.onDisableChange){ // event without subscribing
- this.ui.onDisableChange(this, false);
+ addButton : function(config, handler, scope){
+ var dh = Roo.DomHelper;
+ if(!this.footer){
+ this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
}
- this.fireEvent("disabledchange", this, false);
- },
+ if(!this.btnContainer){
+ var tb = this.footer.createChild({
- // private
- renderChildren : function(suppressEvent){
- if(suppressEvent !== false){
- this.fireEvent("beforechildrenrendered", this);
- }
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].render(true);
+ cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
+ html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+ }, null, true);
+ this.btnContainer = tb.firstChild.firstChild.firstChild;
}
- this.childrenRendered = true;
- },
-
- // private
- sort : function(fn, scope){
- Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
- if(this.childrenRendered){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].render(true);
+ var bconfig = {
+ handler: handler,
+ scope: scope,
+ minWidth: this.minButtonWidth,
+ hideParent:true
+ };
+ if(typeof config == "string"){
+ bconfig.text = config;
+ }else{
+ if(config.tag){
+ bconfig.dhconfig = config;
+ }else{
+ Roo.apply(bconfig, config);
}
}
+ var fc = false;
+ if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
+ bconfig.position = Math.max(0, bconfig.position);
+ fc = this.btnContainer.childNodes[bconfig.position];
+ }
+
+ var btn = new Roo.Button(
+ fc ?
+ this.btnContainer.insertBefore(document.createElement("td"),fc)
+ : this.btnContainer.appendChild(document.createElement("td")),
+ //Roo.get(this.btnContainer).createChild( { tag: 'td'}, fc ),
+ bconfig
+ );
+ this.syncBodyHeight();
+ if(!this.buttons){
+ /**
+ * Array of all the buttons that have been added to this dialog via addButton
+ * @type Array
+ */
+ this.buttons = [];
+ }
+ this.buttons.push(btn);
+ return btn;
},
- // private
- render : function(bulkRender){
- this.ui.render(bulkRender);
- if(!this.rendered){
- this.rendered = true;
- if(this.expanded){
- this.expanded = false;
- this.expand(false, false);
- }
- }
+ /**
+ * Sets the default button to be focused when the dialog is displayed.
+ * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
+ * @return {Roo.BasicDialog} this
+ */
+ setDefaultButton : function(btn){
+ this.defaultButton = btn;
+ return this;
},
// private
- renderIndent : function(deep, refresh){
- if(refresh){
- this.ui.childIndent = null;
- }
- this.ui.renderIndent();
- if(deep === true && this.childrenRendered){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].renderIndent(true, refresh);
- }
+ getHeaderFooterHeight : function(safe){
+ var height = 0;
+ if(this.header){
+ height += this.header.getHeight();
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.tree.AsyncTreeNode
- * @extends Roo.tree.TreeNode
- * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
- * @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
- */
- Roo.tree.AsyncTreeNode = function(config){
- this.loaded = false;
- this.loading = false;
- Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
- /**
- * @event beforeload
- * Fires before this node is loaded, return false to cancel
- * @param {Node} this This node
- */
- this.addEvents({'beforeload':true, 'load': true});
- /**
- * @event load
- * Fires when this node is loaded
- * @param {Node} this This node
- */
- /**
- * The loader used by this node (defaults to using the tree's defined loader)
- * @type TreeLoader
- * @property loader
- */
-};
-Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
- expand : function(deep, anim, callback){
- if(this.loading){ // if an async load is already running, waiting til it's done
- var timer;
- var f = function(){
- if(!this.loading){ // done loading
- clearInterval(timer);
- this.expand(deep, anim, callback);
- }
- }.createDelegate(this);
- timer = setInterval(f, 200);
- return;
+ if(this.footer){
+ var fm = this.footer.getMargins();
+ height += (this.footer.getHeight()+fm.top+fm.bottom);
}
- if(!this.loaded){
- if(this.fireEvent("beforeload", this) === false){
- return;
- }
- this.loading = true;
- this.ui.beforeLoad(this);
- var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
- if(loader){
- loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
- return;
+ height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
+ height += this.centerBg.getPadding("tb");
+ return height;
+ },
+
+ // private
+ syncBodyHeight : function()
+ {
+ var bd = this.body, // the text
+ cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
+ bw = this.bwrap;
+ var height = this.size.height - this.getHeaderFooterHeight(false);
+ bd.setHeight(height-bd.getMargins("tb"));
+ var hh = this.header.getHeight();
+ var h = this.size.height-hh;
+ cb.setHeight(h);
+
+ bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
+ bw.setHeight(h-cb.getPadding("tb"));
+
+ bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
+ bd.setWidth(bw.getWidth(true));
+ if(this.tabs){
+ this.tabs.syncHeight();
+ if(Roo.isIE){
+ this.tabs.el.repaint();
}
}
- Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
- },
-
- /**
- * Returns true if this node is currently loading
- * @return {Boolean}
- */
- isLoading : function(){
- return this.loading;
- },
-
- loadComplete : function(deep, anim, callback){
- this.loading = false;
- this.loaded = true;
- this.ui.afterLoad(this);
- this.fireEvent("load", this);
- this.expand(deep, anim, callback);
},
-
+
/**
- * Returns true if this node has been loaded
- * @return {Boolean}
+ * Restores the previous state of the dialog if Roo.state is configured.
+ * @return {Roo.BasicDialog} this
*/
- isLoaded : function(){
- return this.loaded;
- },
-
- hasChildNodes : function(){
- if(!this.isLeaf() && !this.loaded){
- return true;
- }else{
- return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
+ restoreState : function(){
+ var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
+ if(box && box.width){
+ this.xy = [box.x, box.y];
+ this.resizeTo(box.width, box.height);
}
+ return this;
},
- /**
- * Trigger a reload for this node
- * @param {Function} callback
- */
- reload : function(callback){
- this.collapse(false, false);
- while(this.firstChild){
- this.removeChild(this.firstChild);
- }
- this.childrenRendered = false;
- this.loaded = false;
- if(this.isHiddenRoot()){
- this.expanded = false;
+ // private
+ beforeShow : function(){
+ this.expand();
+ if(this.fixedcenter){
+ this.xy = this.el.getCenterXY(true);
}
- this.expand(false, false, callback);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.tree.TreeNodeUI
- * @constructor
- * @param {Object} node The node to render
- * The TreeNode UI implementation is separate from the
- * tree implementation. Unless you are customizing the tree UI,
- * you should never have to use this directly.
- */
-Roo.tree.TreeNodeUI = function(node){
- this.node = node;
- this.rendered = false;
- this.animating = false;
- this.emptyIcon = Roo.BLANK_IMAGE_URL;
-};
-
-Roo.tree.TreeNodeUI.prototype = {
- removeChild : function(node){
- if(this.rendered){
- this.ctNode.removeChild(node.ui.getEl());
+ if(this.modal){
+ Roo.get(document.body).addClass("x-body-masked");
+ this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this.mask.show();
}
+ this.constrainXY();
},
- beforeLoad : function(){
- this.addClass("x-tree-node-loading");
- },
-
- afterLoad : function(){
- this.removeClass("x-tree-node-loading");
+ // private
+ animShow : function(){
+ var b = Roo.get(this.animateTarget).getBox();
+ this.proxy.setSize(b.width, b.height);
+ this.proxy.setLocation(b.x, b.y);
+ this.proxy.show();
+ this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
+ true, .35, this.showEl.createDelegate(this));
},
- onTextChange : function(node, text, oldText){
- if(this.rendered){
- this.textNode.innerHTML = text;
+ /**
+ * Shows the dialog.
+ * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
+ * @return {Roo.BasicDialog} this
+ */
+ show : function(animateTarget){
+ if (this.fireEvent("beforeshow", this) === false){
+ return;
+ }
+ if(this.syncHeightBeforeShow){
+ this.syncBodyHeight();
+ }else if(this.firstShow){
+ this.firstShow = false;
+ this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
+ }
+ this.animateTarget = animateTarget || this.animateTarget;
+ if(!this.el.isVisible()){
+ this.beforeShow();
+ if(this.animateTarget && Roo.get(this.animateTarget)){
+ this.animShow();
+ }else{
+ this.showEl();
+ }
}
+ return this;
},
- onDisableChange : function(node, state){
- this.disabled = state;
- if(state){
- this.addClass("x-tree-node-disabled");
- }else{
- this.removeClass("x-tree-node-disabled");
+ // private
+ showEl : function(){
+ this.proxy.hide();
+ this.el.setXY(this.xy);
+ this.el.show();
+ this.adjustAssets(true);
+ this.toFront();
+ this.focus();
+ // IE peekaboo bug - fix found by Dave Fenwick
+ if(Roo.isIE){
+ this.el.repaint();
}
+ this.fireEvent("show", this);
},
- onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
+ /**
+ * Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
+ * dialog itself will receive focus.
+ */
+ focus : function(){
+ if(this.defaultButton){
+ this.defaultButton.focus();
}else{
- //this.blur();
- this.removeClass("x-tree-selected");
+ this.focusEl.focus();
}
},
- onMove : function(tree, node, oldParent, newParent, index, refNode){
- this.childIndent = null;
- if(this.rendered){
- var targetNode = newParent.ui.getContainer();
- if(!targetNode){//target not rendered
- this.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
- return;
+ // private
+ constrainXY : function(){
+ if(this.constraintoviewport !== false){
+ if(!this.viewSize){
+ if(this.container){
+ var s = this.container.getSize();
+ this.viewSize = [s.width, s.height];
+ }else{
+ this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
+ }
}
- var insertBefore = refNode ? refNode.ui.getEl() : null;
- if(insertBefore){
- targetNode.insertBefore(this.wrap, insertBefore);
- }else{
- targetNode.appendChild(this.wrap);
+ var s = Roo.get(this.container||document).getScroll();
+
+ var x = this.xy[0], y = this.xy[1];
+ var w = this.size.width, h = this.size.height;
+ var vw = this.viewSize[0], vh = this.viewSize[1];
+ // only move it if it needs it
+ var moved = false;
+ // first validate right/bottom
+ if(x + w > vw+s.left){
+ x = vw - w;
+ moved = true;
+ }
+ if(y + h > vh+s.top){
+ y = vh - h;
+ moved = true;
+ }
+ // then make sure top/left isn't negative
+ if(x < s.left){
+ x = s.left;
+ moved = true;
+ }
+ if(y < s.top){
+ y = s.top;
+ moved = true;
+ }
+ if(moved){
+ // cache xy
+ this.xy = [x, y];
+ if(this.isVisible()){
+ this.el.setLocation(x, y);
+ this.adjustAssets();
+ }
}
- this.node.renderIndent(true);
}
},
- addClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).addClass(cls);
+ // private
+ onDrag : function(){
+ if(!this.proxyDrag){
+ this.xy = this.el.getXY();
+ this.adjustAssets();
}
},
- removeClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).removeClass(cls);
+ // private
+ adjustAssets : function(doShow){
+ var x = this.xy[0], y = this.xy[1];
+ var w = this.size.width, h = this.size.height;
+ if(doShow === true){
+ if(this.shadow){
+ this.shadow.show(this.el);
+ }
+ if(this.shim){
+ this.shim.show();
+ }
}
- },
-
- remove : function(){
- if(this.rendered){
- this.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
+ if(this.shadow && this.shadow.isVisible()){
+ this.shadow.show(this.el);
+ }
+ if(this.shim && this.shim.isVisible()){
+ this.shim.setBounds(x, y, w, h);
}
},
- fireEvent : function(){
- return this.node.fireEvent.apply(this.node, arguments);
+ // private
+ adjustViewport : function(w, h){
+ if(!w || !h){
+ w = Roo.lib.Dom.getViewWidth();
+ h = Roo.lib.Dom.getViewHeight();
+ }
+ // cache the size
+ this.viewSize = [w, h];
+ if(this.modal && this.mask.isVisible()){
+ this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
+ this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ }
+ if(this.isVisible()){
+ this.constrainXY();
+ }
},
- initEvents : function(){
- this.node.on("move", this.onMove, this);
- var E = Roo.EventManager;
- var a = this.anchor;
-
- var el = Roo.fly(a, '_treeui');
-
- if(Roo.isOpera){ // opera render bug ignores the CSS
- el.setStyle("text-decoration", "none");
+ /**
+ * Destroys this dialog and all its supporting elements (including any tabs, shim,
+ * shadow, proxy, mask, etc.) Also removes all event listeners.
+ * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+ */
+ destroy : function(removeEl){
+ if(this.isVisible()){
+ this.animateTarget = null;
+ this.hide();
}
-
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
-
- if(this.checkbox){
- Roo.EventManager.on(this.checkbox,
- Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
+ Roo.EventManager.removeResizeListener(this.adjustViewport, this);
+ if(this.tabs){
+ this.tabs.destroy(removeEl);
}
-
- el.on("contextmenu", this.onContextMenu, this);
-
- var icon = Roo.fly(this.iconNode);
- icon.on("click", this.onClick, this);
- icon.on("dblclick", this.onDblClick, this);
- icon.on("contextmenu", this.onContextMenu, this);
- E.on(this.ecNode, "click", this.ecClick, this, true);
-
- if(this.node.disabled){
- this.addClass("x-tree-node-disabled");
+ Roo.destroy(
+ this.shim,
+ this.proxy,
+ this.resizer,
+ this.close,
+ this.mask
+ );
+ if(this.dd){
+ this.dd.unreg();
}
- if(this.node.hidden){
- this.addClass("x-tree-node-disabled");
+ if(this.buttons){
+ for(var i = 0, len = this.buttons.length; i < len; i++){
+ this.buttons[i].destroy();
+ }
}
- var ot = this.node.getOwnerTree();
- var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
- if(dd && (!this.node.isRoot || ot.rootVisible)){
- Roo.dd.Registry.register(this.elNode, {
- node: this.node,
- handles: this.getDDHandles(),
- isHandle: false
- });
+ this.el.removeAllListeners();
+ if(removeEl === true){
+ this.el.update("");
+ this.el.remove();
}
+ Roo.DialogManager.unregister(this);
},
- getDDHandles : function(){
- return [this.iconNode, this.textNode];
- },
-
- hide : function(){
- if(this.rendered){
- this.wrap.style.display = "none";
- }
- },
-
- show : function(){
- if(this.rendered){
- this.wrap.style.display = "";
+ // private
+ startMove : function(){
+ if(this.proxyDrag){
+ this.proxy.show();
}
- },
-
- onContextMenu : function(e){
- if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
- e.preventDefault();
- this.focus();
- this.fireEvent("contextmenu", this.node, e);
+ if(this.constraintoviewport !== false){
+ this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
}
},
- onClick : function(e){
- if(this.dropping){
- e.stopEvent();
- return;
- }
- if(this.fireEvent("beforeclick", this.node, e) !== false){
- if(!this.disabled && this.node.attributes.href){
- this.fireEvent("click", this.node, e);
- return;
- }
- e.preventDefault();
- if(this.disabled){
- return;
- }
-
- if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
- this.node.toggle();
- }
-
- this.fireEvent("click", this.node, e);
+ // private
+ endMove : function(){
+ if(!this.proxyDrag){
+ Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
}else{
- e.stopEvent();
- }
- },
-
- onDblClick : function(e){
- e.preventDefault();
- if(this.disabled){
- return;
- }
- if(this.checkbox){
- this.toggleCheck();
- }
- if(!this.animating && this.node.hasChildNodes()){
- this.node.toggle();
+ Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
+ this.proxy.hide();
}
- this.fireEvent("dblclick", this.node, e);
+ this.refreshSize();
+ this.adjustAssets();
+ this.focus();
+ this.fireEvent("move", this, this.xy[0], this.xy[1]);
},
- onCheckChange : function(){
- var checked = this.checkbox.checked;
- this.node.attributes.checked = checked;
- this.fireEvent('checkchange', this.node, checked);
+ /**
+ * Brings this dialog to the front of any other visible dialogs
+ * @return {Roo.BasicDialog} this
+ */
+ toFront : function(){
+ Roo.DialogManager.bringToFront(this);
+ return this;
},
- ecClick : function(e){
- if(!this.animating && this.node.hasChildNodes()){
- this.node.toggle();
- }
+ /**
+ * Sends this dialog to the back (under) of any other visible dialogs
+ * @return {Roo.BasicDialog} this
+ */
+ toBack : function(){
+ Roo.DialogManager.sendToBack(this);
+ return this;
},
- startDrop : function(){
- this.dropping = true;
+ /**
+ * Centers this dialog in the viewport
+ * @return {Roo.BasicDialog} this
+ */
+ center : function(){
+ var xy = this.el.getCenterXY(true);
+ this.moveTo(xy[0], xy[1]);
+ return this;
},
- // delayed drop so the click event doesn't get fired on a drop
- endDrop : function(){
- setTimeout(function(){
- this.dropping = false;
- }.createDelegate(this), 50);
+ /**
+ * Moves the dialog's top-left corner to the specified point
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Roo.BasicDialog} this
+ */
+ moveTo : function(x, y){
+ this.xy = [x,y];
+ if(this.isVisible()){
+ this.el.setXY(this.xy);
+ this.adjustAssets();
+ }
+ return this;
},
- expand : function(){
- this.updateExpandIcon();
- this.ctNode.style.display = "";
+ /**
+ * Aligns the dialog to the specified element
+ * @param {String/HTMLElement/Roo.Element} element The element to align to.
+ * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @return {Roo.BasicDialog} this
+ */
+ alignTo : function(element, position, offsets){
+ this.xy = this.el.getAlignToXY(element, position, offsets);
+ if(this.isVisible()){
+ this.el.setXY(this.xy);
+ this.adjustAssets();
+ }
+ return this;
},
- focus : function(){
- if(!this.node.preventHScroll){
- try{this.anchor.focus();
- }catch(e){}
- }else if(!Roo.isIE){
- try{
- var noscroll = this.node.getOwnerTree().getTreeEl().dom;
- var l = noscroll.scrollLeft;
- this.anchor.focus();
- noscroll.scrollLeft = l;
- }catch(e){}
+ /**
+ * Anchors an element to another element and realigns it when the window is resized.
+ * @param {String/HTMLElement/Roo.Element} element The element to align to.
+ * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
+ * is a number, it is used as the buffer delay (defaults to 50ms).
+ * @return {Roo.BasicDialog} this
+ */
+ anchorTo : function(el, alignment, offsets, monitorScroll){
+ var action = function(){
+ this.alignTo(el, alignment, offsets);
+ };
+ Roo.EventManager.onWindowResize(action, this);
+ var tm = typeof monitorScroll;
+ if(tm != 'undefined'){
+ Roo.EventManager.on(window, 'scroll', action, this,
+ {buffer: tm == 'number' ? monitorScroll : 50});
}
+ action.call(this);
+ return this;
},
- toggleCheck : function(value){
- var cb = this.checkbox;
- if(cb){
- cb.checked = (value === undefined ? !cb.checked : value);
- }
+ /**
+ * Returns true if the dialog is visible
+ * @return {Boolean}
+ */
+ isVisible : function(){
+ return this.el.isVisible();
},
- blur : function(){
- try{
- this.anchor.blur();
- }catch(e){}
+ // private
+ animHide : function(callback){
+ var b = Roo.get(this.animateTarget).getBox();
+ this.proxy.show();
+ this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
+ this.el.hide();
+ this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
+ this.hideEl.createDelegate(this, [callback]));
},
- animExpand : function(callback){
- var ct = Roo.get(this.ctNode);
- ct.stopFx();
- if(!this.node.hasChildNodes()){
- this.updateExpandIcon();
- this.ctNode.style.display = "";
- Roo.callback(callback);
+ /**
+ * Hides the dialog.
+ * @param {Function} callback (optional) Function to call when the dialog is hidden
+ * @return {Roo.BasicDialog} this
+ */
+ hide : function(callback){
+ if (this.fireEvent("beforehide", this) === false){
return;
}
- this.animating = true;
- this.updateExpandIcon();
-
- ct.slideIn('t', {
- callback : function(){
- this.animating = false;
- Roo.callback(callback);
- },
- scope: this,
- duration: this.node.ownerTree.duration || .25
- });
+ if(this.shadow){
+ this.shadow.hide();
+ }
+ if(this.shim) {
+ this.shim.hide();
+ }
+ // sometimes animateTarget seems to get set.. causing problems...
+ // this just double checks..
+ if(this.animateTarget && Roo.get(this.animateTarget)) {
+ this.animHide(callback);
+ }else{
+ this.el.hide();
+ this.hideEl(callback);
+ }
+ return this;
},
- highlight : function(){
- var tree = this.node.getOwnerTree();
- Roo.fly(this.wrap).highlight(
- tree.hlColor || "C3DAF9",
- {endColor: tree.hlBaseColor}
- );
+ // private
+ hideEl : function(callback){
+ this.proxy.hide();
+ if(this.modal){
+ this.mask.hide();
+ Roo.get(document.body).removeClass("x-body-masked");
+ }
+ this.fireEvent("hide", this);
+ if(typeof callback == "function"){
+ callback();
+ }
},
- collapse : function(){
- this.updateExpandIcon();
- this.ctNode.style.display = "none";
+ // private
+ hideAction : function(){
+ this.setLeft("-10000px");
+ this.setTop("-10000px");
+ this.setStyle("visibility", "hidden");
},
- animCollapse : function(callback){
- var ct = Roo.get(this.ctNode);
- ct.enableDisplayMode('block');
- ct.stopFx();
-
- this.animating = true;
- this.updateExpandIcon();
-
- ct.slideOut('t', {
- callback : function(){
- this.animating = false;
- Roo.callback(callback);
- },
- scope: this,
- duration: this.node.ownerTree.duration || .25
- });
+ // private
+ refreshSize : function(){
+ this.size = this.el.getSize();
+ this.xy = this.el.getXY();
+ Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
},
- getContainer : function(){
- return this.ctNode;
- },
+ // private
+ // z-index is managed by the DialogManager and may be overwritten at any time
+ setZIndex : function(index){
+ if(this.modal){
+ this.mask.setStyle("z-index", index);
+ }
+ if(this.shim){
+ this.shim.setStyle("z-index", ++index);
+ }
+ if(this.shadow){
+ this.shadow.setZIndex(++index);
+ }
+ this.el.setStyle("z-index", ++index);
+ if(this.proxy){
+ this.proxy.setStyle("z-index", ++index);
+ }
+ if(this.resizer){
+ this.resizer.proxy.setStyle("z-index", ++index);
+ }
- getEl : function(){
- return this.wrap;
+ this.lastZIndex = index;
},
- appendDDGhost : function(ghostNode){
- ghostNode.appendChild(this.elNode.cloneNode(true));
- },
+ /**
+ * Returns the element for this dialog
+ * @return {Roo.Element} The underlying dialog Element
+ */
+ getEl : function(){
+ return this.el;
+ }
+});
- getDDRepairXY : function(){
- return Roo.lib.Dom.getXY(this.iconNode);
- },
+/**
+ * @class Roo.DialogManager
+ * Provides global access to BasicDialogs that have been created and
+ * support for z-indexing (layering) multiple open dialogs.
+ */
+Roo.DialogManager = function(){
+ var list = {};
+ var accessList = [];
+ var front = null;
- onRender : function(){
- this.render();
- },
+ // private
+ var sortDialogs = function(d1, d2){
+ return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
+ };
- render : function(bulkRender){
- var n = this.node, a = n.attributes;
- var targetNode = n.parentNode ?
- n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
+ // private
+ var orderDialogs = function(){
+ accessList.sort(sortDialogs);
+ var seed = Roo.DialogManager.zseed;
+ for(var i = 0, len = accessList.length; i < len; i++){
+ var dlg = accessList[i];
+ if(dlg){
+ dlg.setZIndex(seed + (i*10));
+ }
+ }
+ };
- if(!this.rendered){
- this.rendered = true;
+ return {
+ /**
+ * The starting z-index for BasicDialogs (defaults to 9000)
+ * @type Number The z-index value
+ */
+ zseed : 9000,
- this.renderElements(n, a, targetNode, bulkRender);
+ // private
+ register : function(dlg){
+ list[dlg.id] = dlg;
+ accessList.push(dlg);
+ },
- if(a.qtip){
- if(this.textNode.setAttributeNS){
- this.textNode.setAttributeNS("ext", "qtip", a.qtip);
- if(a.qtipTitle){
- this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
- }
- }else{
- this.textNode.setAttribute("ext:qtip", a.qtip);
- if(a.qtipTitle){
- this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
- }
- }
- }else if(a.qtipCfg){
- a.qtipCfg.target = Roo.id(this.textNode);
- Roo.QuickTips.register(a.qtipCfg);
+ // private
+ unregister : function(dlg){
+ delete list[dlg.id];
+ var i=0;
+ var len=0;
+ if(!accessList.indexOf){
+ for( i = 0, len = accessList.length; i < len; i++){
+ if(accessList[i] == dlg){
+ accessList.splice(i, 1);
+ return;
+ }
+ }
+ }else{
+ i = accessList.indexOf(dlg);
+ if(i != -1){
+ accessList.splice(i, 1);
+ }
}
- this.initEvents();
- if(!this.node.expanded){
- this.updateExpandIcon();
+ },
+
+ /**
+ * Gets a registered dialog by id
+ * @param {String/Object} id The id of the dialog or a dialog
+ * @return {Roo.BasicDialog} this
+ */
+ get : function(id){
+ return typeof id == "object" ? id : list[id];
+ },
+
+ /**
+ * Brings the specified dialog to the front
+ * @param {String/Object} dlg The id of the dialog or a dialog
+ * @return {Roo.BasicDialog} this
+ */
+ bringToFront : function(dlg){
+ dlg = this.get(dlg);
+ if(dlg != front){
+ front = dlg;
+ dlg._lastAccess = new Date().getTime();
+ orderDialogs();
}
- }else{
- if(bulkRender === true) {
- targetNode.appendChild(this.wrap);
+ return dlg;
+ },
+
+ /**
+ * Sends the specified dialog to the back
+ * @param {String/Object} dlg The id of the dialog or a dialog
+ * @return {Roo.BasicDialog} this
+ */
+ sendToBack : function(dlg){
+ dlg = this.get(dlg);
+ dlg._lastAccess = -(new Date().getTime());
+ orderDialogs();
+ return dlg;
+ },
+
+ /**
+ * Hides all dialogs
+ */
+ hideAll : function(){
+ for(var id in list){
+ if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
+ list[id].hide();
+ }
}
}
- },
+ };
+}();
- renderElements : function(n, a, targetNode, bulkRender)
- {
- // add some indent caching, this helps performance when rendering a large tree
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
- var t = n.getOwnerTree();
- var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
- if (typeof(n.attributes.html) != 'undefined') {
- txt = n.attributes.html;
+/**
+ * @class Roo.LayoutDialog
+ * @extends Roo.BasicDialog
+ * @children Roo.panel.Content
+ * @parent builder none
+ * Dialog which provides adjustments for working with a layout in a Dialog.
+ * Add your necessary layout config options to the dialog's config.<br>
+ * Example usage (including a nested layout):
+ * <pre><code>
+if(!dialog){
+ dialog = new Roo.LayoutDialog("download-dlg", {
+ modal: true,
+ width:600,
+ height:450,
+ shadow:true,
+ minWidth:500,
+ minHeight:350,
+ autoTabs:true,
+ proxyDrag:true,
+ // layout config merges with the dialog config
+ center:{
+ tabPosition: "top",
+ alwaysShowTabs: true
}
- var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
- var cb = typeof a.checked == 'boolean';
- var href = a.href ? a.href : Roo.isGecko ? "" : "#";
- var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
- '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
- cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
- '<a hidefocus="on" href="',href,'" tabIndex="1" ',
- a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "",
- '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',
- "</li>"];
+ });
+ dialog.addKeyListener(27, dialog.hide, dialog);
+ dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
+ dialog.addButton("Build It!", this.getDownload, this);
- if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
- this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
- n.nextSibling.ui.getEl(), buf.join(""));
- }else{
- this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+ // we can even add nested layouts
+ var innerLayout = new Roo.BorderLayout("dl-inner", {
+ east: {
+ initialSize: 200,
+ autoScroll:true,
+ split:true
+ },
+ center: {
+ autoScroll:true
}
+ });
+ innerLayout.beginUpdate();
+ innerLayout.add("east", new Roo.panel.Content("dl-details"));
+ innerLayout.add("center", new Roo.panel.Content("selection-panel"));
+ innerLayout.endUpdate(true);
- this.elNode = this.wrap.childNodes[0];
- this.ctNode = this.wrap.childNodes[1];
- var cs = this.elNode.childNodes;
- this.indentNode = cs[0];
- this.ecNode = cs[1];
- this.iconNode = cs[2];
- var index = 3;
- if(cb){
- this.checkbox = cs[3];
- index++;
- }
- this.anchor = cs[index];
- this.textNode = cs[index].firstChild;
- },
-
- getAnchor : function(){
- return this.anchor;
- },
-
- getTextEl : function(){
- return this.textNode;
- },
-
- getIconEl : function(){
- return this.iconNode;
- },
-
- isChecked : function(){
- return this.checkbox ? this.checkbox.checked : false;
- },
-
- updateExpandIcon : function(){
- if(this.rendered){
- var n = this.node, c1, c2;
- var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
- var hasChild = n.hasChildNodes();
- if(hasChild){
- if(n.expanded){
- cls += "-minus";
- c1 = "x-tree-node-collapsed";
- c2 = "x-tree-node-expanded";
- }else{
- cls += "-plus";
- c1 = "x-tree-node-expanded";
- c2 = "x-tree-node-collapsed";
- }
- if(this.wasLeaf){
- this.removeClass("x-tree-node-leaf");
- this.wasLeaf = false;
- }
- if(this.c1 != c1 || this.c2 != c2){
- Roo.fly(this.elNode).replaceClass(c1, c2);
- this.c1 = c1; this.c2 = c2;
- }
- }else{
- // this changes non-leafs into leafs if they have no children.
- // it's not very rational behaviour..
-
- if(!this.wasLeaf && this.node.leaf){
- Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
- delete this.c1;
- delete this.c2;
- this.wasLeaf = true;
- }
- }
- var ecc = "x-tree-ec-icon "+cls;
- if(this.ecc != ecc){
- this.ecNode.className = ecc;
- this.ecc = ecc;
- }
- }
- },
-
- getChildIndent : function(){
- if(!this.childIndent){
- var buf = [];
- var p = this.node;
- while(p){
- if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
- if(!p.isLast()) {
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
- } else {
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
- }
- }
- p = p.parentNode;
- }
- this.childIndent = buf.join("");
- }
- return this.childIndent;
- },
-
- renderIndent : function(){
- if(this.rendered){
- var indent = "";
- var p = this.node.parentNode;
- if(p){
- indent = p.ui.getChildIndent();
- }
- if(this.indentMarkup != indent){ // don't rerender if not required
- this.indentNode.innerHTML = indent;
- this.indentMarkup = indent;
- }
- this.updateExpandIcon();
- }
- }
-};
-
-Roo.tree.RootTreeNodeUI = function(){
- Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
-};
-Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
- render : function(){
- if(!this.rendered){
- var targetNode = this.node.ownerTree.innerCt.dom;
- this.node.expanded = true;
- targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
- this.wrap = this.ctNode = targetNode.firstChild;
- }
- },
- collapse : function(){
- },
- expand : function(){
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.tree.TreeLoader
- * @extends Roo.util.Observable
- * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
- * nodes from a specified URL. The response must be a javascript Array definition
- * who's elements are node definition objects. eg:
- * <pre><code>
-{ success : true,
- data : [
-
- { 'id': 1, 'text': 'A folder Node', 'leaf': false },
- { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
- ]
+ var layout = dialog.getLayout();
+ layout.beginUpdate();
+ layout.add("center", new Roo.panel.Content("standard-panel",
+ {title: "Download the Source", fitToFrame:true}));
+ layout.add("center", new Roo.panel.NestedLayout(innerLayout,
+ {title: "Build your own roo.js"}));
+ layout.getRegion("center").showPanel(sp);
+ layout.endUpdate();
}
-
-
</code></pre>
- * <br><br>
- * The old style respose with just an array is still supported, but not recommended.
- * <br><br>
- *
- * A server request is sent, and child nodes are loaded only when a node is expanded.
- * The loading node's id is passed to the server under the parameter name "node" to
- * enable the server to produce the correct child nodes.
- * <br><br>
- * To pass extra parameters, an event handler may be attached to the "beforeload"
- * event, and the parameters specified in the TreeLoader's baseParams property:
- * <pre><code>
- myTreeLoader.on("beforeload", function(treeLoader, node) {
- this.baseParams.category = node.attributes.category;
- }, this);
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
+ * @param {Object} config configuration options
+ */
+Roo.LayoutDialog = function(el, cfg){
+
+ var config= cfg;
+ if (typeof(cfg) == 'undefined') {
+ config = Roo.apply({}, el);
+ // not sure why we use documentElement here.. - it should always be body.
+ // IE7 borks horribly if we use documentElement.
+ // webkit also does not like documentElement - it creates a body element...
+ el = Roo.get( document.body || document.documentElement ).createChild();
+ //config.autoCreate = true;
+ }
+
+
+ config.autoTabs = false;
+ Roo.LayoutDialog.superclass.constructor.call(this, el, config);
+ this.body.setStyle({overflow:"hidden", position:"relative"});
+ this.layout = new Roo.BorderLayout(this.body.dom, config);
+ this.layout.monitorWindowResize = false;
+ this.el.addClass("x-dlg-auto-layout");
+ // fix case when center region overwrites center function
+ this.center = Roo.BasicDialog.prototype.center;
+ this.on("show", this.layout.layout, this.layout, true);
+ if (config.items) {
+ var xitems = config.items;
+ delete config.items;
+ Roo.each(xitems, this.addxtype, this);
+ }
-</code></pre>
- *
- * This would pass an HTTP parameter called "category" to the server containing
- * the value of the Node's "category" attribute.
- * @constructor
- * Creates a new Treeloader.
- * @param {Object} config A config object containing config properties.
- */
-Roo.tree.TreeLoader = function(config){
- this.baseParams = {};
- this.requestMethod = "POST";
- Roo.apply(this, config);
-
- this.addEvents({
- /**
- * @event beforeload
- * Fires before a network request is made to retrieve the Json text which specifies a node's children.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} callback The callback function specified in the {@link #load} call.
- */
- beforeload : true,
- /**
- * @event load
- * Fires when the node has been successfuly loaded.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} response The response object containing the data from the server.
- */
- load : true,
- /**
- * @event loadexception
- * Fires if the network request failed.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} response The response object containing the data from the server.
- */
- loadexception : true,
- /**
- * @event create
- * Fires before a node is created, enabling you to return custom Node types
- * @param {Object} This TreeLoader object.
- * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
- */
- create : true
- });
-
- Roo.tree.TreeLoader.superclass.constructor.call(this);
};
-
-Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
- /**
- * @cfg {String} dataUrl The URL from which to request a Json string which
- * specifies an array of node definition object representing the child nodes
- * to be loaded.
- */
+Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
+
+
/**
- * @cfg {String} requestMethod either GET or POST
- * defaults to POST (due to BC)
- * to be loaded.
- */
+ * @cfg {Roo.LayoutRegion} east
+ */
/**
- * @cfg {Object} baseParams (optional) An object containing properties which
- * specify HTTP parameters to be passed to each request for child nodes.
- */
+ * @cfg {Roo.LayoutRegion} west
+ */
/**
- * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
- * created by this loader. If the attributes sent by the server have an attribute in this object,
- * they take priority.
- */
+ * @cfg {Roo.LayoutRegion} south
+ */
/**
- * @cfg {Object} uiProviders (optional) An object containing properties which
- *
- * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
- * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
- * <i>uiProvider</i> attribute of a returned child node is a string rather
- * than a reference to a TreeNodeUI implementation, this that string value
- * is used as a property name in the uiProviders object. You can define the provider named
- * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
- */
- uiProviders : {},
-
+ * @cfg {Roo.LayoutRegion} north
+ */
/**
- * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
- * child nodes before loading.
- */
- clearOnLoad : true,
-
+ * @cfg {Roo.LayoutRegion} center
+ */
/**
- * @cfg {String} root (optional) Default to false. Use this to read data from an object
- * property on loading, rather than expecting an array. (eg. more compatible to a standard
- * Grid query { data : [ .....] }
- */
-
- root : false,
- /**
- * @cfg {String} queryParam (optional)
- * Name of the query as it will be passed on the querystring (defaults to 'node')
- * eg. the request will be ?node=[id]
- */
-
+ * @cfg {Roo.Button} buttons[] Bottom buttons..
+ */
- queryParam: false,
/**
- * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
- * This is called automatically when a node is expanded, but may be used to reload
- * a node (or append new children if the {@link #clearOnLoad} option is false.)
- * @param {Roo.tree.TreeNode} node
- * @param {Function} callback
+ * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
+ * @deprecated
*/
- load : function(node, callback){
- if(this.clearOnLoad){
- while(node.firstChild){
- node.removeChild(node.firstChild);
- }
- }
- if(node.attributes.children){ // preloaded json children
- var cs = node.attributes.children;
- for(var i = 0, len = cs.length; i < len; i++){
- node.appendChild(this.createNode(cs[i]));
- }
- if(typeof callback == "function"){
- callback();
- }
- }else if(this.dataUrl){
- this.requestData(node, callback);
- }
- },
-
- getParams: function(node){
- var buf = [], bp = this.baseParams;
- for(var key in bp){
- if(typeof bp[key] != "function"){
- buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
- }
- }
- var n = this.queryParam === false ? 'node' : this.queryParam;
- buf.push(n + "=", encodeURIComponent(node.id));
- return buf.join("");
+ endUpdate : function(){
+ this.layout.endUpdate();
},
- requestData : function(node, callback){
- if(this.fireEvent("beforeload", this, node, callback) !== false){
- this.transId = Roo.Ajax.request({
- method:this.requestMethod,
- url: this.dataUrl||this.url,
- success: this.handleResponse,
- failure: this.handleFailure,
- scope: this,
- argument: {callback: callback, node: node},
- params: this.getParams(node)
- });
- }else{
- // if the load is cancelled, make sure we notify
- // the node that we are done
- if(typeof callback == "function"){
- callback();
- }
- }
+ /**
+ * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
+ * @deprecated
+ */
+ beginUpdate : function(){
+ this.layout.beginUpdate();
},
- isLoading : function(){
- return this.transId ? true : false;
+ /**
+ * Get the BorderLayout for this dialog
+ * @return {Roo.BorderLayout}
+ */
+ getLayout : function(){
+ return this.layout;
},
- abort : function(){
- if(this.isLoading()){
- Roo.Ajax.abort(this.transId);
+ showEl : function(){
+ Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
+ if(Roo.isIE7){
+ this.layout.layout();
}
},
// private
- createNode : function(attr)
- {
- // apply baseAttrs, nice idea Corey!
- if(this.baseAttrs){
- Roo.applyIf(attr, this.baseAttrs);
- }
- if(this.applyLoader !== false){
- attr.loader = this;
- }
- // uiProvider = depreciated..
-
- if(typeof(attr.uiProvider) == 'string'){
- attr.uiProvider = this.uiProviders[attr.uiProvider] ||
- /** eval:var:attr */ eval(attr.uiProvider);
- }
- if(typeof(this.uiProviders['default']) != 'undefined') {
- attr.uiProvider = this.uiProviders['default'];
- }
-
- this.fireEvent('create', this, attr);
-
- attr.leaf = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
- return(attr.leaf ?
- new Roo.tree.TreeNode(attr) :
- new Roo.tree.AsyncTreeNode(attr));
- },
-
- processResponse : function(response, node, callback)
- {
- var json = response.responseText;
- try {
-
- var o = Roo.decode(json);
-
- if (this.root === false && typeof(o.success) != undefined) {
- this.root = 'data'; // the default behaviour for list like data..
- }
-
- if (this.root !== false && !o.success) {
- // it's a failure condition.
- var a = response.argument;
- this.fireEvent("loadexception", this, a.node, response);
- Roo.log("Load failed - should have a handler really");
- return;
- }
-
-
-
- if (this.root !== false) {
- o = o[this.root];
- }
-
- for(var i = 0, len = o.length; i < len; i++){
- var n = this.createNode(o[i]);
- if(n){
- node.appendChild(n);
- }
- }
- if(typeof callback == "function"){
- callback(this, node);
- }
- }catch(e){
- this.handleFailure(response);
- }
- },
-
- handleResponse : function(response){
- this.transId = false;
- var a = response.argument;
- this.processResponse(response, a.node, a.callback);
- this.fireEvent("load", this, a.node, response);
+ // Use the syncHeightBeforeShow config option to control this automatically
+ syncBodyHeight : function(){
+ Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
+ if(this.layout){this.layout.layout();}
},
-
- handleFailure : function(response)
- {
- // should handle failure better..
- this.transId = false;
- var a = response.argument;
- this.fireEvent("loadexception", this, a.node, response);
- if(typeof a.callback == "function"){
- a.callback(this, a.node);
- }
+
+ /**
+ * Add an xtype element (actually adds to the layout.)
+ * @return {Object} xdata xtype object data.
+ */
+
+ addxtype : function(c) {
+ return this.layout.addxtype(c);
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
-* @class Roo.tree.TreeFilter
-* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
-* @param {TreePanel} tree
-* @param {Object} config (optional)
- */
-Roo.tree.TreeFilter = function(tree, config){
- this.tree = tree;
- this.filtered = {};
- Roo.apply(this, config);
-};
+ * @class Roo.MessageBox
+ * @static
+ * Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
+ * Example usage:
+ *<pre><code>
+// Basic alert:
+Roo.Msg.alert('Status', 'Changes saved successfully.');
-Roo.tree.TreeFilter.prototype = {
- clearBlank:false,
- reverse:false,
- autoClear:false,
- remove:false,
+// Prompt for user data:
+Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+ if (btn == 'ok'){
+ // process text value...
+ }
+});
- /**
- * Filter the data by a specific attribute.
- * @param {String/RegExp} value Either string that the attribute value
- * should start with or a RegExp to test against the attribute
- * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
- * @param {TreeNode} startNode (optional) The node to start the filter at.
- */
- filter : function(value, attr, startNode){
- attr = attr || "text";
- var f;
- if(typeof value == "string"){
- var vlen = value.length;
- // auto clear empty filter
- if(vlen == 0 && this.clearBlank){
- this.clear();
- return;
- }
- value = value.toLowerCase();
- f = function(n){
- return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
- };
- }else if(value.exec){ // regex?
- f = function(n){
- return value.test(n.attributes[attr]);
- };
- }else{
- throw 'Illegal filter type, must be string or regex';
- }
- this.filterBy(f, null, startNode);
- },
+// Show a dialog using config options:
+Roo.Msg.show({
+ title:'Save Changes?',
+ msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
+ buttons: Roo.Msg.YESNOCANCEL,
+ fn: processResult,
+ animEl: 'elId'
+});
+</code></pre>
+ * @static
+ */
+Roo.MessageBox = function(){
+ var dlg, opt, mask, waitTimer;
+ var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
+ var buttons, activeTextEl, bwidth;
- /**
- * Filter by a function. The passed function will be called with each
- * node in the tree (or from the startNode). If the function returns true, the node is kept
- * otherwise it is filtered. If a node is filtered, its children are also filtered.
- * @param {Function} fn The filter function
- * @param {Object} scope (optional) The scope of the function (defaults to the current node)
- */
- filterBy : function(fn, scope, startNode){
- startNode = startNode || this.tree.root;
- if(this.autoClear){
- this.clear();
+ // private
+ var handleButton = function(button){
+ dlg.hide();
+ Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
+ };
+
+ // private
+ var handleHide = function(){
+ if(opt && opt.cls){
+ dlg.el.removeClass(opt.cls);
}
- var af = this.filtered, rv = this.reverse;
- var f = function(n){
- if(n == startNode){
- return true;
- }
- if(af[n.id]){
- return false;
- }
- var m = fn.call(scope || n, n);
- if(!m || rv){
- af[n.id] = n;
- n.ui.hide();
- return false;
- }
- return true;
- };
- startNode.cascade(f);
- if(this.remove){
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n && n.parentNode){
- n.parentNode.removeChild(n);
- }
- }
- }
+ if(waitTimer){
+ Roo.TaskMgr.stop(waitTimer);
+ waitTimer = null;
}
- },
+ };
- /**
- * Clears the current filter. Note: with the "remove" option
- * set a filter cannot be cleared.
- */
- clear : function(){
- var t = this.tree;
- var af = this.filtered;
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n){
- n.ui.show();
+ // private
+ var updateButtons = function(b){
+ var width = 0;
+ if(!b){
+ buttons["ok"].hide();
+ buttons["cancel"].hide();
+ buttons["yes"].hide();
+ buttons["no"].hide();
+ dlg.footer.dom.style.display = 'none';
+ return width;
+ }
+ dlg.footer.dom.style.display = '';
+ for(var k in buttons){
+ if(typeof buttons[k] != "function"){
+ if(b[k]){
+ buttons[k].show();
+ buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
+ width += buttons[k].el.getWidth()+15;
+ }else{
+ buttons[k].hide();
}
}
}
- this.filtered = {};
- }
-};
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.tree.TreeSorter
- * Provides sorting of nodes in a TreePanel
- *
- * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
- * @cfg {String} property The named attribute on the node to sort by (defaults to text)
- * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
- * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
- * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
- * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
- * @constructor
- * @param {TreePanel} tree
- * @param {Object} config
- */
-Roo.tree.TreeSorter = function(tree, config){
- Roo.apply(this, config);
- tree.on("beforechildrenrendered", this.doSort, this);
- tree.on("append", this.updateSort, this);
- tree.on("insert", this.updateSort, this);
-
- var dsc = this.dir && this.dir.toLowerCase() == "desc";
- var p = this.property || "text";
- var sortType = this.sortType;
- var fs = this.folderSort;
- var cs = this.caseSensitive === true;
- var leafAttr = this.leafAttr || 'leaf';
+ return width;
+ };
- this.sortFn = function(n1, n2){
- if(fs){
- if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
- return 1;
- }
- if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
- return -1;
- }
+ // private
+ var handleEsc = function(d, k, e){
+ if(opt && opt.closable !== false){
+ dlg.hide();
}
- var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
- var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
- if(v1 < v2){
- return dsc ? +1 : -1;
- }else if(v1 > v2){
- return dsc ? -1 : +1;
- }else{
- return 0;
+ if(e){
+ e.stopEvent();
}
};
-};
-Roo.tree.TreeSorter.prototype = {
- doSort : function(node){
- node.sort(this.sortFn);
- },
-
- compareNodes : function(n1, n2){
- return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
- },
-
- updateSort : function(tree, node){
- if(node.childrenRendered){
- this.doSort.defer(1, this, [node]);
- }
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ return {
+ /**
+ * Returns a reference to the underlying {@link Roo.BasicDialog} element
+ * @return {Roo.BasicDialog} The BasicDialog element
+ */
+ getDialog : function(){
+ if(!dlg){
+ dlg = new Roo.BasicDialog("x-msg-box", {
+ autoCreate : true,
+ shadow: true,
+ draggable: true,
+ resizable:false,
+ constraintoviewport:false,
+ fixedcenter:true,
+ collapsible : false,
+ shim:true,
+ modal: true,
+ width:400, height:100,
+ buttonAlign:"center",
+ closeClick : function(){
+ if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
+ handleButton("no");
+ }else{
+ handleButton("cancel");
+ }
+ }
+ });
+
+ dlg.on("hide", handleHide);
+ mask = dlg.mask;
+ dlg.addKeyListener(27, handleEsc);
+ buttons = {};
+ var bt = this.buttonText;
+ buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
+ buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
+ buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
+ buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
+ bodyEl = dlg.body.createChild({
-if(Roo.dd.DropZone){
-
-Roo.tree.TreeDropZone = function(tree, config){
- this.allowParentInsert = false;
- this.allowContainerDrop = false;
- this.appendOnly = false;
- Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
- this.tree = tree;
- this.lastInsertClass = "x-tree-no-status";
- this.dragOverData = {};
-};
+ html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar"> </div></div></div>'
+ });
+ msgEl = bodyEl.dom.firstChild;
+ textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
+ textboxEl.enableDisplayMode();
+ textboxEl.addKeyListener([10,13], function(){
+ if(dlg.isVisible() && opt && opt.buttons){
+ if(opt.buttons.ok){
+ handleButton("ok");
+ }else if(opt.buttons.yes){
+ handleButton("yes");
+ }
+ }
+ });
+ textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
+ textareaEl.enableDisplayMode();
+ progressEl = Roo.get(bodyEl.dom.childNodes[4]);
+ progressEl.enableDisplayMode();
+ var pf = progressEl.dom.firstChild;
+ if (pf) {
+ pp = Roo.get(pf.firstChild);
+ pp.setHeight(pf.offsetHeight);
+ }
+
+ }
+ return dlg;
+ },
-Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
- ddGroup : "TreeDD",
- scroll: true,
-
- expandDelay : 1000,
-
- expandNode : function(node){
- if(node.hasChildNodes() && !node.isExpanded()){
- node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
- }
- },
-
- queueExpand : function(node){
- this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
- },
-
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
- this.expandProcId = false;
- }
- },
-
- isValidDropPoint : function(n, pt, dd, e, data){
- if(!n || !data){ return false; }
- var targetNode = n.node;
- var dropNode = data.node;
- // default drop rules
- if(!(targetNode && targetNode.isTarget && pt)){
- return false;
- }
- if(pt == "append" && targetNode.allowChildren === false){
- return false;
- }
- if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
- return false;
- }
- if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
- return false;
- }
- // reuse the object
- var overEvent = this.dragOverData;
- overEvent.tree = this.tree;
- overEvent.target = targetNode;
- overEvent.data = data;
- overEvent.point = pt;
- overEvent.source = dd;
- overEvent.rawEvent = e;
- overEvent.dropNode = dropNode;
- overEvent.cancel = false;
- var result = this.tree.fireEvent("nodedragover", overEvent);
- return overEvent.cancel === false && result !== false;
- },
-
- getDropPoint : function(e, n, dd)
- {
- var tn = n.node;
- if(tn.isRoot){
- return tn.allowChildren !== false ? "append" : false; // always append for root
- }
- var dragEl = n.ddel;
- var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
- var y = Roo.lib.Event.getPageY(e);
- //var noAppend = tn.allowChildren === false || tn.isLeaf();
-
- // we may drop nodes anywhere, as long as allowChildren has not been set to false..
- var noAppend = tn.allowChildren === false;
- if(this.appendOnly || tn.parentNode.allowChildren === false){
- return noAppend ? false : "append";
- }
- var noBelow = false;
- if(!this.allowParentInsert){
- noBelow = tn.hasChildNodes() && tn.isExpanded();
- }
- var q = (b - t) / (noAppend ? 2 : 3);
- if(y >= t && y < (t + q)){
- return "above";
- }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
- return "below";
- }else{
- return "append";
- }
- },
-
- onNodeEnter : function(n, dd, e, data)
- {
- this.cancelExpand();
- },
-
- onNodeOver : function(n, dd, e, data)
- {
-
- var pt = this.getDropPoint(e, n, dd);
- var node = n.node;
-
- // auto node expand check
- if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
- this.queueExpand(node);
- }else if(pt != "append"){
- this.cancelExpand();
- }
-
- // set the insert point style on the target node
- var returnCls = this.dropNotAllowed;
- if(this.isValidDropPoint(n, pt, dd, e, data)){
- if(pt){
- var el = n.ddel;
- var cls;
- if(pt == "above"){
- returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
- cls = "x-tree-drag-insert-above";
- }else if(pt == "below"){
- returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
- cls = "x-tree-drag-insert-below";
- }else{
- returnCls = "x-tree-drop-ok-append";
- cls = "x-tree-drag-append";
- }
- if(this.lastInsertClass != cls){
- Roo.fly(el).replaceClass(this.lastInsertClass, cls);
- this.lastInsertClass = cls;
- }
- }
- }
- return returnCls;
- },
-
- onNodeOut : function(n, dd, e, data){
-
- this.cancelExpand();
- this.removeDropIndicators(n);
- },
-
- onNodeDrop : function(n, dd, e, data){
- var point = this.getDropPoint(e, n, dd);
- var targetNode = n.node;
- targetNode.ui.startDrop();
- if(!this.isValidDropPoint(n, point, dd, e, data)){
- targetNode.ui.endDrop();
- return false;
- }
- // first try to find the drop node
- var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
- var dropEvent = {
- tree : this.tree,
- target: targetNode,
- data: data,
- point: point,
- source: dd,
- rawEvent: e,
- dropNode: dropNode,
- cancel: !dropNode
- };
- var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
- if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
- targetNode.ui.endDrop();
- return false;
- }
- // allow target changing
- targetNode = dropEvent.target;
- if(point == "append" && !targetNode.isExpanded()){
- targetNode.expand(false, null, function(){
- this.completeDrop(dropEvent);
- }.createDelegate(this));
- }else{
- this.completeDrop(dropEvent);
- }
- return true;
- },
-
- completeDrop : function(de){
- var ns = de.dropNode, p = de.point, t = de.target;
- if(!(ns instanceof Array)){
- ns = [ns];
- }
- var n;
- for(var i = 0, len = ns.length; i < len; i++){
- n = ns[i];
- if(p == "above"){
- t.parentNode.insertBefore(n, t);
- }else if(p == "below"){
- t.parentNode.insertBefore(n, t.nextSibling);
- }else{
- t.appendChild(n);
+ /**
+ * Updates the message box body text
+ * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
+ * the XHTML-compliant non-breaking space character '&#160;')
+ * @return {Roo.MessageBox} This message box
+ */
+ updateText : function(text){
+ if(!dlg.isVisible() && !opt.width){
+ dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
}
- }
- n.ui.focus();
- if(this.tree.hlDrop){
- n.ui.highlight();
- }
- t.ui.endDrop();
- this.tree.fireEvent("nodedrop", de);
- },
-
- afterNodeMoved : function(dd, data, e, targetNode, dropNode){
- if(this.tree.hlDrop){
- dropNode.ui.focus();
- dropNode.ui.highlight();
- }
- this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
- },
-
- getTree : function(){
- return this.tree;
- },
-
- removeDropIndicators : function(n){
- if(n && n.ddel){
- var el = n.ddel;
- Roo.fly(el).removeClass([
- "x-tree-drag-insert-above",
- "x-tree-drag-insert-below",
- "x-tree-drag-append"]);
- this.lastInsertClass = "_noclass";
- }
- },
-
- beforeDragDrop : function(target, e, id){
- this.cancelExpand();
- return true;
- },
-
- afterRepair : function(data){
- if(data && Roo.enableFx){
- data.node.ui.highlight();
- }
- this.hideProxy();
- }
-
-});
+ msgEl.innerHTML = text || ' ';
+
+ var cw = Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
+ //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
+ var w = Math.max(
+ Math.min(opt.width || cw , this.maxWidth),
+ Math.max(opt.minWidth || this.minWidth, bwidth)
+ );
+ if(opt.prompt){
+ activeTextEl.setWidth(w);
+ }
+ if(dlg.isVisible()){
+ dlg.fixedcenter = false;
+ }
+ // to big, make it scroll. = But as usual stupid IE does not support
+ // !important..
+
+ if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
+ bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
+ bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
+ } else {
+ bodyEl.dom.style.height = '';
+ bodyEl.dom.style.overflowY = '';
+ }
+ if (cw > w) {
+ bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
+ } else {
+ bodyEl.dom.style.overflowX = '';
+ }
+
+ dlg.setContentSize(w, bodyEl.getHeight());
+ if(dlg.isVisible()){
+ dlg.fixedcenter = true;
+ }
+ return this;
+ },
-}
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+ /**
+ * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
+ * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
+ * @param {Number} value Any number between 0 and 1 (e.g., .5)
+ * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
+ * @return {Roo.MessageBox} This message box
+ */
+ updateProgress : function(value, text){
+ if(text){
+ this.updateText(text);
+ }
+ if (pp) { // weird bug on my firefox - for some reason this is not defined
+ pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
+ }
+ return this;
+ },
-if(Roo.dd.DragZone){
-Roo.tree.TreeDragZone = function(tree, config){
- Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
- this.tree = tree;
-};
+ /**
+ * Returns true if the message box is currently displayed
+ * @return {Boolean} True if the message box is visible, else false
+ */
+ isVisible : function(){
+ return dlg && dlg.isVisible();
+ },
-Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
- ddGroup : "TreeDD",
-
- onBeforeDrag : function(data, e){
- var n = data.node;
- return n && n.draggable && !n.disabled;
- },
-
-
- onInitDrag : function(e){
- var data = this.dragData;
- this.tree.getSelectionModel().select(data.node);
- this.proxy.update("");
- data.node.ui.appendDDGhost(this.proxy.ghost.dom);
- this.tree.fireEvent("startdrag", this.tree, data.node, e);
- },
-
- getRepairXY : function(e, data){
- return data.node.ui.getDDRepairXY();
- },
-
- onEndDrag : function(data, e){
- this.tree.fireEvent("enddrag", this.tree, data.node, e);
-
-
- },
-
- onValidDrop : function(dd, e, id){
- this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
- this.hideProxy();
- },
-
- beforeInvalidDrop : function(e, id){
- // this scrolls the original position back into view
- var sm = this.tree.getSelectionModel();
- sm.clearSelections();
- sm.select(this.dragData.node);
- }
+ /**
+ * Hides the message box if it is displayed
+ */
+ hide : function(){
+ if(this.isVisible()){
+ dlg.hide();
+ }
+ },
+
+ /**
+ * Displays a new message box, or reinitializes an existing message box, based on the config options
+ * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
+ * The following config object properties are supported:
+ * <pre>
+Property Type Description
+---------- --------------- ------------------------------------------------------------------------------------
+animEl String/Element An id or Element from which the message box should animate as it opens and
+ closes (defaults to undefined)
+buttons Object/Boolean A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
+ cancel:'Bar'}), or false to not show any buttons (defaults to false)
+closable Boolean False to hide the top-right close button (defaults to true). Note that
+ progress and wait dialogs will ignore this property and always hide the
+ close button as they can only be closed programmatically.
+cls String A custom CSS class to apply to the message box element
+defaultTextHeight Number The default height in pixels of the message box's multiline textarea if
+ displayed (defaults to 75)
+fn Function A callback function to execute after closing the dialog. The arguments to the
+ function will be btn (the name of the button that was clicked, if applicable,
+ e.g. "ok"), and text (the value of the active text field, if applicable).
+ Progress and wait dialogs will ignore this option since they do not respond to
+ user actions and can only be closed programmatically, so any required function
+ should be called by the same code after it closes the dialog.
+icon String A CSS class that provides a background image to be used as an icon for
+ the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
+maxWidth Number The maximum width in pixels of the message box (defaults to 600)
+minWidth Number The minimum width in pixels of the message box (defaults to 100)
+modal Boolean False to allow user interaction with the page while the message box is
+ displayed (defaults to true)
+msg String A string that will replace the existing message box body text (defaults
+ to the XHTML-compliant non-breaking space character ' ')
+multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
+progress Boolean True to display a progress bar (defaults to false)
+progressText String The text to display inside the progress bar if progress = true (defaults to '')
+prompt Boolean True to prompt the user to enter single-line text (defaults to false)
+proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
+title String The title text
+value String The string value to set into the active textbox element if displayed
+wait Boolean True to display a progress bar (defaults to false)
+width Number The width of the dialog in pixels
+</pre>
+ *
+ * Example usage:
+ * <pre><code>
+Roo.Msg.show({
+ title: 'Address',
+ msg: 'Please enter your address:',
+ width: 300,
+ buttons: Roo.MessageBox.OKCANCEL,
+ multiline: true,
+ fn: saveAddress,
+ animEl: 'addAddressBtn'
});
-}/*
+</code></pre>
+ * @param {Object} config Configuration options
+ * @return {Roo.MessageBox} This message box
+ */
+ show : function(options)
+ {
+
+ // this causes nightmares if you show one dialog after another
+ // especially on callbacks..
+
+ if(this.isVisible()){
+
+ this.hide();
+ Roo.log("[Roo.Messagebox] Show called while message displayed:" );
+ Roo.log("Old Dialog Message:" + msgEl.innerHTML );
+ Roo.log("New Dialog Message:" + options.msg )
+ //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
+ //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
+
+ }
+ var d = this.getDialog();
+ opt = options;
+ d.setTitle(opt.title || " ");
+ d.close.setDisplayed(opt.closable !== false);
+ activeTextEl = textboxEl;
+ opt.prompt = opt.prompt || (opt.multiline ? true : false);
+ if(opt.prompt){
+ if(opt.multiline){
+ textboxEl.hide();
+ textareaEl.show();
+ textareaEl.setHeight(typeof opt.multiline == "number" ?
+ opt.multiline : this.defaultTextHeight);
+ activeTextEl = textareaEl;
+ }else{
+ textboxEl.show();
+ textareaEl.hide();
+ }
+ }else{
+ textboxEl.hide();
+ textareaEl.hide();
+ }
+ progressEl.setDisplayed(opt.progress === true);
+ this.updateProgress(0);
+ activeTextEl.dom.value = opt.value || "";
+ if(opt.prompt){
+ dlg.setDefaultButton(activeTextEl);
+ }else{
+ var bs = opt.buttons;
+ var db = null;
+ if(bs && bs.ok){
+ db = buttons["ok"];
+ }else if(bs && bs.yes){
+ db = buttons["yes"];
+ }
+ dlg.setDefaultButton(db);
+ }
+ bwidth = updateButtons(opt.buttons);
+ this.updateText(opt.msg);
+ if(opt.cls){
+ d.el.addClass(opt.cls);
+ }
+ d.proxyDrag = opt.proxyDrag === true;
+ d.modal = opt.modal !== false;
+ d.mask = opt.modal !== false ? mask : false;
+ if(!d.isVisible()){
+ // force it to the end of the z-index stack so it gets a cursor in FF
+ document.body.appendChild(dlg.el.dom);
+ d.animateTarget = null;
+ d.show(options.animEl);
+ }
+ dlg.toFront();
+ return this;
+ },
+
+ /**
+ * Displays a message box with a progress bar. This message box has no buttons and is not closeable by
+ * the user. You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
+ * and closing the message box when the process is complete.
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @return {Roo.MessageBox} This message box
+ */
+ progress : function(title, msg){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: false,
+ progress:true,
+ closable:false,
+ minWidth: this.minProgressWidth,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
+ * If a callback function is passed it will be called after the user clicks the button, and the
+ * id of the button that was clicked will be passed as the only parameter to the callback
+ * (could also be the top-right close button).
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @param {Function} fn (optional) The callback function invoked after the message box is closed
+ * @param {Object} scope (optional) The scope of the callback function
+ * @return {Roo.MessageBox} This message box
+ */
+ alert : function(title, msg, fn, scope){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: this.OK,
+ fn: fn,
+ scope : scope,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
+ * interaction while waiting for a long-running process to complete that does not have defined intervals.
+ * You are responsible for closing the message box when the process is complete.
+ * @param {String} msg The message box body text
+ * @param {String} title (optional) The title bar text
+ * @return {Roo.MessageBox} This message box
+ */
+ wait : function(msg, title){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: false,
+ closable:false,
+ progress:true,
+ modal:true,
+ width:300,
+ wait:true
+ });
+ waitTimer = Roo.TaskMgr.start({
+ run: function(i){
+ Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
+ },
+ interval: 1000
+ });
+ return this;
+ },
+
+ /**
+ * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
+ * If a callback function is passed it will be called after the user clicks either button, and the id of the
+ * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @param {Function} fn (optional) The callback function invoked after the message box is closed
+ * @param {Object} scope (optional) The scope of the callback function
+ * @return {Roo.MessageBox} This message box
+ */
+ confirm : function(title, msg, fn, scope){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: this.YESNO,
+ fn: fn,
+ scope : scope,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
+ * JavaScript's Window.prompt). The prompt can be a single-line or multi-line textbox. If a callback function
+ * is passed it will be called after the user clicks either button, and the id of the button that was clicked
+ * (could also be the top-right close button) and the text that was entered will be passed as the two
+ * parameters to the callback.
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @param {Function} fn (optional) The callback function invoked after the message box is closed
+ * @param {Object} scope (optional) The scope of the callback function
+ * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
+ * property, or the height in pixels to create the textbox (defaults to false / single-line)
+ * @return {Roo.MessageBox} This message box
+ */
+ prompt : function(title, msg, fn, scope, multiline){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: this.OKCANCEL,
+ fn: fn,
+ minWidth:250,
+ scope : scope,
+ prompt:true,
+ multiline: multiline,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Button config that displays a single OK button
+ * @type Object
+ */
+ OK : {ok:true},
+ /**
+ * Button config that displays Yes and No buttons
+ * @type Object
+ */
+ YESNO : {yes:true, no:true},
+ /**
+ * Button config that displays OK and Cancel buttons
+ * @type Object
+ */
+ OKCANCEL : {ok:true, cancel:true},
+ /**
+ * Button config that displays Yes, No and Cancel buttons
+ * @type Object
+ */
+ YESNOCANCEL : {yes:true, no:true, cancel:true},
+
+ /**
+ * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
+ * @type Number
+ */
+ defaultTextHeight : 75,
+ /**
+ * The maximum width in pixels of the message box (defaults to 600)
+ * @type Number
+ */
+ maxWidth : 600,
+ /**
+ * The minimum width in pixels of the message box (defaults to 100)
+ * @type Number
+ */
+ minWidth : 100,
+ /**
+ * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
+ * for setting a different minimum width than text-only dialogs may need (defaults to 250)
+ * @type Number
+ */
+ minProgressWidth : 250,
+ /**
+ * An object containing the default button text strings that can be overriden for localized language support.
+ * Supported properties are: ok, cancel, yes and no.
+ * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
+ * @type Object
+ */
+ buttonText : {
+ ok : "OK",
+ cancel : "Cancel",
+ yes : "Yes",
+ no : "No"
+ }
+ };
+}();
+
+/**
+ * Shorthand for {@link Roo.MessageBox}
+ */
+Roo.Msg = Roo.MessageBox;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
/**
- * @class Roo.tree.TreeEditor
- * @extends Roo.Editor
- * Provides editor functionality for inline tree node editing. Any valid {@link Roo.form.Field} can be used
- * as the editor field.
- * @constructor
- * @param {Object} config (used to be the tree panel.)
- * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
- *
- * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
- * @cfg {Roo.form.TextField} field [required] The field configuration
- *
- *
+ * @class Roo.QuickTips
+ * Provides attractive and customizable tooltips for any element.
+ * @static
*/
-Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
- var tree = config;
- var field;
- if (oldconfig) { // old style..
- field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
- } else {
- // new style..
- tree = config.tree;
- config.field = config.field || {};
- config.field.xtype = 'TextField';
- field = Roo.factory(config.field, Roo.form);
- }
- config = config || {};
-
-
- this.addEvents({
- /**
- * @event beforenodeedit
- * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
- * false from the handler of this event.
- * @param {Editor} this
- * @param {Roo.tree.Node} node
- */
- "beforenodeedit" : true
- });
+Roo.QuickTips = function(){
+ var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
+ var ce, bd, xy, dd;
+ var visible = false, disabled = true, inited = false;
+ var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
- //Roo.log(config);
- Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
-
- this.tree = tree;
-
- tree.on('beforeclick', this.beforeNodeClick, this);
- tree.getTreeEl().on('mousedown', this.hide, this);
- this.on('complete', this.updateNode, this);
- this.on('beforestartedit', this.fitToTree, this);
- this.on('startedit', this.bindScroll, this, {delay:10});
- this.on('specialkey', this.onSpecialKey, this);
-};
-
-Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
- /**
- * @cfg {String} alignment
- * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
- */
- alignment: "l-l",
- // inherit
- autoSize: false,
- /**
- * @cfg {Boolean} hideEl
- * True to hide the bound element while the editor is displayed (defaults to false)
- */
- hideEl : false,
+ var onOver = function(e){
+ if(disabled){
+ return;
+ }
+ var t = e.getTarget();
+ if(!t || t.nodeType !== 1 || t == document || t == document.body){
+ return;
+ }
+ if(ce && t == ce.el){
+ clearTimeout(hideProc);
+ return;
+ }
+ if(t && tagEls[t.id]){
+ tagEls[t.id].el = t;
+ showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
+ return;
+ }
+ var ttp, et = Roo.fly(t);
+ var ns = cfg.namespace;
+ if(tm.interceptTitles && t.title){
+ ttp = t.title;
+ t.qtip = ttp;
+ t.removeAttribute("title");
+ e.preventDefault();
+ }else{
+ ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
+ }
+ if(ttp){
+ showProc = show.defer(tm.showDelay, tm, [{
+ el: t,
+ text: ttp.replace(/\\n/g,'<br/>'),
+ width: et.getAttributeNS(ns, cfg.width),
+ autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
+ title: et.getAttributeNS(ns, cfg.title),
+ cls: et.getAttributeNS(ns, cfg.cls)
+ }]);
+ }
+ };
+
+ var onOut = function(e){
+ clearTimeout(showProc);
+ var t = e.getTarget();
+ if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
+ hideProc = setTimeout(hide, tm.hideDelay);
+ }
+ };
+
+ var onMove = function(e){
+ if(disabled){
+ return;
+ }
+ xy = e.getXY();
+ xy[1] += 18;
+ if(tm.trackMouse && ce){
+ el.setXY(xy);
+ }
+ };
+
+ var onDown = function(e){
+ clearTimeout(showProc);
+ clearTimeout(hideProc);
+ if(!e.within(el)){
+ if(tm.hideOnClick){
+ hide();
+ tm.disable();
+ tm.enable.defer(100, tm);
+ }
+ }
+ };
+
+ var getPad = function(){
+ return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
+ };
+
+ var show = function(o){
+ if(disabled){
+ return;
+ }
+ clearTimeout(dismissProc);
+ ce = o;
+ if(removeCls){ // in case manually hidden
+ el.removeClass(removeCls);
+ removeCls = null;
+ }
+ if(ce.cls){
+ el.addClass(ce.cls);
+ removeCls = ce.cls;
+ }
+ if(ce.title){
+ tipTitle.update(ce.title);
+ tipTitle.show();
+ }else{
+ tipTitle.update('');
+ tipTitle.hide();
+ }
+ el.dom.style.width = tm.maxWidth+'px';
+ //tipBody.dom.style.width = '';
+ tipBodyText.update(o.text);
+ var p = getPad(), w = ce.width;
+ if(!w){
+ var td = tipBodyText.dom;
+ var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
+ if(aw > tm.maxWidth){
+ w = tm.maxWidth;
+ }else if(aw < tm.minWidth){
+ w = tm.minWidth;
+ }else{
+ w = aw;
+ }
+ }
+ //tipBody.setWidth(w);
+ el.setWidth(parseInt(w, 10) + p);
+ if(ce.autoHide === false){
+ close.setDisplayed(true);
+ if(dd){
+ dd.unlock();
+ }
+ }else{
+ close.setDisplayed(false);
+ if(dd){
+ dd.lock();
+ }
+ }
+ if(xy){
+ el.avoidY = xy[1]-18;
+ el.setXY(xy);
+ }
+ if(tm.animate){
+ el.setOpacity(.1);
+ el.setStyle("visibility", "visible");
+ el.fadeIn({callback: afterShow});
+ }else{
+ afterShow();
+ }
+ };
+
+ var afterShow = function(){
+ if(ce){
+ el.show();
+ esc.enable();
+ if(tm.autoDismiss && ce.autoHide !== false){
+ dismissProc = setTimeout(hide, tm.autoDismissDelay);
+ }
+ }
+ };
+
+ var hide = function(noanim){
+ clearTimeout(dismissProc);
+ clearTimeout(hideProc);
+ ce = null;
+ if(el.isVisible()){
+ esc.disable();
+ if(noanim !== true && tm.animate){
+ el.fadeOut({callback: afterHide});
+ }else{
+ afterHide();
+ }
+ }
+ };
+
+ var afterHide = function(){
+ el.hide();
+ if(removeCls){
+ el.removeClass(removeCls);
+ removeCls = null;
+ }
+ };
+
+ return {
+ /**
+ * @cfg {Number} minWidth
+ * The minimum width of the quick tip (defaults to 40)
+ */
+ minWidth : 40,
+ /**
+ * @cfg {Number} maxWidth
+ * The maximum width of the quick tip (defaults to 300)
+ */
+ maxWidth : 300,
+ /**
+ * @cfg {Boolean} interceptTitles
+ * True to automatically use the element's DOM title value if available (defaults to false)
+ */
+ interceptTitles : false,
+ /**
+ * @cfg {Boolean} trackMouse
+ * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
+ */
+ trackMouse : false,
+ /**
+ * @cfg {Boolean} hideOnClick
+ * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
+ */
+ hideOnClick : true,
+ /**
+ * @cfg {Number} showDelay
+ * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
+ */
+ showDelay : 500,
+ /**
+ * @cfg {Number} hideDelay
+ * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
+ */
+ hideDelay : 200,
+ /**
+ * @cfg {Boolean} autoHide
+ * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
+ * Used in conjunction with hideDelay.
+ */
+ autoHide : true,
+ /**
+ * @cfg {Boolean}
+ * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
+ * (defaults to true). Used in conjunction with autoDismissDelay.
+ */
+ autoDismiss : true,
+ /**
+ * @cfg {Number}
+ * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
+ */
+ autoDismissDelay : 5000,
+ /**
+ * @cfg {Boolean} animate
+ * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
+ */
+ animate : false,
+
+ /**
+ * @cfg {String} title
+ * Title text to display (defaults to ''). This can be any valid HTML markup.
+ */
+ title: '',
+ /**
+ * @cfg {String} text
+ * Body text to display (defaults to ''). This can be any valid HTML markup.
+ */
+ text : '',
+ /**
+ * @cfg {String} cls
+ * A CSS class to apply to the base quick tip element (defaults to '').
+ */
+ cls : '',
+ /**
+ * @cfg {Number} width
+ * Width in pixels of the quick tip (defaults to auto). Width will be ignored if it exceeds the bounds of
+ * minWidth or maxWidth.
+ */
+ width : null,
+
/**
- * @cfg {String} cls
- * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
+ * Initialize and enable QuickTips for first use. This should be called once before the first attempt to access
+ * or display QuickTips in a page.
*/
- cls: "x-small-editor x-tree-editor",
+ init : function(){
+ tm = Roo.QuickTips;
+ cfg = tm.tagConfig;
+ if(!inited){
+ if(!Roo.isReady){ // allow calling of init() before onReady
+ Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
+ return;
+ }
+ el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
+ el.fxDefaults = {stopFx: true};
+ // maximum custom styling
+ //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
+ el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');
+ tipTitle = el.child('h3');
+ tipTitle.enableDisplayMode("block");
+ tipBody = el.child('div.x-tip-bd');
+ tipBodyText = el.child('div.x-tip-bd-inner');
+ //bdLeft = el.child('div.x-tip-bd-left');
+ //bdRight = el.child('div.x-tip-bd-right');
+ close = el.child('div.x-tip-close');
+ close.enableDisplayMode("block");
+ close.on("click", hide);
+ var d = Roo.get(document);
+ d.on("mousedown", onDown);
+ d.on("mouseover", onOver);
+ d.on("mouseout", onOut);
+ d.on("mousemove", onMove);
+ esc = d.addKeyListener(27, hide);
+ esc.disable();
+ if(Roo.dd.DD){
+ dd = el.initDD("default", null, {
+ onDrag : function(){
+ el.sync();
+ }
+ });
+ dd.setHandleElId(tipTitle.id);
+ dd.lock();
+ }
+ inited = true;
+ }
+ this.enable();
+ },
+
/**
- * @cfg {Boolean} shim
- * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
+ * Configures a new quick tip instance and assigns it to a target element. The following config options
+ * are supported:
+ * <pre>
+Property Type Description
+---------- --------------------- ------------------------------------------------------------------------
+target Element/String/Array An Element, id or array of ids that this quick tip should be tied to
+ * </ul>
+ * @param {Object} config The config object
*/
- shim:false,
- // inherit
- shadow:"frame",
+ register : function(config){
+ var cs = config instanceof Array ? config : arguments;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ var c = cs[i];
+ var target = c.target;
+ if(target){
+ if(target instanceof Array){
+ for(var j = 0, jlen = target.length; j < jlen; j++){
+ tagEls[target[j]] = c;
+ }
+ }else{
+ tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
+ }
+ }
+ }
+ },
+
/**
- * @cfg {Number} maxWidth
- * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
- * the containing tree element's size, it will be automatically limited for you to the container width, taking
- * scroll and client offsets into account prior to each edit.
+ * Removes this quick tip from its element and destroys it.
+ * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
*/
- maxWidth: 250,
-
- editDelay : 350,
-
- // private
- fitToTree : function(ed, el){
- var td = this.tree.getTreeEl().dom, nd = el.dom;
- if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
- td.scrollLeft = nd.offsetLeft;
- }
- var w = Math.min(
- this.maxWidth,
- (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
- this.setSize(w, '');
-
- return this.fireEvent('beforenodeedit', this, this.editNode);
-
- },
-
- // private
- triggerEdit : function(node){
- this.completeEdit();
- this.editNode = node;
- this.startEdit(node.ui.textNode, node.text);
- },
+ unregister : function(el){
+ delete tagEls[Roo.id(el)];
+ },
- // private
- bindScroll : function(){
- this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
- },
+ /**
+ * Enable this quick tip.
+ */
+ enable : function(){
+ if(inited && disabled){
+ locks.pop();
+ if(locks.length < 1){
+ disabled = false;
+ }
+ }
+ },
- // private
- beforeNodeClick : function(node, e){
- var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
- this.lastClick = new Date();
- if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
- e.stopEvent();
- this.triggerEdit(node);
- return false;
- }
- return true;
- },
+ /**
+ * Disable this quick tip.
+ */
+ disable : function(){
+ disabled = true;
+ clearTimeout(showProc);
+ clearTimeout(hideProc);
+ clearTimeout(dismissProc);
+ if(ce){
+ hide(true);
+ }
+ locks.push(1);
+ },
- // private
- updateNode : function(ed, value){
- this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
- this.editNode.setText(value);
- },
+ /**
+ * Returns true if the quick tip is enabled, else false.
+ */
+ isEnabled : function(){
+ return !disabled;
+ },
- // private
- onHide : function(){
- Roo.tree.TreeEditor.superclass.onHide.call(this);
- if(this.editNode){
- this.editNode.ui.focus();
- }
- },
+ // private
+ tagConfig : {
+ namespace : "roo", // was ext?? this may break..
+ alt_namespace : "ext",
+ attribute : "qtip",
+ width : "width",
+ target : "target",
+ title : "qtitle",
+ hide : "hide",
+ cls : "qclass"
+ }
+ };
+}();
- // private
- onSpecialKey : function(field, e){
- var k = e.getKey();
- if(k == e.ESC){
- e.stopEvent();
- this.cancelEdit();
- }else if(k == e.ENTER && !e.hasModifier()){
- e.stopEvent();
- this.completeEdit();
- }
- }
-});//<Script type="text/javascript">
-/*
+// backwards compat
+Roo.QuickTips.tips = Roo.QuickTips.register;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
+
/**
- * Not documented??? - probably should be...
+ * @class Roo.tree.TreePanel
+ * @extends Roo.data.Tree
+ * @cfg {Roo.tree.TreeNode} root The root node
+ * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
+ * @cfg {Boolean} lines false to disable tree lines (defaults to true)
+ * @cfg {Boolean} enableDD true to enable drag and drop
+ * @cfg {Boolean} enableDrag true to enable just drag
+ * @cfg {Boolean} enableDrop true to enable just drop
+ * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
+ * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
+ * @cfg {String} ddGroup The DD group this TreePanel belongs to
+ * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
+ * @cfg {Boolean} ddScroll true to enable YUI body scrolling
+ * @cfg {Boolean} containerScroll true to register this container with ScrollManager
+ * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
+ * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
+ * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
+ * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
+ * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
+ * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
+ * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
+ * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
+ * @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
+ * @cfg {Function} rendererTip DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
+ *
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
*/
-
-Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
- //focus: Roo.emptyFn, // prevent odd scrolling behavior
+Roo.tree.TreePanel = function(el, config){
+ var root = false;
+ var loader = false;
+ if (config.root) {
+ root = config.root;
+ delete config.root;
+ }
+ if (config.loader) {
+ loader = config.loader;
+ delete config.loader;
+ }
- renderElements : function(n, a, targetNode, bulkRender){
- //consel.log("renderElements?");
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
-
- var t = n.getOwnerTree();
- var tid = Pman.Tab.Document_TypesTree.tree.el.id;
-
- var cols = t.columns;
- var bw = t.borderWidth;
- var c = cols[0];
- var href = a.href ? a.href : Roo.isGecko ? "" : "#";
- var cb = typeof a.checked == "boolean";
- var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
- var colcls = 'x-t-' + tid + '-c0';
- var buf = [
- '<li class="x-tree-node">',
-
-
- '<div class="x-tree-node-el ', a.cls,'">',
- // extran...
- '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
-
-
- '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon " />',
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
- (a.icon ? ' x-tree-node-inline-icon' : ''),
- (a.iconCls ? ' '+a.iconCls : ''),
- '" unselectable="on" />',
- (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' +
- (a.checked ? 'checked="checked" />' : ' />')) : ''),
-
- '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
- (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
- '<span unselectable="on" qtip="' + tx + '">',
- tx,
- '</span></a>' ,
- '</div>',
- '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
- (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
- ];
- for(var i = 1, len = cols.length; i < len; i++){
- c = cols[i];
- colcls = 'x-t-' + tid + '-c' +i;
- tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
- buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
- '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
- "</div>");
- }
-
- buf.push(
- '</a>',
- '<div class="x-clear"></div></div>',
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',
- "</li>");
+ Roo.apply(this, config);
+ Roo.tree.TreePanel.superclass.constructor.call(this);
+ this.el = Roo.get(el);
+ this.el.addClass('x-tree');
+ //console.log(root);
+ if (root) {
+ this.setRootNode( Roo.factory(root, Roo.tree));
+ }
+ if (loader) {
+ this.loader = Roo.factory(loader, Roo.tree);
+ }
+ /**
+ * Read-only. The id of the container element becomes this TreePanel's id.
+ */
+ this.id = this.el.id;
+ this.addEvents({
+ /**
+ * @event beforeload
+ * Fires before a node is loaded, return false to cancel
+ * @param {Node} node The node being loaded
+ */
+ "beforeload" : true,
+ /**
+ * @event load
+ * Fires when a node is loaded
+ * @param {Node} node The node that was loaded
+ */
+ "load" : true,
+ /**
+ * @event textchange
+ * Fires when the text for a node is changed
+ * @param {Node} node The node
+ * @param {String} text The new text
+ * @param {String} oldText The old text
+ */
+ "textchange" : true,
+ /**
+ * @event beforeexpand
+ * Fires before a node is expanded, return false to cancel.
+ * @param {Node} node The node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforeexpand" : true,
+ /**
+ * @event beforecollapse
+ * Fires before a node is collapsed, return false to cancel.
+ * @param {Node} node The node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforecollapse" : true,
+ /**
+ * @event expand
+ * Fires when a node is expanded
+ * @param {Node} node The node
+ */
+ "expand" : true,
+ /**
+ * @event disabledchange
+ * Fires when the disabled status of a node changes
+ * @param {Node} node The node
+ * @param {Boolean} disabled
+ */
+ "disabledchange" : true,
+ /**
+ * @event collapse
+ * Fires when a node is collapsed
+ * @param {Node} node The node
+ */
+ "collapse" : true,
+ /**
+ * @event beforeclick
+ * Fires before click processing on a node. Return false to cancel the default action.
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "beforeclick":true,
+ /**
+ * @event checkchange
+ * Fires when a node with a checkbox's checked property changes
+ * @param {Node} this This node
+ * @param {Boolean} checked
+ */
+ "checkchange":true,
+ /**
+ * @event click
+ * Fires when a node is clicked
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "click":true,
+ /**
+ * @event dblclick
+ * Fires when a node is double clicked
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "dblclick":true,
+ /**
+ * @event contextmenu
+ * Fires when a node is right clicked
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "contextmenu":true,
+ /**
+ * @event beforechildrenrendered
+ * Fires right before the child nodes for a node are rendered
+ * @param {Node} node The node
+ */
+ "beforechildrenrendered":true,
+ /**
+ * @event startdrag
+ * Fires when a node starts being dragged
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {event} e The raw browser event
+ */
+ "startdrag" : true,
+ /**
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {event} e The raw browser event
+ */
+ "enddrag" : true,
+ /**
+ * @event dragdrop
+ * Fires when a dragged node is dropped on a valid DD target
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {DD} dd The dd it was dropped on
+ * @param {event} e The raw browser event
+ */
+ "dragdrop" : true,
+ /**
+ * @event beforenodedrop
+ * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
+ * to be inserted by setting them on this object.</li>
+ * <li>cancel - Set this to true to cancel the drop.</li>
+ * </ul>
+ * @param {Object} dropEvent
+ */
+ "beforenodedrop" : true,
+ /**
+ * @event nodedrop
+ * Fires after a DD object is dropped on a node in this tree. The dropEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Dropped node(s).</li>
+ * </ul>
+ * @param {Object} dropEvent
+ */
+ "nodedrop" : true,
+ /**
+ * @event nodedragover
+ * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Drop node(s) provided by the source.</li>
+ * <li>cancel - Set this to true to signal drop not allowed.</li>
+ * </ul>
+ * @param {Object} dragOverEvent
+ */
+ "nodedragover" : true,
+ /**
+ * @event appendnode
+ * Fires when append node to the tree
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {Number} index The index of the newly appended node
+ */
+ "appendnode" : true
- if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
- this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
- n.nextSibling.ui.getEl(), buf.join(""));
- }else{
- this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+ });
+ if(this.singleExpand){
+ this.on("beforeexpand", this.restrictExpand, this);
+ }
+ if (this.editor) {
+ this.editor.tree = this;
+ this.editor = Roo.factory(this.editor, Roo.tree);
+ }
+
+ if (this.selModel) {
+ this.selModel = Roo.factory(this.selModel, Roo.tree);
+ }
+
+};
+Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
+ rootVisible : true,
+ animate: Roo.enableFx,
+ lines : true,
+ enableDD : false,
+ hlDrop : Roo.enableFx,
+
+ renderer: false,
+
+ rendererTip: false,
+ // private
+ restrictExpand : function(node){
+ var p = node.parentNode;
+ if(p){
+ if(p.expandedChild && p.expandedChild.parentNode == p){
+ p.expandedChild.collapse();
+ }
+ p.expandedChild = node;
}
- var el = this.wrap.firstChild;
- this.elRow = el;
- this.elNode = el.firstChild;
- this.ranchor = el.childNodes[1];
- this.ctNode = this.wrap.childNodes[1];
- var cs = el.firstChild.childNodes;
- this.indentNode = cs[0];
- this.ecNode = cs[1];
- this.iconNode = cs[2];
- var index = 3;
- if(cb){
- this.checkbox = cs[3];
- index++;
+ },
+
+ // private override
+ setRootNode : function(node){
+ Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
+ if(!this.rootVisible){
+ node.ui = new Roo.tree.RootTreeNodeUI(node);
}
- this.anchor = cs[index];
-
- this.textNode = cs[index].firstChild;
-
- //el.on("click", this.onClick, this);
- //el.on("dblclick", this.onDblClick, this);
-
-
- // console.log(this);
+ return node;
},
- initEvents : function(){
- Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
-
-
- var a = this.ranchor;
- var el = Roo.get(a);
+ /**
+ * Returns the container element for this TreePanel
+ */
+ getEl : function(){
+ return this.el;
+ },
- if(Roo.isOpera){ // opera render bug ignores the CSS
- el.setStyle("text-decoration", "none");
+ /**
+ * Returns the default TreeLoader for this TreePanel
+ */
+ getLoader : function(){
+ return this.loader;
+ },
+
+ /**
+ * Expand all nodes
+ */
+ expandAll : function(){
+ this.root.expand(true);
+ },
+
+ /**
+ * Collapse all nodes
+ */
+ collapseAll : function(){
+ this.root.collapse(true);
+ },
+
+ /**
+ * Returns the selection model used by this TreePanel
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.tree.DefaultSelectionModel();
}
+ return this.selModel;
+ },
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
- el.on("contextmenu", this.onContextMenu, this);
-
+ /**
+ * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
+ * @param {String} attribute (optional) Defaults to null (return the actual nodes)
+ * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
+ * @return {Array}
+ */
+ getChecked : function(a, startNode){
+ startNode = startNode || this.root;
+ var r = [];
+ var f = function(){
+ if(this.attributes.checked){
+ r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
+ }
+ }
+ startNode.cascade(f);
+ return r;
},
-
- /*onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
+
+ /**
+ * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
+ * @param {String} path
+ * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
+ * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
+ * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
+ */
+ expandPath : function(path, attr, callback){
+ attr = attr || "id";
+ var keys = path.split(this.pathSeparator);
+ var curNode = this.root;
+ if(curNode.attributes[attr] != keys[1]){ // invalid root
+ if(callback){
+ callback(false, null);
+ }
+ return;
+ }
+ var index = 1;
+ var f = function(){
+ if(++index == keys.length){
+ if(callback){
+ callback(true, curNode);
+ }
+ return;
+ }
+ var c = curNode.findChild(attr, keys[index]);
+ if(!c){
+ if(callback){
+ callback(false, curNode);
+ }
+ return;
+ }
+ curNode = c;
+ c.expand(false, false, f);
+ };
+ curNode.expand(false, false, f);
+ },
+
+ /**
+ * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
+ * @param {String} path
+ * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
+ * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
+ * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
+ */
+ selectPath : function(path, attr, callback){
+ attr = attr || "id";
+ var keys = path.split(this.pathSeparator);
+ var v = keys.pop();
+ if(keys.length > 0){
+ var f = function(success, node){
+ if(success && node){
+ var n = node.findChild(attr, v);
+ if(n){
+ n.select();
+ if(callback){
+ callback(true, n);
+ }
+ }else if(callback){
+ callback(false, n);
+ }
+ }else{
+ if(callback){
+ callback(false, n);
+ }
+ }
+ };
+ this.expandPath(keys.join(this.pathSeparator), attr, f);
}else{
- //this.blur();
- this.removeClass("x-tree-selected");
+ this.root.select();
+ if(callback){
+ callback(true, this.root);
+ }
}
- },*/
- addClass : function(cls){
- if(this.elRow){
- Roo.fly(this.elRow).addClass(cls);
+ },
+
+ getTreeEl : function(){
+ return this.el;
+ },
+
+ /**
+ * Trigger rendering of this TreePanel
+ */
+ render : function(){
+ if (this.innerCt) {
+ return this; // stop it rendering more than once!!
}
- },
-
-
- removeClass : function(cls){
- if(this.elRow){
- Roo.fly(this.elRow).removeClass(cls);
+ this.innerCt = this.el.createChild({tag:"ul",
+ cls:"x-tree-root-ct " +
+ (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
+
+ if(this.containerScroll){
+ Roo.dd.ScrollManager.register(this.el);
+ }
+ if((this.enableDD || this.enableDrop) && !this.dropZone){
+ /**
+ * The dropZone used by this tree if drop is enabled
+ * @type Roo.tree.TreeDropZone
+ */
+ this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
+ ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
+ });
}
+ if((this.enableDD || this.enableDrag) && !this.dragZone){
+ /**
+ * The dragZone used by this tree if drag is enabled
+ * @type Roo.tree.TreeDragZone
+ */
+ this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
+ ddGroup: this.ddGroup || "TreeDD",
+ scroll: this.ddScroll
+ });
+ }
+ this.getSelectionModel().init(this);
+ if (!this.root) {
+ Roo.log("ROOT not set in tree");
+ return this;
+ }
+ this.root.render();
+ if(!this.rootVisible){
+ this.root.renderChildren();
+ }
+ return this;
}
-
-
-
-});//<Script type="text/javascript">
-
-/*
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.tree.ColumnTree
- * @extends Roo.tree.TreePanel
- * @cfg {Object} columns Including width, header, renderer, cls, dataIndex
- * @cfg {int} borderWidth compined right/left border allowance
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * @class Roo.tree.DefaultSelectionModel
+ * @extends Roo.util.Observable
+ * The default single selection for a TreePanel.
+ * @param {Object} cfg Configuration
*/
-Roo.tree.ColumnTree = function(el, config)
-{
- Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
+Roo.tree.DefaultSelectionModel = function(cfg){
+ this.selNode = null;
+
+
+
this.addEvents({
- /**
- * @event resize
- * Fire this event on a container when it resizes
- * @param {int} w Width
- * @param {int} h Height
+ /**
+ * @event selectionchange
+ * Fires when the selected node changes
+ * @param {DefaultSelectionModel} this
+ * @param {TreeNode} node the new selection
*/
- "resize" : true
- });
- this.on('resize', this.onResize, this);
+ "selectionchange" : true,
+
+ /**
+ * @event beforeselect
+ * Fires before the selected node changes, return false to cancel the change
+ * @param {DefaultSelectionModel} this
+ * @param {TreeNode} node the new selection
+ * @param {TreeNode} node the old selection
+ */
+ "beforeselect" : true
+ });
+
+ Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
};
-Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
- //lines:false,
+Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
+ init : function(tree){
+ this.tree = tree;
+ tree.getTreeEl().on("keydown", this.onKeyDown, this);
+ tree.on("click", this.onNodeClick, this);
+ },
+ onNodeClick : function(node, e){
+ if (e.ctrlKey && this.selNode == node) {
+ this.unselect(node);
+ return;
+ }
+ this.select(node);
+ },
- borderWidth: Roo.isBorderBox ? 0 : 2,
- headEls : false,
+ /**
+ * Select a node.
+ * @param {TreeNode} node The node to select
+ * @return {TreeNode} The selected node
+ */
+ select : function(node){
+ var last = this.selNode;
+ if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
+ if(last){
+ last.ui.onSelectedChange(false);
+ }
+ this.selNode = node;
+ node.ui.onSelectedChange(true);
+ this.fireEvent("selectionchange", this, node, last);
+ }
+ return node;
+ },
- render : function(){
- // add the header.....
-
- Roo.tree.ColumnTree.superclass.render.apply(this);
-
- this.el.addClass('x-column-tree');
-
- this.headers = this.el.createChild(
- {cls:'x-tree-headers'},this.innerCt.dom);
-
- var cols = this.columns, c;
- var totalWidth = 0;
- this.headEls = [];
- var len = cols.length;
- for(var i = 0; i < len; i++){
- c = cols[i];
- totalWidth += c.width;
- this.headEls.push(this.headers.createChild({
- cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
- cn: {
- cls:'x-tree-hd-text',
- html: c.header
- },
- style:'width:'+(c.width-this.borderWidth)+'px;'
- }));
+ /**
+ * Deselect a node.
+ * @param {TreeNode} node The node to unselect
+ */
+ unselect : function(node){
+ if(this.selNode == node){
+ this.clearSelections();
+ }
+ },
+
+ /**
+ * Clear all selections
+ */
+ clearSelections : function(){
+ var n = this.selNode;
+ if(n){
+ n.ui.onSelectedChange(false);
+ this.selNode = null;
+ this.fireEvent("selectionchange", this, null);
}
- this.headers.createChild({cls:'x-clear'});
- // prevent floats from wrapping when clipped
- this.headers.setWidth(totalWidth);
- //this.innerCt.setWidth(totalWidth);
- this.innerCt.setStyle({ overflow: 'auto' });
- this.onResize(this.width, this.height);
-
-
+ return n;
},
- onResize : function(w,h)
- {
- this.height = h;
- this.width = w;
- // resize cols..
- this.innerCt.setWidth(this.width);
- this.innerCt.setHeight(this.height-20);
-
- // headers...
- var cols = this.columns, c;
- var totalWidth = 0;
- var expEl = false;
- var len = cols.length;
- for(var i = 0; i < len; i++){
- c = cols[i];
- if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
- // it's the expander..
- expEl = this.headEls[i];
- continue;
+
+ /**
+ * Get the selected node
+ * @return {TreeNode} The selected node
+ */
+ getSelectedNode : function(){
+ return this.selNode;
+ },
+
+ /**
+ * Returns true if the node is selected
+ * @param {TreeNode} node The node to check
+ * @return {Boolean}
+ */
+ isSelected : function(node){
+ return this.selNode == node;
+ },
+
+ /**
+ * Selects the node above the selected node in the tree, intelligently walking the nodes
+ * @return TreeNode The new selection
+ */
+ selectPrevious : function(){
+ var s = this.selNode || this.lastSelNode;
+ if(!s){
+ return null;
+ }
+ var ps = s.previousSibling;
+ if(ps){
+ if(!ps.isExpanded() || ps.childNodes.length < 1){
+ return this.select(ps);
+ } else{
+ var lc = ps.lastChild;
+ while(lc && lc.isExpanded() && lc.childNodes.length > 0){
+ lc = lc.lastChild;
+ }
+ return this.select(lc);
}
- totalWidth += c.width;
-
+ } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
+ return this.select(s.parentNode);
}
- if (expEl) {
- expEl.setWidth( ((w - totalWidth)-this.borderWidth - 20));
+ return null;
+ },
+
+ /**
+ * Selects the node above the selected node in the tree, intelligently walking the nodes
+ * @return TreeNode The new selection
+ */
+ selectNext : function(){
+ var s = this.selNode || this.lastSelNode;
+ if(!s){
+ return null;
}
- this.headers.setWidth(w-20);
+ if(s.firstChild && s.isExpanded()){
+ return this.select(s.firstChild);
+ }else if(s.nextSibling){
+ return this.select(s.nextSibling);
+ }else if(s.parentNode){
+ var newS = null;
+ s.parentNode.bubble(function(){
+ if(this.nextSibling){
+ newS = this.getOwnerTree().selModel.select(this.nextSibling);
+ return false;
+ }
+ });
+ return newS;
+ }
+ return null;
+ },
-
-
-
+ onKeyDown : function(e){
+ var s = this.selNode || this.lastSelNode;
+ // undesirable, but required
+ var sm = this;
+ if(!s){
+ return;
+ }
+ var k = e.getKey();
+ switch(k){
+ case e.DOWN:
+ e.stopEvent();
+ this.selectNext();
+ break;
+ case e.UP:
+ e.stopEvent();
+ this.selectPrevious();
+ break;
+ case e.RIGHT:
+ e.preventDefault();
+ if(s.hasChildNodes()){
+ if(!s.isExpanded()){
+ s.expand();
+ }else if(s.firstChild){
+ this.select(s.firstChild, e);
+ }
+ }
+ break;
+ case e.LEFT:
+ e.preventDefault();
+ if(s.hasChildNodes() && s.isExpanded()){
+ s.collapse();
+ }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
+ this.select(s.parentNode, e);
+ }
+ break;
+ };
}
});
-/*
+
+/**
+ * @class Roo.tree.MultiSelectionModel
+ * @extends Roo.util.Observable
+ * Multi selection for a TreePanel.
+ * @param {Object} cfg Configuration
+ */
+Roo.tree.MultiSelectionModel = function(){
+ this.selNodes = [];
+ this.selMap = {};
+ this.addEvents({
+ /**
+ * @event selectionchange
+ * Fires when the selected nodes change
+ * @param {MultiSelectionModel} this
+ * @param {Array} nodes Array of the selected nodes
+ */
+ "selectionchange" : true
+ });
+ Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
+
+};
+
+Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
+ init : function(tree){
+ this.tree = tree;
+ tree.getTreeEl().on("keydown", this.onKeyDown, this);
+ tree.on("click", this.onNodeClick, this);
+ },
+
+ onNodeClick : function(node, e){
+ this.select(node, e, e.ctrlKey);
+ },
+
+ /**
+ * Select a node.
+ * @param {TreeNode} node The node to select
+ * @param {EventObject} e (optional) An event associated with the selection
+ * @param {Boolean} keepExisting True to retain existing selections
+ * @return {TreeNode} The selected node
+ */
+ select : function(node, e, keepExisting){
+ if(keepExisting !== true){
+ this.clearSelections(true);
+ }
+ if(this.isSelected(node)){
+ this.lastSelNode = node;
+ return node;
+ }
+ this.selNodes.push(node);
+ this.selMap[node.id] = node;
+ this.lastSelNode = node;
+ node.ui.onSelectedChange(true);
+ this.fireEvent("selectionchange", this, this.selNodes);
+ return node;
+ },
+
+ /**
+ * Deselect a node.
+ * @param {TreeNode} node The node to unselect
+ */
+ unselect : function(node){
+ if(this.selMap[node.id]){
+ node.ui.onSelectedChange(false);
+ var sn = this.selNodes;
+ var index = -1;
+ if(sn.indexOf){
+ index = sn.indexOf(node);
+ }else{
+ for(var i = 0, len = sn.length; i < len; i++){
+ if(sn[i] == node){
+ index = i;
+ break;
+ }
+ }
+ }
+ if(index != -1){
+ this.selNodes.splice(index, 1);
+ }
+ delete this.selMap[node.id];
+ this.fireEvent("selectionchange", this, this.selNodes);
+ }
+ },
+
+ /**
+ * Clear all selections
+ */
+ clearSelections : function(suppressEvent){
+ var sn = this.selNodes;
+ if(sn.length > 0){
+ for(var i = 0, len = sn.length; i < len; i++){
+ sn[i].ui.onSelectedChange(false);
+ }
+ this.selNodes = [];
+ this.selMap = {};
+ if(suppressEvent !== true){
+ this.fireEvent("selectionchange", this, this.selNodes);
+ }
+ }
+ },
+
+ /**
+ * Returns true if the node is selected
+ * @param {TreeNode} node The node to check
+ * @return {Boolean}
+ */
+ isSelected : function(node){
+ return this.selMap[node.id] ? true : false;
+ },
+
+ /**
+ * Returns an array of the selected nodes
+ * @return {Array}
+ */
+ getSelectedNodes : function(){
+ return this.selNodes;
+ },
+
+ onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
+
+ selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
+
+ selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.menu.Menu
- * @extends Roo.util.Observable
- * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
- * A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class
- * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
+ * @class Roo.tree.TreeNode
+ * @extends Roo.data.Node
+ * @cfg {String} text The text for this node
+ * @cfg {Boolean} expanded true to start the node expanded
+ * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
+ * @cfg {Boolean} allowDrop false if this node cannot be drop on
+ * @cfg {Boolean} disabled true to start the node disabled
+ * @cfg {String} icon The path to an icon for the node. The preferred way to do this
+ * is to use the cls or iconCls attributes and add the icon via a CSS background image.
+ * @cfg {String} cls A css class to be added to the node
+ * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
+ * @cfg {String} href URL of the link used for the node (defaults to #)
+ * @cfg {String} hrefTarget target frame for the link
+ * @cfg {String} qtip An Ext QuickTip for the node
+ * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
+ * @cfg {Boolean} singleClickExpand True for single click expand on this node
+ * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
+ * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
+ * (defaults to undefined with no checkbox rendered)
* @constructor
- * Creates a new Menu
- * @param {Object} config Configuration options
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
*/
-Roo.menu.Menu = function(config){
-
- Roo.menu.Menu.superclass.constructor.call(this, config);
-
- this.id = this.id || Roo.id();
+Roo.tree.TreeNode = function(attributes){
+ attributes = attributes || {};
+ if(typeof attributes == "string"){
+ attributes = {text: attributes};
+ }
+ this.childrenRendered = false;
+ this.rendered = false;
+ Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
+ this.expanded = attributes.expanded === true;
+ this.isTarget = attributes.isTarget !== false;
+ this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
+ this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
+
+ /**
+ * Read-only. The text for this node. To change it use setText().
+ * @type String
+ */
+ this.text = attributes.text;
+ /**
+ * True if this node is disabled.
+ * @type Boolean
+ */
+ this.disabled = attributes.disabled === true;
+
this.addEvents({
/**
- * @event beforeshow
- * Fires before this menu is displayed
- * @param {Roo.menu.Menu} this
- */
- beforeshow : true,
+ * @event textchange
+ * Fires when the text for this node is changed
+ * @param {Node} this This node
+ * @param {String} text The new text
+ * @param {String} oldText The old text
+ */
+ "textchange" : true,
/**
- * @event beforehide
- * Fires before this menu is hidden
- * @param {Roo.menu.Menu} this
- */
- beforehide : true,
+ * @event beforeexpand
+ * Fires before this node is expanded, return false to cancel.
+ * @param {Node} this This node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforeexpand" : true,
/**
- * @event show
- * Fires after this menu is displayed
- * @param {Roo.menu.Menu} this
- */
- show : true,
+ * @event beforecollapse
+ * Fires before this node is collapsed, return false to cancel.
+ * @param {Node} this This node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforecollapse" : true,
/**
- * @event hide
- * Fires after this menu is hidden
- * @param {Roo.menu.Menu} this
- */
- hide : true,
+ * @event expand
+ * Fires when this node is expanded
+ * @param {Node} this This node
+ */
+ "expand" : true,
/**
- * @event click
- * Fires when this menu is clicked (or when the enter key is pressed while it is active)
- * @param {Roo.menu.Menu} this
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- * @param {Roo.EventObject} e
- */
- click : true,
+ * @event disabledchange
+ * Fires when the disabled status of this node changes
+ * @param {Node} this This node
+ * @param {Boolean} disabled
+ */
+ "disabledchange" : true,
/**
- * @event mouseover
- * Fires when the mouse is hovering over this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseover : true,
+ * @event collapse
+ * Fires when this node is collapsed
+ * @param {Node} this This node
+ */
+ "collapse" : true,
/**
- * @event mouseout
- * Fires when the mouse exits this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseout : true,
+ * @event beforeclick
+ * Fires before click processing. Return false to cancel the default action.
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "beforeclick":true,
/**
- * @event itemclick
- * Fires when a menu item contained in this menu is clicked
- * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
- * @param {Roo.EventObject} e
- */
- itemclick: true
+ * @event checkchange
+ * Fires when a node with a checkbox's checked property changes
+ * @param {Node} this This node
+ * @param {Boolean} checked
+ */
+ "checkchange":true,
+ /**
+ * @event click
+ * Fires when this node is clicked
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "click":true,
+ /**
+ * @event dblclick
+ * Fires when this node is double clicked
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "dblclick":true,
+ /**
+ * @event contextmenu
+ * Fires when this node is right clicked
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "contextmenu":true,
+ /**
+ * @event beforechildrenrendered
+ * Fires right before the child nodes for this node are rendered
+ * @param {Node} this This node
+ */
+ "beforechildrenrendered":true
});
- if (this.registerMenu) {
- Roo.menu.MenuMgr.register(this);
- }
-
- var mis = this.items;
- this.items = new Roo.util.MixedCollection();
- if(mis){
- this.add.apply(this, mis);
- }
-};
-Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
- /**
- * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
- */
- minWidth : 120,
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
- * for bottom-right shadow (defaults to "sides")
- */
- shadow : "sides",
- /**
- * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
- * this menu (defaults to "tl-tr?")
- */
- subMenuAlign : "tl-tr?",
+ var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
+
/**
- * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
- * relative to its element of origin (defaults to "tl-bl?")
+ * Read-only. The UI for this node
+ * @type TreeNodeUI
*/
- defaultAlign : "tl-bl?",
+ this.ui = new uiClass(this);
+
+ // finally support items[]
+ if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
+ return;
+ }
+
+
+ Roo.each(this.attributes.items, function(c) {
+ this.appendChild(Roo.factory(c,Roo.Tree));
+ }, this);
+ delete this.attributes.items;
+
+
+
+};
+Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
+ preventHScroll: true,
/**
- * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
+ * Returns true if this node is expanded
+ * @return {Boolean}
*/
- allowOtherMenus : false,
+ isExpanded : function(){
+ return this.expanded;
+ },
+
/**
- * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
+ * Returns the UI object for this node
+ * @return {TreeNodeUI}
*/
- registerMenu : true,
-
- hidden:true,
+ getUI : function(){
+ return this.ui;
+ },
- // private
- render : function(){
- if(this.el){
- return;
+ // private override
+ setFirstChild : function(node){
+ var of = this.firstChild;
+ Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
+ if(this.childrenRendered && of && node != of){
+ of.renderIndent(true, true);
}
- var el = this.el = new Roo.Layer({
- cls: "x-menu",
- shadow:this.shadow,
- constrain: false,
- parentEl: this.parentEl || document.body,
- zindex:15000
- });
-
- this.keyNav = new Roo.menu.MenuNav(this);
+ if(this.rendered){
+ this.renderIndent(true, true);
+ }
+ },
- if(this.plain){
- el.addClass("x-menu-plain");
+ // private override
+ setLastChild : function(node){
+ var ol = this.lastChild;
+ Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
+ if(this.childrenRendered && ol && node != ol){
+ ol.renderIndent(true, true);
}
- if(this.cls){
- el.addClass(this.cls);
+ if(this.rendered){
+ this.renderIndent(true, true);
}
- // generic focus element
- this.focusEl = el.createChild({
- tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
- });
- var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
- //disabling touch- as it's causing issues ..
- //ul.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
- ul.on('click' , this.onClick, this);
-
-
- ul.on("mouseover", this.onMouseOver, this);
- ul.on("mouseout", this.onMouseOut, this);
- this.items.each(function(item){
- if (item.hidden) {
- return;
- }
-
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- ul.dom.appendChild(li);
- item.render(li, this);
- }, this);
- this.ul = ul;
- this.autoWidth();
},
- // private
- autoWidth : function(){
- var el = this.el, ul = this.ul;
- if(!el){
- return;
- }
- var w = this.width;
- if(w){
- el.setWidth(w);
- }else if(Roo.isIE){
- el.setWidth(this.minWidth);
- var t = el.dom.offsetWidth; // force recalc
- el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
+ // these methods are overridden to provide lazy rendering support
+ // private override
+ appendChild : function()
+ {
+ var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
+ if(node && this.childrenRendered){
+ node.render();
}
+ this.ui.updateExpandIcon();
+ return node;
},
- // private
- delayAutoWidth : function(){
- if(this.rendered){
- if(!this.awTask){
- this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
- }
- this.awTask.delay(20);
+ // private override
+ removeChild : function(node){
+ this.ownerTree.getSelectionModel().unselect(node);
+ Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
+ // if it's been rendered remove dom node
+ if(this.childrenRendered){
+ node.ui.remove();
+ }
+ if(this.childNodes.length < 1){
+ this.collapse(false, false);
+ }else{
+ this.ui.updateExpandIcon();
+ }
+ if(!this.firstChild) {
+ this.childrenRendered = false;
}
+ return node;
},
- // private
- findTargetItem : function(e){
- var t = e.getTarget(".x-menu-list-item", this.ul, true);
- if(t && t.menuItemId){
- return this.items.get(t.menuItemId);
+ // private override
+ insertBefore : function(node, refNode){
+ var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
+ if(newNode && refNode && this.childrenRendered){
+ node.render();
}
+ this.ui.updateExpandIcon();
+ return newNode;
},
- // private
- onClick : function(e){
- Roo.log("menu.onClick");
- var t = this.findTargetItem(e);
- if(!t){
- return;
+ /**
+ * Sets the text for this node
+ * @param {String} text
+ */
+ setText : function(text){
+ var oldText = this.text;
+ this.text = text;
+ this.attributes.text = text;
+ if(this.rendered){ // event without subscribing
+ this.ui.onTextChange(this, text, oldText);
}
- Roo.log(e);
- if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
- if(t == this.activeItem && t.shouldDeactivate(e)){
- this.activeItem.deactivate();
- delete this.activeItem;
+ this.fireEvent("textchange", this, text, oldText);
+ },
+
+ /**
+ * Triggers selection of this node
+ */
+ select : function(){
+ this.getOwnerTree().getSelectionModel().select(this);
+ },
+
+ /**
+ * Triggers deselection of this node
+ */
+ unselect : function(){
+ this.getOwnerTree().getSelectionModel().unselect(this);
+ },
+
+ /**
+ * Returns true if this node is selected
+ * @return {Boolean}
+ */
+ isSelected : function(){
+ return this.getOwnerTree().getSelectionModel().isSelected(this);
+ },
+
+ /**
+ * Expand this node.
+ * @param {Boolean} deep (optional) True to expand all children as well
+ * @param {Boolean} anim (optional) false to cancel the default animation
+ * @param {Function} callback (optional) A callback to be called when
+ * expanding this node completes (does not wait for deep expand to complete).
+ * Called with 1 parameter, this node.
+ */
+ expand : function(deep, anim, callback){
+ if(!this.expanded){
+ if(this.fireEvent("beforeexpand", this, deep, anim) === false){
return;
}
- if(t.canActivate){
- this.setActiveItem(t, true);
+ if(!this.childrenRendered){
+ this.renderChildren();
}
- return;
-
+ this.expanded = true;
+ if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
+ this.ui.animExpand(function(){
+ this.fireEvent("expand", this);
+ if(typeof callback == "function"){
+ callback(this);
+ }
+ if(deep === true){
+ this.expandChildNodes(true);
+ }
+ }.createDelegate(this));
+ return;
+ }else{
+ this.ui.expand();
+ this.fireEvent("expand", this);
+ if(typeof callback == "function"){
+ callback(this);
+ }
+ }
+ }else{
+ if(typeof callback == "function"){
+ callback(this);
+ }
+ }
+ if(deep === true){
+ this.expandChildNodes(true);
}
-
- t.onClick(e);
- this.fireEvent("click", this, t, e);
},
- // private
- setActiveItem : function(item, autoExpand){
- if(item != this.activeItem){
- if(this.activeItem){
- this.activeItem.deactivate();
+ isHiddenRoot : function(){
+ return this.isRoot && !this.getOwnerTree().rootVisible;
+ },
+
+ /**
+ * Collapse this node.
+ * @param {Boolean} deep (optional) True to collapse all children as well
+ * @param {Boolean} anim (optional) false to cancel the default animation
+ */
+ collapse : function(deep, anim){
+ if(this.expanded && !this.isHiddenRoot()){
+ if(this.fireEvent("beforecollapse", this, deep, anim) === false){
+ return;
+ }
+ this.expanded = false;
+ if((this.getOwnerTree().animate && anim !== false) || anim){
+ this.ui.animCollapse(function(){
+ this.fireEvent("collapse", this);
+ if(deep === true){
+ this.collapseChildNodes(true);
+ }
+ }.createDelegate(this));
+ return;
+ }else{
+ this.ui.collapse();
+ this.fireEvent("collapse", this);
+ }
+ }
+ if(deep === true){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].collapse(true, false);
}
- this.activeItem = item;
- item.activate(autoExpand);
- }else if(autoExpand){
- item.expandMenu();
}
},
// private
- tryActivate : function(start, step){
- var items = this.items;
- for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
- var item = items.get(i);
- if(!item.disabled && item.canActivate){
- this.setActiveItem(item, false);
- return item;
- }
+ delayedExpand : function(delay){
+ if(!this.expandProcId){
+ this.expandProcId = this.expand.defer(delay, this);
}
- return false;
},
// private
- onMouseOver : function(e){
- var t;
- if(t = this.findTargetItem(e)){
- if(t.canActivate && !t.disabled){
- this.setActiveItem(t, true);
- }
+ cancelExpand : function(){
+ if(this.expandProcId){
+ clearTimeout(this.expandProcId);
}
- this.fireEvent("mouseover", this, e, t);
+ this.expandProcId = false;
},
- // private
- onMouseOut : function(e){
- var t;
- if(t = this.findTargetItem(e)){
- if(t == this.activeItem && t.shouldDeactivate(e)){
- this.activeItem.deactivate();
- delete this.activeItem;
- }
+ /**
+ * Toggles expanded/collapsed state of the node
+ */
+ toggle : function(){
+ if(this.expanded){
+ this.collapse();
+ }else{
+ this.expand();
}
- this.fireEvent("mouseout", this, e, t);
},
/**
- * Read-only. Returns true if the menu is currently displayed, else false.
- * @type Boolean
+ * Ensures all parent nodes are expanded
*/
- isVisible : function(){
- return this.el && !this.hidden;
+ ensureVisible : function(callback){
+ var tree = this.getOwnerTree();
+ tree.expandPath(this.parentNode.getPath(), false, function(){
+ tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
+ Roo.callback(callback);
+ }.createDelegate(this));
},
/**
- * Displays this menu relative to another element
- * @param {String/HTMLElement/Roo.Element} element The element to align to
- * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
- * the element (defaults to this.defaultAlign)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ * Expand all child nodes
+ * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
*/
- show : function(el, pos, parentMenu){
- this.parentMenu = parentMenu;
- if(!this.el){
- this.render();
+ expandChildNodes : function(deep){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].expand(deep);
}
- this.fireEvent("beforeshow", this);
- this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
},
/**
- * Displays this menu at a specific xy position
- * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ * Collapse all child nodes
+ * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
*/
- showAt : function(xy, parentMenu, /* private: */_e){
- this.parentMenu = parentMenu;
- if(!this.el){
- this.render();
+ collapseChildNodes : function(deep){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].collapse(deep);
}
- if(_e !== false){
- this.fireEvent("beforeshow", this);
- xy = this.el.adjustForConstraints(xy);
+ },
+
+ /**
+ * Disables this node
+ */
+ disable : function(){
+ this.disabled = true;
+ this.unselect();
+ if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+ this.ui.onDisableChange(this, true);
}
- this.el.setXY(xy);
- this.el.show();
- this.hidden = false;
- this.focus();
- this.fireEvent("show", this);
+ this.fireEvent("disabledchange", this, true);
},
- focus : function(){
- if(!this.hidden){
- this.doFocus.defer(50, this);
+ /**
+ * Enables this node
+ */
+ enable : function(){
+ this.disabled = false;
+ if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+ this.ui.onDisableChange(this, false);
}
+ this.fireEvent("disabledchange", this, false);
},
- doFocus : function(){
- if(!this.hidden){
- this.focusEl.focus();
+ // private
+ renderChildren : function(suppressEvent){
+ if(suppressEvent !== false){
+ this.fireEvent("beforechildrenrendered", this);
+ }
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i].render(true);
}
+ this.childrenRendered = true;
},
- /**
- * Hides this menu and optionally all parent menus
- * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
- */
- hide : function(deep){
- if(this.el && this.isVisible()){
- this.fireEvent("beforehide", this);
- if(this.activeItem){
- this.activeItem.deactivate();
- this.activeItem = null;
+ // private
+ sort : function(fn, scope){
+ Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
+ if(this.childrenRendered){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i].render(true);
}
- this.el.hide();
- this.hidden = true;
- this.fireEvent("hide", this);
- }
- if(deep === true && this.parentMenu){
- this.parentMenu.hide(true);
}
},
- /**
- * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
- * Any of the following are valid:
- * <ul>
- * <li>Any menu item object based on {@link Roo.menu.Item}</li>
- * <li>An HTMLElement object which will be converted to a menu item</li>
- * <li>A menu item config object that will be created as a new menu item</li>
- * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
- * it will be converted into a {@link Roo.menu.TextItem} and added</li>
- * </ul>
- * Usage:
- * <pre><code>
-// Create the menu
-var menu = new Roo.menu.Menu();
-
-// Create a menu item to add by reference
-var menuItem = new Roo.menu.Item({ text: 'New Item!' });
-
-// Add a bunch of items at once using different methods.
-// Only the last item added will be returned.
-var item = menu.add(
- menuItem, // add existing item by ref
- 'Dynamic Item', // new TextItem
- '-', // new separator
- { text: 'Config Item' } // new item by config
-);
-</code></pre>
- * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
- * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
- */
- add : function(){
- var a = arguments, l = a.length, item;
- for(var i = 0; i < l; i++){
- var el = a[i];
- if ((typeof(el) == "object") && el.xtype && el.xns) {
- el = Roo.factory(el, Roo.menu);
- }
-
- if(el.render){ // some kind of Item
- item = this.addItem(el);
- }else if(typeof el == "string"){ // string
- if(el == "separator" || el == "-"){
- item = this.addSeparator();
- }else{
- item = this.addText(el);
- }
- }else if(el.tagName || el.el){ // element
- item = this.addElement(el);
- }else if(typeof el == "object"){ // must be menu item config?
- item = this.addMenuItem(el);
+ // private
+ render : function(bulkRender){
+ this.ui.render(bulkRender);
+ if(!this.rendered){
+ this.rendered = true;
+ if(this.expanded){
+ this.expanded = false;
+ this.expand(false, false);
}
}
- return item;
},
+ // private
+ renderIndent : function(deep, refresh){
+ if(refresh){
+ this.ui.childIndent = null;
+ }
+ this.ui.renderIndent();
+ if(deep === true && this.childrenRendered){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i].renderIndent(true, refresh);
+ }
+ }
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.tree.AsyncTreeNode
+ * @extends Roo.tree.TreeNode
+ * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
+ * @constructor
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ */
+ Roo.tree.AsyncTreeNode = function(config){
+ this.loaded = false;
+ this.loading = false;
+ Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
/**
- * Returns this menu's underlying {@link Roo.Element} object
- * @return {Roo.Element} The element
+ * @event beforeload
+ * Fires before this node is loaded, return false to cancel
+ * @param {Node} this This node
+ */
+ this.addEvents({'beforeload':true, 'load': true});
+ /**
+ * @event load
+ * Fires when this node is loaded
+ * @param {Node} this This node
+ */
+ /**
+ * The loader used by this node (defaults to using the tree's defined loader)
+ * @type TreeLoader
+ * @property loader
*/
- getEl : function(){
- if(!this.el){
- this.render();
+};
+Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
+ expand : function(deep, anim, callback){
+ if(this.loading){ // if an async load is already running, waiting til it's done
+ var timer;
+ var f = function(){
+ if(!this.loading){ // done loading
+ clearInterval(timer);
+ this.expand(deep, anim, callback);
+ }
+ }.createDelegate(this);
+ timer = setInterval(f, 200);
+ return;
}
- return this.el;
+ if(!this.loaded){
+ if(this.fireEvent("beforeload", this) === false){
+ return;
+ }
+ this.loading = true;
+ this.ui.beforeLoad(this);
+ var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
+ if(loader){
+ loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
+ return;
+ }
+ }
+ Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
},
-
+
/**
- * Adds a separator bar to the menu
- * @return {Roo.menu.Item} The menu item that was added
+ * Returns true if this node is currently loading
+ * @return {Boolean}
*/
- addSeparator : function(){
- return this.addItem(new Roo.menu.Separator());
+ isLoading : function(){
+ return this.loading;
},
-
- /**
- * Adds an {@link Roo.Element} object to the menu
- * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
- * @return {Roo.menu.Item} The menu item that was added
- */
- addElement : function(el){
- return this.addItem(new Roo.menu.BaseItem(el));
+
+ loadComplete : function(deep, anim, callback){
+ this.loading = false;
+ this.loaded = true;
+ this.ui.afterLoad(this);
+ this.fireEvent("load", this);
+ this.expand(deep, anim, callback);
},
-
+
/**
- * Adds an existing object based on {@link Roo.menu.Item} to the menu
- * @param {Roo.menu.Item} item The menu item to add
- * @return {Roo.menu.Item} The menu item that was added
+ * Returns true if this node has been loaded
+ * @return {Boolean}
*/
- addItem : function(item){
- this.items.add(item);
- if(this.ul){
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- this.ul.dom.appendChild(li);
- item.render(li, this);
- this.delayAutoWidth();
+ isLoaded : function(){
+ return this.loaded;
+ },
+
+ hasChildNodes : function(){
+ if(!this.isLeaf() && !this.loaded){
+ return true;
+ }else{
+ return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
}
- return item;
},
/**
- * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
- * @param {Object} config A MenuItem config object
- * @return {Roo.menu.Item} The menu item that was added
+ * Trigger a reload for this node
+ * @param {Function} callback
*/
- addMenuItem : function(config){
- if(!(config instanceof Roo.menu.Item)){
- if(typeof config.checked == "boolean"){ // must be check menu item config?
- config = new Roo.menu.CheckItem(config);
- }else{
- config = new Roo.menu.Item(config);
- }
+ reload : function(callback){
+ this.collapse(false, false);
+ while(this.firstChild){
+ this.removeChild(this.firstChild);
}
- return this.addItem(config);
- },
+ this.childrenRendered = false;
+ this.loaded = false;
+ if(this.isHiddenRoot()){
+ this.expanded = false;
+ }
+ this.expand(false, false, callback);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.tree.TreeNodeUI
+ * @constructor
+ * @param {Object} node The node to render
+ * The TreeNode UI implementation is separate from the
+ * tree implementation. Unless you are customizing the tree UI,
+ * you should never have to use this directly.
+ */
+Roo.tree.TreeNodeUI = function(node){
+ this.node = node;
+ this.rendered = false;
+ this.animating = false;
+ this.emptyIcon = Roo.BLANK_IMAGE_URL;
+};
- /**
- * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
- * @param {String} text The text to display in the menu item
- * @return {Roo.menu.Item} The menu item that was added
- */
- addText : function(text){
- return this.addItem(new Roo.menu.TextItem({ text : text }));
+Roo.tree.TreeNodeUI.prototype = {
+ removeChild : function(node){
+ if(this.rendered){
+ this.ctNode.removeChild(node.ui.getEl());
+ }
},
- /**
- * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
- * @param {Number} index The index in the menu's list of current items where the new item should be inserted
- * @param {Roo.menu.Item} item The menu item to add
- * @return {Roo.menu.Item} The menu item that was added
- */
- insert : function(index, item){
- this.items.insert(index, item);
- if(this.ul){
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
- item.render(li, this);
- this.delayAutoWidth();
- }
- return item;
+ beforeLoad : function(){
+ this.addClass("x-tree-node-loading");
},
- /**
- * Removes an {@link Roo.menu.Item} from the menu and destroys the object
- * @param {Roo.menu.Item} item The menu item to remove
- */
- remove : function(item){
- this.items.removeKey(item.id);
- item.destroy();
+ afterLoad : function(){
+ this.removeClass("x-tree-node-loading");
},
- /**
- * Removes and destroys all items in the menu
- */
- removeAll : function(){
- var f;
- while(f = this.items.first()){
- this.remove(f);
+ onTextChange : function(node, text, oldText){
+ if(this.rendered){
+ this.textNode.innerHTML = text;
}
- }
-});
-
-// MenuNav is a private utility class used internally by the Menu
-Roo.menu.MenuNav = function(menu){
- Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
- this.scope = this.menu = menu;
-};
+ },
-Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
- doRelay : function(e, h){
- var k = e.getKey();
- if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
- this.menu.tryActivate(0, 1);
- return false;
+ onDisableChange : function(node, state){
+ this.disabled = state;
+ if(state){
+ this.addClass("x-tree-node-disabled");
+ }else{
+ this.removeClass("x-tree-node-disabled");
}
- return h.call(this.scope || this, e, this.menu);
},
- up : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
- m.tryActivate(m.items.length-1, -1);
+ onSelectedChange : function(state){
+ if(state){
+ this.focus();
+ this.addClass("x-tree-selected");
+ }else{
+ //this.blur();
+ this.removeClass("x-tree-selected");
}
},
- down : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
- m.tryActivate(0, 1);
+ onMove : function(tree, node, oldParent, newParent, index, refNode){
+ this.childIndent = null;
+ if(this.rendered){
+ var targetNode = newParent.ui.getContainer();
+ if(!targetNode){//target not rendered
+ this.holder = document.createElement("div");
+ this.holder.appendChild(this.wrap);
+ return;
+ }
+ var insertBefore = refNode ? refNode.ui.getEl() : null;
+ if(insertBefore){
+ targetNode.insertBefore(this.wrap, insertBefore);
+ }else{
+ targetNode.appendChild(this.wrap);
+ }
+ this.node.renderIndent(true);
}
},
- right : function(e, m){
- if(m.activeItem){
- m.activeItem.expandMenu(true);
+ addClass : function(cls){
+ if(this.elNode){
+ Roo.fly(this.elNode).addClass(cls);
}
},
- left : function(e, m){
- m.hide();
- if(m.parentMenu && m.parentMenu.activeItem){
- m.parentMenu.activeItem.activate();
+ removeClass : function(cls){
+ if(this.elNode){
+ Roo.fly(this.elNode).removeClass(cls);
}
},
- enter : function(e, m){
- if(m.activeItem){
- e.stopPropagation();
- m.activeItem.onClick(e);
- m.fireEvent("click", this, m.activeItem);
- return true;
+ remove : function(){
+ if(this.rendered){
+ this.holder = document.createElement("div");
+ this.holder.appendChild(this.wrap);
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.MenuMgr
- * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
- * @static
- */
-Roo.menu.MenuMgr = function(){
- var menus, active, groups = {}, attached = false, lastShow = new Date();
+ },
- // private - called when first menu is created
- function init(){
- menus = {};
- active = new Roo.util.MixedCollection();
- Roo.get(document).addKeyListener(27, function(){
- if(active.length > 0){
- hideAll();
- }
- });
- }
+ fireEvent : function(){
+ return this.node.fireEvent.apply(this.node, arguments);
+ },
- // private
- function hideAll(){
- if(active && active.length > 0){
- var c = active.clone();
- c.each(function(m){
- m.hide();
- });
- }
- }
+ initEvents : function(){
+ this.node.on("move", this.onMove, this);
+ var E = Roo.EventManager;
+ var a = this.anchor;
- // private
- function onHide(m){
- active.remove(m);
- if(active.length < 1){
- Roo.get(document).un("mousedown", onMouseDown);
- attached = false;
- }
- }
+ var el = Roo.fly(a, '_treeui');
- // private
- function onShow(m){
- var last = active.last();
- lastShow = new Date();
- active.add(m);
- if(!attached){
- Roo.get(document).on("mousedown", onMouseDown);
- attached = true;
- }
- if(m.parentMenu){
- m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
- m.parentMenu.activeChild = m;
- }else if(last && last.isVisible()){
- m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
- }
- }
+ if(Roo.isOpera){ // opera render bug ignores the CSS
+ el.setStyle("text-decoration", "none");
+ }
- // private
- function onBeforeHide(m){
- if(m.activeChild){
- m.activeChild.hide();
- }
- if(m.autoHideTimer){
- clearTimeout(m.autoHideTimer);
- delete m.autoHideTimer;
- }
- }
+ el.on("click", this.onClick, this);
+ el.on("dblclick", this.onDblClick, this);
- // private
- function onBeforeShow(m){
- var pm = m.parentMenu;
- if(!pm && !m.allowOtherMenus){
- hideAll();
- }else if(pm && pm.activeChild && active != m){
- pm.activeChild.hide();
- }
- }
+ if(this.checkbox){
+ Roo.EventManager.on(this.checkbox,
+ Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
+ }
- // private
- function onMouseDown(e){
- if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
- hideAll();
- }
- }
+ el.on("contextmenu", this.onContextMenu, this);
- // private
- function onBeforeCheck(mi, state){
- if(state){
- var g = groups[mi.group];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != mi){
- g[i].setChecked(false);
- }
- }
- }
- }
+ var icon = Roo.fly(this.iconNode);
+ icon.on("click", this.onClick, this);
+ icon.on("dblclick", this.onDblClick, this);
+ icon.on("contextmenu", this.onContextMenu, this);
+ E.on(this.ecNode, "click", this.ecClick, this, true);
- return {
+ if(this.node.disabled){
+ this.addClass("x-tree-node-disabled");
+ }
+ if(this.node.hidden){
+ this.addClass("x-tree-node-disabled");
+ }
+ var ot = this.node.getOwnerTree();
+ var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
+ if(dd && (!this.node.isRoot || ot.rootVisible)){
+ Roo.dd.Registry.register(this.elNode, {
+ node: this.node,
+ handles: this.getDDHandles(),
+ isHandle: false
+ });
+ }
+ },
- /**
- * Hides all menus that are currently visible
- */
- hideAll : function(){
- hideAll();
- },
+ getDDHandles : function(){
+ return [this.iconNode, this.textNode];
+ },
- // private
- register : function(menu){
- if(!menus){
- init();
- }
- menus[menu.id] = menu;
- menu.on("beforehide", onBeforeHide);
- menu.on("hide", onHide);
- menu.on("beforeshow", onBeforeShow);
- menu.on("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menu);
- menu.on("checkchange", onCheck);
- }
- },
-
- /**
- * Returns a {@link Roo.menu.Menu} object
- * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
- * be used to generate and return a new Menu instance.
- */
- get : function(menu){
- if(typeof menu == "string"){ // menu id
- return menus[menu];
- }else if(menu.events){ // menu instance
- return menu;
- }else if(typeof menu.length == 'number'){ // array of menu items?
- return new Roo.menu.Menu({items:menu});
- }else{ // otherwise, must be a config
- return new Roo.menu.Menu(menu);
- }
- },
+ hide : function(){
+ if(this.rendered){
+ this.wrap.style.display = "none";
+ }
+ },
- // private
- unregister : function(menu){
- delete menus[menu.id];
- menu.un("beforehide", onBeforeHide);
- menu.un("hide", onHide);
- menu.un("beforeshow", onBeforeShow);
- menu.un("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- groups[g].remove(menu);
- menu.un("checkchange", onCheck);
- }
- },
+ show : function(){
+ if(this.rendered){
+ this.wrap.style.display = "";
+ }
+ },
- // private
- registerCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menuItem);
- menuItem.on("beforecheckchange", onBeforeCheck);
- }
- },
+ onContextMenu : function(e){
+ if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
+ e.preventDefault();
+ this.focus();
+ this.fireEvent("contextmenu", this.node, e);
+ }
+ },
- // private
- unregisterCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- groups[g].remove(menuItem);
- menuItem.un("beforecheckchange", onBeforeCheck);
- }
- }
- };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+ onClick : function(e){
+ if(this.dropping){
+ e.stopEvent();
+ return;
+ }
+ if(this.fireEvent("beforeclick", this.node, e) !== false){
+ if(!this.disabled && this.node.attributes.href){
+ this.fireEvent("click", this.node, e);
+ return;
+ }
+ e.preventDefault();
+ if(this.disabled){
+ return;
+ }
-/**
- * @class Roo.menu.BaseItem
- * @extends Roo.Component
- * @abstract
- * The base class for all items that render into menus. BaseItem provides default rendering, activated state
- * management and base configuration options shared by all menu components.
- * @constructor
- * Creates a new BaseItem
- * @param {Object} config Configuration options
- */
-Roo.menu.BaseItem = function(config){
- Roo.menu.BaseItem.superclass.constructor.call(this, config);
+ if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
+ this.node.toggle();
+ }
- this.addEvents({
- /**
- * @event click
- * Fires when this item is clicked
- * @param {Roo.menu.BaseItem} this
- * @param {Roo.EventObject} e
- */
- click: true,
- /**
- * @event activate
- * Fires when this item is activated
- * @param {Roo.menu.BaseItem} this
- */
- activate : true,
- /**
- * @event deactivate
- * Fires when this item is deactivated
- * @param {Roo.menu.BaseItem} this
- */
- deactivate : true
- });
+ this.fireEvent("click", this.node, e);
+ }else{
+ e.stopEvent();
+ }
+ },
- if(this.handler){
- this.on("click", this.handler, this.scope, true);
- }
-};
+ onDblClick : function(e){
+ e.preventDefault();
+ if(this.disabled){
+ return;
+ }
+ if(this.checkbox){
+ this.toggleCheck();
+ }
+ if(!this.animating && this.node.hasChildNodes()){
+ this.node.toggle();
+ }
+ this.fireEvent("dblclick", this.node, e);
+ },
-Roo.extend(Roo.menu.BaseItem, Roo.Component, {
- /**
- * @cfg {Function} handler
- * A function that will handle the click event of this menu item (defaults to undefined)
- */
- /**
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
- */
- canActivate : false,
-
- /**
- * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
- */
- hidden: false,
-
- /**
- * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
- */
- activeClass : "x-menu-item-active",
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
- */
- hideOnClick : true,
- /**
- * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
- */
- hideDelay : 100,
+ onCheckChange : function(){
+ var checked = this.checkbox.checked;
+ this.node.attributes.checked = checked;
+ this.fireEvent('checkchange', this.node, checked);
+ },
- // private
- ctype: "Roo.menu.BaseItem",
+ ecClick : function(e){
+ if(!this.animating && this.node.hasChildNodes()){
+ this.node.toggle();
+ }
+ },
- // private
- actionMode : "container",
+ startDrop : function(){
+ this.dropping = true;
+ },
- // private
- render : function(container, parentMenu){
- this.parentMenu = parentMenu;
- Roo.menu.BaseItem.superclass.render.call(this, container);
- this.container.menuItemId = this.id;
+ // delayed drop so the click event doesn't get fired on a drop
+ endDrop : function(){
+ setTimeout(function(){
+ this.dropping = false;
+ }.createDelegate(this), 50);
},
- // private
- onRender : function(container, position){
- this.el = Roo.get(this.el);
- container.dom.appendChild(this.el.dom);
+ expand : function(){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "";
},
- // private
- onClick : function(e){
- if(!this.disabled && this.fireEvent("click", this, e) !== false
- && this.parentMenu.fireEvent("itemclick", this, e) !== false){
- this.handleClick(e);
- }else{
- e.stopEvent();
+ focus : function(){
+ if(!this.node.preventHScroll){
+ try{this.anchor.focus();
+ }catch(e){}
+ }else if(!Roo.isIE){
+ try{
+ var noscroll = this.node.getOwnerTree().getTreeEl().dom;
+ var l = noscroll.scrollLeft;
+ this.anchor.focus();
+ noscroll.scrollLeft = l;
+ }catch(e){}
}
},
- // private
- activate : function(){
- if(this.disabled){
- return false;
+ toggleCheck : function(value){
+ var cb = this.checkbox;
+ if(cb){
+ cb.checked = (value === undefined ? !cb.checked : value);
}
- var li = this.container;
- li.addClass(this.activeClass);
- this.region = li.getRegion().adjust(2, 2, -2, -2);
- this.fireEvent("activate", this);
- return true;
},
- // private
- deactivate : function(){
- this.container.removeClass(this.activeClass);
- this.fireEvent("deactivate", this);
+ blur : function(){
+ try{
+ this.anchor.blur();
+ }catch(e){}
},
- // private
- shouldDeactivate : function(e){
- return !this.region || !this.region.contains(e.getPoint());
+ animExpand : function(callback){
+ var ct = Roo.get(this.ctNode);
+ ct.stopFx();
+ if(!this.node.hasChildNodes()){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "";
+ Roo.callback(callback);
+ return;
+ }
+ this.animating = true;
+ this.updateExpandIcon();
+
+ ct.slideIn('t', {
+ callback : function(){
+ this.animating = false;
+ Roo.callback(callback);
+ },
+ scope: this,
+ duration: this.node.ownerTree.duration || .25
+ });
},
- // private
- handleClick : function(e){
- if(this.hideOnClick){
- this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
- }
+ highlight : function(){
+ var tree = this.node.getOwnerTree();
+ Roo.fly(this.wrap).highlight(
+ tree.hlColor || "C3DAF9",
+ {endColor: tree.hlBaseColor}
+ );
},
- // private
- expandMenu : function(autoActivate){
- // do nothing
+ collapse : function(){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "none";
},
- // private
- hideMenu : function(){
- // do nothing
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.Adapter
- * @extends Roo.menu.BaseItem
- * @abstract
- * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
- * It provides basic rendering, activation management and enable/disable logic required to work in menus.
- * @constructor
- * Creates a new Adapter
- * @param {Object} config Configuration options
- */
-Roo.menu.Adapter = function(component, config){
- Roo.menu.Adapter.superclass.constructor.call(this, config);
- this.component = component;
-};
-Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
- // private
- canActivate : true,
+ animCollapse : function(callback){
+ var ct = Roo.get(this.ctNode);
+ ct.enableDisplayMode('block');
+ ct.stopFx();
- // private
- onRender : function(container, position){
- this.component.render(container);
- this.el = this.component.getEl();
+ this.animating = true;
+ this.updateExpandIcon();
+
+ ct.slideOut('t', {
+ callback : function(){
+ this.animating = false;
+ Roo.callback(callback);
+ },
+ scope: this,
+ duration: this.node.ownerTree.duration || .25
+ });
},
- // private
- activate : function(){
- if(this.disabled){
- return false;
- }
- this.component.focus();
- this.fireEvent("activate", this);
- return true;
+ getContainer : function(){
+ return this.ctNode;
},
- // private
- deactivate : function(){
- this.fireEvent("deactivate", this);
+ getEl : function(){
+ return this.wrap;
},
- // private
- disable : function(){
- this.component.disable();
- Roo.menu.Adapter.superclass.disable.call(this);
+ appendDDGhost : function(ghostNode){
+ ghostNode.appendChild(this.elNode.cloneNode(true));
},
- // private
- enable : function(){
- this.component.enable();
- Roo.menu.Adapter.superclass.enable.call(this);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ getDDRepairXY : function(){
+ return Roo.lib.Dom.getXY(this.iconNode);
+ },
-/**
- * @class Roo.menu.TextItem
- * @extends Roo.menu.BaseItem
- * Adds a static text string to a menu, usually used as either a heading or group separator.
- * Note: old style constructor with text is still supported.
- *
- * @constructor
- * Creates a new TextItem
- * @param {Object} cfg Configuration
- */
-Roo.menu.TextItem = function(cfg){
- if (typeof(cfg) == 'string') {
- this.text = cfg;
- } else {
- Roo.apply(this,cfg);
- }
-
- Roo.menu.TextItem.superclass.constructor.call(this);
-};
+ onRender : function(){
+ this.render();
+ },
-Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
- /**
- * @cfg {String} text Text to show on item.
- */
- text : '',
-
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
- */
- hideOnClick : false,
- /**
- * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
- */
- itemCls : "x-menu-text",
+ render : function(bulkRender){
+ var n = this.node, a = n.attributes;
+ var targetNode = n.parentNode ?
+ n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
- // private
- onRender : function(){
- var s = document.createElement("span");
- s.className = this.itemCls;
- s.innerHTML = this.text;
- this.el = s;
- Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ if(!this.rendered){
+ this.rendered = true;
-/**
- * @class Roo.menu.Separator
- * @extends Roo.menu.BaseItem
- * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
- * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.menu.Separator = function(config){
- Roo.menu.Separator.superclass.constructor.call(this, config);
-};
+ this.renderElements(n, a, targetNode, bulkRender);
-Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
- /**
- * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
- */
- itemCls : "x-menu-sep",
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
- */
- hideOnClick : false,
+ if(a.qtip){
+ if(this.textNode.setAttributeNS){
+ this.textNode.setAttributeNS("ext", "qtip", a.qtip);
+ if(a.qtipTitle){
+ this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
+ }
+ }else{
+ this.textNode.setAttribute("ext:qtip", a.qtip);
+ if(a.qtipTitle){
+ this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
+ }
+ }
+ }else if(a.qtipCfg){
+ a.qtipCfg.target = Roo.id(this.textNode);
+ Roo.QuickTips.register(a.qtipCfg);
+ }
+ this.initEvents();
+ if(!this.node.expanded){
+ this.updateExpandIcon();
+ }
+ }else{
+ if(bulkRender === true) {
+ targetNode.appendChild(this.wrap);
+ }
+ }
+ },
- // private
- onRender : function(li){
- var s = document.createElement("span");
- s.className = this.itemCls;
- s.innerHTML = " ";
- this.el = s;
- li.addClass("x-menu-sep-li");
- Roo.menu.Separator.superclass.onRender.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.menu.Item
- * @extends Roo.menu.BaseItem
- * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
- * display items. Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
- * activation and click handling.
- * @constructor
- * Creates a new Item
- * @param {Object} config Configuration options
- */
-Roo.menu.Item = function(config){
- Roo.menu.Item.superclass.constructor.call(this, config);
- if(this.menu){
- this.menu = Roo.menu.MenuMgr.get(this.menu);
- }
-};
-Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
- /**
- * @cfg {Roo.menu.Menu} menu
- * A Sub menu
- */
- /**
- * @cfg {String} text
- * The text to show on the menu item.
- */
- text: '',
- /**
- * @cfg {String} html to render in menu
- * The text to show on the menu item (HTML version).
- */
- html: '',
- /**
- * @cfg {String} icon
- * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
- */
- icon: undefined,
- /**
- * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
- */
- itemCls : "x-menu-item",
- /**
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
- */
- canActivate : true,
- /**
- * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
- */
- showDelay: 200,
- // doc'd in BaseItem
- hideDelay: 200,
-
- // private
- ctype: "Roo.menu.Item",
-
- // private
- onRender : function(container, position){
- var el = document.createElement("a");
- el.hideFocus = true;
- el.unselectable = "on";
- el.href = this.href || "#";
- if(this.hrefTarget){
- el.target = this.hrefTarget;
+ renderElements : function(n, a, targetNode, bulkRender)
+ {
+ // add some indent caching, this helps performance when rendering a large tree
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+ var t = n.getOwnerTree();
+ var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
+ if (typeof(n.attributes.html) != 'undefined') {
+ txt = n.attributes.html;
}
- el.className = this.itemCls + (this.menu ? " x-menu-item-arrow" : "") + (this.cls ? " " + this.cls : "");
-
- var html = this.html.length ? this.html : String.format('{0}',this.text);
-
- el.innerHTML = String.format(
- '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
- this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
- this.el = el;
- Roo.menu.Item.superclass.onRender.call(this, container, position);
- },
+ var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
+ var cb = typeof a.checked == 'boolean';
+ var href = a.href ? a.href : Roo.isGecko ? "" : "#";
+ var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
+ '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
+ '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
+ '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
+ cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
+ '<a hidefocus="on" href="',href,'" tabIndex="1" ',
+ a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "",
+ '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
+ '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+ "</li>"];
- /**
- * Sets the text to display in this menu item
- * @param {String} text The text to display
- * @param {Boolean} isHTML true to indicate text is pure html.
- */
- setText : function(text, isHTML){
- if (isHTML) {
- this.html = text;
- } else {
- this.text = text;
- this.html = '';
+ if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+ this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
+ n.nextSibling.ui.getEl(), buf.join(""));
+ }else{
+ this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
- if(this.rendered){
- var html = this.html.length ? this.html : String.format('{0}',this.text);
-
- this.el.update(String.format(
- '<img src="{0}" class="x-menu-item-icon {2}">' + html,
- this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
- this.parentMenu.autoWidth();
+
+ this.elNode = this.wrap.childNodes[0];
+ this.ctNode = this.wrap.childNodes[1];
+ var cs = this.elNode.childNodes;
+ this.indentNode = cs[0];
+ this.ecNode = cs[1];
+ this.iconNode = cs[2];
+ var index = 3;
+ if(cb){
+ this.checkbox = cs[3];
+ index++;
}
+ this.anchor = cs[index];
+ this.textNode = cs[index].firstChild;
},
- // private
- handleClick : function(e){
- if(!this.href){ // if no link defined, stop the event automatically
- e.stopEvent();
- }
- Roo.menu.Item.superclass.handleClick.apply(this, arguments);
+ getAnchor : function(){
+ return this.anchor;
},
- // private
- activate : function(autoExpand){
- if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
- this.focus();
- if(autoExpand){
- this.expandMenu();
- }
- }
- return true;
+ getTextEl : function(){
+ return this.textNode;
},
- // private
- shouldDeactivate : function(e){
- if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
- if(this.menu && this.menu.isVisible()){
- return !this.menu.getEl().getRegion().contains(e.getPoint());
- }
- return true;
- }
- return false;
+ getIconEl : function(){
+ return this.iconNode;
},
- // private
- deactivate : function(){
- Roo.menu.Item.superclass.deactivate.apply(this, arguments);
- this.hideMenu();
+ isChecked : function(){
+ return this.checkbox ? this.checkbox.checked : false;
},
- // private
- expandMenu : function(autoActivate){
- if(!this.disabled && this.menu){
- clearTimeout(this.hideTimer);
- delete this.hideTimer;
- if(!this.menu.isVisible() && !this.showTimer){
- this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
- }else if (this.menu.isVisible() && autoActivate){
- this.menu.tryActivate(0, 1);
+ updateExpandIcon : function(){
+ if(this.rendered){
+ var n = this.node, c1, c2;
+ var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
+ var hasChild = n.hasChildNodes();
+ if(hasChild){
+ if(n.expanded){
+ cls += "-minus";
+ c1 = "x-tree-node-collapsed";
+ c2 = "x-tree-node-expanded";
+ }else{
+ cls += "-plus";
+ c1 = "x-tree-node-expanded";
+ c2 = "x-tree-node-collapsed";
+ }
+ if(this.wasLeaf){
+ this.removeClass("x-tree-node-leaf");
+ this.wasLeaf = false;
+ }
+ if(this.c1 != c1 || this.c2 != c2){
+ Roo.fly(this.elNode).replaceClass(c1, c2);
+ this.c1 = c1; this.c2 = c2;
+ }
+ }else{
+ // this changes non-leafs into leafs if they have no children.
+ // it's not very rational behaviour..
+
+ if(!this.wasLeaf && this.node.leaf){
+ Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
+ delete this.c1;
+ delete this.c2;
+ this.wasLeaf = true;
+ }
+ }
+ var ecc = "x-tree-ec-icon "+cls;
+ if(this.ecc != ecc){
+ this.ecNode.className = ecc;
+ this.ecc = ecc;
}
}
},
- // private
- deferExpand : function(autoActivate){
- delete this.showTimer;
- this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
- if(autoActivate){
- this.menu.tryActivate(0, 1);
+ getChildIndent : function(){
+ if(!this.childIndent){
+ var buf = [];
+ var p = this.node;
+ while(p){
+ if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
+ if(!p.isLast()) {
+ buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
+ } else {
+ buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
+ }
+ }
+ p = p.parentNode;
+ }
+ this.childIndent = buf.join("");
}
+ return this.childIndent;
},
- // private
- hideMenu : function(){
- clearTimeout(this.showTimer);
- delete this.showTimer;
- if(!this.hideTimer && this.menu && this.menu.isVisible()){
- this.hideTimer = this.deferHide.defer(this.hideDelay, this);
+ renderIndent : function(){
+ if(this.rendered){
+ var indent = "";
+ var p = this.node.parentNode;
+ if(p){
+ indent = p.ui.getChildIndent();
+ }
+ if(this.indentMarkup != indent){ // don't rerender if not required
+ this.indentNode.innerHTML = indent;
+ this.indentMarkup = indent;
+ }
+ this.updateExpandIcon();
}
- },
+ }
+};
- // private
- deferHide : function(){
- delete this.hideTimer;
- this.menu.hide();
+Roo.tree.RootTreeNodeUI = function(){
+ Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
+ render : function(){
+ if(!this.rendered){
+ var targetNode = this.node.ownerTree.innerCt.dom;
+ this.node.expanded = true;
+ targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
+ this.wrap = this.ctNode = targetNode.firstChild;
+ }
+ },
+ collapse : function(){
+ },
+ expand : function(){
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
/**
- * @class Roo.menu.CheckItem
- * @extends Roo.menu.Item
- * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
+ * @class Roo.tree.TreeLoader
+ * @extends Roo.util.Observable
+ * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
+ * nodes from a specified URL. The response must be a javascript Array definition
+ * who's elements are node definition objects. eg:
+ * <pre><code>
+{ success : true,
+ data : [
+
+ { 'id': 1, 'text': 'A folder Node', 'leaf': false },
+ { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
+ ]
+}
+
+
+</code></pre>
+ * <br><br>
+ * The old style respose with just an array is still supported, but not recommended.
+ * <br><br>
+ *
+ * A server request is sent, and child nodes are loaded only when a node is expanded.
+ * The loading node's id is passed to the server under the parameter name "node" to
+ * enable the server to produce the correct child nodes.
+ * <br><br>
+ * To pass extra parameters, an event handler may be attached to the "beforeload"
+ * event, and the parameters specified in the TreeLoader's baseParams property:
+ * <pre><code>
+ myTreeLoader.on("beforeload", function(treeLoader, node) {
+ this.baseParams.category = node.attributes.category;
+ }, this);
+
+</code></pre>
+ *
+ * This would pass an HTTP parameter called "category" to the server containing
+ * the value of the Node's "category" attribute.
* @constructor
- * Creates a new CheckItem
- * @param {Object} config Configuration options
+ * Creates a new Treeloader.
+ * @param {Object} config A config object containing config properties.
*/
-Roo.menu.CheckItem = function(config){
- Roo.menu.CheckItem.superclass.constructor.call(this, config);
+Roo.tree.TreeLoader = function(config){
+ this.baseParams = {};
+ this.requestMethod = "POST";
+ Roo.apply(this, config);
+
this.addEvents({
+
/**
- * @event beforecheckchange
- * Fires before the checked value is set, providing an opportunity to cancel if needed
- * @param {Roo.menu.CheckItem} this
- * @param {Boolean} checked The new checked value that will be set
+ * @event beforeload
+ * Fires before a network request is made to retrieve the Json text which specifies a node's children.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+ * @param {Object} callback The callback function specified in the {@link #load} call.
*/
- "beforecheckchange" : true,
+ beforeload : true,
/**
- * @event checkchange
- * Fires after the checked value has been set
- * @param {Roo.menu.CheckItem} this
- * @param {Boolean} checked The checked value that was set
+ * @event load
+ * Fires when the node has been successfuly loaded.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+ * @param {Object} response The response object containing the data from the server.
*/
- "checkchange" : true
+ load : true,
+ /**
+ * @event loadexception
+ * Fires if the network request failed.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+ * @param {Object} response The response object containing the data from the server.
+ */
+ loadexception : true,
+ /**
+ * @event create
+ * Fires before a node is created, enabling you to return custom Node types
+ * @param {Object} This TreeLoader object.
+ * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
+ */
+ create : true
});
- if(this.checkHandler){
- this.on('checkchange', this.checkHandler, this.scope);
- }
+
+ Roo.tree.TreeLoader.superclass.constructor.call(this);
};
-Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
+
+Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
/**
- * @cfg {String} group
- * All check items with the same group name will automatically be grouped into a single-select
- * radio button group (defaults to '')
- */
+ * @cfg {String} dataUrl The URL from which to request a Json string which
+ * specifies an array of node definition object representing the child nodes
+ * to be loaded.
+ */
/**
- * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
- */
- itemCls : "x-menu-item x-menu-check-item",
+ * @cfg {String} requestMethod either GET or POST
+ * defaults to POST (due to BC)
+ * to be loaded.
+ */
/**
- * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
- */
- groupClass : "x-menu-group-item",
-
+ * @cfg {Object} baseParams (optional) An object containing properties which
+ * specify HTTP parameters to be passed to each request for child nodes.
+ */
/**
- * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false). Note that
- * if this checkbox is part of a radio group (group = true) only the last item in the group that is
- * initialized with checked = true will be rendered as checked.
- */
- checked: false,
+ * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
+ * created by this loader. If the attributes sent by the server have an attribute in this object,
+ * they take priority.
+ */
+ /**
+ * @cfg {Object} uiProviders (optional) An object containing properties which
+ *
+ * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
+ * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
+ * <i>uiProvider</i> attribute of a returned child node is a string rather
+ * than a reference to a TreeNodeUI implementation, this that string value
+ * is used as a property name in the uiProviders object. You can define the provider named
+ * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
+ */
+ uiProviders : {},
- // private
- ctype: "Roo.menu.CheckItem",
+ /**
+ * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
+ * child nodes before loading.
+ */
+ clearOnLoad : true,
- // private
- onRender : function(c){
- Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
- if(this.group){
- this.el.addClass(this.groupClass);
- }
- Roo.menu.MenuMgr.registerCheckable(this);
- if(this.checked){
- this.checked = false;
- this.setChecked(true, true);
+ /**
+ * @cfg {String} root (optional) Default to false. Use this to read data from an object
+ * property on loading, rather than expecting an array. (eg. more compatible to a standard
+ * Grid query { data : [ .....] }
+ */
+
+ root : false,
+ /**
+ * @cfg {String} queryParam (optional)
+ * Name of the query as it will be passed on the querystring (defaults to 'node')
+ * eg. the request will be ?node=[id]
+ */
+
+
+ queryParam: false,
+
+ /**
+ * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
+ * This is called automatically when a node is expanded, but may be used to reload
+ * a node (or append new children if the {@link #clearOnLoad} option is false.)
+ * @param {Roo.tree.TreeNode} node
+ * @param {Function} callback
+ */
+ load : function(node, callback){
+ if(this.clearOnLoad){
+ while(node.firstChild){
+ node.removeChild(node.firstChild);
+ }
}
- },
-
- // private
- destroy : function(){
- if(this.rendered){
- Roo.menu.MenuMgr.unregisterCheckable(this);
+ if(node.attributes.children){ // preloaded json children
+ var cs = node.attributes.children;
+ for(var i = 0, len = cs.length; i < len; i++){
+ node.appendChild(this.createNode(cs[i]));
+ }
+ if(typeof callback == "function"){
+ callback();
+ }
+ }else if(this.dataUrl){
+ this.requestData(node, callback);
}
- Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
},
- /**
- * Set the checked state of this item
- * @param {Boolean} checked The new checked value
- * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
- */
- setChecked : function(state, suppressEvent){
- if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
- if(this.container){
- this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
- }
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent("checkchange", this, state);
+ getParams: function(node){
+ var buf = [], bp = this.baseParams;
+ for(var key in bp){
+ if(typeof bp[key] != "function"){
+ buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
}
}
+ var n = this.queryParam === false ? 'node' : this.queryParam;
+ buf.push(n + "=", encodeURIComponent(node.id));
+ return buf.join("");
},
- // private
- handleClick : function(e){
- if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
- this.setChecked(!this.checked);
- }
- Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.DateItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.DatPicker} component.
- * @constructor
- * Creates a new DateItem
- * @param {Object} config Configuration options
- */
-Roo.menu.DateItem = function(config){
- Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
- /** The Roo.DatePicker object @type Roo.DatePicker */
- this.picker = this.component;
- this.addEvents({select: true});
-
- this.picker.on("render", function(picker){
- picker.getEl().swallowEvent("click");
- picker.container.addClass("x-menu-date-item");
- });
+ requestData : function(node, callback){
+ if(this.fireEvent("beforeload", this, node, callback) !== false){
+ this.transId = Roo.Ajax.request({
+ method:this.requestMethod,
+ url: this.dataUrl||this.url,
+ success: this.handleResponse,
+ failure: this.handleFailure,
+ scope: this,
+ argument: {callback: callback, node: node},
+ params: this.getParams(node)
+ });
+ }else{
+ // if the load is cancelled, make sure we notify
+ // the node that we are done
+ if(typeof callback == "function"){
+ callback();
+ }
+ }
+ },
- this.picker.on("select", this.onSelect, this);
-};
+ isLoading : function(){
+ return this.transId ? true : false;
+ },
+
+ abort : function(){
+ if(this.isLoading()){
+ Roo.Ajax.abort(this.transId);
+ }
+ },
-Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
// private
- onSelect : function(picker, date){
- this.fireEvent("select", this, date, picker);
- Roo.menu.DateItem.superclass.handleClick.call(this);
+ createNode : function(attr)
+ {
+ // apply baseAttrs, nice idea Corey!
+ if(this.baseAttrs){
+ Roo.applyIf(attr, this.baseAttrs);
+ }
+ if(this.applyLoader !== false){
+ attr.loader = this;
+ }
+ // uiProvider = depreciated..
+
+ if(typeof(attr.uiProvider) == 'string'){
+ attr.uiProvider = this.uiProviders[attr.uiProvider] ||
+ /** eval:var:attr */ eval(attr.uiProvider);
+ }
+ if(typeof(this.uiProviders['default']) != 'undefined') {
+ attr.uiProvider = this.uiProviders['default'];
+ }
+
+ this.fireEvent('create', this, attr);
+
+ attr.leaf = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
+ return(attr.leaf ?
+ new Roo.tree.TreeNode(attr) :
+ new Roo.tree.AsyncTreeNode(attr));
+ },
+
+ processResponse : function(response, node, callback)
+ {
+ var json = response.responseText;
+ try {
+
+ var o = Roo.decode(json);
+
+ if (this.root === false && typeof(o.success) != undefined) {
+ this.root = 'data'; // the default behaviour for list like data..
+ }
+
+ if (this.root !== false && !o.success) {
+ // it's a failure condition.
+ var a = response.argument;
+ this.fireEvent("loadexception", this, a.node, response);
+ Roo.log("Load failed - should have a handler really");
+ return;
+ }
+
+
+
+ if (this.root !== false) {
+ o = o[this.root];
+ }
+
+ for(var i = 0, len = o.length; i < len; i++){
+ var n = this.createNode(o[i]);
+ if(n){
+ node.appendChild(n);
+ }
+ }
+ if(typeof callback == "function"){
+ callback(this, node);
+ }
+ }catch(e){
+ this.handleFailure(response);
+ }
+ },
+
+ handleResponse : function(response){
+ this.transId = false;
+ var a = response.argument;
+ this.processResponse(response, a.node, a.callback);
+ this.fireEvent("load", this, a.node, response);
+ },
+
+ handleFailure : function(response)
+ {
+ // should handle failure better..
+ this.transId = false;
+ var a = response.argument;
+ this.fireEvent("loadexception", this, a.node, response);
+ if(typeof a.callback == "function"){
+ a.callback(this, a.node);
+ }
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
- * @class Roo.menu.ColorItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.ColorPalette} component.
- * @constructor
- * Creates a new ColorItem
- * @param {Object} config Configuration options
+* @class Roo.tree.TreeFilter
+* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
+* @param {TreePanel} tree
+* @param {Object} config (optional)
*/
-Roo.menu.ColorItem = function(config){
- Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
- /** The Roo.ColorPalette object @type Roo.ColorPalette */
- this.palette = this.component;
- this.relayEvents(this.palette, ["select"]);
- if(this.selectHandler){
- this.on('select', this.selectHandler, this.scope);
- }
+Roo.tree.TreeFilter = function(tree, config){
+ this.tree = tree;
+ this.filtered = {};
+ Roo.apply(this, config);
};
-Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.DateMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
- * @constructor
- * Creates a new DateMenu
- * @param {Object} config Configuration options
- */
-Roo.menu.DateMenu = function(config){
- Roo.menu.DateMenu.superclass.constructor.call(this, config);
- this.plain = true;
- var di = new Roo.menu.DateItem(config);
- this.add(di);
+Roo.tree.TreeFilter.prototype = {
+ clearBlank:false,
+ reverse:false,
+ autoClear:false,
+ remove:false,
+
+ /**
+ * Filter the data by a specific attribute.
+ * @param {String/RegExp} value Either string that the attribute value
+ * should start with or a RegExp to test against the attribute
+ * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
+ * @param {TreeNode} startNode (optional) The node to start the filter at.
+ */
+ filter : function(value, attr, startNode){
+ attr = attr || "text";
+ var f;
+ if(typeof value == "string"){
+ var vlen = value.length;
+ // auto clear empty filter
+ if(vlen == 0 && this.clearBlank){
+ this.clear();
+ return;
+ }
+ value = value.toLowerCase();
+ f = function(n){
+ return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
+ };
+ }else if(value.exec){ // regex?
+ f = function(n){
+ return value.test(n.attributes[attr]);
+ };
+ }else{
+ throw 'Illegal filter type, must be string or regex';
+ }
+ this.filterBy(f, null, startNode);
+ },
+
/**
- * The {@link Roo.DatePicker} instance for this DateMenu
- * @type DatePicker
+ * Filter by a function. The passed function will be called with each
+ * node in the tree (or from the startNode). If the function returns true, the node is kept
+ * otherwise it is filtered. If a node is filtered, its children are also filtered.
+ * @param {Function} fn The filter function
+ * @param {Object} scope (optional) The scope of the function (defaults to the current node)
*/
- this.picker = di.picker;
+ filterBy : function(fn, scope, startNode){
+ startNode = startNode || this.tree.root;
+ if(this.autoClear){
+ this.clear();
+ }
+ var af = this.filtered, rv = this.reverse;
+ var f = function(n){
+ if(n == startNode){
+ return true;
+ }
+ if(af[n.id]){
+ return false;
+ }
+ var m = fn.call(scope || n, n);
+ if(!m || rv){
+ af[n.id] = n;
+ n.ui.hide();
+ return false;
+ }
+ return true;
+ };
+ startNode.cascade(f);
+ if(this.remove){
+ for(var id in af){
+ if(typeof id != "function"){
+ var n = af[id];
+ if(n && n.parentNode){
+ n.parentNode.removeChild(n);
+ }
+ }
+ }
+ }
+ },
+
/**
- * @event select
- * @param {DatePicker} picker
- * @param {Date} date
+ * Clears the current filter. Note: with the "remove" option
+ * set a filter cannot be cleared.
*/
- this.relayEvents(di, ["select"]);
- this.on('beforeshow', function(){
- if(this.picker){
- this.picker.hideMonthPicker(false);
+ clear : function(){
+ var t = this.tree;
+ var af = this.filtered;
+ for(var id in af){
+ if(typeof id != "function"){
+ var n = af[id];
+ if(n){
+ n.ui.show();
+ }
+ }
}
- }, this);
+ this.filtered = {};
+ }
};
-Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
- cls:'x-date-menu'
-});/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.menu.ColorMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
+ * @class Roo.tree.TreeSorter
+ * Provides sorting of nodes in a TreePanel
+ *
+ * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
+ * @cfg {String} property The named attribute on the node to sort by (defaults to text)
+ * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
+ * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
+ * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
+ * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
* @constructor
- * Creates a new ColorMenu
- * @param {Object} config Configuration options
+ * @param {TreePanel} tree
+ * @param {Object} config
*/
-Roo.menu.ColorMenu = function(config){
- Roo.menu.ColorMenu.superclass.constructor.call(this, config);
- this.plain = true;
- var ci = new Roo.menu.ColorItem(config);
- this.add(ci);
- /**
- * The {@link Roo.ColorPalette} instance for this ColorMenu
- * @type ColorPalette
- */
- this.palette = ci.palette;
- /**
- * @event select
- * @param {ColorPalette} palette
- * @param {String} color
- */
- this.relayEvents(ci, ["select"]);
+Roo.tree.TreeSorter = function(tree, config){
+ Roo.apply(this, config);
+ tree.on("beforechildrenrendered", this.doSort, this);
+ tree.on("append", this.updateSort, this);
+ tree.on("insert", this.updateSort, this);
+
+ var dsc = this.dir && this.dir.toLowerCase() == "desc";
+ var p = this.property || "text";
+ var sortType = this.sortType;
+ var fs = this.folderSort;
+ var cs = this.caseSensitive === true;
+ var leafAttr = this.leafAttr || 'leaf';
+
+ this.sortFn = function(n1, n2){
+ if(fs){
+ if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
+ return 1;
+ }
+ if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
+ return -1;
+ }
+ }
+ var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
+ var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
+ if(v1 < v2){
+ return dsc ? +1 : -1;
+ }else if(v1 > v2){
+ return dsc ? -1 : +1;
+ }else{
+ return 0;
+ }
+ };
};
-Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
+
+Roo.tree.TreeSorter.prototype = {
+ doSort : function(node){
+ node.sort(this.sortFn);
+ },
+
+ compareNodes : function(n1, n2){
+ return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
+ },
+
+ updateSort : function(tree, node){
+ if(node.childrenRendered){
+ this.doSort.defer(1, this, [node]);
+ }
+ }
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
-/**
- * @class Roo.form.TextItem
- * @extends Roo.BoxComponent
- * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
- * @constructor
- * Creates a new TextItem
- * @param {Object} config Configuration options
- */
-Roo.form.TextItem = function(config){
- Roo.form.TextItem.superclass.constructor.call(this, config);
+
+if(Roo.dd.DropZone){
+
+Roo.tree.TreeDropZone = function(tree, config){
+ this.allowParentInsert = false;
+ this.allowContainerDrop = false;
+ this.appendOnly = false;
+ Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
+ this.tree = tree;
+ this.lastInsertClass = "x-tree-no-status";
+ this.dragOverData = {};
};
-Roo.extend(Roo.form.TextItem, Roo.BoxComponent, {
+Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
+ ddGroup : "TreeDD",
+ scroll: true,
- /**
- * @cfg {String} tag the tag for this item (default div)
- */
- tag : 'div',
- /**
- * @cfg {String} html the content for this item
- */
- html : '',
+ expandDelay : 1000,
- getAutoCreate : function()
- {
- var cfg = {
- id: this.id,
- tag: this.tag,
- html: this.html,
- cls: 'x-form-item'
- };
-
- return cfg;
-
+ expandNode : function(node){
+ if(node.hasChildNodes() && !node.isExpanded()){
+ node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
+ }
},
- onRender : function(ct, position)
+ queueExpand : function(node){
+ this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+ },
+
+ cancelExpand : function(){
+ if(this.expandProcId){
+ clearTimeout(this.expandProcId);
+ this.expandProcId = false;
+ }
+ },
+
+ isValidDropPoint : function(n, pt, dd, e, data){
+ if(!n || !data){ return false; }
+ var targetNode = n.node;
+ var dropNode = data.node;
+ // default drop rules
+ if(!(targetNode && targetNode.isTarget && pt)){
+ return false;
+ }
+ if(pt == "append" && targetNode.allowChildren === false){
+ return false;
+ }
+ if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
+ return false;
+ }
+ if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
+ return false;
+ }
+ // reuse the object
+ var overEvent = this.dragOverData;
+ overEvent.tree = this.tree;
+ overEvent.target = targetNode;
+ overEvent.data = data;
+ overEvent.point = pt;
+ overEvent.source = dd;
+ overEvent.rawEvent = e;
+ overEvent.dropNode = dropNode;
+ overEvent.cancel = false;
+ var result = this.tree.fireEvent("nodedragover", overEvent);
+ return overEvent.cancel === false && result !== false;
+ },
+
+ getDropPoint : function(e, n, dd)
{
- Roo.form.TextItem.superclass.onRender.call(this, ct, position);
+ var tn = n.node;
+ if(tn.isRoot){
+ return tn.allowChildren !== false ? "append" : false; // always append for root
+ }
+ var dragEl = n.ddel;
+ var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
+ var y = Roo.lib.Event.getPageY(e);
+ //var noAppend = tn.allowChildren === false || tn.isLeaf();
- if(!this.el){
- var cfg = this.getAutoCreate();
- if(!cfg.name){
- cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
- }
- if (!cfg.name.length) {
- delete cfg.name;
- }
- this.el = ct.createChild(cfg, position);
+ // we may drop nodes anywhere, as long as allowChildren has not been set to false..
+ var noAppend = tn.allowChildren === false;
+ if(this.appendOnly || tn.parentNode.allowChildren === false){
+ return noAppend ? false : "append";
+ }
+ var noBelow = false;
+ if(!this.allowParentInsert){
+ noBelow = tn.hasChildNodes() && tn.isExpanded();
+ }
+ var q = (b - t) / (noAppend ? 2 : 3);
+ if(y >= t && y < (t + q)){
+ return "above";
+ }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
+ return "below";
+ }else{
+ return "append";
}
},
- /*
- * setHTML
- * @param {String} html update the Contents of the element.
- */
- setHTML : function(html)
+
+ onNodeEnter : function(n, dd, e, data)
{
- this.fieldEl.dom.innerHTML = html;
- }
+ this.cancelExpand();
+ },
-});/*
+ onNodeOver : function(n, dd, e, data)
+ {
+
+ var pt = this.getDropPoint(e, n, dd);
+ var node = n.node;
+
+ // auto node expand check
+ if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
+ this.queueExpand(node);
+ }else if(pt != "append"){
+ this.cancelExpand();
+ }
+
+ // set the insert point style on the target node
+ var returnCls = this.dropNotAllowed;
+ if(this.isValidDropPoint(n, pt, dd, e, data)){
+ if(pt){
+ var el = n.ddel;
+ var cls;
+ if(pt == "above"){
+ returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
+ cls = "x-tree-drag-insert-above";
+ }else if(pt == "below"){
+ returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
+ cls = "x-tree-drag-insert-below";
+ }else{
+ returnCls = "x-tree-drop-ok-append";
+ cls = "x-tree-drag-append";
+ }
+ if(this.lastInsertClass != cls){
+ Roo.fly(el).replaceClass(this.lastInsertClass, cls);
+ this.lastInsertClass = cls;
+ }
+ }
+ }
+ return returnCls;
+ },
+
+ onNodeOut : function(n, dd, e, data){
+
+ this.cancelExpand();
+ this.removeDropIndicators(n);
+ },
+
+ onNodeDrop : function(n, dd, e, data){
+ var point = this.getDropPoint(e, n, dd);
+ var targetNode = n.node;
+ targetNode.ui.startDrop();
+ if(!this.isValidDropPoint(n, point, dd, e, data)){
+ targetNode.ui.endDrop();
+ return false;
+ }
+ // first try to find the drop node
+ var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
+ var dropEvent = {
+ tree : this.tree,
+ target: targetNode,
+ data: data,
+ point: point,
+ source: dd,
+ rawEvent: e,
+ dropNode: dropNode,
+ cancel: !dropNode
+ };
+ var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
+ if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
+ targetNode.ui.endDrop();
+ return false;
+ }
+ // allow target changing
+ targetNode = dropEvent.target;
+ if(point == "append" && !targetNode.isExpanded()){
+ targetNode.expand(false, null, function(){
+ this.completeDrop(dropEvent);
+ }.createDelegate(this));
+ }else{
+ this.completeDrop(dropEvent);
+ }
+ return true;
+ },
+
+ completeDrop : function(de){
+ var ns = de.dropNode, p = de.point, t = de.target;
+ if(!(ns instanceof Array)){
+ ns = [ns];
+ }
+ var n;
+ for(var i = 0, len = ns.length; i < len; i++){
+ n = ns[i];
+ if(p == "above"){
+ t.parentNode.insertBefore(n, t);
+ }else if(p == "below"){
+ t.parentNode.insertBefore(n, t.nextSibling);
+ }else{
+ t.appendChild(n);
+ }
+ }
+ n.ui.focus();
+ if(this.tree.hlDrop){
+ n.ui.highlight();
+ }
+ t.ui.endDrop();
+ this.tree.fireEvent("nodedrop", de);
+ },
+
+ afterNodeMoved : function(dd, data, e, targetNode, dropNode){
+ if(this.tree.hlDrop){
+ dropNode.ui.focus();
+ dropNode.ui.highlight();
+ }
+ this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
+ },
+
+ getTree : function(){
+ return this.tree;
+ },
+
+ removeDropIndicators : function(n){
+ if(n && n.ddel){
+ var el = n.ddel;
+ Roo.fly(el).removeClass([
+ "x-tree-drag-insert-above",
+ "x-tree-drag-insert-below",
+ "x-tree-drag-append"]);
+ this.lastInsertClass = "_noclass";
+ }
+ },
+
+ beforeDragDrop : function(target, e, id){
+ this.cancelExpand();
+ return true;
+ },
+
+ afterRepair : function(data){
+ if(data && Roo.enableFx){
+ data.node.ui.highlight();
+ }
+ this.hideProxy();
+ }
+
+});
+
+}
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
+
+if(Roo.dd.DragZone){
+Roo.tree.TreeDragZone = function(tree, config){
+ Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
+ this.tree = tree;
+};
+
+Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
+ ddGroup : "TreeDD",
+
+ onBeforeDrag : function(data, e){
+ var n = data.node;
+ return n && n.draggable && !n.disabled;
+ },
+
+
+ onInitDrag : function(e){
+ var data = this.dragData;
+ this.tree.getSelectionModel().select(data.node);
+ this.proxy.update("");
+ data.node.ui.appendDDGhost(this.proxy.ghost.dom);
+ this.tree.fireEvent("startdrag", this.tree, data.node, e);
+ },
+
+ getRepairXY : function(e, data){
+ return data.node.ui.getDDRepairXY();
+ },
+
+ onEndDrag : function(data, e){
+ this.tree.fireEvent("enddrag", this.tree, data.node, e);
+
+
+ },
+
+ onValidDrop : function(dd, e, id){
+ this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
+ this.hideProxy();
+ },
+
+ beforeInvalidDrop : function(e, id){
+ // this scrolls the original position back into view
+ var sm = this.tree.getSelectionModel();
+ sm.clearSelections();
+ sm.select(this.dragData.node);
+ }
+});
+}/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
/**
- * @class Roo.form.Field
- * @extends Roo.BoxComponent
- * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
+ * @class Roo.tree.TreeEditor
+ * @extends Roo.Editor
+ * Provides editor functionality for inline tree node editing. Any valid {@link Roo.form.Field} can be used
+ * as the editor field.
* @constructor
- * Creates a new Field
- * @param {Object} config Configuration options
+ * @param {Object} config (used to be the tree panel.)
+ * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
+ *
+ * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
+ * @cfg {Roo.form.TextField} field [required] The field configuration
+ *
+ *
*/
-Roo.form.Field = function(config){
- Roo.form.Field.superclass.constructor.call(this, config);
+Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
+ var tree = config;
+ var field;
+ if (oldconfig) { // old style..
+ field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
+ } else {
+ // new style..
+ tree = config.tree;
+ config.field = config.field || {};
+ config.field.xtype = 'TextField';
+ field = Roo.factory(config.field, Roo.form);
+ }
+ config = config || {};
+
+
+ this.addEvents({
+ /**
+ * @event beforenodeedit
+ * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
+ * false from the handler of this event.
+ * @param {Editor} this
+ * @param {Roo.tree.Node} node
+ */
+ "beforenodeedit" : true
+ });
+
+ //Roo.log(config);
+ Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
+
+ this.tree = tree;
+
+ tree.on('beforeclick', this.beforeNodeClick, this);
+ tree.getTreeEl().on('mousedown', this.hide, this);
+ this.on('complete', this.updateNode, this);
+ this.on('beforestartedit', this.fitToTree, this);
+ this.on('startedit', this.bindScroll, this, {delay:10});
+ this.on('specialkey', this.onSpecialKey, this);
};
-Roo.extend(Roo.form.Field, Roo.BoxComponent, {
- /**
- * @cfg {String} fieldLabel Label to use when rendering a form.
- */
- /**
- * @cfg {String} labelSeparator the ':' after a field label (default :) = set it to empty string to hide the field label.
- */
- /**
- * @cfg {String} qtip Mouse over tip
- */
-
- /**
- * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
- */
- invalidClass : "x-form-invalid",
- /**
- * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
- */
- invalidText : "The value in this field is invalid",
- /**
- * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
- */
- focusClass : "x-form-focus",
- /**
- * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
- automatic validation (defaults to "keyup").
- */
- validationEvent : "keyup",
- /**
- * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
- */
- validateOnBlur : true,
- /**
- * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
- */
- validationDelay : 250,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "20", autocomplete: "off"})
- */
- defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
+Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
/**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
+ * @cfg {String} alignment
+ * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
*/
- fieldClass : "x-form-field",
+ alignment: "l-l",
+ // inherit
+ autoSize: false,
/**
- * @cfg {String} msgTarget The location where error text should display. Should be one of the following values (defaults to 'qtip'):
- *<pre>
-Value Description
------------ ----------------------------------------------------------------------
-qtip Display a quick tip when the user hovers over the field
-title Display a default browser title attribute popup
-under Add a block div beneath the field containing the error text
-side Add an error icon to the right of the field with a popup on hover
-[element id] Add the error text directly to the innerHTML of the specified element
-</pre>
+ * @cfg {Boolean} hideEl
+ * True to hide the bound element while the editor is displayed (defaults to false)
*/
- msgTarget : 'qtip',
+ hideEl : false,
/**
- * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
+ * @cfg {String} cls
+ * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
*/
- msgFx : 'normal',
-
+ cls: "x-small-editor x-tree-editor",
/**
- * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
+ * @cfg {Boolean} shim
+ * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
*/
- readOnly : false,
-
+ shim:false,
+ // inherit
+ shadow:"frame",
/**
- * @cfg {Boolean} disabled True to disable the field (defaults to false).
+ * @cfg {Number} maxWidth
+ * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
+ * the containing tree element's size, it will be automatically limited for you to the container width, taking
+ * scroll and client offsets into account prior to each edit.
*/
- disabled : false,
+ maxWidth: 250,
- /**
- * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
- */
- inputType : undefined,
-
- /**
- * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
- */
- tabIndex : undefined,
-
- // private
- isFormField : true,
+ editDelay : 350,
// private
- hasFocus : false,
- /**
- * @property {Roo.Element} fieldEl
- * Element Containing the rendered Field (with label etc.)
- */
- /**
- * @cfg {Mixed} value A value to initialize this field with.
- */
- value : undefined,
+ fitToTree : function(ed, el){
+ var td = this.tree.getTreeEl().dom, nd = el.dom;
+ if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
+ td.scrollLeft = nd.offsetLeft;
+ }
+ var w = Math.min(
+ this.maxWidth,
+ (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
+ this.setSize(w, '');
+
+ return this.fireEvent('beforenodeedit', this, this.editNode);
+
+ },
- /**
- * @cfg {String} name The field's HTML name attribute.
- */
- /**
- * @cfg {String} cls A CSS class to apply to the field's underlying element.
- */
// private
- loadedValue : false,
-
-
- // private ??
- initComponent : function(){
- Roo.form.Field.superclass.initComponent.call(this);
- this.addEvents({
- /**
- * @event focus
- * Fires when this field receives input focus.
- * @param {Roo.form.Field} this
- */
- focus : true,
- /**
- * @event blur
- * Fires when this field loses input focus.
- * @param {Roo.form.Field} this
- */
- blur : true,
- /**
- * @event specialkey
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
- * {@link Roo.EventObject#getKey} to determine which key was pressed.
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event object
- */
- specialkey : true,
- /**
- * @event change
- * Fires just before the field blurs if the field value has changed.
- * @param {Roo.form.Field} this
- * @param {Mixed} newValue The new value
- * @param {Mixed} oldValue The original value
- */
- change : true,
- /**
- * @event invalid
- * Fires after the field has been marked as invalid.
- * @param {Roo.form.Field} this
- * @param {String} msg The validation message
- */
- invalid : true,
- /**
- * @event valid
- * Fires after the field has been validated with no errors.
- * @param {Roo.form.Field} this
- */
- valid : true,
- /**
- * @event keyup
- * Fires after the key up
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event Object
- */
- keyup : true
- });
+ triggerEdit : function(node){
+ this.completeEdit();
+ this.editNode = node;
+ this.startEdit(node.ui.textNode, node.text);
},
- /**
- * Returns the name attribute of the field if available
- * @return {String} name The field name
- */
- getName: function(){
- return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+ // private
+ bindScroll : function(){
+ this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
},
// private
- onRender : function(ct, position){
- Roo.form.Field.superclass.onRender.call(this, ct, position);
- if(!this.el){
- var cfg = this.getAutoCreate();
- if(!cfg.name){
- cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
- }
- if (!cfg.name.length) {
- delete cfg.name;
- }
- if(this.inputType){
- cfg.type = this.inputType;
- }
- this.el = ct.createChild(cfg, position);
- }
- var type = this.el.dom.type;
- if(type){
- if(type == 'password'){
- type = 'text';
- }
- this.el.addClass('x-form-'+type);
- }
- if(this.readOnly){
- this.el.dom.readOnly = true;
- }
- if(this.tabIndex !== undefined){
- this.el.dom.setAttribute('tabIndex', this.tabIndex);
+ beforeNodeClick : function(node, e){
+ var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
+ this.lastClick = new Date();
+ if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
+ e.stopEvent();
+ this.triggerEdit(node);
+ return false;
}
-
- this.el.addClass([this.fieldClass, this.cls]);
- this.initValue();
+ return true;
},
- /**
- * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
- * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
- * @return {Roo.form.Field} this
- */
- applyTo : function(target){
- this.allowDomMove = false;
- this.el = Roo.get(target);
- this.render(this.el.dom.parentNode);
- return this;
+ // private
+ updateNode : function(ed, value){
+ this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
+ this.editNode.setText(value);
},
// private
- initValue : function(){
- if(this.value !== undefined){
- this.setValue(this.value);
- }else if(this.el.dom.value.length > 0){
- this.setValue(this.el.dom.value);
- }
- },
-
- /**
- * Returns true if this field has been changed since it was originally loaded and is not disabled.
- * DEPRICATED - it never worked well - use hasChanged/resetHasChanged.
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
- return String(this.getValue()) !== String(this.originalValue);
- },
-
- /**
- * stores the current value in loadedValue
- */
- resetHasChanged : function()
- {
- this.loadedValue = String(this.getValue());
- },
- /**
- * checks the current value against the 'loaded' value.
- * Note - will return false if 'resetHasChanged' has not been called first.
- */
- hasChanged : function()
- {
- if(this.disabled || this.readOnly) {
- return false;
- }
- return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
- },
-
-
-
- // private
- afterRender : function(){
- Roo.form.Field.superclass.afterRender.call(this);
- this.initEvents();
- },
-
- // private
- fireKey : function(e){
- //Roo.log('field ' + e.getKey());
- if(e.isNavKeyPress()){
- this.fireEvent("specialkey", this, e);
- }
- },
-
- /**
- * Resets the current field value to the originally loaded value and clears any validation messages
- */
- reset : function(){
- this.setValue(this.resetValue);
- this.originalValue = this.getValue();
- this.clearInvalid();
- },
-
- // private
- initEvents : function(){
- // safari killled keypress - so keydown is now used..
- this.el.on("keydown" , this.fireKey, this);
- this.el.on("focus", this.onFocus, this);
- this.el.on("blur", this.onBlur, this);
- this.el.relayEvent('keyup', this);
-
- // reference to original value for reset
- this.originalValue = this.getValue();
- this.resetValue = this.getValue();
- },
-
- // private
- onFocus : function(){
- if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
- this.el.addClass(this.focusClass);
- }
- if(!this.hasFocus){
- this.hasFocus = true;
- this.startValue = this.getValue();
- this.fireEvent("focus", this);
+ onHide : function(){
+ Roo.tree.TreeEditor.superclass.onHide.call(this);
+ if(this.editNode){
+ this.editNode.ui.focus();
}
},
- beforeBlur : Roo.emptyFn,
-
// private
- onBlur : function(){
- this.beforeBlur();
- if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
- this.el.removeClass(this.focusClass);
- }
- this.hasFocus = false;
- if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
- this.validate();
- }
- var v = this.getValue();
- if(String(v) !== String(this.startValue)){
- this.fireEvent('change', this, v, this.startValue);
- }
- this.fireEvent("blur", this);
- },
-
- /**
- * Returns whether or not the field value is currently valid
- * @param {Boolean} preventMark True to disable marking the field invalid
- * @return {Boolean} True if the value is valid, else false
- */
- isValid : function(preventMark){
- if(this.disabled){
- return true;
- }
- var restore = this.preventMark;
- this.preventMark = preventMark === true;
- var v = this.validateValue(this.processValue(this.getRawValue()));
- this.preventMark = restore;
- return v;
- },
-
- /**
- * Validates the field value
- * @return {Boolean} True if the value is valid, else false
- */
- validate : function(){
- if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
- this.clearInvalid();
- return true;
+ onSpecialKey : function(field, e){
+ var k = e.getKey();
+ if(k == e.ESC){
+ e.stopEvent();
+ this.cancelEdit();
+ }else if(k == e.ENTER && !e.hasModifier()){
+ e.stopEvent();
+ this.completeEdit();
}
- return false;
- },
-
- processValue : function(value){
- return value;
- },
+ }
+});//<Script type="text/javascript">
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * Not documented??? - probably should be...
+ */
- // private
- // Subclasses should provide the validation implementation by overriding this
- validateValue : function(value){
- return true;
- },
+Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
+ //focus: Roo.emptyFn, // prevent odd scrolling behavior
+
+ renderElements : function(n, a, targetNode, bulkRender){
+ //consel.log("renderElements?");
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
- /**
- * Mark this field as invalid
- * @param {String} msg The validation message
- */
- markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
+ var t = n.getOwnerTree();
+ var tid = Pman.Tab.Document_TypesTree.tree.el.id;
- var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+ var cols = t.columns;
+ var bw = t.borderWidth;
+ var c = cols[0];
+ var href = a.href ? a.href : Roo.isGecko ? "" : "#";
+ var cb = typeof a.checked == "boolean";
+ var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
+ var colcls = 'x-t-' + tid + '-c0';
+ var buf = [
+ '<li class="x-tree-node">',
+
+
+ '<div class="x-tree-node-el ', a.cls,'">',
+ // extran...
+ '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
+
+
+ '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
+ '<img src="', this.emptyIcon, '" class="x-tree-ec-icon " />',
+ '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
+ (a.icon ? ' x-tree-node-inline-icon' : ''),
+ (a.iconCls ? ' '+a.iconCls : ''),
+ '" unselectable="on" />',
+ (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' +
+ (a.checked ? 'checked="checked" />' : ' />')) : ''),
+
+ '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
+ (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
+ '<span unselectable="on" qtip="' + tx + '">',
+ tx,
+ '</span></a>' ,
+ '</div>',
+ '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
+ (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
+ ];
+ for(var i = 1, len = cols.length; i < len; i++){
+ c = cols[i];
+ colcls = 'x-t-' + tid + '-c' +i;
+ tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
+ buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
+ '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
+ "</div>");
+ }
+
+ buf.push(
+ '</a>',
+ '<div class="x-clear"></div></div>',
+ '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+ "</li>");
- obj.el.addClass(this.invalidClass);
- msg = msg || this.invalidText;
- switch(this.msgTarget){
- case 'qtip':
- obj.el.dom.qtip = msg;
- obj.el.dom.qclass = 'x-form-invalid-tip';
- if(Roo.QuickTips){ // fix for floating editors interacting with DND
- Roo.QuickTips.enable();
- }
- break;
- case 'title':
- this.el.dom.title = msg;
- break;
- case 'under':
- if(!this.errorEl){
- var elp = this.el.findParent('.x-form-element', 5, true);
- this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
- this.errorEl.setWidth(elp.getWidth(true)-20);
- }
- this.errorEl.update(msg);
- Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
- break;
- case 'side':
- if(!this.errorIcon){
- var elp = this.el.findParent('.x-form-element', 5, true);
- this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
- }
- this.alignErrorIcon();
- this.errorIcon.dom.qtip = msg;
- this.errorIcon.dom.qclass = 'x-form-invalid-tip';
- this.errorIcon.show();
- this.on('resize', this.alignErrorIcon, this);
- break;
- default:
- var t = Roo.getDom(this.msgTarget);
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
- break;
+ if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+ this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
+ n.nextSibling.ui.getEl(), buf.join(""));
+ }else{
+ this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
- this.fireEvent('invalid', this, msg);
- },
-
- // private
- alignErrorIcon : function(){
- this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
- },
-
- /**
- * Clear any invalid styles/messages for this field
- */
- clearInvalid : function(){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
+ var el = this.wrap.firstChild;
+ this.elRow = el;
+ this.elNode = el.firstChild;
+ this.ranchor = el.childNodes[1];
+ this.ctNode = this.wrap.childNodes[1];
+ var cs = el.firstChild.childNodes;
+ this.indentNode = cs[0];
+ this.ecNode = cs[1];
+ this.iconNode = cs[2];
+ var index = 3;
+ if(cb){
+ this.checkbox = cs[3];
+ index++;
}
- var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+ this.anchor = cs[index];
- obj.el.removeClass(this.invalidClass);
- switch(this.msgTarget){
- case 'qtip':
- obj.el.dom.qtip = '';
- break;
- case 'title':
- this.el.dom.title = '';
- break;
- case 'under':
- if(this.errorEl){
- Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
- }
- break;
- case 'side':
- if(this.errorIcon){
- this.errorIcon.dom.qtip = '';
- this.errorIcon.hide();
- this.un('resize', this.alignErrorIcon, this);
- }
- break;
- default:
- var t = Roo.getDom(this.msgTarget);
- t.innerHTML = '';
- t.style.display = 'none';
- break;
- }
- this.fireEvent('valid', this);
- },
-
- /**
- * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
- * @return {Mixed} value The field value
- */
- getRawValue : function(){
- var v = this.el.getValue();
+ this.textNode = cs[index].firstChild;
- return v;
- },
-
- /**
- * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
- * @return {Mixed} value The field value
- */
- getValue : function(){
- var v = this.el.getValue();
-
- return v;
+ //el.on("click", this.onClick, this);
+ //el.on("dblclick", this.onDblClick, this);
+
+
+ // console.log(this);
},
+ initEvents : function(){
+ Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
+
+
+ var a = this.ranchor;
- /**
- * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}.
- * @param {Mixed} value The value to set
- */
- setRawValue : function(v){
- return this.el.dom.value = (v === null || v === undefined ? '' : v);
- },
+ var el = Roo.get(a);
- /**
- * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
- * @param {Mixed} value The value to set
- */
- setValue : function(v){
- this.value = v;
- if(this.rendered){
- this.el.dom.value = (v === null || v === undefined ? '' : v);
- this.validate();
+ if(Roo.isOpera){ // opera render bug ignores the CSS
+ el.setStyle("text-decoration", "none");
}
- },
- adjustSize : function(w, h){
- var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
- s.width = this.adjustWidth(this.el.dom.tagName, s.width);
- return s;
+ el.on("click", this.onClick, this);
+ el.on("dblclick", this.onDblClick, this);
+ el.on("contextmenu", this.onContextMenu, this);
+
},
-
- adjustWidth : function(tag, w){
- tag = tag.toLowerCase();
- if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
- if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
- if(tag == 'input'){
- return w + 2;
- }
- if(tag == 'textarea'){
- return w-2;
- }
- }else if(Roo.isOpera){
- if(tag == 'input'){
- return w + 2;
- }
- if(tag == 'textarea'){
- return w-2;
- }
- }
+
+ /*onSelectedChange : function(state){
+ if(state){
+ this.focus();
+ this.addClass("x-tree-selected");
+ }else{
+ //this.blur();
+ this.removeClass("x-tree-selected");
}
- return w;
- }
-});
-
-
-// anything other than normal should be considered experimental
-Roo.form.Field.msgFx = {
- normal : {
- show: function(msgEl, f){
- msgEl.setDisplayed('block');
- },
-
- hide : function(msgEl, f){
- msgEl.setDisplayed(false).update('');
+ },*/
+ addClass : function(cls){
+ if(this.elRow){
+ Roo.fly(this.elRow).addClass(cls);
}
+
},
-
- slide : {
- show: function(msgEl, f){
- msgEl.slideIn('t', {stopFx:true});
- },
-
- hide : function(msgEl, f){
- msgEl.slideOut('t', {stopFx:true,useDisplay:true});
+
+
+ removeClass : function(cls){
+ if(this.elRow){
+ Roo.fly(this.elRow).removeClass(cls);
}
- },
+ }
- slideRight : {
- show: function(msgEl, f){
- msgEl.fixDisplay();
- msgEl.alignTo(f.el, 'tl-tr');
- msgEl.slideIn('l', {stopFx:true});
- },
+
+
+});//<Script type="text/javascript">
- hide : function(msgEl, f){
- msgEl.slideOut('l', {stopFx:true,useDisplay:true});
- }
- }
-};/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.form.TextField
- * @extends Roo.form.Field
- * Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base
- * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
+ * @class Roo.tree.ColumnTree
+ * @extends Roo.tree.TreePanel
+ * @cfg {Object} columns Including width, header, renderer, cls, dataIndex
+ * @cfg {int} borderWidth compined right/left border allowance
* @constructor
- * Creates a new TextField
- * @param {Object} config Configuration options
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
*/
-Roo.form.TextField = function(config){
- Roo.form.TextField.superclass.constructor.call(this, config);
- this.addEvents({
+Roo.tree.ColumnTree = function(el, config)
+{
+ Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
+ this.addEvents({
/**
- * @event autosize
- * Fires when the autosize function is triggered. The field may or may not have actually changed size
- * according to the default logic, but this event provides a hook for the developer to apply additional
- * logic at runtime to resize the field if needed.
- * @param {Roo.form.Field} this This text field
- * @param {Number} width The new field width
- */
- autosize : true
+ * @event resize
+ * Fire this event on a container when it resizes
+ * @param {int} w Width
+ * @param {int} h Height
+ */
+ "resize" : true
});
+ this.on('resize', this.onResize, this);
};
-Roo.extend(Roo.form.TextField, Roo.form.Field, {
- /**
- * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
- */
- grow : false,
- /**
- * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
- */
- growMin : 30,
- /**
- * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
- */
- growMax : 800,
- /**
- * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
- */
- vtype : null,
- /**
- * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
- */
- maskRe : null,
- /**
- * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
- */
- disableKeyFilter : false,
- /**
- * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
- */
- allowBlank : true,
- /**
- * @cfg {Number} minLength Minimum input field length required (defaults to 0)
- */
- minLength : 0,
- /**
- * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
- */
- maxLength : Number.MAX_VALUE,
- /**
- * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
- */
- minLengthText : "The minimum length for this field is {0}",
- /**
- * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
- */
- maxLengthText : "The maximum length for this field is {0}",
+Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
+ //lines:false,
+
+
+ borderWidth: Roo.isBorderBox ? 0 : 2,
+ headEls : false,
+
+ render : function(){
+ // add the header.....
+
+ Roo.tree.ColumnTree.superclass.render.apply(this);
+
+ this.el.addClass('x-column-tree');
+
+ this.headers = this.el.createChild(
+ {cls:'x-tree-headers'},this.innerCt.dom);
+
+ var cols = this.columns, c;
+ var totalWidth = 0;
+ this.headEls = [];
+ var len = cols.length;
+ for(var i = 0; i < len; i++){
+ c = cols[i];
+ totalWidth += c.width;
+ this.headEls.push(this.headers.createChild({
+ cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
+ cn: {
+ cls:'x-tree-hd-text',
+ html: c.header
+ },
+ style:'width:'+(c.width-this.borderWidth)+'px;'
+ }));
+ }
+ this.headers.createChild({cls:'x-clear'});
+ // prevent floats from wrapping when clipped
+ this.headers.setWidth(totalWidth);
+ //this.innerCt.setWidth(totalWidth);
+ this.innerCt.setStyle({ overflow: 'auto' });
+ this.onResize(this.width, this.height);
+
+
+ },
+ onResize : function(w,h)
+ {
+ this.height = h;
+ this.width = w;
+ // resize cols..
+ this.innerCt.setWidth(this.width);
+ this.innerCt.setHeight(this.height-20);
+
+ // headers...
+ var cols = this.columns, c;
+ var totalWidth = 0;
+ var expEl = false;
+ var len = cols.length;
+ for(var i = 0; i < len; i++){
+ c = cols[i];
+ if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
+ // it's the expander..
+ expEl = this.headEls[i];
+ continue;
+ }
+ totalWidth += c.width;
+
+ }
+ if (expEl) {
+ expEl.setWidth( ((w - totalWidth)-this.borderWidth - 20));
+ }
+ this.headers.setWidth(w-20);
+
+
+
+
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.Menu
+ * @extends Roo.util.Observable
+ * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
+ * A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class
+ * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
+ * @constructor
+ * Creates a new Menu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Menu = function(config){
+
+ Roo.menu.Menu.superclass.constructor.call(this, config);
+
+ this.id = this.id || Roo.id();
+ this.addEvents({
+ /**
+ * @event beforeshow
+ * Fires before this menu is displayed
+ * @param {Roo.menu.Menu} this
+ */
+ beforeshow : true,
+ /**
+ * @event beforehide
+ * Fires before this menu is hidden
+ * @param {Roo.menu.Menu} this
+ */
+ beforehide : true,
+ /**
+ * @event show
+ * Fires after this menu is displayed
+ * @param {Roo.menu.Menu} this
+ */
+ show : true,
+ /**
+ * @event hide
+ * Fires after this menu is hidden
+ * @param {Roo.menu.Menu} this
+ */
+ hide : true,
+ /**
+ * @event click
+ * Fires when this menu is clicked (or when the enter key is pressed while it is active)
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ * @param {Roo.EventObject} e
+ */
+ click : true,
+ /**
+ * @event mouseover
+ * Fires when the mouse is hovering over this menu
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.EventObject} e
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ */
+ mouseover : true,
+ /**
+ * @event mouseout
+ * Fires when the mouse exits this menu
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.EventObject} e
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ */
+ mouseout : true,
+ /**
+ * @event itemclick
+ * Fires when a menu item contained in this menu is clicked
+ * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
+ * @param {Roo.EventObject} e
+ */
+ itemclick: true
+ });
+ if (this.registerMenu) {
+ Roo.menu.MenuMgr.register(this);
+ }
+
+ var mis = this.items;
+ this.items = new Roo.util.MixedCollection();
+ if(mis){
+ this.add.apply(this, mis);
+ }
+};
+
+Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
/**
- * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
+ * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
*/
- selectOnFocus : false,
- /**
- * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space
- */
- allowLeadingSpace : false,
+ minWidth : 120,
/**
- * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
+ * for bottom-right shadow (defaults to "sides")
*/
- blankText : "This field is required",
+ shadow : "sides",
/**
- * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
- * If available, this function will be called only after the basic validators all return true, and will be passed the
- * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
+ * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
+ * this menu (defaults to "tl-tr?")
*/
- validator : null,
+ subMenuAlign : "tl-tr?",
/**
- * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
- * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
- * current field value. If the test fails, the field will be marked invalid using {@link #regexText}.
+ * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
+ * relative to its element of origin (defaults to "tl-bl?")
*/
- regex : null,
+ defaultAlign : "tl-bl?",
/**
- * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
+ * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
*/
- regexText : "",
+ allowOtherMenus : false,
/**
- * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
+ * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
*/
- emptyText : null,
-
+ registerMenu : true,
+
+ hidden:true,
// private
- initEvents : function()
- {
- if (this.emptyText) {
- this.el.attr('placeholder', this.emptyText);
+ render : function(){
+ if(this.el){
+ return;
}
-
- Roo.form.TextField.superclass.initEvents.call(this);
- if(this.validationEvent == 'keyup'){
- this.validationTask = new Roo.util.DelayedTask(this.validate, this);
- this.el.on('keyup', this.filterValidation, this);
+ var el = this.el = new Roo.Layer({
+ cls: "x-menu",
+ shadow:this.shadow,
+ constrain: false,
+ parentEl: this.parentEl || document.body,
+ zindex:15000
+ });
+
+ this.keyNav = new Roo.menu.MenuNav(this);
+
+ if(this.plain){
+ el.addClass("x-menu-plain");
}
- else if(this.validationEvent !== false){
- this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
+ if(this.cls){
+ el.addClass(this.cls);
}
+ // generic focus element
+ this.focusEl = el.createChild({
+ tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
+ });
+ var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
+ //disabling touch- as it's causing issues ..
+ //ul.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
+ ul.on('click' , this.onClick, this);
- if(this.selectOnFocus){
- this.on("focus", this.preFocus, this);
- }
- if (!this.allowLeadingSpace) {
- this.on('blur', this.cleanLeadingSpace, this);
- }
-
- if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
- this.el.on("keypress", this.filterKeys, this);
- }
- if(this.grow){
- this.el.on("keyup", this.onKeyUp, this, {buffer:50});
- this.el.on("click", this.autoSize, this);
+
+ ul.on("mouseover", this.onMouseOver, this);
+ ul.on("mouseout", this.onMouseOut, this);
+ this.items.each(function(item){
+ if (item.hidden) {
+ return;
+ }
+
+ var li = document.createElement("li");
+ li.className = "x-menu-list-item";
+ ul.dom.appendChild(li);
+ item.render(li, this);
+ }, this);
+ this.ul = ul;
+ this.autoWidth();
+ },
+
+ // private
+ autoWidth : function(){
+ var el = this.el, ul = this.ul;
+ if(!el){
+ return;
}
- if(this.el.is('input[type=password]') && Roo.isSafari){
- this.el.on('keydown', this.SafariOnKeyDown, this);
+ var w = this.width;
+ if(w){
+ el.setWidth(w);
+ }else if(Roo.isIE){
+ el.setWidth(this.minWidth);
+ var t = el.dom.offsetWidth; // force recalc
+ el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
}
},
- processValue : function(value){
- if(this.stripCharsRe){
- var newValue = value.replace(this.stripCharsRe, '');
- if(newValue !== value){
- this.setRawValue(newValue);
- return newValue;
+ // private
+ delayAutoWidth : function(){
+ if(this.rendered){
+ if(!this.awTask){
+ this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
}
+ this.awTask.delay(20);
}
- return value;
},
- filterValidation : function(e){
- if(!e.isNavKeyPress()){
- this.validationTask.delay(this.validationDelay);
+ // private
+ findTargetItem : function(e){
+ var t = e.getTarget(".x-menu-list-item", this.ul, true);
+ if(t && t.menuItemId){
+ return this.items.get(t.menuItemId);
}
},
// private
- onKeyUp : function(e){
- if(!e.isNavKeyPress()){
- this.autoSize();
+ onClick : function(e){
+ Roo.log("menu.onClick");
+ var t = this.findTargetItem(e);
+ if(!t){
+ return;
}
- },
- // private - clean the leading white space
- cleanLeadingSpace : function(e)
- {
- if ( this.inputType == 'file') {
+ Roo.log(e);
+ if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
+ if(t == this.activeItem && t.shouldDeactivate(e)){
+ this.activeItem.deactivate();
+ delete this.activeItem;
+ return;
+ }
+ if(t.canActivate){
+ this.setActiveItem(t, true);
+ }
return;
+
+
}
- this.setValue((this.getValue() + '').replace(/^\s+/,''));
+ t.onClick(e);
+ this.fireEvent("click", this, t, e);
},
- /**
- * Resets the current field value to the originally-loaded value and clears any validation messages.
- *
- */
- reset : function(){
- Roo.form.TextField.superclass.reset.call(this);
-
- },
+
// private
- preFocus : function(){
-
- if(this.selectOnFocus){
- this.el.dom.select();
+ setActiveItem : function(item, autoExpand){
+ if(item != this.activeItem){
+ if(this.activeItem){
+ this.activeItem.deactivate();
+ }
+ this.activeItem = item;
+ item.activate(autoExpand);
+ }else if(autoExpand){
+ item.expandMenu();
}
},
-
// private
- filterKeys : function(e){
- var k = e.getKey();
- if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
- return;
- }
- var c = e.getCharCode(), cc = String.fromCharCode(c);
- if(Roo.isIE && (e.isSpecialKey() || !cc)){
- return;
- }
- if(!this.maskRe.test(cc)){
- e.stopEvent();
+ tryActivate : function(start, step){
+ var items = this.items;
+ for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
+ var item = items.get(i);
+ if(!item.disabled && item.canActivate){
+ this.setActiveItem(item, false);
+ return item;
+ }
}
+ return false;
},
- setValue : function(v){
-
- Roo.form.TextField.superclass.setValue.apply(this, arguments);
-
- this.autoSize();
- },
-
- /**
- * Validates a value according to the field's validation rules and marks the field as invalid
- * if the validation fails
- * @param {Mixed} value The value to validate
- * @return {Boolean} True if the value is valid, else false
- */
- validateValue : function(value){
- if(value.length < 1) { // if it's blank
- if(this.allowBlank){
- this.clearInvalid();
- return true;
- }else{
- this.markInvalid(this.blankText);
- return false;
- }
- }
- if(value.length < this.minLength){
- this.markInvalid(String.format(this.minLengthText, this.minLength));
- return false;
- }
- if(value.length > this.maxLength){
- this.markInvalid(String.format(this.maxLengthText, this.maxLength));
- return false;
- }
- if(this.vtype){
- var vt = Roo.form.VTypes;
- if (value.trim() != value) { // trim before checking email (and other stuf??)
- value = value.trim();
- this.el.dom.value = value;
- }
-
- if(!vt[this.vtype](value, this)){
- this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
- return false;
+ // private
+ onMouseOver : function(e){
+ var t;
+ if(t = this.findTargetItem(e)){
+ if(t.canActivate && !t.disabled){
+ this.setActiveItem(t, true);
}
}
- if(typeof this.validator == "function"){
- var msg = this.validator(value);
- if(msg !== true){
- this.markInvalid(msg);
- return false;
+ this.fireEvent("mouseover", this, e, t);
+ },
+
+ // private
+ onMouseOut : function(e){
+ var t;
+ if(t = this.findTargetItem(e)){
+ if(t == this.activeItem && t.shouldDeactivate(e)){
+ this.activeItem.deactivate();
+ delete this.activeItem;
}
}
- if(this.regex && !this.regex.test(value)){
- this.markInvalid(this.regexText);
- return false;
- }
- return true;
+ this.fireEvent("mouseout", this, e, t);
},
/**
- * Selects text in this field
- * @param {Number} start (optional) The index where the selection should start (defaults to 0)
- * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
+ * Read-only. Returns true if the menu is currently displayed, else false.
+ * @type Boolean
*/
- selectText : function(start, end){
- var v = this.getRawValue();
- if(v.length > 0){
- start = start === undefined ? 0 : start;
- end = end === undefined ? v.length : end;
- var d = this.el.dom;
- if(d.setSelectionRange){
- d.setSelectionRange(start, end);
- }else if(d.createTextRange){
- var range = d.createTextRange();
- range.moveStart("character", start);
- range.moveEnd("character", v.length-end);
- range.select();
- }
- }
+ isVisible : function(){
+ return this.el && !this.hidden;
},
/**
- * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
- * This only takes effect if grow = true, and fires the autosize event.
+ * Displays this menu relative to another element
+ * @param {String/HTMLElement/Roo.Element} element The element to align to
+ * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
+ * the element (defaults to this.defaultAlign)
+ * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
*/
- autoSize : function(){
- if(!this.grow || !this.rendered){
- return;
+ show : function(el, pos, parentMenu){
+ this.parentMenu = parentMenu;
+ if(!this.el){
+ this.render();
}
- if(!this.metrics){
- this.metrics = Roo.util.TextMetrics.createInstance(this.el);
- }
- var el = this.el;
- var v = el.dom.value;
- var d = document.createElement('div');
- d.appendChild(document.createTextNode(v));
- v = d.innerHTML;
- d = null;
- v += " ";
- var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
- this.el.setWidth(w);
- this.fireEvent("autosize", this, w);
+ this.fireEvent("beforeshow", this);
+ this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
},
-
- // private
- SafariOnKeyDown : function(event)
- {
- // this is a workaround for a password hang bug on chrome/ webkit.
-
- var isSelectAll = false;
-
- if(this.el.dom.selectionEnd > 0){
- isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
- }
- if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
- event.preventDefault();
- this.setValue('');
- return;
+
+ /**
+ * Displays this menu at a specific xy position
+ * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
+ * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ */
+ showAt : function(xy, parentMenu, /* private: */_e){
+ this.parentMenu = parentMenu;
+ if(!this.el){
+ this.render();
}
-
- // skip handling paste
- if(isSelectAll && event.getCharCode() > 31 && !(event.ctrlKey && event.getCharCode() == 86)){ // backspace and delete key
-
- event.preventDefault();
- // this is very hacky as keydown always get's upper case.
-
- var cc = String.fromCharCode(event.getCharCode());
-
-
- this.setValue( event.shiftKey ? cc : cc.toLowerCase());
-
+ if(_e !== false){
+ this.fireEvent("beforeshow", this);
+ xy = this.el.adjustForConstraints(xy);
}
-
-
- }
-});Roo.form.Password = function(config){
- Roo.form.Password.superclass.constructor.call(this, config);
-
- this.inputType = 'password';
-};
-
-Roo.extend(Roo.form.Password, Roo.form.TextField, {
- onRender : function(ct, position)
- {
- Roo.form.Password.superclass.onRender.call(this, ct, position);
-
- this.parentEl().addClass('form-password');
-
- this.wrap = this.el.wrap({
- cls : 'password-wrap'
- });
-
- this.toggle = this.wrap.createChild({
- tag : 'Button',
- cls : 'password-toggle'
- });
-
-
- this.toggleEl().addClass('password-hidden');
-
- this.toggleEl().on('click', this.onToggleClick, this);;
- },
-
- parentEl : function()
- {
- return this.el.findParent('.x-form-element', 5, true);
+ this.el.setXY(xy);
+ this.el.show();
+ this.hidden = false;
+ this.focus();
+ this.fireEvent("show", this);
},
- toggleEl: function()
- {
- return this.parentEl().select('button.password-toggle',true).first();
+ focus : function(){
+ if(!this.hidden){
+ this.doFocus.defer(50, this);
+ }
},
- onToggleClick : function(e)
- {
- var input = this.el;
- var toggle = this.toggleEl();
-
- toggle.removeClass(['password-visible', 'password-hidden']);
+ doFocus : function(){
+ if(!this.hidden){
+ this.focusEl.focus();
+ }
+ },
- if(input.attr('type') == 'password') {
- input.attr('type', 'text');
- toggle.addClass('password-visible');
+ /**
+ * Hides this menu and optionally all parent menus
+ * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
+ */
+ hide : function(deep){
+ if(this.el && this.isVisible()){
+ this.fireEvent("beforehide", this);
+ if(this.activeItem){
+ this.activeItem.deactivate();
+ this.activeItem = null;
+ }
+ this.el.hide();
+ this.hidden = true;
+ this.fireEvent("hide", this);
}
- else {
- input.attr('type', 'password');
- toggle.addClass('password-hidden');
+ if(deep === true && this.parentMenu){
+ this.parentMenu.hide(true);
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Hidden
- * @extends Roo.form.TextField
- * Simple Hidden element used on forms
- *
- * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
- *
- * @constructor
- * Creates a new Hidden form element.
- * @param {Object} config Configuration options
- */
-
-
-
-// easy hidden field...
-Roo.form.Hidden = function(config){
- Roo.form.Hidden.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
- fieldLabel: '',
- inputType: 'hidden',
- width: 50,
- allowBlank: true,
- labelSeparator: '',
- hidden: true,
- itemCls : 'x-form-item-display-none'
-
+ },
-});
+ /**
+ * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
+ * Any of the following are valid:
+ * <ul>
+ * <li>Any menu item object based on {@link Roo.menu.Item}</li>
+ * <li>An HTMLElement object which will be converted to a menu item</li>
+ * <li>A menu item config object that will be created as a new menu item</li>
+ * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
+ * it will be converted into a {@link Roo.menu.TextItem} and added</li>
+ * </ul>
+ * Usage:
+ * <pre><code>
+// Create the menu
+var menu = new Roo.menu.Menu();
+// Create a menu item to add by reference
+var menuItem = new Roo.menu.Item({ text: 'New Item!' });
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.TriggerField
- * @extends Roo.form.TextField
- * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
- * The trigger has no default action, so you must assign a function to implement the trigger click handler by
- * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
- * for which you can provide a custom implementation. For example:
- * <pre><code>
-var trigger = new Roo.form.TriggerField();
-trigger.onTriggerClick = myTriggerFn;
-trigger.applyTo('my-field');
+// Add a bunch of items at once using different methods.
+// Only the last item added will be returned.
+var item = menu.add(
+ menuItem, // add existing item by ref
+ 'Dynamic Item', // new TextItem
+ '-', // new separator
+ { text: 'Config Item' } // new item by config
+);
</code></pre>
- *
- * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
- * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
- * @constructor
- * Create a new TriggerField.
- * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
- * to the base TextField)
- */
-Roo.form.TriggerField = function(config){
- this.mimicing = false;
- Roo.form.TriggerField.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
- /**
- * @cfg {String} triggerClass A CSS class to apply to the trigger
- */
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "16", autocomplete: "off"})
- */
- defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
- /**
- * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
+ * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
+ * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
*/
- hideTrigger:false,
-
- /** @cfg {Boolean} grow @hide */
- /** @cfg {Number} growMin @hide */
- /** @cfg {Number} growMax @hide */
+ add : function(){
+ var a = arguments, l = a.length, item;
+ for(var i = 0; i < l; i++){
+ var el = a[i];
+ if ((typeof(el) == "object") && el.xtype && el.xns) {
+ el = Roo.factory(el, Roo.menu);
+ }
+
+ if(el.render){ // some kind of Item
+ item = this.addItem(el);
+ }else if(typeof el == "string"){ // string
+ if(el == "separator" || el == "-"){
+ item = this.addSeparator();
+ }else{
+ item = this.addText(el);
+ }
+ }else if(el.tagName || el.el){ // element
+ item = this.addElement(el);
+ }else if(typeof el == "object"){ // must be menu item config?
+ item = this.addMenuItem(el);
+ }
+ }
+ return item;
+ },
/**
- * @hide
- * @method
+ * Returns this menu's underlying {@link Roo.Element} object
+ * @return {Roo.Element} The element
*/
- autoSize: Roo.emptyFn,
- // private
- monitorTab : true,
- // private
- deferHeight : true,
-
-
- actionMode : 'wrap',
- // private
- onResize : function(w, h){
- Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
- if(typeof w == 'number'){
- var x = w - this.trigger.getWidth();
- this.el.setWidth(this.adjustWidth('input', x));
- this.trigger.setStyle('left', x+'px');
+ getEl : function(){
+ if(!this.el){
+ this.render();
}
+ return this.el;
},
- // private
- adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
- // private
- getResizeEl : function(){
- return this.wrap;
+ /**
+ * Adds a separator bar to the menu
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addSeparator : function(){
+ return this.addItem(new Roo.menu.Separator());
},
- // private
- getPositionEl : function(){
- return this.wrap;
+ /**
+ * Adds an {@link Roo.Element} object to the menu
+ * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addElement : function(el){
+ return this.addItem(new Roo.menu.BaseItem(el));
},
- // private
- alignErrorIcon : function(){
- this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+ /**
+ * Adds an existing object based on {@link Roo.menu.Item} to the menu
+ * @param {Roo.menu.Item} item The menu item to add
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addItem : function(item){
+ this.items.add(item);
+ if(this.ul){
+ var li = document.createElement("li");
+ li.className = "x-menu-list-item";
+ this.ul.dom.appendChild(li);
+ item.render(li, this);
+ this.delayAutoWidth();
+ }
+ return item;
},
- // private
- onRender : function(ct, position){
- Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
- this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
- this.trigger = this.wrap.createChild(this.triggerConfig ||
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
- if(this.hideTrigger){
- this.trigger.setDisplayed(false);
- }
- this.initTrigger();
- if(!this.width){
- this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
+ /**
+ * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
+ * @param {Object} config A MenuItem config object
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addMenuItem : function(config){
+ if(!(config instanceof Roo.menu.Item)){
+ if(typeof config.checked == "boolean"){ // must be check menu item config?
+ config = new Roo.menu.CheckItem(config);
+ }else{
+ config = new Roo.menu.Item(config);
+ }
}
+ return this.addItem(config);
},
- // private
- initTrigger : function(){
- this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
- this.trigger.addClassOnOver('x-form-trigger-over');
- this.trigger.addClassOnClick('x-form-trigger-click');
+ /**
+ * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
+ * @param {String} text The text to display in the menu item
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addText : function(text){
+ return this.addItem(new Roo.menu.TextItem({ text : text }));
},
- // private
- onDestroy : function(){
- if(this.trigger){
- this.trigger.removeAllListeners();
- this.trigger.remove();
- }
- if(this.wrap){
- this.wrap.remove();
+ /**
+ * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
+ * @param {Number} index The index in the menu's list of current items where the new item should be inserted
+ * @param {Roo.menu.Item} item The menu item to add
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ insert : function(index, item){
+ this.items.insert(index, item);
+ if(this.ul){
+ var li = document.createElement("li");
+ li.className = "x-menu-list-item";
+ this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
+ item.render(li, this);
+ this.delayAutoWidth();
}
- Roo.form.TriggerField.superclass.onDestroy.call(this);
+ return item;
},
- // private
- onFocus : function(){
- Roo.form.TriggerField.superclass.onFocus.call(this);
- if(!this.mimicing){
- this.wrap.addClass('x-trigger-wrap-focus');
- this.mimicing = true;
- Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
- if(this.monitorTab){
- this.el.on("keydown", this.checkTab, this);
- }
- }
+ /**
+ * Removes an {@link Roo.menu.Item} from the menu and destroys the object
+ * @param {Roo.menu.Item} item The menu item to remove
+ */
+ remove : function(item){
+ this.items.removeKey(item.id);
+ item.destroy();
},
- // private
- checkTab : function(e){
- if(e.getKey() == e.TAB){
- this.triggerBlur();
+ /**
+ * Removes and destroys all items in the menu
+ */
+ removeAll : function(){
+ var f;
+ while(f = this.items.first()){
+ this.remove(f);
}
- },
+ }
+});
- // private
- onBlur : function(){
- // do nothing
- },
+// MenuNav is a private utility class used internally by the Menu
+Roo.menu.MenuNav = function(menu){
+ Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
+ this.scope = this.menu = menu;
+};
- // private
- mimicBlur : function(e, t){
- if(!this.wrap.contains(t) && this.validateBlur()){
- this.triggerBlur();
+Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
+ doRelay : function(e, h){
+ var k = e.getKey();
+ if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
+ this.menu.tryActivate(0, 1);
+ return false;
}
+ return h.call(this.scope || this, e, this.menu);
},
- // private
- triggerBlur : function(){
- this.mimicing = false;
- Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
- if(this.monitorTab){
- this.el.un("keydown", this.checkTab, this);
+ up : function(e, m){
+ if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
+ m.tryActivate(m.items.length-1, -1);
}
- this.wrap.removeClass('x-trigger-wrap-focus');
- Roo.form.TriggerField.superclass.onBlur.call(this);
- },
-
- // private
- // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
- validateBlur : function(e, t){
- return true;
},
- // private
- onDisable : function(){
- Roo.form.TriggerField.superclass.onDisable.call(this);
- if(this.wrap){
- this.wrap.addClass('x-item-disabled');
+ down : function(e, m){
+ if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
+ m.tryActivate(0, 1);
}
},
- // private
- onEnable : function(){
- Roo.form.TriggerField.superclass.onEnable.call(this);
- if(this.wrap){
- this.wrap.removeClass('x-item-disabled');
+ right : function(e, m){
+ if(m.activeItem){
+ m.activeItem.expandMenu(true);
}
},
- // private
- onShow : function(){
- var ae = this.getActionEl();
-
- if(ae){
- ae.dom.style.display = '';
- ae.dom.style.visibility = 'visible';
+ left : function(e, m){
+ m.hide();
+ if(m.parentMenu && m.parentMenu.activeItem){
+ m.parentMenu.activeItem.activate();
}
},
- // private
-
- onHide : function(){
- var ae = this.getActionEl();
- ae.dom.style.display = 'none';
- },
-
- /**
- * The function that should handle the trigger's click event. This method does nothing by default until overridden
- * by an implementing function.
- * @method
- * @param {EventObject} e
- */
- onTriggerClick : Roo.emptyFn
-});
-
-// TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
-// to be extended by an implementing class. For an example of implementing this class, see the custom
-// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
-Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
- initComponent : function(){
- Roo.form.TwinTriggerField.superclass.initComponent.call(this);
-
- this.triggerConfig = {
- tag:'span', cls:'x-form-twin-triggers', cn:[
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
- ]};
- },
-
- getTrigger : function(index){
- return this.triggers[index];
- },
-
- initTrigger : function(){
- var ts = this.trigger.select('.x-form-trigger', true);
- this.wrap.setStyle('overflow', 'hidden');
- var triggerField = this;
- ts.each(function(t, all, index){
- t.hide = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = 'none';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- t.show = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = '';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- var triggerIndex = 'Trigger'+(index+1);
-
- if(this['hide'+triggerIndex]){
- t.dom.style.display = 'none';
- }
- t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
- t.addClassOnOver('x-form-trigger-over');
- t.addClassOnClick('x-form-trigger-click');
- }, this);
- this.triggers = ts.elements;
- },
-
- onTrigger1Click : Roo.emptyFn,
- onTrigger2Click : Roo.emptyFn
+ enter : function(e, m){
+ if(m.activeItem){
+ e.stopPropagation();
+ m.activeItem.onClick(e);
+ m.fireEvent("click", this, m.activeItem);
+ return true;
+ }
+ }
});/*
* Based on:
* Ext JS Library 1.1.1
*/
/**
- * @class Roo.form.TextArea
- * @extends Roo.form.TextField
- * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
- * support for auto-sizing.
- * @constructor
- * Creates a new TextArea
- * @param {Object} config Configuration options
+ * @class Roo.menu.MenuMgr
+ * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
+ * @static
*/
-Roo.form.TextArea = function(config){
- Roo.form.TextArea.superclass.constructor.call(this, config);
- // these are provided exchanges for backwards compat
- // minHeight/maxHeight were replaced by growMin/growMax to be
- // compatible with TextField growing config values
- if(this.minHeight !== undefined){
- this.growMin = this.minHeight;
- }
- if(this.maxHeight !== undefined){
- this.growMax = this.maxHeight;
- }
-};
+Roo.menu.MenuMgr = function(){
+ var menus, active, groups = {}, attached = false, lastShow = new Date();
-Roo.extend(Roo.form.TextArea, Roo.form.TextField, {
- /**
- * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
- */
- growMin : 60,
- /**
- * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
- */
- growMax: 1000,
- /**
- * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
- * in the field (equivalent to setting overflow: hidden, defaults to false)
- */
- preventScrollbars: false,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
- */
+ // private - called when first menu is created
+ function init(){
+ menus = {};
+ active = new Roo.util.MixedCollection();
+ Roo.get(document).addKeyListener(27, function(){
+ if(active.length > 0){
+ hideAll();
+ }
+ });
+ }
- // private
- onRender : function(ct, position){
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:300px;height:60px;",
- autocomplete: "new-password"
- };
- }
- Roo.form.TextArea.superclass.onRender.call(this, ct, position);
- if(this.grow){
- this.textSizeEl = Roo.DomHelper.append(document.body, {
- tag: "pre", cls: "x-form-grow-sizer"
- });
- if(this.preventScrollbars){
- this.el.setStyle("overflow", "hidden");
- }
- this.el.setHeight(this.growMin);
- }
- },
+ // private
+ function hideAll(){
+ if(active && active.length > 0){
+ var c = active.clone();
+ c.each(function(m){
+ m.hide();
+ });
+ }
+ }
- onDestroy : function(){
- if(this.textSizeEl){
- this.textSizeEl.parentNode.removeChild(this.textSizeEl);
- }
- Roo.form.TextArea.superclass.onDestroy.call(this);
- },
+ // private
+ function onHide(m){
+ active.remove(m);
+ if(active.length < 1){
+ Roo.get(document).un("mousedown", onMouseDown);
+ attached = false;
+ }
+ }
- // private
- onKeyUp : function(e){
- if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
- this.autoSize();
- }
- },
+ // private
+ function onShow(m){
+ var last = active.last();
+ lastShow = new Date();
+ active.add(m);
+ if(!attached){
+ Roo.get(document).on("mousedown", onMouseDown);
+ attached = true;
+ }
+ if(m.parentMenu){
+ m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
+ m.parentMenu.activeChild = m;
+ }else if(last && last.isVisible()){
+ m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
+ }
+ }
- /**
- * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
- * This only takes effect if grow = true, and fires the autosize event if the height changes.
- */
- autoSize : function(){
- if(!this.grow || !this.textSizeEl){
- return;
- }
- var el = this.el;
- var v = el.dom.value;
- var ts = this.textSizeEl;
+ // private
+ function onBeforeHide(m){
+ if(m.activeChild){
+ m.activeChild.hide();
+ }
+ if(m.autoHideTimer){
+ clearTimeout(m.autoHideTimer);
+ delete m.autoHideTimer;
+ }
+ }
- ts.innerHTML = '';
- ts.appendChild(document.createTextNode(v));
- v = ts.innerHTML;
+ // private
+ function onBeforeShow(m){
+ var pm = m.parentMenu;
+ if(!pm && !m.allowOtherMenus){
+ hideAll();
+ }else if(pm && pm.activeChild && active != m){
+ pm.activeChild.hide();
+ }
+ }
- Roo.fly(ts).setWidth(this.el.getWidth());
- if(v.length < 1){
- v = "  ";
- }else{
- if(Roo.isIE){
- v = v.replace(/\n/g, '<p> </p>');
- }
- v += " \n ";
- }
- ts.innerHTML = v;
- var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
- if(h != this.lastHeight){
- this.lastHeight = h;
- this.el.setHeight(h);
- this.fireEvent("autosize", this, h);
- }
- }
-});/*
+ // private
+ function onMouseDown(e){
+ if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
+ hideAll();
+ }
+ }
+
+ // private
+ function onBeforeCheck(mi, state){
+ if(state){
+ var g = groups[mi.group];
+ for(var i = 0, l = g.length; i < l; i++){
+ if(g[i] != mi){
+ g[i].setChecked(false);
+ }
+ }
+ }
+ }
+
+ return {
+
+ /**
+ * Hides all menus that are currently visible
+ */
+ hideAll : function(){
+ hideAll();
+ },
+
+ // private
+ register : function(menu){
+ if(!menus){
+ init();
+ }
+ menus[menu.id] = menu;
+ menu.on("beforehide", onBeforeHide);
+ menu.on("hide", onHide);
+ menu.on("beforeshow", onBeforeShow);
+ menu.on("show", onShow);
+ var g = menu.group;
+ if(g && menu.events["checkchange"]){
+ if(!groups[g]){
+ groups[g] = [];
+ }
+ groups[g].push(menu);
+ menu.on("checkchange", onCheck);
+ }
+ },
+
+ /**
+ * Returns a {@link Roo.menu.Menu} object
+ * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
+ * be used to generate and return a new Menu instance.
+ */
+ get : function(menu){
+ if(typeof menu == "string"){ // menu id
+ return menus[menu];
+ }else if(menu.events){ // menu instance
+ return menu;
+ }else if(typeof menu.length == 'number'){ // array of menu items?
+ return new Roo.menu.Menu({items:menu});
+ }else{ // otherwise, must be a config
+ return new Roo.menu.Menu(menu);
+ }
+ },
+
+ // private
+ unregister : function(menu){
+ delete menus[menu.id];
+ menu.un("beforehide", onBeforeHide);
+ menu.un("hide", onHide);
+ menu.un("beforeshow", onBeforeShow);
+ menu.un("show", onShow);
+ var g = menu.group;
+ if(g && menu.events["checkchange"]){
+ groups[g].remove(menu);
+ menu.un("checkchange", onCheck);
+ }
+ },
+
+ // private
+ registerCheckable : function(menuItem){
+ var g = menuItem.group;
+ if(g){
+ if(!groups[g]){
+ groups[g] = [];
+ }
+ groups[g].push(menuItem);
+ menuItem.on("beforecheckchange", onBeforeCheck);
+ }
+ },
+
+ // private
+ unregisterCheckable : function(menuItem){
+ var g = menuItem.group;
+ if(g){
+ groups[g].remove(menuItem);
+ menuItem.un("beforecheckchange", onBeforeCheck);
+ }
+ }
+ };
+}();/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.form.NumberField
- * @extends Roo.form.TextField
- * Numeric text field that provides automatic keystroke filtering and numeric validation.
+ * @class Roo.menu.BaseItem
+ * @extends Roo.Component
+ * @abstract
+ * The base class for all items that render into menus. BaseItem provides default rendering, activated state
+ * management and base configuration options shared by all menu components.
* @constructor
- * Creates a new NumberField
+ * Creates a new BaseItem
* @param {Object} config Configuration options
*/
-Roo.form.NumberField = function(config){
- Roo.form.NumberField.superclass.constructor.call(this, config);
+Roo.menu.BaseItem = function(config){
+ Roo.menu.BaseItem.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event click
+ * Fires when this item is clicked
+ * @param {Roo.menu.BaseItem} this
+ * @param {Roo.EventObject} e
+ */
+ click: true,
+ /**
+ * @event activate
+ * Fires when this item is activated
+ * @param {Roo.menu.BaseItem} this
+ */
+ activate : true,
+ /**
+ * @event deactivate
+ * Fires when this item is deactivated
+ * @param {Roo.menu.BaseItem} this
+ */
+ deactivate : true
+ });
+
+ if(this.handler){
+ this.on("click", this.handler, this.scope, true);
+ }
};
-Roo.extend(Roo.form.NumberField, Roo.form.TextField, {
- /**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
- */
- fieldClass: "x-form-field x-form-num-field",
- /**
- * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
- */
- allowDecimals : true,
- /**
- * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
- */
- decimalSeparator : ".",
- /**
- * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
- */
- decimalPrecision : 2,
+Roo.extend(Roo.menu.BaseItem, Roo.Component, {
/**
- * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
+ * @cfg {Function} handler
+ * A function that will handle the click event of this menu item (defaults to undefined)
*/
- allowNegative : true,
/**
- * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
+ * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
*/
- minValue : Number.NEGATIVE_INFINITY,
- /**
- * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
+ canActivate : false,
+
+ /**
+ * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
*/
- maxValue : Number.MAX_VALUE,
+ hidden: false,
+
/**
- * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
+ * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
*/
- minText : "The minimum value for this field is {0}",
+ activeClass : "x-menu-item-active",
/**
- * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
+ * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
*/
- maxText : "The maximum value for this field is {0}",
+ hideOnClick : true,
/**
- * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
- * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
+ * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
*/
- nanText : "{0} is not a valid number",
+ hideDelay : 100,
// private
- initEvents : function(){
- Roo.form.NumberField.superclass.initEvents.call(this);
- var allowed = "0123456789";
- if(this.allowDecimals){
- allowed += this.decimalSeparator;
- }
- if(this.allowNegative){
- allowed += "-";
- }
- this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
- var keyPress = function(e){
- var k = e.getKey();
- if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
- return;
- }
- var c = e.getCharCode();
- if(allowed.indexOf(String.fromCharCode(c)) === -1){
- e.stopEvent();
- }
- };
- this.el.on("keypress", keyPress, this);
+ ctype: "Roo.menu.BaseItem",
+
+ // private
+ actionMode : "container",
+
+ // private
+ render : function(container, parentMenu){
+ this.parentMenu = parentMenu;
+ Roo.menu.BaseItem.superclass.render.call(this, container);
+ this.container.menuItemId = this.id;
},
// private
- validateValue : function(value){
- if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
- }
- var num = this.parseValue(value);
- if(isNaN(num)){
- this.markInvalid(String.format(this.nanText, value));
- return false;
- }
- if(num < this.minValue){
- this.markInvalid(String.format(this.minText, this.minValue));
- return false;
+ onRender : function(container, position){
+ this.el = Roo.get(this.el);
+ container.dom.appendChild(this.el.dom);
+ },
+
+ // private
+ onClick : function(e){
+ if(!this.disabled && this.fireEvent("click", this, e) !== false
+ && this.parentMenu.fireEvent("itemclick", this, e) !== false){
+ this.handleClick(e);
+ }else{
+ e.stopEvent();
}
- if(num > this.maxValue){
- this.markInvalid(String.format(this.maxText, this.maxValue));
+ },
+
+ // private
+ activate : function(){
+ if(this.disabled){
return false;
}
+ var li = this.container;
+ li.addClass(this.activeClass);
+ this.region = li.getRegion().adjust(2, 2, -2, -2);
+ this.fireEvent("activate", this);
return true;
},
- getValue : function(){
- return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
+ // private
+ deactivate : function(){
+ this.container.removeClass(this.activeClass);
+ this.fireEvent("deactivate", this);
},
// private
- parseValue : function(value){
- value = parseFloat(String(value).replace(this.decimalSeparator, "."));
- return isNaN(value) ? '' : value;
+ shouldDeactivate : function(e){
+ return !this.region || !this.region.contains(e.getPoint());
},
// private
- fixPrecision : function(value){
- var nan = isNaN(value);
- if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
- return nan ? '' : value;
+ handleClick : function(e){
+ if(this.hideOnClick){
+ this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
}
- return parseFloat(value).toFixed(this.decimalPrecision);
- },
-
- setValue : function(v){
- v = this.fixPrecision(v);
- Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
},
// private
- decimalPrecisionFcn : function(v){
- return Math.floor(v);
+ expandMenu : function(autoActivate){
+ // do nothing
},
- beforeBlur : function(){
- var v = this.parseValue(this.getRawValue());
- if(v){
- this.setValue(v);
- }
+ // private
+ hideMenu : function(){
+ // do nothing
}
});/*
* Based on:
*/
/**
- * @class Roo.form.DateField
- * @extends Roo.form.TriggerField
- * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
-* @constructor
-* Create a new DateField
-* @param {Object} config
+ * @class Roo.menu.Adapter
+ * @extends Roo.menu.BaseItem
+ * @abstract
+ * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
+ * It provides basic rendering, activation management and enable/disable logic required to work in menus.
+ * @constructor
+ * Creates a new Adapter
+ * @param {Object} config Configuration options
*/
-Roo.form.DateField = function(config)
-{
- Roo.form.DateField.superclass.constructor.call(this, config);
-
- this.addEvents({
-
- /**
- * @event select
- * Fires when a date is selected
- * @param {Roo.form.DateField} combo This combo box
- * @param {Date} date The date selected
- */
- 'select' : true
-
- });
-
-
- if(typeof this.minValue == "string") {
- this.minValue = this.parseDate(this.minValue);
- }
- if(typeof this.maxValue == "string") {
- this.maxValue = this.parseDate(this.maxValue);
- }
- this.ddMatch = null;
- if(this.disabledDates){
- var dd = this.disabledDates;
- var re = "(?:";
- for(var i = 0; i < dd.length; i++){
- re += dd[i];
- if(i != dd.length-1) {
- re += "|";
- }
+Roo.menu.Adapter = function(component, config){
+ Roo.menu.Adapter.superclass.constructor.call(this, config);
+ this.component = component;
+};
+Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
+ // private
+ canActivate : true,
+
+ // private
+ onRender : function(container, position){
+ this.component.render(container);
+ this.el = this.component.getEl();
+ },
+
+ // private
+ activate : function(){
+ if(this.disabled){
+ return false;
}
- this.ddMatch = new RegExp(re + ")");
+ this.component.focus();
+ this.fireEvent("activate", this);
+ return true;
+ },
+
+ // private
+ deactivate : function(){
+ this.fireEvent("deactivate", this);
+ },
+
+ // private
+ disable : function(){
+ this.component.disable();
+ Roo.menu.Adapter.superclass.disable.call(this);
+ },
+
+ // private
+ enable : function(){
+ this.component.enable();
+ Roo.menu.Adapter.superclass.enable.call(this);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.TextItem
+ * @extends Roo.menu.BaseItem
+ * Adds a static text string to a menu, usually used as either a heading or group separator.
+ * Note: old style constructor with text is still supported.
+ *
+ * @constructor
+ * Creates a new TextItem
+ * @param {Object} cfg Configuration
+ */
+Roo.menu.TextItem = function(cfg){
+ if (typeof(cfg) == 'string') {
+ this.text = cfg;
+ } else {
+ Roo.apply(this,cfg);
}
+
+ Roo.menu.TextItem.superclass.constructor.call(this);
};
-Roo.extend(Roo.form.DateField, Roo.form.TriggerField, {
+Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
/**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+ * @cfg {String} text Text to show on item.
*/
- format : "m/d/y",
+ text : '',
+
/**
- * @cfg {String} altFormats
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
- * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+ * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
*/
- altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
+ hideOnClick : false,
/**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+ * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
*/
- disabledDays : null,
+ itemCls : "x-menu-text",
+
+ // private
+ onRender : function(){
+ var s = document.createElement("span");
+ s.className = this.itemCls;
+ s.innerHTML = this.text;
+ this.el = s;
+ Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.Separator
+ * @extends Roo.menu.BaseItem
+ * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
+ * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Separator = function(config){
+ Roo.menu.Separator.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
/**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+ * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
*/
- disabledDaysText : "Disabled",
+ itemCls : "x-menu-sep",
/**
- * @cfg {Array} disabledDates
- * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
- * expression so they are very powerful. Some examples:
- * <ul>
- * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
- * <li>["03/08", "09/16"] would disable those days for every year</li>
- * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
- * <li>["03/../2006"] would disable every day in March 2006</li>
- * <li>["^03"] would disable every day in every March</li>
- * </ul>
- * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
- * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
*/
- disabledDates : null,
+ hideOnClick : false,
+
+ // private
+ onRender : function(li){
+ var s = document.createElement("span");
+ s.className = this.itemCls;
+ s.innerHTML = " ";
+ this.el = s;
+ li.addClass("x-menu-sep-li");
+ Roo.menu.Separator.superclass.onRender.apply(this, arguments);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.menu.Item
+ * @extends Roo.menu.BaseItem
+ * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
+ * display items. Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
+ * activation and click handling.
+ * @constructor
+ * Creates a new Item
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Item = function(config){
+ Roo.menu.Item.superclass.constructor.call(this, config);
+ if(this.menu){
+ this.menu = Roo.menu.MenuMgr.get(this.menu);
+ }
+};
+Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
/**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
- */
- disabledDatesText : "Disabled",
-
-
- /**
- * @cfg {Date/String} zeroValue
- * if the date is less that this number, then the field is rendered as empty
- * default is 1800
+ * @cfg {Roo.menu.Menu} menu
+ * A Sub menu
*/
- zeroValue : '1800-01-01',
-
-
/**
- * @cfg {Date/String} minValue
- * The minimum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ * @cfg {String} text
+ * The text to show on the menu item.
*/
- minValue : null,
- /**
- * @cfg {Date/String} maxValue
- * The maximum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ text: '',
+ /**
+ * @cfg {String} html to render in menu
+ * The text to show on the menu item (HTML version).
*/
- maxValue : null,
+ html: '',
/**
- * @cfg {String} minText
- * The error text to display when the date in the cell is before minValue (defaults to
- * 'The date in this field must be after {minValue}').
+ * @cfg {String} icon
+ * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
*/
- minText : "The date in this field must be equal to or after {0}",
+ icon: undefined,
/**
- * @cfg {String} maxText
- * The error text to display when the date in the cell is after maxValue (defaults to
- * 'The date in this field must be before {maxValue}').
+ * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
*/
- maxText : "The date in this field must be equal to or before {0}",
+ itemCls : "x-menu-item",
/**
- * @cfg {String} invalidText
- * The error text to display when the date in the field is invalid (defaults to
- * '{value} is not a valid date - it must be in the format {format}').
+ * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
*/
- invalidText : "{0} is not a valid date - it must be in the format {1}",
+ canActivate : true,
/**
- * @cfg {String} triggerClass
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
- * which displays a calendar icon).
+ * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
*/
- triggerClass : 'x-form-date-trigger',
-
+ showDelay: 200,
+ // doc'd in BaseItem
+ hideDelay: 200,
- /**
- * @cfg {Boolean} useIso
- * if enabled, then the date field will use a hidden field to store the
- * real value as iso formated date. default (false)
- */
- useIso : false,
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "10", autocomplete: "off"})
- */
// private
- defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+ ctype: "Roo.menu.Item",
// private
- hiddenField: false,
-
- onRender : function(ct, position)
- {
- Roo.form.DateField.superclass.onRender.call(this, ct, position);
- if (this.useIso) {
- //this.el.dom.removeAttribute('name');
- Roo.log("Changing name?");
- this.el.dom.setAttribute('name', this.name + '____hidden___' );
- this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
- 'before', true);
- this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
- // prevent input submission
- this.hiddenName = this.name;
+ onRender : function(container, position){
+ var el = document.createElement("a");
+ el.hideFocus = true;
+ el.unselectable = "on";
+ el.href = this.href || "#";
+ if(this.hrefTarget){
+ el.target = this.hrefTarget;
}
-
-
+ el.className = this.itemCls + (this.menu ? " x-menu-item-arrow" : "") + (this.cls ? " " + this.cls : "");
+
+ var html = this.html.length ? this.html : String.format('{0}',this.text);
+
+ el.innerHTML = String.format(
+ '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
+ this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
+ this.el = el;
+ Roo.menu.Item.superclass.onRender.call(this, container, position);
},
-
- // private
- validateValue : function(value)
- {
- value = this.formatDate(value);
- if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
- Roo.log('super failed');
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
- }
- var svalue = value;
- value = this.parseDate(value);
- if(!value){
- Roo.log('parse date failed' + svalue);
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
+
+ /**
+ * Sets the text to display in this menu item
+ * @param {String} text The text to display
+ * @param {Boolean} isHTML true to indicate text is pure html.
+ */
+ setText : function(text, isHTML){
+ if (isHTML) {
+ this.html = text;
+ } else {
+ this.text = text;
+ this.html = '';
}
- var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
+ if(this.rendered){
+ var html = this.html.length ? this.html : String.format('{0}',this.text);
+
+ this.el.update(String.format(
+ '<img src="{0}" class="x-menu-item-icon {2}">' + html,
+ this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
+ this.parentMenu.autoWidth();
}
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
+ },
+
+ // private
+ handleClick : function(e){
+ if(!this.href){ // if no link defined, stop the event automatically
+ e.stopEvent();
}
- if(this.disabledDays){
- var day = value.getDay();
- for(var i = 0; i < this.disabledDays.length; i++) {
- if(day === this.disabledDays[i]){
- this.markInvalid(this.disabledDaysText);
- return false;
- }
+ Roo.menu.Item.superclass.handleClick.apply(this, arguments);
+ },
+
+ // private
+ activate : function(autoExpand){
+ if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
+ this.focus();
+ if(autoExpand){
+ this.expandMenu();
}
}
- var fvalue = this.formatDate(value);
- if(this.ddMatch && this.ddMatch.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
- return false;
- }
return true;
},
// private
- // Provides logic to override the default TriggerField.validateBlur which just returns true
- validateBlur : function(){
- return !this.menu || !this.menu.isVisible();
- },
-
- getName: function()
- {
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
-
+ shouldDeactivate : function(e){
+ if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
+ if(this.menu && this.menu.isVisible()){
+ return !this.menu.getEl().getRegion().contains(e.getPoint());
+ }
+ return true;
+ }
+ return false;
},
- /**
- * Returns the current date value of the date field.
- * @return {Date} The date value
- */
- getValue : function(){
-
- return this.hiddenField ?
- this.hiddenField.value :
- this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
+ // private
+ deactivate : function(){
+ Roo.menu.Item.superclass.deactivate.apply(this, arguments);
+ this.hideMenu();
},
- /**
- * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
- * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
- * (the default format used is "m/d/y").
- * <br />Usage:
- * <pre><code>
-//All of these calls set the same date value (May 4, 2006)
-
-//Pass a date object:
-var dt = new Date('5/4/06');
-dateField.setValue(dt);
-
-//Pass a date string (default format):
-dateField.setValue('5/4/06');
-
-//Pass a date string (custom format):
-dateField.format = 'Y-m-d';
-dateField.setValue('2006-5-4');
-</code></pre>
- * @param {String/Date} date The date or valid date string
- */
- setValue : function(date){
- if (this.hiddenField) {
- this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+ // private
+ expandMenu : function(autoActivate){
+ if(!this.disabled && this.menu){
+ clearTimeout(this.hideTimer);
+ delete this.hideTimer;
+ if(!this.menu.isVisible() && !this.showTimer){
+ this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
+ }else if (this.menu.isVisible() && autoActivate){
+ this.menu.tryActivate(0, 1);
+ }
}
- Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
- // make sure the value field is always stored as a date..
- this.value = this.parseDate(date);
-
-
},
// private
- parseDate : function(value){
-
- if (value instanceof Date) {
- if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
- return '';
- }
- return value;
- }
-
-
- if(!value || value instanceof Date){
- return value;
- }
- var v = Date.parseDate(value, this.format);
- if (!v && this.useIso) {
- v = Date.parseDate(value, 'Y-m-d');
- }
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
- }
+ deferExpand : function(autoActivate){
+ delete this.showTimer;
+ this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
+ if(autoActivate){
+ this.menu.tryActivate(0, 1);
}
- if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
- v = '';
- }
- return v;
},
// private
- formatDate : function(date, fmt){
- return (!date || !(date instanceof Date)) ?
- date : date.dateFormat(fmt || this.format);
+ hideMenu : function(){
+ clearTimeout(this.showTimer);
+ delete this.showTimer;
+ if(!this.hideTimer && this.menu && this.menu.isVisible()){
+ this.hideTimer = this.deferHide.defer(this.hideDelay, this);
+ }
},
// private
- menuListeners : {
- select: function(m, d){
-
- this.setValue(d);
- this.fireEvent('select', this, d);
- },
- show : function(){ // retain focus styling
- this.onFocus();
- },
- hide : function(){
- this.focus.defer(10, this);
- var ml = this.menuListeners;
- this.menu.un("select", ml.select, this);
- this.menu.un("show", ml.show, this);
- this.menu.un("hide", ml.hide, this);
- }
- },
+ deferHide : function(){
+ delete this.hideTimer;
+ this.menu.hide();
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.CheckItem
+ * @extends Roo.menu.Item
+ * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
+ * @constructor
+ * Creates a new CheckItem
+ * @param {Object} config Configuration options
+ */
+Roo.menu.CheckItem = function(config){
+ Roo.menu.CheckItem.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event beforecheckchange
+ * Fires before the checked value is set, providing an opportunity to cancel if needed
+ * @param {Roo.menu.CheckItem} this
+ * @param {Boolean} checked The new checked value that will be set
+ */
+ "beforecheckchange" : true,
+ /**
+ * @event checkchange
+ * Fires after the checked value has been set
+ * @param {Roo.menu.CheckItem} this
+ * @param {Boolean} checked The checked value that was set
+ */
+ "checkchange" : true
+ });
+ if(this.checkHandler){
+ this.on('checkchange', this.checkHandler, this.scope);
+ }
+};
+Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
+ /**
+ * @cfg {String} group
+ * All check items with the same group name will automatically be grouped into a single-select
+ * radio button group (defaults to '')
+ */
+ /**
+ * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
+ */
+ itemCls : "x-menu-item x-menu-check-item",
+ /**
+ * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
+ */
+ groupClass : "x-menu-group-item",
+
+ /**
+ * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false). Note that
+ * if this checkbox is part of a radio group (group = true) only the last item in the group that is
+ * initialized with checked = true will be rendered as checked.
+ */
+ checked: false,
// private
- // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
- onTriggerClick : function(){
- if(this.disabled){
- return;
+ ctype: "Roo.menu.CheckItem",
+
+ // private
+ onRender : function(c){
+ Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
+ if(this.group){
+ this.el.addClass(this.groupClass);
}
- if(this.menu == null){
- this.menu = new Roo.menu.DateMenu();
+ Roo.menu.MenuMgr.registerCheckable(this);
+ if(this.checked){
+ this.checked = false;
+ this.setChecked(true, true);
}
- Roo.apply(this.menu.picker, {
- showClear: this.allowBlank,
- minDate : this.minValue,
- maxDate : this.maxValue,
- disabledDatesRE : this.ddMatch,
- disabledDatesText : this.disabledDatesText,
- disabledDays : this.disabledDays,
- disabledDaysText : this.disabledDaysText,
- format : this.useIso ? 'Y-m-d' : this.format,
- minText : String.format(this.minText, this.formatDate(this.minValue)),
- maxText : String.format(this.maxText, this.formatDate(this.maxValue))
- });
- this.menu.on(Roo.apply({}, this.menuListeners, {
- scope:this
- }));
- this.menu.picker.setValue(this.getValue() || new Date());
- this.menu.show(this.el, "tl-bl?");
},
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(v);
+ // private
+ destroy : function(){
+ if(this.rendered){
+ Roo.menu.MenuMgr.unregisterCheckable(this);
}
+ Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
},
- /*@
- * overide
- *
+ /**
+ * Set the checked state of this item
+ * @param {Boolean} checked The new checked value
+ * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
*/
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
-
- if(typeof(this.startValue) === 'undefined'){
- return false;
+ setChecked : function(state, suppressEvent){
+ if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
+ if(this.container){
+ this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
+ }
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent("checkchange", this, state);
+ }
}
-
- return String(this.getValue()) !== String(this.startValue);
-
},
- // @overide
- cleanLeadingSpace : function(e)
- {
- return;
+
+ // private
+ handleClick : function(e){
+ if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
+ this.setChecked(!this.checked);
+ }
+ Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
}
-
});/*
* Based on:
* Ext JS Library 1.1.1
*/
/**
- * @class Roo.form.MonthField
- * @extends Roo.form.TriggerField
- * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
-* @constructor
-* Create a new MonthField
-* @param {Object} config
+ * @class Roo.menu.DateItem
+ * @extends Roo.menu.Adapter
+ * A menu item that wraps the {@link Roo.DatPicker} component.
+ * @constructor
+ * Creates a new DateItem
+ * @param {Object} config Configuration options
*/
-Roo.form.MonthField = function(config){
-
- Roo.form.MonthField.superclass.constructor.call(this, config);
+Roo.menu.DateItem = function(config){
+ Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
+ /** The Roo.DatePicker object @type Roo.DatePicker */
+ this.picker = this.component;
+ this.addEvents({select: true});
- this.addEvents({
-
- /**
- * @event select
- * Fires when a date is selected
- * @param {Roo.form.MonthFieeld} combo This combo box
- * @param {Date} date The date selected
- */
- 'select' : true
-
+ this.picker.on("render", function(picker){
+ picker.getEl().swallowEvent("click");
+ picker.container.addClass("x-menu-date-item");
});
-
-
- if(typeof this.minValue == "string") {
- this.minValue = this.parseDate(this.minValue);
+
+ this.picker.on("select", this.onSelect, this);
+};
+
+Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
+ // private
+ onSelect : function(picker, date){
+ this.fireEvent("select", this, date, picker);
+ Roo.menu.DateItem.superclass.handleClick.call(this);
}
- if(typeof this.maxValue == "string") {
- this.maxValue = this.parseDate(this.maxValue);
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.ColorItem
+ * @extends Roo.menu.Adapter
+ * A menu item that wraps the {@link Roo.ColorPalette} component.
+ * @constructor
+ * Creates a new ColorItem
+ * @param {Object} config Configuration options
+ */
+Roo.menu.ColorItem = function(config){
+ Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
+ /** The Roo.ColorPalette object @type Roo.ColorPalette */
+ this.palette = this.component;
+ this.relayEvents(this.palette, ["select"]);
+ if(this.selectHandler){
+ this.on('select', this.selectHandler, this.scope);
}
- this.ddMatch = null;
- if(this.disabledDates){
- var dd = this.disabledDates;
- var re = "(?:";
- for(var i = 0; i < dd.length; i++){
- re += dd[i];
- if(i != dd.length-1) {
- re += "|";
- }
+};
+Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/**
+ * @class Roo.menu.DateMenu
+ * @extends Roo.menu.Menu
+ * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
+ * @constructor
+ * Creates a new DateMenu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.DateMenu = function(config){
+ Roo.menu.DateMenu.superclass.constructor.call(this, config);
+ this.plain = true;
+ var di = new Roo.menu.DateItem(config);
+ this.add(di);
+ /**
+ * The {@link Roo.DatePicker} instance for this DateMenu
+ * @type DatePicker
+ */
+ this.picker = di.picker;
+ /**
+ * @event select
+ * @param {DatePicker} picker
+ * @param {Date} date
+ */
+ this.relayEvents(di, ["select"]);
+ this.on('beforeshow', function(){
+ if(this.picker){
+ this.picker.hideMonthPicker(false);
}
- this.ddMatch = new RegExp(re + ")");
- }
+ }, this);
};
+Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
+ cls:'x-date-menu'
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
-Roo.extend(Roo.form.MonthField, Roo.form.TriggerField, {
+/**
+ * @class Roo.menu.ColorMenu
+ * @extends Roo.menu.Menu
+ * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
+ * @constructor
+ * Creates a new ColorMenu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.ColorMenu = function(config){
+ Roo.menu.ColorMenu.superclass.constructor.call(this, config);
+ this.plain = true;
+ var ci = new Roo.menu.ColorItem(config);
+ this.add(ci);
/**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+ * The {@link Roo.ColorPalette} instance for this ColorMenu
+ * @type ColorPalette
*/
- format : "M Y",
+ this.palette = ci.palette;
/**
- * @cfg {String} altFormats
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
- * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+ * @event select
+ * @param {ColorPalette} palette
+ * @param {String} color
*/
- altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
+ this.relayEvents(ci, ["select"]);
+};
+Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.TextItem
+ * @extends Roo.BoxComponent
+ * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
+ * @constructor
+ * Creates a new TextItem
+ * @param {Object} config Configuration options
+ */
+Roo.form.TextItem = function(config){
+ Roo.form.TextItem.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.TextItem, Roo.BoxComponent, {
+
/**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+ * @cfg {String} tag the tag for this item (default div)
*/
- disabledDays : [0,1,2,3,4,5,6],
+ tag : 'div',
/**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+ * @cfg {String} html the content for this item
*/
- disabledDaysText : "Disabled",
+ html : '',
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ id: this.id,
+ tag: this.tag,
+ html: this.html,
+ cls: 'x-form-item'
+ };
+
+ return cfg;
+
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.form.TextItem.superclass.onRender.call(this, ct, position);
+
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ if(!cfg.name){
+ cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
+ }
+ if (!cfg.name.length) {
+ delete cfg.name;
+ }
+ this.el = ct.createChild(cfg, position);
+ }
+ },
+ /*
+ * setHTML
+ * @param {String} html update the Contents of the element.
+ */
+ setHTML : function(html)
+ {
+ this.fieldEl.dom.innerHTML = html;
+ }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Field
+ * @extends Roo.BoxComponent
+ * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
+ * @constructor
+ * Creates a new Field
+ * @param {Object} config Configuration options
+ */
+Roo.form.Field = function(config){
+ Roo.form.Field.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Field, Roo.BoxComponent, {
/**
- * @cfg {Array} disabledDates
- * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
- * expression so they are very powerful. Some examples:
- * <ul>
- * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
- * <li>["03/08", "09/16"] would disable those days for every year</li>
- * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
- * <li>["03/../2006"] would disable every day in March 2006</li>
- * <li>["^03"] would disable every day in every March</li>
- * </ul>
- * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
- * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ * @cfg {String} fieldLabel Label to use when rendering a form.
*/
- disabledDates : null,
+ /**
+ * @cfg {String} labelSeparator the ':' after a field label (default :) = set it to empty string to hide the field label.
+ */
+ /**
+ * @cfg {String} qtip Mouse over tip
+ */
+
/**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+ * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
*/
- disabledDatesText : "Disabled",
+ invalidClass : "x-form-invalid",
/**
- * @cfg {Date/String} minValue
- * The minimum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
*/
- minValue : null,
+ invalidText : "The value in this field is invalid",
/**
- * @cfg {Date/String} maxValue
- * The maximum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
*/
- maxValue : null,
+ focusClass : "x-form-focus",
/**
- * @cfg {String} minText
- * The error text to display when the date in the cell is before minValue (defaults to
- * 'The date in this field must be after {minValue}').
+ * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
+ automatic validation (defaults to "keyup").
*/
- minText : "The date in this field must be equal to or after {0}",
+ validationEvent : "keyup",
/**
- * @cfg {String} maxTextf
- * The error text to display when the date in the cell is after maxValue (defaults to
- * 'The date in this field must be before {maxValue}').
+ * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
*/
- maxText : "The date in this field must be equal to or before {0}",
+ validateOnBlur : true,
/**
- * @cfg {String} invalidText
- * The error text to display when the date in the field is invalid (defaults to
- * '{value} is not a valid date - it must be in the format {format}').
+ * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
*/
- invalidText : "{0} is not a valid date - it must be in the format {1}",
+ validationDelay : 250,
/**
- * @cfg {String} triggerClass
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
- * which displays a calendar icon).
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "20", autocomplete: "off"})
*/
- triggerClass : 'x-form-date-trigger',
-
-
+ defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
/**
- * @cfg {Boolean} useIso
- * if enabled, then the date field will use a hidden field to store the
- * real value as iso formated date. default (true)
- */
- useIso : true,
+ * @cfg {String} fieldClass The default CSS class for the field (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: "text", size: "10", autocomplete: "off"})
- */
- // private
- defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
+ * @cfg {String} msgTarget The location where error text should display. Should be one of the following values (defaults to 'qtip'):
+ *<pre>
+Value Description
+----------- ----------------------------------------------------------------------
+qtip Display a quick tip when the user hovers over the field
+title Display a default browser title attribute popup
+under Add a block div beneath the field containing the error text
+side Add an error icon to the right of the field with a popup on hover
+[element id] Add the error text directly to the innerHTML of the specified element
+</pre>
+ */
+ msgTarget : 'qtip',
+ /**
+ * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
+ */
+ msgFx : 'normal',
+
+ /**
+ * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
+ */
+ readOnly : false,
+
+ /**
+ * @cfg {Boolean} disabled True to disable the field (defaults to false).
+ */
+ disabled : false,
+
+ /**
+ * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
+ */
+ inputType : undefined,
+ /**
+ * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
+ */
+ tabIndex : undefined,
+
// private
- hiddenField: false,
-
- hideMonthPicker : false,
-
- onRender : function(ct, position)
- {
- Roo.form.MonthField.superclass.onRender.call(this, ct, position);
- if (this.useIso) {
- this.el.dom.removeAttribute('name');
- this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
- 'before', true);
- this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
- // prevent input submission
- this.hiddenName = this.name;
- }
-
-
+ isFormField : true,
+
+ // private
+ hasFocus : false,
+ /**
+ * @property {Roo.Element} fieldEl
+ * Element Containing the rendered Field (with label etc.)
+ */
+ /**
+ * @cfg {Mixed} value A value to initialize this field with.
+ */
+ value : undefined,
+
+ /**
+ * @cfg {String} name The field's HTML name attribute.
+ */
+ /**
+ * @cfg {String} cls A CSS class to apply to the field's underlying element.
+ */
+ // private
+ loadedValue : false,
+
+
+ // private ??
+ initComponent : function(){
+ Roo.form.Field.superclass.initComponent.call(this);
+ this.addEvents({
+ /**
+ * @event focus
+ * Fires when this field receives input focus.
+ * @param {Roo.form.Field} this
+ */
+ focus : true,
+ /**
+ * @event blur
+ * Fires when this field loses input focus.
+ * @param {Roo.form.Field} this
+ */
+ blur : true,
+ /**
+ * @event specialkey
+ * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
+ * {@link Roo.EventObject#getKey} to determine which key was pressed.
+ * @param {Roo.form.Field} this
+ * @param {Roo.EventObject} e The event object
+ */
+ specialkey : true,
+ /**
+ * @event change
+ * Fires just before the field blurs if the field value has changed.
+ * @param {Roo.form.Field} this
+ * @param {Mixed} newValue The new value
+ * @param {Mixed} oldValue The original value
+ */
+ change : true,
+ /**
+ * @event invalid
+ * Fires after the field has been marked as invalid.
+ * @param {Roo.form.Field} this
+ * @param {String} msg The validation message
+ */
+ invalid : true,
+ /**
+ * @event valid
+ * Fires after the field has been validated with no errors.
+ * @param {Roo.form.Field} this
+ */
+ valid : true,
+ /**
+ * @event keyup
+ * Fires after the key up
+ * @param {Roo.form.Field} this
+ * @param {Roo.EventObject} e The event Object
+ */
+ keyup : true
+ });
},
-
+
+ /**
+ * Returns the name attribute of the field if available
+ * @return {String} name The field name
+ */
+ getName: function(){
+ return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+ },
+
// private
- validateValue : function(value)
- {
- value = this.formatDate(value);
- if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
- return false;
+ onRender : function(ct, position){
+ Roo.form.Field.superclass.onRender.call(this, ct, position);
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ if(!cfg.name){
+ cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
+ }
+ if (!cfg.name.length) {
+ delete cfg.name;
+ }
+ if(this.inputType){
+ cfg.type = this.inputType;
+ }
+ this.el = ct.createChild(cfg, position);
}
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
+ var type = this.el.dom.type;
+ if(type){
+ if(type == 'password'){
+ type = 'text';
+ }
+ this.el.addClass('x-form-'+type);
}
- var svalue = value;
- value = this.parseDate(value);
- if(!value){
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
+ if(this.readOnly){
+ this.el.dom.readOnly = true;
}
- var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
+ if(this.tabIndex !== undefined){
+ this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
+
+ this.el.addClass([this.fieldClass, this.cls]);
+ this.initValue();
+ },
+
+ /**
+ * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
+ * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
+ * @return {Roo.form.Field} this
+ */
+ applyTo : function(target){
+ this.allowDomMove = false;
+ this.el = Roo.get(target);
+ this.render(this.el.dom.parentNode);
+ return this;
+ },
+
+ // private
+ initValue : function(){
+ if(this.value !== undefined){
+ this.setValue(this.value);
+ }else if(this.el.dom.value.length > 0){
+ this.setValue(this.el.dom.value);
}
- /*if(this.disabledDays){
- var day = value.getDay();
- for(var i = 0; i < this.disabledDays.length; i++) {
- if(day === this.disabledDays[i]){
- this.markInvalid(this.disabledDaysText);
- return false;
- }
- }
+ },
+
+ /**
+ * Returns true if this field has been changed since it was originally loaded and is not disabled.
+ * DEPRICATED - it never worked well - use hasChanged/resetHasChanged.
+ */
+ isDirty : function() {
+ if(this.disabled) {
+ return false;
}
- */
- var fvalue = this.formatDate(value);
- /*if(this.ddMatch && this.ddMatch.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
+ return String(this.getValue()) !== String(this.originalValue);
+ },
+
+ /**
+ * stores the current value in loadedValue
+ */
+ resetHasChanged : function()
+ {
+ this.loadedValue = String(this.getValue());
+ },
+ /**
+ * checks the current value against the 'loaded' value.
+ * Note - will return false if 'resetHasChanged' has not been called first.
+ */
+ hasChanged : function()
+ {
+ if(this.disabled || this.readOnly) {
return false;
}
- */
- return true;
+ return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
+ },
+
+
+
+ // private
+ afterRender : function(){
+ Roo.form.Field.superclass.afterRender.call(this);
+ this.initEvents();
},
// private
- // Provides logic to override the default TriggerField.validateBlur which just returns true
- validateBlur : function(){
- return !this.menu || !this.menu.isVisible();
+ fireKey : function(e){
+ //Roo.log('field ' + e.getKey());
+ if(e.isNavKeyPress()){
+ this.fireEvent("specialkey", this, e);
+ }
},
/**
- * Returns the current date value of the date field.
- * @return {Date} The date value
+ * Resets the current field value to the originally loaded value and clears any validation messages
*/
- getValue : function(){
-
-
-
- return this.hiddenField ?
- this.hiddenField.value :
- this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
+ reset : function(){
+ this.setValue(this.resetValue);
+ this.originalValue = this.getValue();
+ this.clearInvalid();
},
- /**
- * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
- * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
- * (the default format used is "m/d/y").
- * <br />Usage:
- * <pre><code>
-//All of these calls set the same date value (May 4, 2006)
-
-//Pass a date object:
-var dt = new Date('5/4/06');
-monthField.setValue(dt);
+ // private
+ initEvents : function(){
+ // safari killled keypress - so keydown is now used..
+ this.el.on("keydown" , this.fireKey, this);
+ this.el.on("focus", this.onFocus, this);
+ this.el.on("blur", this.onBlur, this);
+ this.el.relayEvent('keyup', this);
-//Pass a date string (default format):
-monthField.setValue('5/4/06');
+ // reference to original value for reset
+ this.originalValue = this.getValue();
+ this.resetValue = this.getValue();
+ },
-//Pass a date string (custom format):
-monthField.format = 'Y-m-d';
-monthField.setValue('2006-5-4');
-</code></pre>
- * @param {String/Date} date The date or valid date string
- */
- setValue : function(date){
- Roo.log('month setValue' + date);
- // can only be first of month..
-
- var val = this.parseDate(date);
-
- if (this.hiddenField) {
- this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+ // private
+ onFocus : function(){
+ if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+ this.el.addClass(this.focusClass);
+ }
+ if(!this.hasFocus){
+ this.hasFocus = true;
+ this.startValue = this.getValue();
+ this.fireEvent("focus", this);
}
- Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
- this.value = this.parseDate(date);
},
+ beforeBlur : Roo.emptyFn,
+
// private
- parseDate : function(value){
- if(!value || value instanceof Date){
- value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
- return value;
+ onBlur : function(){
+ this.beforeBlur();
+ if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+ this.el.removeClass(this.focusClass);
}
- var v = Date.parseDate(value, this.format);
- if (!v && this.useIso) {
- v = Date.parseDate(value, 'Y-m-d');
+ this.hasFocus = false;
+ if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
+ this.validate();
}
- if (v) {
- //
- v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
+ var v = this.getValue();
+ if(String(v) !== String(this.startValue)){
+ this.fireEvent('change', this, v, this.startValue);
}
-
-
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
- }
+ this.fireEvent("blur", this);
+ },
+
+ /**
+ * Returns whether or not the field value is currently valid
+ * @param {Boolean} preventMark True to disable marking the field invalid
+ * @return {Boolean} True if the value is valid, else false
+ */
+ isValid : function(preventMark){
+ if(this.disabled){
+ return true;
}
+ var restore = this.preventMark;
+ this.preventMark = preventMark === true;
+ var v = this.validateValue(this.processValue(this.getRawValue()));
+ this.preventMark = restore;
return v;
},
- // private
- formatDate : function(date, fmt){
- return (!date || !(date instanceof Date)) ?
- date : date.dateFormat(fmt || this.format);
+ /**
+ * Validates the field value
+ * @return {Boolean} True if the value is valid, else false
+ */
+ validate : function(){
+ if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
+ this.clearInvalid();
+ return true;
+ }
+ return false;
},
- // private
- menuListeners : {
- select: function(m, d){
- this.setValue(d);
- this.fireEvent('select', this, d);
- },
- show : function(){ // retain focus styling
- this.onFocus();
- },
- hide : function(){
- this.focus.defer(10, this);
- var ml = this.menuListeners;
- this.menu.un("select", ml.select, this);
- this.menu.un("show", ml.show, this);
- this.menu.un("hide", ml.hide, this);
- }
+ processValue : function(value){
+ return value;
},
+
// private
- // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
- onTriggerClick : function(){
- if(this.disabled){
+ // Subclasses should provide the validation implementation by overriding this
+ validateValue : function(value){
+ return true;
+ },
+
+ /**
+ * Mark this field as invalid
+ * @param {String} msg The validation message
+ */
+ markInvalid : function(msg){
+ if(!this.rendered || this.preventMark){ // not rendered
return;
}
- if(this.menu == null){
- this.menu = new Roo.menu.DateMenu();
-
- }
-
- Roo.apply(this.menu.picker, {
-
- showClear: this.allowBlank,
- minDate : this.minValue,
- maxDate : this.maxValue,
- disabledDatesRE : this.ddMatch,
- disabledDatesText : this.disabledDatesText,
-
- format : this.useIso ? 'Y-m-d' : this.format,
- minText : String.format(this.minText, this.formatDate(this.minValue)),
- maxText : String.format(this.maxText, this.formatDate(this.maxValue))
-
- });
- this.menu.on(Roo.apply({}, this.menuListeners, {
- scope:this
- }));
-
-
- var m = this.menu;
- var p = m.picker;
- // hide month picker get's called when we called by 'before hide';
+ var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
- var ignorehide = true;
- p.hideMonthPicker = function(disableAnim){
- if (ignorehide) {
- return;
- }
- if(this.monthPicker){
- Roo.log("hideMonthPicker called");
- if(disableAnim === true){
- this.monthPicker.hide();
- }else{
- this.monthPicker.slideOut('t', {duration:.2});
- p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
- p.fireEvent("select", this, this.value);
- m.hide();
+ obj.el.addClass(this.invalidClass);
+ msg = msg || this.invalidText;
+ switch(this.msgTarget){
+ case 'qtip':
+ obj.el.dom.qtip = msg;
+ obj.el.dom.qclass = 'x-form-invalid-tip';
+ if(Roo.QuickTips){ // fix for floating editors interacting with DND
+ Roo.QuickTips.enable();
}
- }
+ break;
+ case 'title':
+ this.el.dom.title = msg;
+ break;
+ case 'under':
+ if(!this.errorEl){
+ var elp = this.el.findParent('.x-form-element', 5, true);
+ this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
+ this.errorEl.setWidth(elp.getWidth(true)-20);
+ }
+ this.errorEl.update(msg);
+ Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
+ break;
+ case 'side':
+ if(!this.errorIcon){
+ var elp = this.el.findParent('.x-form-element', 5, true);
+ this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+ }
+ this.alignErrorIcon();
+ this.errorIcon.dom.qtip = msg;
+ this.errorIcon.dom.qclass = 'x-form-invalid-tip';
+ this.errorIcon.show();
+ this.on('resize', this.alignErrorIcon, this);
+ break;
+ default:
+ var t = Roo.getDom(this.msgTarget);
+ t.innerHTML = msg;
+ t.style.display = this.msgDisplay;
+ break;
}
+ this.fireEvent('invalid', this, msg);
+ },
+
+ // private
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
+ },
+
+ /**
+ * Clear any invalid styles/messages for this field
+ */
+ clearInvalid : function(){
+ if(!this.rendered || this.preventMark){ // not rendered
+ return;
+ }
+ var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
- Roo.log('picker set value');
- Roo.log(this.getValue());
- p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
- m.show(this.el, 'tl-bl?');
- ignorehide = false;
- // this will trigger hideMonthPicker..
-
-
- // hidden the day picker
- Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
-
-
-
-
-
- p.showMonthPicker.defer(100, p);
-
+ obj.el.removeClass(this.invalidClass);
+ switch(this.msgTarget){
+ case 'qtip':
+ obj.el.dom.qtip = '';
+ break;
+ case 'title':
+ this.el.dom.title = '';
+ break;
+ case 'under':
+ if(this.errorEl){
+ Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
+ }
+ break;
+ case 'side':
+ if(this.errorIcon){
+ this.errorIcon.dom.qtip = '';
+ this.errorIcon.hide();
+ this.un('resize', this.alignErrorIcon, this);
+ }
+ break;
+ default:
+ var t = Roo.getDom(this.msgTarget);
+ t.innerHTML = '';
+ t.style.display = 'none';
+ break;
+ }
+ this.fireEvent('valid', this);
+ },
+
+ /**
+ * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
+ * @return {Mixed} value The field value
+ */
+ getRawValue : function(){
+ var v = this.el.getValue();
-
+ return v;
},
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(v);
- }
- }
+ /**
+ * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
+ * @return {Mixed} value The field value
+ */
+ getValue : function(){
+ var v = this.el.getValue();
+
+ return v;
+ },
- /** @cfg {Boolean} grow @hide */
- /** @cfg {Number} growMin @hide */
- /** @cfg {Number} growMax @hide */
/**
- * @hide
- * @method autoSize
+ * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}.
+ * @param {Mixed} value The value to set
*/
-});/*
+ setRawValue : function(v){
+ return this.el.dom.value = (v === null || v === undefined ? '' : v);
+ },
+
+ /**
+ * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
+ * @param {Mixed} value The value to set
+ */
+ setValue : function(v){
+ this.value = v;
+ if(this.rendered){
+ this.el.dom.value = (v === null || v === undefined ? '' : v);
+ this.validate();
+ }
+ },
+
+ adjustSize : function(w, h){
+ var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
+ s.width = this.adjustWidth(this.el.dom.tagName, s.width);
+ return s;
+ },
+
+ adjustWidth : function(tag, w){
+ tag = tag.toLowerCase();
+ if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
+ if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
+ if(tag == 'input'){
+ return w + 2;
+ }
+ if(tag == 'textarea'){
+ return w-2;
+ }
+ }else if(Roo.isOpera){
+ if(tag == 'input'){
+ return w + 2;
+ }
+ if(tag == 'textarea'){
+ return w-2;
+ }
+ }
+ }
+ return w;
+ }
+});
+
+
+// anything other than normal should be considered experimental
+Roo.form.Field.msgFx = {
+ normal : {
+ show: function(msgEl, f){
+ msgEl.setDisplayed('block');
+ },
+
+ hide : function(msgEl, f){
+ msgEl.setDisplayed(false).update('');
+ }
+ },
+
+ slide : {
+ show: function(msgEl, f){
+ msgEl.slideIn('t', {stopFx:true});
+ },
+
+ hide : function(msgEl, f){
+ msgEl.slideOut('t', {stopFx:true,useDisplay:true});
+ }
+ },
+
+ slideRight : {
+ show: function(msgEl, f){
+ msgEl.fixDisplay();
+ msgEl.alignTo(f.el, 'tl-tr');
+ msgEl.slideIn('l', {stopFx:true});
+ },
+
+ hide : function(msgEl, f){
+ msgEl.slideOut('l', {stopFx:true,useDisplay:true});
+ }
+ }
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.form.ComboBox
- * @extends Roo.form.TriggerField
- * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @class Roo.form.TextField
+ * @extends Roo.form.Field
+ * Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base
+ * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
* @constructor
- * Create a new ComboBox.
+ * Creates a new TextField
* @param {Object} config Configuration options
*/
-Roo.form.ComboBox = function(config){
- Roo.form.ComboBox.superclass.constructor.call(this, config);
+Roo.form.TextField = function(config){
+ Roo.form.TextField.superclass.constructor.call(this, config);
this.addEvents({
/**
- * @event expand
- * Fires when the dropdown list is expanded
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'expand' : true,
- /**
- * @event collapse
- * Fires when the dropdown list is collapsed
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'collapse' : true,
- /**
- * @event beforeselect
- * Fires before a list item is selected. Return false to cancel the selection.
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record} record The data record returned from the underlying store
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'beforeselect' : true,
- /**
- * @event select
- * Fires when a list item is selected
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'select' : true,
- /**
- * @event beforequery
- * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
- * The event object passed has these properties:
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {String} query The query
- * @param {Boolean} forceAll true to force "all" query
- * @param {Boolean} cancel true to cancel the query
- * @param {Object} e The query event object
- */
- 'beforequery': true,
- /**
- * @event add
- * Fires when the 'add' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'add' : true,
- /**
- * @event edit
- * Fires when the 'edit' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+ * @event autosize
+ * Fires when the autosize function is triggered. The field may or may not have actually changed size
+ * according to the default logic, but this event provides a hook for the developer to apply additional
+ * logic at runtime to resize the field if needed.
+ * @param {Roo.form.Field} this This text field
+ * @param {Number} width The new field width
*/
- 'edit' : true
-
-
+ autosize : true
});
- if(this.transform){
- this.allowDomMove = false;
- var s = Roo.getDom(this.transform);
- if(!this.hiddenName){
- this.hiddenName = s.name;
- }
- if(!this.store){
- this.mode = 'local';
- var d = [], opts = s.options;
- for(var i = 0, len = opts.length;i < len; i++){
- var o = opts[i];
- var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
- if(o.selected) {
- this.value = value;
- }
- d.push([value, o.text]);
- }
- this.store = new Roo.data.SimpleStore({
- 'id': 0,
- fields: ['value', 'text'],
- data : d
- });
- this.valueField = 'value';
- this.displayField = 'text';
- }
- s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
- if(!this.lazyRender){
- this.target = true;
- this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
- s.parentNode.removeChild(s); // remove it
- this.render(this.el.parentNode);
- }else{
- s.parentNode.removeChild(s); // remove it
- }
-
- }
- if (this.store) {
- this.store = Roo.factory(this.store, Roo.data);
- }
-
- this.selectedIndex = -1;
- if(this.mode == 'local'){
- if(config.queryDelay === undefined){
- this.queryDelay = 10;
- }
- if(config.minChars === undefined){
- this.minChars = 0;
- }
- }
};
-Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
- /**
- * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
- */
- /**
- * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
- * rendering into an Roo.Editor, defaults to false)
- */
- /**
- * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
- * {tag: "input", type: "text", size: "24", autocomplete: "off"})
- */
- /**
- * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
- */
- /**
- * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
- * the dropdown list (defaults to undefined, with no header element)
- */
-
- /**
- * @cfg {String/Roo.Template} tpl The template to use to render the output
- */
-
- // private
- defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
- /**
- * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
- */
- listWidth: undefined,
- /**
- * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'text' if mode = 'local')
- */
- displayField: undefined,
- /**
- * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'value' if mode = 'local').
- * Note: use of a valueField requires the user make a selection
- * in order for a value to be mapped.
- */
- valueField: undefined,
-
-
- /**
- * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
- * field's data value (defaults to the underlying DOM element's name)
- */
- hiddenName: undefined,
- /**
- * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
- */
- listClass: '',
- /**
- * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
- */
- selectedClass: 'x-combo-selected',
- /**
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
- * which displays a downward arrow icon).
- */
- triggerClass : 'x-form-arrow-trigger',
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- */
- shadow:'sides',
- /**
- * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
- * anchor positions (defaults to 'tl-bl')
- */
- listAlign: 'tl-bl?',
- /**
- * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
- */
- maxHeight: 300,
- /**
- * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
- * query specified by the allQuery config option (defaults to 'query')
- */
- triggerAction: 'query',
- /**
- * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
- * (defaults to 4, does not apply if editable = false)
- */
- minChars : 4,
+Roo.extend(Roo.form.TextField, Roo.form.Field, {
/**
- * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
- * delay (typeAheadDelay) if it matches a known value (defaults to false)
+ * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
*/
- typeAhead: false,
+ grow : false,
/**
- * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
- * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+ * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
*/
- queryDelay: 500,
+ growMin : 30,
/**
- * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
- * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
+ * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
*/
- pageSize: 0,
+ growMax : 800,
/**
- * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
- * when editable = true (defaults to false)
+ * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
*/
- selectOnFocus:false,
+ vtype : null,
/**
- * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+ * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
*/
- queryParam: 'query',
+ maskRe : null,
/**
- * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
- * when mode = 'remote' (defaults to 'Loading...')
+ * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
*/
- loadingText: 'Loading...',
+ disableKeyFilter : false,
/**
- * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+ * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
*/
- resizable: false,
+ allowBlank : true,
/**
- * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+ * @cfg {Number} minLength Minimum input field length required (defaults to 0)
*/
- handleHeight : 8,
+ minLength : 0,
/**
- * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
- * traditional select (defaults to true)
+ * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
*/
- editable: true,
+ maxLength : Number.MAX_VALUE,
/**
- * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+ * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
*/
- allQuery: '',
+ minLengthText : "The minimum length for this field is {0}",
/**
- * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+ * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
*/
- mode: 'remote',
+ maxLengthText : "The maximum length for this field is {0}",
/**
- * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
- * listWidth has a higher value)
+ * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
*/
- minListWidth : 70,
+ selectOnFocus : false,
/**
- * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
- * allow the user to set arbitrary text into the field (defaults to false)
- */
- forceSelection:false,
+ * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space
+ */
+ allowLeadingSpace : false,
/**
- * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
- * if typeAhead = true (defaults to 250)
+ * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
*/
- typeAheadDelay : 250,
+ blankText : "This field is required",
/**
- * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
- * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+ * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
+ * If available, this function will be called only after the basic validators all return true, and will be passed the
+ * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
*/
- valueNotFoundText : undefined,
+ validator : null,
/**
- * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+ * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
+ * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
+ * current field value. If the test fails, the field will be marked invalid using {@link #regexText}.
*/
- blockFocus : false,
-
+ regex : null,
/**
- * @cfg {Boolean} disableClear Disable showing of clear button.
+ * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
*/
- disableClear : false,
+ regexText : "",
/**
- * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
*/
- alwaysQuery : false,
-
- //private
- addicon : false,
- editicon: false,
-
- // element that contains real text value.. (when hidden is used..)
-
+ emptyText : null,
+
+
// private
- onRender : function(ct, position)
+ initEvents : function()
{
- Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
+ if (this.emptyText) {
+ this.el.attr('placeholder', this.emptyText);
+ }
- if(this.hiddenName){
- this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
- 'before', true);
- this.hiddenField.value =
- this.hiddenValue !== undefined ? this.hiddenValue :
- this.value !== undefined ? this.value : '';
-
- // prevent input submission
- this.el.dom.removeAttribute('name');
-
-
+ Roo.form.TextField.superclass.initEvents.call(this);
+ if(this.validationEvent == 'keyup'){
+ this.validationTask = new Roo.util.DelayedTask(this.validate, this);
+ this.el.on('keyup', this.filterValidation, this);
+ }
+ else if(this.validationEvent !== false){
+ this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
+ }
+
+ if(this.selectOnFocus){
+ this.on("focus", this.preFocus, this);
}
+ if (!this.allowLeadingSpace) {
+ this.on('blur', this.cleanLeadingSpace, this);
+ }
- if(Roo.isGecko){
- this.el.dom.setAttribute('autocomplete', 'off');
+ if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
+ this.el.on("keypress", this.filterKeys, this);
}
-
- var cls = 'x-combo-list';
-
- this.list = new Roo.Layer({
- shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
- });
-
- var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.list.swallowEvent('mousewheel');
- this.assetHeight = 0;
-
- if(this.title){
- this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
- this.assetHeight += this.header.getHeight();
- }
-
- this.innerList = this.list.createChild({cls:cls+'-inner'});
- this.innerList.on('mouseover', this.onViewOver, this);
- this.innerList.on('mousemove', this.onViewMove, this);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
-
- if(this.allowBlank && !this.pageSize && !this.disableClear){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.Toolbar(this.footer);
-
- }
- if(this.pageSize){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
- {pageSize: this.pageSize});
-
- }
-
- if (this.pageTb && this.allowBlank && !this.disableClear) {
- var _this = this;
- this.pageTb.add(new Roo.Toolbar.Fill(), {
- cls: 'x-btn-icon x-btn-clear',
- text: ' ',
- handler: function()
- {
- _this.collapse();
- _this.clearValue();
- _this.onSelect(false, -1);
- }
- });
- }
- if (this.footer) {
- this.assetHeight += this.footer.getHeight();
- }
-
-
- if(!this.tpl){
- this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
- }
-
- this.view = new Roo.View(this.innerList, this.tpl, {
- singleSelect:true,
- store: this.store,
- selectedClass: this.selectedClass
- });
-
- this.view.on('click', this.onViewClick, this);
-
- this.store.on('beforeload', this.onBeforeLoad, this);
- this.store.on('load', this.onLoad, this);
- this.store.on('loadexception', this.onLoadException, this);
-
- if(this.resizable){
- this.resizer = new Roo.Resizable(this.list, {
- pinned:true, handles:'se'
- });
- this.resizer.on('resize', function(r, w, h){
- this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
- this.listWidth = w;
- this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
- this.restrictHeight();
- }, this);
- this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
- }
- if(!this.editable){
- this.editable = true;
- this.setEditable(false);
- }
-
-
- if (typeof(this.events.add.listeners) != 'undefined') {
-
- this.addicon = this.wrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
-
- this.addicon.on('click', function(e) {
- this.fireEvent('add', this);
- }, this);
+ if(this.grow){
+ this.el.on("keyup", this.onKeyUp, this, {buffer:50});
+ this.el.on("click", this.autoSize, this);
}
- if (typeof(this.events.edit.listeners) != 'undefined') {
-
- this.editicon = this.wrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
- if (this.addicon) {
- this.editicon.setStyle('margin-left', '40px');
- }
- this.editicon.on('click', function(e) {
-
- // we fire even if inothing is selected..
- this.fireEvent('edit', this, this.lastData );
-
- }, this);
+ if(this.el.is('input[type=password]') && Roo.isSafari){
+ this.el.on('keydown', this.SafariOnKeyDown, this);
}
-
-
-
},
- // private
- initEvents : function(){
- Roo.form.ComboBox.superclass.initEvents.call(this);
-
- this.keyNav = new Roo.KeyNav(this.el, {
- "up" : function(e){
- this.inKeyMode = true;
- this.selectPrev();
- },
-
- "down" : function(e){
- if(!this.isExpanded()){
- this.onTriggerClick();
- }else{
- this.inKeyMode = true;
- this.selectNext();
- }
- },
-
- "enter" : function(e){
- this.onViewClick();
- //return true;
- },
-
- "esc" : function(e){
- this.collapse();
- },
-
- "tab" : function(e){
- this.onViewClick(false);
- this.fireEvent("specialkey", this, e);
- return true;
- },
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- if(hname == 'down' || this.scope.isExpanded()){
- return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
- }
- return true;
- },
-
- forceKeyDown: true
- });
- this.queryDelay = Math.max(this.queryDelay || 10,
- this.mode == 'local' ? 10 : 250);
- this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
- if(this.typeAhead){
- this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
- }
- if(this.editable !== false){
- this.el.on("keyup", this.onKeyUp, this);
- }
- if(this.forceSelection){
- this.on('blur', this.doForce, this);
+ processValue : function(value){
+ if(this.stripCharsRe){
+ var newValue = value.replace(this.stripCharsRe, '');
+ if(newValue !== value){
+ this.setRawValue(newValue);
+ return newValue;
+ }
}
+ return value;
},
- onDestroy : function(){
- if(this.view){
- this.view.setStore(null);
- this.view.el.removeAllListeners();
- this.view.el.remove();
- this.view.purgeListeners();
- }
- if(this.list){
- this.list.destroy();
- }
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
+ filterValidation : function(e){
+ if(!e.isNavKeyPress()){
+ this.validationTask.delay(this.validationDelay);
}
- Roo.form.ComboBox.superclass.onDestroy.call(this);
},
// private
- fireKey : function(e){
- if(e.isNavKeyPress() && !this.list.isVisible()){
- this.fireEvent("specialkey", this, e);
+ onKeyUp : function(e){
+ if(!e.isNavKeyPress()){
+ this.autoSize();
}
},
-
- // private
- onResize: function(w, h){
- Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
-
- if(typeof w != 'number'){
- // we do not handle it!?!?
+ // private - clean the leading white space
+ cleanLeadingSpace : function(e)
+ {
+ if ( this.inputType == 'file') {
return;
}
- var tw = this.trigger.getWidth();
- tw += this.addicon ? this.addicon.getWidth() : 0;
- tw += this.editicon ? this.editicon.getWidth() : 0;
- var x = w - tw;
- this.el.setWidth( this.adjustWidth('input', x));
-
- this.trigger.setStyle('left', x+'px');
-
- if(this.list && this.listWidth === undefined){
- var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
- }
-
-
+ this.setValue((this.getValue() + '').replace(/^\s+/,''));
},
-
/**
- * Allow or prevent the user from directly editing the field text. If false is passed,
- * the user will only be able to select from the items defined in the dropdown list. This method
- * is the runtime equivalent of setting the 'editable' config option at config time.
- * @param {Boolean} value True to allow the user to directly edit the field text
+ * Resets the current field value to the originally-loaded value and clears any validation messages.
+ *
*/
- setEditable : function(value){
- if(value == this.editable){
- return;
- }
- this.editable = value;
- if(!value){
- this.el.dom.setAttribute('readOnly', true);
- this.el.on('mousedown', this.onTriggerClick, this);
- this.el.addClass('x-combo-noedit');
- }else{
- this.el.dom.setAttribute('readOnly', false);
- this.el.un('mousedown', this.onTriggerClick, this);
- this.el.removeClass('x-combo-noedit');
+ reset : function(){
+ Roo.form.TextField.superclass.reset.call(this);
+
+ },
+ // private
+ preFocus : function(){
+
+ if(this.selectOnFocus){
+ this.el.dom.select();
}
},
+
// private
- onBeforeLoad : function(){
- if(!this.hasFocus){
+ filterKeys : function(e){
+ var k = e.getKey();
+ if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
return;
}
- this.innerList.update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- this.restrictHeight();
- this.selectedIndex = -1;
- },
-
- // private
- onLoad : function(){
- if(!this.hasFocus){
+ var c = e.getCharCode(), cc = String.fromCharCode(c);
+ if(Roo.isIE && (e.isSpecialKey() || !cc)){
return;
}
- if(this.store.getCount() > 0){
- this.expand();
- this.restrictHeight();
- if(this.lastQuery == this.allQuery){
- if(this.editable){
- this.el.dom.select();
- }
- if(!this.selectByValue(this.value, true)){
- this.select(0, true);
- }
- }else{
- this.selectNext();
- if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
- this.taTask.delay(this.typeAheadDelay);
- }
- }
- }else{
- this.onEmptyResults();
+ if(!this.maskRe.test(cc)){
+ e.stopEvent();
}
- //this.el.focus();
},
- // private
- onLoadException : function()
- {
- this.collapse();
- Roo.log(this.store.reader.jsonData);
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
- }
+
+ setValue : function(v){
+ Roo.form.TextField.superclass.setValue.apply(this, arguments);
- },
- // private
- onTypeAhead : function(){
- if(this.store.getCount() > 0){
- var r = this.store.getAt(0);
- var newValue = r.data[this.displayField];
- var len = newValue.length;
- var selStart = this.getRawValue().length;
- if(selStart != len){
- this.setRawValue(newValue);
- this.selectText(selStart, newValue.length);
- }
- }
- },
-
- // private
- onSelect : function(record, index){
- if(this.fireEvent('beforeselect', this, record, index) !== false){
- this.setFromData(index > -1 ? record.data : false);
- this.collapse();
- this.fireEvent('select', this, record, index);
- }
+ this.autoSize();
},
/**
- * Returns the currently selected field value or empty string if no value is set.
- * @return {String} value The selected value
+ * Validates a value according to the field's validation rules and marks the field as invalid
+ * if the validation fails
+ * @param {Mixed} value The value to validate
+ * @return {Boolean} True if the value is valid, else false
*/
- getValue : function(){
- if(this.valueField){
- return typeof this.value != 'undefined' ? this.value : '';
+ validateValue : function(value){
+ if(value.length < 1) { // if it's blank
+ if(this.allowBlank){
+ this.clearInvalid();
+ return true;
+ }else{
+ this.markInvalid(this.blankText);
+ return false;
+ }
}
- return Roo.form.ComboBox.superclass.getValue.call(this);
+ if(value.length < this.minLength){
+ this.markInvalid(String.format(this.minLengthText, this.minLength));
+ return false;
+ }
+ if(value.length > this.maxLength){
+ this.markInvalid(String.format(this.maxLengthText, this.maxLength));
+ return false;
+ }
+ if(this.vtype){
+ var vt = Roo.form.VTypes;
+ if (value.trim() != value) { // trim before checking email (and other stuf??)
+ value = value.trim();
+ this.el.dom.value = value;
+ }
+
+ if(!vt[this.vtype](value, this)){
+ this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
+ return false;
+ }
+ }
+ if(typeof this.validator == "function"){
+ var msg = this.validator(value);
+ if(msg !== true){
+ this.markInvalid(msg);
+ return false;
+ }
+ }
+ if(this.regex && !this.regex.test(value)){
+ this.markInvalid(this.regexText);
+ return false;
+ }
+ return true;
},
/**
- * Clears any text/value currently set in the field
+ * Selects text in this field
+ * @param {Number} start (optional) The index where the selection should start (defaults to 0)
+ * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
*/
- clearValue : function(){
- if(this.hiddenField){
- this.hiddenField.value = '';
+ selectText : function(start, end){
+ var v = this.getRawValue();
+ if(v.length > 0){
+ start = start === undefined ? 0 : start;
+ end = end === undefined ? v.length : end;
+ var d = this.el.dom;
+ if(d.setSelectionRange){
+ d.setSelectionRange(start, end);
+ }else if(d.createTextRange){
+ var range = d.createTextRange();
+ range.moveStart("character", start);
+ range.moveEnd("character", v.length-end);
+ range.select();
+ }
}
- this.value = '';
- this.setRawValue('');
- this.lastSelectionText = '';
-
},
/**
- * Sets the specified value into the field. If the value finds a match, the corresponding record text
- * will be displayed in the field. If the value does not match the data value of an existing item,
- * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
- * Otherwise the field will be blank (although the value will still be set).
- * @param {String} value The value to match
+ * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
+ * This only takes effect if grow = true, and fires the autosize event.
*/
- setValue : function(v){
- var text = v;
- if(this.valueField){
- var r = this.findRecord(this.valueField, v);
- if(r){
- text = r.data[this.displayField];
- }else if(this.valueNotFoundText !== undefined){
- text = this.valueNotFoundText;
- }
+ autoSize : function(){
+ if(!this.grow || !this.rendered){
+ return;
}
- this.lastSelectionText = text;
- if(this.hiddenField){
- this.hiddenField.value = v;
+ if(!this.metrics){
+ this.metrics = Roo.util.TextMetrics.createInstance(this.el);
}
- Roo.form.ComboBox.superclass.setValue.call(this, text);
- this.value = v;
+ var el = this.el;
+ var v = el.dom.value;
+ var d = document.createElement('div');
+ d.appendChild(document.createTextNode(v));
+ v = d.innerHTML;
+ d = null;
+ v += " ";
+ var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
+ this.el.setWidth(w);
+ this.fireEvent("autosize", this, w);
},
- /**
- * @property {Object} the last set data for the element
- */
- lastData : false,
- /**
- * Sets the value of the field based on a object which is related to the record format for the store.
- * @param {Object} value the value to set as. or false on reset?
- */
- setFromData : function(o){
- var dv = ''; // display value
- var vv = ''; // value value..
- this.lastData = o;
- if (this.displayField) {
- dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
- } else {
- // this is an error condition!!!
- Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
- }
+ // private
+ SafariOnKeyDown : function(event)
+ {
+ // this is a workaround for a password hang bug on chrome/ webkit.
- if(this.valueField){
- vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
+ var isSelectAll = false;
+
+ if(this.el.dom.selectionEnd > 0){
+ isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
}
- if(this.hiddenField){
- this.hiddenField.value = vv;
-
- this.lastSelectionText = dv;
- Roo.form.ComboBox.superclass.setValue.call(this, dv);
- this.value = vv;
+ if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
+ event.preventDefault();
+ this.setValue('');
return;
}
- // no hidden field.. - we store the value in 'value', but still display
- // display field!!!!
- this.lastSelectionText = dv;
- Roo.form.ComboBox.superclass.setValue.call(this, dv);
- this.value = vv;
-
- },
- // private
- reset : function(){
- // overridden so that last data is reset..
- this.setValue(this.resetValue);
- this.originalValue = this.getValue();
- this.clearInvalid();
- this.lastData = false;
- if (this.view) {
- this.view.clearSelections();
+ // skip handling paste
+ if(isSelectAll && event.getCharCode() > 31 && !(event.ctrlKey && event.getCharCode() == 86)){ // backspace and delete key
+
+ event.preventDefault();
+ // this is very hacky as keydown always get's upper case.
+
+ var cc = String.fromCharCode(event.getCharCode());
+
+
+ this.setValue( event.shiftKey ? cc : cc.toLowerCase());
+
}
- },
- // private
- findRecord : function(prop, value){
- var record;
- if(this.store.getCount() > 0){
- this.store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- return false;
- }
- return true;
- });
- }
- return record;
+
+
+ }
+});Roo.form.Password = function(config){
+ Roo.form.Password.superclass.constructor.call(this, config);
+
+ this.inputType = 'password';
+};
+
+Roo.extend(Roo.form.Password, Roo.form.TextField, {
+ onRender : function(ct, position)
+ {
+ Roo.form.Password.superclass.onRender.call(this, ct, position);
+
+ this.parentEl().addClass('form-password');
+
+ this.wrap = this.el.wrap({
+ cls : 'password-wrap'
+ });
+
+ this.toggle = this.wrap.createChild({
+ tag : 'Button',
+ cls : 'password-toggle'
+ });
+
+
+ this.toggleEl().addClass('password-hidden');
+
+ this.toggleEl().on('click', this.onToggleClick, this);;
},
- getName: function()
+ parentEl : function()
{
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
-
+ return this.el.findParent('.x-form-element', 5, true);
},
- // private
- onViewMove : function(e, t){
- this.inKeyMode = false;
+
+ toggleEl: function()
+ {
+ return this.parentEl().select('button.password-toggle',true).first();
},
- // private
- onViewOver : function(e, t){
- if(this.inKeyMode){ // prevent key nav and mouse over conflicts
- return;
+ onToggleClick : function(e)
+ {
+ var input = this.el;
+ var toggle = this.toggleEl();
+
+ toggle.removeClass(['password-visible', 'password-hidden']);
+
+ if(input.attr('type') == 'password') {
+ input.attr('type', 'text');
+ toggle.addClass('password-visible');
}
- var item = this.view.findItemFromChild(t);
- if(item){
- var index = this.view.indexOf(item);
- this.select(index, false);
+ else {
+ input.attr('type', 'password');
+ toggle.addClass('password-hidden');
}
- },
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Hidden
+ * @extends Roo.form.TextField
+ * Simple Hidden element used on forms
+ *
+ * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
+ *
+ * @constructor
+ * Creates a new Hidden form element.
+ * @param {Object} config Configuration options
+ */
+
+
+
+// easy hidden field...
+Roo.form.Hidden = function(config){
+ Roo.form.Hidden.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
+ fieldLabel: '',
+ inputType: 'hidden',
+ width: 50,
+ allowBlank: true,
+ labelSeparator: '',
+ hidden: true,
+ itemCls : 'x-form-item-display-none'
+
+
+});
+
+
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.TriggerField
+ * @extends Roo.form.TextField
+ * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
+ * The trigger has no default action, so you must assign a function to implement the trigger click handler by
+ * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
+ * for which you can provide a custom implementation. For example:
+ * <pre><code>
+var trigger = new Roo.form.TriggerField();
+trigger.onTriggerClick = myTriggerFn;
+trigger.applyTo('my-field');
+</code></pre>
+ *
+ * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
+ * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
+ * @constructor
+ * Create a new TriggerField.
+ * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
+ * to the base TextField)
+ */
+Roo.form.TriggerField = function(config){
+ this.mimicing = false;
+ Roo.form.TriggerField.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
+ /**
+ * @cfg {String} triggerClass A CSS class to apply to the trigger
+ */
+ /**
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "16", autocomplete: "off"})
+ */
+ defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
+ /**
+ * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
+ */
+ hideTrigger:false,
+
+ /** @cfg {Boolean} grow @hide */
+ /** @cfg {Number} growMin @hide */
+ /** @cfg {Number} growMax @hide */
+ /**
+ * @hide
+ * @method
+ */
+ autoSize: Roo.emptyFn,
// private
- onViewClick : function(doFocus)
- {
- var index = this.view.getSelectedIndexes()[0];
- var r = this.store.getAt(index);
- if(r){
- this.onSelect(r, index);
- }
- if(doFocus !== false && !this.blockFocus){
- this.el.focus();
+ monitorTab : true,
+ // private
+ deferHeight : true,
+
+
+ actionMode : 'wrap',
+ // private
+ onResize : function(w, h){
+ Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
+ if(typeof w == 'number'){
+ var x = w - this.trigger.getWidth();
+ this.el.setWidth(this.adjustWidth('input', x));
+ this.trigger.setStyle('left', x+'px');
}
},
// private
- restrictHeight : function(){
- this.innerList.dom.style.height = '';
- var inner = this.innerList.dom;
- var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
- this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
- this.list.beginUpdate();
- this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
- this.list.alignTo(this.el, this.listAlign);
- this.list.endUpdate();
+ adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+ // private
+ getResizeEl : function(){
+ return this.wrap;
},
// private
- onEmptyResults : function(){
- this.collapse();
+ getPositionEl : function(){
+ return this.wrap;
},
- /**
- * Returns true if the dropdown list is expanded, else false.
- */
- isExpanded : function(){
- return this.list.isVisible();
+ // private
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
},
- /**
- * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {String} value The data value of the item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- * @return {Boolean} True if the value matched an item in the list, else false
- */
- selectByValue : function(v, scrollIntoView){
- if(v !== undefined && v !== null){
- var r = this.findRecord(this.valueField || this.displayField, v);
- if(r){
- this.select(this.store.indexOf(r), scrollIntoView);
- return true;
- }
+ // private
+ onRender : function(ct, position){
+ Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
+ this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
+ this.trigger = this.wrap.createChild(this.triggerConfig ||
+ {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
+ if(this.hideTrigger){
+ this.trigger.setDisplayed(false);
+ }
+ this.initTrigger();
+ if(!this.width){
+ this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
}
- return false;
},
- /**
- * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {Number} index The zero-based index of the list item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- */
- select : function(index, scrollIntoView){
- this.selectedIndex = index;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.innerList.scrollChildIntoView(el, false);
- }
- }
+ // private
+ initTrigger : function(){
+ this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
+ this.trigger.addClassOnOver('x-form-trigger-over');
+ this.trigger.addClassOnClick('x-form-trigger-click');
},
// private
- selectNext : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex < ct-1){
- this.select(this.selectedIndex+1);
- }
+ onDestroy : function(){
+ if(this.trigger){
+ this.trigger.removeAllListeners();
+ this.trigger.remove();
}
+ if(this.wrap){
+ this.wrap.remove();
+ }
+ Roo.form.TriggerField.superclass.onDestroy.call(this);
},
// private
- selectPrev : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex != 0){
- this.select(this.selectedIndex-1);
+ onFocus : function(){
+ Roo.form.TriggerField.superclass.onFocus.call(this);
+ if(!this.mimicing){
+ this.wrap.addClass('x-trigger-wrap-focus');
+ this.mimicing = true;
+ Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
+ if(this.monitorTab){
+ this.el.on("keydown", this.checkTab, this);
}
}
},
// private
- onKeyUp : function(e){
- if(this.editable !== false && !e.isSpecialKey()){
- this.lastKey = e.getKey();
- this.dqTask.delay(this.queryDelay);
+ checkTab : function(e){
+ if(e.getKey() == e.TAB){
+ this.triggerBlur();
}
},
// private
- validateBlur : function(){
- return !this.list || !this.list.isVisible();
+ onBlur : function(){
+ // do nothing
},
// private
- initQuery : function(){
- this.doQuery(this.getRawValue());
+ mimicBlur : function(e, t){
+ if(!this.wrap.contains(t) && this.validateBlur()){
+ this.triggerBlur();
+ }
},
// private
- doForce : function(){
- if(this.el.dom.value.length > 0){
- this.el.dom.value =
- this.lastSelectionText === undefined ? '' : this.lastSelectionText;
-
+ triggerBlur : function(){
+ this.mimicing = false;
+ Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
+ if(this.monitorTab){
+ this.el.un("keydown", this.checkTab, this);
}
+ this.wrap.removeClass('x-trigger-wrap-focus');
+ Roo.form.TriggerField.superclass.onBlur.call(this);
},
- /**
- * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
- * query allowing the query action to be canceled if needed.
- * @param {String} query The SQL query to execute
- * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
- * in the field than the minimum specified by the minChars config option. It also clears any filter previously
- * saved in the current store (defaults to false)
- */
- doQuery : function(q, forceAll){
- if(q === undefined || q === null){
- q = '';
- }
- var qe = {
- query: q,
- forceAll: forceAll,
- combo: this,
- cancel:false
- };
- if(this.fireEvent('beforequery', qe)===false || qe.cancel){
- return false;
- }
- q = qe.query;
- forceAll = qe.forceAll;
- if(forceAll === true || (q.length >= this.minChars)){
- if(this.lastQuery != q || this.alwaysQuery){
- this.lastQuery = q;
- if(this.mode == 'local'){
- this.selectedIndex = -1;
- if(forceAll){
- this.store.clearFilter();
- }else{
- this.store.filter(this.displayField, q);
- }
- this.onLoad();
- }else{
- this.store.baseParams[this.queryParam] = q;
- this.store.load({
- params: this.getParams(q)
- });
- this.expand();
- }
- }else{
- this.selectedIndex = -1;
- this.onLoad();
- }
- }
+ // private
+ // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
+ validateBlur : function(e, t){
+ return true;
},
// private
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
+ onDisable : function(){
+ Roo.form.TriggerField.superclass.onDisable.call(this);
+ if(this.wrap){
+ this.wrap.addClass('x-item-disabled');
}
- return p;
},
- /**
- * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
- */
- collapse : function(){
- if(!this.isExpanded()){
- return;
- }
- this.list.hide();
- Roo.get(document).un('mousedown', this.collapseIf, this);
- Roo.get(document).un('mousewheel', this.collapseIf, this);
- if (!this.editable) {
- Roo.get(document).un('keydown', this.listKeyPress, this);
+ // private
+ onEnable : function(){
+ Roo.form.TriggerField.superclass.onEnable.call(this);
+ if(this.wrap){
+ this.wrap.removeClass('x-item-disabled');
}
- this.fireEvent('collapse', this);
},
// private
- collapseIf : function(e){
- if(!e.within(this.wrap) && !e.within(this.list)){
- this.collapse();
+ onShow : function(){
+ var ae = this.getActionEl();
+
+ if(ae){
+ ae.dom.style.display = '';
+ ae.dom.style.visibility = 'visible';
}
},
+ // private
+
+ onHide : function(){
+ var ae = this.getActionEl();
+ ae.dom.style.display = 'none';
+ },
+
/**
- * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+ * The function that should handle the trigger's click event. This method does nothing by default until overridden
+ * by an implementing function.
+ * @method
+ * @param {EventObject} e
*/
- expand : function(){
- if(this.isExpanded() || !this.hasFocus){
- return;
- }
- this.list.alignTo(this.el, this.listAlign);
- this.list.show();
- Roo.get(document).on('mousedown', this.collapseIf, this);
- Roo.get(document).on('mousewheel', this.collapseIf, this);
- if (!this.editable) {
- Roo.get(document).on('keydown', this.listKeyPress, this);
- }
-
- this.fireEvent('expand', this);
+ onTriggerClick : Roo.emptyFn
+});
+
+// TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
+// to be extended by an implementing class. For an example of implementing this class, see the custom
+// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
+Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
+ initComponent : function(){
+ Roo.form.TwinTriggerField.superclass.initComponent.call(this);
+
+ this.triggerConfig = {
+ tag:'span', cls:'x-form-twin-triggers', cn:[
+ {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
+ {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
+ ]};
},
- // private
- // Implements the default empty TriggerField.onTriggerClick function
- onTriggerClick : function(){
- if(this.disabled){
- return;
- }
- if(this.isExpanded()){
- this.collapse();
- if (!this.blockFocus) {
- this.el.focus();
- }
-
- }else {
- this.hasFocus = true;
- if(this.triggerAction == 'all') {
- this.doQuery(this.allQuery, true);
- } else {
- this.doQuery(this.getRawValue());
- }
- if (!this.blockFocus) {
- this.el.focus();
+ getTrigger : function(index){
+ return this.triggers[index];
+ },
+
+ initTrigger : function(){
+ var ts = this.trigger.select('.x-form-trigger', true);
+ this.wrap.setStyle('overflow', 'hidden');
+ var triggerField = this;
+ ts.each(function(t, all, index){
+ t.hide = function(){
+ var w = triggerField.wrap.getWidth();
+ this.dom.style.display = 'none';
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ };
+ t.show = function(){
+ var w = triggerField.wrap.getWidth();
+ this.dom.style.display = '';
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ };
+ var triggerIndex = 'Trigger'+(index+1);
+
+ if(this['hide'+triggerIndex]){
+ t.dom.style.display = 'none';
}
- }
+ t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
+ t.addClassOnOver('x-form-trigger-over');
+ t.addClassOnClick('x-form-trigger-click');
+ }, this);
+ this.triggers = ts.elements;
},
- listKeyPress : function(e)
- {
- //Roo.log('listkeypress');
- // scroll to first matching element based on key pres..
- if (e.isSpecialKey()) {
- return false;
+
+ onTrigger1Click : Roo.emptyFn,
+ onTrigger2Click : Roo.emptyFn
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.TextArea
+ * @extends Roo.form.TextField
+ * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
+ * support for auto-sizing.
+ * @constructor
+ * Creates a new TextArea
+ * @param {Object} config Configuration options
+ */
+Roo.form.TextArea = function(config){
+ Roo.form.TextArea.superclass.constructor.call(this, config);
+ // these are provided exchanges for backwards compat
+ // minHeight/maxHeight were replaced by growMin/growMax to be
+ // compatible with TextField growing config values
+ if(this.minHeight !== undefined){
+ this.growMin = this.minHeight;
+ }
+ if(this.maxHeight !== undefined){
+ this.growMax = this.maxHeight;
+ }
+};
+
+Roo.extend(Roo.form.TextArea, Roo.form.TextField, {
+ /**
+ * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
+ */
+ growMin : 60,
+ /**
+ * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
+ */
+ growMax: 1000,
+ /**
+ * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
+ * in the field (equivalent to setting overflow: hidden, defaults to false)
+ */
+ preventScrollbars: false,
+ /**
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
+ */
+
+ // private
+ onRender : function(ct, position){
+ if(!this.el){
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:"width:300px;height:60px;",
+ autocomplete: "new-password"
+ };
}
- var k = String.fromCharCode(e.getKey()).toUpperCase();
- //Roo.log(k);
- var match = false;
- var csel = this.view.getSelectedNodes();
- var cselitem = false;
- if (csel.length) {
- var ix = this.view.indexOf(csel[0]);
- cselitem = this.store.getAt(ix);
- if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
- cselitem = false;
+ Roo.form.TextArea.superclass.onRender.call(this, ct, position);
+ if(this.grow){
+ this.textSizeEl = Roo.DomHelper.append(document.body, {
+ tag: "pre", cls: "x-form-grow-sizer"
+ });
+ if(this.preventScrollbars){
+ this.el.setStyle("overflow", "hidden");
}
-
+ this.el.setHeight(this.growMin);
}
-
- this.store.each(function(v) {
- if (cselitem) {
- // start at existing selection.
- if (cselitem.id == v.id) {
- cselitem = false;
- }
- return;
- }
-
- if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
- match = this.store.indexOf(v);
- return false;
- }
- }, this);
-
- if (match === false) {
- return true; // no more action?
+ },
+
+ onDestroy : function(){
+ if(this.textSizeEl){
+ this.textSizeEl.parentNode.removeChild(this.textSizeEl);
+ }
+ Roo.form.TextArea.superclass.onDestroy.call(this);
+ },
+
+ // private
+ onKeyUp : function(e){
+ if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
+ this.autoSize();
}
- // scroll to?
- this.view.select(match);
- var sn = Roo.get(this.view.getSelectedNodes()[0]);
- sn.scrollIntoView(sn.dom.parentNode, false);
},
- cleanLeadingSpace : function()
- {
- // override textfield strip white space (trigers set on blur)
- }
- /**
- * @cfg {Boolean} grow
- * @hide
- */
- /**
- * @cfg {Number} growMin
- * @hide
- */
- /**
- * @cfg {Number} growMax
- * @hide
- */
/**
- * @hide
- * @method autoSize
+ * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
+ * This only takes effect if grow = true, and fires the autosize event if the height changes.
*/
+ autoSize : function(){
+ if(!this.grow || !this.textSizeEl){
+ return;
+ }
+ var el = this.el;
+ var v = el.dom.value;
+ var ts = this.textSizeEl;
+
+ ts.innerHTML = '';
+ ts.appendChild(document.createTextNode(v));
+ v = ts.innerHTML;
+
+ Roo.fly(ts).setWidth(this.el.getWidth());
+ if(v.length < 1){
+ v = "  ";
+ }else{
+ if(Roo.isIE){
+ v = v.replace(/\n/g, '<p> </p>');
+ }
+ v += " \n ";
+ }
+ ts.innerHTML = v;
+ var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
+ if(h != this.lastHeight){
+ this.lastHeight = h;
+ this.el.setHeight(h);
+ this.fireEvent("autosize", this, h);
+ }
+ }
});/*
- * Copyright(c) 2010-2012, Roo J Solutions Limited
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
*
- * Licence LGPL
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
*
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
+
/**
- * @class Roo.form.ComboBoxArray
+ * @class Roo.form.NumberField
* @extends Roo.form.TextField
- * A facebook style adder... for lists of email / people / countries etc...
- * pick multiple items from a combo box, and shows each one.
- *
- * Fred [x] Brian [x] [Pick another |v]
- *
- *
- * For this to work: it needs various extra information
- * - normal combo problay has
- * name, hiddenName
- * + displayField, valueField
- *
- * For our purpose...
- *
- *
- * If we change from 'extends' to wrapping...
- *
- *
- *
-
-
+ * Numeric text field that provides automatic keystroke filtering and numeric validation.
* @constructor
- * Create a new ComboBoxArray.
+ * Creates a new NumberField
* @param {Object} config Configuration options
*/
-
-
-Roo.form.ComboBoxArray = function(config)
-{
- this.addEvents({
- /**
- * @event beforeremove
- * Fires before remove the value from the list
- * @param {Roo.form.ComboBoxArray} _self This combo box array
- * @param {Roo.form.ComboBoxArray.Item} item removed item
- */
- 'beforeremove' : true,
- /**
- * @event remove
- * Fires when remove the value from the list
- * @param {Roo.form.ComboBoxArray} _self This combo box array
- * @param {Roo.form.ComboBoxArray.Item} item removed item
- */
- 'remove' : true
-
-
- });
-
- Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
-
- this.items = new Roo.util.MixedCollection(false);
-
- // construct the child combo...
-
-
-
-
-
-
-}
+Roo.form.NumberField = function(config){
+ Roo.form.NumberField.superclass.constructor.call(this, config);
+};
-
-Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
-{
+Roo.extend(Roo.form.NumberField, Roo.form.TextField, {
/**
- * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
+ * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
*/
-
- lastData : false,
-
- // behavies liek a hiddne field
- inputType: 'hidden',
+ fieldClass: "x-form-field x-form-num-field",
/**
- * @cfg {Number} width The width of the box that displays the selected element
- */
- width: 300,
-
-
-
+ * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
+ */
+ allowDecimals : true,
/**
- * @cfg {String} name The name of the visable items on this form (eg. titles not ids)
+ * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
*/
- name : false,
+ decimalSeparator : ".",
/**
- * @cfg {String} hiddenName The hidden name of the field, often contains an comma seperated list of names
+ * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
*/
- hiddenName : false,
- /**
- * @cfg {String} seperator The value seperator normally ','
+ decimalPrecision : 2,
+ /**
+ * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
*/
- seperator : ',',
-
-
- // private the array of items that are displayed..
- items : false,
- // private - the hidden field el.
- hiddenEl : false,
- // private - the filed el..
- el : false,
-
- //validateValue : function() { return true; }, // all values are ok!
- //onAddClick: function() { },
-
- onRender : function(ct, position)
- {
-
- // create the standard hidden element
- //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
-
-
- // give fake names to child combo;
- this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
- this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
-
- this.combo = Roo.factory(this.combo, Roo.form);
- this.combo.onRender(ct, position);
- if (typeof(this.combo.width) != 'undefined') {
- this.combo.onResize(this.combo.width,0);
+ allowNegative : true,
+ /**
+ * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
+ */
+ minValue : Number.NEGATIVE_INFINITY,
+ /**
+ * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
+ */
+ maxValue : Number.MAX_VALUE,
+ /**
+ * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
+ */
+ minText : "The minimum value for this field is {0}",
+ /**
+ * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
+ */
+ maxText : "The maximum value for this field is {0}",
+ /**
+ * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
+ * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
+ */
+ nanText : "{0} is not a valid number",
+
+ // private
+ initEvents : function(){
+ Roo.form.NumberField.superclass.initEvents.call(this);
+ var allowed = "0123456789";
+ if(this.allowDecimals){
+ allowed += this.decimalSeparator;
}
-
- this.combo.initEvents();
-
- // assigned so form know we need to do this..
- this.store = this.combo.store;
- this.valueField = this.combo.valueField;
- this.displayField = this.combo.displayField ;
-
-
- this.combo.wrap.addClass('x-cbarray-grp');
-
- var cbwrap = this.combo.wrap.createChild(
- {tag: 'div', cls: 'x-cbarray-cb'},
- this.combo.el.dom
- );
-
-
- this.hiddenEl = this.combo.wrap.createChild({
- tag: 'input', type:'hidden' , name: this.hiddenName, value : ''
- });
- this.el = this.combo.wrap.createChild({
- tag: 'input', type:'hidden' , name: this.name, value : ''
- });
- // this.el.dom.removeAttribute("name");
-
-
- this.outerWrap = this.combo.wrap;
- this.wrap = cbwrap;
-
- this.outerWrap.setWidth(this.width);
- this.outerWrap.dom.removeChild(this.el.dom);
-
- this.wrap.dom.appendChild(this.el.dom);
- this.outerWrap.dom.removeChild(this.combo.trigger.dom);
- this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
-
- this.combo.trigger.setStyle('position','relative');
- this.combo.trigger.setStyle('left', '0px');
- this.combo.trigger.setStyle('top', '2px');
-
- this.combo.el.setStyle('vertical-align', 'text-bottom');
-
- //this.trigger.setStyle('vertical-align', 'top');
-
- // this should use the code from combo really... on('add' ....)
- if (this.adder) {
-
-
- this.adder = this.outerWrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});
- var _t = this;
- this.adder.on('click', function(e) {
- _t.fireEvent('adderclick', this, e);
- }, _t);
+ if(this.allowNegative){
+ allowed += "-";
}
- //var _t = this;
- //this.adder.on('click', this.onAddClick, _t);
-
-
- this.combo.on('select', function(cb, rec, ix) {
- this.addItem(rec.data);
-
- cb.setValue('');
- cb.el.dom.value = '';
- //cb.lastData = rec.data;
- // add to list
-
- }, this);
-
-
-
-
- },
-
-
- getName: function()
- {
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return this.hiddenName ? this.hiddenName : this.name;
-
+ this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
+ var keyPress = function(e){
+ var k = e.getKey();
+ if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+ return;
+ }
+ var c = e.getCharCode();
+ if(allowed.indexOf(String.fromCharCode(c)) === -1){
+ e.stopEvent();
+ }
+ };
+ this.el.on("keypress", keyPress, this);
},
-
-
- onResize: function(w, h){
-
- return;
- // not sure if this is needed..
- //this.combo.onResize(w,h);
-
- if(typeof w != 'number'){
- // we do not handle it!?!?
- return;
+
+ // private
+ validateValue : function(value){
+ if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
+ return false;
}
- var tw = this.combo.trigger.getWidth();
- tw += this.addicon ? this.addicon.getWidth() : 0;
- tw += this.editicon ? this.editicon.getWidth() : 0;
- var x = w - tw;
- this.combo.el.setWidth( this.combo.adjustWidth('input', x));
-
- this.combo.trigger.setStyle('left', '0px');
-
- if(this.list && this.listWidth === undefined){
- var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
- this.list.setWidth(lw);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+ if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+ return true;
}
-
-
-
- },
-
- addItem: function(rec)
- {
- var valueField = this.combo.valueField;
- var displayField = this.combo.displayField;
-
- if (this.items.indexOfKey(rec[valueField]) > -1) {
- //console.log("GOT " + rec.data.id);
- return;
+ var num = this.parseValue(value);
+ if(isNaN(num)){
+ this.markInvalid(String.format(this.nanText, value));
+ return false;
}
-
- var x = new Roo.form.ComboBoxArray.Item({
- //id : rec[this.idField],
- data : rec,
- displayField : displayField ,
- tipField : displayField ,
- cb : this
- });
- // use the
- this.items.add(rec[valueField],x);
- // add it before the element..
- this.updateHiddenEl();
- x.render(this.outerWrap, this.wrap.dom);
- // add the image handler..
- },
-
- updateHiddenEl : function()
- {
- this.validate();
- if (!this.hiddenEl) {
- return;
+ if(num < this.minValue){
+ this.markInvalid(String.format(this.minText, this.minValue));
+ return false;
}
- var ar = [];
- var idField = this.combo.valueField;
-
- this.items.each(function(f) {
- ar.push(f.data[idField]);
- });
- this.hiddenEl.dom.value = ar.join(this.seperator);
- this.validate();
+ if(num > this.maxValue){
+ this.markInvalid(String.format(this.maxText, this.maxValue));
+ return false;
+ }
+ return true;
},
-
- reset : function()
- {
- this.items.clear();
-
- Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
- el.remove();
- });
-
- this.el.dom.value = '';
- if (this.hiddenEl) {
- this.hiddenEl.dom.value = '';
- }
-
- },
- getValue: function()
- {
- return this.hiddenEl ? this.hiddenEl.dom.value : '';
- },
- setValue: function(v) // not a valid action - must use addItems..
- {
-
- this.reset();
-
- if (this.store.isLocal && (typeof(v) == 'string')) {
- // then we can use the store to find the values..
- // comma seperated at present.. this needs to allow JSON based encoding..
- this.hiddenEl.value = v;
- var v_ar = [];
- Roo.each(v.split(this.seperator), function(k) {
- Roo.log("CHECK " + this.valueField + ',' + k);
- var li = this.store.query(this.valueField, k);
- if (!li.length) {
- return;
- }
- var add = {};
- add[this.valueField] = k;
- add[this.displayField] = li.item(0).data[this.displayField];
-
- this.addItem(add);
- }, this)
-
- }
- if (typeof(v) == 'object' ) {
- // then let's assume it's an array of objects..
- Roo.each(v, function(l) {
- var add = l;
- if (typeof(l) == 'string') {
- add = {};
- add[this.valueField] = l;
- add[this.displayField] = l
- }
- this.addItem(add);
- }, this);
-
- }
-
-
+
+ getValue : function(){
+ return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
},
- setFromData: function(v)
- {
- // this recieves an object, if setValues is called.
- this.reset();
- this.el.dom.value = v[this.displayField];
- this.hiddenEl.dom.value = v[this.valueField];
- if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
- return;
- }
- var kv = v[this.valueField];
- var dv = v[this.displayField];
- kv = typeof(kv) != 'string' ? '' : kv;
- dv = typeof(dv) != 'string' ? '' : dv;
-
-
- var keys = kv.split(this.seperator);
- var display = dv.split(this.seperator);
- for (var i = 0 ; i < keys.length; i++) {
- add = {};
- add[this.valueField] = keys[i];
- add[this.displayField] = display[i];
- this.addItem(add);
- }
-
-
+
+ // private
+ parseValue : function(value){
+ value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+ return isNaN(value) ? '' : value;
},
-
- /**
- * Validates the combox array value
- * @return {Boolean} True if the value is valid, else false
- */
- validate : function(){
- if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
- this.clearInvalid();
- return true;
+
+ // private
+ fixPrecision : function(value){
+ var nan = isNaN(value);
+ if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
+ return nan ? '' : value;
}
- return false;
- },
-
- validateValue : function(value){
- return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
-
+ return parseFloat(value).toFixed(this.decimalPrecision);
},
-
- /*@
- * overide
- *
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
-
- try {
- var d = Roo.decode(String(this.originalValue));
- } catch (e) {
- return String(this.getValue()) !== String(this.originalValue);
- }
-
- var originalValue = [];
-
- for (var i = 0; i < d.length; i++){
- originalValue.push(d[i][this.valueField]);
- }
-
- return String(this.getValue()) !== String(originalValue.join(this.seperator));
-
- }
-
-});
-
-
-
-/**
- * @class Roo.form.ComboBoxArray.Item
- * @extends Roo.BoxComponent
- * A selected item in the list
- * Fred [x] Brian [x] [Pick another |v]
- *
- * @constructor
- * Create a new item.
- * @param {Object} config Configuration options
- */
-
-Roo.form.ComboBoxArray.Item = function(config) {
- config.id = Roo.id();
- Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
-}
-Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
- data : {},
- cb: false,
- displayField : false,
- tipField : false,
-
-
- defaultAutoCreate : {
- tag: 'div',
- cls: 'x-cbarray-item',
- cn : [
- { tag: 'div' },
- {
- tag: 'img',
- width:16,
- height : 16,
- src : Roo.BLANK_IMAGE_URL ,
- align: 'center'
- }
- ]
-
+ setValue : function(v){
+ v = this.fixPrecision(v);
+ Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
},
-
-
- onRender : function(ct, position)
- {
- Roo.form.Field.superclass.onRender.call(this, ct, position);
-
- if(!this.el){
- var cfg = this.getAutoCreate();
- this.el = ct.createChild(cfg, position);
- }
-
- this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
-
- this.el.child('div').dom.innerHTML = this.cb.renderer ?
- this.cb.renderer(this.data) :
- String.format('{0}',this.data[this.displayField]);
-
-
- this.el.child('div').dom.setAttribute('qtip',
- String.format('{0}',this.data[this.tipField])
- );
-
- this.el.child('img').on('click', this.remove, this);
-
+
+ // private
+ decimalPrecisionFcn : function(v){
+ return Math.floor(v);
},
-
- remove : function()
- {
- if(this.cb.disabled){
- return;
- }
-
- if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
- this.cb.items.remove(this);
- this.el.child('img').un('click', this.remove, this);
- this.el.remove();
- this.cb.updateHiddenEl();
- this.cb.fireEvent('remove', this.cb, this);
+ beforeBlur : function(){
+ var v = this.parseValue(this.getRawValue());
+ if(v){
+ this.setValue(v);
}
-
}
});/*
- * RooJS Library 1.1.1
- * Copyright(c) 2008-2011 Alan Knowles
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
*
- * License - LGPL
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
-
/**
- * @class Roo.form.ComboNested
- * @extends Roo.form.ComboBox
- * A combobox for that allows selection of nested items in a list,
- * eg.
- *
- * Book
- * -> red
- * -> green
- * Table
- * -> square
- * ->red
- * ->green
- * -> rectangle
- * ->green
- *
- *
- * @constructor
- * Create a new ComboNested
- * @param {Object} config Configuration options
+ * @class Roo.form.DateField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new DateField
+* @param {Object} config
*/
-Roo.form.ComboNested = function(config){
- Roo.form.ComboCheck.superclass.constructor.call(this, config);
- // should verify some data...
- // like
- // hiddenName = required..
- // displayField = required
- // valudField == required
- var req= [ 'hiddenName', 'displayField', 'valueField' ];
- var _t = this;
- Roo.each(req, function(e) {
- if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
- throw "Roo.form.ComboNested : missing value for: " + e;
- }
+Roo.form.DateField = function(config)
+{
+ Roo.form.DateField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+
+ /**
+ * @event select
+ * Fires when a date is selected
+ * @param {Roo.form.DateField} combo This combo box
+ * @param {Date} date The date selected
+ */
+ 'select' : true
+
});
-
+
+ if(typeof this.minValue == "string") {
+ this.minValue = this.parseDate(this.minValue);
+ }
+ if(typeof this.maxValue == "string") {
+ this.maxValue = this.parseDate(this.maxValue);
+ }
+ this.ddMatch = null;
+ if(this.disabledDates){
+ var dd = this.disabledDates;
+ var re = "(?:";
+ for(var i = 0; i < dd.length; i++){
+ re += dd[i];
+ if(i != dd.length-1) {
+ re += "|";
+ }
+ }
+ this.ddMatch = new RegExp(re + ")");
+ }
};
-Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
-
- /*
- * @config {Number} max Number of columns to show
+Roo.extend(Roo.form.DateField, Roo.form.TriggerField, {
+ /**
+ * @cfg {String} format
+ * The default date format string which can be overriden for localization support. The format must be
+ * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+ */
+ format : "m/d/y",
+ /**
+ * @cfg {String} altFormats
+ * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+ * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+ */
+ altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
+ /**
+ * @cfg {Array} disabledDays
+ * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+ */
+ disabledDays : null,
+ /**
+ * @cfg {String} disabledDaysText
+ * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+ */
+ disabledDaysText : "Disabled",
+ /**
+ * @cfg {Array} disabledDates
+ * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
+ * expression so they are very powerful. Some examples:
+ * <ul>
+ * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
+ * <li>["03/08", "09/16"] would disable those days for every year</li>
+ * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
+ * <li>["03/../2006"] would disable every day in March 2006</li>
+ * <li>["^03"] would disable every day in every March</li>
+ * </ul>
+ * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
+ * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ */
+ disabledDates : null,
+ /**
+ * @cfg {String} disabledDatesText
+ * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+ */
+ disabledDatesText : "Disabled",
+
+
+ /**
+ * @cfg {Date/String} zeroValue
+ * if the date is less that this number, then the field is rendered as empty
+ * default is 1800
+ */
+ zeroValue : '1800-01-01',
+
+
+ /**
+ * @cfg {Date/String} minValue
+ * The minimum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ minValue : null,
+ /**
+ * @cfg {Date/String} maxValue
+ * The maximum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ maxValue : null,
+ /**
+ * @cfg {String} minText
+ * The error text to display when the date in the cell is before minValue (defaults to
+ * 'The date in this field must be after {minValue}').
+ */
+ minText : "The date in this field must be equal to or after {0}",
+ /**
+ * @cfg {String} maxText
+ * The error text to display when the date in the cell is after maxValue (defaults to
+ * 'The date in this field must be before {maxValue}').
*/
+ maxText : "The date in this field must be equal to or before {0}",
+ /**
+ * @cfg {String} invalidText
+ * The error text to display when the date in the field is invalid (defaults to
+ * '{value} is not a valid date - it must be in the format {format}').
+ */
+ invalidText : "{0} is not a valid date - it must be in the format {1}",
+ /**
+ * @cfg {String} triggerClass
+ * An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
+ * which displays a calendar icon).
+ */
+ triggerClass : 'x-form-date-trigger',
- maxColumns : 3,
-
- list : null, // the outermost div..
- innerLists : null, // the
- views : null,
- stores : null,
+
+ /**
+ * @cfg {Boolean} useIso
+ * if enabled, then the date field will use a hidden field to store the
+ * real value as iso formated date. default (false)
+ */
+ useIso : false,
+ /**
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "10", autocomplete: "off"})
+ */
// private
- loadingChildren : false,
+ defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+
+ // private
+ hiddenField: false,
onRender : function(ct, position)
{
- Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
-
- if(this.hiddenName){
- this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
+ Roo.form.DateField.superclass.onRender.call(this, ct, position);
+ if (this.useIso) {
+ //this.el.dom.removeAttribute('name');
+ Roo.log("Changing name?");
+ this.el.dom.setAttribute('name', this.name + '____hidden___' );
+ this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
'before', true);
- this.hiddenField.value =
- this.hiddenValue !== undefined ? this.hiddenValue :
- this.value !== undefined ? this.value : '';
-
+ this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
// prevent input submission
- this.el.dom.removeAttribute('name');
-
-
- }
-
- if(Roo.isGecko){
- this.el.dom.setAttribute('autocomplete', 'off');
- }
-
- var cls = 'x-combo-list';
-
- this.list = new Roo.Layer({
- shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
- });
-
- var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.list.swallowEvent('mousewheel');
- this.assetHeight = 0;
-
- if(this.title){
- this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
- this.assetHeight += this.header.getHeight();
- }
- this.innerLists = [];
- this.views = [];
- this.stores = [];
- for (var i =0 ; i < this.maxColumns; i++) {
- this.onRenderList( cls, i);
+ this.hiddenName = this.name;
}
-
- // 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.allowBlank && !this.disableClear) {
- this.pageTb.add(new Roo.Toolbar.Fill(), {
- cls: 'x-btn-icon x-btn-clear',
- text: ' ',
- handler: function()
- {
- _this.collapse();
- _this.clearValue();
- _this.onSelect(false, -1);
- }
- });
- }
- if (this.footer) {
- this.assetHeight += this.footer.getHeight();
- }
-
},
- onRenderList : function ( cls, i)
+
+ // private
+ validateValue : function(value)
{
-
- var lw = Math.floor(
- ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
- );
-
- 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.setWidth(lw);
- il.setStyle({ 'overflow-x' : 'hidden'});
-
- if(!this.tpl){
- 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'
- }
- });
+ value = this.formatDate(value);
+ if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
+ Roo.log('super failed');
+ return false;
}
-
- var store = this.store;
- if (i > 0) {
- store = new Roo.data.SimpleStore({
- //fields : this.store.reader.meta.fields,
- reader : this.store.reader,
- data : [ ]
- });
+ if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+ return true;
}
- this.stores[i] = store;
-
- var view = this.views[i] = new Roo.View(
- il,
- this.tpl,
- {
- singleSelect:true,
- store: store,
- selectedClass: this.selectedClass
+ var svalue = value;
+ value = this.parseDate(value);
+ if(!value){
+ Roo.log('parse date failed' + svalue);
+ this.markInvalid(String.format(this.invalidText, svalue, this.format));
+ return false;
+ }
+ var time = value.getTime();
+ if(this.minValue && time < this.minValue.getTime()){
+ this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
+ return false;
+ }
+ if(this.maxValue && time > this.maxValue.getTime()){
+ this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
+ return false;
+ }
+ if(this.disabledDays){
+ var day = value.getDay();
+ for(var i = 0; i < this.disabledDays.length; i++) {
+ if(day === this.disabledDays[i]){
+ this.markInvalid(this.disabledDaysText);
+ return false;
+ }
}
- );
- 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.createDelegate(this, {list : i }, true));
- view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
- //view.on('click', this.onViewClick, this, { list : i });
-
- store.on('beforeload', this.onBeforeLoad, this);
- store.on('load', this.onLoad, this, { list : i});
- store.on('loadexception', this.onLoadException, this);
-
- // hide the other vies..
-
-
-
+ }
+ var fvalue = this.formatDate(value);
+ if(this.ddMatch && this.ddMatch.test(fvalue)){
+ this.markInvalid(String.format(this.disabledDatesText, fvalue));
+ return false;
+ }
+ return true;
},
-
- restrictHeight : function()
- {
- var mh = 0;
- Roo.each(this.innerLists, function(il,i) {
- var el = this.views[i].getEl();
- el.dom.style.height = '';
- var inner = el.dom;
- var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
- // only adjust heights on other ones..
- mh = Math.max(h, mh);
- if (i < 1) {
-
- el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
- il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
-
- }
-
-
- }, this);
-
- this.list.beginUpdate();
- this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
- this.list.alignTo(this.el, this.listAlign);
- this.list.endUpdate();
-
+
+ // private
+ // Provides logic to override the default TriggerField.validateBlur which just returns true
+ validateBlur : function(){
+ return !this.menu || !this.menu.isVisible();
},
-
- // -- store handlers..
- // private
- onBeforeLoad : function()
+ getName: function()
{
- if(!this.hasFocus){
- return;
- }
- this.innerLists[0].update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- this.restrictHeight();
- this.selectedIndex = -1;
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+
},
- // private
- onLoad : function(a,b,c,d)
- {
- if (!this.loadingChildren) {
- // then we are loading the top level. - hide the children
- for (var i = 1;i < this.views.length; i++) {
- this.views[i].getEl().setStyle({ display : 'none' });
- }
- var lw = Math.floor(
- ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
- );
+
+ /**
+ * Returns the current date value of the date field.
+ * @return {Date} The date value
+ */
+ getValue : function(){
- this.list.setWidth(lw); // default to '1'
+ return this.hiddenField ?
+ this.hiddenField.value :
+ this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
+ },
-
- }
- if(!this.hasFocus){
- return;
+ /**
+ * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
+ * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
+ * (the default format used is "m/d/y").
+ * <br />Usage:
+ * <pre><code>
+//All of these calls set the same date value (May 4, 2006)
+
+//Pass a date object:
+var dt = new Date('5/4/06');
+dateField.setValue(dt);
+
+//Pass a date string (default format):
+dateField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+dateField.format = 'Y-m-d';
+dateField.setValue('2006-5-4');
+</code></pre>
+ * @param {String/Date} date The date or valid date string
+ */
+ setValue : function(date){
+ if (this.hiddenField) {
+ this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
}
+ Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+ // make sure the value field is always stored as a date..
+ this.value = this.parseDate(date);
- if(this.store.getCount() > 0) {
- this.expand();
- this.restrictHeight();
- } else {
- this.onEmptyResults();
- }
- if (!this.loadingChildren) {
- this.selectActive();
- }
- /*
- this.stores[1].loadData([]);
- this.stores[2].loadData([]);
- this.views
- */
-
- //this.el.focus();
},
-
-
+
// private
- onLoadException : function()
- {
- this.collapse();
- Roo.log(this.store.reader.jsonData);
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ parseDate : function(value){
+
+ if (value instanceof Date) {
+ if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ return '';
+ }
+ return value;
+ }
+
+
+ if(!value || value instanceof Date){
+ return value;
}
-
-
+ var v = Date.parseDate(value, this.format);
+ if (!v && this.useIso) {
+ v = Date.parseDate(value, 'Y-m-d');
+ }
+ if(!v && this.altFormats){
+ if(!this.altFormatsArray){
+ this.altFormatsArray = this.altFormats.split("|");
+ }
+ for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
+ v = Date.parseDate(value, this.altFormatsArray[i]);
+ }
+ }
+ if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ v = '';
+ }
+ return v;
},
- // no cleaning of leading spaces on blur here.
- cleanLeadingSpace : function(e) { },
-
- onSelectChange : function (view, sels, opts )
- {
- var ix = view.getSelectedIndexes();
-
- if (opts.list > this.maxColumns - 2) {
- if (view.store.getCount()< 1) {
- this.views[opts.list ].getEl().setStyle({ display : 'none' });
+ // private
+ formatDate : function(date, fmt){
+ return (!date || !(date instanceof Date)) ?
+ date : date.dateFormat(fmt || this.format);
+ },
- } else {
- if (ix.length) {
- // used to clear ?? but if we are loading unselected
- this.setFromData(view.store.getAt(ix[0]).data);
- }
-
- }
+ // private
+ menuListeners : {
+ select: function(m, d){
- return;
+ this.setValue(d);
+ this.fireEvent('select', this, d);
+ },
+ show : function(){ // retain focus styling
+ this.onFocus();
+ },
+ hide : function(){
+ this.focus.defer(10, this);
+ var ml = this.menuListeners;
+ this.menu.un("select", ml.select, this);
+ this.menu.un("show", ml.show, this);
+ this.menu.un("hide", ml.hide, this);
}
-
- if (!ix.length) {
- // this get's fired when trigger opens..
- // this.setFromData({});
- var str = this.stores[opts.list+1];
- str.data.clear(); // removeall wihtout the fire events..
+ },
+
+ // private
+ // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+ onTriggerClick : function(){
+ if(this.disabled){
return;
}
-
- var rec = view.store.getAt(ix[0]);
-
- this.setFromData(rec.data);
- this.fireEvent('select', this, rec, ix[0]);
-
- var lw = Math.floor(
- (
- (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
- ) / this.maxColumns
- );
- this.loadingChildren = true;
- this.stores[opts.list+1].loadDataFromChildren( rec );
- this.loadingChildren = false;
- var dl = this.stores[opts.list+1]. getTotalCount();
-
- this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
-
- this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
- for (var i = opts.list+2; i < this.views.length;i++) {
- this.views[i].getEl().setStyle({ display : 'none' });
- }
-
- this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
- this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
-
- if (this.isLoading) {
- // this.selectActive(opts.list);
+ if(this.menu == null){
+ this.menu = new Roo.menu.DateMenu();
}
-
+ Roo.apply(this.menu.picker, {
+ showClear: this.allowBlank,
+ minDate : this.minValue,
+ maxDate : this.maxValue,
+ disabledDatesRE : this.ddMatch,
+ disabledDatesText : this.disabledDatesText,
+ disabledDays : this.disabledDays,
+ disabledDaysText : this.disabledDaysText,
+ format : this.useIso ? 'Y-m-d' : this.format,
+ minText : String.format(this.minText, this.formatDate(this.minValue)),
+ maxText : String.format(this.maxText, this.formatDate(this.maxValue))
+ });
+ this.menu.on(Roo.apply({}, this.menuListeners, {
+ scope:this
+ }));
+ this.menu.picker.setValue(this.getValue() || new Date());
+ this.menu.show(this.el, "tl-bl?");
},
-
-
-
-
- onDoubleClick : function()
- {
- this.collapse(); //??
+
+ beforeBlur : function(){
+ var v = this.parseDate(this.getRawValue());
+ if(v){
+ this.setValue(v);
+ }
},
-
-
-
-
-
- // private
- recordToStack : function(store, prop, value, stack)
- {
- 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;
- var srec = false;
- if(store.getCount() < 1){
+
+ /*@
+ * overide
+ *
+ */
+ isDirty : function() {
+ if(this.disabled) {
return false;
}
- store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- srec = r;
- return false;
- }
- if (r.data.cn && r.data.cn.length) {
- cstore.loadDataFromChildren( r);
- var cret = _this.recordToStack(cstore, prop, value, stack);
- if (cret !== false) {
- record = cret;
- srec = r;
- return false;
- }
- }
-
- return true;
- });
- if (record == false) {
- return false
+
+ if(typeof(this.startValue) === 'undefined'){
+ return false;
}
- stack.unshift(srec);
- return record;
+
+ return String(this.getValue()) !== String(this.startValue);
+
},
-
- /*
- * find the stack of stores that match our value.
- *
- *
- */
-
- selectActive : function ()
+ // @overide
+ cleanLeadingSpace : function(e)
{
- // if store is not loaded, then we will need to wait for that to happen first.
- var stack = [];
- this.recordToStack(this.store, this.valueField, this.getValue(), stack);
- for (var i = 0; i < stack.length; i++ ) {
- this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
- }
-
+ return;
}
-
-
-
-
-
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.Checkbox
- * @extends Roo.form.Field
- * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
- * @constructor
- * Creates a new Checkbox
- * @param {Object} config Configuration options
+ * @class Roo.form.MonthField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new MonthField
+* @param {Object} config
*/
-Roo.form.Checkbox = function(config){
- Roo.form.Checkbox.superclass.constructor.call(this, config);
- this.addEvents({
+Roo.form.MonthField = function(config){
+
+ Roo.form.MonthField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+
/**
- * @event check
- * Fires when the checkbox is checked or unchecked.
- * @param {Roo.form.Checkbox} this This checkbox
- * @param {Boolean} checked The new checked value
+ * @event select
+ * Fires when a date is selected
+ * @param {Roo.form.MonthFieeld} combo This combo box
+ * @param {Date} date The date selected
*/
- check : true
+ 'select' : true
+
});
+
+
+ if(typeof this.minValue == "string") {
+ this.minValue = this.parseDate(this.minValue);
+ }
+ if(typeof this.maxValue == "string") {
+ this.maxValue = this.parseDate(this.maxValue);
+ }
+ this.ddMatch = null;
+ if(this.disabledDates){
+ var dd = this.disabledDates;
+ var re = "(?:";
+ for(var i = 0; i < dd.length; i++){
+ re += dd[i];
+ if(i != dd.length-1) {
+ re += "|";
+ }
+ }
+ this.ddMatch = new RegExp(re + ")");
+ }
};
-Roo.extend(Roo.form.Checkbox, Roo.form.Field, {
- /**
- * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
- */
- focusClass : undefined,
+Roo.extend(Roo.form.MonthField, Roo.form.TriggerField, {
/**
- * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+ * @cfg {String} format
+ * The default date format string which can be overriden for localization support. The format must be
+ * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
*/
- fieldClass: "x-form-field",
+ format : "M Y",
/**
- * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
+ * @cfg {String} altFormats
+ * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+ * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
*/
- checked: false,
+ altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
/**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "checkbox", autocomplete: "off"})
+ * @cfg {Array} disabledDays
+ * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
*/
- defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
+ disabledDays : [0,1,2,3,4,5,6],
/**
- * @cfg {String} boxLabel The text that appears beside the checkbox
+ * @cfg {String} disabledDaysText
+ * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
*/
- boxLabel : "",
- /**
- * @cfg {String} inputValue The value that should go into the generated input element's value attribute
- */
- inputValue : '1',
+ disabledDaysText : "Disabled",
/**
- * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
- */
- valueOff: '0', // value when not checked..
+ * @cfg {Array} disabledDates
+ * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
+ * expression so they are very powerful. Some examples:
+ * <ul>
+ * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
+ * <li>["03/08", "09/16"] would disable those days for every year</li>
+ * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
+ * <li>["03/../2006"] would disable every day in March 2006</li>
+ * <li>["^03"] would disable every day in every March</li>
+ * </ul>
+ * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
+ * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ */
+ disabledDates : null,
+ /**
+ * @cfg {String} disabledDatesText
+ * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+ */
+ disabledDatesText : "Disabled",
+ /**
+ * @cfg {Date/String} minValue
+ * The minimum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ minValue : null,
+ /**
+ * @cfg {Date/String} maxValue
+ * The maximum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ maxValue : null,
+ /**
+ * @cfg {String} minText
+ * The error text to display when the date in the cell is before minValue (defaults to
+ * 'The date in this field must be after {minValue}').
+ */
+ minText : "The date in this field must be equal to or after {0}",
+ /**
+ * @cfg {String} maxTextf
+ * The error text to display when the date in the cell is after maxValue (defaults to
+ * 'The date in this field must be before {maxValue}').
+ */
+ maxText : "The date in this field must be equal to or before {0}",
+ /**
+ * @cfg {String} invalidText
+ * The error text to display when the date in the field is invalid (defaults to
+ * '{value} is not a valid date - it must be in the format {format}').
+ */
+ invalidText : "{0} is not a valid date - it must be in the format {1}",
+ /**
+ * @cfg {String} triggerClass
+ * An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
+ * which displays a calendar icon).
+ */
+ triggerClass : 'x-form-date-trigger',
+
- actionMode : 'viewEl',
- //
+ /**
+ * @cfg {Boolean} useIso
+ * if enabled, then the date field will use a hidden field to store the
+ * real value as iso formated date. default (true)
+ */
+ useIso : true,
+ /**
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "10", autocomplete: "off"})
+ */
// private
- itemCls : 'x-menu-check-item x-form-item',
- groupClass : 'x-menu-group-item',
- inputType : 'hidden',
-
+ defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
- inSetChecked: false, // check that we are not calling self...
+ // private
+ hiddenField: false,
- inputElement: false, // real input element?
- basedOn: false, // ????
+ hideMonthPicker : 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');
+ onRender : function(ct, position)
+ {
+ Roo.form.MonthField.superclass.onRender.call(this, ct, position);
+ if (this.useIso) {
+ this.el.dom.removeAttribute('name');
+ this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
+ 'before', true);
+ this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
+ // prevent input submission
+ this.hiddenName = this.name;
}
+
+
},
-
- 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);
- /*
- if(this.inputValue !== undefined){
- this.el.dom.value = this.inputValue;
+ validateValue : function(value)
+ {
+ value = this.formatDate(value);
+ if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
+ return false;
+ }
+ if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+ return true;
+ }
+ var svalue = value;
+ value = this.parseDate(value);
+ if(!value){
+ this.markInvalid(String.format(this.invalidText, svalue, this.format));
+ return false;
+ }
+ var time = value.getTime();
+ if(this.minValue && time < this.minValue.getTime()){
+ this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
+ return false;
+ }
+ if(this.maxValue && time > this.maxValue.getTime()){
+ this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
+ return false;
+ }
+ /*if(this.disabledDays){
+ var day = value.getDay();
+ for(var i = 0; i < this.disabledDays.length; i++) {
+ if(day === this.disabledDays[i]){
+ this.markInvalid(this.disabledDaysText);
+ return false;
+ }
+ }
}
*/
- //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
- this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
- var viewEl = this.wrap.createChild({
- tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
- this.viewEl = viewEl;
- this.wrap.on('click', this.onClick, this);
-
- this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
- this.el.on('propertychange', this.setFromHidden, this); //ie
-
-
-
- if(this.boxLabel){
- this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
- // viewEl.on('click', this.onClick, this);
+ var fvalue = this.formatDate(value);
+ /*if(this.ddMatch && this.ddMatch.test(fvalue)){
+ this.markInvalid(String.format(this.disabledDatesText, fvalue));
+ return false;
}
- //if(this.checked){
- this.setChecked(this.checked);
- //}else{
- //this.checked = this.el.dom;
- //}
-
+ */
+ return true;
},
// private
- initValue : Roo.emptyFn,
+ // Provides logic to override the default TriggerField.validateBlur which just returns true
+ validateBlur : function(){
+ return !this.menu || !this.menu.isVisible();
+ },
/**
- * Returns the checked state of the checkbox.
- * @return {Boolean} True if checked, else false
+ * Returns the current date value of the date field.
+ * @return {Date} The date value
*/
getValue : function(){
- if(this.el){
- return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
- }
- return this.valueOff;
+
+
+ return this.hiddenField ?
+ this.hiddenField.value :
+ this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
},
- // private
- onClick : function(){
- if (this.disabled) {
- return;
- }
- this.setChecked(!this.checked);
+ /**
+ * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
+ * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
+ * (the default format used is "m/d/y").
+ * <br />Usage:
+ * <pre><code>
+//All of these calls set the same date value (May 4, 2006)
- //if(this.el.dom.checked != this.checked){
- // this.setValue(this.el.dom.checked);
- // }
- },
+//Pass a date object:
+var dt = new Date('5/4/06');
+monthField.setValue(dt);
- /**
- * 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.
+//Pass a date string (default format):
+monthField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+monthField.format = 'Y-m-d';
+monthField.setValue('2006-5-4');
+</code></pre>
+ * @param {String/Date} date The date or valid date string
*/
- setValue : function(v,suppressEvent){
+ setValue : function(date){
+ Roo.log('month setValue' + date);
+ // can only be first of month..
+ var val = this.parseDate(date);
- //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
- //if(this.el && this.el.dom){
- // this.el.dom.checked = this.checked;
- // this.el.dom.defaultChecked = this.checked;
- //}
- this.setChecked(String(v) === String(this.inputValue), suppressEvent);
- //this.fireEvent("check", this, this.checked);
+ if (this.hiddenField) {
+ this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+ }
+ Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+ this.value = this.parseDate(date);
},
- // private..
- setChecked : function(state,suppressEvent)
- {
- if (this.inSetChecked) {
- this.checked = state;
- return;
+
+ // private
+ parseDate : function(value){
+ if(!value || value instanceof Date){
+ value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
+ return value;
}
-
-
- if(this.wrap){
- this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+ var v = Date.parseDate(value, this.format);
+ if (!v && this.useIso) {
+ v = Date.parseDate(value, 'Y-m-d');
}
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent('check', this, state);
+ if (v) {
+ //
+ v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
}
- this.inSetChecked = true;
-
- this.el.dom.value = state ? this.inputValue : this.valueOff;
-
- this.inSetChecked = false;
- },
- // handle setting of hidden value by some other method!!?!?
- setFromHidden: function()
- {
- if(!this.el){
- return;
+
+ if(!v && this.altFormats){
+ if(!this.altFormatsArray){
+ this.altFormatsArray = this.altFormats.split("|");
+ }
+ for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
+ v = Date.parseDate(value, this.altFormatsArray[i]);
+ }
}
- //console.log("SET FROM HIDDEN");
- //alert('setFrom hidden');
- this.setValue(this.el.dom.value);
+ return v;
},
-
- onDestroy : function()
- {
- if(this.viewEl){
- Roo.get(this.viewEl).remove();
+
+ // private
+ formatDate : function(date, fmt){
+ return (!date || !(date instanceof Date)) ?
+ date : date.dateFormat(fmt || this.format);
+ },
+
+ // private
+ menuListeners : {
+ select: function(m, d){
+ this.setValue(d);
+ this.fireEvent('select', this, d);
+ },
+ show : function(){ // retain focus styling
+ this.onFocus();
+ },
+ hide : function(){
+ this.focus.defer(10, this);
+ var ml = this.menuListeners;
+ this.menu.un("select", ml.select, this);
+ this.menu.un("show", ml.show, this);
+ this.menu.un("hide", ml.hide, this);
}
-
- Roo.form.Checkbox.superclass.onDestroy.call(this);
},
+ // private
+ // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+ onTriggerClick : function(){
+ if(this.disabled){
+ return;
+ }
+ if(this.menu == null){
+ this.menu = new Roo.menu.DateMenu();
+
+ }
+
+ Roo.apply(this.menu.picker, {
+
+ showClear: this.allowBlank,
+ minDate : this.minValue,
+ maxDate : this.maxValue,
+ disabledDatesRE : this.ddMatch,
+ disabledDatesText : this.disabledDatesText,
+
+ format : this.useIso ? 'Y-m-d' : this.format,
+ minText : String.format(this.minText, this.formatDate(this.minValue)),
+ maxText : String.format(this.maxText, this.formatDate(this.maxValue))
+
+ });
+ this.menu.on(Roo.apply({}, this.menuListeners, {
+ scope:this
+ }));
+
+
+ var m = this.menu;
+ var p = m.picker;
+
+ // hide month picker get's called when we called by 'before hide';
+
+ var ignorehide = true;
+ p.hideMonthPicker = function(disableAnim){
+ if (ignorehide) {
+ return;
+ }
+ if(this.monthPicker){
+ Roo.log("hideMonthPicker called");
+ if(disableAnim === true){
+ this.monthPicker.hide();
+ }else{
+ this.monthPicker.slideOut('t', {duration:.2});
+ p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
+ p.fireEvent("select", this, this.value);
+ m.hide();
+ }
+ }
+ }
+
+ Roo.log('picker set value');
+ Roo.log(this.getValue());
+ p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
+ m.show(this.el, 'tl-bl?');
+ ignorehide = false;
+ // this will trigger hideMonthPicker..
+
+
+ // hidden the day picker
+ Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
+
+
+
+
+
+ p.showMonthPicker.defer(100, p);
- setBoxLabel : function(str)
- {
- this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
+
+
+ },
+
+ beforeBlur : function(){
+ var v = this.parseDate(this.getRawValue());
+ if(v){
+ this.setValue(v);
+ }
}
+ /** @cfg {Boolean} grow @hide */
+ /** @cfg {Number} growMin @hide */
+ /** @cfg {Number} growMax @hide */
+ /**
+ * @hide
+ * @method autoSize
+ */
});/*
* Based on:
* Ext JS Library 1.1.1
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.Radio
- * @extends Roo.form.Checkbox
- * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
- * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
* @constructor
- * Creates a new Radio
+ * Create a new ComboBox.
* @param {Object} config Configuration options
*/
-Roo.form.Radio = function(){
- Roo.form.Radio.superclass.constructor.apply(this, arguments);
-};
-Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
- inputType: 'radio',
-
- /**
- * If this radio is part of a group, it will return the selected value
- * @return {String}
- */
- getGroupValue : function(){
- return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
- },
-
-
- onRender : function(ct, position){
- Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
-
- if(this.inputValue !== undefined){
- this.el.dom.value = this.inputValue;
- }
-
- this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
- //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
- //var viewEl = this.wrap.createChild({
- // tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
- //this.viewEl = viewEl;
- //this.wrap.on('click', this.onClick, this);
-
- //this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
- //this.el.on('propertychange', this.setFromHidden, this); //ie
-
+Roo.form.ComboBox = function(config){
+ Roo.form.ComboBox.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event expand
+ * Fires when the dropdown list is expanded
+ * @param {Roo.form.ComboBox} combo This combo box
+ */
+ 'expand' : true,
+ /**
+ * @event collapse
+ * Fires when the dropdown list is collapsed
+ * @param {Roo.form.ComboBox} combo This combo box
+ */
+ 'collapse' : true,
+ /**
+ * @event beforeselect
+ * Fires before a list item is selected. Return false to cancel the selection.
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record} record The data record returned from the underlying store
+ * @param {Number} index The index of the selected item in the dropdown list
+ */
+ 'beforeselect' : true,
+ /**
+ * @event select
+ * Fires when a list item is selected
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
+ * @param {Number} index The index of the selected item in the dropdown list
+ */
+ 'select' : true,
+ /**
+ * @event beforequery
+ * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
+ * The event object passed has these properties:
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {String} query The query
+ * @param {Boolean} forceAll true to force "all" query
+ * @param {Boolean} cancel true to cancel the query
+ * @param {Object} e The query event object
+ */
+ 'beforequery': true,
+ /**
+ * @event add
+ * Fires when the 'add' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.ComboBox} combo This combo box
+ */
+ 'add' : true,
+ /**
+ * @event edit
+ * Fires when the 'edit' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+ */
+ 'edit' : true
- if(this.boxLabel){
- this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
- // viewEl.on('click', this.onClick, this);
- }
- if(this.checked){
- this.el.dom.checked = 'checked' ;
+ });
+ if(this.transform){
+ this.allowDomMove = false;
+ var s = Roo.getDom(this.transform);
+ if(!this.hiddenName){
+ this.hiddenName = s.name;
}
-
- },
- /**
- * 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){
-
-
- //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
- //if(this.el && this.el.dom){
- // this.el.dom.checked = this.checked;
- // this.el.dom.defaultChecked = this.checked;
- //}
- this.setChecked(String(v) === String(this.inputValue), suppressEvent);
-
- this.el.dom.form[this.name].value = v;
-
- //this.fireEvent("check", this, this.checked);
- },
- // private..
- setChecked : function(state,suppressEvent)
- {
-
- if(this.wrap){
- this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+ if(!this.store){
+ this.mode = 'local';
+ var d = [], opts = s.options;
+ for(var i = 0, len = opts.length;i < len; i++){
+ var o = opts[i];
+ var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
+ if(o.selected) {
+ this.value = value;
+ }
+ d.push([value, o.text]);
+ }
+ this.store = new Roo.data.SimpleStore({
+ 'id': 0,
+ fields: ['value', 'text'],
+ data : d
+ });
+ this.valueField = 'value';
+ this.displayField = 'text';
}
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent('check', this, state);
+ s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
+ if(!this.lazyRender){
+ this.target = true;
+ this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
+ s.parentNode.removeChild(s); // remove it
+ this.render(this.el.parentNode);
+ }else{
+ s.parentNode.removeChild(s); // remove it
}
-
-
-
-
- },
- reset : function(){
- // this.setValue(this.resetValue);
- //this.originalValue = this.getValue();
- this.clearInvalid();
- }
-
-});Roo.rtf = {}; // namespace
-Roo.rtf.Hex = function(hex)
-{
- this.hexstr = hex;
-};
-Roo.rtf.Paragraph = function(opts)
-{
- this.content = []; ///??? is that used?
-};Roo.rtf.Span = function(opts)
-{
- this.value = opts.value;
-};
-
-Roo.rtf.Group = function(parent)
-{
- // we dont want to acutally store parent - it will make debug a nightmare..
- this.content = [];
- this.cn = [];
-
-
-
-};
-Roo.rtf.Group.prototype = {
- ignorable : false,
- content: false,
- cn: false,
- addContent : function(node) {
- // could set styles...
- this.content.push(node);
- },
- addChild : function(cn)
- {
- this.cn.push(cn);
- },
- // only for images really...
- toDataURL : function()
- {
- var mimetype = false;
- switch(true) {
- case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0:
- mimetype = "image/png";
- break;
- case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
- mimetype = "image/jpeg";
- break;
- default :
- return 'about:blank'; // ?? error?
- }
-
-
- var hexstring = this.content[this.content.length-1].value;
-
- return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
- return String.fromCharCode(parseInt(a, 16));
- }).join(""));
+ }
+ if (this.store) {
+ this.store = Roo.factory(this.store, Roo.data);
}
-};
-// this looks like it's normally the {rtf{ .... }}
-Roo.rtf.Document = function()
-{
- // we dont want to acutally store parent - it will make debug a nightmare..
- this.rtlch = [];
- this.content = [];
- this.cn = [];
-
-};
-Roo.extend(Roo.rtf.Document, Roo.rtf.Group, {
- addChild : function(cn)
- {
- this.cn.push(cn);
- switch(cn.type) {
- case 'rtlch': // most content seems to be inside this??
- case 'listtext':
- case 'shpinst':
- this.rtlch.push(cn);
- return;
- default:
- this[cn.type] = cn;
+ this.selectedIndex = -1;
+ if(this.mode == 'local'){
+ if(config.queryDelay === undefined){
+ this.queryDelay = 10;
+ }
+ if(config.minChars === undefined){
+ this.minChars = 0;
}
-
- },
-
- getElementsByType : function(type)
- {
- var ret = [];
- this._getElementsByType(type, ret, this.cn, 'rtf');
- return ret;
- },
- _getElementsByType : function (type, ret, search_array, path)
- {
- search_array.forEach(function(n,i) {
- if (n.type == type) {
- n.path = path + '/' + n.type + ':' + i;
- ret.push(n);
- }
- if (n.cn.length > 0) {
- this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
- }
- },this);
}
-
-});
-
-Roo.rtf.Ctrl = function(opts)
-{
- this.value = opts.value;
- this.param = opts.param;
};
-/**
- *
- *
- * based on this https://github.com/iarna/rtf-parser
- * it's really only designed to extract pict from pasted RTF
- *
- * usage:
- *
- * var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
- *
- *
- */
-
-
-
+Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
+ /**
+ * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+ */
+ /**
+ * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
+ * rendering into an Roo.Editor, defaults to false)
+ */
+ /**
+ * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
+ * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+ */
+ /**
+ * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+ */
+ /**
+ * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
+ * the dropdown list (defaults to undefined, with no header element)
+ */
-Roo.rtf.Parser = function(text) {
- //super({objectMode: true})
- this.text = '';
- this.parserState = this.parseText;
-
- // these are for interpeter...
- this.doc = {};
- ///this.parserState = this.parseTop
- this.groupStack = [];
- this.hexStore = [];
- this.doc = false;
-
- this.groups = []; // where we put the return.
-
- for (var ii = 0; ii < text.length; ++ii) {
- ++this.cpos;
-
- if (text[ii] === '\n') {
- ++this.row;
- this.col = 1;
- } else {
- ++this.col;
- }
- this.parserState(text[ii]);
- }
+ /**
+ * @cfg {String/Roo.Template} tpl The template to use to render the output
+ */
+
+ // private
+ defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
+ /**
+ * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+ */
+ listWidth: undefined,
+ /**
+ * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'text' if mode = 'local')
+ */
+ displayField: undefined,
+ /**
+ * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'value' if mode = 'local').
+ * Note: use of a valueField requires the user make a selection
+ * in order for a value to be mapped.
+ */
+ valueField: undefined,
+ /**
+ * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
+ * field's data value (defaults to the underlying DOM element's name)
+ */
+ hiddenName: undefined,
+ /**
+ * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
+ */
+ listClass: '',
+ /**
+ * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
+ */
+ selectedClass: 'x-combo-selected',
+ /**
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
+ * which displays a downward arrow icon).
+ */
+ triggerClass : 'x-form-arrow-trigger',
+ /**
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+ */
+ shadow:'sides',
+ /**
+ * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+ * anchor positions (defaults to 'tl-bl')
+ */
+ listAlign: 'tl-bl?',
+ /**
+ * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
+ */
+ maxHeight: 300,
+ /**
+ * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
+ * query specified by the allQuery config option (defaults to 'query')
+ */
+ triggerAction: 'query',
+ /**
+ * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
+ * (defaults to 4, does not apply if editable = false)
+ */
+ minChars : 4,
+ /**
+ * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
+ * delay (typeAheadDelay) if it matches a known value (defaults to false)
+ */
+ typeAhead: false,
+ /**
+ * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
+ * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+ */
+ queryDelay: 500,
+ /**
+ * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
+ * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
+ */
+ pageSize: 0,
+ /**
+ * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
+ * when editable = true (defaults to false)
+ */
+ selectOnFocus:false,
+ /**
+ * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+ */
+ queryParam: 'query',
+ /**
+ * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
+ * when mode = 'remote' (defaults to 'Loading...')
+ */
+ loadingText: 'Loading...',
+ /**
+ * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+ */
+ resizable: false,
+ /**
+ * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+ */
+ handleHeight : 8,
+ /**
+ * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+ * traditional select (defaults to true)
+ */
+ editable: true,
+ /**
+ * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+ */
+ allQuery: '',
+ /**
+ * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+ */
+ mode: 'remote',
+ /**
+ * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+ * listWidth has a higher value)
+ */
+ minListWidth : 70,
+ /**
+ * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
+ * allow the user to set arbitrary text into the field (defaults to false)
+ */
+ forceSelection:false,
+ /**
+ * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+ * if typeAhead = true (defaults to 250)
+ */
+ typeAheadDelay : 250,
+ /**
+ * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
+ * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+ */
+ valueNotFoundText : undefined,
+ /**
+ * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+ */
+ blockFocus : false,
-};
-Roo.rtf.Parser.prototype = {
- text : '', // string being parsed..
- controlWord : '',
- controlWordParam : '',
- hexChar : '',
- doc : false,
- group: false,
- groupStack : false,
- hexStore : false,
+ /**
+ * @cfg {Boolean} disableClear Disable showing of clear button.
+ */
+ disableClear : false,
+ /**
+ * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ */
+ alwaysQuery : false,
+ //private
+ addicon : false,
+ editicon: false,
- cpos : 0,
- row : 1, // reportin?
- col : 1, //
-
+ // element that contains real text value.. (when hidden is used..)
- push : function (el)
+ // private
+ onRender : function(ct, position)
{
- var m = 'cmd'+ el.type;
- if (typeof(this[m]) == 'undefined') {
- Roo.log('invalid cmd:' + el.type);
- return;
+ Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
+
+ if(this.hiddenName){
+ this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
+ 'before', true);
+ this.hiddenField.value =
+ this.hiddenValue !== undefined ? this.hiddenValue :
+ this.value !== undefined ? this.value : '';
+
+ // prevent input submission
+ this.el.dom.removeAttribute('name');
+
+
}
- this[m](el);
- //Roo.log(el);
- },
- flushHexStore : function()
- {
- if (this.hexStore.length < 1) {
- return;
+
+ if(Roo.isGecko){
+ this.el.dom.setAttribute('autocomplete', 'off');
}
- var hexstr = this.hexStore.map(
- function(cmd) {
- return cmd.value;
- }).join('');
-
- this.group.addContent( new Roo.rtf.Hex( hexstr ));
-
-
- this.hexStore.splice(0)
+
+ var cls = 'x-combo-list';
+
+ this.list = new Roo.Layer({
+ shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+ });
+
+ var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+ this.list.swallowEvent('mousewheel');
+ this.assetHeight = 0;
+
+ if(this.title){
+ this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+ this.assetHeight += this.header.getHeight();
+ }
+
+ this.innerList = this.list.createChild({cls:cls+'-inner'});
+ this.innerList.on('mouseover', this.onViewOver, this);
+ this.innerList.on('mousemove', this.onViewMove, this);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
- },
-
- cmdgroupstart : function()
- {
- this.flushHexStore();
- if (this.group) {
- this.groupStack.push(this.group);
+ if(this.allowBlank && !this.pageSize && !this.disableClear){
+ this.footer = this.list.createChild({cls:cls+'-ft'});
+ this.pageTb = new Roo.Toolbar(this.footer);
+
}
- // parent..
- if (this.doc === false) {
- this.group = this.doc = new Roo.rtf.Document();
- return;
+ if(this.pageSize){
+ this.footer = this.list.createChild({cls:cls+'-ft'});
+ this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
+ {pageSize: this.pageSize});
}
- this.group = new Roo.rtf.Group(this.group);
- },
- cmdignorable : function()
- {
- this.flushHexStore();
- this.group.ignorable = true;
- },
- cmdendparagraph : function()
- {
- this.flushHexStore();
- this.group.addContent(new Roo.rtf.Paragraph());
- },
- cmdgroupend : function ()
- {
- this.flushHexStore();
- var endingGroup = this.group;
-
- this.group = this.groupStack.pop();
- if (this.group) {
- this.group.addChild(endingGroup);
+ if (this.pageTb && this.allowBlank && !this.disableClear) {
+ var _this = this;
+ this.pageTb.add(new Roo.Toolbar.Fill(), {
+ cls: 'x-btn-icon x-btn-clear',
+ text: ' ',
+ handler: function()
+ {
+ _this.collapse();
+ _this.clearValue();
+ _this.onSelect(false, -1);
+ }
+ });
+ }
+ if (this.footer) {
+ this.assetHeight += this.footer.getHeight();
}
+
+ if(!this.tpl){
+ this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+ }
+
+ this.view = new Roo.View(this.innerList, this.tpl, {
+ singleSelect:true,
+ store: this.store,
+ selectedClass: this.selectedClass
+ });
+
+ this.view.on('click', this.onViewClick, this);
+
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
+
+ if(this.resizable){
+ this.resizer = new Roo.Resizable(this.list, {
+ pinned:true, handles:'se'
+ });
+ this.resizer.on('resize', function(r, w, h){
+ this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
+ this.listWidth = w;
+ this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
+ this.restrictHeight();
+ }, this);
+ this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
+ }
+ if(!this.editable){
+ this.editable = true;
+ this.setEditable(false);
+ }
- var doc = this.group || this.doc;
- //if (endingGroup instanceof FontTable) {
- // doc.fonts = endingGroup.table
- //} else if (endingGroup instanceof ColorTable) {
- // doc.colors = endingGroup.table
- //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
- if (endingGroup.ignorable === false) {
- //code
- this.groups.push(endingGroup);
- // Roo.log( endingGroup );
+ if (typeof(this.events.add.listeners) != 'undefined') {
+
+ this.addicon = this.wrap.createChild(
+ {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
+
+ this.addicon.on('click', function(e) {
+ this.fireEvent('add', this);
+ }, this);
}
- //Roo.each(endingGroup.content, function(item)) {
- // doc.addContent(item);
- //}
- //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
- //}
- },
- cmdtext : function (cmd)
- {
- this.flushHexStore();
- if (!this.group) { // an RTF fragment, missing the {\rtf1 header
- //this.group = this.doc
- return; // we really don't care about stray text...
+ if (typeof(this.events.edit.listeners) != 'undefined') {
+
+ this.editicon = this.wrap.createChild(
+ {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
+ if (this.addicon) {
+ this.editicon.setStyle('margin-left', '40px');
+ }
+ this.editicon.on('click', function(e) {
+
+ // we fire even if inothing is selected..
+ this.fireEvent('edit', this, this.lastData );
+
+ }, this);
}
- this.group.addContent(new Roo.rtf.Span(cmd));
+
+
+
},
- cmdcontrolword : function (cmd)
- {
- this.flushHexStore();
- if (!this.group.type) {
- this.group.type = cmd.value;
- return;
+
+ // private
+ initEvents : function(){
+ Roo.form.ComboBox.superclass.initEvents.call(this);
+
+ this.keyNav = new Roo.KeyNav(this.el, {
+ "up" : function(e){
+ this.inKeyMode = true;
+ this.selectPrev();
+ },
+
+ "down" : function(e){
+ if(!this.isExpanded()){
+ this.onTriggerClick();
+ }else{
+ this.inKeyMode = true;
+ this.selectNext();
+ }
+ },
+
+ "enter" : function(e){
+ this.onViewClick();
+ //return true;
+ },
+
+ "esc" : function(e){
+ this.collapse();
+ },
+
+ "tab" : function(e){
+ this.onViewClick(false);
+ this.fireEvent("specialkey", this, e);
+ return true;
+ },
+
+ scope : this,
+
+ doRelay : function(foo, bar, hname){
+ if(hname == 'down' || this.scope.isExpanded()){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ }
+ return true;
+ },
+
+ forceKeyDown: true
+ });
+ this.queryDelay = Math.max(this.queryDelay || 10,
+ this.mode == 'local' ? 10 : 250);
+ this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
+ if(this.typeAhead){
+ this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
}
- this.group.addContent(new Roo.rtf.Ctrl(cmd));
- // we actually don't care about ctrl words...
- return ;
- /*
- var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
- if (this[method]) {
- this[method](cmd.param)
- } else {
- if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
+ if(this.editable !== false){
+ this.el.on("keyup", this.onKeyUp, this);
}
- */
- },
- cmdhexchar : function(cmd) {
- this.hexStore.push(cmd);
- },
- cmderror : function(cmd) {
- throw cmd.value;
- },
-
- /*
- _flush (done) {
- if (this.text !== '\u0000') this.emitText()
- done()
- }
- */
-
-
- parseText : function(c)
- {
- if (c === '\\') {
- this.parserState = this.parseEscapes;
- } else if (c === '{') {
- this.emitStartGroup();
- } else if (c === '}') {
- this.emitEndGroup();
- } else if (c === '\x0A' || c === '\x0D') {
- // cr/lf are noise chars
- } else {
- this.text += c;
+ if(this.forceSelection){
+ this.on('blur', this.doForce, this);
}
},
-
- parseEscapes: function (c)
- {
- if (c === '\\' || c === '{' || c === '}') {
- this.text += c;
- this.parserState = this.parseText;
- } else {
- this.parserState = this.parseControlSymbol;
- this.parseControlSymbol(c);
+
+ onDestroy : function(){
+ if(this.view){
+ this.view.setStore(null);
+ this.view.el.removeAllListeners();
+ this.view.el.remove();
+ this.view.purgeListeners();
+ }
+ if(this.list){
+ this.list.destroy();
+ }
+ if(this.store){
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('loadexception', this.onLoadException, this);
}
+ Roo.form.ComboBox.superclass.onDestroy.call(this);
},
- parseControlSymbol: function(c)
- {
- if (c === '~') {
- this.text += '\u00a0'; // nbsp
- this.parserState = this.parseText
- } else if (c === '-') {
- this.text += '\u00ad'; // soft hyphen
- } else if (c === '_') {
- this.text += '\u2011'; // non-breaking hyphen
- } else if (c === '*') {
- this.emitIgnorable();
- this.parserState = this.parseText;
- } else if (c === "'") {
- this.parserState = this.parseHexChar;
- } else if (c === '|') { // formula cacter
- this.emitFormula();
- this.parserState = this.parseText;
- } else if (c === ':') { // subentry in an index entry
- this.emitIndexSubEntry();
- this.parserState = this.parseText;
- } else if (c === '\x0a') {
- this.emitEndParagraph();
- this.parserState = this.parseText;
- } else if (c === '\x0d') {
- this.emitEndParagraph();
- this.parserState = this.parseText;
- } else {
- this.parserState = this.parseControlWord;
- this.parseControlWord(c);
+
+ // private
+ fireKey : function(e){
+ if(e.isNavKeyPress() && !this.list.isVisible()){
+ this.fireEvent("specialkey", this, e);
}
},
- parseHexChar: function (c)
- {
- if (/^[A-Fa-f0-9]$/.test(c)) {
- this.hexChar += c;
- if (this.hexChar.length >= 2) {
- this.emitHexChar();
- this.parserState = this.parseText;
- }
+
+ // private
+ onResize: function(w, h){
+ Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
+
+ if(typeof w != 'number'){
+ // we do not handle it!?!?
return;
}
- this.emitError("Invalid character \"" + c + "\" in hex literal.");
- this.parserState = this.parseText;
+ var tw = this.trigger.getWidth();
+ tw += this.addicon ? this.addicon.getWidth() : 0;
+ tw += this.editicon ? this.editicon.getWidth() : 0;
+ var x = w - tw;
+ this.el.setWidth( this.adjustWidth('input', x));
+
+ this.trigger.setStyle('left', x+'px');
- },
- parseControlWord : function(c)
- {
- if (c === ' ') {
- this.emitControlWord();
- this.parserState = this.parseText;
- } else if (/^[-\d]$/.test(c)) {
- this.parserState = this.parseControlWordParam;
- this.controlWordParam += c;
- } else if (/^[A-Za-z]$/.test(c)) {
- this.controlWord += c;
- } else {
- this.emitControlWord();
- this.parserState = this.parseText;
- this.parseText(c);
+ if(this.list && this.listWidth === undefined){
+ var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
}
+
+
+
},
- parseControlWordParam : function (c) {
- if (/^\d$/.test(c)) {
- this.controlWordParam += c;
- } else if (c === ' ') {
- this.emitControlWord();
- this.parserState = this.parseText;
- } else {
- this.emitControlWord();
- this.parserState = this.parseText;
- this.parseText(c);
+
+ /**
+ * Allow or prevent the user from directly editing the field text. If false is passed,
+ * the user will only be able to select from the items defined in the dropdown list. This method
+ * is the runtime equivalent of setting the 'editable' config option at config time.
+ * @param {Boolean} value True to allow the user to directly edit the field text
+ */
+ setEditable : function(value){
+ if(value == this.editable){
+ return;
+ }
+ this.editable = value;
+ if(!value){
+ this.el.dom.setAttribute('readOnly', true);
+ this.el.on('mousedown', this.onTriggerClick, this);
+ this.el.addClass('x-combo-noedit');
+ }else{
+ this.el.dom.setAttribute('readOnly', false);
+ this.el.un('mousedown', this.onTriggerClick, this);
+ this.el.removeClass('x-combo-noedit');
}
},
-
-
-
-
- emitText : function () {
- if (this.text === '') {
+
+ // private
+ onBeforeLoad : function(){
+ if(!this.hasFocus){
return;
}
- this.push({
- type: 'text',
- value: this.text,
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- this.text = ''
+ this.innerList.update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ this.restrictHeight();
+ this.selectedIndex = -1;
},
- emitControlWord : function ()
- {
- this.emitText();
- if (this.controlWord === '') {
- // do we want to track this - it seems just to cause problems.
- //this.emitError('empty control word');
- } else {
- this.push({
- type: 'controlword',
- value: this.controlWord,
- param: this.controlWordParam !== '' && Number(this.controlWordParam),
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
+
+ // private
+ onLoad : function(){
+ if(!this.hasFocus){
+ return;
}
- this.controlWord = '';
- this.controlWordParam = '';
- },
- emitStartGroup : function ()
- {
- this.emitText();
- this.push({
- type: 'groupstart',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- },
- emitEndGroup : function ()
- {
- this.emitText();
- this.push({
- type: 'groupend',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- },
- emitIgnorable : function ()
- {
- this.emitText();
- this.push({
- type: 'ignorable',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
+ if(this.store.getCount() > 0){
+ this.expand();
+ this.restrictHeight();
+ if(this.lastQuery == this.allQuery){
+ if(this.editable){
+ this.el.dom.select();
+ }
+ if(!this.selectByValue(this.value, true)){
+ this.select(0, true);
+ }
+ }else{
+ this.selectNext();
+ if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
+ this.taTask.delay(this.typeAheadDelay);
+ }
+ }
+ }else{
+ this.onEmptyResults();
+ }
+ //this.el.focus();
},
- emitHexChar : function ()
+ // private
+ onLoadException : function()
{
- this.emitText();
- this.push({
- type: 'hexchar',
- value: this.hexChar,
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- this.hexChar = ''
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+
+
},
- emitError : function (message)
- {
- this.emitText();
- this.push({
- type: 'error',
- value: message,
- row: this.row,
- col: this.col,
- char: this.cpos //,
- //stack: new Error().stack
- });
+ // private
+ onTypeAhead : function(){
+ if(this.store.getCount() > 0){
+ var r = this.store.getAt(0);
+ var newValue = r.data[this.displayField];
+ var len = newValue.length;
+ var selStart = this.getRawValue().length;
+ if(selStart != len){
+ this.setRawValue(newValue);
+ this.selectText(selStart, newValue.length);
+ }
+ }
},
- emitEndParagraph : function () {
- this.emitText();
- this.push({
- type: 'endparagraph',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- }
-
-} ;
-Roo.htmleditor = {};
-
-/**
- * @class Roo.htmleditor.Filter
- * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
- * @cfg {DomElement} node The node to iterate and filter
- * @cfg {boolean|String|Array} tag Tags to replace
- * @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
- */
+ // private
+ onSelect : function(record, index){
+ if(this.fireEvent('beforeselect', this, record, index) !== false){
+ this.setFromData(index > -1 ? record.data : false);
+ this.collapse();
+ this.fireEvent('select', this, record, index);
+ }
+ },
+ /**
+ * Returns the currently selected field value or empty string if no value is set.
+ * @return {String} value The selected value
+ */
+ getValue : function(){
+ if(this.valueField){
+ return typeof this.value != 'undefined' ? this.value : '';
+ }
+ return Roo.form.ComboBox.superclass.getValue.call(this);
+ },
-Roo.htmleditor.Filter = function(cfg) {
- Roo.apply(this.cfg);
- // this does not actually call walk as it's really just a abstract class
-}
-
-
-Roo.htmleditor.Filter.prototype = {
-
- node: false,
-
- tag: false,
+ /**
+ * Clears any text/value currently set in the field
+ */
+ clearValue : function(){
+ if(this.hiddenField){
+ this.hiddenField.value = '';
+ }
+ this.value = '';
+ this.setRawValue('');
+ this.lastSelectionText = '';
+
+ },
- // overrride to do replace comments.
- replaceComment : false,
-
- // overrride to do replace or do stuff with tags..
- replaceTag : false,
-
- walk : function(dom)
- {
- Roo.each( Array.from(dom.childNodes), function( e ) {
- switch(true) {
-
- case e.nodeType == 8 && this.replaceComment !== false: // comment
- this.replaceComment(e);
- return;
-
- case e.nodeType != 1: //not a node.
- return;
-
- case this.tag === true: // everything
- case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
- case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
- case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
- case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
- if (this.replaceTag && false === this.replaceTag(e)) {
- return;
- }
- if (e.hasChildNodes()) {
- this.walk(e);
- }
- return;
-
- default: // tags .. that do not match.
- if (e.hasChildNodes()) {
- this.walk(e);
- }
+ /**
+ * Sets the specified value into the field. If the value finds a match, the corresponding record text
+ * will be displayed in the field. If the value does not match the data value of an existing item,
+ * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+ * Otherwise the field will be blank (although the value will still be set).
+ * @param {String} value The value to match
+ */
+ setValue : function(v){
+ var text = v;
+ if(this.valueField){
+ var r = this.findRecord(this.valueField, v);
+ if(r){
+ text = r.data[this.displayField];
+ }else if(this.valueNotFoundText !== undefined){
+ text = this.valueNotFoundText;
}
+ }
+ this.lastSelectionText = text;
+ if(this.hiddenField){
+ this.hiddenField.value = v;
+ }
+ Roo.form.ComboBox.superclass.setValue.call(this, text);
+ this.value = v;
+ },
+ /**
+ * @property {Object} the last set data for the element
+ */
+
+ lastData : false,
+ /**
+ * Sets the value of the field based on a object which is related to the record format for the store.
+ * @param {Object} value the value to set as. or false on reset?
+ */
+ setFromData : function(o){
+ var dv = ''; // display value
+ var vv = ''; // value value..
+ this.lastData = o;
+ if (this.displayField) {
+ dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
+ } else {
+ // this is an error condition!!!
+ Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
+ }
+
+ if(this.valueField){
+ vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
+ }
+ if(this.hiddenField){
+ this.hiddenField.value = vv;
- }, this);
+ this.lastSelectionText = dv;
+ Roo.form.ComboBox.superclass.setValue.call(this, dv);
+ this.value = vv;
+ return;
+ }
+ // no hidden field.. - we store the value in 'value', but still display
+ // display field!!!!
+ this.lastSelectionText = dv;
+ Roo.form.ComboBox.superclass.setValue.call(this, dv);
+ this.value = vv;
+
},
+ // private
+ reset : function(){
+ // overridden so that last data is reset..
+ this.setValue(this.resetValue);
+ this.originalValue = this.getValue();
+ this.clearInvalid();
+ this.lastData = false;
+ if (this.view) {
+ this.view.clearSelections();
+ }
+ },
+ // private
+ findRecord : function(prop, value){
+ var record;
+ if(this.store.getCount() > 0){
+ this.store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ return false;
+ }
+ return true;
+ });
+ }
+ return record;
+ },
-
- removeNodeKeepChildren : function( node)
+ getName: function()
{
-
- ar = Array.from(node.childNodes);
- for (var i = 0; i < ar.length; i++) {
-
- node.removeChild(ar[i]);
- // what if we need to walk these???
- node.parentNode.insertBefore(ar[i], node);
-
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+
+ },
+ // private
+ onViewMove : function(e, t){
+ this.inKeyMode = false;
+ },
+
+ // private
+ onViewOver : function(e, t){
+ if(this.inKeyMode){ // prevent key nav and mouse over conflicts
+ return;
+ }
+ var item = this.view.findItemFromChild(t);
+ if(item){
+ var index = this.view.indexOf(item);
+ this.select(index, false);
}
- node.parentNode.removeChild(node);
},
- searchTag : function(dom)
+ // private
+ onViewClick : function(doFocus)
{
- if(this.tag === false) {
- return;
+ var index = this.view.getSelectedIndexes()[0];
+ var r = this.store.getAt(index);
+ if(r){
+ this.onSelect(r, index);
+ }
+ if(doFocus !== false && !this.blockFocus){
+ this.el.focus();
}
+ },
- var els = dom.getElementsByTagName(this.tag);
+ // private
+ restrictHeight : function(){
+ this.innerList.dom.style.height = '';
+ var inner = this.innerList.dom;
+ var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
+ this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+ this.list.beginUpdate();
+ this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
+ this.list.alignTo(this.el, this.listAlign);
+ this.list.endUpdate();
+ },
- Roo.each(Array.from(els), function(e){
- if(e.parentNode == null) {
- return;
+ // private
+ onEmptyResults : function(){
+ this.collapse();
+ },
+
+ /**
+ * Returns true if the dropdown list is expanded, else false.
+ */
+ isExpanded : function(){
+ return this.list.isVisible();
+ },
+
+ /**
+ * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {String} value The data value of the item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
+ * @return {Boolean} True if the value matched an item in the list, else false
+ */
+ selectByValue : function(v, scrollIntoView){
+ if(v !== undefined && v !== null){
+ var r = this.findRecord(this.valueField || this.displayField, v);
+ if(r){
+ this.select(this.store.indexOf(r), scrollIntoView);
+ return true;
}
- if(this.replaceTag) {
- this.replaceTag(e);
+ }
+ return false;
+ },
+
+ /**
+ * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {Number} index The zero-based index of the list item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
+ */
+ select : function(index, scrollIntoView){
+ this.selectedIndex = index;
+ this.view.select(index);
+ if(scrollIntoView !== false){
+ var el = this.view.getNode(index);
+ if(el){
+ this.innerList.scrollChildIntoView(el, false);
}
- }, this);
- }
-};
+ }
+ },
-/**
- * @class Roo.htmleditor.FilterAttributes
- * clean attributes and styles including http:// etc.. in attribute
- * @constructor
-* Run a new Attribute Filter
-* @param {Object} config Configuration options
- */
-Roo.htmleditor.FilterAttributes = function(cfg)
-{
- Roo.apply(this, cfg);
- this.attrib_black = this.attrib_black || [];
- this.attrib_white = this.attrib_white || [];
+ // private
+ selectNext : function(){
+ var ct = this.store.getCount();
+ if(ct > 0){
+ if(this.selectedIndex == -1){
+ this.select(0);
+ }else if(this.selectedIndex < ct-1){
+ this.select(this.selectedIndex+1);
+ }
+ }
+ },
- this.attrib_clean = this.attrib_clean || [];
- this.style_white = this.style_white || [];
- this.style_black = this.style_black || [];
- this.walk(cfg.node);
-}
+ // private
+ selectPrev : function(){
+ var ct = this.store.getCount();
+ if(ct > 0){
+ if(this.selectedIndex == -1){
+ this.select(0);
+ }else if(this.selectedIndex != 0){
+ this.select(this.selectedIndex-1);
+ }
+ }
+ },
-Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
-{
- tag: true, // all tags
-
- attrib_black : false, // array
- attrib_clean : false,
- attrib_white : false,
+ // private
+ onKeyUp : function(e){
+ if(this.editable !== false && !e.isSpecialKey()){
+ this.lastKey = e.getKey();
+ this.dqTask.delay(this.queryDelay);
+ }
+ },
- style_white : false,
- style_black : false,
-
-
- replaceTag : function(node)
- {
- if (!node.attributes || !node.attributes.length) {
- return true;
+ // private
+ validateBlur : function(){
+ return !this.list || !this.list.isVisible();
+ },
+
+ // private
+ initQuery : function(){
+ this.doQuery(this.getRawValue());
+ },
+
+ // private
+ doForce : function(){
+ if(this.el.dom.value.length > 0){
+ this.el.dom.value =
+ this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+
}
-
- for (var i = node.attributes.length-1; i > -1 ; i--) {
- var a = node.attributes[i];
- //console.log(a);
- if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
- node.removeAttribute(a.name);
- continue;
- }
-
-
-
- if (a.name.toLowerCase().substr(0,2)=='on') {
- node.removeAttribute(a.name);
- continue;
- }
-
-
- if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
- node.removeAttribute(a.name);
- continue;
- }
- if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
- this.cleanAttr(node,a.name,a.value); // fixme..
- continue;
- }
- if (a.name == 'style') {
- this.cleanStyle(node,a.name,a.value);
- continue;
- }
- /// clean up MS crap..
- // tecnically this should be a list of valid class'es..
-
-
- if (a.name == 'class') {
- if (a.value.match(/^Mso/)) {
- node.removeAttribute('class');
- }
-
- if (a.value.match(/^body$/)) {
- node.removeAttribute('class');
+ },
+
+ /**
+ * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
+ * query allowing the query action to be canceled if needed.
+ * @param {String} query The SQL query to execute
+ * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+ * in the field than the minimum specified by the minChars config option. It also clears any filter previously
+ * saved in the current store (defaults to false)
+ */
+ doQuery : function(q, forceAll){
+ if(q === undefined || q === null){
+ q = '';
+ }
+ var qe = {
+ query: q,
+ forceAll: forceAll,
+ combo: this,
+ cancel:false
+ };
+ if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+ return false;
+ }
+ q = qe.query;
+ forceAll = qe.forceAll;
+ if(forceAll === true || (q.length >= this.minChars)){
+ if(this.lastQuery != q || this.alwaysQuery){
+ this.lastQuery = q;
+ if(this.mode == 'local'){
+ this.selectedIndex = -1;
+ if(forceAll){
+ this.store.clearFilter();
+ }else{
+ this.store.filter(this.displayField, q);
+ }
+ this.onLoad();
+ }else{
+ this.store.baseParams[this.queryParam] = q;
+ this.store.load({
+ params: this.getParams(q)
+ });
+ this.expand();
}
- continue;
+ }else{
+ this.selectedIndex = -1;
+ this.onLoad();
}
-
-
- // style cleanup!?
- // class cleanup?
-
}
- return true; // clean children
},
-
- cleanAttr: function(node, n,v)
- {
-
- if (v.match(/^\./) || v.match(/^\//)) {
- return;
+
+ // private
+ getParams : function(q){
+ var p = {};
+ //p[this.queryParam] = q;
+ if(this.pageSize){
+ p.start = 0;
+ p.limit = this.pageSize;
}
- if (v.match(/^(http|https):\/\//)
- || v.match(/^mailto:/)
- || v.match(/^ftp:/)
- || v.match(/^data:/)
- ) {
+ return p;
+ },
+
+ /**
+ * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+ */
+ collapse : function(){
+ if(!this.isExpanded()){
return;
}
- if (v.match(/^#/)) {
- return;
+ this.list.hide();
+ Roo.get(document).un('mousedown', this.collapseIf, this);
+ Roo.get(document).un('mousewheel', this.collapseIf, this);
+ if (!this.editable) {
+ Roo.get(document).un('keydown', this.listKeyPress, this);
}
- if (v.match(/^\{/)) { // allow template editing.
+ this.fireEvent('collapse', this);
+ },
+
+ // private
+ collapseIf : function(e){
+ if(!e.within(this.wrap) && !e.within(this.list)){
+ this.collapse();
+ }
+ },
+
+ /**
+ * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+ */
+ expand : function(){
+ if(this.isExpanded() || !this.hasFocus){
return;
}
-// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
- node.removeAttribute(n);
+ this.list.alignTo(this.el, this.listAlign);
+ this.list.show();
+ Roo.get(document).on('mousedown', this.collapseIf, this);
+ Roo.get(document).on('mousewheel', this.collapseIf, this);
+ if (!this.editable) {
+ Roo.get(document).on('keydown', this.listKeyPress, this);
+ }
+ this.fireEvent('expand', this);
},
- cleanStyle : function(node, n,v)
- {
- if (v.match(/expression/)) { //XSS?? should we even bother..
- node.removeAttribute(n);
+
+ // private
+ // Implements the default empty TriggerField.onTriggerClick function
+ onTriggerClick : function(){
+ if(this.disabled){
return;
}
-
- var parts = v.split(/;/);
- var clean = [];
-
- Roo.each(parts, function(p) {
- p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if (!p.length) {
- return true;
+ if(this.isExpanded()){
+ this.collapse();
+ if (!this.blockFocus) {
+ this.el.focus();
}
- var l = p.split(':').shift().replace(/\s+/g,'');
- l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
- return true;
- }
- //Roo.log()
- // only allow 'c whitelisted system attributes'
- if ( this.style_white.length && style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
- return true;
+ }else {
+ this.hasFocus = true;
+ if(this.triggerAction == 'all') {
+ this.doQuery(this.allQuery, true);
+ } else {
+ this.doQuery(this.getRawValue());
+ }
+ if (!this.blockFocus) {
+ this.el.focus();
}
-
-
- clean.push(p);
- return true;
- },this);
- if (clean.length) {
- node.setAttribute(n, clean.join(';'));
- } else {
- node.removeAttribute(n);
}
-
- }
-
-
-
-
-});/**
- * @class Roo.htmleditor.FilterBlack
- * remove blacklisted elements.
- * @constructor
- * Run a new Blacklisted Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterBlack = function(cfg)
-{
- Roo.apply(this, cfg);
- this.walk(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
-{
- tag : true, // all elements.
-
- replaceTag : function(n)
- {
- n.parentNode.removeChild(n);
- }
-});
-/**
- * @class Roo.htmleditor.FilterComment
- * remove comments.
- * @constructor
-* Run a new Comments Filter
-* @param {Object} config Configuration options
- */
-Roo.htmleditor.FilterComment = function(cfg)
-{
- this.walk(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
-{
-
- replaceComment : function(n)
- {
- n.parentNode.removeChild(n);
- }
-});/**
- * @class Roo.htmleditor.FilterKeepChildren
- * remove tags but keep children
- * @constructor
- * Run a new Keep Children Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterKeepChildren = function(cfg)
-{
- Roo.apply(this, cfg);
- if (this.tag === false) {
- return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
- }
- // hacky?
- if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
- this.cleanNamespace = true;
- }
-
- this.walk(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
-{
- cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
-
- replaceTag : function(node)
+ },
+ listKeyPress : function(e)
{
- // walk children...
- //Roo.log(node.tagName);
- var ar = Array.from(node.childNodes);
- //remove first..
+ //Roo.log('listkeypress');
+ // scroll to first matching element based on key pres..
+ if (e.isSpecialKey()) {
+ return false;
+ }
+ var k = String.fromCharCode(e.getKey()).toUpperCase();
+ //Roo.log(k);
+ var match = false;
+ var csel = this.view.getSelectedNodes();
+ var cselitem = false;
+ if (csel.length) {
+ var ix = this.view.indexOf(csel[0]);
+ cselitem = this.store.getAt(ix);
+ if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
+ cselitem = false;
+ }
+
+ }
- for (var i = 0; i < ar.length; i++) {
- var e = ar[i];
- if (e.nodeType == 1) {
- if (
- (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
- || // array and it matches
- (typeof(this.tag) == 'string' && this.tag == e.tagName)
- ||
- (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
- ||
- (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
- ) {
- this.replaceTag(ar[i]); // child is blacklisted as well...
- continue;
+ this.store.each(function(v) {
+ if (cselitem) {
+ // start at existing selection.
+ if (cselitem.id == v.id) {
+ cselitem = false;
}
+ return;
}
- }
- ar = Array.from(node.childNodes);
- for (var i = 0; i < ar.length; i++) {
-
- node.removeChild(ar[i]);
- // what if we need to walk these???
- node.parentNode.insertBefore(ar[i], node);
- if (this.tag !== false) {
- this.walk(ar[i]);
+ if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
+ match = this.store.indexOf(v);
+ return false;
}
- }
- //Roo.log("REMOVE:" + node.tagName);
- node.parentNode.removeChild(node);
- return false; // don't walk children
-
-
- }
-});/**
- * @class Roo.htmleditor.FilterParagraph
- * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
- * like on 'push' to remove the <p> tags and replace them with line breaks.
- * @constructor
- * Run a new Paragraph Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterParagraph = function(cfg)
-{
- // no need to apply config.
- this.searchTag(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
-{
-
-
- tag : 'P',
-
-
- replaceTag : function(node)
- {
+ }, this);
- if (node.childNodes.length == 1 &&
- node.childNodes[0].nodeType == 3 &&
- node.childNodes[0].textContent.trim().length < 1
- ) {
- // remove and replace with '<BR>';
- node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
- return false; // no need to walk..
- }
-
- var ar = Array.from(node.childNodes);
- for (var i = 0; i < ar.length; i++) {
- node.removeChild(ar[i]);
- // what if we need to walk these???
- node.parentNode.insertBefore(ar[i], node);
+ if (match === false) {
+ return true; // no more action?
}
- // now what about this?
- // <p> </p>
-
- // double BR.
- node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
- node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
- node.parentNode.removeChild(node);
-
- return false;
+ // scroll to?
+ this.view.select(match);
+ var sn = Roo.get(this.view.getSelectedNodes()[0]);
+ sn.scrollIntoView(sn.dom.parentNode, false);
+ },
+ cleanLeadingSpace : function()
+ {
+ // override textfield strip white space (trigers set on blur)
+ }
- }
-
-});/**
- * @class Roo.htmleditor.FilterHashLink
- * remove hash link
- * @constructor
- * Run a new Hash Link Filter
- * @param {Object} config Configuration options
+ /**
+ * @cfg {Boolean} grow
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMin
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMax
+ * @hide
+ */
+ /**
+ * @hide
+ * @method autoSize
+ */
+});/*
+ * Copyright(c) 2010-2012, Roo J Solutions Limited
+ *
+ * Licence LGPL
+ *
*/
- Roo.htmleditor.FilterHashLink = function(cfg)
- {
- // no need to apply config.
- // this.walk(cfg.node);
- this.searchTag(cfg.node);
- }
+/**
+ * @class Roo.form.ComboBoxArray
+ * @extends Roo.form.TextField
+ * A facebook style adder... for lists of email / people / countries etc...
+ * pick multiple items from a combo box, and shows each one.
+ *
+ * Fred [x] Brian [x] [Pick another |v]
+ *
+ *
+ * For this to work: it needs various extra information
+ * - normal combo problay has
+ * name, hiddenName
+ * + displayField, valueField
+ *
+ * For our purpose...
+ *
+ *
+ * If we change from 'extends' to wrapping...
+ *
+ *
+ *
- Roo.extend(Roo.htmleditor.FilterHashLink, Roo.htmleditor.Filter,
- {
-
- tag : 'A',
-
-
- replaceTag : function(node)
- {
- for(var i = 0; i < node.attributes.length; i ++) {
- var a = node.attributes[i];
-
- if(a.name.toLowerCase() == 'href' && a.value.startsWith('#')) {
- this.removeNodeKeepChildren(node);
- }
- }
-
- return false;
- }
-
- });/**
- * @class Roo.htmleditor.FilterSpan
- * filter span's with no attributes out..
* @constructor
- * Run a new Span Filter
+ * Create a new ComboBoxArray.
* @param {Object} config Configuration options
*/
-
-Roo.htmleditor.FilterSpan = function(cfg)
-{
- // no need to apply config.
- this.searchTag(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
-{
-
- tag : 'SPAN',
-
- replaceTag : function(node)
- {
- if (node.attributes && node.attributes.length > 0) {
- return true; // walk if there are any.
- }
- Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
- return false;
-
- }
-
-});/**
- * @class Roo.htmleditor.FilterTableWidth
- try and remove table width data - as that frequently messes up other stuff.
- *
- * was cleanTableWidths.
- *
- * Quite often pasting from word etc.. results in tables with column and widths.
- * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
- *
- * @constructor
- * Run a new Table Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterTableWidth = function(cfg)
-{
- // no need to apply config.
- this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
- this.walk(cfg.node);
-}
-Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+Roo.form.ComboBoxArray = function(config)
{
-
-
-
- replaceTag: function(node) {
-
-
-
- if (node.hasAttribute('width')) {
- node.removeAttribute('width');
- }
+ this.addEvents({
+ /**
+ * @event beforeremove
+ * Fires before remove the value from the list
+ * @param {Roo.form.ComboBoxArray} _self This combo box array
+ * @param {Roo.form.ComboBoxArray.Item} item removed item
+ */
+ 'beforeremove' : true,
+ /**
+ * @event remove
+ * Fires when remove the value from the list
+ * @param {Roo.form.ComboBoxArray} _self This combo box array
+ * @param {Roo.form.ComboBoxArray.Item} item removed item
+ */
+ 'remove' : true
-
- if (node.hasAttribute("style")) {
- // pretty basic...
-
- var styles = node.getAttribute("style").split(";");
- var nstyle = [];
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
- return;
- }
- // what ever is left... we allow.
- nstyle.push(s);
- });
- node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
- if (!nstyle.length) {
- node.removeAttribute('style');
- }
- }
- return true; // continue doing children..
- }
-});/**
- * @class Roo.htmleditor.FilterWord
- * try and clean up all the mess that Word generates.
- *
- * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters
-
- * @constructor
- * Run a new Span Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterWord = function(cfg)
-{
- // no need to apply config.
- this.replaceDocBullets(cfg.node);
+ });
+
+ Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
+
+ this.items = new Roo.util.MixedCollection(false);
+
+ // construct the child combo...
- this.replaceAname(cfg.node);
- // this is disabled as the removal is done by other filters;
- // this.walk(cfg.node);
- this.replaceImageTable(cfg.node);
+
+
+
+
}
-Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
-{
- tag: true,
-
+
+Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
+{
+ /**
+ * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
+ */
+
+ lastData : false,
+ // behavies liek a hiddne field
+ inputType: 'hidden',
/**
- * Clean up MS wordisms...
+ * @cfg {Number} width The width of the box that displays the selected element
+ */
+ width: 300,
+
+
+
+ /**
+ * @cfg {String} name The name of the visable items on this form (eg. titles not ids)
*/
- replaceTag : function(node)
+ name : false,
+ /**
+ * @cfg {String} hiddenName The hidden name of the field, often contains an comma seperated list of names
+ */
+ hiddenName : false,
+ /**
+ * @cfg {String} seperator The value seperator normally ','
+ */
+ seperator : ',',
+
+
+ // private the array of items that are displayed..
+ items : false,
+ // private - the hidden field el.
+ hiddenEl : false,
+ // private - the filed el..
+ el : false,
+
+ //validateValue : function() { return true; }, // all values are ok!
+ //onAddClick: function() { },
+
+ onRender : function(ct, position)
{
-
- // no idea what this does - span with text, replaceds with just text.
- if(
- node.nodeName == 'SPAN' &&
- !node.hasAttributes() &&
- node.childNodes.length == 1 &&
- node.firstChild.nodeName == "#text"
- ) {
- var textNode = node.firstChild;
- node.removeChild(textNode);
- if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
- node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
- }
- node.parentNode.insertBefore(textNode, node);
- if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
- node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
- }
-
- node.parentNode.removeChild(node);
- return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
- }
-
+ // create the standard hidden element
+ //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
- if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
- node.parentNode.removeChild(node);
- return false; // dont do chidlren
- }
- //Roo.log(node.tagName);
- // remove - but keep children..
- if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
- //Roo.log('-- removed');
- while (node.childNodes.length) {
- var cn = node.childNodes[0];
- node.removeChild(cn);
- node.parentNode.insertBefore(cn, node);
- // move node to parent - and clean it..
- if (cn.nodeType == 1) {
- this.replaceTag(cn);
- }
-
- }
- node.parentNode.removeChild(node);
- /// no need to iterate chidlren = it's got none..
- //this.iterateChildren(node, this.cleanWord);
- return false; // no need to iterate children.
- }
- // clean styles
- if (node.className.length) {
-
- var cn = node.className.split(/\W+/);
- var cna = [];
- Roo.each(cn, function(cls) {
- if (cls.match(/Mso[a-zA-Z]+/)) {
- return;
- }
- cna.push(cls);
- });
- node.className = cna.length ? cna.join(' ') : '';
- if (!cna.length) {
- node.removeAttribute("class");
- }
+
+ // give fake names to child combo;
+ this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
+ this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
+
+ this.combo = Roo.factory(this.combo, Roo.form);
+ this.combo.onRender(ct, position);
+ if (typeof(this.combo.width) != 'undefined') {
+ this.combo.onResize(this.combo.width,0);
}
- if (node.hasAttribute("lang")) {
- node.removeAttribute("lang");
- }
+ this.combo.initEvents();
- if (node.hasAttribute("style")) {
-
- var styles = node.getAttribute("style").split(";");
- var nstyle = [];
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
- return;
- }
- // what ever is left... we allow.
- nstyle.push(s);
- });
- node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
- if (!nstyle.length) {
- node.removeAttribute('style');
- }
- }
- return true; // do children
+ // assigned so form know we need to do this..
+ this.store = this.combo.store;
+ this.valueField = this.combo.valueField;
+ this.displayField = this.combo.displayField ;
+ this.combo.wrap.addClass('x-cbarray-grp');
+
+ var cbwrap = this.combo.wrap.createChild(
+ {tag: 'div', cls: 'x-cbarray-cb'},
+ this.combo.el.dom
+ );
- },
-
- styleToObject: function(node)
- {
- var styles = (node.getAttribute("style") || '').split(";");
- var ret = {};
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- // what ever is left... we allow.
- ret[kv[0].trim()] = kv[1];
+ this.hiddenEl = this.combo.wrap.createChild({
+ tag: 'input', type:'hidden' , name: this.hiddenName, value : ''
});
- return ret;
- },
-
-
- replaceAname : function (doc)
- {
- // replace all the a/name without..
- var aa = Array.from(doc.getElementsByTagName('a'));
- for (var i = 0; i < aa.length; i++) {
- var a = aa[i];
- if (a.hasAttribute("name")) {
- a.removeAttribute("name");
- }
- if (a.hasAttribute("href")) {
- continue;
- }
- // reparent children.
- this.removeNodeKeepChildren(a);
+ this.el = this.combo.wrap.createChild({
+ tag: 'input', type:'hidden' , name: this.name, value : ''
+ });
+ // this.el.dom.removeAttribute("name");
+
+
+ this.outerWrap = this.combo.wrap;
+ this.wrap = cbwrap;
+
+ this.outerWrap.setWidth(this.width);
+ this.outerWrap.dom.removeChild(this.el.dom);
+
+ this.wrap.dom.appendChild(this.el.dom);
+ this.outerWrap.dom.removeChild(this.combo.trigger.dom);
+ this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
+
+ this.combo.trigger.setStyle('position','relative');
+ this.combo.trigger.setStyle('left', '0px');
+ this.combo.trigger.setStyle('top', '2px');
+
+ this.combo.el.setStyle('vertical-align', 'text-bottom');
+
+ //this.trigger.setStyle('vertical-align', 'top');
+
+ // this should use the code from combo really... on('add' ....)
+ if (this.adder) {
- }
+ this.adder = this.outerWrap.createChild(
+ {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});
+ var _t = this;
+ this.adder.on('click', function(e) {
+ _t.fireEvent('adderclick', this, e);
+ }, _t);
+ }
+ //var _t = this;
+ //this.adder.on('click', this.onAddClick, _t);
+ this.combo.on('select', function(cb, rec, ix) {
+ this.addItem(rec.data);
+
+ cb.setValue('');
+ cb.el.dom.value = '';
+ //cb.lastData = rec.data;
+ // add to list
+
+ }, this);
+
+
+
+
},
-
- replaceDocBullets : function(doc)
+ getName: function()
{
- // this is a bit odd - but it appears some indents use ql-indent-1
- //Roo.log(doc.innerHTML);
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return this.hiddenName ? this.hiddenName : this.name;
- var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
- }
+ },
+
+
+ onResize: function(w, h){
- listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
- }
- listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
+ return;
+ // not sure if this is needed..
+ //this.combo.onResize(w,h);
+
+ if(typeof w != 'number'){
+ // we do not handle it!?!?
+ return;
}
- listpara = Array.from(doc.getElementsByClassName('ql-indent-1'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
+ var tw = this.combo.trigger.getWidth();
+ tw += this.addicon ? this.addicon.getWidth() : 0;
+ tw += this.editicon ? this.editicon.getWidth() : 0;
+ var x = w - tw;
+ this.combo.el.setWidth( this.combo.adjustWidth('input', x));
+
+ this.combo.trigger.setStyle('left', '0px');
+
+ if(this.list && this.listWidth === undefined){
+ var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
+ this.list.setWidth(lw);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
}
- // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
- var htwo = Array.from(doc.getElementsByTagName('h2'));
- for( var i = 0; i < htwo.length; i ++) {
- if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
- htwo[i].className = "MsoListParagraph";
- }
+
+
+ },
+
+ addItem: function(rec)
+ {
+ var valueField = this.combo.valueField;
+ var displayField = this.combo.displayField;
+
+ if (this.items.indexOfKey(rec[valueField]) > -1) {
+ //console.log("GOT " + rec.data.id);
+ return;
}
- listpara = Array.from(doc.getElementsByClassName('MsoNormal'));
- for( var i = 0; i < listpara.length; i ++) {
- if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
- listpara[i].className = "MsoListParagraph";
- } else {
- listpara[i].className = "MsoNormalx";
- }
+
+ var x = new Roo.form.ComboBoxArray.Item({
+ //id : rec[this.idField],
+ data : rec,
+ displayField : displayField ,
+ tipField : displayField ,
+ cb : this
+ });
+ // use the
+ this.items.add(rec[valueField],x);
+ // add it before the element..
+ this.updateHiddenEl();
+ x.render(this.outerWrap, this.wrap.dom);
+ // add the image handler..
+ },
+
+ updateHiddenEl : function()
+ {
+ this.validate();
+ if (!this.hiddenEl) {
+ return;
}
-
- listpara = doc.getElementsByClassName('MsoListParagraph');
- // Roo.log(doc.innerHTML);
+ var ar = [];
+ var idField = this.combo.valueField;
+ this.items.each(function(f) {
+ ar.push(f.data[idField]);
+ });
+ this.hiddenEl.dom.value = ar.join(this.seperator);
+ this.validate();
+ },
+
+ reset : function()
+ {
+ this.items.clear();
+ Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
+ el.remove();
+ });
- while(listpara.length) {
-
- this.replaceDocBullet(listpara.item(0));
+ this.el.dom.value = '';
+ if (this.hiddenEl) {
+ this.hiddenEl.dom.value = '';
}
-
+
},
-
-
-
- replaceDocBullet : function(p)
+ getValue: function()
{
- // gather all the siblings.
- var ns = p,
- parent = p.parentNode,
- doc = parent.ownerDocument,
- items = [];
+ return this.hiddenEl ? this.hiddenEl.dom.value : '';
+ },
+ setValue: function(v) // not a valid action - must use addItems..
+ {
+
+ this.reset();
- //Roo.log("Parsing: " + p.innerText) ;
- var listtype = 'ul';
- while (ns) {
- if (ns.nodeType != 1) {
- ns = ns.nextSibling;
- continue;
- }
- if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
- //Roo.log("Missing para r q1indent - got:" + ns.className);
- break;
- }
- var spans = ns.getElementsByTagName('span');
-
- if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
- items.push(ns);
- ns = ns.nextSibling;
- has_list = true;
- if (!spans.length) {
- continue;
- }
- var ff = '';
- var se = spans[0];
- for (var i = 0; i < spans.length;i++) {
- se = spans[i];
- if (se.hasAttribute('style') && se.hasAttribute('style') && se.style.fontFamily != '') {
- ff = se.style.fontFamily;
- break;
- }
- }
-
-
- //Roo.log("got font family: " + ff);
- if (typeof(ff) != 'undefined' && !ff.match(/(Symbol|Wingdings)/) && "·o".indexOf(se.innerText.trim()) < 0) {
- listtype = 'ol';
+ if (this.store.isLocal && (typeof(v) == 'string')) {
+ // then we can use the store to find the values..
+ // comma seperated at present.. this needs to allow JSON based encoding..
+ this.hiddenEl.value = v;
+ var v_ar = [];
+ Roo.each(v.split(this.seperator), function(k) {
+ Roo.log("CHECK " + this.valueField + ',' + k);
+ var li = this.store.query(this.valueField, k);
+ if (!li.length) {
+ return;
}
+ var add = {};
+ add[this.valueField] = k;
+ add[this.displayField] = li.item(0).data[this.displayField];
- continue;
- }
- //Roo.log("no mso-list?");
-
- var spans = ns.getElementsByTagName('span');
- if (!spans.length) {
- break;
- }
- var has_list = false;
- for(var i = 0; i < spans.length; i++) {
- if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
- has_list = true;
- break;
+ this.addItem(add);
+ }, this)
+
+ }
+ if (typeof(v) == 'object' ) {
+ // then let's assume it's an array of objects..
+ Roo.each(v, function(l) {
+ var add = l;
+ if (typeof(l) == 'string') {
+ add = {};
+ add[this.valueField] = l;
+ add[this.displayField] = l
}
- }
- if (!has_list) {
- break;
- }
- items.push(ns);
- ns = ns.nextSibling;
-
-
+ this.addItem(add);
+ }, this);
+
}
- if (!items.length) {
- ns.className = "";
+
+
+ },
+ setFromData: function(v)
+ {
+ // this recieves an object, if setValues is called.
+ this.reset();
+ this.el.dom.value = v[this.displayField];
+ this.hiddenEl.dom.value = v[this.valueField];
+ if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
return;
}
+ var kv = v[this.valueField];
+ var dv = v[this.displayField];
+ kv = typeof(kv) != 'string' ? '' : kv;
+ dv = typeof(dv) != 'string' ? '' : dv;
- var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
- parent.insertBefore(ul, p);
- var lvl = 0;
- var stack = [ ul ];
- var last_li = false;
- var margin_to_depth = {};
- max_margins = -1;
+ var keys = kv.split(this.seperator);
+ var display = dv.split(this.seperator);
+ for (var i = 0 ; i < keys.length; i++) {
+ add = {};
+ add[this.valueField] = keys[i];
+ add[this.displayField] = display[i];
+ this.addItem(add);
+ }
+
- items.forEach(function(n, ipos) {
- //Roo.log("got innertHMLT=" + n.innerHTML);
-
- var spans = n.getElementsByTagName('span');
- if (!spans.length) {
- //Roo.log("No spans found");
-
- parent.removeChild(n);
-
-
- return; // skip it...
- }
-
-
- var num = 1;
- var style = {};
- for(var i = 0; i < spans.length; i++) {
-
- style = this.styleToObject(spans[i]);
- if (typeof(style['mso-list']) == 'undefined') {
- continue;
- }
- if (listtype == 'ol') {
- num = spans[i].innerText.replace(/[^0-9]+]/g,'') * 1;
- }
- spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
- break;
- }
- //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
- style = this.styleToObject(n); // mo-list is from the parent node.
- if (typeof(style['mso-list']) == 'undefined') {
- //Roo.log("parent is missing level");
-
- parent.removeChild(n);
-
- return;
- }
-
- var margin = style['margin-left'];
- if (typeof(margin_to_depth[margin]) == 'undefined') {
- max_margins++;
- margin_to_depth[margin] = max_margins;
- }
- nlvl = margin_to_depth[margin] ;
-
- if (nlvl > lvl) {
- //new indent
- var nul = doc.createElement(listtype); // what about number lists...
- if (!last_li) {
- last_li = doc.createElement('li');
- stack[lvl].appendChild(last_li);
- }
- last_li.appendChild(nul);
- stack[nlvl] = nul;
-
- }
- lvl = nlvl;
-
- // not starting at 1..
- if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
- stack[nlvl].setAttribute("start", num);
- }
-
- var nli = stack[nlvl].appendChild(doc.createElement('li'));
- last_li = nli;
- nli.innerHTML = n.innerHTML;
- //Roo.log("innerHTML = " + n.innerHTML);
- parent.removeChild(n);
-
-
-
-
- },this);
+ },
+
+ /**
+ * Validates the combox array value
+ * @return {Boolean} True if the value is valid, else false
+ */
+ validate : function(){
+ if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
+ this.clearInvalid();
+ return true;
+ }
+ return false;
+ },
+
+ validateValue : function(value){
+ return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
+
+ },
+
+ /*@
+ * overide
+ *
+ */
+ isDirty : function() {
+ if(this.disabled) {
+ return false;
+ }
+
+ try {
+ var d = Roo.decode(String(this.originalValue));
+ } catch (e) {
+ return String(this.getValue()) !== String(this.originalValue);
+ }
+ var originalValue = [];
+ for (var i = 0; i < d.length; i++){
+ originalValue.push(d[i][this.valueField]);
+ }
+ return String(this.getValue()) !== String(originalValue.join(this.seperator));
- },
-
- replaceImageTable : function(doc)
- {
- /*
- <table cellpadding=0 cellspacing=0 align=left>
- <tr>
- <td width=423 height=0></td>
- </tr>
- <tr>
- <td></td>
- <td><img width=601 height=401
- src="file:///C:/Users/Alan/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg"
- v:shapes="Picture_x0020_2"></td>
- </tr>
- </table>
- */
- var imgs = Array.from(doc.getElementsByTagName('img'));
- Roo.each(imgs, function(img) {
- var td = img.parentNode;
- if (td.nodeName != 'TD') {
- return;
- }
- var tr = td.parentNode;
- if (tr.nodeName != 'TR') {
- return;
- }
- var tbody = tr.parentNode;
- if (tbody.nodeName != 'TBODY') {
- return;
- }
- var table = tbody.parentNode;
- if (table.nodeName != 'TABLE') {
- return;
- }
- // first row..
-
- if (table.getElementsByTagName('tr').length != 2) {
- return;
- }
- if (table.getElementsByTagName('td').length != 3) {
- return;
- }
- if (table.innerText.trim() != '') {
- return;
- }
- var p = table.parentNode;
- img.parentNode.removeChild(img);
- p.insertBefore(img, table);
- p.removeChild(table);
-
-
-
- });
-
-
- }
+ }
});
+
+
+
/**
- * @class Roo.htmleditor.FilterStyleToTag
- * part of the word stuff... - certain 'styles' should be converted to tags.
- * eg.
- * font-weight: bold -> bold
- * ?? super / subscrit etc..
+ * @class Roo.form.ComboBoxArray.Item
+ * @extends Roo.BoxComponent
+ * A selected item in the list
+ * Fred [x] Brian [x] [Pick another |v]
*
* @constructor
-* Run a new style to tag filter.
-* @param {Object} config Configuration options
+ * Create a new item.
+ * @param {Object} config Configuration options
*/
-Roo.htmleditor.FilterStyleToTag = function(cfg)
-{
-
- this.tags = {
- B : [ 'fontWeight' , 'bold'],
- I : [ 'fontStyle' , 'italic'],
- //pre : [ 'font-style' , 'italic'],
- // h1.. h6 ?? font-size?
- SUP : [ 'verticalAlign' , 'super' ],
- SUB : [ 'verticalAlign' , 'sub' ]
-
-
- };
-
- Roo.apply(this, cfg);
-
-
- this.walk(cfg.node);
-
-
-
+
+Roo.form.ComboBoxArray.Item = function(config) {
+ config.id = Roo.id();
+ Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
}
-
-Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
-{
- tag: true, // all tags
-
- tags : false,
+Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
+ data : {},
+ cb: false,
+ displayField : false,
+ tipField : false,
+
+ defaultAutoCreate : {
+ tag: 'div',
+ cls: 'x-cbarray-item',
+ cn : [
+ { tag: 'div' },
+ {
+ tag: 'img',
+ width:16,
+ height : 16,
+ src : Roo.BLANK_IMAGE_URL ,
+ align: 'center'
+ }
+ ]
+
+ },
- replaceTag : function(node)
+
+ onRender : function(ct, position)
{
+ Roo.form.Field.superclass.onRender.call(this, ct, position);
-
- if (node.getAttribute("style") === null) {
- return true;
- }
- var inject = [];
- for (var k in this.tags) {
- if (node.style[this.tags[k][0]] == this.tags[k][1]) {
- inject.push(k);
- node.style.removeProperty(this.tags[k][0]);
- }
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ this.el = ct.createChild(cfg, position);
}
- if (!inject.length) {
- return true;
+
+ this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
+
+ this.el.child('div').dom.innerHTML = this.cb.renderer ?
+ this.cb.renderer(this.data) :
+ String.format('{0}',this.data[this.displayField]);
+
+
+ this.el.child('div').dom.setAttribute('qtip',
+ String.format('{0}',this.data[this.tipField])
+ );
+
+ this.el.child('img').on('click', this.remove, this);
+
+ },
+
+ remove : function()
+ {
+ if(this.cb.disabled){
+ return;
}
- var cn = Array.from(node.childNodes);
- var nn = node;
- Roo.each(inject, function(t) {
- var nc = node.ownerDocument.createElement(t);
- nn.appendChild(nc);
- nn = nc;
- });
- for(var i = 0;i < cn.length;cn++) {
- node.removeChild(cn[i]);
- nn.appendChild(cn[i]);
+
+ if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
+ this.cb.items.remove(this);
+ this.el.child('img').un('click', this.remove, this);
+ this.el.remove();
+ this.cb.updateHiddenEl();
+
+ this.cb.fireEvent('remove', this.cb, this);
}
- return true /// iterate thru
+
}
-
-})/**
- * @class Roo.htmleditor.FilterLongBr
- * BR/BR/BR - keep a maximum of 2...
+});/*
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011 Alan Knowles
+ *
+ * License - LGPL
+ */
+
+
+/**
+ * @class Roo.form.ComboNested
+ * @extends Roo.form.ComboBox
+ * A combobox for that allows selection of nested items in a list,
+ * eg.
+ *
+ * Book
+ * -> red
+ * -> green
+ * Table
+ * -> square
+ * ->red
+ * ->green
+ * -> rectangle
+ * ->green
+ *
+ *
* @constructor
- * Run a new Long BR Filter
+ * Create a new ComboNested
* @param {Object} config Configuration options
*/
+Roo.form.ComboNested = function(config){
+ Roo.form.ComboCheck.superclass.constructor.call(this, config);
+ // should verify some data...
+ // like
+ // hiddenName = required..
+ // displayField = required
+ // valudField == required
+ var req= [ 'hiddenName', 'displayField', 'valueField' ];
+ var _t = this;
+ Roo.each(req, function(e) {
+ if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
+ throw "Roo.form.ComboNested : missing value for: " + e;
+ }
+ });
+
+
+};
-Roo.htmleditor.FilterLongBr = function(cfg)
-{
- // no need to apply config.
- this.searchTag(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
-{
+Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
+
+ /*
+ * @config {Number} max Number of columns to show
+ */
-
- tag : 'BR',
+ maxColumns : 3,
+
+ list : null, // the outermost div..
+ innerLists : null, // the
+ views : null,
+ stores : null,
+ // private
+ loadingChildren : false,
-
- replaceTag : function(node)
+ onRender : function(ct, position)
{
+ Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
- var ps = node.nextSibling;
- while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
- ps = ps.nextSibling;
+ if(this.hiddenName){
+ this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
+ 'before', true);
+ this.hiddenField.value =
+ this.hiddenValue !== undefined ? this.hiddenValue :
+ this.value !== undefined ? this.value : '';
+
+ // prevent input submission
+ this.el.dom.removeAttribute('name');
+
+
+ }
+
+ if(Roo.isGecko){
+ this.el.dom.setAttribute('autocomplete', 'off');
+ }
+
+ var cls = 'x-combo-list';
+
+ this.list = new Roo.Layer({
+ shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+ });
+
+ var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+ this.list.swallowEvent('mousewheel');
+ this.assetHeight = 0;
+
+ if(this.title){
+ this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+ this.assetHeight += this.header.getHeight();
+ }
+ this.innerLists = [];
+ this.views = [];
+ this.stores = [];
+ for (var i =0 ; i < this.maxColumns; i++) {
+ this.onRenderList( cls, i);
}
- if (!ps && [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) {
- node.parentNode.removeChild(node); // remove last BR inside one fo these tags
- return false;
+ // 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.allowBlank && !this.disableClear) {
+
+ this.pageTb.add(new Roo.Toolbar.Fill(), {
+ cls: 'x-btn-icon x-btn-clear',
+ text: ' ',
+ handler: function()
+ {
+ _this.collapse();
+ _this.clearValue();
+ _this.onSelect(false, -1);
+ }
+ });
+ }
+ if (this.footer) {
+ this.assetHeight += this.footer.getHeight();
}
- if (!ps || ps.nodeType != 1) {
- return false;
+ },
+ onRenderList : function ( cls, i)
+ {
+
+ var lw = Math.floor(
+ ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+ );
+
+ 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.setWidth(lw);
+ il.setStyle({ 'overflow-x' : 'hidden'});
+
+ if(!this.tpl){
+ 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'
+ }
+ });
}
- if (!ps || ps.tagName != 'BR') {
-
- return false;
+ var store = this.store;
+ if (i > 0) {
+ store = new Roo.data.SimpleStore({
+ //fields : this.store.reader.meta.fields,
+ reader : this.store.reader,
+ data : [ ]
+ });
}
+ this.stores[i] = store;
+
+ 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.createDelegate(this, {list : i }, true));
+ view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
+ //view.on('click', this.onViewClick, this, { list : i });
+
+ store.on('beforeload', this.onBeforeLoad, this);
+ store.on('load', this.onLoad, this, { list : i});
+ store.on('loadexception', this.onLoadException, this);
+
+ // hide the other vies..
- if (!node.previousSibling) {
- return false;
- }
- var ps = node.previousSibling;
+ },
+
+ restrictHeight : function()
+ {
+ var mh = 0;
+ Roo.each(this.innerLists, function(il,i) {
+ var el = this.views[i].getEl();
+ el.dom.style.height = '';
+ var inner = el.dom;
+ var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
+ // only adjust heights on other ones..
+ mh = Math.max(h, mh);
+ if (i < 1) {
+
+ el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+ il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+
+ }
+
+
+ }, this);
- while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
- ps = ps.previousSibling;
+ this.list.beginUpdate();
+ this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
+ this.list.alignTo(this.el, this.listAlign);
+ this.list.endUpdate();
+
+ },
+
+
+ // -- store handlers..
+ // private
+ onBeforeLoad : function()
+ {
+ if(!this.hasFocus){
+ return;
}
- if (!ps || ps.nodeType != 1) {
- return false;
+ this.innerLists[0].update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ this.restrictHeight();
+ this.selectedIndex = -1;
+ },
+ // private
+ onLoad : function(a,b,c,d)
+ {
+ if (!this.loadingChildren) {
+ // then we are loading the top level. - hide the children
+ for (var i = 1;i < this.views.length; i++) {
+ this.views[i].getEl().setStyle({ display : 'none' });
+ }
+ var lw = Math.floor(
+ ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+ );
+
+ this.list.setWidth(lw); // default to '1'
+
+
}
- // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
- if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
- return false;
+ if(!this.hasFocus){
+ return;
}
- node.parentNode.removeChild(node); // remove me...
+ if(this.store.getCount() > 0) {
+ this.expand();
+ this.restrictHeight();
+ } else {
+ this.onEmptyResults();
+ }
- return false; // no need to do children
-
- }
+ if (!this.loadingChildren) {
+ this.selectActive();
+ }
+ /*
+ this.stores[1].loadData([]);
+ this.stores[2].loadData([]);
+ this.views
+ */
-});
-
-/**
- * @class Roo.htmleditor.FilterBlock
- * removes id / data-block and contenteditable that are associated with blocks
- * usage should be done on a cloned copy of the dom
- * @constructor
-* Run a new Attribute Filter { node : xxxx }}
-* @param {Object} config Configuration options
- */
-Roo.htmleditor.FilterBlock = function(cfg)
-{
- Roo.apply(this, cfg);
- var qa = cfg.node.querySelectorAll;
- this.removeAttributes('data-block');
- this.removeAttributes('contenteditable');
- this.removeAttributes('id');
+ //this.el.focus();
+ },
-}
-
-Roo.apply(Roo.htmleditor.FilterBlock.prototype,
-{
- node: true, // all tags
-
-
- removeAttributes : function(attr)
+
+ // private
+ onLoadException : function()
{
- var ar = this.node.querySelectorAll('*[' + attr + ']');
- for (var i =0;i<ar.length;i++) {
- ar[i].removeAttribute(attr);
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
}
- }
-
+ },
+ // no cleaning of leading spaces on blur here.
+ cleanLeadingSpace : function(e) { },
-});
-/***
- * This is based loosely on tinymce
- * @class Roo.htmleditor.TidySerializer
- * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
- * @constructor
- * @method Serializer
- * @param {Object} settings Name/value settings object.
- */
-
-Roo.htmleditor.TidySerializer = function(settings)
-{
- Roo.apply(this, settings);
-
- this.writer = new Roo.htmleditor.TidyWriter(settings);
-
-
+ onSelectChange : function (view, sels, opts )
+ {
+ var ix = view.getSelectedIndexes();
+
+ if (opts.list > this.maxColumns - 2) {
+ if (view.store.getCount()< 1) {
+ this.views[opts.list ].getEl().setStyle({ display : 'none' });
-};
-Roo.htmleditor.TidySerializer.prototype = {
-
- /**
- * @param {boolean} inner do the inner of the node.
- */
- inner : false,
-
- writer : false,
-
- /**
- * Serializes the specified node into a string.
- *
- * @example
- * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
- * @method serialize
- * @param {DomElement} node Node instance to serialize.
- * @return {String} String with HTML based on DOM tree.
- */
- serialize : function(node) {
-
- // = settings.validate;
- var writer = this.writer;
- var self = this;
- this.handlers = {
- // #text
- 3: function(node) {
-
- writer.text(node.nodeValue, node);
- },
- // #comment
- 8: function(node) {
- writer.comment(node.nodeValue);
- },
- // Processing instruction
- 7: function(node) {
- writer.pi(node.name, node.nodeValue);
- },
- // Doctype
- 10: function(node) {
- writer.doctype(node.nodeValue);
- },
- // CDATA
- 4: function(node) {
- writer.cdata(node.nodeValue);
- },
- // Document fragment
- 11: function(node) {
- node = node.firstChild;
- if (!node) {
- return;
- }
- while(node) {
- self.walk(node);
- node = node.nextSibling
+ } else {
+ if (ix.length) {
+ // used to clear ?? but if we are loading unselected
+ this.setFromData(view.store.getAt(ix[0]).data);
}
+
}
- };
- writer.reset();
- 1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
- return writer.getContent();
- },
-
- walk: function(node)
- {
- var attrName, attrValue, sortedAttrs, i, l, elementRule,
- handler = this.handlers[node.nodeType];
- if (handler) {
- handler(node);
return;
}
-
- var name = node.nodeName;
- var isEmpty = node.childNodes.length < 1;
-
- var writer = this.writer;
- var attrs = node.attributes;
- // Sort attributes
- writer.start(node.nodeName, attrs, isEmpty, node);
- if (isEmpty) {
- return;
- }
- node = node.firstChild;
- if (!node) {
- writer.end(name);
+ if (!ix.length) {
+ // this get's fired when trigger opens..
+ // this.setFromData({});
+ var str = this.stores[opts.list+1];
+ str.data.clear(); // removeall wihtout the fire events..
return;
}
- while (node) {
- this.walk(node);
- node = node.nextSibling;
+
+ var rec = view.store.getAt(ix[0]);
+
+ this.setFromData(rec.data);
+ this.fireEvent('select', this, rec, ix[0]);
+
+ var lw = Math.floor(
+ (
+ (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
+ ) / this.maxColumns
+ );
+ this.loadingChildren = true;
+ this.stores[opts.list+1].loadDataFromChildren( rec );
+ this.loadingChildren = false;
+ var dl = this.stores[opts.list+1]. getTotalCount();
+
+ this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
+
+ this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
+ for (var i = opts.list+2; i < this.views.length;i++) {
+ this.views[i].getEl().setStyle({ display : 'none' });
}
- writer.end(name);
+ this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
+ this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
+
+ if (this.isLoading) {
+ // this.selectActive(opts.list);
+ }
+
+ },
- }
- // Serialize element and treat all non elements as fragments
-
-};
-
-/***
- * This is based loosely on tinymce
- * @class Roo.htmleditor.TidyWriter
- * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
- *
- * Known issues?
- * - not tested much with 'PRE' formated elements.
- *
- *
- *
- */
-
-Roo.htmleditor.TidyWriter = function(settings)
-{
- // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
- Roo.apply(this, settings);
- this.html = [];
- this.state = [];
-
- this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
-
-}
-Roo.htmleditor.TidyWriter.prototype = {
-
-
- state : false,
- indent : ' ',
- // part of state...
- indentstr : '',
- in_pre: false,
- in_inline : false,
- last_inline : false,
- encode : false,
+ onDoubleClick : function()
+ {
+ this.collapse(); //??
+ },
+
- /**
- * Writes the a start element such as <p id="a">.
- *
- * @method start
- * @param {String} name Name of the element.
- * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
- * @param {Boolean} empty Optional empty state if the tag should end like <br />.
- */
- start: function(name, attrs, empty, node)
+
+
+ // private
+ recordToStack : function(store, prop, value, stack)
{
- var i, l, attr, value;
-
- // there are some situations where adding line break && indentation will not work. will not work.
- // <span / b / i ... formating?
-
- var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
- var in_pre = this.in_pre || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
-
- var is_short = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
-
- var add_lb = name == 'BR' ? false : in_inline;
-
- if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
- i_inline = false;
+ 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;
+ var srec = false;
+ if(store.getCount() < 1){
+ return false;
}
-
- var indentstr = this.indentstr;
-
- // e_inline = elements that can be inline, but still allow \n before and after?
- // only 'BR' ??? any others?
-
- // ADD LINE BEFORE tage
- if (!this.in_pre) {
- if (in_inline) {
- //code
- if (name == 'BR') {
- this.addLine();
- } else if (this.lastElementEndsWS()) {
- this.addLine();
- } else{
- // otherwise - no new line. (and dont indent.)
- indentstr = '';
+ store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ srec = r;
+ return false;
+ }
+ if (r.data.cn && r.data.cn.length) {
+ cstore.loadDataFromChildren( r);
+ var cret = _this.recordToStack(cstore, prop, value, stack);
+ if (cret !== false) {
+ record = cret;
+ srec = r;
+ return false;
}
-
- } else {
- this.addLine();
}
- } else {
- indentstr = '';
+
+ return true;
+ });
+ if (record == false) {
+ return false
}
-
- this.html.push(indentstr + '<', name.toLowerCase());
-
- if (attrs) {
- for (i = 0, l = attrs.length; i < l; i++) {
- attr = attrs[i];
- this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
- }
+ stack.unshift(srec);
+ return record;
+ },
+
+ /*
+ * find the stack of stores that match our value.
+ *
+ *
+ */
+
+ selectActive : function ()
+ {
+ // if store is not loaded, then we will need to wait for that to happen first.
+ var stack = [];
+ this.recordToStack(this.store, this.valueField, this.getValue(), stack);
+ for (var i = 0; i < stack.length; i++ ) {
+ this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
}
-
- if (empty) {
- if (is_short) {
- this.html[this.html.length] = '/>';
- } else {
- this.html[this.html.length] = '></' + name.toLowerCase() + '>';
- }
- var e_inline = name == 'BR' ? false : this.in_inline;
-
- if (!e_inline && !this.in_pre) {
- this.addLine();
- }
- return;
-
+
+ }
+
+
+
+
+
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.Checkbox
+ * @extends Roo.form.Field
+ * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
+ * @constructor
+ * Creates a new Checkbox
+ * @param {Object} config Configuration options
+ */
+Roo.form.Checkbox = function(config){
+ Roo.form.Checkbox.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event check
+ * Fires when the checkbox is checked or unchecked.
+ * @param {Roo.form.Checkbox} this This checkbox
+ * @param {Boolean} checked The new checked value
+ */
+ check : true
+ });
+};
+
+Roo.extend(Roo.form.Checkbox, 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 {Boolean} checked True if the the checkbox should render already checked (defaults to false)
+ */
+ checked: false,
+ /**
+ * @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"},
+ /**
+ * @cfg {String} boxLabel The text that appears beside the checkbox
+ */
+ boxLabel : "",
+ /**
+ * @cfg {String} inputValue The value that should go into the generated input element's value attribute
+ */
+ inputValue : '1',
+ /**
+ * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
+ */
+ valueOff: '0', // value when not checked..
+
+ actionMode : 'viewEl',
+ //
+ // private
+ itemCls : 'x-menu-check-item x-form-item',
+ groupClass : 'x-menu-group-item',
+ inputType : 'hidden',
+
+
+ inSetChecked: false, // check that we are not calling self...
+
+ 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');
}
- // not empty..
- this.html[this.html.length] = '>';
-
- // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+ },
+
+ 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);
/*
- if (!in_inline && !in_pre) {
- var cn = node.firstChild;
- while(cn) {
- if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
- in_inline = true
- break;
- }
- cn = cn.nextSibling;
- }
-
+ if(this.inputValue !== undefined){
+ this.el.dom.value = this.inputValue;
}
*/
+ //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+ this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+ var viewEl = this.wrap.createChild({
+ tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+ this.viewEl = viewEl;
+ this.wrap.on('click', this.onClick, this);
+ this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
+ this.el.on('propertychange', this.setFromHidden, this); //ie
- this.pushState({
- indentstr : in_pre ? '' : (this.indentstr + this.indent),
- in_pre : in_pre,
- in_inline : in_inline
- });
- // add a line after if we are not in a
-
- if (!in_inline && !in_pre) {
- this.addLine();
- }
-
-
- },
-
- lastElementEndsWS : function()
- {
- var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
- if (value === false) {
- return true;
+ if(this.boxLabel){
+ this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+ // viewEl.on('click', this.onClick, this);
}
- return value.match(/\s+$/);
-
+ //if(this.checked){
+ this.setChecked(this.checked);
+ //}else{
+ //this.checked = this.el.dom;
+ //}
+
},
-
+
+ // private
+ initValue : Roo.emptyFn,
+
/**
- * Writes the a end element such as </p>.
- *
- * @method end
- * @param {String} name Name of the element.
+ * Returns the checked state of the checkbox.
+ * @return {Boolean} True if checked, else false
*/
- end: function(name) {
- var value;
- this.popState();
- var indentstr = '';
- var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
-
- if (!this.in_pre && !in_inline) {
- this.addLine();
- indentstr = this.indentstr;
+ getValue : function(){
+ if(this.el){
+ return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
}
- this.html.push(indentstr + '</', name.toLowerCase(), '>');
- this.last_inline = in_inline;
+ return this.valueOff;
- // pop the indent state..
},
- /**
- * Writes a text node.
- *
- * In pre - we should not mess with the contents.
- *
- *
- * @method text
- * @param {String} text String to write out.
- * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
- */
- text: function(in_text, node)
- {
- // if not in whitespace critical
- if (in_text.length < 1) {
+
+ // private
+ onClick : function(){
+ if (this.disabled) {
return;
}
- var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
-
- if (this.in_pre) {
- this.html[this.html.length] = text;
- return;
- }
+ this.setChecked(!this.checked);
+
+ //if(this.el.dom.checked != this.checked){
+ // this.setValue(this.el.dom.checked);
+ // }
+ },
+
+ /**
+ * 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.in_inline) {
- text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
- if (text != ' ') {
- text = text.replace(/\s+/,' '); // all white space to single white space
-
-
- // if next tag is '<BR>', then we can trim right..
- if (node.nextSibling &&
- node.nextSibling.nodeType == 1 &&
- node.nextSibling.nodeName == 'BR' )
- {
- text = text.replace(/\s+$/g,'');
- }
- // if previous tag was a BR, we can also trim..
- if (node.previousSibling &&
- node.previousSibling.nodeType == 1 &&
- node.previousSibling.nodeName == 'BR' )
- {
- text = this.indentstr + text.replace(/^\s+/g,'');
- }
- if (text.match(/\n/)) {
- text = text.replace(
- /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
- );
- // remoeve the last whitespace / line break.
- text = text.replace(/\n\s+$/,'');
- }
- // repace long lines
-
- }
-
- this.html[this.html.length] = text;
- return;
+
+ //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ //if(this.el && this.el.dom){
+ // this.el.dom.checked = this.checked;
+ // this.el.dom.defaultChecked = this.checked;
+ //}
+ this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+ //this.fireEvent("check", this, this.checked);
+ },
+ // private..
+ setChecked : function(state,suppressEvent)
+ {
+ if (this.inSetChecked) {
+ this.checked = state;
+ return;
}
- // see if previous element was a inline element.
- var indentstr = this.indentstr;
-
- text = text.replace(/\s+/g," "); // all whitespace into single white space.
- // should trim left?
- if (node.previousSibling &&
- node.previousSibling.nodeType == 1 &&
- Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
- {
- indentstr = '';
-
- } else {
- this.addLine();
- text = text.replace(/^\s+/,''); // trim left
-
+
+ if(this.wrap){
+ this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
}
- // should trim right?
- if (node.nextSibling &&
- node.nextSibling.nodeType == 1 &&
- Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
- {
- // noop
-
- } else {
- text = text.replace(/\s+$/,''); // trim right
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent('check', this, state);
}
-
-
-
-
+ this.inSetChecked = true;
+
+ this.el.dom.value = state ? this.inputValue : this.valueOff;
+
+ this.inSetChecked = false;
- if (text.length < 1) {
+ },
+ // handle setting of hidden value by some other method!!?!?
+ setFromHidden: function()
+ {
+ if(!this.el){
return;
}
- if (!text.match(/\n/)) {
- this.html.push(indentstr + text);
- 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.Checkbox.superclass.onDestroy.call(this);
+ },
+
+ setBoxLabel : function(str)
+ {
+ this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
+ }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Radio
+ * @extends Roo.form.Checkbox
+ * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
+ * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @constructor
+ * Creates a new Radio
+ * @param {Object} config Configuration options
+ */
+Roo.form.Radio = function(){
+ Roo.form.Radio.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
+ inputType: 'radio',
+
+ /**
+ * If this radio is part of a group, it will return the selected value
+ * @return {String}
+ */
+ getGroupValue : function(){
+ return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
+ },
+
+
+ onRender : function(ct, position){
+ Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
- text = this.indentstr + text.replace(
- /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
- );
- // remoeve the last whitespace / line break.
- text = text.replace(/\s+$/,'');
+ if(this.inputValue !== undefined){
+ this.el.dom.value = this.inputValue;
+ }
+
+ this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+ //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+ //var viewEl = this.wrap.createChild({
+ // tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+ //this.viewEl = viewEl;
+ //this.wrap.on('click', this.onClick, this);
- this.html.push(text);
+ //this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
+ //this.el.on('propertychange', this.setFromHidden, this); //ie
- // split and indent..
+ if(this.boxLabel){
+ this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+ // viewEl.on('click', this.onClick, this);
+ }
+ if(this.checked){
+ this.el.dom.checked = 'checked' ;
+ }
+
},
/**
- * Writes a cdata node such as <![CDATA[data]]>.
- *
- * @method cdata
- * @param {String} text String to write out inside the cdata.
- */
- cdata: function(text) {
- this.html.push('<![CDATA[', text, ']]>');
- },
- /**
- * Writes a comment node such as <!-- Comment -->.
- *
- * @method cdata
- * @param {String} text String to write out inside the comment.
- */
- comment: function(text) {
- this.html.push('<!--', text, '-->');
- },
- /**
- * Writes a PI node such as <?xml attr="value" ?>.
- *
- * @method pi
- * @param {String} name Name of the pi.
- * @param {String} text String to write out inside the pi.
- */
- pi: function(name, text) {
- text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
- this.indent != '' && this.html.push('\n');
- },
- /**
- * Writes a doctype node such as <!DOCTYPE data>.
- *
- * @method doctype
- * @param {String} text String to write out inside the doctype.
- */
- doctype: function(text) {
- this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
- },
- /**
- * Resets the internal buffer if one wants to reuse the writer.
- *
- * @method reset
- */
- reset: function() {
- this.html.length = 0;
- this.state = [];
- this.pushState({
- indentstr : '',
- in_pre : false,
- in_inline : false
- })
- },
- /**
- * Returns the contents that got serialized.
- *
- * @method getContent
- * @return {String} HTML contents that got written down.
+ * 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.
*/
- getContent: function() {
- return this.html.join('').replace(/\n$/, '');
- },
-
- pushState : function(cfg)
- {
- this.state.push(cfg);
- Roo.apply(this, cfg);
+ setValue : function(v,suppressEvent){
+
+
+ //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ //if(this.el && this.el.dom){
+ // this.el.dom.checked = this.checked;
+ // this.el.dom.defaultChecked = this.checked;
+ //}
+ this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+
+ this.el.dom.form[this.name].value = v;
+
+ //this.fireEvent("check", this, this.checked);
},
-
- popState : function()
+ // private..
+ setChecked : function(state,suppressEvent)
{
- if (this.state.length < 1) {
- return; // nothing to push
+
+ if(this.wrap){
+ this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
}
- var cfg = {
- in_pre: false,
- indentstr : ''
- };
- this.state.pop();
- if (this.state.length > 0) {
- cfg = this.state[this.state.length-1];
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent('check', this, state);
}
- Roo.apply(this, cfg);
+
+
+
+
},
+ reset : function(){
+ // this.setValue(this.resetValue);
+ //this.originalValue = this.getValue();
+ this.clearInvalid();
+ }
- addLine: function()
+});Roo.rtf = {}; // namespace
+Roo.rtf.Hex = function(hex)
+{
+ this.hexstr = hex;
+};
+Roo.rtf.Paragraph = function(opts)
+{
+ this.content = []; ///??? is that used?
+};Roo.rtf.Span = function(opts)
+{
+ this.value = opts.value;
+};
+
+Roo.rtf.Group = function(parent)
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.content = [];
+ this.cn = [];
+
+
+
+};
+
+Roo.rtf.Group.prototype = {
+ ignorable : false,
+ content: false,
+ cn: false,
+ addContent : function(node) {
+ // could set styles...
+ this.content.push(node);
+ },
+ addChild : function(cn)
{
- if (this.html.length < 1) {
- return;
+ this.cn.push(cn);
+ },
+ // only for images really...
+ toDataURL : function()
+ {
+ var mimetype = false;
+ switch(true) {
+ case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0:
+ mimetype = "image/png";
+ break;
+ case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
+ mimetype = "image/jpeg";
+ break;
+ default :
+ return 'about:blank'; // ?? error?
}
- var value = this.html[this.html.length - 1];
- if (value.length > 0 && '\n' !== value) {
- this.html.push('\n');
- }
+ var hexstring = this.content[this.content.length-1].value;
+
+ return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
+ return String.fromCharCode(parseInt(a, 16));
+ }).join(""));
}
+};
+// this looks like it's normally the {rtf{ .... }}
+Roo.rtf.Document = function()
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.rtlch = [];
+ this.content = [];
+ this.cn = [];
-//'pre script noscript style textarea video audio iframe object code'
-// shortended... 'area base basefont br col frame hr img input isindex link meta param embed source wbr track');
-// inline
};
-
-Roo.htmleditor.TidyWriter.inline_elements = [
- 'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
- 'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
-];
-Roo.htmleditor.TidyWriter.shortend_elements = [
- 'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
- 'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
-];
-
-Roo.htmleditor.TidyWriter.whitespace_elements = [
- 'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
-];/***
- * This is based loosely on tinymce
- * @class Roo.htmleditor.TidyEntities
- * @static
- * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+Roo.extend(Roo.rtf.Document, Roo.rtf.Group, {
+ addChild : function(cn)
+ {
+ this.cn.push(cn);
+ switch(cn.type) {
+ case 'rtlch': // most content seems to be inside this??
+ case 'listtext':
+ case 'shpinst':
+ this.rtlch.push(cn);
+ return;
+ default:
+ this[cn.type] = cn;
+ }
+
+ },
+
+ getElementsByType : function(type)
+ {
+ var ret = [];
+ this._getElementsByType(type, ret, this.cn, 'rtf');
+ return ret;
+ },
+ _getElementsByType : function (type, ret, search_array, path)
+ {
+ search_array.forEach(function(n,i) {
+ if (n.type == type) {
+ n.path = path + '/' + n.type + ':' + i;
+ ret.push(n);
+ }
+ if (n.cn.length > 0) {
+ this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
+ }
+ },this);
+ }
+
+});
+
+Roo.rtf.Ctrl = function(opts)
+{
+ this.value = opts.value;
+ this.param = opts.param;
+};
+/**
+ *
+ *
+ * based on this https://github.com/iarna/rtf-parser
+ * it's really only designed to extract pict from pasted RTF
+ *
+ * usage:
+ *
+ * var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
+ *
*
- * Not 100% sure this is actually used or needed.
*/
-Roo.htmleditor.TidyEntities = {
-
- /**
- * initialize data..
- */
- init : function (){
-
- this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
-
- },
+
- buildEntitiesLookup: function(items, radix) {
- var i, chr, entity, lookup = {};
- if (!items) {
- return {};
- }
- items = typeof(items) == 'string' ? items.split(',') : items;
- radix = radix || 10;
- // Build entities lookup table
- for (i = 0; i < items.length; i += 2) {
- chr = String.fromCharCode(parseInt(items[i], radix));
- // Only add non base entities
- if (!this.baseEntities[chr]) {
- entity = '&' + items[i + 1] + ';';
- lookup[chr] = entity;
- lookup[entity] = chr;
- }
- }
- return lookup;
+
+Roo.rtf.Parser = function(text) {
+ //super({objectMode: true})
+ this.text = '';
+ this.parserState = this.parseText;
+
+ // these are for interpeter...
+ this.doc = {};
+ ///this.parserState = this.parseTop
+ this.groupStack = [];
+ this.hexStore = [];
+ this.doc = false;
+
+ this.groups = []; // where we put the return.
+
+ for (var ii = 0; ii < text.length; ++ii) {
+ ++this.cpos;
- },
+ if (text[ii] === '\n') {
+ ++this.row;
+ this.col = 1;
+ } else {
+ ++this.col;
+ }
+ this.parserState(text[ii]);
+ }
- asciiMap : {
- 128: '€',
- 130: '‚',
- 131: 'ƒ',
- 132: '„',
- 133: '…',
- 134: '†',
- 135: '‡',
- 136: 'ˆ',
- 137: '‰',
- 138: 'Š',
- 139: '‹',
- 140: 'Œ',
- 142: 'Ž',
- 145: '‘',
- 146: '’',
- 147: '“',
- 148: '”',
- 149: '•',
- 150: '–',
- 151: '—',
- 152: '˜',
- 153: '™',
- 154: 'š',
- 155: '›',
- 156: 'œ',
- 158: 'ž',
- 159: 'Ÿ'
+
+
+};
+Roo.rtf.Parser.prototype = {
+ text : '', // string being parsed..
+ controlWord : '',
+ controlWordParam : '',
+ hexChar : '',
+ doc : false,
+ group: false,
+ groupStack : false,
+ hexStore : false,
+
+
+ cpos : 0,
+ row : 1, // reportin?
+ col : 1, //
+
+
+ push : function (el)
+ {
+ var m = 'cmd'+ el.type;
+ if (typeof(this[m]) == 'undefined') {
+ Roo.log('invalid cmd:' + el.type);
+ return;
+ }
+ this[m](el);
+ //Roo.log(el);
},
- // Raw entities
- baseEntities : {
- '"': '"',
- // Needs to be escaped since the YUI compressor would otherwise break the code
- '\'': ''',
- '<': '<',
- '>': '>',
- '&': '&',
- '`': '`'
+ flushHexStore : function()
+ {
+ if (this.hexStore.length < 1) {
+ return;
+ }
+ var hexstr = this.hexStore.map(
+ function(cmd) {
+ return cmd.value;
+ }).join('');
+
+ this.group.addContent( new Roo.rtf.Hex( hexstr ));
+
+
+ this.hexStore.splice(0)
+
},
- // Reverse lookup table for raw entities
- reverseEntities : {
- '<': '<',
- '>': '>',
- '&': '&',
- '"': '"',
- ''': '\''
+
+ cmdgroupstart : function()
+ {
+ this.flushHexStore();
+ if (this.group) {
+ this.groupStack.push(this.group);
+ }
+ // parent..
+ if (this.doc === false) {
+ this.group = this.doc = new Roo.rtf.Document();
+ return;
+
+ }
+ this.group = new Roo.rtf.Group(this.group);
+ },
+ cmdignorable : function()
+ {
+ this.flushHexStore();
+ this.group.ignorable = true;
+ },
+ cmdendparagraph : function()
+ {
+ this.flushHexStore();
+ this.group.addContent(new Roo.rtf.Paragraph());
+ },
+ cmdgroupend : function ()
+ {
+ this.flushHexStore();
+ var endingGroup = this.group;
+
+
+ this.group = this.groupStack.pop();
+ if (this.group) {
+ this.group.addChild(endingGroup);
+ }
+
+
+
+ var doc = this.group || this.doc;
+ //if (endingGroup instanceof FontTable) {
+ // doc.fonts = endingGroup.table
+ //} else if (endingGroup instanceof ColorTable) {
+ // doc.colors = endingGroup.table
+ //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
+ if (endingGroup.ignorable === false) {
+ //code
+ this.groups.push(endingGroup);
+ // Roo.log( endingGroup );
+ }
+ //Roo.each(endingGroup.content, function(item)) {
+ // doc.addContent(item);
+ //}
+ //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
+ //}
+ },
+ cmdtext : function (cmd)
+ {
+ this.flushHexStore();
+ if (!this.group) { // an RTF fragment, missing the {\rtf1 header
+ //this.group = this.doc
+ return; // we really don't care about stray text...
+ }
+ this.group.addContent(new Roo.rtf.Span(cmd));
+ },
+ cmdcontrolword : function (cmd)
+ {
+ this.flushHexStore();
+ if (!this.group.type) {
+ this.group.type = cmd.value;
+ return;
+ }
+ this.group.addContent(new Roo.rtf.Ctrl(cmd));
+ // we actually don't care about ctrl words...
+ return ;
+ /*
+ var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
+ if (this[method]) {
+ this[method](cmd.param)
+ } else {
+ if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
+ }
+ */
+ },
+ cmdhexchar : function(cmd) {
+ this.hexStore.push(cmd);
+ },
+ cmderror : function(cmd) {
+ throw cmd.value;
},
- attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
- textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
- rawCharsRegExp : /[<>&\"\']/g,
- entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
- namedEntities : false,
- namedEntitiesData : [
- '50',
- 'nbsp',
- '51',
- 'iexcl',
- '52',
- 'cent',
- '53',
- 'pound',
- '54',
- 'curren',
- '55',
- 'yen',
- '56',
- 'brvbar',
- '57',
- 'sect',
- '58',
- 'uml',
- '59',
- 'copy',
- '5a',
- 'ordf',
- '5b',
- 'laquo',
- '5c',
- 'not',
- '5d',
- 'shy',
- '5e',
- 'reg',
- '5f',
- 'macr',
- '5g',
- 'deg',
- '5h',
- 'plusmn',
- '5i',
- 'sup2',
- '5j',
- 'sup3',
- '5k',
- 'acute',
- '5l',
- 'micro',
- '5m',
- 'para',
- '5n',
- 'middot',
- '5o',
- 'cedil',
- '5p',
- 'sup1',
- '5q',
- 'ordm',
- '5r',
- 'raquo',
- '5s',
- 'frac14',
- '5t',
- 'frac12',
- '5u',
- 'frac34',
- '5v',
- 'iquest',
- '60',
- 'Agrave',
- '61',
- 'Aacute',
- '62',
- 'Acirc',
- '63',
- 'Atilde',
- '64',
- 'Auml',
- '65',
- 'Aring',
- '66',
- 'AElig',
- '67',
- 'Ccedil',
- '68',
- 'Egrave',
- '69',
- 'Eacute',
- '6a',
- 'Ecirc',
- '6b',
- 'Euml',
- '6c',
- 'Igrave',
- '6d',
- 'Iacute',
- '6e',
- 'Icirc',
- '6f',
- 'Iuml',
- '6g',
- 'ETH',
- '6h',
- 'Ntilde',
- '6i',
- 'Ograve',
- '6j',
- 'Oacute',
- '6k',
- 'Ocirc',
- '6l',
- 'Otilde',
- '6m',
- 'Ouml',
- '6n',
- 'times',
- '6o',
- 'Oslash',
- '6p',
- 'Ugrave',
- '6q',
- 'Uacute',
- '6r',
- 'Ucirc',
- '6s',
- 'Uuml',
- '6t',
- 'Yacute',
- '6u',
- 'THORN',
- '6v',
- 'szlig',
- '70',
- 'agrave',
- '71',
- 'aacute',
- '72',
- 'acirc',
- '73',
- 'atilde',
- '74',
- 'auml',
- '75',
- 'aring',
- '76',
- 'aelig',
- '77',
- 'ccedil',
- '78',
- 'egrave',
- '79',
- 'eacute',
- '7a',
- 'ecirc',
- '7b',
- 'euml',
- '7c',
- 'igrave',
- '7d',
- 'iacute',
- '7e',
- 'icirc',
- '7f',
- 'iuml',
- '7g',
- 'eth',
- '7h',
- 'ntilde',
- '7i',
- 'ograve',
- '7j',
- 'oacute',
- '7k',
- 'ocirc',
- '7l',
- 'otilde',
- '7m',
- 'ouml',
- '7n',
- 'divide',
- '7o',
- 'oslash',
- '7p',
- 'ugrave',
- '7q',
- 'uacute',
- '7r',
- 'ucirc',
- '7s',
- 'uuml',
- '7t',
- 'yacute',
- '7u',
- 'thorn',
- '7v',
- 'yuml',
- 'ci',
- 'fnof',
- 'sh',
- 'Alpha',
- 'si',
- 'Beta',
- 'sj',
- 'Gamma',
- 'sk',
- 'Delta',
- 'sl',
- 'Epsilon',
- 'sm',
- 'Zeta',
- 'sn',
- 'Eta',
- 'so',
- 'Theta',
- 'sp',
- 'Iota',
- 'sq',
- 'Kappa',
- 'sr',
- 'Lambda',
- 'ss',
- 'Mu',
- 'st',
- 'Nu',
- 'su',
- 'Xi',
- 'sv',
- 'Omicron',
- 't0',
- 'Pi',
- 't1',
- 'Rho',
- 't3',
- 'Sigma',
- 't4',
- 'Tau',
- 't5',
- 'Upsilon',
- 't6',
- 'Phi',
- 't7',
- 'Chi',
- 't8',
- 'Psi',
- 't9',
- 'Omega',
- 'th',
- 'alpha',
- 'ti',
- 'beta',
- 'tj',
- 'gamma',
- 'tk',
- 'delta',
- 'tl',
- 'epsilon',
- 'tm',
- 'zeta',
- 'tn',
- 'eta',
- 'to',
- 'theta',
- 'tp',
- 'iota',
- 'tq',
- 'kappa',
- 'tr',
- 'lambda',
- 'ts',
- 'mu',
- 'tt',
- 'nu',
- 'tu',
- 'xi',
- 'tv',
- 'omicron',
- 'u0',
- 'pi',
- 'u1',
- 'rho',
- 'u2',
- 'sigmaf',
- 'u3',
- 'sigma',
- 'u4',
- 'tau',
- 'u5',
- 'upsilon',
- 'u6',
- 'phi',
- 'u7',
- 'chi',
- 'u8',
- 'psi',
- 'u9',
- 'omega',
- 'uh',
- 'thetasym',
- 'ui',
- 'upsih',
- 'um',
- 'piv',
- '812',
- 'bull',
- '816',
- 'hellip',
- '81i',
- 'prime',
- '81j',
- 'Prime',
- '81u',
- 'oline',
- '824',
- 'frasl',
- '88o',
- 'weierp',
- '88h',
- 'image',
- '88s',
- 'real',
- '892',
- 'trade',
- '89l',
- 'alefsym',
- '8cg',
- 'larr',
- '8ch',
- 'uarr',
- '8ci',
- 'rarr',
- '8cj',
- 'darr',
- '8ck',
- 'harr',
- '8dl',
- 'crarr',
- '8eg',
- 'lArr',
- '8eh',
- 'uArr',
- '8ei',
- 'rArr',
- '8ej',
- 'dArr',
- '8ek',
- 'hArr',
- '8g0',
- 'forall',
- '8g2',
- 'part',
- '8g3',
- 'exist',
- '8g5',
- 'empty',
- '8g7',
- 'nabla',
- '8g8',
- 'isin',
- '8g9',
- 'notin',
- '8gb',
- 'ni',
- '8gf',
- 'prod',
- '8gh',
- 'sum',
- '8gi',
- 'minus',
- '8gn',
- 'lowast',
- '8gq',
- 'radic',
- '8gt',
- 'prop',
- '8gu',
- 'infin',
- '8h0',
- 'ang',
- '8h7',
- 'and',
- '8h8',
- 'or',
- '8h9',
- 'cap',
- '8ha',
- 'cup',
- '8hb',
- 'int',
- '8hk',
- 'there4',
- '8hs',
- 'sim',
- '8i5',
- 'cong',
- '8i8',
- 'asymp',
- '8j0',
- 'ne',
- '8j1',
- 'equiv',
- '8j4',
- 'le',
- '8j5',
- 'ge',
- '8k2',
- 'sub',
- '8k3',
- 'sup',
- '8k4',
- 'nsub',
- '8k6',
- 'sube',
- '8k7',
- 'supe',
- '8kl',
- 'oplus',
- '8kn',
- 'otimes',
- '8l5',
- 'perp',
- '8m5',
- 'sdot',
- '8o8',
- 'lceil',
- '8o9',
- 'rceil',
- '8oa',
- 'lfloor',
- '8ob',
- 'rfloor',
- '8p9',
- 'lang',
- '8pa',
- 'rang',
- '9ea',
- 'loz',
- '9j0',
- 'spades',
- '9j3',
- 'clubs',
- '9j5',
- 'hearts',
- '9j6',
- 'diams',
- 'ai',
- 'OElig',
- 'aj',
- 'oelig',
- 'b0',
- 'Scaron',
- 'b1',
- 'scaron',
- 'bo',
- 'Yuml',
- 'm6',
- 'circ',
- 'ms',
- 'tilde',
- '802',
- 'ensp',
- '803',
- 'emsp',
- '809',
- 'thinsp',
- '80c',
- 'zwnj',
- '80d',
- 'zwj',
- '80e',
- 'lrm',
- '80f',
- 'rlm',
- '80j',
- 'ndash',
- '80k',
- 'mdash',
- '80o',
- 'lsquo',
- '80p',
- 'rsquo',
- '80q',
- 'sbquo',
- '80s',
- 'ldquo',
- '80t',
- 'rdquo',
- '80u',
- 'bdquo',
- '810',
- 'dagger',
- '811',
- 'Dagger',
- '81g',
- 'permil',
- '81p',
- 'lsaquo',
- '81q',
- 'rsaquo',
- '85c',
- 'euro'
- ],
-
-
- /**
- * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
- *
- * @method encodeRaw
- * @param {String} text Text to encode.
- * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
- * @return {String} Entity encoded text.
- */
- encodeRaw: function(text, attr)
+ /*
+ _flush (done) {
+ if (this.text !== '\u0000') this.emitText()
+ done()
+ }
+ */
+
+
+ parseText : function(c)
{
- var t = this;
- return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
- return t.baseEntities[chr] || chr;
- });
- },
- /**
- * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
- * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
- * and is exposed as the DOMUtils.encode function.
- *
- * @method encodeAllRaw
- * @param {String} text Text to encode.
- * @return {String} Entity encoded text.
- */
- encodeAllRaw: function(text) {
- var t = this;
- return ('' + text).replace(this.rawCharsRegExp, function(chr) {
- return t.baseEntities[chr] || chr;
- });
+ if (c === '\\') {
+ this.parserState = this.parseEscapes;
+ } else if (c === '{') {
+ this.emitStartGroup();
+ } else if (c === '}') {
+ this.emitEndGroup();
+ } else if (c === '\x0A' || c === '\x0D') {
+ // cr/lf are noise chars
+ } else {
+ this.text += c;
+ }
},
- /**
- * Encodes the specified string using numeric entities. The core entities will be
- * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
- *
- * @method encodeNumeric
- * @param {String} text Text to encode.
- * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
- * @return {String} Entity encoded text.
- */
- encodeNumeric: function(text, attr) {
- var t = this;
- return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
- // Multi byte sequence convert it to a single entity
- if (chr.length > 1) {
- return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
- }
- return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
- });
+
+ parseEscapes: function (c)
+ {
+ if (c === '\\' || c === '{' || c === '}') {
+ this.text += c;
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlSymbol;
+ this.parseControlSymbol(c);
+ }
},
- /**
- * Encodes the specified string using named entities. The core entities will be encoded
- * as named ones but all non lower ascii characters will be encoded into named entities.
- *
- * @method encodeNamed
- * @param {String} text Text to encode.
- * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
- * @param {Object} entities Optional parameter with entities to use.
- * @return {String} Entity encoded text.
- */
- encodeNamed: function(text, attr, entities) {
- var t = this;
- entities = entities || this.namedEntities;
- return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
- return t.baseEntities[chr] || entities[chr] || chr;
- });
+ parseControlSymbol: function(c)
+ {
+ if (c === '~') {
+ this.text += '\u00a0'; // nbsp
+ this.parserState = this.parseText
+ } else if (c === '-') {
+ this.text += '\u00ad'; // soft hyphen
+ } else if (c === '_') {
+ this.text += '\u2011'; // non-breaking hyphen
+ } else if (c === '*') {
+ this.emitIgnorable();
+ this.parserState = this.parseText;
+ } else if (c === "'") {
+ this.parserState = this.parseHexChar;
+ } else if (c === '|') { // formula cacter
+ this.emitFormula();
+ this.parserState = this.parseText;
+ } else if (c === ':') { // subentry in an index entry
+ this.emitIndexSubEntry();
+ this.parserState = this.parseText;
+ } else if (c === '\x0a') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else if (c === '\x0d') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlWord;
+ this.parseControlWord(c);
+ }
},
- /**
- * Returns an encode function based on the name(s) and it's optional entities.
- *
- * @method getEncodeFunc
- * @param {String} name Comma separated list of encoders for example named,numeric.
- * @param {String} entities Optional parameter with entities to use instead of the built in set.
- * @return {function} Encode function to be used.
- */
- getEncodeFunc: function(name, entities) {
- entities = this.buildEntitiesLookup(entities) || this.namedEntities;
- var t = this;
- function encodeNamedAndNumeric(text, attr) {
- return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
- return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
- });
+ parseHexChar: function (c)
+ {
+ if (/^[A-Fa-f0-9]$/.test(c)) {
+ this.hexChar += c;
+ if (this.hexChar.length >= 2) {
+ this.emitHexChar();
+ this.parserState = this.parseText;
+ }
+ return;
}
-
- function encodeCustomNamed(text, attr) {
- return t.encodeNamed(text, attr, entities);
+ this.emitError("Invalid character \"" + c + "\" in hex literal.");
+ this.parserState = this.parseText;
+
+ },
+ parseControlWord : function(c)
+ {
+ if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else if (/^[-\d]$/.test(c)) {
+ this.parserState = this.parseControlWordParam;
+ this.controlWordParam += c;
+ } else if (/^[A-Za-z]$/.test(c)) {
+ this.controlWord += c;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
}
- // Replace + with , to be compatible with previous TinyMCE versions
- name = this.makeMap(name.replace(/\+/g, ','));
- // Named and numeric encoder
- if (name.named && name.numeric) {
- return this.encodeNamedAndNumeric;
+ },
+ parseControlWordParam : function (c) {
+ if (/^\d$/.test(c)) {
+ this.controlWordParam += c;
+ } else if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
}
- // Named encoder
- if (name.named) {
- // Custom names
- if (entities) {
- return encodeCustomNamed;
- }
- return this.encodeNamed;
+ },
+
+
+
+
+ emitText : function () {
+ if (this.text === '') {
+ return;
}
- // Numeric
- if (name.numeric) {
- return this.encodeNumeric;
+ this.push({
+ type: 'text',
+ value: this.text,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.text = ''
+ },
+ emitControlWord : function ()
+ {
+ this.emitText();
+ if (this.controlWord === '') {
+ // do we want to track this - it seems just to cause problems.
+ //this.emitError('empty control word');
+ } else {
+ this.push({
+ type: 'controlword',
+ value: this.controlWord,
+ param: this.controlWordParam !== '' && Number(this.controlWordParam),
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
}
- // Raw encoder
- return this.encodeRaw;
+ this.controlWord = '';
+ this.controlWordParam = '';
},
- /**
- * Decodes the specified string, this will replace entities with raw UTF characters.
- *
- * @method decode
- * @param {String} text Text to entity decode.
- * @return {String} Entity decoded string.
- */
- decode: function(text)
+ emitStartGroup : function ()
{
- var t = this;
- return text.replace(this.entityRegExp, function(all, numeric) {
- if (numeric) {
- numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
- // Support upper UTF
- if (numeric > 65535) {
- numeric -= 65536;
- return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
- }
- return t.asciiMap[numeric] || String.fromCharCode(numeric);
- }
- return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+ this.emitText();
+ this.push({
+ type: 'groupstart',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
});
},
- nativeDecode : function (text) {
- return text;
+ emitEndGroup : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'groupend',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
},
- makeMap : function (items, delim, map) {
- var i;
- items = items || [];
- delim = delim || ',';
- if (typeof items == "string") {
- items = items.split(delim);
- }
- map = map || {};
- i = items.length;
- while (i--) {
- map[items[i]] = {};
- }
- return map;
- }
-};
-
-
-
-Roo.htmleditor.TidyEntities.init();
+ emitIgnorable : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'ignorable',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitHexChar : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'hexchar',
+ value: this.hexChar,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.hexChar = ''
+ },
+ emitError : function (message)
+ {
+ this.emitText();
+ this.push({
+ type: 'error',
+ value: message,
+ row: this.row,
+ col: this.col,
+ char: this.cpos //,
+ //stack: new Error().stack
+ });
+ },
+ emitEndParagraph : function () {
+ this.emitText();
+ this.push({
+ type: 'endparagraph',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ }
+
+} ;
+Roo.htmleditor = {};
+
/**
- * @class Roo.htmleditor.KeyEnter
- * Handle Enter press..
- * @cfg {Roo.HtmlEditorCore} core the editor.
+ * @class Roo.htmleditor.Filter
+ * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
+ * @cfg {DomElement} node The node to iterate and filter
+ * @cfg {boolean|String|Array} tag Tags to replace
* @constructor
* Create a new Filter.
* @param {Object} config Configuration options
-
-
-Roo.htmleditor.KeyEnter = function(cfg) {
- Roo.apply(this, cfg);
+Roo.htmleditor.Filter = function(cfg) {
+ Roo.apply(this.cfg);
// this does not actually call walk as it's really just a abstract class
-
- Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
}
-//Roo.htmleditor.KeyEnter.i = 0;
-
-Roo.htmleditor.KeyEnter.prototype = {
+Roo.htmleditor.Filter.prototype = {
- core : false,
+ node: false,
- keypress : function(e)
- {
- if (e.charCode != 13 && e.charCode != 10) {
- Roo.log([e.charCode,e]);
- return true;
- }
- e.preventDefault();
- // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
- var doc = this.core.doc;
- //add a new line
-
+ tag: false,
+
+ // overrride to do replace comments.
+ replaceComment : false,
- var sel = this.core.getSelection();
- var range = sel.getRangeAt(0);
- var n = range.commonAncestorContainer;
- var pc = range.closest([ 'ol', 'ul']);
- var pli = range.closest('li');
- if (!pc || e.ctrlKey) {
- // on it list, or ctrl pressed.
- if (!e.ctrlKey) {
- sel.insertNode('br', 'after');
- } else {
- // only do this if we have ctrl key..
- var br = doc.createElement('br');
- br.className = 'clear';
- br.setAttribute('style', 'clear: both');
- sel.insertNode(br, 'after');
+ // overrride to do replace or do stuff with tags..
+ replaceTag : false,
+
+ walk : function(dom)
+ {
+ Roo.each( Array.from(dom.childNodes), function( e ) {
+ switch(true) {
+
+ case e.nodeType == 8 && this.replaceComment !== false: // comment
+ this.replaceComment(e);
+ return;
+
+ case e.nodeType != 1: //not a node.
+ return;
+
+ case this.tag === true: // everything
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
+ case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
+ case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
+ if (this.replaceTag && false === this.replaceTag(e)) {
+ return;
+ }
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
+ return;
+
+ default: // tags .. that do not match.
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
}
-
- this.core.undoManager.addEvent();
- this.core.fireEditorEvent(e);
- return false;
- }
+ }, this);
- // deal with <li> insetion
- if (pli.innerText.trim() == '' &&
- pli.previousSibling &&
- pli.previousSibling.nodeName == 'LI' &&
- pli.previousSibling.innerText.trim() == '') {
- pli.parentNode.removeChild(pli.previousSibling);
- sel.cursorAfter(pc);
- this.core.undoManager.addEvent();
- this.core.fireEditorEvent(e);
- return false;
- }
+ },
- var li = doc.createElement('LI');
- li.innerHTML = ' ';
- if (!pli || !pli.firstSibling) {
- pc.appendChild(li);
- } else {
- pli.parentNode.insertBefore(li, pli.firstSibling);
- }
- sel.cursorText (li.firstChild);
-
- this.core.undoManager.addEvent();
- this.core.fireEditorEvent(e);
-
- return false;
-
-
-
+ removeNodeKeepChildren : function( node)
+ {
+
+ ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+
+ }
+ node.parentNode.removeChild(node);
+ },
+
+ searchTag : function(dom)
+ {
+ if(this.tag === false) {
+ return;
+ }
+
+ var els = dom.getElementsByTagName(this.tag);
+
+ Roo.each(Array.from(els), function(e){
+ if(e.parentNode == null) {
+ return;
+ }
+ if(this.replaceTag) {
+ this.replaceTag(e);
+ }
+ }, this);
}
-};
-
+};
+
/**
- * @class Roo.htmleditor.Block
- * Base class for html editor blocks - do not use it directly .. extend it..
- * @cfg {DomElement} node The node to apply stuff to.
- * @cfg {String} friendly_name the name that appears in the context bar about this block
- * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
-
+ * @class Roo.htmleditor.FilterAttributes
+ * clean attributes and styles including http:// etc.. in attribute
* @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
+* Run a new Attribute Filter
+* @param {Object} config Configuration options
*/
-
-Roo.htmleditor.Block = function(cfg)
+Roo.htmleditor.FilterAttributes = function(cfg)
{
- // do nothing .. should not be called really.
+ Roo.apply(this, cfg);
+ this.attrib_black = this.attrib_black || [];
+ this.attrib_white = this.attrib_white || [];
+
+ this.attrib_clean = this.attrib_clean || [];
+ this.style_white = this.style_white || [];
+ this.style_black = this.style_black || [];
+ this.walk(cfg.node);
}
-/**
- * factory method to get the block from an element (using cache if necessary)
- * @static
- * @param {HtmlElement} the dom element
- */
-Roo.htmleditor.Block.factory = function(node)
-{
- var cc = Roo.htmleditor.Block.cache;
- var id = Roo.get(node).id;
- if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
- Roo.htmleditor.Block.cache[id].readElement(node);
- return Roo.htmleditor.Block.cache[id];
- }
- var db = node.getAttribute('data-block');
- if (!db) {
- db = node.nodeName.toLowerCase().toUpperCaseFirst();
- }
- var cls = Roo.htmleditor['Block' + db];
- if (typeof(cls) == 'undefined') {
- //Roo.log(node.getAttribute('data-block'));
- Roo.log("OOps missing block : " + 'Block' + db);
- return false;
- }
- Roo.htmleditor.Block.cache[id] = new cls({ node: node });
- return Roo.htmleditor.Block.cache[id]; /// should trigger update element
-};
-/**
- * initalize all Elements from content that are 'blockable'
- * @static
- * @param the body element
- */
-Roo.htmleditor.Block.initAll = function(body, type)
+Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
{
- if (typeof(type) == 'undefined') {
- var ia = Roo.htmleditor.Block.initAll;
- ia(body,'table');
- ia(body,'td');
- ia(body,'figure');
- return;
- }
- Roo.each(Roo.get(body).query(type), function(e) {
- Roo.htmleditor.Block.factory(e);
- },this);
-};
-// question goes here... do we need to clear out this cache sometimes?
-// or show we make it relivant to the htmleditor.
-Roo.htmleditor.Block.cache = {};
-
-Roo.htmleditor.Block.prototype = {
-
- node : false,
-
- // used by context menu
- friendly_name : 'Based Block',
-
- // text for button to delete this element
- deleteTitle : false,
+ tag: true, // all tags
- context : false,
- /**
- * Update a node with values from this object
- * @param {DomElement} node
- */
- updateElement : function(node)
- {
- Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
- },
- /**
- * convert to plain HTML for calling insertAtCursor..
- */
- toHTML : function()
- {
- return Roo.DomHelper.markup(this.toObject());
- },
- /**
- * used by readEleemnt to extract data from a node
- * may need improving as it's pretty basic
+ attrib_black : false, // array
+ attrib_clean : false,
+ attrib_white : false,
+
+ style_white : false,
+ style_black : false,
- * @param {DomElement} node
- * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
- * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
- * @param {String} style the style property - eg. text-align
- */
- getVal : function(node, tag, attr, style)
+
+ replaceTag : function(node)
{
- var n = node;
- if (tag !== true && n.tagName != tag.toUpperCase()) {
- // in theory we could do figure[3] << 3rd figure? or some more complex search..?
- // but kiss for now.
- n = node.getElementsByTagName(tag).item(0);
+ if (!node.attributes || !node.attributes.length) {
+ return true;
}
- if (!n) {
- return '';
+
+ for (var i = node.attributes.length-1; i > -1 ; i--) {
+ var a = node.attributes[i];
+ //console.log(a);
+ if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
+ node.removeAttribute(a.name);
+ continue;
+ }
+
+
+
+ if (a.name.toLowerCase().substr(0,2)=='on') {
+ node.removeAttribute(a.name);
+ continue;
+ }
+
+
+ if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
+ node.removeAttribute(a.name);
+ continue;
+ }
+ if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
+ this.cleanAttr(node,a.name,a.value); // fixme..
+ continue;
+ }
+ if (a.name == 'style') {
+ this.cleanStyle(node,a.name,a.value);
+ continue;
+ }
+ /// clean up MS crap..
+ // tecnically this should be a list of valid class'es..
+
+
+ if (a.name == 'class') {
+ if (a.value.match(/^Mso/)) {
+ node.removeAttribute('class');
+ }
+
+ if (a.value.match(/^body$/)) {
+ node.removeAttribute('class');
+ }
+ continue;
+ }
+
+
+ // style cleanup!?
+ // class cleanup?
+
}
- if (attr === false) {
- return n;
+ return true; // clean children
+ },
+
+ cleanAttr: function(node, n,v)
+ {
+
+ if (v.match(/^\./) || v.match(/^\//)) {
+ return;
}
- if (attr == 'html') {
- return n.innerHTML;
+ if (v.match(/^(http|https):\/\//)
+ || v.match(/^mailto:/)
+ || v.match(/^ftp:/)
+ || v.match(/^data:/)
+ ) {
+ return;
}
- if (attr == 'style') {
- return n.style[style];
+ if (v.match(/^#/)) {
+ return;
+ }
+ if (v.match(/^\{/)) { // allow template editing.
+ return;
}
+// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
+ node.removeAttribute(n);
- return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
-
- },
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * (override this)
- */
- toObject : function()
- {
- return {};
},
- /**
- * Read a node that has a 'data-block' property - and extract the values from it.
- * @param {DomElement} node - the node
- */
- readElement : function(node)
+ cleanStyle : function(node, n,v)
{
+ if (v.match(/expression/)) { //XSS?? should we even bother..
+ node.removeAttribute(n);
+ return;
+ }
+
+ var parts = v.split(/;/);
+ var clean = [];
+
+ Roo.each(parts, function(p) {
+ p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (!p.length) {
+ return true;
+ }
+ var l = p.split(':').shift().replace(/\s+/g,'');
+ l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
+
+ if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
+ return true;
+ }
+ //Roo.log()
+ // only allow 'c whitelisted system attributes'
+ if ( this.style_white.length && style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
+ return true;
+ }
+
+
+ clean.push(p);
+ return true;
+ },this);
+ if (clean.length) {
+ node.setAttribute(n, clean.join(';'));
+ } else {
+ node.removeAttribute(n);
+ }
+
+ }
+
+
- }
-
-};
+});/**
+ * @class Roo.htmleditor.FilterBlack
+ * remove blacklisted elements.
+ * @constructor
+ * Run a new Blacklisted Filter
+ * @param {Object} config Configuration options
+ */
-
+Roo.htmleditor.FilterBlack = function(cfg)
+{
+ Roo.apply(this, cfg);
+ this.walk(cfg.node);
+}
+Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
+{
+ tag : true, // all elements.
+
+ replaceTag : function(n)
+ {
+ n.parentNode.removeChild(n);
+ }
+});
/**
- * @class Roo.htmleditor.BlockFigure
- * Block that has an image and a figcaption
- * @cfg {String} image_src the url for the image
- * @cfg {String} align (left|right) alignment for the block default left
- * @cfg {String} caption the text to appear below (and in the alt tag)
- * @cfg {String} caption_display (block|none) display or not the caption
- * @cfg {String|number} image_width the width of the image number or %?
- * @cfg {String|number} image_height the height of the image number or %?
- *
+ * @class Roo.htmleditor.FilterComment
+ * remove comments.
* @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
+* Run a new Comments Filter
+* @param {Object} config Configuration options
*/
+Roo.htmleditor.FilterComment = function(cfg)
+{
+ this.walk(cfg.node);
+}
-Roo.htmleditor.BlockFigure = function(cfg)
+Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
{
- if (cfg.node) {
- this.readElement(cfg.node);
- this.updateElement(cfg.node);
+
+ replaceComment : function(n)
+ {
+ n.parentNode.removeChild(n);
}
+});/**
+ * @class Roo.htmleditor.FilterKeepChildren
+ * remove tags but keep children
+ * @constructor
+ * Run a new Keep Children Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterKeepChildren = function(cfg)
+{
Roo.apply(this, cfg);
+ if (this.tag === false) {
+ return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
+ }
+ // hacky?
+ if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
+ this.cleanNamespace = true;
+ }
+
+ this.walk(cfg.node);
}
-Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
-
-
- // setable values.
- image_src: '',
- align: 'center',
- caption : '',
- caption_display : 'block',
- width : '100%',
- cls : '',
- href: '',
- video_url : '',
-
- // margin: '2%', not used
-
- text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
-
- // used by context menu
- friendly_name : 'Image with caption',
- deleteTitle : "Delete Image and Caption",
-
- contextMenu : function(toolbar)
+Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
+{
+ cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
+
+ replaceTag : function(node)
{
+ // walk children...
+ //Roo.log(node.tagName);
+ var ar = Array.from(node.childNodes);
+ //remove first..
- var block = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
- };
-
-
- var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
-
- var syncValue = toolbar.editorcore.syncValue;
-
- var fields = {};
-
- return [
- {
- xtype : 'TextItem',
- text : "Source: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'Button',
- text: 'Change Image URL',
-
- listeners : {
- click: function (btn, state)
- {
- var b = block();
-
- Roo.MessageBox.show({
- title : "Image Source URL",
- msg : "Enter the url for the image",
- buttons: Roo.MessageBox.OKCANCEL,
- fn: function(btn, val){
- if (btn != 'ok') {
- return;
- }
- b.image_src = val;
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- },
- minWidth:250,
- prompt:true,
- //multiline: multiline,
- modal : true,
- value : b.image_src
- });
- }
- },
- xns : rooui.Toolbar
- },
-
- {
- xtype : 'Button',
- text: 'Change Link URL',
-
- listeners : {
- click: function (btn, state)
- {
- var b = block();
-
- Roo.MessageBox.show({
- title : "Link URL",
- msg : "Enter the url for the link - leave blank to have no link",
- buttons: Roo.MessageBox.OKCANCEL,
- fn: function(btn, val){
- if (btn != 'ok') {
- return;
- }
- b.href = val;
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- },
- minWidth:250,
- prompt:true,
- //multiline: multiline,
- modal : true,
- value : b.href
- });
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: 'Show Video URL',
-
- listeners : {
- click: function (btn, state)
- {
- Roo.MessageBox.alert("Video URL",
- block().video_url == '' ? 'This image is not linked ot a video' :
- 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
- }
- },
- xns : rooui.Toolbar
- },
-
-
- {
- xtype : 'TextItem',
- text : "Width: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 70,
- name : 'width',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = block();
- b.width = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['100%'],
- ['80%'],
- ['50%'],
- ['20%'],
- ['10%']
- ],
- fields : [ 'val'],
- xns : Roo.data
- }
- },
- {
- xtype : 'TextItem',
- text : "Align: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 70,
- name : 'align',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = block();
- b.align = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['left'],
- ['right'],
- ['center']
- ],
- fields : [ 'val'],
- xns : Roo.data
+ for (var i = 0; i < ar.length; i++) {
+ var e = ar[i];
+ if (e.nodeType == 1) {
+ if (
+ (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
+ || // array and it matches
+ (typeof(this.tag) == 'string' && this.tag == e.tagName)
+ ||
+ (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
+ ||
+ (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
+ ) {
+ this.replaceTag(ar[i]); // child is blacklisted as well...
+ continue;
}
- },
-
-
- {
- xtype : 'Button',
- text: 'Hide Caption',
- name : 'caption_display',
- pressed : false,
- enableToggle : true,
- setValue : function(v) {
- // this trigger toggle.
-
- this.setText(v ? "Hide Caption" : "Show Caption");
- this.setPressed(v != 'block');
- },
- listeners : {
- toggle: function (btn, state)
- {
- var b = block();
- b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
- this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
- b.updateElement();
- syncValue();
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
}
- ];
-
- },
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- */
- toObject : function()
- {
- var d = document.createElement('div');
- d.innerHTML = this.caption;
-
- var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0;
-
- var iw = this.align == 'center' ? this.width : '100%';
- var img = {
- tag : 'img',
- contenteditable : 'false',
- src : this.image_src,
- alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
- style: {
- width : iw,
- maxWidth : iw + ' !important', // this is not getting rendered?
- margin : m
+ }
+ ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+ if (this.tag !== false) {
+ this.walk(ar[i]);
}
- };
- /*
- '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
- '<a href="{2}">' +
- '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
- '</a>' +
- '</div>',
- */
-
- if (this.href.length > 0) {
- img = {
- tag : 'a',
- href: this.href,
- contenteditable : 'true',
- cn : [
- img
- ]
- };
}
+ //Roo.log("REMOVE:" + node.tagName);
+ node.parentNode.removeChild(node);
+ return false; // don't walk children
- if (this.video_url.length > 0) {
- img = {
- tag : 'div',
- cls : this.cls,
- frameborder : 0,
- allowfullscreen : true,
- width : 420, // these are for video tricks - that we replace the outer
- height : 315,
- src : this.video_url,
- cn : [
- img
- ]
- };
- }
-
+ }
+});/**
+ * @class Roo.htmleditor.FilterParagraph
+ * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
+ * like on 'push' to remove the <p> tags and replace them with line breaks.
+ * @constructor
+ * Run a new Paragraph Filter
+ * @param {Object} config Configuration options
+ */
-
- var ret = {
- tag: 'figure',
- 'data-block' : 'Figure',
- 'data-width' : this.width,
- 'data-caption' : this.caption,
- 'data-caption-display' : this.caption_display,
- contenteditable : 'false',
-
- style : {
- display: 'block',
- float : this.align ,
- maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'),
- width : this.align == 'center' ? '100%' : this.width,
- margin: '0px',
- padding: this.align == 'center' ? '0' : '0 10px' ,
- textAlign : this.align // seems to work for email..
-
- },
-
- align : this.align,
- cn : [
- img
- ]
- };
+Roo.htmleditor.FilterParagraph = function(cfg)
+{
+ // no need to apply config.
+ this.searchTag(cfg.node);
+}
- // show figcaption only if caption_display is 'block'
- if(this.caption_display == 'block') {
- ret['cn'].push({
- tag: 'figcaption',
- style : {
- textAlign : 'left',
- fontSize : '16px',
- lineHeight : '24px',
- display : this.caption_display,
- maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important',
- margin: m,
- width: this.align == 'center' ? this.width : '100%'
-
-
- },
- cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
- cn : [
- {
- tag: 'div',
- style : {
- marginTop : '16px',
- textAlign : 'start'
- },
- align: 'left',
- cn : [
- {
- // we can not rely on yahoo syndication to use CSS elements - so have to use '<i>' to encase stuff.
- tag : 'i',
- contenteditable : Roo.htmleditor.BlockFigure.caption_edit,
- html : this.caption.length ? this.caption : "Caption" // fake caption
- }
-
- ]
- }
-
- ]
-
- });
- }
- return ret;
-
- },
+Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
+{
- readElement : function(node)
+
+ tag : 'P',
+
+
+ replaceTag : function(node)
{
- // this should not really come from the link...
- this.video_url = this.getVal(node, 'div', 'src');
- this.cls = this.getVal(node, 'div', 'class');
- this.href = this.getVal(node, 'a', 'href');
-
- this.image_src = this.getVal(node, 'img', 'src');
-
- this.align = this.getVal(node, 'figure', 'align');
-
- // caption display is stored in figure
- this.caption_display = this.getVal(node, true, 'data-caption-display');
-
- // backward compatible
- // it was stored in figcaption
- if(this.caption_display == '') {
- this.caption_display = this.getVal(node, 'figcaption', 'data-display');
- }
-
- // read caption from figcaption
- var figcaption = this.getVal(node, 'figcaption', false);
-
- if (figcaption !== '') {
- this.caption = this.getVal(figcaption, 'i', 'html');
+ if (node.childNodes.length == 1 &&
+ node.childNodes[0].nodeType == 3 &&
+ node.childNodes[0].textContent.trim().length < 1
+ ) {
+ // remove and replace with '<BR>';
+ node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
+ return false; // no need to walk..
}
-
-
- // read caption from data-caption in figure if no caption from figcaption
- var dc = this.getVal(node, true, 'data-caption');
- if(this.caption_display == 'none' && dc && dc.length){
- this.caption = dc;
+ var ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
}
-
- //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
- this.width = this.getVal(node, true, 'data-width');
- //this.margin = this.getVal(node, 'figure', 'style', 'margin');
+ // now what about this?
+ // <p> </p>
- },
- removeNode : function()
- {
- return this.node;
+ // double BR.
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.removeChild(node);
+
+ return false;
+
}
-
-
-
-
-
-
-
-});
-
-Roo.apply(Roo.htmleditor.BlockFigure, {
- caption_edit : true
-});
+});/**
+ * @class Roo.htmleditor.FilterHashLink
+ * remove hash link
+ * @constructor
+ * Run a new Hash Link Filter
+ * @param {Object} config Configuration options
+ */
+ Roo.htmleditor.FilterHashLink = function(cfg)
+ {
+ // no need to apply config.
+ // this.walk(cfg.node);
+ this.searchTag(cfg.node);
+ }
+ Roo.extend(Roo.htmleditor.FilterHashLink, Roo.htmleditor.Filter,
+ {
+
+ tag : 'A',
+
+
+ replaceTag : function(node)
+ {
+ for(var i = 0; i < node.attributes.length; i ++) {
+ var a = node.attributes[i];
-/**
- * @class Roo.htmleditor.BlockTable
- * Block that manages a table
- *
+ if(a.name.toLowerCase() == 'href' && a.value.startsWith('#')) {
+ this.removeNodeKeepChildren(node);
+ }
+ }
+
+ return false;
+
+ }
+
+ });/**
+ * @class Roo.htmleditor.FilterSpan
+ * filter span's with no attributes out..
* @constructor
- * Create a new Filter.
+ * Run a new Span Filter
* @param {Object} config Configuration options
*/
-Roo.htmleditor.BlockTable = function(cfg)
+Roo.htmleditor.FilterSpan = function(cfg)
{
- if (cfg.node) {
- this.readElement(cfg.node);
- this.updateElement(cfg.node);
- }
- Roo.apply(this, cfg);
- if (!cfg.node) {
- this.rows = [];
- for(var r = 0; r < this.no_row; r++) {
- this.rows[r] = [];
- for(var c = 0; c < this.no_col; c++) {
- this.rows[r][c] = this.emptyCell();
- }
+ // no need to apply config.
+ this.searchTag(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
+{
+
+ tag : 'SPAN',
+
+
+ replaceTag : function(node)
+ {
+ if (node.attributes && node.attributes.length > 0) {
+ return true; // walk if there are any.
}
+ Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
+ return false;
+
}
-
+});/**
+ * @class Roo.htmleditor.FilterTableWidth
+ try and remove table width data - as that frequently messes up other stuff.
+ *
+ * was cleanTableWidths.
+ *
+ * Quite often pasting from word etc.. results in tables with column and widths.
+ * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
+ *
+ * @constructor
+ * Run a new Table Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterTableWidth = function(cfg)
+{
+ // no need to apply config.
+ this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
+ this.walk(cfg.node);
}
-Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
-
- rows : false,
- no_col : 1,
- no_row : 1,
-
-
- width: '100%',
-
- // used by context menu
- friendly_name : 'Table',
- deleteTitle : 'Delete Table',
- // context menu is drawn once..
+
+Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+{
+
+
- contextMenu : function(toolbar)
- {
-
- var block = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
- };
-
-
- var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+ replaceTag: function(node) {
- var syncValue = toolbar.editorcore.syncValue;
- var fields = {};
+
+ if (node.hasAttribute('width')) {
+ node.removeAttribute('width');
+ }
- return [
- {
- xtype : 'TextItem',
- text : "Width: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 100,
- name : 'width',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = block();
- b.width = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['100%'],
- ['auto']
- ],
- fields : [ 'val'],
- xns : Roo.data
- }
- },
- // -------- Cols
-
- {
- xtype : 'TextItem',
- text : "Columns: ",
- xns : rooui.Toolbar //Boostrap?
- },
-
- {
- xtype : 'Button',
- text: '-',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- block().removeColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: '+',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- block().addColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- // -------- ROWS
- {
- xtype : 'TextItem',
- text : "Rows: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'Button',
- text: '-',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- block().removeRow();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: '+',
- listeners : {
- click : function (_self, e)
- {
- block().addRow();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- // -------- ROWS
- {
- xtype : 'Button',
- text: 'Reset Column Widths',
- listeners : {
-
- click : function (_self, e)
- {
- block().resetWidths();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- }
-
-
+ if (node.hasAttribute("style")) {
+ // pretty basic...
- ];
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
+ return;
+ }
+ var kv = s.split(":");
+ if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
+ return;
+ }
+ // what ever is left... we allow.
+ nstyle.push(s);
+ });
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
+ }
+ }
- },
+ return true; // continue doing children..
+ }
+});/**
+ * @class Roo.htmleditor.FilterWord
+ * try and clean up all the mess that Word generates.
+ *
+ * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters
+
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterWord = function(cfg)
+{
+ // no need to apply config.
+ this.replaceDocBullets(cfg.node);
+ this.replaceAname(cfg.node);
+ // this is disabled as the removal is done by other filters;
+ // this.walk(cfg.node);
+ this.replaceImageTable(cfg.node);
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * ?? should it be called with option to hide all editing features?
+}
+
+Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
+{
+ tag: true,
+
+
+ /**
+ * Clean up MS wordisms...
*/
- toObject : function()
+ replaceTag : function(node)
{
+
+ // no idea what this does - span with text, replaceds with just text.
+ if(
+ node.nodeName == 'SPAN' &&
+ !node.hasAttributes() &&
+ node.childNodes.length == 1 &&
+ node.firstChild.nodeName == "#text"
+ ) {
+ var textNode = node.firstChild;
+ node.removeChild(textNode);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
+ }
+ node.parentNode.insertBefore(textNode, node);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
+ }
+
+ node.parentNode.removeChild(node);
+ return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
+ }
- var ret = {
- tag : 'table',
- contenteditable : 'false', // this stops cell selection from picking the table.
- 'data-block' : 'Table',
- style : {
- width: this.width,
- border : 'solid 1px #000', // ??? hard coded?
- 'border-collapse' : 'collapse'
- },
- cn : [
- { tag : 'tbody' , cn : [] }
- ]
- };
+
- // do we have a head = not really
- var ncols = 0;
- Roo.each(this.rows, function( row ) {
- var tr = {
- tag: 'tr',
- style : {
- margin: '6px',
- border : 'solid 1px #000',
- textAlign : 'left'
- },
- cn : [ ]
- };
-
- ret.cn[0].cn.push(tr);
- // does the row have any properties? ?? height?
- var nc = 0;
- Roo.each(row, function( cell ) {
-
- var td = {
- tag : 'td',
- contenteditable : 'true',
- 'data-block' : 'Td',
- html : cell.html,
- style : cell.style
- };
- if (cell.colspan > 1) {
- td.colspan = cell.colspan ;
- nc += cell.colspan;
- } else {
- nc++;
- }
- if (cell.rowspan > 1) {
- td.rowspan = cell.rowspan ;
+ if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
+ node.parentNode.removeChild(node);
+ return false; // dont do chidlren
+ }
+ //Roo.log(node.tagName);
+ // remove - but keep children..
+ if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
+ //Roo.log('-- removed');
+ while (node.childNodes.length) {
+ var cn = node.childNodes[0];
+ node.removeChild(cn);
+ node.parentNode.insertBefore(cn, node);
+ // move node to parent - and clean it..
+ if (cn.nodeType == 1) {
+ this.replaceTag(cn);
}
-
- // widths ?
- tr.cn.push(td);
-
-
- }, this);
- ncols = Math.max(nc, ncols);
-
+ }
+ node.parentNode.removeChild(node);
+ /// no need to iterate chidlren = it's got none..
+ //this.iterateChildren(node, this.cleanWord);
+ return false; // no need to iterate children.
+ }
+ // clean styles
+ if (node.className.length) {
- }, this);
- // add the header row..
-
- ncols++;
-
+ var cn = node.className.split(/\W+/);
+ var cna = [];
+ Roo.each(cn, function(cls) {
+ if (cls.match(/Mso[a-zA-Z]+/)) {
+ return;
+ }
+ cna.push(cls);
+ });
+ node.className = cna.length ? cna.join(' ') : '';
+ if (!cna.length) {
+ node.removeAttribute("class");
+ }
+ }
- return ret;
-
- },
-
- readElement : function(node)
- {
- node = node ? node : this.node ;
- this.width = this.getVal(node, true, 'style', 'width') || '100%';
+ if (node.hasAttribute("lang")) {
+ node.removeAttribute("lang");
+ }
- this.rows = [];
- this.no_row = 0;
- var trs = Array.from(node.rows);
- trs.forEach(function(tr) {
- var row = [];
- this.rows.push(row);
-
- this.no_row++;
- var no_column = 0;
- Array.from(tr.cells).forEach(function(td) {
-
- var add = {
- colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
- rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
- style : td.hasAttribute('style') ? td.getAttribute('style') : '',
- html : td.innerHTML
- };
- no_column += add.colspan;
-
-
- row.push(add);
-
-
- },this);
- this.no_col = Math.max(this.no_col, no_column);
-
+ if (node.hasAttribute("style")) {
- },this);
-
-
- },
- normalizeRows: function()
- {
- var ret= [];
- var rid = -1;
- this.rows.forEach(function(row) {
- rid++;
- ret[rid] = [];
- row = this.normalizeRow(row);
- var cid = 0;
- row.forEach(function(c) {
- while (typeof(ret[rid][cid]) != 'undefined') {
- cid++;
- }
- if (typeof(ret[rid]) == 'undefined') {
- ret[rid] = [];
- }
- ret[rid][cid] = c;
- c.row = rid;
- c.col = cid;
- if (c.rowspan < 2) {
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
return;
}
-
- for(var i = 1 ;i < c.rowspan; i++) {
- if (typeof(ret[rid+i]) == 'undefined') {
- ret[rid+i] = [];
- }
- ret[rid+i][cid] = c;
+ var kv = s.split(":");
+ if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
+ return;
}
+ // what ever is left... we allow.
+ nstyle.push(s);
});
- }, this);
- return ret;
-
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
+ }
+ }
+ return true; // do children
+
+
+
},
- normalizeRow: function(row)
+ styleToObject: function(node)
{
- var ret= [];
- row.forEach(function(c) {
- if (c.colspan < 2) {
- ret.push(c);
+ var styles = (node.getAttribute("style") || '').split(";");
+ var ret = {};
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
return;
}
- for(var i =0 ;i < c.colspan; i++) {
- ret.push(c);
- }
+ var kv = s.split(":");
+
+ // what ever is left... we allow.
+ ret[kv[0].trim()] = kv[1];
});
return ret;
-
},
- deleteColumn : function(sel)
+
+ replaceAname : function (doc)
{
- if (!sel || sel.type != 'col') {
- return;
- }
- if (this.no_col < 2) {
- return;
- }
-
- this.rows.forEach(function(row) {
- var cols = this.normalizeRow(row);
- var col = cols[sel.col];
- if (col.colspan > 1) {
- col.colspan --;
- } else {
- row.remove(col);
+ // replace all the a/name without..
+ var aa = Array.from(doc.getElementsByTagName('a'));
+ for (var i = 0; i < aa.length; i++) {
+ var a = aa[i];
+ if (a.hasAttribute("name")) {
+ a.removeAttribute("name");
}
+ if (a.hasAttribute("href")) {
+ continue;
+ }
+ // reparent children.
+ this.removeNodeKeepChildren(a);
- }, this);
- this.no_col--;
+ }
+
- },
- removeColumn : function()
- {
- this.deleteColumn({
- type: 'col',
- col : this.no_col-1
- });
- this.updateElement();
- },
-
-
- addColumn : function()
- {
- this.rows.forEach(function(row) {
- row.push(this.emptyCell());
-
- }, this);
- this.updateElement();
},
+
- deleteRow : function(sel)
+
+ replaceDocBullets : function(doc)
{
- if (!sel || sel.type != 'row') {
- return;
+ // this is a bit odd - but it appears some indents use ql-indent-1
+ //Roo.log(doc.innerHTML);
+
+ var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
- if (this.no_row < 2) {
- return;
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
+ }
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
+ }
+ listpara = Array.from(doc.getElementsByClassName('ql-indent-1'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
- var rows = this.normalizeRows();
-
-
- rows[sel.row].forEach(function(col) {
- if (col.rowspan > 1) {
- col.rowspan--;
- } else {
- col.remove = 1; // flage it as removed.
+ // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
+ var htwo = Array.from(doc.getElementsByTagName('h2'));
+ for( var i = 0; i < htwo.length; i ++) {
+ if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
+ htwo[i].className = "MsoListParagraph";
}
-
- }, this);
- var newrows = [];
- this.rows.forEach(function(row) {
- newrow = [];
- row.forEach(function(c) {
- if (typeof(c.remove) == 'undefined') {
- newrow.push(c);
- }
-
- });
- if (newrow.length > 0) {
- newrows.push(row);
+ }
+ listpara = Array.from(doc.getElementsByClassName('MsoNormal'));
+ for( var i = 0; i < listpara.length; i ++) {
+ if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
+ listpara[i].className = "MsoListParagraph";
+ } else {
+ listpara[i].className = "MsoNormalx";
}
- });
- this.rows = newrows;
-
-
+ }
+
+ listpara = doc.getElementsByClassName('MsoListParagraph');
+ // Roo.log(doc.innerHTML);
- this.no_row--;
- this.updateElement();
- },
- removeRow : function()
- {
- this.deleteRow({
- type: 'row',
- row : this.no_row-1
- });
+ while(listpara.length) {
+
+ this.replaceDocBullet(listpara.item(0));
+ }
+
},
- addRow : function()
+
+ replaceDocBullet : function(p)
{
+ // gather all the siblings.
+ var ns = p,
+ parent = p.parentNode,
+ doc = parent.ownerDocument,
+ items = [];
+
+ //Roo.log("Parsing: " + p.innerText) ;
+ var listtype = 'ul';
+ while (ns) {
+ if (ns.nodeType != 1) {
+ ns = ns.nextSibling;
+ continue;
+ }
+ if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
+ //Roo.log("Missing para r q1indent - got:" + ns.className);
+ break;
+ }
+ var spans = ns.getElementsByTagName('span');
+
+ if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
+ items.push(ns);
+ ns = ns.nextSibling;
+ has_list = true;
+ if (!spans.length) {
+ continue;
+ }
+ var ff = '';
+ var se = spans[0];
+ for (var i = 0; i < spans.length;i++) {
+ se = spans[i];
+ if (se.hasAttribute('style') && se.hasAttribute('style') && se.style.fontFamily != '') {
+ ff = se.style.fontFamily;
+ break;
+ }
+ }
+
+
+ //Roo.log("got font family: " + ff);
+ if (typeof(ff) != 'undefined' && !ff.match(/(Symbol|Wingdings)/) && "·o".indexOf(se.innerText.trim()) < 0) {
+ listtype = 'ol';
+ }
+
+ continue;
+ }
+ //Roo.log("no mso-list?");
+
+ var spans = ns.getElementsByTagName('span');
+ if (!spans.length) {
+ break;
+ }
+ var has_list = false;
+ for(var i = 0; i < spans.length; i++) {
+ if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
+ has_list = true;
+ break;
+ }
+ }
+ if (!has_list) {
+ break;
+ }
+ items.push(ns);
+ ns = ns.nextSibling;
+
+
+ }
+ if (!items.length) {
+ ns.className = "";
+ return;
+ }
- var row = [];
- for (var i = 0; i < this.no_col; i++ ) {
+ var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
+ parent.insertBefore(ul, p);
+ var lvl = 0;
+ var stack = [ ul ];
+ var last_li = false;
+
+ var margin_to_depth = {};
+ max_margins = -1;
+
+ items.forEach(function(n, ipos) {
+ //Roo.log("got innertHMLT=" + n.innerHTML);
- row.push(this.emptyCell());
+ var spans = n.getElementsByTagName('span');
+ if (!spans.length) {
+ //Roo.log("No spans found");
+
+ parent.removeChild(n);
+
+
+ return; // skip it...
+ }
- }
- this.rows.push(row);
- this.updateElement();
+
+ var num = 1;
+ var style = {};
+ for(var i = 0; i < spans.length; i++) {
+
+ style = this.styleToObject(spans[i]);
+ if (typeof(style['mso-list']) == 'undefined') {
+ continue;
+ }
+ if (listtype == 'ol') {
+ num = spans[i].innerText.replace(/[^0-9]+]/g,'') * 1;
+ }
+ spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
+ break;
+ }
+ //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
+ style = this.styleToObject(n); // mo-list is from the parent node.
+ if (typeof(style['mso-list']) == 'undefined') {
+ //Roo.log("parent is missing level");
+
+ parent.removeChild(n);
+
+ return;
+ }
+
+ var margin = style['margin-left'];
+ if (typeof(margin_to_depth[margin]) == 'undefined') {
+ max_margins++;
+ margin_to_depth[margin] = max_margins;
+ }
+ nlvl = margin_to_depth[margin] ;
+
+ if (nlvl > lvl) {
+ //new indent
+ var nul = doc.createElement(listtype); // what about number lists...
+ if (!last_li) {
+ last_li = doc.createElement('li');
+ stack[lvl].appendChild(last_li);
+ }
+ last_li.appendChild(nul);
+ stack[nlvl] = nul;
+
+ }
+ lvl = nlvl;
+
+ // not starting at 1..
+ if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
+ stack[nlvl].setAttribute("start", num);
+ }
+
+ var nli = stack[nlvl].appendChild(doc.createElement('li'));
+ last_li = nli;
+ nli.innerHTML = n.innerHTML;
+ //Roo.log("innerHTML = " + n.innerHTML);
+ parent.removeChild(n);
+
+
+
+
+ },this);
+
+
- },
-
- // the default cell object... at present...
- emptyCell : function() {
- return (new Roo.htmleditor.BlockTd({})).toObject();
-
- },
-
- removeNode : function()
- {
- return this.node;
},
-
-
- resetWidths : function()
+ replaceImageTable : function(doc)
{
- Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
- var nn = Roo.htmleditor.Block.factory(n);
- nn.width = '';
- nn.updateElement(n);
+ /*
+ <table cellpadding=0 cellspacing=0 align=left>
+ <tr>
+ <td width=423 height=0></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><img width=601 height=401
+ src="file:///C:/Users/Alan/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg"
+ v:shapes="Picture_x0020_2"></td>
+ </tr>
+ </table>
+ */
+ var imgs = Array.from(doc.getElementsByTagName('img'));
+ Roo.each(imgs, function(img) {
+ var td = img.parentNode;
+ if (td.nodeName != 'TD') {
+ return;
+ }
+ var tr = td.parentNode;
+ if (tr.nodeName != 'TR') {
+ return;
+ }
+ var tbody = tr.parentNode;
+ if (tbody.nodeName != 'TBODY') {
+ return;
+ }
+ var table = tbody.parentNode;
+ if (table.nodeName != 'TABLE') {
+ return;
+ }
+ // first row..
+
+ if (table.getElementsByTagName('tr').length != 2) {
+ return;
+ }
+ if (table.getElementsByTagName('td').length != 3) {
+ return;
+ }
+ if (table.innerText.trim() != '') {
+ return;
+ }
+ var p = table.parentNode;
+ img.parentNode.removeChild(img);
+ p.insertBefore(img, table);
+ p.removeChild(table);
+
+
+
});
+
+
}
-
-
-
-})
-
-/**
- *
- * editing a TD?
- *
- * since selections really work on the table cell, then editing really should work from there
- *
- * The original plan was to support merging etc... - but that may not be needed yet..
- *
- * So this simple version will support:
- * add/remove cols
- * adjust the width +/-
- * reset the width...
- *
- *
- */
-
-
-
-
+});
/**
- * @class Roo.htmleditor.BlockTable
- * Block that manages a table
+ * @class Roo.htmleditor.FilterStyleToTag
+ * part of the word stuff... - certain 'styles' should be converted to tags.
+ * eg.
+ * font-weight: bold -> bold
+ * ?? super / subscrit etc..
*
* @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
+* Run a new style to tag filter.
+* @param {Object} config Configuration options
*/
-
-Roo.htmleditor.BlockTd = function(cfg)
+Roo.htmleditor.FilterStyleToTag = function(cfg)
{
- if (cfg.node) {
- this.readElement(cfg.node);
- this.updateElement(cfg.node);
- }
+
+ this.tags = {
+ B : [ 'fontWeight' , 'bold'],
+ I : [ 'fontStyle' , 'italic'],
+ //pre : [ 'font-style' , 'italic'],
+ // h1.. h6 ?? font-size?
+ SUP : [ 'verticalAlign' , 'super' ],
+ SUB : [ 'verticalAlign' , 'sub' ]
+
+
+ };
+
Roo.apply(this, cfg);
+ this.walk(cfg.node);
+
+
}
-Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
-
- node : false,
+
+
+Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
+{
+ tag: true, // all tags
- width: '',
- textAlign : 'left',
- valign : 'top',
+ tags : false,
- colspan : 1,
- rowspan : 1,
+ replaceTag : function(node)
+ {
+
+
+ if (node.getAttribute("style") === null) {
+ return true;
+ }
+ var inject = [];
+ for (var k in this.tags) {
+ if (node.style[this.tags[k][0]] == this.tags[k][1]) {
+ inject.push(k);
+ node.style.removeProperty(this.tags[k][0]);
+ }
+ }
+ if (!inject.length) {
+ return true;
+ }
+ var cn = Array.from(node.childNodes);
+ var nn = node;
+ Roo.each(inject, function(t) {
+ var nc = node.ownerDocument.createElement(t);
+ nn.appendChild(nc);
+ nn = nc;
+ });
+ for(var i = 0;i < cn.length;cn++) {
+ node.removeChild(cn[i]);
+ nn.appendChild(cn[i]);
+ }
+ return true /// iterate thru
+ }
- // used by context menu
- friendly_name : 'Table Cell',
- deleteTitle : false, // use our customer delete
+})/**
+ * @class Roo.htmleditor.FilterLongBr
+ * BR/BR/BR - keep a maximum of 2...
+ * @constructor
+ * Run a new Long BR Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterLongBr = function(cfg)
+{
+ // no need to apply config.
+ this.searchTag(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
+{
- // context menu is drawn once..
+
+ tag : 'BR',
- contextMenu : function(toolbar)
+
+ replaceTag : function(node)
{
- var cell = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
- };
+ var ps = node.nextSibling;
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.nextSibling;
+ }
- var table = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
- };
+ if (!ps && [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) {
+ node.parentNode.removeChild(node); // remove last BR inside one fo these tags
+ return false;
+ }
- var lr = false;
- var saveSel = function()
- {
- lr = toolbar.editorcore.getSelection().getRangeAt(0);
+ if (!ps || ps.nodeType != 1) {
+ return false;
}
- var restoreSel = function()
- {
- if (lr) {
- (function() {
- toolbar.editorcore.focus();
- var cr = toolbar.editorcore.getSelection();
- cr.removeAllRanges();
- cr.addRange(lr);
- toolbar.editorcore.onEditorEvent();
- }).defer(10, this);
-
-
- }
+
+ if (!ps || ps.tagName != 'BR') {
+
+ return false;
}
- var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- var syncValue = toolbar.editorcore.syncValue;
- var fields = {};
+ if (!node.previousSibling) {
+ return false;
+ }
+ var ps = node.previousSibling;
- return [
- {
- xtype : 'Button',
- text : 'Edit Table',
- listeners : {
- click : function() {
- var t = toolbar.tb.selectedNode.closest('table');
- toolbar.editorcore.selectNode(t);
- toolbar.editorcore.onEditorEvent();
- }
- }
-
- },
-
-
-
- {
- xtype : 'TextItem',
- text : "Column Width: ",
- xns : rooui.Toolbar
-
- },
- {
- xtype : 'Button',
- text: '-',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().shrinkColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: '+',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().growColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
-
- {
- xtype : 'TextItem',
- text : "Vertical Align: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 100,
- name : 'valign',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = cell();
- b.valign = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['top'],
- ['middle'],
- ['bottom'] // there are afew more...
- ],
- fields : [ 'val'],
- xns : Roo.data
- }
- },
-
- {
- xtype : 'TextItem',
- text : "Merge Cells: ",
- xns : rooui.Toolbar
-
- },
-
-
- {
- xtype : 'Button',
- text: 'Right',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().mergeRight();
- //block().growColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
-
- {
- xtype : 'Button',
- text: 'Below',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().mergeBelow();
- //block().growColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'TextItem',
- text : "| ",
- xns : rooui.Toolbar
-
- },
-
- {
- xtype : 'Button',
- text: 'Split',
- listeners : {
- click : function (_self, e)
- {
- //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().split();
- syncValue();
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- toolbar.editorcore.onEditorEvent();
-
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Fill',
- xns : rooui.Toolbar
-
- },
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.previousSibling;
+ }
+ if (!ps || ps.nodeType != 1) {
+ return false;
+ }
+ // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
+ if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
+ return false;
+ }
-
- {
- xtype : 'Button',
- text: 'Delete',
-
- xns : rooui.Toolbar,
- menu : {
- xtype : 'Menu',
- xns : rooui.menu,
- items : [
- {
- xtype : 'Item',
- html: 'Column',
- listeners : {
- click : function (_self, e)
- {
- var t = table();
-
- cell().deleteColumn();
- syncValue();
- toolbar.editorcore.selectNode(t.node);
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.menu
- },
- {
- xtype : 'Item',
- html: 'Row',
- listeners : {
- click : function (_self, e)
- {
- var t = table();
- cell().deleteRow();
- syncValue();
-
- toolbar.editorcore.selectNode(t.node);
- toolbar.editorcore.onEditorEvent();
-
- }
- },
- xns : rooui.menu
- },
- {
- xtype : 'Separator',
- xns : rooui.menu
- },
- {
- xtype : 'Item',
- html: 'Table',
- listeners : {
- click : function (_self, e)
- {
- var t = table();
- var nn = t.node.nextSibling || t.node.previousSibling;
- t.node.parentNode.removeChild(t.node);
- if (nn) {
- toolbar.editorcore.selectNode(nn, true);
- }
- toolbar.editorcore.onEditorEvent();
-
- }
- },
- xns : rooui.menu
- }
- ]
- }
- }
-
- // align... << fixme
-
- ];
+ node.parentNode.removeChild(node); // remove me...
- },
+ return false; // no need to do children
+
+ }
+});
+
+/**
+ * @class Roo.htmleditor.FilterBlock
+ * removes id / data-block and contenteditable that are associated with blocks
+ * usage should be done on a cloned copy of the dom
+ * @constructor
+* Run a new Attribute Filter { node : xxxx }}
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterBlock = function(cfg)
+{
+ Roo.apply(this, cfg);
+ var qa = cfg.node.querySelectorAll;
+ this.removeAttributes('data-block');
+ this.removeAttributes('contenteditable');
+ this.removeAttributes('id');
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * ?? should it be called with option to hide all editing features?
- */
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * ?? should it be called with option to hide all editing features?
- */
- toObject : function()
+}
+
+Roo.apply(Roo.htmleditor.FilterBlock.prototype,
+{
+ node: true, // all tags
+
+
+ removeAttributes : function(attr)
{
- var ret = {
- tag : 'td',
- contenteditable : 'true', // this stops cell selection from picking the table.
- 'data-block' : 'Td',
- valign : this.valign,
- style : {
- 'text-align' : this.textAlign,
- border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
- 'border-collapse' : 'collapse',
- padding : '6px', // 8 for desktop / 4 for mobile
- 'vertical-align': this.valign
- },
- html : this.html
- };
- if (this.width != '') {
- ret.width = this.width;
- ret.style.width = this.width;
+ var ar = this.node.querySelectorAll('*[' + attr + ']');
+ for (var i =0;i<ar.length;i++) {
+ ar[i].removeAttribute(attr);
}
+ }
- if (this.colspan > 1) {
- ret.colspan = this.colspan ;
- }
- if (this.rowspan > 1) {
- ret.rowspan = this.rowspan ;
- }
-
-
- return ret;
-
- },
- readElement : function(node)
- {
- node = node ? node : this.node ;
- this.width = node.style.width;
- this.colspan = Math.max(1,1*node.getAttribute('colspan'));
- this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
- this.html = node.innerHTML;
- if (node.style.textAlign != '') {
- this.textAlign = node.style.textAlign;
- }
-
-
- },
-
- // the default cell object... at present...
- emptyCell : function() {
- return {
- colspan : 1,
- rowspan : 1,
- textAlign : 'left',
- html : " " // is this going to be editable now?
- };
-
- },
+});
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidySerializer
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ * @constructor
+ * @method Serializer
+ * @param {Object} settings Name/value settings object.
+ */
+
+
+Roo.htmleditor.TidySerializer = function(settings)
+{
+ Roo.apply(this, settings);
- removeNode : function()
- {
- return this.node.closest('table');
-
- },
+ this.writer = new Roo.htmleditor.TidyWriter(settings);
- cellData : false,
- colWidths : false,
+
+};
+Roo.htmleditor.TidySerializer.prototype = {
- toTableArray : function()
- {
- var ret = [];
- var tab = this.node.closest('tr').closest('table');
- Array.from(tab.rows).forEach(function(r, ri){
- ret[ri] = [];
- });
- var rn = 0;
- this.colWidths = [];
- var all_auto = true;
- Array.from(tab.rows).forEach(function(r, ri){
-
- var cn = 0;
- Array.from(r.cells).forEach(function(ce, ci){
- var c = {
- cell : ce,
- row : rn,
- col: cn,
- colspan : ce.colSpan,
- rowspan : ce.rowSpan
- };
- if (ce.isEqualNode(this.node)) {
- this.cellData = c;
- }
- // if we have been filled up by a row?
- if (typeof(ret[rn][cn]) != 'undefined') {
- while(typeof(ret[rn][cn]) != 'undefined') {
- cn++;
- }
- c.col = cn;
- }
-
- if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
- this.colWidths[cn] = ce.style.width;
- if (this.colWidths[cn] != '') {
- all_auto = false;
- }
- }
-
+ /**
+ * @param {boolean} inner do the inner of the node.
+ */
+ inner : false,
+
+ writer : false,
+
+ /**
+ * Serializes the specified node into a string.
+ *
+ * @example
+ * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
+ * @method serialize
+ * @param {DomElement} node Node instance to serialize.
+ * @return {String} String with HTML based on DOM tree.
+ */
+ serialize : function(node) {
+
+ // = settings.validate;
+ var writer = this.writer;
+ var self = this;
+ this.handlers = {
+ // #text
+ 3: function(node) {
- if (c.colspan < 2 && c.rowspan < 2 ) {
- ret[rn][cn] = c;
- cn++;
+ writer.text(node.nodeValue, node);
+ },
+ // #comment
+ 8: function(node) {
+ writer.comment(node.nodeValue);
+ },
+ // Processing instruction
+ 7: function(node) {
+ writer.pi(node.name, node.nodeValue);
+ },
+ // Doctype
+ 10: function(node) {
+ writer.doctype(node.nodeValue);
+ },
+ // CDATA
+ 4: function(node) {
+ writer.cdata(node.nodeValue);
+ },
+ // Document fragment
+ 11: function(node) {
+ node = node.firstChild;
+ if (!node) {
return;
}
- for(var j = 0; j < c.rowspan; j++) {
- if (typeof(ret[rn+j]) == 'undefined') {
- continue; // we have a problem..
- }
- ret[rn+j][cn] = c;
- for(var i = 0; i < c.colspan; i++) {
- ret[rn+j][cn+i] = c;
- }
+ while(node) {
+ self.walk(node);
+ node = node.nextSibling
}
-
- cn += c.colspan;
- }, this);
- rn++;
- }, this);
-
- // initalize widths.?
- // either all widths or no widths..
- if (all_auto) {
- this.colWidths[0] = false; // no widths flag.
- }
-
-
- return ret;
-
+ }
+ };
+ writer.reset();
+ 1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
+ return writer.getContent();
},
-
-
-
-
- mergeRight: function()
+
+ walk: function(node)
{
-
- // get the contents of the next cell along..
- var tr = this.node.closest('tr');
- var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
- if (i >= tr.childNodes.length - 1) {
- return; // no cells on right to merge with.
+ var attrName, attrValue, sortedAttrs, i, l, elementRule,
+ handler = this.handlers[node.nodeType];
+
+ if (handler) {
+ handler(node);
+ return;
}
- var table = this.toTableArray();
+
+ var name = node.nodeName;
+ var isEmpty = node.childNodes.length < 1;
+
+ var writer = this.writer;
+ var attrs = node.attributes;
+ // Sort attributes
- if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
- return; // nothing right?
+ writer.start(node.nodeName, attrs, isEmpty, node);
+ if (isEmpty) {
+ return;
}
- var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
- // right cell - must be same rowspan and on the same row.
- if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
- return; // right hand side is not same rowspan.
+ node = node.firstChild;
+ if (!node) {
+ writer.end(name);
+ return;
}
+ while (node) {
+ this.walk(node);
+ node = node.nextSibling;
+ }
+ writer.end(name);
-
-
- this.node.innerHTML += ' ' + rc.cell.innerHTML;
- tr.removeChild(rc.cell);
- this.colspan += rc.colspan;
- this.node.setAttribute('colspan', this.colspan);
+
+ }
+ // Serialize element and treat all non elements as fragments
+
+};
- var table = this.toTableArray();
- this.normalizeWidths(table);
- this.updateWidths(table);
- },
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyWriter
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Known issues?
+ * - not tested much with 'PRE' formated elements.
+ *
+ *
+ *
+ */
+
+Roo.htmleditor.TidyWriter = function(settings)
+{
+ // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
+ Roo.apply(this, settings);
+ this.html = [];
+ this.state = [];
+
+ this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
+
+}
+Roo.htmleditor.TidyWriter.prototype = {
+
+
+ state : false,
- mergeBelow : function()
+ indent : ' ',
+
+ // part of state...
+ indentstr : '',
+ in_pre: false,
+ in_inline : false,
+ last_inline : false,
+ encode : false,
+
+
+ /**
+ * Writes the a start element such as <p id="a">.
+ *
+ * @method start
+ * @param {String} name Name of the element.
+ * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
+ * @param {Boolean} empty Optional empty state if the tag should end like <br />.
+ */
+ start: function(name, attrs, empty, node)
{
- var table = this.toTableArray();
- if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
- return; // no row below
+ var i, l, attr, value;
+
+ // there are some situations where adding line break && indentation will not work. will not work.
+ // <span / b / i ... formating?
+
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+ var in_pre = this.in_pre || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
+
+ var is_short = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
+
+ var add_lb = name == 'BR' ? false : in_inline;
+
+ if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
+ i_inline = false;
}
- if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
- return; // nothing right?
+
+ var indentstr = this.indentstr;
+
+ // e_inline = elements that can be inline, but still allow \n before and after?
+ // only 'BR' ??? any others?
+
+ // ADD LINE BEFORE tage
+ if (!this.in_pre) {
+ if (in_inline) {
+ //code
+ if (name == 'BR') {
+ this.addLine();
+ } else if (this.lastElementEndsWS()) {
+ this.addLine();
+ } else{
+ // otherwise - no new line. (and dont indent.)
+ indentstr = '';
+ }
+
+ } else {
+ this.addLine();
+ }
+ } else {
+ indentstr = '';
}
- var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
- if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
- return; // right hand side is not same rowspan.
+ this.html.push(indentstr + '<', name.toLowerCase());
+
+ if (attrs) {
+ for (i = 0, l = attrs.length; i < l; i++) {
+ attr = attrs[i];
+ this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
+ }
}
- this.node.innerHTML = this.node.innerHTML + rc.cell.innerHTML ;
- rc.cell.parentNode.removeChild(rc.cell);
- this.rowspan += rc.rowspan;
- this.node.setAttribute('rowspan', this.rowspan);
- },
-
- split: function()
- {
- if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+
+ if (empty) {
+ if (is_short) {
+ this.html[this.html.length] = '/>';
+ } else {
+ this.html[this.html.length] = '></' + name.toLowerCase() + '>';
+ }
+ var e_inline = name == 'BR' ? false : this.in_inline;
+
+ if (!e_inline && !this.in_pre) {
+ this.addLine();
+ }
return;
+
}
- var table = this.toTableArray();
- var cd = this.cellData;
- this.rowspan = 1;
- this.colspan = 1;
+ // not empty..
+ this.html[this.html.length] = '>';
- for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
-
-
- for(var c = cd.col; c < cd.col + cd.colspan; c++) {
- if (r == cd.row && c == cd.col) {
- this.node.removeAttribute('rowspan');
- this.node.removeAttribute('colspan');
+ // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+ /*
+ if (!in_inline && !in_pre) {
+ var cn = node.firstChild;
+ while(cn) {
+ if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
+ in_inline = true
+ break;
}
-
- var ntd = this.node.cloneNode(); // which col/row should be 0..
- ntd.removeAttribute('id');
- ntd.style.width = this.colWidths[c];
- ntd.innerHTML = '';
- table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 };
+ cn = cn.nextSibling;
}
-
+
}
- this.redrawAllCells(table);
+ */
+
+
+ this.pushState({
+ indentstr : in_pre ? '' : (this.indentstr + this.indent),
+ in_pre : in_pre,
+ in_inline : in_inline
+ });
+ // add a line after if we are not in a
+
+ if (!in_inline && !in_pre) {
+ this.addLine();
+ }
+
+
+
},
-
-
- redrawAllCells: function(table)
+ lastElementEndsWS : function()
{
+ var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
+ if (value === false) {
+ return true;
+ }
+ return value.match(/\s+$/);
-
- var tab = this.node.closest('tr').closest('table');
- var ctr = tab.rows[0].parentNode;
- Array.from(tab.rows).forEach(function(r, ri){
-
- Array.from(r.cells).forEach(function(ce, ci){
- ce.parentNode.removeChild(ce);
- });
- r.parentNode.removeChild(r);
- });
- for(var r = 0 ; r < table.length; r++) {
- var re = tab.rows[r];
-
- var re = tab.ownerDocument.createElement('tr');
- ctr.appendChild(re);
- for(var c = 0 ; c < table[r].length; c++) {
- if (table[r][c].cell === false) {
- continue;
- }
-
- re.appendChild(table[r][c].cell);
-
- table[r][c].cell = false;
- }
+ },
+
+ /**
+ * Writes the a end element such as </p>.
+ *
+ * @method end
+ * @param {String} name Name of the element.
+ */
+ end: function(name) {
+ var value;
+ this.popState();
+ var indentstr = '';
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+
+ if (!this.in_pre && !in_inline) {
+ this.addLine();
+ indentstr = this.indentstr;
}
+ this.html.push(indentstr + '</', name.toLowerCase(), '>');
+ this.last_inline = in_inline;
+ // pop the indent state..
},
- updateWidths : function(table)
+ /**
+ * Writes a text node.
+ *
+ * In pre - we should not mess with the contents.
+ *
+ *
+ * @method text
+ * @param {String} text String to write out.
+ * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
+ */
+ text: function(in_text, node)
{
- for(var r = 0 ; r < table.length; r++) {
-
- for(var c = 0 ; c < table[r].length; c++) {
- if (table[r][c].cell === false) {
- continue;
- }
+ // if not in whitespace critical
+ if (in_text.length < 1) {
+ return;
+ }
+ var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
+
+ if (this.in_pre) {
+ this.html[this.html.length] = text;
+ return;
+ }
+
+ if (this.in_inline) {
+ text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
+ if (text != ' ') {
+ text = text.replace(/\s+/,' '); // all white space to single white space
- if (this.colWidths[0] != false && table[r][c].colspan < 2) {
- var el = Roo.htmleditor.Block.factory(table[r][c].cell);
- el.width = Math.floor(this.colWidths[c]) +'%';
- el.updateElement(el.node);
+
+ // if next tag is '<BR>', then we can trim right..
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ node.nextSibling.nodeName == 'BR' )
+ {
+ text = text.replace(/\s+$/g,'');
}
- if (this.colWidths[0] != false && table[r][c].colspan > 1) {
- var el = Roo.htmleditor.Block.factory(table[r][c].cell);
- var width = 0;
- for(var i = 0; i < table[r][c].colspan; i ++) {
- width += Math.floor(this.colWidths[c + i]);
- }
- el.width = width +'%';
- el.updateElement(el.node);
+ // if previous tag was a BR, we can also trim..
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ node.previousSibling.nodeName == 'BR' )
+ {
+ text = this.indentstr + text.replace(/^\s+/g,'');
}
- table[r][c].cell = false; // done
+ if (text.match(/\n/)) {
+ text = text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\n\s+$/,'');
+ }
+ // repace long lines
+
}
+
+ this.html[this.html.length] = text;
+ return;
}
- },
- normalizeWidths : function(table)
- {
- if (this.colWidths[0] === false) {
- var nw = 100.0 / this.colWidths.length;
- this.colWidths.forEach(function(w,i) {
- this.colWidths[i] = nw;
- },this);
- return;
- }
-
- var t = 0, missing = [];
+ // see if previous element was a inline element.
+ var indentstr = this.indentstr;
+
+ text = text.replace(/\s+/g," "); // all whitespace into single white space.
- this.colWidths.forEach(function(w,i) {
- //if you mix % and
- this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
- var add = this.colWidths[i];
- if (add > 0) {
- t+=add;
- return;
- }
- missing.push(i);
+ // should trim left?
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
+ {
+ indentstr = '';
+ } else {
+ this.addLine();
+ text = text.replace(/^\s+/,''); // trim left
+
+ }
+ // should trim right?
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
+ {
+ // noop
- },this);
- var nc = this.colWidths.length;
- if (missing.length) {
- var mult = (nc - missing.length) / (1.0 * nc);
- var t = mult * t;
- var ew = (100 -t) / (1.0 * missing.length);
- this.colWidths.forEach(function(w,i) {
- if (w > 0) {
- this.colWidths[i] = w * mult;
- return;
- }
-
- this.colWidths[i] = ew;
- }, this);
- // have to make up numbers..
-
+ } else {
+ text = text.replace(/\s+$/,''); // trim right
}
- // now we should have all the widths..
+
+
-
+
+
+ if (text.length < 1) {
+ return;
+ }
+ if (!text.match(/\n/)) {
+ this.html.push(indentstr + text);
+ return;
+ }
+
+ text = this.indentstr + text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\s+$/,'');
+
+ this.html.push(text);
+
+ // split and indent..
+
+
+ },
+ /**
+ * Writes a cdata node such as <![CDATA[data]]>.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the cdata.
+ */
+ cdata: function(text) {
+ this.html.push('<![CDATA[', text, ']]>');
+ },
+ /**
+ * Writes a comment node such as <!-- Comment -->.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the comment.
+ */
+ comment: function(text) {
+ this.html.push('<!--', text, '-->');
+ },
+ /**
+ * Writes a PI node such as <?xml attr="value" ?>.
+ *
+ * @method pi
+ * @param {String} name Name of the pi.
+ * @param {String} text String to write out inside the pi.
+ */
+ pi: function(name, text) {
+ text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
+ this.indent != '' && this.html.push('\n');
+ },
+ /**
+ * Writes a doctype node such as <!DOCTYPE data>.
+ *
+ * @method doctype
+ * @param {String} text String to write out inside the doctype.
+ */
+ doctype: function(text) {
+ this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
+ },
+ /**
+ * Resets the internal buffer if one wants to reuse the writer.
+ *
+ * @method reset
+ */
+ reset: function() {
+ this.html.length = 0;
+ this.state = [];
+ this.pushState({
+ indentstr : '',
+ in_pre : false,
+ in_inline : false
+ })
+ },
+ /**
+ * Returns the contents that got serialized.
+ *
+ * @method getContent
+ * @return {String} HTML contents that got written down.
+ */
+ getContent: function() {
+ return this.html.join('').replace(/\n$/, '');
},
- shrinkColumn : function()
+ pushState : function(cfg)
{
- var table = this.toTableArray();
- this.normalizeWidths(table);
- var col = this.cellData.col;
- var nw = this.colWidths[col] * 0.8;
- if (nw < 5) {
- return;
- }
- var otherAdd = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
- this.colWidths.forEach(function(w,i) {
- if (i == col) {
- this.colWidths[i] = nw;
- return;
- }
- this.colWidths[i] += otherAdd
- }, this);
- this.updateWidths(table);
-
+ this.state.push(cfg);
+ Roo.apply(this, cfg);
},
- growColumn : function()
+
+ popState : function()
{
- var table = this.toTableArray();
- this.normalizeWidths(table);
- var col = this.cellData.col;
- var nw = this.colWidths[col] * 1.2;
- if (nw > 90) {
- return;
+ if (this.state.length < 1) {
+ return; // nothing to push
}
- var otherSub = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
- this.colWidths.forEach(function(w,i) {
- if (i == col) {
- this.colWidths[i] = nw;
- return;
- }
- this.colWidths[i] -= otherSub
- }, this);
- this.updateWidths(table);
-
+ var cfg = {
+ in_pre: false,
+ indentstr : ''
+ };
+ this.state.pop();
+ if (this.state.length > 0) {
+ cfg = this.state[this.state.length-1];
+ }
+ Roo.apply(this, cfg);
},
- deleteRow : function()
+
+ addLine: function()
{
- // delete this rows 'tr'
- // if any of the cells in this row have a rowspan > 1 && row!= this row..
- // then reduce the rowspan.
- var table = this.toTableArray();
- // this.cellData.row;
- for (var i =0;i< table[this.cellData.row].length ; i++) {
- var c = table[this.cellData.row][i];
- if (c.row != this.cellData.row) {
-
- c.rowspan--;
- c.cell.setAttribute('rowspan', c.rowspan);
- continue;
- }
- if (c.rowspan > 1) {
- c.rowspan--;
- c.cell.setAttribute('rowspan', c.rowspan);
- }
+ if (this.html.length < 1) {
+ return;
}
- table.splice(this.cellData.row,1);
- this.redrawAllCells(table);
- },
- deleteColumn : function()
- {
- var table = this.toTableArray();
- for (var i =0;i< table.length ; i++) {
- var c = table[i][this.cellData.col];
- if (c.col != this.cellData.col) {
- table[i][this.cellData.col].colspan--;
- } else if (c.colspan > 1) {
- c.colspan--;
- c.cell.setAttribute('colspan', c.colspan);
- }
- table[i].splice(this.cellData.col,1);
+ var value = this.html[this.html.length - 1];
+ if (value.length > 0 && '\n' !== value) {
+ this.html.push('\n');
}
-
- this.redrawAllCells(table);
}
-
-
-})
+//'pre script noscript style textarea video audio iframe object code'
+// shortended... 'area base basefont br col frame hr img input isindex link meta param embed source wbr track');
+// inline
+};
-//<script type="text/javascript">
+Roo.htmleditor.TidyWriter.inline_elements = [
+ 'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
+ 'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
+];
+Roo.htmleditor.TidyWriter.shortend_elements = [
+ 'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
+ 'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
+];
-/*
- * Based Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * LGPL
- *
- */
-
-/**
- * @class Roo.HtmlEditorCore
- * @extends Roo.Component
- * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
+Roo.htmleditor.TidyWriter.whitespace_elements = [
+ 'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
+];/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyEntities
+ * @static
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
*
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ * Not 100% sure this is actually used or needed.
*/
-Roo.HtmlEditorCore = function(config){
-
-
- Roo.HtmlEditorCore.superclass.constructor.call(this, config);
-
-
- this.addEvents({
- /**
- * @event initialize
- * Fires when the editor is fully initialized (including the iframe)
- * @param {Roo.HtmlEditorCore} this
- */
- initialize: true,
- /**
- * @event activate
- * Fires when the editor is first receives the focus. Any insertion must wait
- * until after this event.
- * @param {Roo.HtmlEditorCore} this
- */
- activate: true,
- /**
- * @event beforesync
- * Fires before the textarea is updated with content from the editor iframe. Return false
- * to cancel the sync.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- beforesync: true,
- /**
- * @event beforepush
- * Fires before the iframe editor is updated with content from the textarea. Return false
- * to cancel the push.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- beforepush: true,
- /**
- * @event sync
- * Fires when the textarea is updated with content from the editor iframe.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- sync: true,
- /**
- * @event push
- * Fires when the iframe editor is updated with content from the textarea.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- push: true,
-
- /**
- * @event editorevent
- * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
- * @param {Roo.HtmlEditorCore} this
- */
- editorevent: true
-
-
- });
-
- // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
-
- // defaults : white / black...
- this.applyBlacklists();
-
-
+Roo.htmleditor.TidyEntities = {
-};
-
-
-Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
+ /**
+ * initialize data..
+ */
+ init : function (){
+
+ this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
+
+ },
- /**
- * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
- */
-
- owner : false,
+ buildEntitiesLookup: function(items, radix) {
+ var i, chr, entity, lookup = {};
+ if (!items) {
+ return {};
+ }
+ items = typeof(items) == 'string' ? items.split(',') : items;
+ radix = radix || 10;
+ // Build entities lookup table
+ for (i = 0; i < items.length; i += 2) {
+ chr = String.fromCharCode(parseInt(items[i], radix));
+ // Only add non base entities
+ if (!this.baseEntities[chr]) {
+ entity = '&' + items[i + 1] + ';';
+ lookup[chr] = entity;
+ lookup[entity] = chr;
+ }
+ }
+ return lookup;
+
+ },
- /**
- * @cfg {String} css styling for resizing. (used on bootstrap only)
- */
- resize : false,
- /**
- * @cfg {Number} height (in pixels)
- */
- height: 300,
- /**
- * @cfg {Number} width (in pixels)
- */
- width: 500,
- /**
- * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
- * if you are doing an email editor, this probably needs disabling, it's designed
- */
- autoClean: true,
+ asciiMap : {
+ 128: '€',
+ 130: '‚',
+ 131: 'ƒ',
+ 132: '„',
+ 133: '…',
+ 134: '†',
+ 135: '‡',
+ 136: 'ˆ',
+ 137: '‰',
+ 138: 'Š',
+ 139: '‹',
+ 140: 'Œ',
+ 142: 'Ž',
+ 145: '‘',
+ 146: '’',
+ 147: '“',
+ 148: '”',
+ 149: '•',
+ 150: '–',
+ 151: '—',
+ 152: '˜',
+ 153: '™',
+ 154: 'š',
+ 155: '›',
+ 156: 'œ',
+ 158: 'ž',
+ 159: 'Ÿ'
+ },
+ // Raw entities
+ baseEntities : {
+ '"': '"',
+ // Needs to be escaped since the YUI compressor would otherwise break the code
+ '\'': ''',
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '`': '`'
+ },
+ // Reverse lookup table for raw entities
+ reverseEntities : {
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '"': '"',
+ ''': '\''
+ },
+ attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ rawCharsRegExp : /[<>&\"\']/g,
+ entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
+ namedEntities : false,
+ namedEntitiesData : [
+ '50',
+ 'nbsp',
+ '51',
+ 'iexcl',
+ '52',
+ 'cent',
+ '53',
+ 'pound',
+ '54',
+ 'curren',
+ '55',
+ 'yen',
+ '56',
+ 'brvbar',
+ '57',
+ 'sect',
+ '58',
+ 'uml',
+ '59',
+ 'copy',
+ '5a',
+ 'ordf',
+ '5b',
+ 'laquo',
+ '5c',
+ 'not',
+ '5d',
+ 'shy',
+ '5e',
+ 'reg',
+ '5f',
+ 'macr',
+ '5g',
+ 'deg',
+ '5h',
+ 'plusmn',
+ '5i',
+ 'sup2',
+ '5j',
+ 'sup3',
+ '5k',
+ 'acute',
+ '5l',
+ 'micro',
+ '5m',
+ 'para',
+ '5n',
+ 'middot',
+ '5o',
+ 'cedil',
+ '5p',
+ 'sup1',
+ '5q',
+ 'ordm',
+ '5r',
+ 'raquo',
+ '5s',
+ 'frac14',
+ '5t',
+ 'frac12',
+ '5u',
+ 'frac34',
+ '5v',
+ 'iquest',
+ '60',
+ 'Agrave',
+ '61',
+ 'Aacute',
+ '62',
+ 'Acirc',
+ '63',
+ 'Atilde',
+ '64',
+ 'Auml',
+ '65',
+ 'Aring',
+ '66',
+ 'AElig',
+ '67',
+ 'Ccedil',
+ '68',
+ 'Egrave',
+ '69',
+ 'Eacute',
+ '6a',
+ 'Ecirc',
+ '6b',
+ 'Euml',
+ '6c',
+ 'Igrave',
+ '6d',
+ 'Iacute',
+ '6e',
+ 'Icirc',
+ '6f',
+ 'Iuml',
+ '6g',
+ 'ETH',
+ '6h',
+ 'Ntilde',
+ '6i',
+ 'Ograve',
+ '6j',
+ 'Oacute',
+ '6k',
+ 'Ocirc',
+ '6l',
+ 'Otilde',
+ '6m',
+ 'Ouml',
+ '6n',
+ 'times',
+ '6o',
+ 'Oslash',
+ '6p',
+ 'Ugrave',
+ '6q',
+ 'Uacute',
+ '6r',
+ 'Ucirc',
+ '6s',
+ 'Uuml',
+ '6t',
+ 'Yacute',
+ '6u',
+ 'THORN',
+ '6v',
+ 'szlig',
+ '70',
+ 'agrave',
+ '71',
+ 'aacute',
+ '72',
+ 'acirc',
+ '73',
+ 'atilde',
+ '74',
+ 'auml',
+ '75',
+ 'aring',
+ '76',
+ 'aelig',
+ '77',
+ 'ccedil',
+ '78',
+ 'egrave',
+ '79',
+ 'eacute',
+ '7a',
+ 'ecirc',
+ '7b',
+ 'euml',
+ '7c',
+ 'igrave',
+ '7d',
+ 'iacute',
+ '7e',
+ 'icirc',
+ '7f',
+ 'iuml',
+ '7g',
+ 'eth',
+ '7h',
+ 'ntilde',
+ '7i',
+ 'ograve',
+ '7j',
+ 'oacute',
+ '7k',
+ 'ocirc',
+ '7l',
+ 'otilde',
+ '7m',
+ 'ouml',
+ '7n',
+ 'divide',
+ '7o',
+ 'oslash',
+ '7p',
+ 'ugrave',
+ '7q',
+ 'uacute',
+ '7r',
+ 'ucirc',
+ '7s',
+ 'uuml',
+ '7t',
+ 'yacute',
+ '7u',
+ 'thorn',
+ '7v',
+ 'yuml',
+ 'ci',
+ 'fnof',
+ 'sh',
+ 'Alpha',
+ 'si',
+ 'Beta',
+ 'sj',
+ 'Gamma',
+ 'sk',
+ 'Delta',
+ 'sl',
+ 'Epsilon',
+ 'sm',
+ 'Zeta',
+ 'sn',
+ 'Eta',
+ 'so',
+ 'Theta',
+ 'sp',
+ 'Iota',
+ 'sq',
+ 'Kappa',
+ 'sr',
+ 'Lambda',
+ 'ss',
+ 'Mu',
+ 'st',
+ 'Nu',
+ 'su',
+ 'Xi',
+ 'sv',
+ 'Omicron',
+ 't0',
+ 'Pi',
+ 't1',
+ 'Rho',
+ 't3',
+ 'Sigma',
+ 't4',
+ 'Tau',
+ 't5',
+ 'Upsilon',
+ 't6',
+ 'Phi',
+ 't7',
+ 'Chi',
+ 't8',
+ 'Psi',
+ 't9',
+ 'Omega',
+ 'th',
+ 'alpha',
+ 'ti',
+ 'beta',
+ 'tj',
+ 'gamma',
+ 'tk',
+ 'delta',
+ 'tl',
+ 'epsilon',
+ 'tm',
+ 'zeta',
+ 'tn',
+ 'eta',
+ 'to',
+ 'theta',
+ 'tp',
+ 'iota',
+ 'tq',
+ 'kappa',
+ 'tr',
+ 'lambda',
+ 'ts',
+ 'mu',
+ 'tt',
+ 'nu',
+ 'tu',
+ 'xi',
+ 'tv',
+ 'omicron',
+ 'u0',
+ 'pi',
+ 'u1',
+ 'rho',
+ 'u2',
+ 'sigmaf',
+ 'u3',
+ 'sigma',
+ 'u4',
+ 'tau',
+ 'u5',
+ 'upsilon',
+ 'u6',
+ 'phi',
+ 'u7',
+ 'chi',
+ 'u8',
+ 'psi',
+ 'u9',
+ 'omega',
+ 'uh',
+ 'thetasym',
+ 'ui',
+ 'upsih',
+ 'um',
+ 'piv',
+ '812',
+ 'bull',
+ '816',
+ 'hellip',
+ '81i',
+ 'prime',
+ '81j',
+ 'Prime',
+ '81u',
+ 'oline',
+ '824',
+ 'frasl',
+ '88o',
+ 'weierp',
+ '88h',
+ 'image',
+ '88s',
+ 'real',
+ '892',
+ 'trade',
+ '89l',
+ 'alefsym',
+ '8cg',
+ 'larr',
+ '8ch',
+ 'uarr',
+ '8ci',
+ 'rarr',
+ '8cj',
+ 'darr',
+ '8ck',
+ 'harr',
+ '8dl',
+ 'crarr',
+ '8eg',
+ 'lArr',
+ '8eh',
+ 'uArr',
+ '8ei',
+ 'rArr',
+ '8ej',
+ 'dArr',
+ '8ek',
+ 'hArr',
+ '8g0',
+ 'forall',
+ '8g2',
+ 'part',
+ '8g3',
+ 'exist',
+ '8g5',
+ 'empty',
+ '8g7',
+ 'nabla',
+ '8g8',
+ 'isin',
+ '8g9',
+ 'notin',
+ '8gb',
+ 'ni',
+ '8gf',
+ 'prod',
+ '8gh',
+ 'sum',
+ '8gi',
+ 'minus',
+ '8gn',
+ 'lowast',
+ '8gq',
+ 'radic',
+ '8gt',
+ 'prop',
+ '8gu',
+ 'infin',
+ '8h0',
+ 'ang',
+ '8h7',
+ 'and',
+ '8h8',
+ 'or',
+ '8h9',
+ 'cap',
+ '8ha',
+ 'cup',
+ '8hb',
+ 'int',
+ '8hk',
+ 'there4',
+ '8hs',
+ 'sim',
+ '8i5',
+ 'cong',
+ '8i8',
+ 'asymp',
+ '8j0',
+ 'ne',
+ '8j1',
+ 'equiv',
+ '8j4',
+ 'le',
+ '8j5',
+ 'ge',
+ '8k2',
+ 'sub',
+ '8k3',
+ 'sup',
+ '8k4',
+ 'nsub',
+ '8k6',
+ 'sube',
+ '8k7',
+ 'supe',
+ '8kl',
+ 'oplus',
+ '8kn',
+ 'otimes',
+ '8l5',
+ 'perp',
+ '8m5',
+ 'sdot',
+ '8o8',
+ 'lceil',
+ '8o9',
+ 'rceil',
+ '8oa',
+ 'lfloor',
+ '8ob',
+ 'rfloor',
+ '8p9',
+ 'lang',
+ '8pa',
+ 'rang',
+ '9ea',
+ 'loz',
+ '9j0',
+ 'spades',
+ '9j3',
+ 'clubs',
+ '9j5',
+ 'hearts',
+ '9j6',
+ 'diams',
+ 'ai',
+ 'OElig',
+ 'aj',
+ 'oelig',
+ 'b0',
+ 'Scaron',
+ 'b1',
+ 'scaron',
+ 'bo',
+ 'Yuml',
+ 'm6',
+ 'circ',
+ 'ms',
+ 'tilde',
+ '802',
+ 'ensp',
+ '803',
+ 'emsp',
+ '809',
+ 'thinsp',
+ '80c',
+ 'zwnj',
+ '80d',
+ 'zwj',
+ '80e',
+ 'lrm',
+ '80f',
+ 'rlm',
+ '80j',
+ 'ndash',
+ '80k',
+ 'mdash',
+ '80o',
+ 'lsquo',
+ '80p',
+ 'rsquo',
+ '80q',
+ 'sbquo',
+ '80s',
+ 'ldquo',
+ '80t',
+ 'rdquo',
+ '80u',
+ 'bdquo',
+ '810',
+ 'dagger',
+ '811',
+ 'Dagger',
+ '81g',
+ 'permil',
+ '81p',
+ 'lsaquo',
+ '81q',
+ 'rsaquo',
+ '85c',
+ 'euro'
+ ],
+
+
/**
- * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+ * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
+ *
+ * @method encodeRaw
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
*/
- enableBlocks : true,
+ encodeRaw: function(text, attr)
+ {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
+ },
/**
- * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
- *
+ * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
+ * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
+ * and is exposed as the DOMUtils.encode function.
+ *
+ * @method encodeAllRaw
+ * @param {String} text Text to encode.
+ * @return {String} Entity encoded text.
*/
- stylesheets: false,
- /**
- * @cfg {String} language default en - language of text (usefull for rtl languages)
- *
+ encodeAllRaw: function(text) {
+ var t = this;
+ return ('' + text).replace(this.rawCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
+ },
+ /**
+ * Encodes the specified string using numeric entities. The core entities will be
+ * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
+ *
+ * @method encodeNumeric
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
*/
- language: 'en',
-
+ encodeNumeric: function(text, attr) {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ // Multi byte sequence convert it to a single entity
+ if (chr.length > 1) {
+ return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
+ }
+ return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
+ });
+ },
/**
- * @cfg {boolean} allowComments - default false - allow comments in HTML source
- * - by default they are stripped - if you are editing email you may need this.
+ * Encodes the specified string using named entities. The core entities will be encoded
+ * as named ones but all non lower ascii characters will be encoded into named entities.
+ *
+ * @method encodeNamed
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @param {Object} entities Optional parameter with entities to use.
+ * @return {String} Entity encoded text.
*/
- allowComments: false,
- // id of frame..
- frameId: false,
-
- // private properties
- validationEvent : false,
- deferHeight: true,
- initialized : false,
- activated : false,
- sourceEditMode : false,
- onFocus : Roo.emptyFn,
- iframePad:3,
- hideMode:'offsets',
-
- clearUp: true,
-
- // blacklist + whitelisted elements..
- black: false,
- white: false,
-
- bodyCls : '',
-
-
- undoManager : false,
+ encodeNamed: function(text, attr, entities) {
+ var t = this;
+ entities = entities || this.namedEntities;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || chr;
+ });
+ },
/**
- * Protected method that will not generally be called directly. It
- * is called when the editor initializes the iframe with HTML contents. Override this method if you
- * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+ * Returns an encode function based on the name(s) and it's optional entities.
+ *
+ * @method getEncodeFunc
+ * @param {String} name Comma separated list of encoders for example named,numeric.
+ * @param {String} entities Optional parameter with entities to use instead of the built in set.
+ * @return {function} Encode function to be used.
*/
- getDocMarkup : function(){
- // body styles..
- var st = '';
-
- // inherit styels from page...??
- if (this.stylesheets === false) {
-
- Roo.get(document.head).select('style').each(function(node) {
- st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
- });
-
- Roo.get(document.head).select('link').each(function(node) {
- st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ getEncodeFunc: function(name, entities) {
+ entities = this.buildEntitiesLookup(entities) || this.namedEntities;
+ var t = this;
+ function encodeNamedAndNumeric(text, attr) {
+ return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
});
-
- } else if (!this.stylesheets.length) {
- // simple..
- st = '<style type="text/css">' +
- 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
- '</style>';
- } else {
- for (var i in this.stylesheets) {
- if (typeof(this.stylesheets[i]) != 'string') {
- continue;
- }
- st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
- }
-
- }
-
- st += '<style type="text/css">' +
- 'IMG { cursor: pointer } ' +
- '</style>';
-
- st += '<meta name="google" content="notranslate">';
-
- var cls = 'notranslate roo-htmleditor-body';
-
- if(this.bodyCls.length){
- cls += ' ' + this.bodyCls;
- }
-
- return '<html class="notranslate" translate="no"><head>' + st +
- //<style type="text/css">' +
- //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
- //'</style>' +
- ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
- },
-
- // private
- onRender : function(ct, position)
- {
- var _t = this;
- //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
- this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
-
-
- this.el.dom.style.border = '0 none';
- this.el.dom.setAttribute('tabIndex', -1);
- this.el.addClass('x-hidden hide');
-
-
-
- if(Roo.isIE){ // fix IE 1px bogus margin
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
- }
-
-
- this.frameId = Roo.id();
-
- var ifcfg = {
- tag: 'iframe',
- cls: 'form-control', // bootstrap..
- id: this.frameId,
- name: this.frameId,
- frameBorder : 'no',
- 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
- };
- if (this.resize) {
- ifcfg.style = { resize : this.resize };
}
-
- var iframe = this.owner.wrap.createChild(ifcfg, this.el);
-
-
- this.iframe = iframe.dom;
-
- this.assignDocWin();
-
- this.doc.designMode = 'on';
-
- this.doc.open();
- this.doc.write(this.getDocMarkup());
- this.doc.close();
-
-
- var task = { // must defer to wait for browser to be ready
- run : function(){
- //console.log("run task?" + this.doc.readyState);
- this.assignDocWin();
- if(this.doc.body || this.doc.readyState == 'complete'){
- try {
- this.doc.designMode="on";
-
- } catch (e) {
- return;
- }
- Roo.TaskMgr.stop(task);
- this.initEditor.defer(10, this);
- }
- },
- interval : 10,
- duration: 10000,
- scope: this
- };
- Roo.TaskMgr.start(task);
- },
-
- // private
- onResize : function(w, h)
- {
- Roo.log('resize: ' +w + ',' + h );
- //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
- if(!this.iframe){
- return;
+ function encodeCustomNamed(text, attr) {
+ return t.encodeNamed(text, attr, entities);
}
- if(typeof w == 'number'){
-
- this.iframe.style.width = w + 'px';
+ // Replace + with , to be compatible with previous TinyMCE versions
+ name = this.makeMap(name.replace(/\+/g, ','));
+ // Named and numeric encoder
+ if (name.named && name.numeric) {
+ return this.encodeNamedAndNumeric;
}
- if(typeof h == 'number'){
-
- this.iframe.style.height = h + 'px';
- if(this.doc){
- (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
+ // Named encoder
+ if (name.named) {
+ // Custom names
+ if (entities) {
+ return encodeCustomNamed;
}
+ return this.encodeNamed;
}
-
- },
-
- /**
- * Toggles the editor between standard and source edit mode.
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
- */
- toggleSourceEdit : function(sourceEditMode){
-
- this.sourceEditMode = sourceEditMode === true;
-
- if(this.sourceEditMode){
-
- Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']); //FIXME - what's the BS styles for these
-
- }else{
- Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
- //this.iframe.className = '';
- this.deferFocus();
+ // Numeric
+ if (name.numeric) {
+ return this.encodeNumeric;
}
- //this.setSize(this.owner.wrap.getSize());
- //this.fireEvent('editmodechange', this, this.sourceEditMode);
+ // Raw encoder
+ return this.encodeRaw;
},
-
-
-
-
/**
- * Protected method that will not generally be called directly. If you need/want
- * custom HTML cleanup, this is the method you should override.
- * @param {String} html The HTML to be cleaned
- * return {String} The cleaned HTML
+ * Decodes the specified string, this will replace entities with raw UTF characters.
+ *
+ * @method decode
+ * @param {String} text Text to entity decode.
+ * @return {String} Entity decoded string.
*/
- cleanHtml : function(html)
+ decode: function(text)
{
- html = String(html);
- if(html.length > 5){
- if(Roo.isSafari){ // strip safari nonsense
- html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+ var t = this;
+ return text.replace(this.entityRegExp, function(all, numeric) {
+ if (numeric) {
+ numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
+ // Support upper UTF
+ if (numeric > 65535) {
+ numeric -= 65536;
+ return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
+ }
+ return t.asciiMap[numeric] || String.fromCharCode(numeric);
}
- }
- if(html == ' '){
- html = '';
- }
- return html;
+ return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+ });
},
+ nativeDecode : function (text) {
+ return text;
+ },
+ makeMap : function (items, delim, map) {
+ var i;
+ items = items || [];
+ delim = delim || ',';
+ if (typeof items == "string") {
+ items = items.split(delim);
+ }
+ map = map || {};
+ i = items.length;
+ while (i--) {
+ map[items[i]] = {};
+ }
+ return map;
+ }
+};
+
+
+
+Roo.htmleditor.TidyEntities.init();
+/**
+ * @class Roo.htmleditor.KeyEnter
+ * Handle Enter press..
+ * @cfg {Roo.HtmlEditorCore} core the editor.
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
- /**
- * HTML Editor -> Textarea
- * Protected method that will not generally be called directly. Syncs the contents
- * of the editor iframe with the textarea.
- */
- syncValue : function()
- {
- //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
- if(this.initialized){
-
- if (this.undoManager) {
- this.undoManager.addEvent();
- }
-
- var bd = (this.doc.body || this.doc.documentElement);
-
-
- var sel = this.win.getSelection();
-
- var div = document.createElement('div');
- div.innerHTML = bd.innerHTML;
- var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
- if (gtx.length > 0) {
- var rm = gtx.item(0).parentNode;
- rm.parentNode.removeChild(rm);
- }
-
-
- if (this.enableBlocks) {
- new Roo.htmleditor.FilterBlock({ node : div });
- }
-
- var html = div.innerHTML;
-
- //?? tidy?
- if (this.autoClean) {
-
- new Roo.htmleditor.FilterAttributes({
- node : div,
- attrib_white : [
- 'href',
- 'src',
- 'name',
- 'align',
- 'colspan',
- 'rowspan',
- 'data-display',
- 'data-caption-display',
- 'data-width',
- 'data-caption',
- 'start' ,
- 'style',
- // youtube embed.
- 'class',
- 'allowfullscreen',
- 'frameborder',
- 'width',
- 'height',
- 'alt'
- ],
- attrib_clean : ['href', 'src' ]
- });
-
- var tidy = new Roo.htmleditor.TidySerializer({
- inner: true
- });
- html = tidy.serialize(div);
-
- }
-
-
- if(Roo.isSafari){
- var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
- var m = bs ? bs.match(/text-align:(.*?);/i) : false;
- if(m && m[1]){
- html = '<div style="'+m[0]+'">' + html + '</div>';
- }
- }
- html = this.cleanHtml(html);
- // fix up the special chars.. normaly like back quotes in word...
- // however we do not want to do this with chinese..
- html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
-
- var cc = match.charCodeAt();
- // Get the character value, handling surrogate pairs
- if (match.length == 2) {
- // It's a surrogate pair, calculate the Unicode code point
- var high = match.charCodeAt(0) - 0xD800;
- var low = match.charCodeAt(1) - 0xDC00;
- cc = (high * 0x400) + low + 0x10000;
- } else if (
- (cc >= 0x4E00 && cc < 0xA000 ) ||
- (cc >= 0x3400 && cc < 0x4E00 ) ||
- (cc >= 0xf900 && cc < 0xfb00 )
- ) {
- return match;
- }
-
- // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
- return "&#" + cc + ";";
-
-
- });
-
-
-
- if(this.owner.fireEvent('beforesync', this, html) !== false){
- this.el.dom.value = html;
- this.owner.fireEvent('sync', this, html);
- }
- }
- },
- /**
- * TEXTAREA -> EDITABLE
- * Protected method that will not generally be called directly. Pushes the value of the textarea
- * into the iframe editor.
- */
- pushValue : function()
- {
- //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
- if(this.initialized){
- var v = this.el.dom.value.trim();
-
-
- if(this.owner.fireEvent('beforepush', this, v) !== false){
- var d = (this.doc.body || this.doc.documentElement);
- d.innerHTML = v;
-
- this.el.dom.value = d.innerHTML;
- this.owner.fireEvent('push', this, v);
- }
- if (this.autoClean) {
- new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
- new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
- }
- if (this.enableBlocks) {
- Roo.htmleditor.Block.initAll(this.doc.body);
- }
-
- this.updateLanguage();
-
- var lc = this.doc.body.lastChild;
- if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
- // add an extra line at the end.
- this.doc.body.appendChild(this.doc.createElement('br'));
- }
-
-
- }
- },
- // private
- deferFocus : function(){
- this.focus.defer(10, this);
- },
+Roo.htmleditor.KeyEnter = function(cfg) {
+ Roo.apply(this, cfg);
+ // this does not actually call walk as it's really just a abstract class
+
+ Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
+}
+
+//Roo.htmleditor.KeyEnter.i = 0;
- // doc'ed in Field
- focus : function(){
- if(this.win && !this.sourceEditMode){
- this.win.focus();
- }else{
- this.el.focus();
- }
- },
+
+Roo.htmleditor.KeyEnter.prototype = {
- assignDocWin: function()
+ core : false,
+
+ keypress : function(e)
{
- var iframe = this.iframe;
-
- if(Roo.isIE){
- this.doc = iframe.contentWindow.document;
- this.win = iframe.contentWindow;
- } else {
-// if (!Roo.get(this.frameId)) {
-// return;
-// }
-// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
-// this.win = Roo.get(this.frameId).dom.contentWindow;
-
- if (!Roo.get(this.frameId) && !iframe.contentDocument) {
- return;
- }
-
- this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
- this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
+ if (e.charCode != 13 && e.charCode != 10) {
+ Roo.log([e.charCode,e]);
+ return true;
}
- },
+ e.preventDefault();
+ // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
+ var doc = this.core.doc;
+ //add a new line
+
- // private
- initEditor : function(){
- //console.log("INIT EDITOR");
- this.assignDocWin();
-
-
-
- this.doc.designMode="on";
- this.doc.open();
- this.doc.write(this.getDocMarkup());
- this.doc.close();
-
- var dbody = (this.doc.body || this.doc.documentElement);
- //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
- // this copies styles from the containing element into thsi one..
- // not sure why we need all of this..
- //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
-
- //var ss = this.el.getStyles( 'background-image', 'background-repeat');
- //ss['background-attachment'] = 'fixed'; // w3c
- dbody.bgProperties = 'fixed'; // ie
- dbody.setAttribute("translate", "no");
-
- //Roo.DomHelper.applyStyles(dbody, ss);
- Roo.EventManager.on(this.doc, {
-
- 'mouseup': this.onEditorEvent,
- 'dblclick': this.onEditorEvent,
- 'click': this.onEditorEvent,
- 'keyup': this.onEditorEvent,
+ var sel = this.core.getSelection();
+ var range = sel.getRangeAt(0);
+ var n = range.commonAncestorContainer;
+ var pc = range.closest([ 'ol', 'ul']);
+ var pli = range.closest('li');
+ if (!pc || e.ctrlKey) {
+ // on it list, or ctrl pressed.
+ if (!e.ctrlKey) {
+ sel.insertNode('br', 'after');
+ } else {
+ // only do this if we have ctrl key..
+ var br = doc.createElement('br');
+ br.className = 'clear';
+ br.setAttribute('style', 'clear: both');
+ sel.insertNode(br, 'after');
+ }
- buffer:100,
- scope: this
- });
- Roo.EventManager.on(this.doc, {
- 'paste': this.onPasteEvent,
- scope : this
- });
- if(Roo.isGecko){
- Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
- }
- //??? needed???
- if(Roo.isIE || Roo.isSafari || Roo.isOpera){
- Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
- }
- this.initialized = true;
-
-
- // initialize special key events - enter
- new Roo.htmleditor.KeyEnter({core : this});
-
-
- this.owner.fireEvent('initialize', this);
- this.pushValue();
- },
- // this is to prevent a href clicks resulting in a redirect?
-
- onPasteEvent : function(e,v)
- {
- // I think we better assume paste is going to be a dirty load of rubish from word..
-
- // even pasting into a 'email version' of this widget will have to clean up that mess.
- var cd = (e.browserEvent.clipboardData || window.clipboardData);
-
- // check what type of paste - if it's an image, then handle it differently.
- if (cd.files && cd.files.length > 0 && cd.types.indexOf('text/html') < 0) {
- // pasting images?
- var urlAPI = (window.createObjectURL && window) ||
- (window.URL && URL.revokeObjectURL && URL) ||
- (window.webkitURL && webkitURL);
-
- var r = new FileReader();
- var t = this;
- r.addEventListener('load',function()
- {
-
- var d = (new DOMParser().parseFromString('<img src="' + r.result+ '">', 'text/html')).body;
- // is insert asycn?
- if (t.enableBlocks) {
-
- Array.from(d.getElementsByTagName('img')).forEach(function(img) {
- if (img.closest('figure')) { // assume!! that it's aready
- return;
- }
- var fig = new Roo.htmleditor.BlockFigure({
- image_src : img.src
- });
- fig.updateElement(img); // replace it..
-
- });
- }
- t.insertAtCursor(d.innerHTML.replace(/ /g,' '));
- t.owner.fireEvent('paste', this);
- });
- r.readAsDataURL(cd.files[0]);
-
- e.preventDefault();
-
- return false;
- }
- if (cd.types.indexOf('text/html') < 0 ) {
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
return false;
}
- var images = [];
- var html = cd.getData('text/html'); // clipboard event
- if (cd.types.indexOf('text/rtf') > -1) {
- var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
- images = parser.doc ? parser.doc.getElementsByType('pict') : [];
- }
- // Roo.log(images);
- // Roo.log(imgs);
- // fixme..
- images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
- .map(function(g) { return g.toDataURL(); })
- .filter(function(g) { return g != 'about:blank'; });
-
- //Roo.log(html);
- html = this.cleanWordChars(html);
-
- var d = (new DOMParser().parseFromString(html, 'text/html')).body;
-
- var sn = this.getParentElement();
- // check if d contains a table, and prevent nesting??
- //Roo.log(d.getElementsByTagName('table'));
- //Roo.log(sn);
- //Roo.log(sn.closest('table'));
- if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
- e.preventDefault();
- this.insertAtCursor("You can not nest tables");
- //Roo.log("prevent?"); // fixme -
+ // deal with <li> insetion
+ if (pli.innerText.trim() == '' &&
+ pli.previousSibling &&
+ pli.previousSibling.nodeName == 'LI' &&
+ pli.previousSibling.innerText.trim() == '') {
+ pli.parentNode.removeChild(pli.previousSibling);
+ sel.cursorAfter(pc);
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
return false;
}
-
-
-
- if (images.length > 0) {
- // replace all v:imagedata - with img.
- var ar = Array.from(d.getElementsByTagName('v:imagedata'));
- Roo.each(ar, function(node) {
- node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
- node.parentNode.removeChild(node);
- });
-
-
- Roo.each(d.getElementsByTagName('img'), function(img, i) {
- img.setAttribute('src', images[i]);
- });
- }
- if (this.autoClean) {
- new Roo.htmleditor.FilterWord({ node : d });
-
- new Roo.htmleditor.FilterStyleToTag({ node : d });
- new Roo.htmleditor.FilterAttributes({
- node : d,
- attrib_white : [
- 'href',
- 'src',
- 'name',
- 'align',
- 'colspan',
- 'rowspan'
- /* THESE ARE NOT ALLWOED FOR PASTE
- * 'data-display',
- 'data-caption-display',
- 'data-width',
- 'data-caption',
- 'start' ,
- 'style',
- // youtube embed.
- 'class',
- 'allowfullscreen',
- 'frameborder',
- 'width',
- 'height',
- 'alt'
- */
- ],
- attrib_clean : ['href', 'src' ]
- });
- new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
- // should be fonts..
- new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
- new Roo.htmleditor.FilterParagraph({ node : d });
- new Roo.htmleditor.FilterHashLink({node : d});
- new Roo.htmleditor.FilterSpan({ node : d });
- new Roo.htmleditor.FilterLongBr({ node : d });
- new Roo.htmleditor.FilterComment({ node : d });
-
-
- }
- if (this.enableBlocks) {
-
- Array.from(d.getElementsByTagName('img')).forEach(function(img) {
- if (img.closest('figure')) { // assume!! that it's aready
- return;
- }
- var fig = new Roo.htmleditor.BlockFigure({
- image_src : img.src
- });
- fig.updateElement(img); // replace it..
-
- });
- }
-
-
- this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
- if (this.enableBlocks) {
- Roo.htmleditor.Block.initAll(this.doc.body);
+
+ var li = doc.createElement('LI');
+ li.innerHTML = ' ';
+ if (!pli || !pli.firstSibling) {
+ pc.appendChild(li);
+ } else {
+ pli.parentNode.insertBefore(li, pli.firstSibling);
}
-
-
- e.preventDefault();
- this.owner.fireEvent('paste', this);
+ sel.cursorText (li.firstChild);
+
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+
return false;
- // default behaveiour should be our local cleanup paste? (optional?)
- // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
- //this.owner.fireEvent('paste', e, v);
- },
- // private
- onDestroy : function(){
-
+
- if(this.rendered){
-
- //for (var i =0; i < this.toolbars.length;i++) {
- // // fixme - ask toolbars for heights?
- // this.toolbars[i].onDestroy();
- // }
-
- //this.wrap.dom.innerHTML = '';
- //this.wrap.remove();
- }
- },
-
- // private
- onFirstFocus : function(){
-
- this.assignDocWin();
- this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
- this.activated = true;
-
- if(Roo.isGecko){ // prevent silly gecko errors
- this.win.focus();
- var s = this.win.getSelection();
- if(!s.focusNode || s.focusNode.nodeType != 3){
- var r = s.getRangeAt(0);
- r.selectNodeContents((this.doc.body || this.doc.documentElement));
- r.collapse(true);
- this.deferFocus();
- }
- try{
- this.execCmd('useCSS', true);
- this.execCmd('styleWithCSS', false);
- }catch(e){}
- }
- this.owner.fireEvent('activate', this);
- },
+ }
+};
+
+/**
+ * @class Roo.htmleditor.Block
+ * Base class for html editor blocks - do not use it directly .. extend it..
+ * @cfg {DomElement} node The node to apply stuff to.
+ * @cfg {String} friendly_name the name that appears in the context bar about this block
+ * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
+
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
- // private
- adjustFont: function(btn){
- var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
- //if(Roo.isSafari){ // safari
- // adjust *= 2;
- // }
- var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
- if(Roo.isSafari){ // safari
- var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
- v = (v < 10) ? 10 : v;
- v = (v > 48) ? 48 : v;
- v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
-
- }
-
-
- v = Math.max(1, v+adjust);
-
- this.execCmd('FontSize', v );
- },
+Roo.htmleditor.Block = function(cfg)
+{
+ // do nothing .. should not be called really.
+}
+/**
+ * factory method to get the block from an element (using cache if necessary)
+ * @static
+ * @param {HtmlElement} the dom element
+ */
+Roo.htmleditor.Block.factory = function(node)
+{
+ var cc = Roo.htmleditor.Block.cache;
+ var id = Roo.get(node).id;
+ if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
+ Roo.htmleditor.Block.cache[id].readElement(node);
+ return Roo.htmleditor.Block.cache[id];
+ }
+ var db = node.getAttribute('data-block');
+ if (!db) {
+ db = node.nodeName.toLowerCase().toUpperCaseFirst();
+ }
+ var cls = Roo.htmleditor['Block' + db];
+ if (typeof(cls) == 'undefined') {
+ //Roo.log(node.getAttribute('data-block'));
+ Roo.log("OOps missing block : " + 'Block' + db);
+ return false;
+ }
+ Roo.htmleditor.Block.cache[id] = new cls({ node: node });
+ return Roo.htmleditor.Block.cache[id]; /// should trigger update element
+};
- onEditorEvent : function(e)
- {
-
-
- if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
- return; // we do not handle this.. (undo manager does..)
- }
- // clicking a 'block'?
-
- // in theory this detects if the last element is not a br, then we try and do that.
- // its so clicking in space at bottom triggers adding a br and moving the cursor.
- if (e &&
- e.target.nodeName == 'BODY' &&
- e.type == "mouseup" &&
- this.doc.body.lastChild
- ) {
- var lc = this.doc.body.lastChild;
- // gtx-trans is google translate plugin adding crap.
- while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
- lc = lc.previousSibling;
- }
- if (lc.nodeType == 1 && lc.nodeName != 'BR') {
- // if last element is <BR> - then dont do anything.
-
- var ns = this.doc.createElement('br');
- this.doc.body.appendChild(ns);
- range = this.doc.createRange();
- range.setStartAfter(ns);
- range.collapse(true);
- var sel = this.win.getSelection();
- sel.removeAllRanges();
- sel.addRange(range);
- }
- }
-
-
-
- this.fireEditorEvent(e);
- // this.updateToolbar();
- this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
- },
-
- fireEditorEvent: function(e)
- {
- this.owner.fireEvent('editorevent', this, e);
- },
+/**
+ * initalize all Elements from content that are 'blockable'
+ * @static
+ * @param the body element
+ */
+Roo.htmleditor.Block.initAll = function(body, type)
+{
+ if (typeof(type) == 'undefined') {
+ var ia = Roo.htmleditor.Block.initAll;
+ ia(body,'table');
+ ia(body,'td');
+ ia(body,'figure');
+ return;
+ }
+ Roo.each(Roo.get(body).query(type), function(e) {
+ Roo.htmleditor.Block.factory(e);
+ },this);
+};
+// question goes here... do we need to clear out this cache sometimes?
+// or show we make it relivant to the htmleditor.
+Roo.htmleditor.Block.cache = {};
- insertTag : function(tg)
+Roo.htmleditor.Block.prototype = {
+
+ node : false,
+
+ // used by context menu
+ friendly_name : 'Based Block',
+
+ // text for button to delete this element
+ deleteTitle : false,
+
+ context : false,
+ /**
+ * Update a node with values from this object
+ * @param {DomElement} node
+ */
+ updateElement : function(node)
{
- // could be a bit smarter... -> wrap the current selected tRoo..
- if (tg.toLowerCase() == 'span' ||
- tg.toLowerCase() == 'code' ||
- tg.toLowerCase() == 'sup' ||
- tg.toLowerCase() == 'sub'
- ) {
-
- range = this.createRange(this.getSelection());
- var wrappingNode = this.doc.createElement(tg.toLowerCase());
- wrappingNode.appendChild(range.extractContents());
- range.insertNode(wrappingNode);
-
- return;
-
-
-
- }
- this.execCmd("formatblock", tg);
- this.undoManager.addEvent();
+ Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
},
-
- insertText : function(txt)
+ /**
+ * convert to plain HTML for calling insertAtCursor..
+ */
+ toHTML : function()
{
-
-
- var range = this.createRange();
- range.deleteContents();
- //alert(Sender.getAttribute('label'));
-
- range.insertNode(this.doc.createTextNode(txt));
- this.undoManager.addEvent();
- } ,
-
-
-
+ return Roo.DomHelper.markup(this.toObject());
+ },
/**
- * Executes a Midas editor command on the editor document and performs necessary focus and
- * toolbar updates. <b>This should only be called after the editor is initialized.</b>
- * @param {String} cmd The Midas command
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ * used by readEleemnt to extract data from a node
+ * may need improving as it's pretty basic
+
+ * @param {DomElement} node
+ * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
+ * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
+ * @param {String} style the style property - eg. text-align
*/
- relayCmd : function(cmd, value)
+ getVal : function(node, tag, attr, style)
{
-
- switch (cmd) {
- case 'justifyleft':
- case 'justifyright':
- case 'justifycenter':
- // if we are in a cell, then we will adjust the
- var n = this.getParentElement();
- var td = n.closest('td');
- if (td) {
- var bl = Roo.htmleditor.Block.factory(td);
- bl.textAlign = cmd.replace('justify','');
- bl.updateElement();
- this.owner.fireEvent('editorevent', this);
- return;
- }
- this.execCmd('styleWithCSS', true); //
- break;
- case 'bold':
- case 'italic':
- case 'underline':
- // if there is no selection, then we insert, and set the curson inside it..
- this.execCmd('styleWithCSS', false);
- break;
-
-
- default:
- break;
+ var n = node;
+ if (tag !== true && n.tagName != tag.toUpperCase()) {
+ // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+ // but kiss for now.
+ n = node.getElementsByTagName(tag).item(0);
+ }
+ if (!n) {
+ return '';
+ }
+ if (attr === false) {
+ return n;
+ }
+ if (attr == 'html') {
+ return n.innerHTML;
+ }
+ if (attr == 'style') {
+ return n.style[style];
}
-
- this.win.focus();
- this.execCmd(cmd, value);
- this.owner.fireEvent('editorevent', this);
- //this.updateToolbar();
- this.owner.deferFocus();
+ return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
+
},
-
/**
- * Executes a Midas editor command directly on the editor document.
- * For visual commands, you should use {@link #relayCmd} instead.
- * <b>This should only be called after the editor is initialized.</b>
- * @param {String} cmd The Midas command
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * (override this)
*/
- execCmd : function(cmd, value){
- this.doc.execCommand(cmd, false, value === undefined ? null : value);
- this.syncValue();
+ toObject : function()
+ {
+ return {};
},
+ /**
+ * Read a node that has a 'data-block' property - and extract the values from it.
+ * @param {DomElement} node - the node
+ */
+ readElement : function(node)
+ {
+
+ }
+
+
+};
+
+
+/**
+ * @class Roo.htmleditor.BlockFigure
+ * Block that has an image and a figcaption
+ * @cfg {String} image_src the url for the image
+ * @cfg {String} align (left|right) alignment for the block default left
+ * @cfg {String} caption the text to appear below (and in the alt tag)
+ * @cfg {String} caption_display (block|none) display or not the caption
+ * @cfg {String|number} image_width the width of the image number or %?
+ * @cfg {String|number} image_height the height of the image number or %?
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+}
+Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
-
- /**
- * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
- * to insert tRoo.
- * @param {String} text | dom node..
- */
- insertAtCursor : function(text)
+
+ // setable values.
+ image_src: '',
+ align: 'center',
+ caption : '',
+ caption_display : 'block',
+ width : '100%',
+ cls : '',
+ href: '',
+ video_url : '',
+
+ // margin: '2%', not used
+
+ text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
+
+
+ // used by context menu
+ friendly_name : 'Image with caption',
+ deleteTitle : "Delete Image and Caption",
+
+ contextMenu : function(toolbar)
{
- if(!this.activated){
- return;
- }
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Source: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'Button',
+ text: 'Change Image URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Image Source URL",
+ msg : "Enter the url for the image",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.image_src = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.image_src
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
- if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
- this.win.focus();
-
-
- // from jquery ui (MIT licenced)
- var range, node;
- var win = this.win;
-
- if (win.getSelection && win.getSelection().getRangeAt) {
-
- // delete the existing?
-
- this.createRange(this.getSelection()).deleteContents();
- range = win.getSelection().getRangeAt(0);
- node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
- range.insertNode(node);
- range = range.cloneRange();
- range.collapse(false);
+ {
+ xtype : 'Button',
+ text: 'Change Link URL',
- win.getSelection().removeAllRanges();
- win.getSelection().addRange(range);
-
-
-
- } else if (win.document.selection && win.document.selection.createRange) {
- // no firefox support
- var txt = typeof(text) == 'string' ? text : text.outerHTML;
- win.document.selection.createRange().pasteHTML(txt);
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Link URL",
+ msg : "Enter the url for the link - leave blank to have no link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.href = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.href
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: 'Show Video URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ Roo.MessageBox.alert("Video URL",
+ block().video_url == '' ? 'This image is not linked ot a video' :
+ 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
+ }
+ },
+ xns : rooui.Toolbar
+ },
- } else {
- // no firefox support
- var txt = typeof(text) == 'string' ? text : text.outerHTML;
- this.execCmd('InsertHTML', txt);
- }
- this.syncValue();
- this.deferFocus();
- }
- },
- // private
- mozKeyPress : function(e){
- if(e.ctrlKey){
- var c = e.getCharCode(), cmd;
-
- if(c > 0){
- c = String.fromCharCode(c).toLowerCase();
- switch(c){
- case 'b':
- cmd = 'bold';
- break;
- case 'i':
- cmd = 'italic';
- break;
-
- case 'u':
- cmd = 'underline';
- break;
-
- //case 'v':
- // this.cleanUpPaste.defer(100, this);
- // return;
-
- }
- if(cmd){
-
- this.relayCmd(cmd);
- //this.win.focus();
- //this.execCmd(cmd);
- //this.deferFocus();
- e.preventDefault();
- }
-
- }
- }
- },
-
- // private
- fixKeys : function(){ // load time branching for fastest keydown performance
-
-
- if(Roo.isIE){
- return function(e){
- var k = e.getKey(), r;
- if(k == e.TAB){
- e.stopEvent();
- r = this.doc.selection.createRange();
- if(r){
- r.collapse(true);
- r.pasteHTML('    ');
- this.deferFocus();
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
}
- return;
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['80%'],
+ ['50%'],
+ ['20%'],
+ ['10%']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
}
- /// this is handled by Roo.htmleditor.KeyEnter
- /*
- if(k == e.ENTER){
- r = this.doc.selection.createRange();
- if(r){
- var target = r.parentElement();
- if(!target || target.tagName.toLowerCase() != 'li'){
- e.stopEvent();
- r.pasteHTML('<br/>');
- r.collapse(false);
- r.select();
- }
+ },
+ {
+ xtype : 'TextItem',
+ text : "Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'align',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.align = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
}
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['left'],
+ ['right'],
+ ['center']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
}
- */
- //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- // this.cleanUpPaste.defer(100, this);
- // return;
- //}
-
-
- };
- }else if(Roo.isOpera){
- return function(e){
- var k = e.getKey();
- if(k == e.TAB){
- e.stopEvent();
- this.win.focus();
- this.execCmd('InsertHTML','    ');
- this.deferFocus();
- }
-
- //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- // this.cleanUpPaste.defer(100, this);
- // return;
- //}
-
- };
- }else if(Roo.isSafari){
- return function(e){
- var k = e.getKey();
-
- if(k == e.TAB){
- e.stopEvent();
- this.execCmd('InsertText','\t');
- this.deferFocus();
- return;
- }
- this.mozKeyPress(e);
-
- //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- // this.cleanUpPaste.defer(100, this);
- // return;
- // }
-
- };
- }
- }(),
-
- getAllAncestors: function()
- {
- var p = this.getSelectedNode();
- var a = [];
- if (!p) {
- a.push(p); // push blank onto stack..
- p = this.getParentElement();
- }
-
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Hide Caption',
+ name : 'caption_display',
+ pressed : false,
+ enableToggle : true,
+ setValue : function(v) {
+ // this trigger toggle.
+
+ this.setText(v ? "Hide Caption" : "Show Caption");
+ this.setPressed(v != 'block');
+ },
+ listeners : {
+ toggle: function (btn, state)
+ {
+ var b = block();
+ b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
+ this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+ ];
- while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
- a.push(p);
- p = p.parentNode;
- }
- a.push(this.doc.body);
- return a;
- },
- lastSel : false,
- lastSelNode : false,
-
-
- getSelection : function()
- {
- this.assignDocWin();
- return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
},
/**
- * Select a dom node
- * @param {DomElement} node the node to select
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
*/
- selectNode : function(node, collapse)
- {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
- }
- if (collapse === true) {
- nodeRange.collapse(true);
- }
- //
- var s = this.win.getSelection();
- s.removeAllRanges();
- s.addRange(nodeRange);
- },
-
- getSelectedNode: function()
+ toObject : function()
{
- // this may only work on Gecko!!!
-
- // should we cache this!!!!
+ var d = document.createElement('div');
+ d.innerHTML = this.caption;
-
-
- var range = this.createRange(this.getSelection()).cloneRange();
+ var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0;
- if (Roo.isIE) {
- var parent = range.parentElement();
- while (true) {
- var testRange = range.duplicate();
- testRange.moveToElementText(parent);
- if (testRange.inRange(range)) {
- break;
- }
- if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
- break;
- }
- parent = parent.parentElement;
+ var iw = this.align == 'center' ? this.width : '100%';
+ var img = {
+ tag : 'img',
+ contenteditable : 'false',
+ src : this.image_src,
+ alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
+ style: {
+ width : iw,
+ maxWidth : iw + ' !important', // this is not getting rendered?
+ margin : m
+
}
- return parent;
+ };
+ /*
+ '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
+ '<a href="{2}">' +
+ '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
+ '</a>' +
+ '</div>',
+ */
+
+ if (this.href.length > 0) {
+ img = {
+ tag : 'a',
+ href: this.href,
+ contenteditable : 'true',
+ cn : [
+ img
+ ]
+ };
}
- // is ancestor a text element.
- var ac = range.commonAncestorContainer;
- if (ac.nodeType == 3) {
- ac = ac.parentNode;
- }
- var ar = ac.childNodes;
-
- var nodes = [];
- var other_nodes = [];
- var has_other_nodes = false;
- for (var i=0;i<ar.length;i++) {
- if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
- continue;
- }
- // fullly contained node.
-
- if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
- nodes.push(ar[i]);
- continue;
- }
-
- // probably selected..
- if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
- other_nodes.push(ar[i]);
- continue;
- }
- // outer..
- if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
- continue;
- }
+ if (this.video_url.length > 0) {
+ img = {
+ tag : 'div',
+ cls : this.cls,
+ frameborder : 0,
+ allowfullscreen : true,
+ width : 420, // these are for video tricks - that we replace the outer
+ height : 315,
+ src : this.video_url,
+ cn : [
+ img
+ ]
+ };
+ }
+
+
+
+ var ret = {
+ tag: 'figure',
+ 'data-block' : 'Figure',
+ 'data-width' : this.width,
+ 'data-caption' : this.caption,
+ 'data-caption-display' : this.caption_display,
+ contenteditable : 'false',
+ style : {
+ display: 'block',
+ float : this.align ,
+ maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'),
+ width : this.align == 'center' ? '100%' : this.width,
+ margin: '0px',
+ padding: this.align == 'center' ? '0' : '0 10px' ,
+ textAlign : this.align // seems to work for email..
+
+ },
- has_other_nodes = true;
- }
- if (!nodes.length && other_nodes.length) {
- nodes= other_nodes;
- }
- if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
- return false;
+ align : this.align,
+ cn : [
+ img
+ ]
+ };
+
+ // show figcaption only if caption_display is 'block'
+ if(this.caption_display == 'block') {
+ ret['cn'].push({
+ tag: 'figcaption',
+ style : {
+ textAlign : 'left',
+ fontSize : '16px',
+ lineHeight : '24px',
+ display : this.caption_display,
+ maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important',
+ margin: m,
+ width: this.align == 'center' ? this.width : '100%'
+
+
+ },
+ cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
+ cn : [
+ {
+ tag: 'div',
+ style : {
+ marginTop : '16px',
+ textAlign : 'start'
+ },
+ align: 'left',
+ cn : [
+ {
+ // we can not rely on yahoo syndication to use CSS elements - so have to use '<i>' to encase stuff.
+ tag : 'i',
+ contenteditable : Roo.htmleditor.BlockFigure.caption_edit,
+ html : this.caption.length ? this.caption : "Caption" // fake caption
+ }
+
+ ]
+ }
+
+ ]
+
+ });
}
-
- return nodes[0];
+ return ret;
+
},
-
- createRange: function(sel)
- {
- // this has strange effects when using with
- // top toolbar - not sure if it's a great idea.
- //this.editor.contentWindow.focus();
- if (typeof sel != "undefined") {
- try {
- return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
- } catch(e) {
- return this.doc.createRange();
- }
- } else {
- return this.doc.createRange();
- }
- },
- getParentElement: function()
+ readElement : function(node)
{
+ // this should not really come from the link...
+ this.video_url = this.getVal(node, 'div', 'src');
+ this.cls = this.getVal(node, 'div', 'class');
+ this.href = this.getVal(node, 'a', 'href');
- this.assignDocWin();
- var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
- var range = this.createRange(sel);
+ this.image_src = this.getVal(node, 'img', 'src');
- try {
- var p = range.commonAncestorContainer;
- while (p.nodeType == 3) { // text node
- p = p.parentNode;
- }
- return p;
- } catch (e) {
- return null;
+ this.align = this.getVal(node, 'figure', 'align');
+
+ // caption display is stored in figure
+ this.caption_display = this.getVal(node, true, 'data-caption-display');
+
+ // backward compatible
+ // it was stored in figcaption
+ if(this.caption_display == '') {
+ this.caption_display = this.getVal(node, 'figcaption', 'data-display');
}
-
+
+ // read caption from figcaption
+ var figcaption = this.getVal(node, 'figcaption', false);
+
+ if (figcaption !== '') {
+ this.caption = this.getVal(figcaption, 'i', 'html');
+ }
+
+
+ // read caption from data-caption in figure if no caption from figcaption
+ var dc = this.getVal(node, true, 'data-caption');
+
+ if(this.caption_display == 'none' && dc && dc.length){
+ this.caption = dc;
+ }
+
+ //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+ this.width = this.getVal(node, true, 'data-width');
+ //this.margin = this.getVal(node, 'figure', 'style', 'margin');
+
},
- /***
- *
- * Range intersection.. the hard stuff...
- * '-1' = before
- * '0' = hits..
- * '1' = after.
- * [ -- selected range --- ]
- * [fail] [fail]
- *
- * basically..
- * if end is before start or hits it. fail.
- * if start is after end or hits it fail.
- *
- * if either hits (but other is outside. - then it's not
- *
- *
- **/
+ removeNode : function()
+ {
+ return this.node;
+ }
+
+
+
- // @see http://www.thismuchiknow.co.uk/?p=64.
- rangeIntersectsNode : function(range, node)
- {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
+
+
+
+});
+
+Roo.apply(Roo.htmleditor.BlockFigure, {
+ caption_edit : true
+});
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+ if (!cfg.node) {
+ this.rows = [];
+ for(var r = 0; r < this.no_row; r++) {
+ this.rows[r] = [];
+ for(var c = 0; c < this.no_col; c++) {
+ this.rows[r][c] = this.emptyCell();
+ }
}
+ }
- var rangeStartRange = range.cloneRange();
- rangeStartRange.collapse(true);
- var rangeEndRange = range.cloneRange();
- rangeEndRange.collapse(false);
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+
+ rows : false,
+ no_col : 1,
+ no_row : 1,
- var nodeStartRange = nodeRange.cloneRange();
- nodeStartRange.collapse(true);
- var nodeEndRange = nodeRange.cloneRange();
- nodeEndRange.collapse(false);
+ width: '100%',
- return rangeStartRange.compareBoundaryPoints(
- Range.START_TO_START, nodeEndRange) == -1 &&
- rangeEndRange.compareBoundaryPoints(
- Range.START_TO_START, nodeStartRange) == 1;
-
-
- },
- rangeCompareNode : function(range, node)
+ // used by context menu
+ friendly_name : 'Table',
+ deleteTitle : 'Delete Table',
+ // context menu is drawn once..
+
+ contextMenu : function(toolbar)
{
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
- }
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
- range.collapse(true);
-
- nodeRange.collapse(true);
-
- var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
- var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
-
- //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
- var nodeIsBefore = ss == 1;
- var nodeIsAfter = ee == -1;
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- if (nodeIsBefore && nodeIsAfter) {
- return 0; // outer
- }
- if (!nodeIsBefore && nodeIsAfter) {
- return 1; //right trailed.
- }
+ var syncValue = toolbar.editorcore.syncValue;
- if (nodeIsBefore && !nodeIsAfter) {
- return 2; // left trailed.
- }
- // fully contined.
- return 3;
- },
-
- cleanWordChars : function(input) {// change the chars to hex code
+ var fields = {};
- var swapCodes = [
- [ 8211, "–" ],
- [ 8212, "—" ],
- [ 8216, "'" ],
- [ 8217, "'" ],
- [ 8220, '"' ],
- [ 8221, '"' ],
- [ 8226, "*" ],
- [ 8230, "..." ]
- ];
- var output = input;
- Roo.each(swapCodes, function(sw) {
- var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['auto']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+ // -------- Cols
- output = output.replace(swapper, sw[1]);
- });
-
- return output;
- },
-
-
-
-
-
- cleanUpChild : function (node)
- {
-
- new Roo.htmleditor.FilterComment({node : node});
- new Roo.htmleditor.FilterAttributes({
- node : node,
- attrib_black : this.ablack,
- attrib_clean : this.aclean,
- style_white : this.cwhite,
- style_black : this.cblack
- });
- new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
- new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+ {
+ xtype : 'TextItem',
+ text : "Columns: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().addColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'TextItem',
+ text : "Rows: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ block().addRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'Button',
+ text: 'Reset Column Widths',
+ listeners : {
+
+ click : function (_self, e)
+ {
+ block().resetWidths();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+
+
+
+ ];
},
- /**
- * Clean up MS wordisms...
- * @deprecated - use filter directly
- */
- cleanWord : function(node)
- {
- new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
- new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
-
- },
-
- /**
-
- * @deprecated - use filters
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
*/
- cleanTableWidths : function(node)
- {
- new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
-
-
- },
-
-
-
- applyBlacklists : function()
+ toObject : function()
{
- var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
- var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
- this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean : Roo.HtmlEditorCore.aclean;
- this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack : Roo.HtmlEditorCore.ablack;
- this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove : Roo.HtmlEditorCore.tag_remove;
-
- this.white = [];
- this.black = [];
- Roo.each(Roo.HtmlEditorCore.white, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- this.white.push(tag);
-
- }, this);
+ var ret = {
+ tag : 'table',
+ contenteditable : 'false', // this stops cell selection from picking the table.
+ 'data-block' : 'Table',
+ style : {
+ width: this.width,
+ border : 'solid 1px #000', // ??? hard coded?
+ 'border-collapse' : 'collapse'
+ },
+ cn : [
+ { tag : 'tbody' , cn : [] }
+ ]
+ };
- Roo.each(w, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- if (this.white.indexOf(tag) > -1) {
- return;
- }
- this.white.push(tag);
+ // do we have a head = not really
+ var ncols = 0;
+ Roo.each(this.rows, function( row ) {
+ var tr = {
+ tag: 'tr',
+ style : {
+ margin: '6px',
+ border : 'solid 1px #000',
+ textAlign : 'left'
+ },
+ cn : [ ]
+ };
- }, this);
-
-
- Roo.each(Roo.HtmlEditorCore.black, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- this.black.push(tag);
+ ret.cn[0].cn.push(tr);
+ // does the row have any properties? ?? height?
+ var nc = 0;
+ Roo.each(row, function( cell ) {
+
+ var td = {
+ tag : 'td',
+ contenteditable : 'true',
+ 'data-block' : 'Td',
+ html : cell.html,
+ style : cell.style
+ };
+ if (cell.colspan > 1) {
+ td.colspan = cell.colspan ;
+ nc += cell.colspan;
+ } else {
+ nc++;
+ }
+ if (cell.rowspan > 1) {
+ td.rowspan = cell.rowspan ;
+ }
+
+
+ // widths ?
+ tr.cn.push(td);
+
+
+ }, this);
+ ncols = Math.max(nc, ncols);
- }, this);
-
- Roo.each(b, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- if (this.black.indexOf(tag) > -1) {
- return;
- }
- this.black.push(tag);
}, this);
+ // add the header row..
+ ncols++;
+
- w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
- b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
+ return ret;
+
+ },
+
+ readElement : function(node)
+ {
+ node = node ? node : this.node ;
+ this.width = this.getVal(node, true, 'style', 'width') || '100%';
- this.cwhite = [];
- this.cblack = [];
- Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- this.cwhite.push(tag);
+ this.rows = [];
+ this.no_row = 0;
+ var trs = Array.from(node.rows);
+ trs.forEach(function(tr) {
+ var row = [];
+ this.rows.push(row);
- }, this);
-
- Roo.each(w, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- if (this.cwhite.indexOf(tag) > -1) {
- return;
- }
- this.cwhite.push(tag);
+ this.no_row++;
+ var no_column = 0;
+ Array.from(tr.cells).forEach(function(td) {
+
+ var add = {
+ colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+ rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
+ style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+ html : td.innerHTML
+ };
+ no_column += add.colspan;
+
+
+ row.push(add);
+
+
+ },this);
+ this.no_col = Math.max(this.no_col, no_column);
- }, this);
+
+ },this);
- Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- this.cblack.push(tag);
-
+ },
+ normalizeRows: function()
+ {
+ var ret= [];
+ var rid = -1;
+ this.rows.forEach(function(row) {
+ rid++;
+ ret[rid] = [];
+ row = this.normalizeRow(row);
+ var cid = 0;
+ row.forEach(function(c) {
+ while (typeof(ret[rid][cid]) != 'undefined') {
+ cid++;
+ }
+ if (typeof(ret[rid]) == 'undefined') {
+ ret[rid] = [];
+ }
+ ret[rid][cid] = c;
+ c.row = rid;
+ c.col = cid;
+ if (c.rowspan < 2) {
+ return;
+ }
+
+ for(var i = 1 ;i < c.rowspan; i++) {
+ if (typeof(ret[rid+i]) == 'undefined') {
+ ret[rid+i] = [];
+ }
+ ret[rid+i][cid] = c;
+ }
+ });
}, this);
-
- Roo.each(b, function(tag) {
- if (w.indexOf(tag) > -1) {
+ return ret;
+
+ },
+
+ normalizeRow: function(row)
+ {
+ var ret= [];
+ row.forEach(function(c) {
+ if (c.colspan < 2) {
+ ret.push(c);
return;
}
- if (this.cblack.indexOf(tag) > -1) {
- return;
+ for(var i =0 ;i < c.colspan; i++) {
+ ret.push(c);
}
- this.cblack.push(tag);
-
- }, this);
+ });
+ return ret;
+
},
- setStylesheets : function(stylesheets)
+ deleteColumn : function(sel)
{
- if(typeof(stylesheets) == 'string'){
- Roo.get(this.iframe.contentDocument.head).createChild({
- tag : 'link',
- rel : 'stylesheet',
- type : 'text/css',
- href : stylesheets
- });
-
+ if (!sel || sel.type != 'col') {
return;
}
- var _this = this;
-
- Roo.each(stylesheets, function(s) {
- if(!s.length){
- return;
+ if (this.no_col < 2) {
+ return;
+ }
+
+ this.rows.forEach(function(row) {
+ var cols = this.normalizeRow(row);
+ var col = cols[sel.col];
+ if (col.colspan > 1) {
+ col.colspan --;
+ } else {
+ row.remove(col);
}
- Roo.get(_this.iframe.contentDocument.head).createChild({
- tag : 'link',
- rel : 'stylesheet',
- type : 'text/css',
- href : s
- });
- });
-
+ }, this);
+ this.no_col--;
},
-
-
- updateLanguage : function()
+ removeColumn : function()
{
- if (!this.iframe || !this.iframe.contentDocument) {
- return;
- }
- Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
+ this.deleteColumn({
+ type: 'col',
+ col : this.no_col-1
+ });
+ this.updateElement();
},
-
- removeStylesheets : function()
+
+ addColumn : function()
{
- var _this = this;
- Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
- s.remove();
- });
+ this.rows.forEach(function(row) {
+ row.push(this.emptyCell());
+
+ }, this);
+ this.updateElement();
},
- setStyle : function(style)
+ deleteRow : function(sel)
{
- Roo.get(this.iframe.contentDocument.head).createChild({
- tag : 'style',
- type : 'text/css',
- html : style
- });
-
- return;
- }
-
- // hide stuff that is not compatible
- /**
- * @event blur
- * @hide
- */
- /**
- * @event change
- * @hide
- */
- /**
- * @event focus
- * @hide
- */
- /**
- * @event specialkey
- * @hide
- */
- /**
- * @cfg {String} fieldClass @hide
- */
- /**
- * @cfg {String} focusClass @hide
- */
- /**
- * @cfg {String} autoCreate @hide
- */
- /**
- * @cfg {String} inputType @hide
- */
- /**
- * @cfg {String} invalidClass @hide
- */
- /**
- * @cfg {String} invalidText @hide
- */
- /**
- * @cfg {String} msgFx @hide
- */
- /**
- * @cfg {String} validateOnBlur @hide
- */
-});
-
-Roo.HtmlEditorCore.white = [
- 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
+ if (!sel || sel.type != 'row') {
+ return;
+ }
- 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV',
- 'DL', 'DT', 'H1', 'H2', 'H3', 'H4',
- 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE',
- 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE',
- 'TABLE', 'UL', 'XMP',
-
- 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH',
- 'THEAD', 'TR',
-
- 'DIR', 'MENU', 'OL', 'UL', 'DL',
-
- 'EMBED', 'OBJECT'
-];
-
-
-Roo.HtmlEditorCore.black = [
- // 'embed', 'object', // enable - backend responsiblity to clean thiese
- 'APPLET', //
- 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY',
- 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER',
- 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT',
- 'SCRIPT', 'STYLE' ,'TITLE', 'XML',
- //'FONT' // CLEAN LATER..
- 'COLGROUP', 'COL' // messy tables.
+ if (this.no_row < 2) {
+ return;
+ }
+
+ var rows = this.normalizeRows();
-];
-Roo.HtmlEditorCore.clean = [ // ?? needed???
- 'SCRIPT', 'STYLE', 'TITLE', 'XML'
-];
-Roo.HtmlEditorCore.tag_remove = [
- 'FONT', 'TBODY'
-];
-// attributes..
-
-Roo.HtmlEditorCore.ablack = [
- 'on'
-];
-
-Roo.HtmlEditorCore.aclean = [
- 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
-];
-
-// protocols..
-Roo.HtmlEditorCore.pwhite= [
- 'http', 'https', 'mailto'
-];
-
-// white listed style attributes.
-Roo.HtmlEditorCore.cwhite= [
- // 'text-align', /// default is to allow most things..
-
-
-// 'font-size'//??
-];
-
-// black listed style attributes.
-Roo.HtmlEditorCore.cblack= [
- // 'font-size' -- this can be set by the project
-];
-
-
-
-
- //<script type="text/javascript">
-
-/*
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * Licence LGPL
- *
- */
-
-
-Roo.form.HtmlEditor = function(config){
+ rows[sel.row].forEach(function(col) {
+ if (col.rowspan > 1) {
+ col.rowspan--;
+ } else {
+ col.remove = 1; // flage it as removed.
+ }
+
+ }, this);
+ var newrows = [];
+ this.rows.forEach(function(row) {
+ newrow = [];
+ row.forEach(function(c) {
+ if (typeof(c.remove) == 'undefined') {
+ newrow.push(c);
+ }
+
+ });
+ if (newrow.length > 0) {
+ newrows.push(row);
+ }
+ });
+ this.rows = newrows;
+
+
+
+ this.no_row--;
+ this.updateElement();
+
+ },
+ removeRow : function()
+ {
+ this.deleteRow({
+ type: 'row',
+ row : this.no_row-1
+ });
+
+ },
+
+
+ addRow : function()
+ {
+
+ var row = [];
+ for (var i = 0; i < this.no_col; i++ ) {
+
+ row.push(this.emptyCell());
+
+ }
+ this.rows.push(row);
+ this.updateElement();
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return (new Roo.htmleditor.BlockTd({})).toObject();
+
+
+ },
+ removeNode : function()
+ {
+ return this.node;
+ },
- Roo.form.HtmlEditor.superclass.constructor.call(this, config);
- if (!this.toolbars) {
- this.toolbars = [];
+ resetWidths : function()
+ {
+ Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+ var nn = Roo.htmleditor.Block.factory(n);
+ nn.width = '';
+ nn.updateElement(n);
+ });
}
- this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
-};
+
+
+})
/**
- * @class Roo.form.HtmlEditor
- * @extends Roo.form.Field
- * Provides a lightweight HTML Editor component.
*
- * This has been tested on Fireforx / Chrome.. IE may not be so great..
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ * add/remove cols
+ * adjust the width +/-
+ * reset the width...
+ *
+ *
+ */
+
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
*
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
- * supported by this editor.</b><br/><br/>
- * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
*/
-Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
- /**
- * @cfg {Boolean} clearUp
- */
- clearUp : true,
- /**
- * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
- */
- toolbars : false,
-
- /**
- * @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,
-
- /**
- * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea rootURL + '/roojs1/css/undoreset.css', .
- *
- */
- stylesheets: false,
-
+
+Roo.htmleditor.BlockTd = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+
- /**
- * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
- *
- */
- cblack: false,
- /**
- * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
- *
- */
- cwhite: false,
- /**
- * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
- *
- */
- black: false,
- /**
- * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
- *
- */
- white: false,
- /**
- * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
- */
- allowComments: false,
- /**
- * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
- */
- enableBlocks : true,
+}
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
+
+ node : false,
- /**
- * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
- * if you are doing an email editor, this probably needs disabling, it's designed
- */
- autoClean: true,
- /**
- * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
- */
- bodyCls : '',
- /**
- * @cfg {String} language default en - language of text (usefull for rtl languages)
- *
- */
- language: 'en',
+ width: '',
+ textAlign : 'left',
+ valign : 'top',
-
- // id of frame..
- frameId: false,
+ colspan : 1,
+ rowspan : 1,
- // private properties
- validationEvent : false,
- deferHeight: true,
- initialized : false,
- activated : false,
- onFocus : Roo.emptyFn,
- iframePad:3,
- hideMode:'offsets',
+ // used by context menu
+ friendly_name : 'Table Cell',
+ deleteTitle : false, // use our customer delete
- actionMode : 'container', // defaults to hiding it...
+ // context menu is drawn once..
- defaultAutoCreate : { // modified by initCompnoent..
- tag: "textarea",
- style:"width:500px;height:300px;",
- autocomplete: "new-password"
- },
-
- // private
- initComponent : function(){
- this.addEvents({
- /**
- * @event initialize
- * Fires when the editor is fully initialized (including the iframe)
- * @param {HtmlEditor} this
- */
- initialize: true,
- /**
- * @event activate
- * Fires when the editor is first receives the focus. Any insertion must wait
- * until after this event.
- * @param {HtmlEditor} this
- */
- activate: true,
- /**
- * @event beforesync
- * Fires before the textarea is updated with content from the editor iframe. Return false
- * to cancel the sync.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- beforesync: true,
- /**
- * @event beforepush
- * Fires before the iframe editor is updated with content from the textarea. Return false
- * to cancel the push.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- beforepush: true,
- /**
- * @event sync
- * Fires when the textarea is updated with content from the editor iframe.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- sync: true,
- /**
- * @event push
- * Fires when the iframe editor is updated with content from the textarea.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- push: true,
- /**
- * @event editmodechange
- * Fires when the editor switches edit modes
- * @param {HtmlEditor} this
- * @param {Boolean} sourceEdit True if source edit, false if standard editing.
- */
- editmodechange: true,
- /**
- * @event editorevent
- * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
- * @param {HtmlEditor} this
- */
- editorevent: true,
- /**
- * @event firstfocus
- * Fires when on first focus - needed by toolbars..
- * @param {HtmlEditor} this
- */
- firstfocus: true,
- /**
- * @event autosave
- * Auto save the htmlEditor value as a file into Events
- * @param {HtmlEditor} this
- */
- autosave: true,
- /**
- * @event savedpreview
- * preview the saved version of htmlEditor
- * @param {HtmlEditor} this
- */
- savedpreview: true,
+ contextMenu : function(toolbar)
+ {
+
+ var cell = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+ var table = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+ };
+
+ var lr = false;
+ var saveSel = function()
+ {
+ lr = toolbar.editorcore.getSelection().getRangeAt(0);
+ }
+ var restoreSel = function()
+ {
+ if (lr) {
+ (function() {
+ toolbar.editorcore.focus();
+ var cr = toolbar.editorcore.getSelection();
+ cr.removeAllRanges();
+ cr.addRange(lr);
+ toolbar.editorcore.onEditorEvent();
+ }).defer(10, this);
+
+
+ }
+ }
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'Button',
+ text : 'Edit Table',
+ listeners : {
+ click : function() {
+ var t = toolbar.tb.selectedNode.closest('table');
+ toolbar.editorcore.selectNode(t);
+ toolbar.editorcore.onEditorEvent();
+ }
+ }
+
+ },
+
+
+
+ {
+ xtype : 'TextItem',
+ text : "Column Width: ",
+ xns : rooui.Toolbar
+
+ },
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().shrinkColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Vertical Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'valign',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = cell();
+ b.valign = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['top'],
+ ['middle'],
+ ['bottom'] // there are afew more...
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Merge Cells: ",
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Right',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeRight();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Below',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeBelow();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'TextItem',
+ text : "| ",
+ xns : rooui.Toolbar
+
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Split',
+ listeners : {
+ click : function (_self, e)
+ {
+ //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().split();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Fill',
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Delete',
+
+ xns : rooui.Toolbar,
+ menu : {
+ xtype : 'Menu',
+ xns : rooui.menu,
+ items : [
+ {
+ xtype : 'Item',
+ html: 'Column',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+
+ cell().deleteColumn();
+ syncValue();
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Row',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ cell().deleteRow();
+ syncValue();
+
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Separator',
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Table',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ var nn = t.node.nextSibling || t.node.previousSibling;
+ t.node.parentNode.removeChild(t.node);
+ if (nn) {
+ toolbar.editorcore.selectNode(nn, true);
+ }
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ }
+ ]
+ }
+ }
- /**
- * @event stylesheetsclick
- * Fires when press the Sytlesheets button
- * @param {Roo.HtmlEditorCore} this
- */
- stylesheetsclick: true,
- /**
- * @event paste
- * Fires when press user pastes into the editor
- * @param {Roo.HtmlEditorCore} this
- */
- paste: true
+ // align... << fixme
- });
- this.defaultAutoCreate = {
- tag: "textarea",
- style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
- autocomplete: "new-password"
- };
+ ];
+
},
-
- /**
- * Protected method that will not generally be called directly. It
- * is called when the editor creates its toolbar. Override this method if you need to
- * add custom toolbar buttons.
- * @param {HtmlEditor} editor
+
+
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
*/
- createToolbar : function(editor){
- Roo.log("create toolbars");
- if (!editor.toolbars || !editor.toolbars.length) {
- editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ toObject : function()
+ {
+ var ret = {
+ tag : 'td',
+ contenteditable : 'true', // this stops cell selection from picking the table.
+ 'data-block' : 'Td',
+ valign : this.valign,
+ style : {
+ 'text-align' : this.textAlign,
+ border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+ 'border-collapse' : 'collapse',
+ padding : '6px', // 8 for desktop / 4 for mobile
+ 'vertical-align': this.valign
+ },
+ html : this.html
+ };
+ if (this.width != '') {
+ ret.width = this.width;
+ ret.style.width = this.width;
}
- for (var i =0 ; i < editor.toolbars.length;i++) {
- editor.toolbars[i] = Roo.factory(
- typeof(editor.toolbars[i]) == 'string' ?
- { xtype: editor.toolbars[i]} : editor.toolbars[i],
- Roo.form.HtmlEditor);
- editor.toolbars[i].init(editor);
+
+ if (this.colspan > 1) {
+ ret.colspan = this.colspan ;
+ }
+ if (this.rowspan > 1) {
+ ret.rowspan = this.rowspan ;
}
-
+
+
+ return ret;
+
},
- /**
- * get the Context selected node
- * @returns {DomElement|boolean} selected node if active or false if none
- *
- */
- getSelectedNode : function()
+
+ readElement : function(node)
{
- if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
- return false;
+ node = node ? node : this.node ;
+ this.width = node.style.width;
+ this.colspan = Math.max(1,1*node.getAttribute('colspan'));
+ this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
+ this.html = node.innerHTML;
+ if (node.style.textAlign != '') {
+ this.textAlign = node.style.textAlign;
}
- return this.toolbars[1].tb.selectedNode;
+
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return {
+ colspan : 1,
+ rowspan : 1,
+ textAlign : 'left',
+ html : " " // is this going to be editable now?
+ };
+
+ },
+ removeNode : function()
+ {
+ return this.node.closest('table');
+
},
- // private
- onRender : function(ct, position)
+
+ cellData : false,
+
+ colWidths : false,
+
+ toTableArray : function()
{
- var _t = this;
- Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
-
- this.wrap = this.el.wrap({
- cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+ var ret = [];
+ var tab = this.node.closest('tr').closest('table');
+ Array.from(tab.rows).forEach(function(r, ri){
+ ret[ri] = [];
});
-
- this.editorcore.onRender(ct, position);
-
- 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.createToolbar(this);
-
-
- if(!this.width){
- this.setSize(this.wrap.getSize());
- }
- if (this.resizeEl) {
- this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
- // should trigger onReize..
- }
-
- this.keyNav = new Roo.KeyNav(this.el, {
-
- "tab" : function(e){
- e.preventDefault();
-
- var value = this.getValue();
-
- var start = this.el.dom.selectionStart;
- var end = this.el.dom.selectionEnd;
-
- if(!e.shiftKey){
-
- this.setValue(value.substring(0, start) + "\t" + value.substring(end));
- this.el.dom.setSelectionRange(end + 1, end + 1);
- return;
- }
-
- var f = value.substring(0, start).split("\t");
-
- if(f.pop().length != 0){
- return;
- }
-
- this.setValue(f.join("\t") + value.substring(end));
- this.el.dom.setSelectionRange(start - 1, start - 1);
-
- },
+ var rn = 0;
+ this.colWidths = [];
+ var all_auto = true;
+ Array.from(tab.rows).forEach(function(r, ri){
- "home" : function(e){
- e.preventDefault();
-
- var curr = this.el.dom.selectionStart;
- var lines = this.getValue().split("\n");
-
- if(!lines.length){
- return;
- }
-
- if(e.ctrlKey){
- this.el.dom.setSelectionRange(0, 0);
- return;
+ var cn = 0;
+ Array.from(r.cells).forEach(function(ce, ci){
+ var c = {
+ cell : ce,
+ row : rn,
+ col: cn,
+ colspan : ce.colSpan,
+ rowspan : ce.rowSpan
+ };
+ if (ce.isEqualNode(this.node)) {
+ this.cellData = c;
}
-
- var pos = 0;
-
- for (var i = 0; i < lines.length;i++) {
- pos += lines[i].length;
-
- if(i != 0){
- pos += 1;
- }
-
- if(pos < curr){
- continue;
+ // if we have been filled up by a row?
+ if (typeof(ret[rn][cn]) != 'undefined') {
+ while(typeof(ret[rn][cn]) != 'undefined') {
+ cn++;
}
-
- pos -= lines[i].length;
-
- break;
+ c.col = cn;
}
- if(!e.shiftKey){
- this.el.dom.setSelectionRange(pos, pos);
- return;
+ if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
+ this.colWidths[cn] = ce.style.width;
+ if (this.colWidths[cn] != '') {
+ all_auto = false;
+ }
}
- this.el.dom.selectionStart = pos;
- this.el.dom.selectionEnd = curr;
- },
-
- "end" : function(e){
- e.preventDefault();
-
- var curr = this.el.dom.selectionStart;
- var lines = this.getValue().split("\n");
-
- if(!lines.length){
- return;
- }
- if(e.ctrlKey){
- this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
+ if (c.colspan < 2 && c.rowspan < 2 ) {
+ ret[rn][cn] = c;
+ cn++;
return;
}
-
- var pos = 0;
-
- for (var i = 0; i < lines.length;i++) {
-
- pos += lines[i].length;
-
- if(i != 0){
- pos += 1;
+ for(var j = 0; j < c.rowspan; j++) {
+ if (typeof(ret[rn+j]) == 'undefined') {
+ continue; // we have a problem..
}
-
- if(pos < curr){
- continue;
+ ret[rn+j][cn] = c;
+ for(var i = 0; i < c.colspan; i++) {
+ ret[rn+j][cn+i] = c;
}
-
- break;
}
- if(!e.shiftKey){
- this.el.dom.setSelectionRange(pos, pos);
- return;
- }
-
- this.el.dom.selectionStart = curr;
- this.el.dom.selectionEnd = pos;
- },
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
- },
-
- forceKeyDown: true
- });
+ cn += c.colspan;
+ }, this);
+ rn++;
+ }, this);
+
+ // initalize widths.?
+ // either all widths or no widths..
+ if (all_auto) {
+ this.colWidths[0] = false; // no widths flag.
+ }
+
+
+ return ret;
-// if(this.autosave && this.w){
-// this.autoSaveFn = setInterval(this.autosave, 1000);
-// }
},
-
- // private
- onResize : function(w, h)
+
+
+
+
+ mergeRight: function()
{
- Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
- var ew = false;
- var eh = false;
+
+ // get the contents of the next cell along..
+ var tr = this.node.closest('tr');
+ var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+ if (i >= tr.childNodes.length - 1) {
+ return; // no cells on right to merge with.
+ }
+ var table = this.toTableArray();
- if(this.el ){
- if(typeof w == 'number'){
- var aw = w - this.wrap.getFrameWidth('lr');
- this.el.setWidth(this.adjustWidth('textarea', aw));
- ew = aw;
- }
- if(typeof h == 'number'){
- var tbh = 0;
- for (var i =0; i < this.toolbars.length;i++) {
- // fixme - ask toolbars for heights?
- tbh += this.toolbars[i].tb.el.getHeight();
- if (this.toolbars[i].footer) {
- tbh += this.toolbars[i].footer.el.getHeight();
- }
- }
-
-
-
-
- var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
- ah -= 5; // knock a few pixes off for look..
-// Roo.log(ah);
- this.el.setHeight(this.adjustWidth('textarea', ah));
- var eh = ah;
- }
+ if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+ // right cell - must be same rowspan and on the same row.
+ if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+ return; // right hand side is not same rowspan.
}
- Roo.log('onResize:' + [w,h,ew,eh].join(',') );
- this.editorcore.onResize(ew,eh);
- },
+
+
+ this.node.innerHTML += ' ' + rc.cell.innerHTML;
+ tr.removeChild(rc.cell);
+ this.colspan += rc.colspan;
+ this.node.setAttribute('colspan', this.colspan);
- /**
- * Toggles the editor between standard and source edit mode.
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
- */
- toggleSourceEdit : function(sourceEditMode)
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ this.updateWidths(table);
+ },
+
+
+ mergeBelow : function()
{
- this.editorcore.toggleSourceEdit(sourceEditMode);
+ var table = this.toTableArray();
+ if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+ return; // no row below
+ }
+ if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
- if(this.editorcore.sourceEditMode){
- Roo.log('editor - showing textarea');
-
-// Roo.log('in');
-// Roo.log(this.syncValue());
- this.editorcore.syncValue();
- this.el.removeClass('x-hidden');
- this.el.dom.removeAttribute('tabIndex');
- this.el.focus();
- this.el.dom.scrollTop = 0;
-
+ if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+ return; // right hand side is not same rowspan.
+ }
+ this.node.innerHTML = this.node.innerHTML + rc.cell.innerHTML ;
+ rc.cell.parentNode.removeChild(rc.cell);
+ this.rowspan += rc.rowspan;
+ this.node.setAttribute('rowspan', this.rowspan);
+ },
+
+ split: function()
+ {
+ if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+ return;
+ }
+ var table = this.toTableArray();
+ var cd = this.cellData;
+ this.rowspan = 1;
+ this.colspan = 1;
+
+ for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+
- for (var i = 0; i < this.toolbars.length; i++) {
- if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
- this.toolbars[i].tb.hide();
- this.toolbars[i].footer.hide();
+ for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+ if (r == cd.row && c == cd.col) {
+ this.node.removeAttribute('rowspan');
+ this.node.removeAttribute('colspan');
}
+
+ var ntd = this.node.cloneNode(); // which col/row should be 0..
+ ntd.removeAttribute('id');
+ ntd.style.width = this.colWidths[c];
+ ntd.innerHTML = '';
+ table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 };
}
- }else{
- Roo.log('editor - hiding textarea');
-// Roo.log('out')
-// Roo.log(this.pushValue());
- this.editorcore.pushValue();
+ }
+ this.redrawAllCells(table);
+
+ },
+
+
+
+ redrawAllCells: function(table)
+ {
+
+
+ var tab = this.node.closest('tr').closest('table');
+ var ctr = tab.rows[0].parentNode;
+ Array.from(tab.rows).forEach(function(r, ri){
- this.el.addClass('x-hidden');
- this.el.dom.setAttribute('tabIndex', -1);
+ Array.from(r.cells).forEach(function(ce, ci){
+ ce.parentNode.removeChild(ce);
+ });
+ r.parentNode.removeChild(r);
+ });
+ for(var r = 0 ; r < table.length; r++) {
+ var re = tab.rows[r];
- for (var i = 0; i < this.toolbars.length; i++) {
- if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
- this.toolbars[i].tb.show();
- this.toolbars[i].footer.show();
+ var re = tab.ownerDocument.createElement('tr');
+ ctr.appendChild(re);
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
}
+
+ re.appendChild(table[r][c].cell);
+
+ table[r][c].cell = false;
}
-
- //this.deferFocus();
}
- this.setSize(this.wrap.getSize());
- this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
-
- this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
- },
-
- // private (for BoxComponent)
- adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
- // private (for BoxComponent)
- getResizeEl : function(){
- return this.wrap;
- },
-
- // private (for BoxComponent)
- getPositionEl : function(){
- return this.wrap;
- },
-
- // private
- initEvents : function(){
- this.originalValue = this.getValue();
- },
-
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
- */
- markInvalid : Roo.emptyFn,
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
- */
- clearInvalid : Roo.emptyFn,
-
- setValue : function(v){
- Roo.form.HtmlEditor.superclass.setValue.call(this, v);
- this.editorcore.pushValue();
},
-
- /**
- * update the language in the body - really done by core
- * @param {String} language - eg. en / ar / zh-CN etc..
- */
- updateLanguage : function(lang)
+ updateWidths : function(table)
{
- this.language = lang;
- this.editorcore.language = lang;
- this.editorcore.updateLanguage();
-
- },
- // private
- deferFocus : function(){
- this.focus.defer(10, this);
- },
-
- // doc'ed in Field
- focus : function(){
- this.editorcore.focus();
-
+ for(var r = 0 ; r < table.length; r++) {
+
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
+
+ if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ el.width = Math.floor(this.colWidths[c]) +'%';
+ el.updateElement(el.node);
+ }
+ if (this.colWidths[0] != false && table[r][c].colspan > 1) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ var width = 0;
+ for(var i = 0; i < table[r][c].colspan; i ++) {
+ width += Math.floor(this.colWidths[c + i]);
+ }
+ el.width = width +'%';
+ el.updateElement(el.node);
+ }
+ table[r][c].cell = false; // done
+ }
+ }
},
-
-
- // private
- onDestroy : function(){
-
-
+ normalizeWidths : function(table)
+ {
+ if (this.colWidths[0] === false) {
+ var nw = 100.0 / this.colWidths.length;
+ this.colWidths.forEach(function(w,i) {
+ this.colWidths[i] = nw;
+ },this);
+ return;
+ }
+
+ var t = 0, missing = [];
- if(this.rendered){
-
- for (var i =0; i < this.toolbars.length;i++) {
- // fixme - ask toolbars for heights?
- this.toolbars[i].onDestroy();
+ this.colWidths.forEach(function(w,i) {
+ //if you mix % and
+ this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+ var add = this.colWidths[i];
+ if (add > 0) {
+ t+=add;
+ return;
}
+ missing.push(i);
- this.wrap.dom.innerHTML = '';
- this.wrap.remove();
- }
- },
-
- // private
- onFirstFocus : function(){
- //Roo.log("onFirstFocus");
- this.editorcore.onFirstFocus();
- for (var i =0; i < this.toolbars.length;i++) {
- this.toolbars[i].onFirstFocus();
+
+ },this);
+ var nc = this.colWidths.length;
+ if (missing.length) {
+ var mult = (nc - missing.length) / (1.0 * nc);
+ var t = mult * t;
+ var ew = (100 -t) / (1.0 * missing.length);
+ this.colWidths.forEach(function(w,i) {
+ if (w > 0) {
+ this.colWidths[i] = w * mult;
+ return;
+ }
+
+ this.colWidths[i] = ew;
+ }, this);
+ // have to make up numbers..
+
}
+ // now we should have all the widths..
+
},
- // private
- syncValue : function()
+ shrinkColumn : function()
{
- this.editorcore.syncValue();
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 0.8;
+ if (nw < 5) {
+ return;
+ }
+ var otherAdd = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] += otherAdd
+ }, this);
+ this.updateWidths(table);
+
},
-
- pushValue : function()
+ growColumn : function()
{
- this.editorcore.pushValue();
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 1.2;
+ if (nw > 90) {
+ return;
+ }
+ var otherSub = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] -= otherSub
+ }, this);
+ this.updateWidths(table);
+
},
-
- setStylesheets : function(stylesheets)
+ deleteRow : function()
{
- this.editorcore.setStylesheets(stylesheets);
+ // delete this rows 'tr'
+ // if any of the cells in this row have a rowspan > 1 && row!= this row..
+ // then reduce the rowspan.
+ var table = this.toTableArray();
+ // this.cellData.row;
+ for (var i =0;i< table[this.cellData.row].length ; i++) {
+ var c = table[this.cellData.row][i];
+ if (c.row != this.cellData.row) {
+
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ continue;
+ }
+ if (c.rowspan > 1) {
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ }
+ }
+ table.splice(this.cellData.row,1);
+ this.redrawAllCells(table);
+
},
-
- removeStylesheets : function()
+ deleteColumn : function()
{
- this.editorcore.removeStylesheets();
+ var table = this.toTableArray();
+
+ for (var i =0;i< table.length ; i++) {
+ var c = table[i][this.cellData.col];
+ if (c.col != this.cellData.col) {
+ table[i][this.cellData.col].colspan--;
+ } else if (c.colspan > 1) {
+ c.colspan--;
+ c.cell.setAttribute('colspan', c.colspan);
+ }
+ table[i].splice(this.cellData.col,1);
+ }
+
+ this.redrawAllCells(table);
}
-
- // hide stuff that is not compatible
- /**
- * @event blur
- * @hide
- */
- /**
- * @event change
- * @hide
- */
- /**
- * @event focus
- * @hide
- */
- /**
- * @event specialkey
- * @hide
- */
- /**
- * @cfg {String} fieldClass @hide
- */
- /**
- * @cfg {String} focusClass @hide
- */
- /**
- * @cfg {String} autoCreate @hide
- */
- /**
- * @cfg {String} inputType @hide
- */
- /**
- * @cfg {String} invalidClass @hide
- */
- /**
- * @cfg {String} invalidText @hide
- */
- /**
- * @cfg {String} msgFx @hide
- */
- /**
- * @cfg {String} validateOnBlur @hide
- */
-});
-
- /*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
-
- */
+
+
+
+})
-/**
- * @class Roo.form.HtmlEditor.ToolbarStandard
- * Basic Toolbar
+//<script type="text/javascript">
- * Usage:
+/*
+ * Based Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * LGPL
*
- new Roo.form.HtmlEditor({
- ....
- toolbars : [
- new Roo.form.HtmlEditorToolbar1({
- disable : { fonts: 1 , format: 1, ..., ... , ...],
- btns : [ .... ]
- })
- }
-
- *
- * @cfg {Object} disable List of elements to disable..
- * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
- *
- *
- * NEEDS Extra CSS?
- * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
*/
-Roo.form.HtmlEditor.ToolbarStandard = function(config)
-{
+/**
+ * @class Roo.HtmlEditorCore
+ * @extends Roo.Component
+ * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
+ *
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+
+Roo.HtmlEditorCore = function(config){
- Roo.apply(this, config);
- // default disabled, based on 'good practice'..
- this.disable = this.disable || {};
- Roo.applyIf(this.disable, {
- fontSize : true,
- colors : true,
- specialElements : true
+ Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+
+
+ this.addEvents({
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {Roo.HtmlEditorCore} this
+ */
+ initialize: true,
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {Roo.HtmlEditorCore} this
+ */
+ activate: true,
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ beforesync: true,
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ beforepush: true,
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ sync: true,
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ push: true,
+
+ /**
+ * @event editorevent
+ * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+ * @param {Roo.HtmlEditorCore} this
+ */
+ editorevent: true
+
+
});
+ // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
- //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
- // dont call parent... till later.
-}
-
-Roo.form.HtmlEditor.ToolbarStandard.prototype = {
+ // defaults : white / black...
+ this.applyBlacklists();
- tb: false,
- rendered: false,
- editor : false,
- editorcore : false,
- /**
- * @cfg {Object} disable List of toolbar elements to disable
-
+};
+
+
+Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
+
+
+ /**
+ * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
*/
- disable : false,
+ owner : false,
/**
- * @cfg {String} createLinkText The default text for the create link prompt
+ * @cfg {String} css styling for resizing. (used on bootstrap only)
*/
- createLinkText : 'Please enter the URL for the link:',
- /**
- * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ resize : false,
+ /**
+ * @cfg {Number} height (in pixels)
+ */
+ height: 300,
+ /**
+ * @cfg {Number} width (in pixels)
+ */
+ width: 500,
+ /**
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
*/
- defaultLinkValue : 'http:/'+'/',
-
+ autoClean: true,
- /**
- * @cfg {Array} fontFamilies An array of available font families
+ /**
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
*/
- fontFamilies : [
- 'Arial',
- 'Courier New',
- 'Tahoma',
- 'Times New Roman',
- 'Verdana'
- ],
-
- specialChars : [
- "©",
- "®",
- "™",
- "£" ,
- // "—",
- "…",
- "÷" ,
- // "á" , ?? a acute?
- "€" , //Euro
- // "“" ,
- // "”" ,
- // "•" ,
- "°" // , // degrees
-
- // "é" , // e ecute
- // "ú" , // u ecute?
- ],
-
- specialElements : [
- {
- text: "Insert Table",
- xtype: 'MenuItem',
- xns : Roo.Menu,
- ihtml : '<table><tr><td>Cell</td></tr></table>'
-
- },
- {
- text: "Insert Image",
- xtype: 'MenuItem',
- xns : Roo.Menu,
- ihtml : '<img src="about:blank"/>'
-
- }
-
-
- ],
-
-
- inputElements : [
- "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
- "input:submit", "input:button", "select", "textarea", "label" ],
- formats : [
- ["p"] ,
- ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
- ["pre"],[ "code"],
- ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
- ['div'],['span'],
- ['sup'],['sub']
- ],
-
- cleanStyles : [
- "font-size"
- ],
+ enableBlocks : true,
+ /**
+ * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+ *
+ */
+ stylesheets: false,
/**
- * @cfg {String} defaultFont default font to use.
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
*/
- defaultFont: 'tahoma',
-
- fontSelect : false,
+ language: 'en',
+ /**
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source
+ * - by default they are stripped - if you are editing email you may need this.
+ */
+ allowComments: false,
+ // id of frame..
+ frameId: false,
- formatCombo : false,
+ // private properties
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
+ sourceEditMode : false,
+ onFocus : Roo.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
- init : function(editor)
- {
- this.editor = editor;
- this.editorcore = editor.editorcore ? editor.editorcore : editor;
- var editorcore = this.editorcore;
+ clearUp: true,
+
+ // blacklist + whitelisted elements..
+ black: false,
+ white: false,
+
+ bodyCls : '',
+
+
+ undoManager : false,
+ /**
+ * Protected method that will not generally be called directly. It
+ * is called when the editor initializes the iframe with HTML contents. Override this method if you
+ * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+ */
+ getDocMarkup : function(){
+ // body styles..
+ var st = '';
+
+ // inherit styels from page...??
+ if (this.stylesheets === false) {
+
+ Roo.get(document.head).select('style').each(function(node) {
+ st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ });
+
+ Roo.get(document.head).select('link').each(function(node) {
+ st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ });
+
+ } else if (!this.stylesheets.length) {
+ // simple..
+ st = '<style type="text/css">' +
+ 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+ '</style>';
+ } else {
+ for (var i in this.stylesheets) {
+ if (typeof(this.stylesheets[i]) != 'string') {
+ continue;
+ }
+ st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
+ }
+
+ }
+
+ st += '<style type="text/css">' +
+ 'IMG { cursor: pointer } ' +
+ '</style>';
+
+ st += '<meta name="google" content="notranslate">';
+
+ var cls = 'notranslate roo-htmleditor-body';
+
+ if(this.bodyCls.length){
+ cls += ' ' + this.bodyCls;
+ }
+ return '<html class="notranslate" translate="no"><head>' + st +
+ //<style type="text/css">' +
+ //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+ //'</style>' +
+ ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
+ },
+
+ // private
+ onRender : function(ct, position)
+ {
var _t = this;
+ //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
+ this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
- var fid = editorcore.frameId;
- var etb = this;
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: _t, // was editor...
- handler:handler||_t.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
+
+ this.el.dom.style.border = '0 none';
+ this.el.dom.setAttribute('tabIndex', -1);
+ this.el.addClass('x-hidden hide');
+
+
+
+ if(Roo.isIE){ // fix IE 1px bogus margin
+ this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
+ }
+
+
+ this.frameId = Roo.id();
+
+ var ifcfg = {
+ tag: 'iframe',
+ cls: 'form-control', // bootstrap..
+ id: this.frameId,
+ name: this.frameId,
+ frameBorder : 'no',
+ 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
+ };
+ if (this.resize) {
+ ifcfg.style = { resize : this.resize };
}
+ var iframe = this.owner.wrap.createChild(ifcfg, this.el);
- var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
- this.tb = tb;
- // stop form submits
- tb.el.on('click', function(e){
- e.preventDefault(); // what does this do?
- });
+ this.iframe = iframe.dom;
- if(!this.disable.font) { // && !Roo.isSafari){
- /* why no safari for fonts
- editor.fontSelect = tb.el.createChild({
- tag:'select',
- tabIndex: -1,
- cls:'x-font-select',
- html: this.createFontOptions()
- });
-
- editor.fontSelect.on('change', function(){
- var font = editor.fontSelect.dom.value;
- editor.relayCmd('fontname', font);
- editor.deferFocus();
- }, editor);
-
- tb.add(
- editor.fontSelect.dom,
- '-'
- );
- */
-
- };
- if(!this.disable.formats){
- this.formatCombo = new Roo.form.ComboBox({
- store: new Roo.data.SimpleStore({
- id : 'tag',
- fields: ['tag'],
- data : this.formats // from states.js
- }),
- blockFocus : true,
- name : '',
- //autoCreate : {tag: "div", size: "20"},
- displayField:'tag',
- typeAhead: false,
- mode: 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Add tag',
- selectOnFocus:true,
- width:135,
- listeners : {
- 'select': function(c, r, i) {
- editorcore.insertTag(r.get('tag'));
- editor.focus();
+ this.assignDocWin();
+
+ this.doc.designMode = 'on';
+
+ this.doc.open();
+ this.doc.write(this.getDocMarkup());
+ this.doc.close();
+
+
+ var task = { // must defer to wait for browser to be ready
+ run : function(){
+ //console.log("run task?" + this.doc.readyState);
+ this.assignDocWin();
+ if(this.doc.body || this.doc.readyState == 'complete'){
+ try {
+ this.doc.designMode="on";
+
+ } catch (e) {
+ return;
}
+ Roo.TaskMgr.stop(task);
+ this.initEditor.defer(10, this);
}
+ },
+ interval : 10,
+ duration: 10000,
+ scope: this
+ };
+ Roo.TaskMgr.start(task);
- });
- tb.addField(this.formatCombo);
+ },
+
+ // private
+ onResize : function(w, h)
+ {
+ Roo.log('resize: ' +w + ',' + h );
+ //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
+ if(!this.iframe){
+ return;
+ }
+ if(typeof w == 'number'){
+ this.iframe.style.width = w + 'px';
+ }
+ if(typeof h == 'number'){
+
+ this.iframe.style.height = h + 'px';
+ if(this.doc){
+ (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
+ }
}
- if(!this.disable.format){
- tb.add(
- btn('bold'),
- btn('italic'),
- btn('underline'),
- btn('strikethrough')
- );
- };
- if(!this.disable.fontSize){
- tb.add(
- '-',
-
-
- btn('increasefontsize', false, editorcore.adjustFont),
- btn('decreasefontsize', false, editorcore.adjustFont)
- );
- };
-
+ },
+
+ /**
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+ */
+ toggleSourceEdit : function(sourceEditMode){
- if(!this.disable.colors){
- tb.add(
- '-', {
- id:editorcore.frameId +'-forecolor',
- cls:'x-btn-icon x-edit-forecolor',
- clickEvent:'mousedown',
- tooltip: this.buttonTips['forecolor'] || undefined,
- tabIndex:-1,
- menu : new Roo.menu.ColorMenu({
- allowReselect: true,
- focus: Roo.emptyFn,
- value:'000000',
- plain:true,
- selectHandler: function(cp, color){
- editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- },
- scope: editorcore,
- clickEvent:'mousedown'
- })
- }, {
- id:editorcore.frameId +'backcolor',
- cls:'x-btn-icon x-edit-backcolor',
- clickEvent:'mousedown',
- tooltip: this.buttonTips['backcolor'] || undefined,
- tabIndex:-1,
- menu : new Roo.menu.ColorMenu({
- focus: Roo.emptyFn,
- value:'FFFFFF',
- plain:true,
- allowReselect: true,
- selectHandler: function(cp, color){
- if(Roo.isGecko){
- editorcore.execCmd('useCSS', false);
- editorcore.execCmd('hilitecolor', color);
- editorcore.execCmd('useCSS', true);
- editor.deferFocus();
- }else{
- editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
- Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- }
- },
- scope:editorcore,
- clickEvent:'mousedown'
- })
- }
- );
- };
- // now add all the items...
+ this.sourceEditMode = sourceEditMode === true;
+ if(this.sourceEditMode){
+
+ Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']); //FIXME - what's the BS styles for these
+
+ }else{
+ Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
+ //this.iframe.className = '';
+ this.deferFocus();
+ }
+ //this.setSize(this.owner.wrap.getSize());
+ //this.fireEvent('editmodechange', this, this.sourceEditMode);
+ },
- if(!this.disable.alignments){
- tb.add(
- '-',
- btn('justifyleft'),
- btn('justifycenter'),
- btn('justifyright')
- );
- };
+
+
- //if(!Roo.isSafari){
- if(!this.disable.links){
- tb.add(
- '-',
- btn('createlink', false, this.createLink) /// MOVE TO HERE?!!?!?!?!
- );
- };
+ /**
+ * Protected method that will not generally be called directly. If you need/want
+ * custom HTML cleanup, this is the method you should override.
+ * @param {String} html The HTML to be cleaned
+ * return {String} The cleaned HTML
+ */
+ cleanHtml : function(html)
+ {
+ html = String(html);
+ if(html.length > 5){
+ if(Roo.isSafari){ // strip safari nonsense
+ html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+ }
+ }
+ if(html == ' '){
+ html = '';
+ }
+ return html;
+ },
- if(!this.disable.lists){
- tb.add(
- '-',
- btn('insertorderedlist'),
- btn('insertunorderedlist')
- );
+ /**
+ * HTML Editor -> Textarea
+ * Protected method that will not generally be called directly. Syncs the contents
+ * of the editor iframe with the textarea.
+ */
+ syncValue : function()
+ {
+ //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
+ if(this.initialized){
+
+ if (this.undoManager) {
+ this.undoManager.addEvent();
}
- if(!this.disable.sourceEdit){
- tb.add(
- '-',
- btn('sourceedit', true, function(btn){
- this.toggleSourceEdit(btn.pressed);
- })
- );
+
+
+ var bd = (this.doc.body || this.doc.documentElement);
+
+
+ var sel = this.win.getSelection();
+
+ var div = document.createElement('div');
+ div.innerHTML = bd.innerHTML;
+ var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
+ if (gtx.length > 0) {
+ var rm = gtx.item(0).parentNode;
+ rm.parentNode.removeChild(rm);
}
- //}
-
- var smenu = { };
- // special menu.. - needs to be tidied up..
- if (!this.disable.special) {
- smenu = {
- text: "©",
- cls: 'x-edit-none',
+
+
+ if (this.enableBlocks) {
+ new Roo.htmleditor.FilterBlock({ node : div });
+ }
+
+ var html = div.innerHTML;
+
+ //?? tidy?
+ if (this.autoClean) {
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.specialChars.length; i++) {
- smenu.menu.items.push({
-
- html: this.specialChars[i],
- handler: function(a,b) {
- editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
- //editor.insertAtCursor(a.html);
-
- },
- tabIndex:-1
+ new Roo.htmleditor.FilterAttributes({
+ node : div,
+ attrib_white : [
+ 'href',
+ 'src',
+ 'name',
+ 'align',
+ 'colspan',
+ 'rowspan',
+ 'data-display',
+ 'data-caption-display',
+ 'data-width',
+ 'data-caption',
+ 'start' ,
+ 'style',
+ // youtube embed.
+ 'class',
+ 'allowfullscreen',
+ 'frameborder',
+ 'width',
+ 'height',
+ 'alt'
+ ],
+ attrib_clean : ['href', 'src' ]
+ });
+
+ var tidy = new Roo.htmleditor.TidySerializer({
+ inner: true
});
+ html = tidy.serialize(div);
+
+ }
+
+
+ if(Roo.isSafari){
+ var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+ var m = bs ? bs.match(/text-align:(.*?);/i) : false;
+ if(m && m[1]){
+ html = '<div style="'+m[0]+'">' + html + '</div>';
+ }
+ }
+ html = this.cleanHtml(html);
+ // fix up the special chars.. normaly like back quotes in word...
+ // however we do not want to do this with chinese..
+ html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+
+ var cc = match.charCodeAt();
+
+ // Get the character value, handling surrogate pairs
+ if (match.length == 2) {
+ // It's a surrogate pair, calculate the Unicode code point
+ var high = match.charCodeAt(0) - 0xD800;
+ var low = match.charCodeAt(1) - 0xDC00;
+ cc = (high * 0x400) + low + 0x10000;
+ } else if (
+ (cc >= 0x4E00 && cc < 0xA000 ) ||
+ (cc >= 0x3400 && cc < 0x4E00 ) ||
+ (cc >= 0xf900 && cc < 0xfb00 )
+ ) {
+ return match;
+ }
+
+ // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+ return "&#" + cc + ";";
+
+
+ });
+
+
+
+ if(this.owner.fireEvent('beforesync', this, html) !== false){
+ this.el.dom.value = html;
+ this.owner.fireEvent('sync', this, html);
+ }
+ }
+ },
+
+ /**
+ * TEXTAREA -> EDITABLE
+ * Protected method that will not generally be called directly. Pushes the value of the textarea
+ * into the iframe editor.
+ */
+ pushValue : function()
+ {
+ //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
+ if(this.initialized){
+ var v = this.el.dom.value.trim();
+
+
+ if(this.owner.fireEvent('beforepush', this, v) !== false){
+ var d = (this.doc.body || this.doc.documentElement);
+ d.innerHTML = v;
+
+ this.el.dom.value = d.innerHTML;
+ this.owner.fireEvent('push', this, v);
+ }
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
+ new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
+ }
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
}
+ this.updateLanguage();
- tb.add(smenu);
+ var lc = this.doc.body.lastChild;
+ if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
+ // add an extra line at the end.
+ this.doc.body.appendChild(this.doc.createElement('br'));
+ }
}
+ },
+
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
+ },
+
+ // doc'ed in Field
+ focus : function(){
+ if(this.win && !this.sourceEditMode){
+ this.win.focus();
+ }else{
+ this.el.focus();
+ }
+ },
+
+ assignDocWin: function()
+ {
+ var iframe = this.iframe;
- var cmenu = { };
- if (!this.disable.cleanStyles) {
- cmenu = {
- cls: 'x-btn-icon x-btn-clear',
-
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.cleanStyles.length; i++) {
- cmenu.menu.items.push({
- actiontype : this.cleanStyles[i],
- html: 'Remove ' + this.cleanStyles[i],
- handler: function(a,b) {
-// Roo.log(a);
-// Roo.log(b);
- var c = Roo.get(editorcore.doc.body);
- c.select('[style]').each(function(s) {
- s.dom.style.removeProperty(a.actiontype);
- });
- editorcore.syncValue();
- },
- tabIndex:-1
- });
+ if(Roo.isIE){
+ this.doc = iframe.contentWindow.document;
+ this.win = iframe.contentWindow;
+ } else {
+// if (!Roo.get(this.frameId)) {
+// return;
+// }
+// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+// this.win = Roo.get(this.frameId).dom.contentWindow;
+
+ if (!Roo.get(this.frameId) && !iframe.contentDocument) {
+ return;
}
- cmenu.menu.items.push({
- actiontype : 'tablewidths',
- html: 'Remove Table Widths',
- handler: function(a,b) {
- editorcore.cleanTableWidths();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
- cmenu.menu.items.push({
- actiontype : 'word',
- html: 'Remove MS Word Formating',
- handler: function(a,b) {
- editorcore.cleanWord();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
- cmenu.menu.items.push({
- actiontype : 'all',
- html: 'Remove All Styles',
- handler: function(a,b) {
-
- var c = Roo.get(editorcore.doc.body);
- c.select('[style]').each(function(s) {
- s.dom.removeAttribute('style');
- });
- editorcore.syncValue();
- },
- tabIndex:-1
- });
+ this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+ this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
+ }
+ },
+
+ // private
+ initEditor : function(){
+ //console.log("INIT EDITOR");
+ this.assignDocWin();
+
+
+
+ this.doc.designMode="on";
+ this.doc.open();
+ this.doc.write(this.getDocMarkup());
+ this.doc.close();
+
+ var dbody = (this.doc.body || this.doc.documentElement);
+ //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
+ // this copies styles from the containing element into thsi one..
+ // not sure why we need all of this..
+ //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+
+ //var ss = this.el.getStyles( 'background-image', 'background-repeat');
+ //ss['background-attachment'] = 'fixed'; // w3c
+ dbody.bgProperties = 'fixed'; // ie
+ dbody.setAttribute("translate", "no");
+
+ //Roo.DomHelper.applyStyles(dbody, ss);
+ Roo.EventManager.on(this.doc, {
+
+ 'mouseup': this.onEditorEvent,
+ 'dblclick': this.onEditorEvent,
+ 'click': this.onEditorEvent,
+ 'keyup': this.onEditorEvent,
- cmenu.menu.items.push({
- actiontype : 'all',
- html: 'Remove All CSS Classes',
- handler: function(a,b) {
+ buffer:100,
+ scope: this
+ });
+ Roo.EventManager.on(this.doc, {
+ 'paste': this.onPasteEvent,
+ scope : this
+ });
+ if(Roo.isGecko){
+ Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
+ }
+ //??? needed???
+ if(Roo.isIE || Roo.isSafari || Roo.isOpera){
+ Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
+ }
+ this.initialized = true;
+
+
+ // initialize special key events - enter
+ new Roo.htmleditor.KeyEnter({core : this});
+
+
+
+ this.owner.fireEvent('initialize', this);
+ this.pushValue();
+ },
+ // this is to prevent a href clicks resulting in a redirect?
+
+ onPasteEvent : function(e,v)
+ {
+ // I think we better assume paste is going to be a dirty load of rubish from word..
+
+ // even pasting into a 'email version' of this widget will have to clean up that mess.
+ var cd = (e.browserEvent.clipboardData || window.clipboardData);
+
+ // check what type of paste - if it's an image, then handle it differently.
+ if (cd.files && cd.files.length > 0 && cd.types.indexOf('text/html') < 0) {
+ // pasting images?
+ var urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+ var r = new FileReader();
+ var t = this;
+ r.addEventListener('load',function()
+ {
+
+ var d = (new DOMParser().parseFromString('<img src="' + r.result+ '">', 'text/html')).body;
+ // is insert asycn?
+ if (t.enableBlocks) {
- var c = Roo.get(editorcore.doc.body);
- c.select('[class]').each(function(s) {
- s.dom.removeAttribute('class');
+ Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+ if (img.closest('figure')) { // assume!! that it's aready
+ return;
+ }
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : img.src
+ });
+ fig.updateElement(img); // replace it..
+
});
- editorcore.cleanWord();
- editorcore.syncValue();
- },
- tabIndex:-1
+ }
+ t.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ t.owner.fireEvent('paste', this);
});
+ r.readAsDataURL(cd.files[0]);
- cmenu.menu.items.push({
- actiontype : 'tidy',
- html: 'Tidy HTML Source',
- handler: function(a,b) {
- new Roo.htmleditor.Tidy(editorcore.doc.body);
- editorcore.syncValue();
- },
- tabIndex:-1
+ e.preventDefault();
+
+ return false;
+ }
+ if (cd.types.indexOf('text/html') < 0 ) {
+ return false;
+ }
+ var images = [];
+ var html = cd.getData('text/html'); // clipboard event
+ if (cd.types.indexOf('text/rtf') > -1) {
+ var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
+ images = parser.doc ? parser.doc.getElementsByType('pict') : [];
+ }
+ // Roo.log(images);
+ // Roo.log(imgs);
+ // fixme..
+ images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
+ .map(function(g) { return g.toDataURL(); })
+ .filter(function(g) { return g != 'about:blank'; });
+
+ //Roo.log(html);
+ html = this.cleanWordChars(html);
+
+ var d = (new DOMParser().parseFromString(html, 'text/html')).body;
+
+
+ var sn = this.getParentElement();
+ // check if d contains a table, and prevent nesting??
+ //Roo.log(d.getElementsByTagName('table'));
+ //Roo.log(sn);
+ //Roo.log(sn.closest('table'));
+ if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
+ e.preventDefault();
+ this.insertAtCursor("You can not nest tables");
+ //Roo.log("prevent?"); // fixme -
+ return false;
+ }
+
+
+
+ if (images.length > 0) {
+ // replace all v:imagedata - with img.
+ var ar = Array.from(d.getElementsByTagName('v:imagedata'));
+ Roo.each(ar, function(node) {
+ node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
+ node.parentNode.removeChild(node);
});
- tb.add(cmenu);
+ Roo.each(d.getElementsByTagName('img'), function(img, i) {
+ img.setAttribute('src', images[i]);
+ });
}
-
- if (!this.disable.specialElements) {
- var semenu = {
- text: "Other;",
- cls: 'x-edit-none',
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.specialElements.length; i++) {
- semenu.menu.items.push(
- Roo.apply({
- handler: function(a,b) {
- editor.insertAtCursor(this.ihtml);
- }
- }, this.specialElements[i])
- );
-
- }
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterWord({ node : d });
- tb.add(semenu);
+ new Roo.htmleditor.FilterStyleToTag({ node : d });
+ new Roo.htmleditor.FilterAttributes({
+ node : d,
+ attrib_white : [
+ 'href',
+ 'src',
+ 'name',
+ 'align',
+ 'colspan',
+ 'rowspan'
+ /* THESE ARE NOT ALLWOED FOR PASTE
+ * 'data-display',
+ 'data-caption-display',
+ 'data-width',
+ 'data-caption',
+ 'start' ,
+ 'style',
+ // youtube embed.
+ 'class',
+ 'allowfullscreen',
+ 'frameborder',
+ 'width',
+ 'height',
+ 'alt'
+ */
+ ],
+ attrib_clean : ['href', 'src' ]
+ });
+ new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
+ // should be fonts..
+ new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
+ new Roo.htmleditor.FilterParagraph({ node : d });
+ new Roo.htmleditor.FilterHashLink({node : d});
+ new Roo.htmleditor.FilterSpan({ node : d });
+ new Roo.htmleditor.FilterLongBr({ node : d });
+ new Roo.htmleditor.FilterComment({ node : d });
}
-
-
- if (this.btns) {
- for(var i =0; i< this.btns.length;i++) {
- var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
- b.cls = 'x-edit-none';
+ if (this.enableBlocks) {
- if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
- b.cls += ' x-init-enable';
+ Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+ if (img.closest('figure')) { // assume!! that it's aready
+ return;
}
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : img.src
+ });
+ fig.updateElement(img); // replace it..
- b.scope = editorcore;
- tb.add(b);
- }
-
+ });
}
+ this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
+ }
+
- // disable everything...
+ e.preventDefault();
+ this.owner.fireEvent('paste', this);
+ return false;
+ // default behaveiour should be our local cleanup paste? (optional?)
+ // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
+ //this.owner.fireEvent('paste', e, v);
+ },
+ // private
+ onDestroy : function(){
- this.tb.items.each(function(item){
-
- if(
- item.id != editorcore.frameId+ '-sourceedit' &&
- (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
- ){
-
- item.disable();
- }
- });
- this.rendered = true;
- // the all the btns;
- editor.on('editorevent', this.updateToolbar, this);
- // other toolbars need to implement this..
- //editor.on('editmodechange', this.updateToolbar, this);
- },
-
-
- relayBtnCmd : function(btn) {
- this.editorcore.relayCmd(btn.cmd);
- },
- // private used internally
- createLink : function(){
- //Roo.log("create link?");
- var ec = this.editorcore;
- var ar = ec.getAllAncestors();
- var n = false;
- for(var i = 0;i< ar.length;i++) {
- if (ar[i] && ar[i].nodeName == 'A') {
- n = ar[i];
- break;
- }
- }
- (function() {
+ if(this.rendered){
- Roo.MessageBox.show({
- title : "Add / Edit Link URL",
- msg : "Enter the url for the link",
- buttons: Roo.MessageBox.OKCANCEL,
- fn: function(btn, url){
- if (btn != 'ok') {
- return;
- }
- if(url && url != 'http:/'+'/'){
- if (n) {
- n.setAttribute('href', url);
- } else {
- ec.relayCmd('createlink', url);
- }
- }
- },
- minWidth:250,
- prompt:true,
- //multiline: multiline,
- modal : true,
- value : n ? n.getAttribute('href') : ''
- });
+ //for (var i =0; i < this.toolbars.length;i++) {
+ // // fixme - ask toolbars for heights?
+ // this.toolbars[i].onDestroy();
+ // }
-
- }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
-
+ //this.wrap.dom.innerHTML = '';
+ //this.wrap.remove();
+ }
},
+ // private
+ onFirstFocus : function(){
+
+ this.assignDocWin();
+ this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
+
+ this.activated = true;
+
- /**
- * Protected method that will not generally be called directly. It triggers
- * a toolbar update by reading the markup state of the current selection in the editor.
- */
- updateToolbar: function(){
-
- if(!this.editorcore.activated){
- this.editor.onFirstFocus();
- return;
- }
-
- var btns = this.tb.items.map,
- doc = this.editorcore.doc,
- frameId = this.editorcore.frameId;
-
- if(!this.disable.font && !Roo.isSafari){
- /*
- var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
- if(name != this.fontSelect.dom.value){
- this.fontSelect.dom.value = name;
+ if(Roo.isGecko){ // prevent silly gecko errors
+ this.win.focus();
+ var s = this.win.getSelection();
+ if(!s.focusNode || s.focusNode.nodeType != 3){
+ var r = s.getRangeAt(0);
+ r.selectNodeContents((this.doc.body || this.doc.documentElement));
+ r.collapse(true);
+ this.deferFocus();
}
- */
- }
- if(!this.disable.format){
- btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
- btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
- btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
- btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
- }
- if(!this.disable.alignments){
- btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
- btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
- btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
- }
- if(!Roo.isSafari && !this.disable.lists){
- btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
- btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
+ try{
+ this.execCmd('useCSS', true);
+ this.execCmd('styleWithCSS', false);
+ }catch(e){}
}
-
- var ans = this.editorcore.getAllAncestors();
- if (this.formatCombo) {
-
+ this.owner.fireEvent('activate', this);
+ },
+
+ // private
+ adjustFont: function(btn){
+ var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
+ //if(Roo.isSafari){ // safari
+ // adjust *= 2;
+ // }
+ var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
+ if(Roo.isSafari){ // safari
+ var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
+ v = (v < 10) ? 10 : v;
+ v = (v > 48) ? 48 : v;
+ v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
- var store = this.formatCombo.store;
- this.formatCombo.setValue("");
- for (var i =0; i < ans.length;i++) {
- if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
- // select it..
- this.formatCombo.setValue(ans[i].tagName.toLowerCase());
- break;
- }
- }
}
+ v = Math.max(1, v+adjust);
- // hides menus... - so this cant be on a menu...
- Roo.menu.MenuMgr.hideAll();
-
- //this.editorsyncValue();
- },
-
-
- createFontOptions : function(){
- var buf = [], fs = this.fontFamilies, ff, lc;
-
-
-
- for(var i = 0, len = fs.length; i< len; i++){
- ff = fs[i];
- lc = ff.toLowerCase();
- buf.push(
- '<option value="',lc,'" style="font-family:',ff,';"',
- (this.defaultFont == lc ? ' selected="true">' : '>'),
- ff,
- '</option>'
- );
- }
- return buf.join('');
+ this.execCmd('FontSize', v );
},
-
- toggleSourceEdit : function(sourceEditMode){
+
+ onEditorEvent : function(e)
+ {
+
- Roo.log("toolbar toogle");
- if(sourceEditMode === undefined){
- sourceEditMode = !this.sourceEditMode;
- }
- this.sourceEditMode = sourceEditMode === true;
- var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
- // just toggle the button?
- if(btn.pressed !== this.sourceEditMode){
- btn.toggle(this.sourceEditMode);
- return;
+ if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ return; // we do not handle this.. (undo manager does..)
}
+ // clicking a 'block'?
- if(sourceEditMode){
- Roo.log("disabling buttons");
- this.tb.items.each(function(item){
- if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
- item.disable();
- }
- });
-
- }else{
- Roo.log("enabling buttons");
- if(this.editorcore.initialized){
- this.tb.items.each(function(item){
- item.enable();
- });
- // initialize 'blocks'
- Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
- Roo.htmleditor.Block.factory(e).updateElement(e);
- },this);
-
+ // in theory this detects if the last element is not a br, then we try and do that.
+ // its so clicking in space at bottom triggers adding a br and moving the cursor.
+ if (e &&
+ e.target.nodeName == 'BODY' &&
+ e.type == "mouseup" &&
+ this.doc.body.lastChild
+ ) {
+ var lc = this.doc.body.lastChild;
+ // gtx-trans is google translate plugin adding crap.
+ while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
+ lc = lc.previousSibling;
}
+ if (lc.nodeType == 1 && lc.nodeName != 'BR') {
+ // if last element is <BR> - then dont do anything.
+ var ns = this.doc.createElement('br');
+ this.doc.body.appendChild(ns);
+ range = this.doc.createRange();
+ range.setStartAfter(ns);
+ range.collapse(true);
+ var sel = this.win.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
}
- Roo.log("calling toggole on editor");
- // tell the editor that it's been pressed..
- this.editor.toggleSourceEdit(sourceEditMode);
-
- },
- /**
- * Object collection of toolbar tooltips for the buttons in the editor. The key
- * is the command id associated with that button and the value is a valid QuickTips object.
- * For example:
-<pre><code>
-{
- bold : {
- title: 'Bold (Ctrl+B)',
- text: 'Make the selected text bold.',
- cls: 'x-html-editor-tip'
- },
- italic : {
- title: 'Italic (Ctrl+I)',
- text: 'Make the selected text italic.',
- cls: 'x-html-editor-tip'
- },
- ...
-</code></pre>
- * @type Object
- */
- buttonTips : {
- bold : {
- title: 'Bold (Ctrl+B)',
- text: 'Make the selected text bold.',
- cls: 'x-html-editor-tip'
- },
- italic : {
- title: 'Italic (Ctrl+I)',
- text: 'Make the selected text italic.',
- cls: 'x-html-editor-tip'
- },
- underline : {
- title: 'Underline (Ctrl+U)',
- text: 'Underline the selected text.',
- cls: 'x-html-editor-tip'
- },
- strikethrough : {
- title: 'Strikethrough',
- text: 'Strikethrough the selected text.',
- cls: 'x-html-editor-tip'
- },
- increasefontsize : {
- title: 'Grow Text',
- text: 'Increase the font size.',
- cls: 'x-html-editor-tip'
- },
- decreasefontsize : {
- title: 'Shrink Text',
- text: 'Decrease the font size.',
- cls: 'x-html-editor-tip'
- },
- backcolor : {
- title: 'Text Highlight Color',
- text: 'Change the background color of the selected text.',
- cls: 'x-html-editor-tip'
- },
- forecolor : {
- title: 'Font Color',
- text: 'Change the color of the selected text.',
- cls: 'x-html-editor-tip'
- },
- justifyleft : {
- title: 'Align Text Left',
- text: 'Align text to the left.',
- cls: 'x-html-editor-tip'
- },
- justifycenter : {
- title: 'Center Text',
- text: 'Center text in the editor.',
- cls: 'x-html-editor-tip'
- },
- justifyright : {
- title: 'Align Text Right',
- text: 'Align text to the right.',
- cls: 'x-html-editor-tip'
- },
- insertunorderedlist : {
- title: 'Bullet List',
- text: 'Start a bulleted list.',
- cls: 'x-html-editor-tip'
- },
- insertorderedlist : {
- title: 'Numbered List',
- text: 'Start a numbered list.',
- cls: 'x-html-editor-tip'
- },
- createlink : {
- title: 'Hyperlink',
- text: 'Make the selected text a hyperlink.',
- cls: 'x-html-editor-tip'
- },
- sourceedit : {
- title: 'Source Edit',
- text: 'Switch to source editing mode.',
- cls: 'x-html-editor-tip'
- }
- },
- // private
- onDestroy : function(){
- if(this.rendered){
-
- this.tb.items.each(function(item){
- if(item.menu){
- item.menu.removeAll();
- if(item.menu.el){
- item.menu.el.destroy();
- }
- }
- item.destroy();
- });
-
- }
+
+
+
+ this.fireEditorEvent(e);
+ // this.updateToolbar();
+ this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
},
- onFirstFocus: function() {
- this.tb.items.each(function(item){
- item.enable();
- });
- }
-};
-
-
-
-
-// <script type="text/javascript">
-/*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
-
- */
-
-
-/**
- * @class Roo.form.HtmlEditor.ToolbarContext
- * Context Toolbar
- *
- * Usage:
- *
- new Roo.form.HtmlEditor({
- ....
- toolbars : [
- { xtype: 'ToolbarStandard', styles : {} }
- { xtype: 'ToolbarContext', disable : {} }
- ]
-})
-
-
- *
- * @config : {Object} disable List of elements to disable.. (not done yet.)
- * @config : {Object} styles Map of styles available.
- *
- */
-
-Roo.form.HtmlEditor.ToolbarContext = function(config)
-{
- Roo.apply(this, config);
- //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
- // dont call parent... till later.
- this.styles = this.styles || {};
-}
+ fireEditorEvent: function(e)
+ {
+ this.owner.fireEvent('editorevent', this, e);
+ },
-
+ insertTag : function(tg)
+ {
+ // could be a bit smarter... -> wrap the current selected tRoo..
+ if (tg.toLowerCase() == 'span' ||
+ tg.toLowerCase() == 'code' ||
+ tg.toLowerCase() == 'sup' ||
+ tg.toLowerCase() == 'sub'
+ ) {
+
+ range = this.createRange(this.getSelection());
+ var wrappingNode = this.doc.createElement(tg.toLowerCase());
+ wrappingNode.appendChild(range.extractContents());
+ range.insertNode(wrappingNode);
-Roo.form.HtmlEditor.ToolbarContext.types = {
- 'IMG' : [
- {
- name : 'width',
- title: "Width",
- width: 40
- },
- {
- name : 'height',
- title: "Height",
- width: 40
- },
- {
- name : 'align',
- title: "Align",
- opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
- width : 80
+ return;
+
+
- },
- {
- name : 'border',
- title: "Border",
- width: 40
- },
- {
- name : 'alt',
- title: "Alt",
- width: 120
- },
- {
- name : 'src',
- title: "Src",
- width: 220
}
-
- ],
+ this.execCmd("formatblock", tg);
+ this.undoManager.addEvent();
+ },
- 'FIGURE' : [
- {
- name : 'align',
- title: "Align",
- opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
- width : 80
- }
- ],
- 'A' : [
- {
- name : 'name',
- title: "Name",
- width: 50
- },
- {
- name : 'target',
- title: "Target",
- width: 120
- },
- {
- name : 'href',
- title: "Href",
- width: 220
- } // border?
+ insertText : function(txt)
+ {
- ],
-
- 'INPUT' : [
- {
- name : 'name',
- title: "name",
- width: 120
- },
- {
- name : 'value',
- title: "Value",
- width: 120
- },
- {
- name : 'width',
- title: "Width",
- width: 40
- }
- ],
- 'LABEL' : [
- {
- name : 'for',
- title: "For",
- width: 120
- }
- ],
- 'TEXTAREA' : [
- {
- name : 'name',
- title: "name",
- width: 120
- },
- {
- name : 'rows',
- title: "Rows",
- width: 20
- },
- {
- name : 'cols',
- title: "Cols",
- width: 20
- }
- ],
- 'SELECT' : [
- {
- name : 'name',
- title: "name",
- width: 120
- },
- {
- name : 'selectoptions',
- title: "Options",
- width: 200
- }
- ],
+
+ var range = this.createRange();
+ range.deleteContents();
+ //alert(Sender.getAttribute('label'));
+
+ range.insertNode(this.doc.createTextNode(txt));
+ this.undoManager.addEvent();
+ } ,
- // should we really allow this??
- // should this just be
- 'BODY' : [
+
+
+ /**
+ * Executes a Midas editor command on the editor document and performs necessary focus and
+ * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ */
+ relayCmd : function(cmd, value)
+ {
- {
- name : 'title',
- title: "Title",
- width: 200,
- disabled : true
+ switch (cmd) {
+ case 'justifyleft':
+ case 'justifyright':
+ case 'justifycenter':
+ // if we are in a cell, then we will adjust the
+ var n = this.getParentElement();
+ var td = n.closest('td');
+ if (td) {
+ var bl = Roo.htmleditor.Block.factory(td);
+ bl.textAlign = cmd.replace('justify','');
+ bl.updateElement();
+ this.owner.fireEvent('editorevent', this);
+ return;
+ }
+ this.execCmd('styleWithCSS', true); //
+ break;
+ case 'bold':
+ case 'italic':
+ case 'underline':
+ // if there is no selection, then we insert, and set the curson inside it..
+ this.execCmd('styleWithCSS', false);
+ break;
+
+
+ default:
+ break;
}
- ],
-
- '*' : [
- // empty.
- ]
-
-};
-
-// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
-Roo.form.HtmlEditor.ToolbarContext.stores = false;
-
-Roo.form.HtmlEditor.ToolbarContext.options = {
- 'font-family' : [
- [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
- [ 'Courier New', 'Courier New'],
- [ 'Tahoma', 'Tahoma'],
- [ 'Times New Roman,serif', 'Times'],
- [ 'Verdana','Verdana' ]
- ]
-};
-
-// fixme - these need to be configurable..
-
-
-//Roo.form.HtmlEditor.ToolbarContext.types
-
+
+
+ this.win.focus();
+ this.execCmd(cmd, value);
+ this.owner.fireEvent('editorevent', this);
+ //this.updateToolbar();
+ this.owner.deferFocus();
+ },
-Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
-
- tb: false,
-
- rendered: false,
-
- editor : false,
- editorcore : false,
/**
- * @cfg {Object} disable List of toolbar elements to disable
-
+ * Executes a Midas editor command directly on the editor document.
+ * For visual commands, you should use {@link #relayCmd} instead.
+ * <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
*/
- disable : false,
+ execCmd : function(cmd, value){
+ this.doc.execCommand(cmd, false, value === undefined ? null : value);
+ this.syncValue();
+ },
+
+
+
/**
- * @cfg {Object} styles List of styles
- * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
- *
- * These must be defined in the page, so they get rendered correctly..
- * .headline { }
- * TD.underline { }
- *
+ * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+ * to insert tRoo.
+ * @param {String} text | dom node..
*/
- styles : false,
-
- options: false,
-
- toolbars : false,
-
- init : function(editor)
+ insertAtCursor : function(text)
{
- this.editor = editor;
- this.editorcore = editor.editorcore ? editor.editorcore : editor;
- var editorcore = this.editorcore;
- var fid = editorcore.frameId;
- var etb = this;
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: editorcore, // was editor...
- handler:handler||editorcore.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
+ if(!this.activated){
+ return;
}
- // create a new element.
- var wdiv = editor.wrap.createChild({
- tag: 'div'
- }, editor.wrap.dom.firstChild.nextSibling, true);
+
+ if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
+ this.win.focus();
+
+
+ // from jquery ui (MIT licenced)
+ var range, node;
+ var win = this.win;
+
+ if (win.getSelection && win.getSelection().getRangeAt) {
+
+ // delete the existing?
+
+ this.createRange(this.getSelection()).deleteContents();
+ range = win.getSelection().getRangeAt(0);
+ node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
+ range.insertNode(node);
+ range = range.cloneRange();
+ range.collapse(false);
+
+ win.getSelection().removeAllRanges();
+ win.getSelection().addRange(range);
+
+
+
+ } else if (win.document.selection && win.document.selection.createRange) {
+ // no firefox support
+ var txt = typeof(text) == 'string' ? text : text.outerHTML;
+ win.document.selection.createRange().pasteHTML(txt);
+
+ } else {
+ // no firefox support
+ var txt = typeof(text) == 'string' ? text : text.outerHTML;
+ this.execCmd('InsertHTML', txt);
+ }
+ this.syncValue();
+
+ this.deferFocus();
+ }
+ },
+ // private
+ mozKeyPress : function(e){
+ if(e.ctrlKey){
+ var c = e.getCharCode(), cmd;
+
+ if(c > 0){
+ c = String.fromCharCode(c).toLowerCase();
+ switch(c){
+ case 'b':
+ cmd = 'bold';
+ break;
+ case 'i':
+ cmd = 'italic';
+ break;
+
+ case 'u':
+ cmd = 'underline';
+ break;
+
+ //case 'v':
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+
+ }
+ if(cmd){
+
+ this.relayCmd(cmd);
+ //this.win.focus();
+ //this.execCmd(cmd);
+ //this.deferFocus();
+ e.preventDefault();
+ }
+
+ }
+ }
+ },
+
+ // private
+ fixKeys : function(){ // load time branching for fastest keydown performance
- // can we do this more than once??
- // stop form submits
-
-
- // disable everything...
- var ty= Roo.form.HtmlEditor.ToolbarContext.types;
- this.toolbars = {};
- // block toolbars are built in updateToolbar when needed.
- for (var i in ty) {
-
- this.toolbars[i] = this.buildToolbar(ty[i],i);
+ if(Roo.isIE){
+ return function(e){
+ var k = e.getKey(), r;
+ if(k == e.TAB){
+ e.stopEvent();
+ r = this.doc.selection.createRange();
+ if(r){
+ r.collapse(true);
+ r.pasteHTML('    ');
+ this.deferFocus();
+ }
+ return;
+ }
+ /// this is handled by Roo.htmleditor.KeyEnter
+ /*
+ if(k == e.ENTER){
+ r = this.doc.selection.createRange();
+ if(r){
+ var target = r.parentElement();
+ if(!target || target.tagName.toLowerCase() != 'li'){
+ e.stopEvent();
+ r.pasteHTML('<br/>');
+ r.collapse(false);
+ r.select();
+ }
+ }
+ }
+ */
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
+
+
+ };
+ }else if(Roo.isOpera){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.win.focus();
+ this.execCmd('InsertHTML','    ');
+ this.deferFocus();
+ }
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
+
+ };
+ }else if(Roo.isSafari){
+ return function(e){
+ var k = e.getKey();
+
+ if(k == e.TAB){
+ e.stopEvent();
+ this.execCmd('InsertText','\t');
+ this.deferFocus();
+ return;
+ }
+ this.mozKeyPress(e);
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ // }
+
+ };
+ }
+ }(),
+
+ getAllAncestors: function()
+ {
+ var p = this.getSelectedNode();
+ var a = [];
+ if (!p) {
+ a.push(p); // push blank onto stack..
+ p = this.getParentElement();
}
- this.tb = this.toolbars.BODY;
- this.tb.el.show();
- this.buildFooter();
- this.footer.show();
- editor.on('hide', function( ) { this.footer.hide() }, this);
- editor.on('show', function( ) { this.footer.show() }, this);
-
- this.rendered = true;
- // the all the btns;
- editor.on('editorevent', this.updateToolbar, this);
- // other toolbars need to implement this..
- //editor.on('editmodechange', this.updateToolbar, this);
+ while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
+ a.push(p);
+ p = p.parentNode;
+ }
+ a.push(this.doc.body);
+ return a;
},
+ lastSel : false,
+ lastSelNode : false,
-
+ getSelection : function()
+ {
+ this.assignDocWin();
+ return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
+ },
/**
- * Protected method that will not generally be called directly. It triggers
- * a toolbar update by reading the markup state of the current selection in the editor.
- *
- * Note you can force an update by calling on('editorevent', scope, false)
+ * Select a dom node
+ * @param {DomElement} node the node to select
*/
- updateToolbar: function(editor ,ev, sel)
+ selectNode : function(node, collapse)
{
-
- if (ev) {
- ev.stopEvent(); // se if we can stop this looping with mutiple events.
- }
-
- //Roo.log(ev);
- // capture mouse up - this is handy for selecting images..
- // perhaps should go somewhere else...
- if(!this.editorcore.activated){
- this.editor.onFirstFocus();
- return;
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
}
- //Roo.log(ev ? ev.target : 'NOTARGET');
-
-
- // http://developer.yahoo.com/yui/docs/simple-editor.js.html
- // selectNode - might want to handle IE?
-
-
-
- if (ev &&
- (ev.type == 'mouseup' || ev.type == 'click' ) &&
- ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
- // they have click on an image...
- // let's see if we can change the selection...
- sel = ev.target;
-
- // this triggers looping?
- //this.editorcore.selectNode(sel);
-
+ if (collapse === true) {
+ nodeRange.collapse(true);
}
+ //
+ var s = this.win.getSelection();
+ s.removeAllRanges();
+ s.addRange(nodeRange);
+ },
+
+ getSelectedNode: function()
+ {
+ // this may only work on Gecko!!!
- // this forces an id..
- Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
- e.classList.remove('roo-ed-selection');
- });
- //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
- //Roo.get(node).addClass('roo-ed-selection');
-
- //var updateFooter = sel ? false : true;
-
-
- var ans = this.editorcore.getAllAncestors();
+ // should we cache this!!!!
- // pick
- var ty = Roo.form.HtmlEditor.ToolbarContext.types;
+
+
+ var range = this.createRange(this.getSelection()).cloneRange();
- if (!sel) {
- sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
- sel = sel ? sel : this.editorcore.doc.body;
- sel = sel.tagName.length ? sel : this.editorcore.doc.body;
-
+ if (Roo.isIE) {
+ var parent = range.parentElement();
+ while (true) {
+ var testRange = range.duplicate();
+ testRange.moveToElementText(parent);
+ if (testRange.inRange(range)) {
+ break;
+ }
+ if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
+ break;
+ }
+ parent = parent.parentElement;
+ }
+ return parent;
}
- var tn = sel.tagName.toUpperCase();
- var lastSel = this.tb.selectedNode;
- this.tb.selectedNode = sel;
- var left_label = tn;
-
- // ok see if we are editing a block?
-
- var db = false;
- // you are not actually selecting the block.
- if (sel && sel.hasAttribute('data-block')) {
- db = sel;
- } else if (sel && sel.closest('[data-block]')) {
-
- db = sel.closest('[data-block]');
- //var cepar = sel.closest('[contenteditable=true]');
- //if (db && cepar && cepar.tagName != 'BODY') {
- // db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
- //}
+ // is ancestor a text element.
+ var ac = range.commonAncestorContainer;
+ if (ac.nodeType == 3) {
+ ac = ac.parentNode;
}
-
- var block = false;
- //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
- if (db && this.editorcore.enableBlocks) {
- block = Roo.htmleditor.Block.factory(db);
+ var ar = ac.childNodes;
+
+ var nodes = [];
+ var other_nodes = [];
+ var has_other_nodes = false;
+ for (var i=0;i<ar.length;i++) {
+ if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
+ continue;
+ }
+ // fullly contained node.
+ if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
+ nodes.push(ar[i]);
+ continue;
+ }
- if (block) {
- db.className = (
- db.classList.length > 0 ? db.className + ' ' : ''
- ) + 'roo-ed-selection';
-
- // since we removed it earlier... its not there..
- tn = 'BLOCK.' + db.getAttribute('data-block');
-
- //this.editorcore.selectNode(db);
- if (typeof(this.toolbars[tn]) == 'undefined') {
- this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
- }
- this.toolbars[tn].selectedNode = db;
- left_label = block.friendly_name;
- ans = this.editorcore.getAllAncestors();
+ // probably selected..
+ if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
+ other_nodes.push(ar[i]);
+ continue;
+ }
+ // outer..
+ if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
+ continue;
}
-
+ has_other_nodes = true;
}
-
-
- if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
- return; // no change?
+ if (!nodes.length && other_nodes.length) {
+ nodes= other_nodes;
+ }
+ if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
+ return false;
}
+ return nodes[0];
+ },
+
+
+ createRange: function(sel)
+ {
+ // this has strange effects when using with
+ // top toolbar - not sure if it's a great idea.
+ //this.editor.contentWindow.focus();
+ if (typeof sel != "undefined") {
+ try {
+ return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
+ } catch(e) {
+ return this.doc.createRange();
+ }
+ } else {
+ return this.doc.createRange();
+ }
+ },
+ getParentElement: function()
+ {
-
- this.tb.el.hide();
- ///console.log("show: " + tn);
- this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
-
- this.tb.el.show();
- // update name
- this.tb.items.first().el.innerHTML = left_label + ': ';
+ this.assignDocWin();
+ var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
+ var range = this.createRange(sel);
+
+ try {
+ var p = range.commonAncestorContainer;
+ while (p.nodeType == 3) { // text node
+ p = p.parentNode;
+ }
+ return p;
+ } catch (e) {
+ return null;
+ }
+
+ },
+ /***
+ *
+ * Range intersection.. the hard stuff...
+ * '-1' = before
+ * '0' = hits..
+ * '1' = after.
+ * [ -- selected range --- ]
+ * [fail] [fail]
+ *
+ * basically..
+ * if end is before start or hits it. fail.
+ * if start is after end or hits it fail.
+ *
+ * if either hits (but other is outside. - then it's not
+ *
+ *
+ **/
+
+
+ // @see http://www.thismuchiknow.co.uk/?p=64.
+ rangeIntersectsNode : function(range, node)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
+ }
+
+ var rangeStartRange = range.cloneRange();
+ rangeStartRange.collapse(true);
+
+ var rangeEndRange = range.cloneRange();
+ rangeEndRange.collapse(false);
+
+ var nodeStartRange = nodeRange.cloneRange();
+ nodeStartRange.collapse(true);
+
+ var nodeEndRange = nodeRange.cloneRange();
+ nodeEndRange.collapse(false);
+
+ return rangeStartRange.compareBoundaryPoints(
+ Range.START_TO_START, nodeEndRange) == -1 &&
+ rangeEndRange.compareBoundaryPoints(
+ Range.START_TO_START, nodeStartRange) == 1;
- // update attributes
- if (block && this.tb.fields) {
-
- this.tb.fields.each(function(e) {
- e.setValue(block[e.name]);
- });
-
-
- } else if (this.tb.fields && this.tb.selectedNode) {
- this.tb.fields.each( function(e) {
- if (e.stylename) {
- e.setValue(this.tb.selectedNode.style[e.stylename]);
- return;
- }
- e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
- }, this);
- this.updateToolbarStyles(this.tb.selectedNode);
+
+ },
+ rangeCompareNode : function(range, node)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
}
-
- Roo.menu.MenuMgr.hideAll();
-
+ range.collapse(true);
+
+ nodeRange.collapse(true);
+
+ var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
+ var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
+
+ //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
+ var nodeIsBefore = ss == 1;
+ var nodeIsAfter = ee == -1;
-
- // update the footer
- //
- this.updateFooter(ans);
-
- },
-
- updateToolbarStyles : function(sel)
- {
- var hasStyles = false;
- for(var i in this.styles) {
- hasStyles = true;
- break;
+ if (nodeIsBefore && nodeIsAfter) {
+ return 0; // outer
+ }
+ if (!nodeIsBefore && nodeIsAfter) {
+ return 1; //right trailed.
}
- // update styles
- if (hasStyles && this.tb.hasStyles) {
- var st = this.tb.fields.item(0);
-
- st.store.removeAll();
- var cn = sel.className.split(/\s+/);
-
- var avs = [];
- if (this.styles['*']) {
-
- Roo.each(this.styles['*'], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
- if (this.styles[tn]) {
- Roo.each(this.styles[tn], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
-
- st.store.loadData(avs);
- st.collapse();
- st.setValue(cn);
+ if (nodeIsBefore && !nodeIsAfter) {
+ return 2; // left trailed.
}
+ // fully contined.
+ return 3;
},
-
-
- updateFooter : function(ans)
- {
- var html = '';
- if (ans === false) {
- this.footDisp.dom.innerHTML = '';
- return;
- }
+
+ cleanWordChars : function(input) {// change the chars to hex code
- this.footerEls = ans.reverse();
- Roo.each(this.footerEls, function(a,i) {
- if (!a) { return; }
- html += html.length ? ' > ' : '';
-
- html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
+ var swapCodes = [
+ [ 8211, "–" ],
+ [ 8212, "—" ],
+ [ 8216, "'" ],
+ [ 8217, "'" ],
+ [ 8220, '"' ],
+ [ 8221, '"' ],
+ [ 8226, "*" ],
+ [ 8230, "..." ]
+ ];
+ var output = input;
+ Roo.each(swapCodes, function(sw) {
+ var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
+ output = output.replace(swapper, sw[1]);
});
-
- //
- var sz = this.footDisp.up('td').getSize();
- this.footDisp.dom.style.width = (sz.width -10) + 'px';
- this.footDisp.dom.style.marginLeft = '5px';
- this.footDisp.dom.style.overflow = 'hidden';
+ return output;
+ },
+
+
+
- this.footDisp.dom.innerHTML = html;
-
+
+ cleanUpChild : function (node)
+ {
- },
-
-
- // private
- onDestroy : function(){
- if(this.rendered){
-
- this.tb.items.each(function(item){
- if(item.menu){
- item.menu.removeAll();
- if(item.menu.el){
- item.menu.el.destroy();
- }
- }
- item.destroy();
- });
-
- }
- },
- onFirstFocus: function() {
- // need to do this for all the toolbars..
- this.tb.items.each(function(item){
- item.enable();
+ new Roo.htmleditor.FilterComment({node : node});
+ new Roo.htmleditor.FilterAttributes({
+ node : node,
+ attrib_black : this.ablack,
+ attrib_clean : this.aclean,
+ style_white : this.cwhite,
+ style_black : this.cblack
});
+ new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
+ new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+
+
},
- buildToolbar: function(tlist, nm, friendly_name, block)
+
+ /**
+ * Clean up MS wordisms...
+ * @deprecated - use filter directly
+ */
+ cleanWord : function(node)
{
- var editor = this.editor;
- var editorcore = this.editorcore;
- // create a new element.
- var wdiv = editor.wrap.createChild({
- tag: 'div'
- }, editor.wrap.dom.firstChild.nextSibling, true);
-
-
- var tb = new Roo.Toolbar(wdiv);
- ///this.tb = tb; // << this sets the active toolbar..
- if (tlist === false && block) {
- tlist = block.contextMenu(this);
- }
-
- tb.hasStyles = false;
- tb.name = nm;
-
- tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
-
- var styles = Array.from(this.styles);
+ new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
+ new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
+ },
+
+
+ /**
+
+ * @deprecated - use filters
+ */
+ cleanTableWidths : function(node)
+ {
+ new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
- // styles...
- if (styles && styles.length) {
- tb.hasStyles = true;
- // this needs a multi-select checkbox...
- tb.addField( new Roo.form.ComboBox({
- store: new Roo.data.SimpleStore({
- id : 'val',
- fields: ['val', 'selected'],
- data : []
- }),
- name : '-roo-edit-className',
- attrname : 'className',
- displayField: 'val',
- typeAhead: false,
- mode: 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Select Style',
- selectOnFocus:true,
- width: 130,
- listeners : {
- 'select': function(c, r, i) {
- // initial support only for on class per el..
- tb.selectedNode.className = r ? r.get('val') : '';
- editorcore.syncValue();
- }
- }
+
+ },
- }));
- }
+
- var tbc = Roo.form.HtmlEditor.ToolbarContext;
+ applyBlacklists : function()
+ {
+ var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
+ var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
+ this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean : Roo.HtmlEditorCore.aclean;
+ this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack : Roo.HtmlEditorCore.ablack;
+ this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove : Roo.HtmlEditorCore.tag_remove;
- for (var i = 0; i < tlist.length; i++) {
-
- // newer versions will use xtype cfg to create menus.
- if (typeof(tlist[i].xtype) != 'undefined') {
-
- tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
-
-
- continue;
+ this.white = [];
+ this.black = [];
+ Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
}
+ this.white.push(tag);
- var item = tlist[i];
- tb.add(item.title + ": ");
-
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.white.indexOf(tag) > -1) {
+ return;
+ }
+ this.white.push(tag);
- //optname == used so you can configure the options available..
- var opts = item.opts ? item.opts : false;
- if (item.optname) { // use the b
- opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
-
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
+ this.black.push(tag);
- if (opts) {
- // opts == pulldown..
- tb.addField( new Roo.form.ComboBox({
- store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
- id : 'val',
- fields: ['val', 'display'],
- data : opts
- }),
- name : '-roo-edit-' + tlist[i].name,
-
- attrname : tlist[i].name,
- stylename : item.style ? item.style : false,
-
- displayField: item.displayField ? item.displayField : 'val',
- valueField : 'val',
- typeAhead: false,
- mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Select',
- selectOnFocus:true,
- width: item.width ? item.width : 130,
- listeners : {
- 'select': function(c, r, i) {
-
-
- if (c.stylename) {
- tb.selectedNode.style[c.stylename] = r.get('val');
- editorcore.syncValue();
- return;
- }
- if (r === false) {
- tb.selectedNode.removeAttribute(c.attrname);
- editorcore.syncValue();
- return;
- }
- tb.selectedNode.setAttribute(c.attrname, r.get('val'));
- editorcore.syncValue();
- }
- }
-
- }));
- continue;
-
-
- /*
- tb.addField( new Roo.form.TextField({
- name: i,
- width: 100,
- //allowBlank:false,
- value: ''
- }));
- continue;
- */
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
- tb.addField( new Roo.form.TextField({
- name: '-roo-edit-' + tlist[i].name,
- attrname : tlist[i].name,
-
- width: item.width,
- //allowBlank:true,
- value: '',
- listeners: {
- 'change' : function(f, nv, ov) {
-
-
- tb.selectedNode.setAttribute(f.attrname, nv);
- editorcore.syncValue();
- }
- }
- }));
-
- }
+ if (this.black.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
+
+ }, this);
- var _this = this;
- var show_delete = !block || block.deleteTitle !== false;
- if(nm == 'BODY'){
- show_delete = false;
- tb.addSeparator();
- tb.addButton( {
- text: 'Stylesheets',
-
- listeners : {
- click : function ()
- {
- _this.editor.fireEvent('stylesheetsclick', _this.editor);
- }
- }
- });
- }
+ w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
+ b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
- tb.addFill();
- if (show_delete) {
- tb.addButton({
- text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+ this.cwhite = [];
+ this.cblack = [];
+ Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
+
+ }, this);
- listeners : {
- click : function ()
- {
- var sn = tb.selectedNode;
- if (block) {
- sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
-
- }
- if (!sn) {
- return;
- }
- var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
- if (sn.hasAttribute('data-block')) {
- stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
- sn.parentNode.removeChild(sn);
-
- } else if (sn && sn.tagName != 'BODY') {
- // remove and keep parents.
- a = new Roo.htmleditor.FilterKeepChildren({tag : false});
- a.replaceTag(sn);
- }
-
-
- var range = editorcore.createRange();
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.cwhite.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
- range.setStart(stn,0);
- range.setEnd(stn,0);
- var selection = editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
-
-
- //_this.updateToolbar(null, null, pn);
- _this.updateToolbar(null, null, null);
- _this.updateFooter(false);
-
- }
- }
-
-
-
-
- });
- }
+ }, this);
- tb.el.on('click', function(e){
- e.preventDefault(); // what does this do?
- });
- tb.el.setVisibilityMode( Roo.Element.DISPLAY);
- tb.el.hide();
- // dont need to disable them... as they will get hidden
- return tb;
-
+ Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
+
+ }, this);
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.cblack.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
+
+ }, this);
},
- buildFooter : function()
+
+ setStylesheets : function(stylesheets)
{
-
- var fel = this.editor.wrap.createChild();
- this.footer = new Roo.Toolbar(fel);
- // toolbar has scrolly on left / right?
- var footDisp= new Roo.Toolbar.Fill();
- var _t = this;
- this.footer.add(
- {
- text : '<',
- xtype: 'Button',
- handler : function() {
- _t.footDisp.scrollTo('left',0,true)
- }
- }
- );
- this.footer.add( footDisp );
- this.footer.add(
- {
- text : '>',
- xtype: 'Button',
- handler : function() {
- // no animation..
- _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
- }
+ if(typeof(stylesheets) == 'string'){
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : stylesheets
+ });
+
+ return;
+ }
+ var _this = this;
+
+ Roo.each(stylesheets, function(s) {
+ if(!s.length){
+ return;
}
- );
- var fel = Roo.get(footDisp.el);
- fel.addClass('x-editor-context');
- this.footDispWrap = fel;
- this.footDispWrap.overflow = 'hidden';
-
- this.footDisp = fel.createChild();
- this.footDispWrap.on('click', this.onContextClick, this)
-
+
+ Roo.get(_this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : s
+ });
+ });
+
},
- // when the footer contect changes
- onContextClick : function (ev,dom)
+
+
+ updateLanguage : function()
{
- ev.preventDefault();
- var cn = dom.className;
- //Roo.log(cn);
- if (!cn.match(/x-ed-loc-/)) {
+ if (!this.iframe || !this.iframe.contentDocument) {
return;
}
- var n = cn.split('-').pop();
- var ans = this.footerEls;
- var sel = ans[n];
-
- this.editorcore.selectNode(sel);
-
-
- this.updateToolbar(null, null, sel);
-
-
- }
-
+ Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
+ },
+ removeStylesheets : function()
+ {
+ var _this = this;
+
+ Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
+ s.remove();
+ });
+ },
+ setStyle : function(style)
+ {
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'style',
+ type : 'text/css',
+ html : style
+ });
+
+ return;
+ }
+ // hide stuff that is not compatible
+ /**
+ * @event blur
+ * @hide
+ */
+ /**
+ * @event change
+ * @hide
+ */
+ /**
+ * @event focus
+ * @hide
+ */
+ /**
+ * @event specialkey
+ * @hide
+ */
+ /**
+ * @cfg {String} fieldClass @hide
+ */
+ /**
+ * @cfg {String} focusClass @hide
+ */
+ /**
+ * @cfg {String} autoCreate @hide
+ */
+ /**
+ * @cfg {String} inputType @hide
+ */
+ /**
+ * @cfg {String} invalidClass @hide
+ */
+ /**
+ * @cfg {String} invalidText @hide
+ */
+ /**
+ * @cfg {String} msgFx @hide
+ */
+ /**
+ * @cfg {String} validateOnBlur @hide
+ */
});
+Roo.HtmlEditorCore.white = [
+ 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
+
+ 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV',
+ 'DL', 'DT', 'H1', 'H2', 'H3', 'H4',
+ 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE',
+ 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE',
+ 'TABLE', 'UL', 'XMP',
+
+ 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH',
+ 'THEAD', 'TR',
+
+ 'DIR', 'MENU', 'OL', 'UL', 'DL',
+
+ 'EMBED', 'OBJECT'
+];
+
+
+Roo.HtmlEditorCore.black = [
+ // 'embed', 'object', // enable - backend responsiblity to clean thiese
+ 'APPLET', //
+ 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY',
+ 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER',
+ 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT',
+ 'SCRIPT', 'STYLE' ,'TITLE', 'XML',
+ //'FONT' // CLEAN LATER..
+ 'COLGROUP', 'COL' // messy tables.
+
+
+];
+Roo.HtmlEditorCore.clean = [ // ?? needed???
+ 'SCRIPT', 'STYLE', 'TITLE', 'XML'
+];
+Roo.HtmlEditorCore.tag_remove = [
+ 'FONT', 'TBODY'
+];
+// attributes..
+
+Roo.HtmlEditorCore.ablack = [
+ 'on'
+];
+
+Roo.HtmlEditorCore.aclean = [
+ 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
+];
+
+// protocols..
+Roo.HtmlEditorCore.pwhite= [
+ 'http', 'https', 'mailto'
+];
+
+// white listed style attributes.
+Roo.HtmlEditorCore.cwhite= [
+ // 'text-align', /// default is to allow most things..
+
+
+// 'font-size'//??
+];
+
+// black listed style attributes.
+Roo.HtmlEditorCore.cblack= [
+ // 'font-size' -- this can be set by the project
+];
+ //<script type="text/javascript">
+
/*
- * Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
+ * Licence LGPL
+ *
*/
-/**
- * @class Roo.form.BasicForm
- * @extends Roo.util.Observable
- * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
- * @constructor
- * @param {String/HTMLElement/Roo.Element} el The form element or its id
- * @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());
- });
- this.addEvents({
- /**
- * @event beforeaction
- * Fires before any action is performed. Return false to cancel the action.
- * @param {Form} this
- * @param {Action} action The action to be performed
- */
- beforeaction: true,
- /**
- * @event actionfailed
- * Fires when an action fails.
- * @param {Form} this
- * @param {Action} action The action that failed
- */
- actionfailed : true,
- /**
- * @event actioncomplete
- * Fires when an action is completed.
- * @param {Form} this
- * @param {Action} action The action that completed
- */
- actioncomplete : true
- });
- if(el){
- this.initEl(el);
+
+Roo.form.HtmlEditor = function(config){
+
+
+
+ Roo.form.HtmlEditor.superclass.constructor.call(this, config);
+
+ if (!this.toolbars) {
+ this.toolbars = [];
}
- Roo.form.BasicForm.superclass.constructor.call(this);
+ this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+
- Roo.form.BasicForm.popover.apply();
};
-Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
- /**
- * @cfg {String} method
- * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
- */
- /**
- * @cfg {DataReader} reader
- * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
- * This is optional as there is built-in support for processing JSON.
- */
- /**
- * @cfg {DataReader} errorReader
- * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
- * This is completely optional as there is built-in support for processing JSON.
- */
- /**
- * @cfg {String} url
- * The URL to use for form actions if one isn't supplied in the action options.
- */
+/**
+ * @class Roo.form.HtmlEditor
+ * @extends Roo.form.Field
+ * Provides a lightweight HTML Editor component.
+ *
+ * This has been tested on Fireforx / Chrome.. IE may not be so great..
+ *
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b><br/><br/>
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
/**
- * @cfg {Boolean} fileUpload
- * Set to true if this form is a file upload.
+ * @cfg {Boolean} clearUp
*/
-
- /**
- * @cfg {Object} baseParams
- * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+ clearUp : true,
+ /**
+ * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
*/
+ toolbars : false,
+
/**
-
- /**
- * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
+ * Roo.resizable.
*/
- timeout: 30,
-
- // private
- activeAction : null,
-
+ resizable : false,
+ /**
+ * @cfg {Number} height (in pixels)
+ */
+ height: 300,
+ /**
+ * @cfg {Number} width (in pixels)
+ */
+ width: 500,
+
/**
- * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
- * or setValues() data instead of when the form was first created.
+ * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea rootURL + '/roojs1/css/undoreset.css', .
+ *
*/
- trackResetOnLoad : false,
+ stylesheets: false,
- /**
- * childForms - used for multi-tab forms
- * @type {Array}
+ /**
+ * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
+ *
*/
- childForms : false,
-
+ cblack: false,
/**
- * allItems - full list of fields.
- * @type {Array}
+ * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
+ *
*/
- allItems : false,
+ cwhite: false,
+ /**
+ * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
+ *
+ */
+ black: 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.
- * @type Mixed
+ * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
+ *
*/
- waitMsgTarget : false,
-
+ white: false,
/**
- * @type Boolean
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
*/
- disableMask : false,
-
+ allowComments: false,
/**
- * @cfg {Boolean} errorMask Should the form be masked (and the active element highlighted on error - default false
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
*/
- errorMask : false,
+ enableBlocks : true,
/**
- * @cfg {Number} maskOffset space around form element to mask if there is an error Default 100
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
*/
- maskOffset : 100,
-
- // private
- initEl : function(el){
- this.el = Roo.get(el);
- this.id = this.el.id || Roo.id();
- this.el.on('submit', this.onSubmit, this);
- this.el.addClass('x-form');
- },
-
- // private
- onSubmit : function(e){
- e.stopEvent();
- },
-
+ autoClean: true,
/**
- * Returns true if client-side validation on the form is successful.
- * @return Boolean
+ * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
*/
- isValid : function(){
- var valid = true;
- var target = false;
- this.items.each(function(f){
- if(f.validate()){
- return;
- }
-
- valid = false;
-
- if(!target && f.el.isVisible(true)){
- target = f;
- }
- });
-
- if(this.errorMask && !valid){
- Roo.form.BasicForm.popover.mask(this, target);
- }
-
- return valid;
- },
+ bodyCls : '',
/**
- * Returns array of invalid form fields.
- * @return Array
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
*/
+ language: 'en',
- invalidFields : function()
- {
- var ret = [];
- this.items.each(function(f){
- if(f.validate()){
- return;
- }
- ret.push(f);
-
- });
-
- return ret;
- },
+
+ // id of frame..
+ frameId: false,
+ // private properties
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
- /**
- * DEPRICATED Returns true if any fields in this form have changed since their original load.
- * @return Boolean
- */
- isDirty : function(){
- var dirty = false;
- this.items.each(function(f){
- if(f.isDirty()){
- dirty = true;
- return false;
- }
- });
- return dirty;
- },
+ onFocus : Roo.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
- /**
- * Returns true if any fields in this form have changed since their original load. (New version)
- * @return Boolean
- */
+ actionMode : 'container', // defaults to hiding it...
- hasChanged : function()
- {
- var dirty = false;
- this.items.each(function(f){
- if(f.hasChanged()){
- dirty = true;
- return false;
- }
- });
- return dirty;
-
+ defaultAutoCreate : { // modified by initCompnoent..
+ tag: "textarea",
+ style:"width:500px;height:300px;",
+ autocomplete: "new-password"
},
- /**
- * Resets all hasChanged to 'false' -
- * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
- * So hasChanged storage is only to be used for this purpose
- * @return Boolean
- */
- resetHasChanged : function()
- {
- this.items.each(function(f){
- f.resetHasChanged();
+
+ // private
+ initComponent : function(){
+ this.addEvents({
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {HtmlEditor} this
+ */
+ initialize: true,
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {HtmlEditor} this
+ */
+ activate: true,
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ beforesync: true,
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ beforepush: true,
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ sync: true,
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ push: true,
+ /**
+ * @event editmodechange
+ * Fires when the editor switches edit modes
+ * @param {HtmlEditor} this
+ * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+ */
+ editmodechange: true,
+ /**
+ * @event editorevent
+ * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+ * @param {HtmlEditor} this
+ */
+ editorevent: true,
+ /**
+ * @event firstfocus
+ * Fires when on first focus - needed by toolbars..
+ * @param {HtmlEditor} this
+ */
+ firstfocus: true,
+ /**
+ * @event autosave
+ * Auto save the htmlEditor value as a file into Events
+ * @param {HtmlEditor} this
+ */
+ autosave: true,
+ /**
+ * @event savedpreview
+ * preview the saved version of htmlEditor
+ * @param {HtmlEditor} this
+ */
+ savedpreview: true,
+
+ /**
+ * @event stylesheetsclick
+ * Fires when press the Sytlesheets button
+ * @param {Roo.HtmlEditorCore} this
+ */
+ stylesheetsclick: true,
+ /**
+ * @event paste
+ * Fires when press user pastes into the editor
+ * @param {Roo.HtmlEditorCore} this
+ */
+ paste: true
+
});
-
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
+ autocomplete: "new-password"
+ };
},
-
-
+
/**
- * Performs a predefined action (submit or load) or custom actions you define on this form.
- * @param {String} actionName The name of the action type
- * @param {Object} options (optional) The options to pass to the action. All of the config options listed
- * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
- * accept other config options):
- * <pre>
-Property Type Description
----------------- --------------- ----------------------------------------------------------------------------------
-url String The url for the action (defaults to the form's url)
-method String The form method to use (defaults to the form's method, or POST if not defined)
-params String/Object The params to pass (defaults to the form's baseParams, or none if not defined)
-clientValidation Boolean Applies to submit only. Pass true to call form.isValid() prior to posting to
- validate the form on the client (defaults to false)
- * </pre>
- * @return {BasicForm} this
+ * Protected method that will not generally be called directly. It
+ * is called when the editor creates its toolbar. Override this method if you need to
+ * add custom toolbar buttons.
+ * @param {HtmlEditor} editor
*/
- doAction : function(action, options){
- if(typeof action == 'string'){
- action = new Roo.form.Action.ACTION_TYPES[action](this, options);
+ createToolbar : function(editor){
+ Roo.log("create toolbars");
+ if (!editor.toolbars || !editor.toolbars.length) {
+ editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
}
- if(this.fireEvent('beforeaction', this, action) !== false){
- this.beforeAction(action);
- action.run.defer(100, action);
+
+ for (var i =0 ; i < editor.toolbars.length;i++) {
+ editor.toolbars[i] = Roo.factory(
+ typeof(editor.toolbars[i]) == 'string' ?
+ { xtype: editor.toolbars[i]} : editor.toolbars[i],
+ Roo.form.HtmlEditor);
+ editor.toolbars[i].init(editor);
}
- return this;
- },
-
- /**
- * Shortcut to do a submit action.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
- * @return {BasicForm} this
- */
- submit : function(options){
- this.doAction('submit', options);
- return this;
- },
-
- /**
- * Shortcut to do a load action.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
- * @return {BasicForm} this
- */
- load : function(options){
- this.doAction('load', options);
- return this;
- },
-
- /**
- * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
- * @param {Record} record The record to edit
- * @return {BasicForm} this
- */
- updateRecord : function(record){
- record.beginEdit();
- var fs = record.fields;
- fs.each(function(f){
- var field = this.findField(f.name);
- if(field){
- record.set(f.name, field.getValue());
- }
- }, this);
- record.endEdit();
- return this;
+
+
},
-
/**
- * Loads an Roo.data.Record into this form.
- * @param {Record} record The record to load
- * @return {BasicForm} this
+ * get the Context selected node
+ * @returns {DomElement|boolean} selected node if active or false if none
+ *
*/
- loadRecord : function(record){
- this.setValues(record.data);
- return this;
+ getSelectedNode : function()
+ {
+ if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
+ return false;
+ }
+ return this.toolbars[1].tb.selectedNode;
+
},
-
// private
- beforeAction : function(action){
- var o = action.options;
+ onRender : function(ct, position)
+ {
+ var _t = this;
+ Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
- if(!this.disableMask) {
- if(this.waitMsgTarget === true){
- this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else if(this.waitMsgTarget){
- this.waitMsgTarget = Roo.get(this.waitMsgTarget);
- this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else {
- Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
- }
- }
+ this.wrap = this.el.wrap({
+ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+ });
+ this.editorcore.onRender(ct, position);
- },
-
- // private
- afterAction : function(action, success){
- this.activeAction = null;
- var o = action.options;
+ 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.createToolbar(this);
+
- if(!this.disableMask) {
- if(this.waitMsgTarget === true){
- this.el.unmask();
- }else if(this.waitMsgTarget){
- this.waitMsgTarget.unmask();
- }else{
- Roo.MessageBox.updateProgress(1);
- Roo.MessageBox.hide();
- }
+ if(!this.width){
+ this.setSize(this.wrap.getSize());
+ }
+ if (this.resizeEl) {
+ this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
+ // should trigger onReize..
}
- if(success){
- if(o.reset){
- this.reset();
- }
- Roo.callback(o.success, o.scope, [this, action]);
- this.fireEvent('actioncomplete', this, action);
-
- }else{
+ this.keyNav = new Roo.KeyNav(this.el, {
- // failure condition..
- // we have a scenario where updates need confirming.
- // eg. if a locking scenario exists..
- // we look for { errors : { needs_confirm : true }} in the response.
- if (
- (typeof(action.result) != 'undefined') &&
- (typeof(action.result.errors) != 'undefined') &&
- (typeof(action.result.errors.needs_confirm) != 'undefined')
- ){
- var _t = this;
- Roo.MessageBox.confirm(
- "Change requires confirmation",
- action.result.errorMsg,
- function(r) {
- if (r != 'yes') {
- return;
- }
- _t.doAction('submit', { params : { _submit_confirmed : 1 } } );
- }
-
- );
+ "tab" : function(e){
+ e.preventDefault();
+ var value = this.getValue();
+ var start = this.el.dom.selectionStart;
+ var end = this.el.dom.selectionEnd;
- return;
- }
-
- Roo.callback(o.failure, o.scope, [this, action]);
- // show an error message if no failed handler is set..
- if (!this.hasListener('actionfailed')) {
- Roo.MessageBox.alert("Error",
- (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
- action.result.errorMsg :
- "Saving Failed, please check your entries or try again"
- );
- }
-
- this.fireEvent('actionfailed', this, action);
- }
-
- },
-
- /**
- * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
- * @param {String} id The value to search for
- * @return Field
- */
- findField : function(id){
- var field = this.items.get(id);
- if(!field){
- this.items.each(function(f){
- if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
- field = f;
- return false;
+ if(!e.shiftKey){
+
+ this.setValue(value.substring(0, start) + "\t" + value.substring(end));
+ this.el.dom.setSelectionRange(end + 1, end + 1);
+ return;
}
- });
- }
- 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)
- {
-
- if (this.childForms.indexOf(form) > -1) {
- // already added..
- return;
- }
- this.childForms.push(form);
- var n = '';
- Roo.each(form.allItems, function (fe) {
-
- n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
- if (this.findField(n)) { // already added..
- return;
- }
- var add = new Roo.form.Hidden({
- name : n
- });
- add.render(this.el);
+
+ var f = value.substring(0, start).split("\t");
+
+ if(f.pop().length != 0){
+ return;
+ }
+
+ this.setValue(f.join("\t") + value.substring(end));
+ this.el.dom.setSelectionRange(start - 1, start - 1);
+
+ },
- this.add( add );
- }, 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}
- * @return {BasicForm} this
- */
- markInvalid : function(errors){
- if(errors instanceof Array){
- for(var i = 0, len = errors.length; i < len; i++){
- var fieldError = errors[i];
- var f = this.findField(fieldError.id);
- if(f){
- f.markInvalid(fieldError.msg);
+ "home" : function(e){
+ e.preventDefault();
+
+ var curr = this.el.dom.selectionStart;
+ var lines = this.getValue().split("\n");
+
+ if(!lines.length){
+ return;
}
- }
- }else{
- var field, id;
- for(id in errors){
- if(typeof errors[id] != 'function' && (field = this.findField(id))){
- field.markInvalid(errors[id]);
+
+ if(e.ctrlKey){
+ this.el.dom.setSelectionRange(0, 0);
+ return;
}
- }
- }
- Roo.each(this.childForms || [], function (f) {
- f.markInvalid(errors);
- });
-
- return this;
- },
-
- /**
- * Set values for fields in this form in bulk.
- * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
- * @return {BasicForm} this
- */
- setValues : function(values){
- if(values instanceof Array){ // array of objects
- for(var i = 0, len = values.length; i < len; i++){
- var v = values[i];
- var f = this.findField(v.id);
- if(f){
- f.setValue(v.value);
- if(this.trackResetOnLoad){
- f.originalValue = f.getValue();
+
+ var pos = 0;
+
+ for (var i = 0; i < lines.length;i++) {
+ pos += lines[i].length;
+
+ if(i != 0){
+ pos += 1;
+ }
+
+ if(pos < curr){
+ continue;
}
- }
- }
- }else{ // object hash
- var field, id;
- for(id in values){
- if(typeof values[id] != 'function' && (field = this.findField(id))){
+ pos -= lines[i].length;
+ break;
+ }
+
+ if(!e.shiftKey){
+ this.el.dom.setSelectionRange(pos, pos);
+ return;
+ }
+
+ this.el.dom.selectionStart = pos;
+ this.el.dom.selectionEnd = curr;
+ },
+
+ "end" : function(e){
+ e.preventDefault();
+
+ var curr = this.el.dom.selectionStart;
+ var lines = this.getValue().split("\n");
+
+ if(!lines.length){
+ return;
+ }
+
+ if(e.ctrlKey){
+ this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
+ return;
+ }
+
+ var pos = 0;
+
+ for (var i = 0; i < lines.length;i++) {
+ pos += lines[i].length;
- if (field.setFromData &&
- field.valueField &&
- field.displayField &&
- // combos' with local stores can
- // be queried via setValue()
- // to set their value..
- (field.store && !field.store.isLocal)
- ) {
- // it's a combo
- var sd = { };
- sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
- sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
- field.setFromData(sd);
-
- } else if (field.inputType && field.inputType == 'radio') {
-
- field.setValue(values[id]);
- } else {
- field.setValue(values[id]);
+ if(i != 0){
+ pos += 1;
}
-
- if(this.trackResetOnLoad){
- field.originalValue = field.getValue();
+ if(pos < curr){
+ continue;
}
+
+ break;
}
- }
- }
- this.resetHasChanged();
-
-
- Roo.each(this.childForms || [], function (f) {
- f.setValues(values);
- f.resetHasChanged();
- });
- return this;
+ if(!e.shiftKey){
+ this.el.dom.setSelectionRange(pos, pos);
+ return;
+ }
+
+ this.el.dom.selectionStart = curr;
+ this.el.dom.selectionEnd = pos;
+ },
+
+ scope : this,
+
+ doRelay : function(foo, bar, hname){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ },
+
+ forceKeyDown: true
+ });
+
+// if(this.autosave && this.w){
+// this.autoSaveFn = setInterval(this.autosave, 1000);
+// }
},
-
- /**
- * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
- * they are returned as an array.
- * @param {Boolean} asString (def)
- * @return {Object}
- */
- getValues : function(asString)
+
+ // private
+ onResize : function(w, h)
{
- if (this.childForms) {
- // copy values from the child forms
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
- }, this);
- }
+ Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+ var ew = false;
+ var eh = false;
- // use formdata
- if (typeof(FormData) != 'undefined' && asString !== true) {
- // this relies on a 'recent' version of chrome apparently...
- try {
- var fd = (new FormData(this.el.dom)).entries();
- var ret = {};
- var ent = fd.next();
- while (!ent.done) {
- ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
- ent = fd.next();
- };
- return ret;
- } catch(e) {
+ if(this.el ){
+ if(typeof w == 'number'){
+ var aw = w - this.wrap.getFrameWidth('lr');
+ this.el.setWidth(this.adjustWidth('textarea', aw));
+ ew = aw;
+ }
+ if(typeof h == 'number'){
+ var tbh = 0;
+ for (var i =0; i < this.toolbars.length;i++) {
+ // fixme - ask toolbars for heights?
+ tbh += this.toolbars[i].tb.el.getHeight();
+ if (this.toolbars[i].footer) {
+ tbh += this.toolbars[i].footer.el.getHeight();
+ }
+ }
+
+
+
+ var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
+ ah -= 5; // knock a few pixes off for look..
+// Roo.log(ah);
+ this.el.setHeight(this.adjustWidth('textarea', ah));
+ var eh = ah;
}
-
}
+ Roo.log('onResize:' + [w,h,ew,eh].join(',') );
+ this.editorcore.onResize(ew,eh);
-
- var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
- if(asString === true){
- return fs;
- }
- return Roo.urlDecode(fs);
},
-
+
/**
- * Returns the fields in this form as an object with key/value pairs.
- * This differs from getValues as it calls getValue on each child item, rather than using dom data.
- * Normally this will not return readOnly data
- * @param {Boolean} with_readonly return readonly field data.
- * @return {Object}
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
*/
- getFieldValues : function(with_readonly)
+ toggleSourceEdit : function(sourceEditMode)
{
- if (this.childForms) {
- // copy values from the child forms
- // should this call getFieldValues - probably not as we do not currently copy
- // hidden fields when we generate..
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getFieldValues());
- }, this);
- }
+ this.editorcore.toggleSourceEdit(sourceEditMode);
- var ret = {};
- this.items.each(function(f){
+ if(this.editorcore.sourceEditMode){
+ Roo.log('editor - showing textarea');
- if (f.readOnly && with_readonly !== true) {
- return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
- // if a subform contains a copy of them.
- // if you have subforms with the same editable data, you will need to copy the data back
- // and forth.
- }
+// Roo.log('in');
+// Roo.log(this.syncValue());
+ this.editorcore.syncValue();
+ this.el.removeClass('x-hidden');
+ this.el.dom.removeAttribute('tabIndex');
+ this.el.focus();
+ this.el.dom.scrollTop = 0;
- if (!f.getName()) {
- return;
- }
- var v = f.getValue();
- if (f.inputType =='radio') {
- if (typeof(ret[f.getName()]) == 'undefined') {
- ret[f.getName()] = ''; // empty..
- }
-
- if (!f.el.dom.checked) {
- return;
-
+
+ for (var i = 0; i < this.toolbars.length; i++) {
+ if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+ this.toolbars[i].tb.hide();
+ this.toolbars[i].footer.hide();
}
- v = f.el.dom.value;
-
}
- // not sure if this supported any more..
- if ((typeof(v) == 'object') && f.getRawValue) {
- v = f.getRawValue() ; // dates..
- }
- // combo boxes where name != hiddenName...
- if (f.name != f.getName()) {
- ret[f.name] = f.getRawValue();
+ }else{
+ Roo.log('editor - hiding textarea');
+// Roo.log('out')
+// Roo.log(this.pushValue());
+ this.editorcore.pushValue();
+
+ this.el.addClass('x-hidden');
+ this.el.dom.setAttribute('tabIndex', -1);
+
+ for (var i = 0; i < this.toolbars.length; i++) {
+ if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+ this.toolbars[i].tb.show();
+ this.toolbars[i].footer.show();
+ }
}
- ret[f.getName()] = v;
- });
+
+ //this.deferFocus();
+ }
- return ret;
+ this.setSize(this.wrap.getSize());
+ this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
+
+ this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
+ },
+
+ // private (for BoxComponent)
+ adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+ // private (for BoxComponent)
+ getResizeEl : function(){
+ return this.wrap;
+ },
+
+ // private (for BoxComponent)
+ getPositionEl : function(){
+ return this.wrap;
+ },
+
+ // private
+ initEvents : function(){
+ this.originalValue = this.getValue();
},
/**
- * Clears all invalid messages in this form.
- * @return {BasicForm} this
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
*/
- clearInvalid : function(){
- this.items.each(function(f){
- f.clearInvalid();
- });
-
- Roo.each(this.childForms || [], function (f) {
- f.clearInvalid();
- });
-
-
- return this;
+ markInvalid : Roo.emptyFn,
+ /**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ clearInvalid : Roo.emptyFn,
+
+ setValue : function(v){
+ Roo.form.HtmlEditor.superclass.setValue.call(this, v);
+ this.editorcore.pushValue();
},
/**
- * Resets this form.
- * @return {BasicForm} this
+ * update the language in the body - really done by core
+ * @param {String} language - eg. en / ar / zh-CN etc..
*/
- reset : function(){
- this.items.each(function(f){
- f.reset();
- });
+ updateLanguage : function(lang)
+ {
+ this.language = lang;
+ this.editorcore.language = lang;
+ this.editorcore.updateLanguage();
+
+ },
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
+ },
+
+ // doc'ed in Field
+ focus : function(){
+ this.editorcore.focus();
- Roo.each(this.childForms || [], function (f) {
- f.reset();
- });
- this.resetHasChanged();
+ },
+
+
+ // private
+ onDestroy : function(){
- return this;
+
+
+ if(this.rendered){
+
+ for (var i =0; i < this.toolbars.length;i++) {
+ // fixme - ask toolbars for heights?
+ this.toolbars[i].onDestroy();
+ }
+
+ this.wrap.dom.innerHTML = '';
+ this.wrap.remove();
+ }
},
+ // private
+ onFirstFocus : function(){
+ //Roo.log("onFirstFocus");
+ this.editorcore.onFirstFocus();
+ for (var i =0; i < this.toolbars.length;i++) {
+ this.toolbars[i].onFirstFocus();
+ }
+
+ },
+
+ // private
+ syncValue : function()
+ {
+ this.editorcore.syncValue();
+ },
+
+ pushValue : function()
+ {
+ this.editorcore.pushValue();
+ },
+
+ setStylesheets : function(stylesheets)
+ {
+ this.editorcore.setStylesheets(stylesheets);
+ },
+
+ removeStylesheets : function()
+ {
+ this.editorcore.removeStylesheets();
+ }
+
+
+ // hide stuff that is not compatible
/**
- * Add Roo.form components to this form.
- * @param {Field} field1
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return {BasicForm} this
+ * @event blur
+ * @hide
*/
- add : function(){
- this.items.addAll(Array.prototype.slice.call(arguments, 0));
- return this;
- },
-
-
/**
- * Removes a field from the items collection (does NOT remove its markup).
- * @param {Field} field
- * @return {BasicForm} this
+ * @event change
+ * @hide
*/
- remove : function(field){
- this.items.remove(field);
- return this;
- },
-
/**
- * Looks at the fields in this form, checks them for an id attribute,
- * and calls applyTo on the existing dom element with that id.
- * @return {BasicForm} this
+ * @event focus
+ * @hide
*/
- render : function(){
- this.items.each(function(f){
- if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
- f.applyTo(f.id);
- }
- });
- return this;
- },
-
/**
- * Calls {@link Ext#apply} for all fields in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
+ * @event specialkey
+ * @hide
*/
- applyToFields : function(o){
- this.items.each(function(f){
- Roo.apply(f, o);
- });
- return this;
- },
+ /**
+ * @cfg {String} fieldClass @hide
+ */
+ /**
+ * @cfg {String} focusClass @hide
+ */
+ /**
+ * @cfg {String} autoCreate @hide
+ */
+ /**
+ * @cfg {String} inputType @hide
+ */
+ /**
+ * @cfg {String} invalidClass @hide
+ */
+ /**
+ * @cfg {String} invalidText @hide
+ */
+ /**
+ * @cfg {String} msgFx @hide
+ */
+ /**
+ * @cfg {String} validateOnBlur @hide
+ */
+});
+
+ /*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+
+ */
+
+/**
+ * @class Roo.form.HtmlEditor.ToolbarStandard
+ * Basic Toolbar
+
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+ ....
+ toolbars : [
+ new Roo.form.HtmlEditorToolbar1({
+ disable : { fonts: 1 , format: 1, ..., ... , ...],
+ btns : [ .... ]
+ })
+ }
+
+ *
+ * @cfg {Object} disable List of elements to disable..
+ * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
+ *
+ *
+ * NEEDS Extra CSS?
+ * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
+ */
+
+Roo.form.HtmlEditor.ToolbarStandard = function(config)
+{
+
+ Roo.apply(this, config);
+
+ // default disabled, based on 'good practice'..
+ this.disable = this.disable || {};
+ Roo.applyIf(this.disable, {
+ fontSize : true,
+ colors : true,
+ specialElements : true
+ });
+
+
+ //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+ // dont call parent... till later.
+}
+Roo.form.HtmlEditor.ToolbarStandard.prototype = {
+
+ tb: false,
+
+ rendered: false,
+
+ editor : false,
+ editorcore : false,
/**
- * Calls {@link Ext#applyIf} for all field in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
+ * @cfg {Object} disable List of toolbar elements to disable
+
*/
- applyIfToFields : function(o){
- this.items.each(function(f){
- Roo.applyIf(f, o);
+ disable : false,
+
+
+ /**
+ * @cfg {String} createLinkText The default text for the create link prompt
+ */
+ createLinkText : 'Please enter the URL for the link:',
+ /**
+ * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ */
+ defaultLinkValue : 'http:/'+'/',
+
+
+ /**
+ * @cfg {Array} fontFamilies An array of available font families
+ */
+ fontFamilies : [
+ 'Arial',
+ 'Courier New',
+ 'Tahoma',
+ 'Times New Roman',
+ 'Verdana'
+ ],
+
+ specialChars : [
+ "©",
+ "®",
+ "™",
+ "£" ,
+ // "—",
+ "…",
+ "÷" ,
+ // "á" , ?? a acute?
+ "€" , //Euro
+ // "“" ,
+ // "”" ,
+ // "•" ,
+ "°" // , // degrees
+
+ // "é" , // e ecute
+ // "ú" , // u ecute?
+ ],
+
+ specialElements : [
+ {
+ text: "Insert Table",
+ xtype: 'MenuItem',
+ xns : Roo.Menu,
+ ihtml : '<table><tr><td>Cell</td></tr></table>'
+
+ },
+ {
+ text: "Insert Image",
+ xtype: 'MenuItem',
+ xns : Roo.Menu,
+ ihtml : '<img src="about:blank"/>'
+
+ }
+
+
+ ],
+
+
+ inputElements : [
+ "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
+ "input:submit", "input:button", "select", "textarea", "label" ],
+ formats : [
+ ["p"] ,
+ ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
+ ["pre"],[ "code"],
+ ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
+ ['div'],['span'],
+ ['sup'],['sub']
+ ],
+
+ cleanStyles : [
+ "font-size"
+ ],
+ /**
+ * @cfg {String} defaultFont default font to use.
+ */
+ defaultFont: 'tahoma',
+
+ fontSelect : false,
+
+
+ formatCombo : false,
+
+ init : function(editor)
+ {
+ this.editor = editor;
+ this.editorcore = editor.editorcore ? editor.editorcore : editor;
+ var editorcore = this.editorcore;
+
+ var _t = this;
+
+ var fid = editorcore.frameId;
+ var etb = this;
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: _t, // was editor...
+ handler:handler||_t.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
+ };
+ }
+
+
+
+ var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+ this.tb = tb;
+ // stop form submits
+ tb.el.on('click', function(e){
+ e.preventDefault(); // what does this do?
});
- return this;
- }
-});
-// back compat
-Roo.BasicForm = Roo.form.BasicForm;
+ if(!this.disable.font) { // && !Roo.isSafari){
+ /* why no safari for fonts
+ editor.fontSelect = tb.el.createChild({
+ tag:'select',
+ tabIndex: -1,
+ cls:'x-font-select',
+ html: this.createFontOptions()
+ });
+
+ editor.fontSelect.on('change', function(){
+ var font = editor.fontSelect.dom.value;
+ editor.relayCmd('fontname', font);
+ editor.deferFocus();
+ }, editor);
+
+ tb.add(
+ editor.fontSelect.dom,
+ '-'
+ );
+ */
+
+ };
+ if(!this.disable.formats){
+ this.formatCombo = new Roo.form.ComboBox({
+ store: new Roo.data.SimpleStore({
+ id : 'tag',
+ fields: ['tag'],
+ data : this.formats // from states.js
+ }),
+ blockFocus : true,
+ name : '',
+ //autoCreate : {tag: "div", size: "20"},
+ displayField:'tag',
+ typeAhead: false,
+ mode: 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Add tag',
+ selectOnFocus:true,
+ width:135,
+ listeners : {
+ 'select': function(c, r, i) {
+ editorcore.insertTag(r.get('tag'));
+ editor.focus();
+ }
+ }
-Roo.apply(Roo.form.BasicForm, {
-
- popover : {
-
- padding : 5,
-
- isApplied : false,
-
- isMasked : false,
-
- form : false,
+ });
+ tb.addField(this.formatCombo);
+
+ }
- target : false,
+ if(!this.disable.format){
+ tb.add(
+ btn('bold'),
+ btn('italic'),
+ btn('underline'),
+ btn('strikethrough')
+ );
+ };
+ if(!this.disable.fontSize){
+ tb.add(
+ '-',
+
+
+ btn('increasefontsize', false, editorcore.adjustFont),
+ btn('decreasefontsize', false, editorcore.adjustFont)
+ );
+ };
- intervalID : false,
- maskEl : false,
+ if(!this.disable.colors){
+ tb.add(
+ '-', {
+ id:editorcore.frameId +'-forecolor',
+ cls:'x-btn-icon x-edit-forecolor',
+ clickEvent:'mousedown',
+ tooltip: this.buttonTips['forecolor'] || undefined,
+ tabIndex:-1,
+ menu : new Roo.menu.ColorMenu({
+ allowReselect: true,
+ focus: Roo.emptyFn,
+ value:'000000',
+ plain:true,
+ selectHandler: function(cp, color){
+ editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
+ editor.deferFocus();
+ },
+ scope: editorcore,
+ clickEvent:'mousedown'
+ })
+ }, {
+ id:editorcore.frameId +'backcolor',
+ cls:'x-btn-icon x-edit-backcolor',
+ clickEvent:'mousedown',
+ tooltip: this.buttonTips['backcolor'] || undefined,
+ tabIndex:-1,
+ menu : new Roo.menu.ColorMenu({
+ focus: Roo.emptyFn,
+ value:'FFFFFF',
+ plain:true,
+ allowReselect: true,
+ selectHandler: function(cp, color){
+ if(Roo.isGecko){
+ editorcore.execCmd('useCSS', false);
+ editorcore.execCmd('hilitecolor', color);
+ editorcore.execCmd('useCSS', true);
+ editor.deferFocus();
+ }else{
+ editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
+ Roo.isSafari || Roo.isIE ? '#'+color : color);
+ editor.deferFocus();
+ }
+ },
+ scope:editorcore,
+ clickEvent:'mousedown'
+ })
+ }
+ );
+ };
+ // now add all the items...
- apply : function()
- {
- if(this.isApplied){
- return;
+
+ if(!this.disable.alignments){
+ tb.add(
+ '-',
+ btn('justifyleft'),
+ btn('justifycenter'),
+ btn('justifyright')
+ );
+ };
+
+ //if(!Roo.isSafari){
+ if(!this.disable.links){
+ tb.add(
+ '-',
+ btn('createlink', false, this.createLink) /// MOVE TO HERE?!!?!?!?!
+ );
+ };
+
+ if(!this.disable.lists){
+ tb.add(
+ '-',
+ btn('insertorderedlist'),
+ btn('insertunorderedlist')
+ );
}
-
- this.maskEl = {
- top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
- left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
- bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
- right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+ if(!this.disable.sourceEdit){
+ tb.add(
+ '-',
+ btn('sourceedit', true, function(btn){
+ this.toggleSourceEdit(btn.pressed);
+ })
+ );
+ }
+ //}
+
+ var smenu = { };
+ // special menu.. - needs to be tidied up..
+ if (!this.disable.special) {
+ smenu = {
+ text: "©",
+ cls: 'x-edit-none',
+
+ menu : {
+ items : []
+ }
};
+ for (var i =0; i < this.specialChars.length; i++) {
+ smenu.menu.items.push({
+
+ html: this.specialChars[i],
+ handler: function(a,b) {
+ editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
+ //editor.insertAtCursor(a.html);
+
+ },
+ tabIndex:-1
+ });
+ }
- this.maskEl.top.enableDisplayMode("block");
- this.maskEl.left.enableDisplayMode("block");
- this.maskEl.bottom.enableDisplayMode("block");
- this.maskEl.right.enableDisplayMode("block");
- Roo.get(document.body).on('click', function(){
- this.unmask();
- }, this);
+ tb.add(smenu);
- Roo.get(document.body).on('touchstart', function(){
- this.unmask();
- }, this);
- this.isApplied = true
- },
+ }
- mask : function(form, target)
- {
- this.form = form;
-
- this.target = target;
-
- if(!this.form.errorMask || !target.el){
- return;
+ var cmenu = { };
+ if (!this.disable.cleanStyles) {
+ cmenu = {
+ cls: 'x-btn-icon x-btn-clear',
+
+ menu : {
+ items : []
+ }
+ };
+ for (var i =0; i < this.cleanStyles.length; i++) {
+ cmenu.menu.items.push({
+ actiontype : this.cleanStyles[i],
+ html: 'Remove ' + this.cleanStyles[i],
+ handler: function(a,b) {
+// Roo.log(a);
+// Roo.log(b);
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[style]').each(function(s) {
+ s.dom.style.removeProperty(a.actiontype);
+ });
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
}
+ cmenu.menu.items.push({
+ actiontype : 'tablewidths',
+ html: 'Remove Table Widths',
+ handler: function(a,b) {
+ editorcore.cleanTableWidths();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+ cmenu.menu.items.push({
+ actiontype : 'word',
+ html: 'Remove MS Word Formating',
+ handler: function(a,b) {
+ editorcore.cleanWord();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
-
- var ot = this.target.el.calcOffsetsTo(scrollable);
-
- var scrollTo = ot[1] - this.form.maskOffset;
-
- scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
-
- scrollable.scrollTo('top', scrollTo);
-
- var el = this.target.wrap || this.target.el;
-
- var box = el.getBox();
+ cmenu.menu.items.push({
+ actiontype : 'all',
+ html: 'Remove All Styles',
+ handler: function(a,b) {
+
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[style]').each(function(s) {
+ s.dom.removeAttribute('style');
+ });
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- this.maskEl.top.setStyle('position', 'absolute');
- this.maskEl.top.setStyle('z-index', 10000);
- this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
- this.maskEl.top.setLeft(0);
- this.maskEl.top.setTop(0);
- this.maskEl.top.show();
+ cmenu.menu.items.push({
+ actiontype : 'all',
+ html: 'Remove All CSS Classes',
+ handler: function(a,b) {
+
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[class]').each(function(s) {
+ s.dom.removeAttribute('class');
+ });
+ editorcore.cleanWord();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- this.maskEl.left.setStyle('position', 'absolute');
- this.maskEl.left.setStyle('z-index', 10000);
- this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
- this.maskEl.left.setLeft(0);
- this.maskEl.left.setTop(box.y - this.padding);
- this.maskEl.left.show();
-
- this.maskEl.bottom.setStyle('position', 'absolute');
- this.maskEl.bottom.setStyle('z-index', 10000);
- this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
- this.maskEl.bottom.setLeft(0);
- this.maskEl.bottom.setTop(box.bottom + this.padding);
- this.maskEl.bottom.show();
-
- this.maskEl.right.setStyle('position', 'absolute');
- this.maskEl.right.setStyle('z-index', 10000);
- this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
- this.maskEl.right.setLeft(box.right + this.padding);
- this.maskEl.right.setTop(box.y - this.padding);
- this.maskEl.right.show();
-
- this.intervalID = window.setInterval(function() {
- Roo.form.BasicForm.popover.unmask();
- }, 10000);
-
- window.onwheel = function(){ return false;};
+ cmenu.menu.items.push({
+ actiontype : 'tidy',
+ html: 'Tidy HTML Source',
+ handler: function(a,b) {
+ new Roo.htmleditor.Tidy(editorcore.doc.body);
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- (function(){ this.isMasked = true; }).defer(500, this);
- },
-
- unmask : function()
- {
- if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
- return;
+ tb.add(cmenu);
+ }
+
+ if (!this.disable.specialElements) {
+ var semenu = {
+ text: "Other;",
+ cls: 'x-edit-none',
+ menu : {
+ items : []
+ }
+ };
+ for (var i =0; i < this.specialElements.length; i++) {
+ semenu.menu.items.push(
+ Roo.apply({
+ handler: function(a,b) {
+ editor.insertAtCursor(this.ihtml);
+ }
+ }, this.specialElements[i])
+ );
+
}
- this.maskEl.top.setStyle('position', 'absolute');
- this.maskEl.top.setSize(0, 0).setXY([0, 0]);
- this.maskEl.top.hide();
-
- this.maskEl.left.setStyle('position', 'absolute');
- this.maskEl.left.setSize(0, 0).setXY([0, 0]);
- this.maskEl.left.hide();
-
- this.maskEl.bottom.setStyle('position', 'absolute');
- this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
- this.maskEl.bottom.hide();
-
- this.maskEl.right.setStyle('position', 'absolute');
- this.maskEl.right.setSize(0, 0).setXY([0, 0]);
- this.maskEl.right.hide();
-
- window.onwheel = function(){ return true;};
-
- if(this.intervalID){
- window.clearInterval(this.intervalID);
- this.intervalID = false;
- }
+ tb.add(semenu);
- this.isMasked = false;
}
-
- }
-
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Form
- * @extends Roo.form.BasicForm
- * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Form = function(config){
- var xitems = [];
- if (config.items) {
- xitems = config.items;
- delete config.items;
- }
-
-
- Roo.form.Form.superclass.constructor.call(this, null, config);
- this.url = this.url || this.action;
- if(!this.root){
- this.root = new Roo.form.Layout(Roo.applyIf({
- id: Roo.id()
- }, config));
- }
- this.active = this.root;
- /**
- * Array of all the buttons that have been added to this form via {@link addButton}
- * @type Array
- */
- this.buttons = [];
- this.allItems = [];
- this.addEvents({
- /**
- * @event clientvalidation
- * If the monitorValid config option is true, this event fires repetitively to notify of valid state
- * @param {Form} this
- * @param {Boolean} valid true if the form has passed client-side validation
- */
- clientvalidation: true,
- /**
- * @event rendered
- * Fires when the form is rendered
- * @param {Roo.form.Form} form
- */
- rendered : true
- });
-
- if (this.progressUrl) {
- // push a hidden field onto the list of fields..
- this.addxtype( {
- xns: Roo.form,
- xtype : 'Hidden',
- name : 'UPLOAD_IDENTIFIER'
- });
- }
-
-
- Roo.each(xitems, this.addxtype, this);
-
-};
-
-Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
- /**
- * @cfg {Roo.Button} buttons[] buttons at bottom of form
- */
-
- /**
- * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
- */
- /**
- * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
- */
- /**
- * @cfg {String} buttonAlign (left|center|right) Valid values are "left," "center" and "right" (defaults to "center")
- */
- buttonAlign:'center',
-
- /**
- * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
- */
- minButtonWidth:75,
-
- /**
- * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
- * This property cascades to child containers if not set.
- */
- labelAlign:'left',
-
- /**
- * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
- * fires a looping event with that state. This is required to bind buttons to the valid
- * state using the config value formBind:true on the button.
- */
- monitorValid : false,
-
- /**
- * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
- */
- monitorPoll : 200,
-
- /**
- * @cfg {String} progressUrl - Url to return progress data
- */
-
- progressUrl : false,
- /**
- * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
- * sending a formdata with extra parameters - eg uploaded elements.
- */
-
- formData : false,
-
- /**
- * 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
- * until end() is called.
- * @param {Object} config The config to pass to the column
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return Column The column container object
- */
- column : function(c){
- var col = new Roo.form.Column(c);
- this.start(col);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
+
+
+ if (this.btns) {
+ for(var i =0; i< this.btns.length;i++) {
+ var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
+ b.cls = 'x-edit-none';
+
+ if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
+ b.cls += ' x-init-enable';
+ }
+
+ b.scope = editorcore;
+ tb.add(b);
+ }
+
}
- return col;
+
+
+
+ // disable everything...
+
+ this.tb.items.each(function(item){
+
+ if(
+ item.id != editorcore.frameId+ '-sourceedit' &&
+ (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
+ ){
+
+ item.disable();
+ }
+ });
+ this.rendered = true;
+
+ // the all the btns;
+ editor.on('editorevent', this.updateToolbar, this);
+ // other toolbars need to implement this..
+ //editor.on('editmodechange', this.updateToolbar, this);
},
-
- /**
- * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
- * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
- * until end() is called.
- * @param {Object} config The config to pass to the fieldset
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return FieldSet The fieldset container object
- */
- fieldset : function(c){
- var fs = new Roo.form.FieldSet(c);
- this.start(fs);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
- }
- return fs;
+
+
+ relayBtnCmd : function(btn) {
+ this.editorcore.relayCmd(btn.cmd);
},
-
- /**
- * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
- * fields are added and the container is closed. If no fields are passed the container remains open
- * until end() is called.
- * @param {Object} config The config to pass to the Layout
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return Layout The container object
- */
- container : function(c){
- var l = new Roo.form.Layout(c);
- this.start(l);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
+ // private used internally
+ createLink : function(){
+ //Roo.log("create link?");
+ var ec = this.editorcore;
+ var ar = ec.getAllAncestors();
+ var n = false;
+ for(var i = 0;i< ar.length;i++) {
+ if (ar[i] && ar[i].nodeName == 'A') {
+ n = ar[i];
+ break;
+ }
}
- return l;
+
+ (function() {
+
+ Roo.MessageBox.show({
+ title : "Add / Edit Link URL",
+ msg : "Enter the url for the link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, url){
+ if (btn != 'ok') {
+ return;
+ }
+ if(url && url != 'http:/'+'/'){
+ if (n) {
+ n.setAttribute('href', url);
+ } else {
+ ec.relayCmd('createlink', url);
+ }
+ }
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : n ? n.getAttribute('href') : ''
+ });
+
+
+ }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
+
},
+
/**
- * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
- * @param {Object} container A Roo.form.Layout or subclass of Layout
- * @return {Form} this
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
*/
- start : function(c){
- // cascade label info
- Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
- this.active.stack.push(c);
- c.ownerCt = this.active;
- this.active = c;
- return this;
- },
+ updateToolbar: function(){
- /**
- * Closes the current open container
- * @return {Form} this
- */
- end : function(){
- if(this.active == this.root){
- return this;
+ if(!this.editorcore.activated){
+ this.editor.onFirstFocus();
+ return;
}
- this.active = this.active.ownerCt;
- return this;
- },
- /**
- * Add Roo.form components to the current open container (e.g. column, fieldset, etc.). Fields added via this method
- * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
- * as the label of the field.
- * @param {Field} field1
- * @param {Field} field2 (optional)
- * @param {Field} etc. (optional)
- * @return {Form} this
- */
- add : function(){
- this.active.stack.push.apply(this.active.stack, arguments);
- this.allItems.push.apply(this.allItems,arguments);
- var r = [];
- for(var i = 0, a = arguments, len = a.length; i < len; i++) {
- if(a[i].isFormField){
- r.push(a[i]);
+ var btns = this.tb.items.map,
+ doc = this.editorcore.doc,
+ frameId = this.editorcore.frameId;
+
+ if(!this.disable.font && !Roo.isSafari){
+ /*
+ var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
+ if(name != this.fontSelect.dom.value){
+ this.fontSelect.dom.value = name;
}
+ */
}
- if(r.length > 0){
- Roo.form.Form.superclass.add.apply(this, r);
+ if(!this.disable.format){
+ btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
+ btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
+ btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+ btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
}
- 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..
- * @param {String} id - id or name to find.
-
- * @return {Element} e - or false if nothing found.
- */
- findbyId : function(id)
- {
- var ret = false;
- if (!id) {
- return ret;
+ if(!this.disable.alignments){
+ btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
+ btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
+ btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
+ }
+ if(!Roo.isSafari && !this.disable.lists){
+ btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
+ btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
}
- Roo.each(this.allItems, function(f){
- if (f.id == id || f.name == id ){
- ret = f;
- return false;
- }
- });
- return ret;
- },
-
-
-
- /**
- * Render this form into the passed container. This should only be called once!
- * @param {String/HTMLElement/Element} container The element this component should be rendered into
- * @return {Form} this
- */
- render : function(ct)
- {
+ var ans = this.editorcore.getAllAncestors();
+ if (this.formatCombo) {
+
+
+ var store = this.formatCombo.store;
+ this.formatCombo.setValue("");
+ for (var i =0; i < ans.length;i++) {
+ if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
+ // select it..
+ this.formatCombo.setValue(ans[i].tagName.toLowerCase());
+ break;
+ }
+ }
+ }
- ct = Roo.get(ct);
- var o = this.autoCreate || {
- tag: 'form',
- method : this.method || 'POST',
- id : this.id || Roo.id()
- };
- this.initEl(ct.createChild(o));
-
- this.root.render(this.el);
-
-
- this.items.each(function(f){
- f.render('x-form-el-'+f.id);
- });
+ // hides menus... - so this cant be on a menu...
+ Roo.menu.MenuMgr.hideAll();
- if(this.buttons.length > 0){
- // tables are required to maintain order and for correct IE layout
- var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
- cls:"x-form-btns x-form-btns-"+this.buttonAlign,
- html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
- }}, null, true);
- var tr = tb.getElementsByTagName('tr')[0];
- for(var i = 0, len = this.buttons.length; i < len; i++) {
- var b = this.buttons[i];
- var td = document.createElement('td');
- td.className = 'x-form-btn-td';
- b.render(tr.appendChild(td));
- }
- }
- if(this.monitorValid){ // initialize after render
- this.startMonitoring();
- }
- this.fireEvent('rendered', this);
- return this;
+ //this.editorsyncValue();
},
-
- /**
- * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
- * @param {String/Object} config A string becomes the button text, an object can either be a Button config
- * object or a valid Roo.DomHelper element config
- * @param {Function} handler The function called when the button is clicked
- * @param {Object} scope (optional) The scope of the handler function
- * @return {Roo.Button}
- */
- addButton : function(config, handler, scope){
- var bc = {
- handler: handler,
- scope: scope,
- minWidth: this.minButtonWidth,
- hideParent:true
- };
- if(typeof config == "string"){
- bc.text = config;
- }else{
- Roo.apply(bc, config);
+
+
+ createFontOptions : function(){
+ var buf = [], fs = this.fontFamilies, ff, lc;
+
+
+
+ for(var i = 0, len = fs.length; i< len; i++){
+ ff = fs[i];
+ lc = ff.toLowerCase();
+ buf.push(
+ '<option value="',lc,'" style="font-family:',ff,';"',
+ (this.defaultFont == lc ? ' selected="true">' : '>'),
+ ff,
+ '</option>'
+ );
}
- var btn = new Roo.Button(null, bc);
- this.buttons.push(btn);
- return btn;
+ return buf.join('');
},
-
- /**
- * Adds a series of form elements (using the xtype property as the factory method.
- * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
- * @param {Object} config
- */
- addxtype : function()
- {
- var ar = Array.prototype.slice.call(arguments, 0);
- var ret = false;
- for(var i = 0; i < ar.length; i++) {
- if (!ar[i]) {
- continue; // skip -- if this happends something invalid got sent, we
- // should ignore it, as basically that interface element will not show up
- // and that should be pretty obvious!!
- }
-
- if (Roo.form[ar[i].xtype]) {
- ar[i].form = this;
- var fe = Roo.factory(ar[i], Roo.form);
- if (!ret) {
- ret = fe;
- }
- fe.form = this;
- if (fe.store) {
- fe.store.form = this;
- }
- if (fe.isLayout) {
-
- this.start(fe);
- this.allItems.push(fe);
- if (fe.items && fe.addxtype) {
- fe.addxtype.apply(fe, fe.items);
- delete fe.items;
- }
- this.end();
- continue;
+ toggleSourceEdit : function(sourceEditMode){
+
+ Roo.log("toolbar toogle");
+ if(sourceEditMode === undefined){
+ sourceEditMode = !this.sourceEditMode;
+ }
+ this.sourceEditMode = sourceEditMode === true;
+ var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
+ // just toggle the button?
+ if(btn.pressed !== this.sourceEditMode){
+ btn.toggle(this.sourceEditMode);
+ return;
+ }
+
+ if(sourceEditMode){
+ Roo.log("disabling buttons");
+ this.tb.items.each(function(item){
+ if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
+ item.disable();
}
-
-
-
- this.add(fe);
- // console.log('adding ' + ar[i].xtype);
- }
- if (ar[i].xtype == 'Button') {
- //console.log('adding button');
- //console.log(ar[i]);
- this.addButton(ar[i]);
- this.allItems.push(fe);
- continue;
- }
+ });
+
+ }else{
+ Roo.log("enabling buttons");
+ if(this.editorcore.initialized){
+ this.tb.items.each(function(item){
+ item.enable();
+ });
+ // initialize 'blocks'
+ Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+ Roo.htmleditor.Block.factory(e).updateElement(e);
+ },this);
- if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
- alert('end is not supported on xtype any more, use items');
- // this.end();
- // //console.log('adding end');
}
}
- return ret;
+ Roo.log("calling toggole on editor");
+ // tell the editor that it's been pressed..
+ this.editor.toggleSourceEdit(sourceEditMode);
+
},
-
- /**
- * Starts monitoring of the valid state of this form. Usually this is done by passing the config
- * option "monitorValid"
- */
- startMonitoring : function(){
- if(!this.bound){
- this.bound = true;
- Roo.TaskMgr.start({
- run : this.bindHandler,
- interval : this.monitorPoll || 200,
- scope: this
- });
- }
+ /**
+ * Object collection of toolbar tooltips for the buttons in the editor. The key
+ * is the command id associated with that button and the value is a valid QuickTips object.
+ * For example:
+<pre><code>
+{
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
},
-
- /**
- * Stops monitoring of the valid state of this form
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ ...
+</code></pre>
+ * @type Object
*/
- stopMonitoring : function(){
- this.bound = false;
+ buttonTips : {
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ underline : {
+ title: 'Underline (Ctrl+U)',
+ text: 'Underline the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ strikethrough : {
+ title: 'Strikethrough',
+ text: 'Strikethrough the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ increasefontsize : {
+ title: 'Grow Text',
+ text: 'Increase the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ decreasefontsize : {
+ title: 'Shrink Text',
+ text: 'Decrease the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ backcolor : {
+ title: 'Text Highlight Color',
+ text: 'Change the background color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ forecolor : {
+ title: 'Font Color',
+ text: 'Change the color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyleft : {
+ title: 'Align Text Left',
+ text: 'Align text to the left.',
+ cls: 'x-html-editor-tip'
+ },
+ justifycenter : {
+ title: 'Center Text',
+ text: 'Center text in the editor.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyright : {
+ title: 'Align Text Right',
+ text: 'Align text to the right.',
+ cls: 'x-html-editor-tip'
+ },
+ insertunorderedlist : {
+ title: 'Bullet List',
+ text: 'Start a bulleted list.',
+ cls: 'x-html-editor-tip'
+ },
+ insertorderedlist : {
+ title: 'Numbered List',
+ text: 'Start a numbered list.',
+ cls: 'x-html-editor-tip'
+ },
+ createlink : {
+ title: 'Hyperlink',
+ text: 'Make the selected text a hyperlink.',
+ cls: 'x-html-editor-tip'
+ },
+ sourceedit : {
+ title: 'Source Edit',
+ text: 'Switch to source editing mode.',
+ cls: 'x-html-editor-tip'
+ }
},
-
// private
- bindHandler : function(){
- if(!this.bound){
- return false; // stops binding
+ onDestroy : function(){
+ if(this.rendered){
+
+ this.tb.items.each(function(item){
+ if(item.menu){
+ item.menu.removeAll();
+ if(item.menu.el){
+ item.menu.el.destroy();
+ }
+ }
+ item.destroy();
+ });
+
}
- var valid = true;
- this.items.each(function(f){
- if(!f.isValid(true)){
- valid = false;
- return false;
- }
+ },
+ onFirstFocus: function() {
+ this.tb.items.each(function(item){
+ item.enable();
});
- for(var i = 0, len = this.buttons.length; i < len; i++){
- var btn = this.buttons[i];
- if(btn.formBind === true && btn.disabled === valid){
- btn.setDisabled(!valid);
- }
- }
- this.fireEvent('clientvalidation', this, valid);
}
-
-
-
-
-
-
-
-
-});
+};
-// back compat
-Roo.Form = Roo.form.Form;
+
+
+// <script type="text/javascript">
/*
- * Based on:
+ * Based on
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-// as we use this in bootstrap.
-Roo.namespace('Roo.form');
- /**
- * @class Roo.form.Action
- * Internal Class used to handle form actions
- * @constructor
- * @param {Roo.form.BasicForm} el The form element or its id
- * @param {Object} config Configuration options
+ *
+
*/
-
-// define the action interface
-Roo.form.Action = function(form, options){
- this.form = form;
- this.options = options || {};
-};
-/**
- * Client Validation Failed
- * @const
- */
-Roo.form.Action.CLIENT_INVALID = 'client';
-/**
- * Server Validation Failed
- * @const
- */
-Roo.form.Action.SERVER_INVALID = 'server';
- /**
- * Connect to Server Failed
- * @const
- */
-Roo.form.Action.CONNECT_FAILURE = 'connect';
/**
- * Reading Data from Server Failed
- * @const
- */
-Roo.form.Action.LOAD_FAILURE = 'load';
-
-Roo.form.Action.prototype = {
- type : 'default',
- failureType : undefined,
- response : undefined,
- result : undefined,
-
- // interface method
- run : function(options){
-
- },
-
- // interface method
- success : function(response){
+ * @class Roo.form.HtmlEditor.ToolbarContext
+ * Context Toolbar
+ *
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+ ....
+ toolbars : [
+ { xtype: 'ToolbarStandard', styles : {} }
+ { xtype: 'ToolbarContext', disable : {} }
+ ]
+})
- },
+
+ *
+ * @config : {Object} disable List of elements to disable.. (not done yet.)
+ * @config : {Object} styles Map of styles available.
+ *
+ */
- // interface method
- handleResponse : function(response){
+Roo.form.HtmlEditor.ToolbarContext = function(config)
+{
+
+ Roo.apply(this, config);
+ //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+ // dont call parent... till later.
+ this.styles = this.styles || {};
+}
- },
+
- // default connection failure
- failure : function(response){
+Roo.form.HtmlEditor.ToolbarContext.types = {
+ 'IMG' : [
+ {
+ name : 'width',
+ title: "Width",
+ width: 40
+ },
+ {
+ name : 'height',
+ title: "Height",
+ width: 40
+ },
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
+
+ },
+ {
+ name : 'border',
+ title: "Border",
+ width: 40
+ },
+ {
+ name : 'alt',
+ title: "Alt",
+ width: 120
+ },
+ {
+ name : 'src',
+ title: "Src",
+ width: 220
+ }
- this.response = response;
- this.failureType = Roo.form.Action.CONNECT_FAILURE;
- this.form.afterAction(this, false);
- },
-
- processResponse : function(response){
- this.response = response;
- if(!response.responseText){
- return true;
+ ],
+
+ 'FIGURE' : [
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
}
- this.result = this.handleResponse(response);
- return this.result;
- },
-
- // utility functions used internally
- getUrl : function(appendParams){
- var url = this.options.url || this.form.url || this.form.el.dom.action;
- if(appendParams){
- var p = this.getParams();
- if(p){
- url += (url.indexOf('?') != -1 ? '&' : '?') + p;
- }
+ ],
+ 'A' : [
+ {
+ name : 'name',
+ title: "Name",
+ width: 50
+ },
+ {
+ name : 'target',
+ title: "Target",
+ width: 120
+ },
+ {
+ name : 'href',
+ title: "Href",
+ width: 220
+ } // border?
+
+ ],
+
+ 'INPUT' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'value',
+ title: "Value",
+ width: 120
+ },
+ {
+ name : 'width',
+ title: "Width",
+ width: 40
}
- return url;
- },
-
- getMethod : function(){
- return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
- },
-
- getParams : function(){
- var bp = this.form.baseParams;
- var p = this.options.params;
- if(p){
- if(typeof p == "object"){
- p = Roo.urlEncode(Roo.applyIf(p, bp));
- }else if(typeof p == 'string' && bp){
- p += '&' + Roo.urlEncode(bp);
- }
- }else if(bp){
- p = Roo.urlEncode(bp);
+ ],
+ 'LABEL' : [
+ {
+ name : 'for',
+ title: "For",
+ width: 120
}
- return p;
- },
+ ],
+ 'TEXTAREA' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'rows',
+ title: "Rows",
+ width: 20
+ },
+ {
+ name : 'cols',
+ title: "Cols",
+ width: 20
+ }
+ ],
+ 'SELECT' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'selectoptions',
+ title: "Options",
+ width: 200
+ }
+ ],
+
+ // should we really allow this??
+ // should this just be
+ 'BODY' : [
+
+ {
+ name : 'title',
+ title: "Title",
+ width: 200,
+ disabled : true
+ }
+ ],
+
+ '*' : [
+ // empty.
+ ]
- createCallback : function(){
- return {
- success: this.success,
- failure: this.failure,
- scope: this,
- timeout: (this.form.timeout*1000),
- upload: this.form.fileUpload ? this.success : undefined
- };
- }
};
-Roo.form.Action.Submit = function(form, options){
- Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
+// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
+Roo.form.HtmlEditor.ToolbarContext.stores = false;
+
+Roo.form.HtmlEditor.ToolbarContext.options = {
+ 'font-family' : [
+ [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
+ [ 'Courier New', 'Courier New'],
+ [ 'Tahoma', 'Tahoma'],
+ [ 'Times New Roman,serif', 'Times'],
+ [ 'Verdana','Verdana' ]
+ ]
};
-Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
- type : 'submit',
+// fixme - these need to be configurable..
+
- haveProgress : false,
- uploadComplete : false,
+//Roo.form.HtmlEditor.ToolbarContext.types
+
+
+Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
- // uploadProgress indicator.
- uploadProgress : function()
+ tb: false,
+
+ rendered: false,
+
+ editor : false,
+ editorcore : false,
+ /**
+ * @cfg {Object} disable List of toolbar elements to disable
+
+ */
+ disable : false,
+ /**
+ * @cfg {Object} styles List of styles
+ * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
+ *
+ * These must be defined in the page, so they get rendered correctly..
+ * .headline { }
+ * TD.underline { }
+ *
+ */
+ styles : false,
+
+ options: false,
+
+ toolbars : false,
+
+ init : function(editor)
{
- if (!this.form.progressUrl) {
+ this.editor = editor;
+ this.editorcore = editor.editorcore ? editor.editorcore : editor;
+ var editorcore = this.editorcore;
+
+ var fid = editorcore.frameId;
+ var etb = this;
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: editorcore, // was editor...
+ handler:handler||editorcore.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
+ };
+ }
+ // create a new element.
+ var wdiv = editor.wrap.createChild({
+ tag: 'div'
+ }, editor.wrap.dom.firstChild.nextSibling, true);
+
+ // can we do this more than once??
+
+ // stop form submits
+
+
+ // disable everything...
+ var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+ this.toolbars = {};
+ // block toolbars are built in updateToolbar when needed.
+ for (var i in ty) {
+
+ this.toolbars[i] = this.buildToolbar(ty[i],i);
+ }
+ this.tb = this.toolbars.BODY;
+ this.tb.el.show();
+ this.buildFooter();
+ this.footer.show();
+ editor.on('hide', function( ) { this.footer.hide() }, this);
+ editor.on('show', function( ) { this.footer.show() }, this);
+
+
+ this.rendered = true;
+
+ // the all the btns;
+ editor.on('editorevent', this.updateToolbar, this);
+ // other toolbars need to implement this..
+ //editor.on('editmodechange', this.updateToolbar, this);
+ },
+
+
+
+ /**
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
+ *
+ * Note you can force an update by calling on('editorevent', scope, false)
+ */
+ updateToolbar: function(editor ,ev, sel)
+ {
+
+ if (ev) {
+ ev.stopEvent(); // se if we can stop this looping with mutiple events.
+ }
+
+ //Roo.log(ev);
+ // capture mouse up - this is handy for selecting images..
+ // perhaps should go somewhere else...
+ if(!this.editorcore.activated){
+ this.editor.onFirstFocus();
return;
}
+ //Roo.log(ev ? ev.target : 'NOTARGET');
- if (!this.haveProgress) {
- Roo.MessageBox.progress("Uploading", "Uploading");
+
+ // http://developer.yahoo.com/yui/docs/simple-editor.js.html
+ // selectNode - might want to handle IE?
+
+
+
+ if (ev &&
+ (ev.type == 'mouseup' || ev.type == 'click' ) &&
+ ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
+ // they have click on an image...
+ // let's see if we can change the selection...
+ sel = ev.target;
+
+ // this triggers looping?
+ //this.editorcore.selectNode(sel);
+
}
- if (this.uploadComplete) {
- Roo.MessageBox.hide();
- return;
+
+ // this forces an id..
+ Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+ e.classList.remove('roo-ed-selection');
+ });
+ //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
+ //Roo.get(node).addClass('roo-ed-selection');
+
+ //var updateFooter = sel ? false : true;
+
+
+ var ans = this.editorcore.getAllAncestors();
+
+ // pick
+ var ty = Roo.form.HtmlEditor.ToolbarContext.types;
+
+ if (!sel) {
+ sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
+ sel = sel ? sel : this.editorcore.doc.body;
+ sel = sel.tagName.length ? sel : this.editorcore.doc.body;
+
+ }
+
+ var tn = sel.tagName.toUpperCase();
+ var lastSel = this.tb.selectedNode;
+ this.tb.selectedNode = sel;
+ var left_label = tn;
+
+ // ok see if we are editing a block?
+
+ var db = false;
+ // you are not actually selecting the block.
+ if (sel && sel.hasAttribute('data-block')) {
+ db = sel;
+ } else if (sel && sel.closest('[data-block]')) {
+
+ db = sel.closest('[data-block]');
+ //var cepar = sel.closest('[contenteditable=true]');
+ //if (db && cepar && cepar.tagName != 'BODY') {
+ // db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+ //}
}
- this.haveProgress = true;
-
- var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
- var c = new Roo.data.Connection();
- c.request({
- url : this.form.progressUrl,
- params: {
- id : uid
- },
- method: 'GET',
- success : function(req){
- //console.log(data);
- var rdata = false;
- var edata;
- try {
- rdata = Roo.decode(req.responseText)
- } catch (e) {
- Roo.log("Invalid data from server..");
- Roo.log(edata);
- return;
- }
- if (!rdata || !rdata.success) {
- Roo.log(rdata);
- Roo.MessageBox.alert(Roo.encode(rdata));
- return;
- }
- var data = rdata.data;
+ var block = false;
+ //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
+ if (db && this.editorcore.enableBlocks) {
+ block = Roo.htmleditor.Block.factory(db);
+
+
+ if (block) {
+ db.className = (
+ db.classList.length > 0 ? db.className + ' ' : ''
+ ) + 'roo-ed-selection';
+
+ // since we removed it earlier... its not there..
+ tn = 'BLOCK.' + db.getAttribute('data-block');
- if (this.uploadComplete) {
- Roo.MessageBox.hide();
- return;
- }
-
- if (data){
- Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
- Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
- );
+ //this.editorcore.selectNode(db);
+ if (typeof(this.toolbars[tn]) == 'undefined') {
+ this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
}
- this.uploadProgress.defer(2000,this);
- },
-
- failure: function(data) {
- Roo.log('progress url failed ');
- Roo.log(data);
- },
- scope : this
- });
-
- },
-
-
- run : function()
- {
- // run get Values on the form, so it syncs any secondary forms.
- this.form.getValues();
-
- var o = this.options;
- var method = this.getMethod();
- var isPost = method == 'POST';
- if(o.clientValidation === false || this.form.isValid()){
+ this.toolbars[tn].selectedNode = db;
+ left_label = block.friendly_name;
+ ans = this.editorcore.getAllAncestors();
+ }
- if (this.form.progressUrl) {
- this.form.findField('UPLOAD_IDENTIFIER').setValue(
- (new Date() * 1) + '' + Math.random());
-
- }
+
+ }
+
+
+ if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
+ return; // no change?
+ }
+
+
+
+ this.tb.el.hide();
+ ///console.log("show: " + tn);
+ this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
+
+ this.tb.el.show();
+ // update name
+ this.tb.items.first().el.innerHTML = left_label + ': ';
+
+
+ // update attributes
+ if (block && this.tb.fields) {
+
+ this.tb.fields.each(function(e) {
+ e.setValue(block[e.name]);
+ });
- Roo.Ajax.request(Roo.apply(this.createCallback(), {
- form:this.form.el.dom,
- url:this.getUrl(!isPost),
- method: method,
- params:isPost ? this.getParams() : null,
- isUpload: this.form.fileUpload,
- formData : this.form.formData
- }));
- this.uploadProgress();
-
- }else if (o.clientValidation !== false){ // client validation failed
- this.failureType = Roo.form.Action.CLIENT_INVALID;
- this.form.afterAction(this, false);
+ } else if (this.tb.fields && this.tb.selectedNode) {
+ this.tb.fields.each( function(e) {
+ if (e.stylename) {
+ e.setValue(this.tb.selectedNode.style[e.stylename]);
+ return;
+ }
+ e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
+ }, this);
+ this.updateToolbarStyles(this.tb.selectedNode);
}
- },
+
+
+
+ Roo.menu.MenuMgr.hideAll();
- success : function(response)
- {
- this.uploadComplete= true;
- if (this.haveProgress) {
- Roo.MessageBox.hide();
- }
- var result = this.processResponse(response);
- if(result === true || result.success){
- this.form.afterAction(this, true);
- return;
- }
- if(result.errors){
- this.form.markInvalid(result.errors);
- this.failureType = Roo.form.Action.SERVER_INVALID;
- }
- this.form.afterAction(this, false);
+
+ // update the footer
+ //
+ this.updateFooter(ans);
+
},
- failure : function(response)
+
+ updateToolbarStyles : function(sel)
{
- this.uploadComplete= true;
- if (this.haveProgress) {
- Roo.MessageBox.hide();
+ var hasStyles = false;
+ for(var i in this.styles) {
+ hasStyles = true;
+ break;
}
- this.response = response;
- this.failureType = Roo.form.Action.CONNECT_FAILURE;
- this.form.afterAction(this, false);
- },
-
- handleResponse : function(response){
- if(this.form.errorReader){
- var rs = this.form.errorReader.read(response);
- var errors = [];
- if(rs.records){
- for(var i = 0, len = rs.records.length; i < len; i++) {
- var r = rs.records[i];
- errors[i] = r.data;
- }
- }
- if(errors.length < 1){
- errors = null;
+ // update styles
+ if (hasStyles && this.tb.hasStyles) {
+ var st = this.tb.fields.item(0);
+
+ st.store.removeAll();
+ var cn = sel.className.split(/\s+/);
+
+ var avs = [];
+ if (this.styles['*']) {
+
+ Roo.each(this.styles['*'], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
}
- return {
- success : rs.success,
- errors : errors
- };
- }
- var ret = false;
- try {
- var rt = response.responseText;
- if (rt.match(/^\<!--\[CDATA\[/)) {
- rt = rt.replace(/^\<!--\[CDATA\[/,'');
- rt = rt.replace(/\]\]--\>$/,'');
+ if (this.styles[tn]) {
+ Roo.each(this.styles[tn], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
}
- ret = Roo.decode(rt);
- } catch (e) {
- ret = {
- success: false,
- errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
- errors : []
- };
+ st.store.loadData(avs);
+ st.collapse();
+ st.setValue(cn);
}
- return ret;
-
- }
-});
-
-
-Roo.form.Action.Load = function(form, options){
- Roo.form.Action.Load.superclass.constructor.call(this, form, options);
- this.reader = this.form.reader;
-};
-
-Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
- type : 'load',
-
- run : function(){
-
- Roo.Ajax.request(Roo.apply(
- this.createCallback(), {
- method:this.getMethod(),
- url:this.getUrl(false),
- params:this.getParams()
- }));
},
-
- success : function(response){
-
- var result = this.processResponse(response);
- if(result === true || !result.success || !result.data){
- this.failureType = Roo.form.Action.LOAD_FAILURE;
- this.form.afterAction(this, false);
+
+
+ updateFooter : function(ans)
+ {
+ var html = '';
+ if (ans === false) {
+ this.footDisp.dom.innerHTML = '';
return;
}
- this.form.clearInvalid();
- this.form.setValues(result.data);
- this.form.afterAction(this, true);
+
+ this.footerEls = ans.reverse();
+ Roo.each(this.footerEls, function(a,i) {
+ if (!a) { return; }
+ html += html.length ? ' > ' : '';
+
+ html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
+
+ });
+
+ //
+ var sz = this.footDisp.up('td').getSize();
+ this.footDisp.dom.style.width = (sz.width -10) + 'px';
+ this.footDisp.dom.style.marginLeft = '5px';
+
+ this.footDisp.dom.style.overflow = 'hidden';
+
+ this.footDisp.dom.innerHTML = html;
+
+
},
-
- handleResponse : function(response){
- if(this.form.reader){
- var rs = this.form.reader.read(response);
- var data = rs.records && rs.records[0] ? rs.records[0].data : null;
- return {
- success : rs.success,
- data : data
- };
- }
- return Roo.decode(response.responseText);
- }
-});
-
-Roo.form.Action.ACTION_TYPES = {
- 'load' : Roo.form.Action.Load,
- 'submit' : Roo.form.Action.Submit
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Layout
- * @extends Roo.Component
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
- * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Layout = function(config){
- var xitems = [];
- if (config.items) {
- xitems = config.items;
- delete config.items;
- }
- Roo.form.Layout.superclass.constructor.call(this, config);
- this.stack = [];
- Roo.each(xitems, this.addxtype, this);
-
-};
-
-Roo.extend(Roo.form.Layout, Roo.Component, {
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
- */
- /**
- * @cfg {String/Object/Function} style
- * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
- * a function which returns such a specification.
- */
- /**
- * @cfg {String} labelAlign (left|top|right)
- * Valid values are "left," "top" and "right" (defaults to "left")
- */
- /**
- * @cfg {Number} labelWidth
- * Fixed width in pixels of all field labels (defaults to undefined)
- */
- /**
- * @cfg {Boolean} clear
- * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
- */
- clear : true,
- /**
- * @cfg {String} labelSeparator
- * The separator to use after field labels (defaults to ':')
- */
- labelSeparator : ':',
- /**
- * @cfg {Boolean} hideLabels
- * True to suppress the display of field labels in this layout (defaults to false)
- */
- hideLabels : false,
-
- // private
- defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
-
- isLayout : true,
-
+
+
// private
- onRender : function(ct, position){
- if(this.el){ // from markup
- this.el = Roo.get(this.el);
- }else { // generate
- var cfg = this.getAutoCreate();
- this.el = ct.createChild(cfg, position);
- }
- if(this.style){
- this.el.applyStyles(this.style);
- }
- if(this.labelAlign){
- this.el.addClass('x-form-label-'+this.labelAlign);
- }
- if(this.hideLabels){
- this.labelStyle = "display:none";
- this.elementStyle = "padding-left:0;";
- }else{
- if(typeof this.labelWidth == 'number'){
- this.labelStyle = "width:"+this.labelWidth+"px;";
- this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
- }
- if(this.labelAlign == 'top'){
- this.labelStyle = "width:auto;";
- this.elementStyle = "padding-left:0;";
- }
- }
- var stack = this.stack;
- var slen = stack.length;
- if(slen > 0){
- if(!this.fieldTpl){
- var t = new Roo.Template(
- '<div class="x-form-item {5}">',
- '<label for="{0}" style="{2}">{1}{4}</label>',
- '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
- '</div>',
- '</div><div class="x-form-clear-left"></div>'
- );
- t.disableFormats = true;
- t.compile();
- Roo.form.Layout.prototype.fieldTpl = t;
- }
- for(var i = 0; i < slen; i++) {
- if(stack[i].isFormField){
- this.renderField(stack[i]);
- }else{
- this.renderComponent(stack[i]);
+ onDestroy : function(){
+ if(this.rendered){
+
+ this.tb.items.each(function(item){
+ if(item.menu){
+ item.menu.removeAll();
+ if(item.menu.el){
+ item.menu.el.destroy();
+ }
}
- }
- }
- if(this.clear){
- this.el.createChild({cls:'x-form-clear'});
+ item.destroy();
+ });
+
}
},
-
- // private
- renderField : function(f){
- f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
- f.id, //0
- f.fieldLabel, //1
- f.labelStyle||this.labelStyle||'', //2
- this.elementStyle||'', //3
- typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
- f.itemCls||this.itemCls||'' //5
- ], true).getPrevSibling());
- },
-
- // private
- renderComponent : function(c){
- c.render(c.isLayout ? this.el : this.el.createChild());
+ onFirstFocus: function() {
+ // need to do this for all the toolbars..
+ this.tb.items.each(function(item){
+ item.enable();
+ });
},
- /**
- * Adds a object form elements (using the xtype property as the factory method.)
- * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column
- * @param {Object} config
- */
- addxtype : function(o)
+ buildToolbar: function(tlist, nm, friendly_name, block)
{
- // create the lement.
- o.form = this.form;
- var fe = Roo.factory(o, Roo.form);
- this.form.allItems.push(fe);
- this.stack.push(fe);
+ var editor = this.editor;
+ var editorcore = this.editorcore;
+ // create a new element.
+ var wdiv = editor.wrap.createChild({
+ tag: 'div'
+ }, editor.wrap.dom.firstChild.nextSibling, true);
- if (fe.isFormField) {
- this.form.items.add(fe);
- }
-
- return fe;
- }
-});
-
-
-/**
- * @class Roo.form.Column
- * @extends Roo.form.Layout
- * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
- * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Column = function(config){
- Roo.form.Column.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Column, Roo.form.Layout, {
- /**
- * @cfg {Number/String} width
- * The fixed width of the column in pixels or CSS value (defaults to "auto")
- */
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
- */
-
- // private
- defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
-
- // private
- onRender : function(ct, position){
- Roo.form.Column.superclass.onRender.call(this, ct, position);
- if(this.width){
- this.el.setWidth(this.width);
+
+ var tb = new Roo.Toolbar(wdiv);
+ ///this.tb = tb; // << this sets the active toolbar..
+ if (tlist === false && block) {
+ tlist = block.contextMenu(this);
}
- }
-});
-
-/**
- * @class Roo.form.Row
- * @extends Roo.form.Layout
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
- * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-
-
-Roo.form.Row = function(config){
- Roo.form.Row.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Row, Roo.form.Layout, {
- /**
- * @cfg {Number/String} width
- * The fixed width of the column in pixels or CSS value (defaults to "auto")
- */
- /**
- * @cfg {Number/String} height
- * The fixed height of the column in pixels or CSS value (defaults to "auto")
- */
- defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+
+ tb.hasStyles = false;
+ tb.name = nm;
+
+ tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
+
+ var styles = Array.from(this.styles);
+
+
+ // styles...
+ if (styles && styles.length) {
+ tb.hasStyles = true;
+ // this needs a multi-select checkbox...
+ tb.addField( new Roo.form.ComboBox({
+ store: new Roo.data.SimpleStore({
+ id : 'val',
+ fields: ['val', 'selected'],
+ data : []
+ }),
+ name : '-roo-edit-className',
+ attrname : 'className',
+ displayField: 'val',
+ typeAhead: false,
+ mode: 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Select Style',
+ selectOnFocus:true,
+ width: 130,
+ listeners : {
+ 'select': function(c, r, i) {
+ // initial support only for on class per el..
+ tb.selectedNode.className = r ? r.get('val') : '';
+ editorcore.syncValue();
+ }
+ }
- padWidth : 20,
- // private
- onRender : function(ct, position){
- //console.log('row render');
- if(!this.rowTpl){
- var t = new Roo.Template(
- '<div class="x-form-item {5}" style="float:left;width:{6}px">',
- '<label for="{0}" style="{2}">{1}{4}</label>',
- '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
- '</div>',
- '</div>'
- );
- t.disableFormats = true;
- t.compile();
- Roo.form.Layout.prototype.rowTpl = t;
+ }));
}
- this.fieldTpl = this.rowTpl;
- //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
- var labelWidth = 100;
+ var tbc = Roo.form.HtmlEditor.ToolbarContext;
- if ((this.labelAlign != 'top')) {
- if (typeof this.labelWidth == 'number') {
- labelWidth = this.labelWidth
+
+ for (var i = 0; i < tlist.length; i++) {
+
+ // newer versions will use xtype cfg to create menus.
+ if (typeof(tlist[i].xtype) != 'undefined') {
+
+ tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
+
+
+ continue;
}
- this.padWidth = 20 + labelWidth;
+ var item = tlist[i];
+ tb.add(item.title + ": ");
+
+
+ //optname == used so you can configure the options available..
+ var opts = item.opts ? item.opts : false;
+ if (item.optname) { // use the b
+ opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
+
+ }
+
+ if (opts) {
+ // opts == pulldown..
+ tb.addField( new Roo.form.ComboBox({
+ store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
+ id : 'val',
+ fields: ['val', 'display'],
+ data : opts
+ }),
+ name : '-roo-edit-' + tlist[i].name,
+
+ attrname : tlist[i].name,
+ stylename : item.style ? item.style : false,
+
+ displayField: item.displayField ? item.displayField : 'val',
+ valueField : 'val',
+ typeAhead: false,
+ mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Select',
+ selectOnFocus:true,
+ width: item.width ? item.width : 130,
+ listeners : {
+ 'select': function(c, r, i) {
+
+
+ if (c.stylename) {
+ tb.selectedNode.style[c.stylename] = r.get('val');
+ editorcore.syncValue();
+ return;
+ }
+ if (r === false) {
+ tb.selectedNode.removeAttribute(c.attrname);
+ editorcore.syncValue();
+ return;
+ }
+ tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+ editorcore.syncValue();
+ }
+ }
+
+ }));
+ continue;
+
+
+ /*
+ tb.addField( new Roo.form.TextField({
+ name: i,
+ width: 100,
+ //allowBlank:false,
+ value: ''
+ }));
+ continue;
+ */
+ }
+ tb.addField( new Roo.form.TextField({
+ name: '-roo-edit-' + tlist[i].name,
+ attrname : tlist[i].name,
+
+ width: item.width,
+ //allowBlank:true,
+ value: '',
+ listeners: {
+ 'change' : function(f, nv, ov) {
+
+
+ tb.selectedNode.setAttribute(f.attrname, nv);
+ editorcore.syncValue();
+ }
+ }
+ }));
+
}
- Roo.form.Column.superclass.onRender.call(this, ct, position);
- if(this.width){
- this.el.setWidth(this.width);
- }
- if(this.height){
- this.el.setHeight(this.height);
+ var _this = this;
+ var show_delete = !block || block.deleteTitle !== false;
+ if(nm == 'BODY'){
+ show_delete = false;
+ tb.addSeparator();
+
+ tb.addButton( {
+ text: 'Stylesheets',
+
+ listeners : {
+ click : function ()
+ {
+ _this.editor.fireEvent('stylesheetsclick', _this.editor);
+ }
+ }
+ });
}
+
+ tb.addFill();
+ if (show_delete) {
+ tb.addButton({
+ text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+
+ listeners : {
+ click : function ()
+ {
+ var sn = tb.selectedNode;
+ if (block) {
+ sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
+
+ }
+ if (!sn) {
+ return;
+ }
+ var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+ if (sn.hasAttribute('data-block')) {
+ stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
+ sn.parentNode.removeChild(sn);
+
+ } else if (sn && sn.tagName != 'BODY') {
+ // remove and keep parents.
+ a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+ a.replaceTag(sn);
+ }
+
+
+ var range = editorcore.createRange();
+
+ range.setStart(stn,0);
+ range.setEnd(stn,0);
+ var selection = editorcore.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+
+ //_this.updateToolbar(null, null, pn);
+ _this.updateToolbar(null, null, null);
+ _this.updateFooter(false);
+
+ }
+ }
+
+
+
+
+ });
+ }
+
+ tb.el.on('click', function(e){
+ e.preventDefault(); // what does this do?
+ });
+ tb.el.setVisibilityMode( Roo.Element.DISPLAY);
+ tb.el.hide();
+
+ // dont need to disable them... as they will get hidden
+ return tb;
+
+
},
-
- // private
- renderField : function(f){
- f.fieldEl = this.fieldTpl.append(this.el, [
- f.id, f.fieldLabel,
- f.labelStyle||this.labelStyle||'',
- this.elementStyle||'',
- typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
- f.itemCls||this.itemCls||'',
- f.width ? f.width + this.padWidth : 160 + this.padWidth
- ],true);
+ buildFooter : function()
+ {
+
+ var fel = this.editor.wrap.createChild();
+ this.footer = new Roo.Toolbar(fel);
+ // toolbar has scrolly on left / right?
+ var footDisp= new Roo.Toolbar.Fill();
+ var _t = this;
+ this.footer.add(
+ {
+ text : '<',
+ xtype: 'Button',
+ handler : function() {
+ _t.footDisp.scrollTo('left',0,true)
+ }
+ }
+ );
+ this.footer.add( footDisp );
+ this.footer.add(
+ {
+ text : '>',
+ xtype: 'Button',
+ handler : function() {
+ // no animation..
+ _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+ }
+ }
+ );
+ var fel = Roo.get(footDisp.el);
+ fel.addClass('x-editor-context');
+ this.footDispWrap = fel;
+ this.footDispWrap.overflow = 'hidden';
+
+ this.footDisp = fel.createChild();
+ this.footDispWrap.on('click', this.onContextClick, this)
+
+
+ },
+ // when the footer contect changes
+ onContextClick : function (ev,dom)
+ {
+ ev.preventDefault();
+ var cn = dom.className;
+ //Roo.log(cn);
+ if (!cn.match(/x-ed-loc-/)) {
+ return;
+ }
+ var n = cn.split('-').pop();
+ var ans = this.footerEls;
+ var sel = ans[n];
+
+ this.editorcore.selectNode(sel);
+
+
+ this.updateToolbar(null, null, sel);
+
+
}
+
+
+
+
+
});
-
-/**
- * @class Roo.form.FieldSet
- * @extends Roo.form.Layout
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.FieldSet = function(config){
- Roo.form.FieldSet.superclass.constructor.call(this, config);
-};
-Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
- /**
- * @cfg {String} legend
- * The text to display as the legend for the FieldSet (defaults to '')
- */
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
- */
- // private
- defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
- // private
- onRender : function(ct, position){
- Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
- if(this.legend){
- this.setLegend(this.legend);
- }
- },
- // private
- setLegend : function(text){
- if(this.rendered){
- this.el.child('legend').update(text);
- }
- }
-});/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.VTypes
- * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
- * @static
+ * @class Roo.form.BasicForm
+ * @extends Roo.util.Observable
+ * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The form element or its id
+ * @param {Object} config Configuration options
*/
-Roo.form.VTypes = function(){
- // closure these in so they are only created once.
- var alpha = /^[a-zA-Z_]+$/;
- var alphanum = /^[a-zA-Z0-9_]+$/;
- var email = /^([\w'-]+)(\.[\w'-]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
- var url = /^(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
- var urlWeb = /^((https?):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
-
- // All these messages and functions are configurable
- return {
- /**
- * The function used to validate email addresses
- * @param {String} value The email address
- */
- email : function(v){
- return email.test(v);
- },
- /**
- * The error text to display when the email validation function returns false
- * @type String
- */
- emailText : 'This field should be an e-mail address in the format "user@domain.com"',
- /**
- * The keystroke filter mask to be applied on email input
- * @type RegExp
- */
- emailMask : /[a-z0-9_\.\-@]/i,
-
- /**
- * The function used to validate URLs
- * @param {String} value The URL
- */
- url : function(v){
- return url.test(v);
- },
- /**
- * The funciton used to validate URLs (only allow schemes 'https' and 'http')
- * @param {String} v The URL
- */
- urlWeb : function(v) {
- return urlWeb.test(v);
- },
- /**
- * The error text to display when the url validation function returns false
- * @type String
- */
- urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
-
- /**
- * The function used to validate alpha values
- * @param {String} value The value
- */
- alpha : function(v){
- return alpha.test(v);
- },
- /**
- * The error text to display when the alpha validation function returns false
- * @type String
- */
- alphaText : 'This field should only contain letters and _',
- /**
- * The keystroke filter mask to be applied on alpha input
- * @type RegExp
- */
- alphaMask : /[a-z_]/i,
-
+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());
+ });
+ this.addEvents({
/**
- * The function used to validate alphanumeric values
- * @param {String} value The value
+ * @event beforeaction
+ * Fires before any action is performed. Return false to cancel the action.
+ * @param {Form} this
+ * @param {Action} action The action to be performed
*/
- alphanum : function(v){
- return alphanum.test(v);
- },
+ beforeaction: true,
/**
- * The error text to display when the alphanumeric validation function returns false
- * @type String
+ * @event actionfailed
+ * Fires when an action fails.
+ * @param {Form} this
+ * @param {Action} action The action that failed
*/
- alphanumText : 'This field should only contain letters, numbers and _',
+ actionfailed : true,
/**
- * The keystroke filter mask to be applied on alphanumeric input
- * @type RegExp
- */
- alphanumMask : /[a-z0-9_]/i
- };
-}();//<script type="text/javascript">
-
-/**
- * @class Roo.form.FCKeditor
- * @extends Roo.form.TextArea
- * Wrapper around the FCKEditor http://www.fckeditor.net
- * @constructor
- * Creates a new FCKeditor
- * @param {Object} config Configuration options
- */
-Roo.form.FCKeditor = function(config){
- Roo.form.FCKeditor.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event editorinit
- * Fired when the editor is initialized - you can add extra handlers here..
- * @param {FCKeditor} this
- * @param {Object} the FCK object.
+ * @event actioncomplete
+ * Fires when an action is completed.
+ * @param {Form} this
+ * @param {Action} action The action that completed
*/
- editorinit : true
+ actioncomplete : true
});
+ if(el){
+ this.initEl(el);
+ }
+ Roo.form.BasicForm.superclass.constructor.call(this);
-
+ Roo.form.BasicForm.popover.apply();
};
-Roo.form.FCKeditor.editors = { };
-Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
-{
- //defaultAutoCreate : {
- // tag : "textarea",style : "width:100px;height:60px;" ,autocomplete : "off"
- //},
+
+Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
+ /**
+ * @cfg {String} method
+ * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
+ */
+ /**
+ * @cfg {DataReader} reader
+ * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
+ * This is optional as there is built-in support for processing JSON.
+ */
+ /**
+ * @cfg {DataReader} errorReader
+ * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
+ * This is completely optional as there is built-in support for processing JSON.
+ */
+ /**
+ * @cfg {String} url
+ * The URL to use for form actions if one isn't supplied in the action options.
+ */
+ /**
+ * @cfg {Boolean} fileUpload
+ * Set to true if this form is a file upload.
+ */
+
+ /**
+ * @cfg {Object} baseParams
+ * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+ */
+ /**
+
+ /**
+ * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ */
+ timeout: 30,
+
// private
+ activeAction : null,
+
/**
- * @cfg {Object} fck options - see fck manual for details.
+ * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
+ * or setValues() data instead of when the form was first created.
*/
- fckconfig : false,
+ trackResetOnLoad : false,
+
/**
- * @cfg {Object} fck toolbar set (Basic or Default)
+ * childForms - used for multi-tab forms
+ * @type {Array}
*/
- toolbarSet : 'Basic',
+ childForms : false,
+
/**
- * @cfg {Object} fck BasePath
- */
- basePath : '/fckeditor/',
+ * 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.
+ * @type Mixed
+ */
+ waitMsgTarget : false,
- frame : false,
+ /**
+ * @type Boolean
+ */
+ disableMask : false,
- value : '',
+ /**
+ * @cfg {Boolean} errorMask Should the form be masked (and the active element highlighted on error - default false
+ */
+ errorMask : false,
-
- onRender : function(ct, position)
- {
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:300px;height:60px;",
- autocomplete: "new-password"
- };
- }
- Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
- /*
- if(this.grow){
- this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
- if(this.preventScrollbars){
- this.el.setStyle("overflow", "hidden");
+ /**
+ * @cfg {Number} maskOffset space around form element to mask if there is an error Default 100
+ */
+ maskOffset : 100,
+
+ // private
+ initEl : function(el){
+ this.el = Roo.get(el);
+ this.id = this.el.id || Roo.id();
+ this.el.on('submit', this.onSubmit, this);
+ this.el.addClass('x-form');
+ },
+
+ // private
+ onSubmit : function(e){
+ e.stopEvent();
+ },
+
+ /**
+ * Returns true if client-side validation on the form is successful.
+ * @return Boolean
+ */
+ isValid : function(){
+ var valid = true;
+ var target = false;
+ this.items.each(function(f){
+ if(f.validate()){
+ return;
}
- this.el.setHeight(this.growMin);
+
+ valid = false;
+
+ if(!target && f.el.isVisible(true)){
+ target = f;
+ }
+ });
+
+ if(this.errorMask && !valid){
+ Roo.form.BasicForm.popover.mask(this, target);
}
- */
- //console.log('onrender' + this.getId() );
- Roo.form.FCKeditor.editors[this.getId()] = this;
-
-
- this.replaceTextarea() ;
+ return valid;
},
+ /**
+ * Returns array of invalid form fields.
+ * @return Array
+ */
- getEditor : function() {
- return this.fckEditor;
+ invalidFields : function()
+ {
+ var ret = [];
+ this.items.each(function(f){
+ if(f.validate()){
+ return;
+ }
+ ret.push(f);
+
+ });
+
+ return ret;
},
+
+
/**
- * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
- * @param {Mixed} value The value to set
+ * DEPRICATED Returns true if any fields in this form have changed since their original load.
+ * @return Boolean
*/
+ isDirty : function(){
+ var dirty = false;
+ this.items.each(function(f){
+ if(f.isDirty()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
+ },
+ /**
+ * Returns true if any fields in this form have changed since their original load. (New version)
+ * @return Boolean
+ */
- setValue : function(value)
+ hasChanged : function()
{
- //console.log('setValue: ' + value);
+ var dirty = false;
+ this.items.each(function(f){
+ if(f.hasChanged()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
- if(typeof(value) == 'undefined') { // not sure why this is happending...
- return;
+ },
+ /**
+ * Resets all hasChanged to 'false' -
+ * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
+ * So hasChanged storage is only to be used for this purpose
+ * @return Boolean
+ */
+ resetHasChanged : function()
+ {
+ this.items.each(function(f){
+ f.resetHasChanged();
+ });
+
+ },
+
+
+ /**
+ * Performs a predefined action (submit or load) or custom actions you define on this form.
+ * @param {String} actionName The name of the action type
+ * @param {Object} options (optional) The options to pass to the action. All of the config options listed
+ * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
+ * accept other config options):
+ * <pre>
+Property Type Description
+---------------- --------------- ----------------------------------------------------------------------------------
+url String The url for the action (defaults to the form's url)
+method String The form method to use (defaults to the form's method, or POST if not defined)
+params String/Object The params to pass (defaults to the form's baseParams, or none if not defined)
+clientValidation Boolean Applies to submit only. Pass true to call form.isValid() prior to posting to
+ validate the form on the client (defaults to false)
+ * </pre>
+ * @return {BasicForm} this
+ */
+ doAction : function(action, options){
+ if(typeof action == 'string'){
+ action = new Roo.form.Action.ACTION_TYPES[action](this, options);
}
- Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+ if(this.fireEvent('beforeaction', this, action) !== false){
+ this.beforeAction(action);
+ action.run.defer(100, action);
+ }
+ return this;
+ },
+
+ /**
+ * Shortcut to do a submit action.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+ * @return {BasicForm} this
+ */
+ submit : function(options){
+ this.doAction('submit', options);
+ return this;
+ },
+
+ /**
+ * Shortcut to do a load action.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+ * @return {BasicForm} this
+ */
+ load : function(options){
+ this.doAction('load', options);
+ return this;
+ },
+
+ /**
+ * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
+ * @param {Record} record The record to edit
+ * @return {BasicForm} this
+ */
+ updateRecord : function(record){
+ record.beginEdit();
+ var fs = record.fields;
+ fs.each(function(f){
+ var field = this.findField(f.name);
+ if(field){
+ record.set(f.name, field.getValue());
+ }
+ }, this);
+ record.endEdit();
+ return this;
+ },
+
+ /**
+ * Loads an Roo.data.Record into this form.
+ * @param {Record} record The record to load
+ * @return {BasicForm} this
+ */
+ loadRecord : function(record){
+ this.setValues(record.data);
+ return this;
+ },
+
+ // private
+ beforeAction : function(action){
+ var o = action.options;
- //if(!this.el || !this.getEditor()) {
- // this.value = value;
- //this.setValue.defer(100,this,[value]);
- // return;
- //}
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget = Roo.get(this.waitMsgTarget);
+ this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else {
+ Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
+ }
+ }
- if(!this.getEditor()) {
- return;
+
+ },
+
+ // private
+ afterAction : function(action, success){
+ this.activeAction = null;
+ var o = action.options;
+
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.unmask();
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget.unmask();
+ }else{
+ Roo.MessageBox.updateProgress(1);
+ Roo.MessageBox.hide();
+ }
}
- this.getEditor().SetData(value);
+ if(success){
+ if(o.reset){
+ this.reset();
+ }
+ Roo.callback(o.success, o.scope, [this, action]);
+ this.fireEvent('actioncomplete', this, action);
+
+ }else{
+
+ // failure condition..
+ // we have a scenario where updates need confirming.
+ // eg. if a locking scenario exists..
+ // we look for { errors : { needs_confirm : true }} in the response.
+ if (
+ (typeof(action.result) != 'undefined') &&
+ (typeof(action.result.errors) != 'undefined') &&
+ (typeof(action.result.errors.needs_confirm) != 'undefined')
+ ){
+ var _t = this;
+ Roo.MessageBox.confirm(
+ "Change requires confirmation",
+ action.result.errorMsg,
+ function(r) {
+ if (r != 'yes') {
+ return;
+ }
+ _t.doAction('submit', { params : { _submit_confirmed : 1 } } );
+ }
+
+ );
+
+
+
+ return;
+ }
+
+ Roo.callback(o.failure, o.scope, [this, action]);
+ // show an error message if no failed handler is set..
+ if (!this.hasListener('actionfailed')) {
+ Roo.MessageBox.alert("Error",
+ (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
+ action.result.errorMsg :
+ "Saving Failed, please check your entries or try again"
+ );
+ }
+
+ this.fireEvent('actionfailed', this, action);
+ }
- //
+ },
+ /**
+ * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
+ * @param {String} id The value to search for
+ * @return Field
+ */
+ findField : function(id){
+ var field = this.items.get(id);
+ if(!field){
+ this.items.each(function(f){
+ if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
+ field = f;
+ return false;
+ }
+ });
+ }
+ return field || null;
},
/**
- * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
- * @return {Mixed} value The field value
+ * 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.
+ *
*/
- getValue : function()
+ addForm : function(form)
{
+
+ if (this.childForms.indexOf(form) > -1) {
+ // already added..
+ return;
+ }
+ this.childForms.push(form);
+ var n = '';
+ Roo.each(form.allItems, function (fe) {
+
+ n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
+ if (this.findField(n)) { // already added..
+ return;
+ }
+ var add = new Roo.form.Hidden({
+ name : n
+ });
+ add.render(this.el);
+
+ this.add( add );
+ }, this);
- if (this.frame && this.frame.dom.style.display == 'none') {
- return Roo.form.FCKeditor.superclass.getValue.call(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}
+ * @return {BasicForm} this
+ */
+ markInvalid : function(errors){
+ if(errors instanceof Array){
+ for(var i = 0, len = errors.length; i < len; i++){
+ var fieldError = errors[i];
+ var f = this.findField(fieldError.id);
+ if(f){
+ f.markInvalid(fieldError.msg);
+ }
+ }
+ }else{
+ var field, id;
+ for(id in errors){
+ if(typeof errors[id] != 'function' && (field = this.findField(id))){
+ field.markInvalid(errors[id]);
+ }
+ }
}
+ Roo.each(this.childForms || [], function (f) {
+ f.markInvalid(errors);
+ });
- if(!this.el || !this.getEditor()) {
-
- // this.getValue.defer(100,this);
- return this.value;
+ return this;
+ },
+
+ /**
+ * Set values for fields in this form in bulk.
+ * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
+ * @return {BasicForm} this
+ */
+ setValues : function(values){
+ if(values instanceof Array){ // array of objects
+ for(var i = 0, len = values.length; i < len; i++){
+ var v = values[i];
+ var f = this.findField(v.id);
+ if(f){
+ f.setValue(v.value);
+ if(this.trackResetOnLoad){
+ f.originalValue = f.getValue();
+ }
+ }
+ }
+ }else{ // object hash
+ var field, id;
+ for(id in values){
+ if(typeof values[id] != 'function' && (field = this.findField(id))){
+
+
+
+
+ if (field.setFromData &&
+ field.valueField &&
+ field.displayField &&
+ // combos' with local stores can
+ // be queried via setValue()
+ // to set their value..
+ (field.store && !field.store.isLocal)
+ ) {
+ // it's a combo
+ var sd = { };
+ sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
+ sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
+ field.setFromData(sd);
+
+ } else if (field.inputType && field.inputType == 'radio') {
+
+ field.setValue(values[id]);
+ } else {
+ field.setValue(values[id]);
+ }
+
+
+ if(this.trackResetOnLoad){
+ field.originalValue = field.getValue();
+ }
+ }
+ }
}
-
+ this.resetHasChanged();
- var value=this.getEditor().GetData();
- Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
- return Roo.form.FCKeditor.superclass.getValue.call(this);
-
+ Roo.each(this.childForms || [], function (f) {
+ f.setValues(values);
+ f.resetHasChanged();
+ });
+
+ return this;
},
-
+
/**
- * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
- * @return {Mixed} value The field value
+ * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
+ * they are returned as an array.
+ * @param {Boolean} asString (def)
+ * @return {Object}
*/
- getRawValue : function()
+ getValues : function(asString)
{
- if (this.frame && this.frame.dom.style.display == 'none') {
- return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+ if (this.childForms) {
+ // copy values from the child forms
+ Roo.each(this.childForms, function (f) {
+ this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
+ }, this);
}
- if(!this.el || !this.getEditor()) {
- //this.getRawValue.defer(100,this);
- return this.value;
- return;
+ // use formdata
+ if (typeof(FormData) != 'undefined' && asString !== true) {
+ // this relies on a 'recent' version of chrome apparently...
+ try {
+ var fd = (new FormData(this.el.dom)).entries();
+ var ret = {};
+ var ent = fd.next();
+ while (!ent.done) {
+ ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
+ ent = fd.next();
+ };
+ return ret;
+ } catch(e) {
+
+ }
+
}
-
- var value=this.getEditor().GetData();
- Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
- return Roo.form.FCKeditor.superclass.getRawValue.call(this);
-
- },
-
- setSize : function(w,h) {
-
-
-
- //if (this.frame && this.frame.dom.style.display == 'none') {
- // Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
- // return;
- //}
- //if(!this.el || !this.getEditor()) {
- // this.setSize.defer(100,this, [w,h]);
- // return;
- //}
-
-
-
- Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
-
- this.frame.dom.setAttribute('width', w);
- this.frame.dom.setAttribute('height', h);
- this.frame.setSize(w,h);
-
- },
-
- toggleSourceEdit : function(value) {
-
-
-
- this.el.dom.style.display = value ? '' : 'none';
- this.frame.dom.style.display = value ? 'none' : '';
-
+ var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
+ if(asString === true){
+ return fs;
+ }
+ return Roo.urlDecode(fs);
},
-
- focus: function(tag)
+ /**
+ * Returns the fields in this form as an object with key/value pairs.
+ * This differs from getValues as it calls getValue on each child item, rather than using dom data.
+ * Normally this will not return readOnly data
+ * @param {Boolean} with_readonly return readonly field data.
+ * @return {Object}
+ */
+ getFieldValues : function(with_readonly)
{
- if (this.frame.dom.style.display == 'none') {
- return Roo.form.FCKeditor.superclass.focus.call(this);
- }
- if(!this.el || !this.getEditor()) {
- this.focus.defer(100,this, [tag]);
- return;
+ if (this.childForms) {
+ // copy values from the child forms
+ // should this call getFieldValues - probably not as we do not currently copy
+ // hidden fields when we generate..
+ Roo.each(this.childForms, function (f) {
+ this.setValues(f.getFieldValues());
+ }, this);
}
-
-
-
- var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
- this.getEditor().Focus();
- if (tgs.length) {
- if (!this.getEditor().Selection.GetSelection()) {
- this.focus.defer(100,this, [tag]);
- return;
+ var ret = {};
+ this.items.each(function(f){
+
+ if (f.readOnly && with_readonly !== true) {
+ return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
+ // if a subform contains a copy of them.
+ // if you have subforms with the same editable data, you will need to copy the data back
+ // and forth.
}
+ if (!f.getName()) {
+ return;
+ }
+ var v = f.getValue();
+ if (f.inputType =='radio') {
+ if (typeof(ret[f.getName()]) == 'undefined') {
+ ret[f.getName()] = ''; // empty..
+ }
+
+ if (!f.el.dom.checked) {
+ return;
+
+ }
+ v = f.el.dom.value;
+
+ }
- var r = this.getEditor().EditorDocument.createRange();
- r.setStart(tgs[0],0);
- r.setEnd(tgs[0],0);
- this.getEditor().Selection.GetSelection().removeAllRanges();
- this.getEditor().Selection.GetSelection().addRange(r);
- this.getEditor().Focus();
- }
+ // not sure if this supported any more..
+ if ((typeof(v) == 'object') && f.getRawValue) {
+ v = f.getRawValue() ; // dates..
+ }
+ // combo boxes where name != hiddenName...
+ if (f.name != f.getName()) {
+ ret[f.name] = f.getRawValue();
+ }
+ ret[f.getName()] = v;
+ });
+ return ret;
},
-
-
-
- replaceTextarea : function()
- {
- if ( document.getElementById( this.getId() + '___Frame' ) ) {
- return ;
- }
- //if ( !this.checkBrowser || this._isCompatibleBrowser() )
- //{
- // We must check the elements firstly using the Id and then the name.
- var oTextarea = document.getElementById( this.getId() );
-
- var colElementsByName = document.getElementsByName( this.getId() ) ;
-
- oTextarea.style.display = 'none' ;
- if ( oTextarea.tabIndex ) {
- this.TabIndex = oTextarea.tabIndex ;
- }
+ /**
+ * Clears all invalid messages in this form.
+ * @return {BasicForm} this
+ */
+ clearInvalid : function(){
+ this.items.each(function(f){
+ f.clearInvalid();
+ });
- this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
- this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
- this.frame = Roo.get(this.getId() + '___Frame')
- },
-
- _getConfigHtml : function()
- {
- var sConfig = '' ;
-
- for ( var o in this.fckconfig ) {
- sConfig += sConfig.length > 0 ? '&' : '';
- sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
- }
-
- return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
+ Roo.each(this.childForms || [], function (f) {
+ f.clearInvalid();
+ });
+
+
+ return this;
},
-
-
- _getIFrameHtml : function()
- {
- var sFile = 'fckeditor.html' ;
- /* no idea what this is about..
- try
- {
- if ( (/fcksource=true/i).test( window.top.location.search ) )
- sFile = 'fckeditor.original.html' ;
- }
- catch (e) {
- */
- var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
- sLink += this.toolbarSet ? ( '&Toolbar=' + this.toolbarSet) : '';
+ /**
+ * Resets this form.
+ * @return {BasicForm} this
+ */
+ reset : function(){
+ this.items.each(function(f){
+ f.reset();
+ });
+ Roo.each(this.childForms || [], function (f) {
+ f.reset();
+ });
+ this.resetHasChanged();
- var html = '<iframe id="' + this.getId() +
- '___Frame" src="' + sLink +
- '" width="' + this.width +
- '" height="' + this.height + '"' +
- (this.tabIndex ? ' tabindex="' + this.tabIndex + '"' :'' ) +
- ' frameborder="0" scrolling="no"></iframe>' ;
-
- return html ;
+ return this;
},
-
- _insertHtmlBefore : function( html, element )
- {
- if ( element.insertAdjacentHTML ) {
- // IE
- element.insertAdjacentHTML( 'beforeBegin', html ) ;
- } else { // Gecko
- var oRange = document.createRange() ;
- oRange.setStartBefore( element ) ;
- var oFragment = oRange.createContextualFragment( html );
- element.parentNode.insertBefore( oFragment, element ) ;
- }
- }
-
-
-
-
-
-
-
-
-});
-
-//Roo.reg('fckeditor', Roo.form.FCKeditor);
-
-function FCKeditor_OnComplete(editorInstance){
- var f = Roo.form.FCKeditor.editors[editorInstance.Name];
- f.fckEditor = editorInstance;
- //console.log("loaded");
- f.fireEvent('editorinit', f, editorInstance);
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ /**
+ * Add Roo.form components to this form.
+ * @param {Field} field1
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return {BasicForm} this
+ */
+ add : function(){
+ this.items.addAll(Array.prototype.slice.call(arguments, 0));
+ return this;
+ },
-//<script type="text/javascript">
-/**
- * @class Roo.form.GridField
- * @extends Roo.form.Field
- * Embed a grid (or editable grid into a form)
- * STATUS ALPHA
- *
- * This embeds a grid in a form, the value of the field should be the json encoded array of rows
- * it needs
- * xgrid.store = Roo.data.Store
- * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
- * xgrid.store.reader = Roo.data.JsonReader
- *
- *
- * @constructor
- * Creates a new GridField
- * @param {Object} config Configuration options
- */
-Roo.form.GridField = function(config){
- Roo.form.GridField.superclass.constructor.call(this, config);
-
-};
-Roo.extend(Roo.form.GridField, Roo.form.Field, {
/**
- * @cfg {Number} width - used to restrict width of grid..
+ * Removes a field from the items collection (does NOT remove its markup).
+ * @param {Field} field
+ * @return {BasicForm} this
*/
- width : 100,
+ remove : function(field){
+ this.items.remove(field);
+ return this;
+ },
+
/**
- * @cfg {Number} height - used to restrict height of grid..
- */
- height : 50,
- /**
- * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
- *
- *}
+ * Looks at the fields in this form, checks them for an id attribute,
+ * and calls applyTo on the existing dom element with that id.
+ * @return {BasicForm} this
*/
- xgrid : false,
+ render : function(){
+ this.items.each(function(f){
+ if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
+ f.applyTo(f.id);
+ }
+ });
+ return this;
+ },
+
/**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "checkbox", autocomplete: "off"})
+ * Calls {@link Ext#apply} for all fields in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
*/
- // defaultAutoCreate : { tag: 'div' },
- defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
+ applyToFields : function(o){
+ this.items.each(function(f){
+ Roo.apply(f, o);
+ });
+ return this;
+ },
+
/**
- * @cfg {String} addTitle Text to include for adding a title.
+ * Calls {@link Ext#applyIf} for all field in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
*/
- addTitle : false,
- //
- onResize : function(){
- Roo.form.Field.superclass.onResize.apply(this, arguments);
- },
+ applyIfToFields : function(o){
+ this.items.each(function(f){
+ Roo.applyIf(f, o);
+ });
+ return this;
+ }
+});
- initEvents : function(){
- // Roo.form.Checkbox.superclass.initEvents.call(this);
- // has no events...
-
- },
+// back compat
+Roo.BasicForm = Roo.form.BasicForm;
+
+Roo.apply(Roo.form.BasicForm, {
+
+ popover : {
+
+ padding : 5,
+
+ isApplied : false,
+
+ isMasked : false,
+
+ form : false,
+
+ target : false,
+
+ intervalID : false,
+
+ maskEl : false,
+
+ apply : function()
+ {
+ if(this.isApplied){
+ return;
+ }
+
+ this.maskEl = {
+ top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+ left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+ bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+ right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+ };
+
+ this.maskEl.top.enableDisplayMode("block");
+ this.maskEl.left.enableDisplayMode("block");
+ this.maskEl.bottom.enableDisplayMode("block");
+ this.maskEl.right.enableDisplayMode("block");
+
+ Roo.get(document.body).on('click', function(){
+ this.unmask();
+ }, this);
+
+ Roo.get(document.body).on('touchstart', function(){
+ this.unmask();
+ }, this);
+
+ this.isApplied = true
+ },
+
+ mask : function(form, target)
+ {
+ this.form = form;
+
+ this.target = target;
+
+ if(!this.form.errorMask || !target.el){
+ return;
+ }
+
+ var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
+
+ var ot = this.target.el.calcOffsetsTo(scrollable);
+
+ var scrollTo = ot[1] - this.form.maskOffset;
+
+ scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
+
+ scrollable.scrollTo('top', scrollTo);
+
+ var el = this.target.wrap || this.target.el;
+
+ var box = el.getBox();
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setStyle('z-index', 10000);
+ this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+ this.maskEl.top.setLeft(0);
+ this.maskEl.top.setTop(0);
+ this.maskEl.top.show();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setStyle('z-index', 10000);
+ this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
+ this.maskEl.left.setLeft(0);
+ this.maskEl.left.setTop(box.y - this.padding);
+ this.maskEl.left.show();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setStyle('z-index', 10000);
+ this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+ this.maskEl.bottom.setLeft(0);
+ this.maskEl.bottom.setTop(box.bottom + this.padding);
+ this.maskEl.bottom.show();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setStyle('z-index', 10000);
+ this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+ this.maskEl.right.setLeft(box.right + this.padding);
+ this.maskEl.right.setTop(box.y - this.padding);
+ this.maskEl.right.show();
+ this.intervalID = window.setInterval(function() {
+ Roo.form.BasicForm.popover.unmask();
+ }, 10000);
+
+ window.onwheel = function(){ return false;};
+
+ (function(){ this.isMasked = true; }).defer(500, this);
+
+ },
+
+ unmask : function()
+ {
+ if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
+ return;
+ }
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.top.hide();
- getResizeEl : function(){
- return this.wrap;
- },
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.left.hide();
- getPositionEl : function(){
- return this.wrap;
- },
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.bottom.hide();
- // private
- onRender : function(ct, position){
-
- this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
- var style = this.style;
- delete this.style;
-
- Roo.form.GridField.superclass.onRender.call(this, ct, position);
- this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
- this.viewEl = this.wrap.createChild({ tag: 'div' });
- if (style) {
- this.viewEl.applyStyles(style);
- }
- if (this.width) {
- this.viewEl.setWidth(this.width);
- }
- if (this.height) {
- this.viewEl.setHeight(this.height);
- }
- //if(this.inputValue !== undefined){
- //this.setValue(this.value);
-
-
- this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
-
-
- this.grid.render();
- this.grid.getDataSource().on('remove', this.refreshValue, this);
- this.grid.getDataSource().on('update', this.refreshValue, this);
- this.grid.on('afteredit', this.refreshValue, this);
-
- },
-
-
- /**
- * Sets the value of the item.
- * @param {String} either an object or a string..
- */
- setValue : function(v){
- //this.value = v;
- v = v || []; // empty set..
- // this does not seem smart - it really only affects memoryproxy grids..
- if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
- var ds = this.grid.getDataSource();
- // assumes a json reader..
- var data = {}
- data[ds.reader.meta.root ] = typeof(v) == 'string' ? Roo.decode(v) : v;
- ds.loadData( data);
- }
- // clear selection so it does not get stale.
- if (this.grid.sm) {
- this.grid.sm.clearSelections();
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.right.hide();
+
+ window.onwheel = function(){ return true;};
+
+ if(this.intervalID){
+ window.clearInterval(this.intervalID);
+ this.intervalID = false;
+ }
+
+ this.isMasked = false;
+
}
- Roo.form.GridField.superclass.setValue.call(this, v);
- this.refreshValue();
- // should load data in the grid really....
- },
-
- // private
- refreshValue: function() {
- var val = [];
- this.grid.getDataSource().each(function(r) {
- val.push(r.data);
- });
- this.el.dom.value = Roo.encode(val);
}
-
-
-
});/*
* Based on:
* Ext JS Library 1.1.1
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.DisplayField
- * @extends Roo.form.Field
- * A generic Field to display non-editable data.
- * @cfg {Boolean} closable (true|false) default false
+ * @class Roo.form.Form
+ * @extends Roo.form.BasicForm
+ * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
* @constructor
- * Creates a new Display Field item.
* @param {Object} config Configuration options
*/
-Roo.form.DisplayField = function(config){
- Roo.form.DisplayField.superclass.constructor.call(this, config);
+Roo.form.Form = function(config){
+ var xitems = [];
+ if (config.items) {
+ xitems = config.items;
+ delete config.items;
+ }
+
+ Roo.form.Form.superclass.constructor.call(this, null, config);
+ this.url = this.url || this.action;
+ if(!this.root){
+ this.root = new Roo.form.Layout(Roo.applyIf({
+ id: Roo.id()
+ }, config));
+ }
+ this.active = this.root;
+ /**
+ * Array of all the buttons that have been added to this form via {@link addButton}
+ * @type Array
+ */
+ this.buttons = [];
+ this.allItems = [];
this.addEvents({
/**
- * @event close
- * Fires after the click the close btn
- * @param {Roo.form.DisplayField} this
- */
- close : true
+ * @event clientvalidation
+ * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+ * @param {Form} this
+ * @param {Boolean} valid true if the form has passed client-side validation
+ */
+ clientvalidation: true,
+ /**
+ * @event rendered
+ * Fires when the form is rendered
+ * @param {Roo.form.Form} form
+ */
+ rendered : true
});
+
+ if (this.progressUrl) {
+ // push a hidden field onto the list of fields..
+ this.addxtype( {
+ xns: Roo.form,
+ xtype : 'Hidden',
+ name : 'UPLOAD_IDENTIFIER'
+ });
+ }
+
+
+ Roo.each(xitems, this.addxtype, this);
+
};
-Roo.extend(Roo.form.DisplayField, Roo.form.TextField, {
- inputType: 'hidden',
- allowBlank: true,
- readOnly: true,
+Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+ /**
+ * @cfg {Roo.Button} buttons[] buttons at bottom of form
+ */
-
/**
- * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+ * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
- focusClass : undefined,
/**
- * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+ * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
- fieldClass: 'x-form-field',
+ /**
+ * @cfg {String} buttonAlign (left|center|right) Valid values are "left," "center" and "right" (defaults to "center")
+ */
+ buttonAlign:'center',
+
+ /**
+ * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
+ */
+ minButtonWidth:75,
+
+ /**
+ * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
+ * This property cascades to child containers if not set.
+ */
+ labelAlign:'left',
+
+ /**
+ * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
+ * fires a looping event with that state. This is required to bind buttons to the valid
+ * state using the config value formBind:true on the button.
+ */
+ monitorValid : false,
+
+ /**
+ * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+ */
+ monitorPoll : 200,
- /**
- * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
+ /**
+ * @cfg {String} progressUrl - Url to return progress data
*/
- valueRenderer: undefined,
- width: 100,
+ progressUrl : false,
/**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "checkbox", autocomplete: "off"})
+ * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
+ * sending a formdata with extra parameters - eg uploaded elements.
*/
-
- // defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
-
- closable : false,
- onResize : function(){
- Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
-
+ formData : false,
+
+ /**
+ * 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
+ * until end() is called.
+ * @param {Object} config The config to pass to the column
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return Column The column container object
+ */
+ column : function(c){
+ var col = new Roo.form.Column(c);
+ this.start(col);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
+ }
+ return col;
},
- initEvents : function(){
- // Roo.form.Checkbox.superclass.initEvents.call(this);
- // has no events...
-
- if(this.closable){
- this.closeEl.on('click', this.onClose, this);
+ /**
+ * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
+ * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
+ * until end() is called.
+ * @param {Object} config The config to pass to the fieldset
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return FieldSet The fieldset container object
+ */
+ fieldset : function(c){
+ var fs = new Roo.form.FieldSet(c);
+ this.start(fs);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
}
-
+ return fs;
},
+ /**
+ * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
+ * fields are added and the container is closed. If no fields are passed the container remains open
+ * until end() is called.
+ * @param {Object} config The config to pass to the Layout
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return Layout The container object
+ */
+ container : function(c){
+ var l = new Roo.form.Layout(c);
+ this.start(l);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
+ }
+ return l;
+ },
- getResizeEl : function(){
- return this.wrap;
+ /**
+ * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
+ * @param {Object} container A Roo.form.Layout or subclass of Layout
+ * @return {Form} this
+ */
+ start : function(c){
+ // cascade label info
+ Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
+ this.active.stack.push(c);
+ c.ownerCt = this.active;
+ this.active = c;
+ return this;
},
- getPositionEl : function(){
- return this.wrap;
+ /**
+ * Closes the current open container
+ * @return {Form} this
+ */
+ end : function(){
+ if(this.active == this.root){
+ return this;
+ }
+ this.active = this.active.ownerCt;
+ return this;
},
- // private
- onRender : function(ct, position){
+ /**
+ * Add Roo.form components to the current open container (e.g. column, fieldset, etc.). Fields added via this method
+ * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
+ * as the label of the field.
+ * @param {Field} field1
+ * @param {Field} field2 (optional)
+ * @param {Field} etc. (optional)
+ * @return {Form} this
+ */
+ add : function(){
+ this.active.stack.push.apply(this.active.stack, arguments);
+ this.allItems.push.apply(this.allItems,arguments);
+ var r = [];
+ for(var i = 0, a = arguments, len = a.length; i < len; i++) {
+ if(a[i].isFormField){
+ r.push(a[i]);
+ }
+ }
+ if(r.length > 0){
+ Roo.form.Form.superclass.add.apply(this, r);
+ }
+ 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..
+ * @param {String} id - id or name to find.
+
+ * @return {Element} e - or false if nothing found.
+ */
+ findbyId : function(id)
+ {
+ var ret = false;
+ if (!id) {
+ return ret;
+ }
+ Roo.each(this.allItems, function(f){
+ if (f.id == id || f.name == id ){
+ ret = f;
+ return false;
+ }
+ });
+ return ret;
+ },
+
+
+
+ /**
+ * Render this form into the passed container. This should only be called once!
+ * @param {String/HTMLElement/Element} container The element this component should be rendered into
+ * @return {Form} this
+ */
+ render : function(ct)
+ {
- Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
- //if(this.inputValue !== undefined){
- this.wrap = this.el.wrap();
- this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
- if(this.closable){
- this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
- }
+ ct = Roo.get(ct);
+ var o = this.autoCreate || {
+ tag: 'form',
+ method : this.method || 'POST',
+ id : this.id || Roo.id()
+ };
+ this.initEl(ct.createChild(o));
+
+ this.root.render(this.el);
- if (this.bodyStyle) {
- this.viewEl.applyStyles(this.bodyStyle);
+
+
+ this.items.each(function(f){
+ f.render('x-form-el-'+f.id);
+ });
+
+ if(this.buttons.length > 0){
+ // tables are required to maintain order and for correct IE layout
+ var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
+ cls:"x-form-btns x-form-btns-"+this.buttonAlign,
+ html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+ }}, null, true);
+ var tr = tb.getElementsByTagName('tr')[0];
+ for(var i = 0, len = this.buttons.length; i < len; i++) {
+ var b = this.buttons[i];
+ var td = document.createElement('td');
+ td.className = 'x-form-btn-td';
+ b.render(tr.appendChild(td));
+ }
}
- //this.viewEl.setStyle('padding', '2px');
-
- this.setValue(this.value);
-
+ if(this.monitorValid){ // initialize after render
+ this.startMonitoring();
+ }
+ this.fireEvent('rendered', this);
+ return this;
},
-/*
- // private
- initValue : Roo.emptyFn,
- */
+ /**
+ * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
+ * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+ * object or a valid Roo.DomHelper element config
+ * @param {Function} handler The function called when the button is clicked
+ * @param {Object} scope (optional) The scope of the handler function
+ * @return {Roo.Button}
+ */
+ addButton : function(config, handler, scope){
+ var bc = {
+ handler: handler,
+ scope: scope,
+ minWidth: this.minButtonWidth,
+ hideParent:true
+ };
+ if(typeof config == "string"){
+ bc.text = config;
+ }else{
+ Roo.apply(bc, config);
+ }
+ var btn = new Roo.Button(null, bc);
+ this.buttons.push(btn);
+ return btn;
+ },
- // private
- onClick : function(){
-
+ /**
+ * Adds a series of form elements (using the xtype property as the factory method.
+ * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
+ * @param {Object} config
+ */
+
+ addxtype : function()
+ {
+ var ar = Array.prototype.slice.call(arguments, 0);
+ var ret = false;
+ for(var i = 0; i < ar.length; i++) {
+ if (!ar[i]) {
+ continue; // skip -- if this happends something invalid got sent, we
+ // should ignore it, as basically that interface element will not show up
+ // and that should be pretty obvious!!
+ }
+
+ if (Roo.form[ar[i].xtype]) {
+ ar[i].form = this;
+ var fe = Roo.factory(ar[i], Roo.form);
+ if (!ret) {
+ ret = fe;
+ }
+ fe.form = this;
+ if (fe.store) {
+ fe.store.form = this;
+ }
+ if (fe.isLayout) {
+
+ this.start(fe);
+ this.allItems.push(fe);
+ if (fe.items && fe.addxtype) {
+ fe.addxtype.apply(fe, fe.items);
+ delete fe.items;
+ }
+ this.end();
+ continue;
+ }
+
+
+
+ this.add(fe);
+ // console.log('adding ' + ar[i].xtype);
+ }
+ if (ar[i].xtype == 'Button') {
+ //console.log('adding button');
+ //console.log(ar[i]);
+ this.addButton(ar[i]);
+ this.allItems.push(fe);
+ continue;
+ }
+
+ if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
+ alert('end is not supported on xtype any more, use items');
+ // this.end();
+ // //console.log('adding end');
+ }
+
+ }
+ return ret;
+ },
+
+ /**
+ * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+ * option "monitorValid"
+ */
+ startMonitoring : function(){
+ if(!this.bound){
+ this.bound = true;
+ Roo.TaskMgr.start({
+ run : this.bindHandler,
+ interval : this.monitorPoll || 200,
+ scope: this
+ });
+ }
},
/**
- * Sets the checked state of the checkbox.
- * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
+ * Stops monitoring of the valid state of this form
*/
- setValue : function(v){
- this.value = v;
- var html = this.valueRenderer ? this.valueRenderer(v) : String.format('{0}', v);
- // this might be called before we have a dom element..
- if (!this.viewEl) {
- return;
- }
- this.viewEl.dom.innerHTML = html;
- Roo.form.DisplayField.superclass.setValue.call(this, v);
-
+ stopMonitoring : function(){
+ this.bound = false;
},
-
- onClose : function(e)
- {
- e.preventDefault();
-
- this.fireEvent('close', this);
+
+ // private
+ bindHandler : function(){
+ if(!this.bound){
+ return false; // stops binding
+ }
+ var valid = true;
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ valid = false;
+ return false;
+ }
+ });
+ for(var i = 0, len = this.buttons.length; i < len; i++){
+ var btn = this.buttons[i];
+ if(btn.formBind === true && btn.disabled === valid){
+ btn.setDisabled(!valid);
+ }
+ }
+ this.fireEvent('clientvalidation', this, valid);
}
-});/*
- *
- * Licence- LGPL
- *
+
+
+
+
+
+
+
+
+});
+
+
+// back compat
+Roo.Form = Roo.form.Form;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
-/**
- * @class Roo.form.DayPicker
- * @extends Roo.form.Field
- * A Day picker show [M] [T] [W] ....
+// as we use this in bootstrap.
+Roo.namespace('Roo.form');
+ /**
+ * @class Roo.form.Action
+ * Internal Class used to handle form actions
* @constructor
- * Creates a new Day Picker
+ * @param {Roo.form.BasicForm} el The form element or its id
* @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: "new-password"},
-
-
- actionMode : 'viewEl',
- //
- // private
- inputType : 'hidden',
-
-
- inputElement: false, // real input element?
- basedOn: false, // ????
-
- isFormField: true, // not sure where this is needed!!!!
+
+// define the action interface
+Roo.form.Action = function(form, options){
+ this.form = form;
+ this.options = options || {};
+};
+/**
+ * Client Validation Failed
+ * @const
+ */
+Roo.form.Action.CLIENT_INVALID = 'client';
+/**
+ * Server Validation Failed
+ * @const
+ */
+Roo.form.Action.SERVER_INVALID = 'server';
+ /**
+ * Connect to Server Failed
+ * @const
+ */
+Roo.form.Action.CONNECT_FAILURE = 'connect';
+/**
+ * Reading Data from Server Failed
+ * @const
+ */
+Roo.form.Action.LOAD_FAILURE = 'load';
- onResize : function(){
- Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
- if(!this.boxLabel){
- this.el.alignTo(this.wrap, 'c-c');
- }
- },
+Roo.form.Action.prototype = {
+ type : 'default',
+ failureType : undefined,
+ response : undefined,
+ result : undefined,
+
+ // interface method
+ run : function(options){
- initEvents : function(){
- Roo.form.Checkbox.superclass.initEvents.call(this);
- this.el.on("click", this.onClick, this);
- this.el.on("change", this.onClick, this);
},
+ // interface method
+ success : function(response){
- getResizeEl : function(){
- return this.wrap;
},
- getPositionEl : function(){
- return this.wrap;
+ // interface method
+ handleResponse : function(response){
+
},
-
- // 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
-
+ // default connection failure
+ failure : function(response){
-
-
+ this.response = response;
+ this.failureType = Roo.form.Action.CONNECT_FAILURE;
+ this.form.afterAction(this, false);
},
- // 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;
-
+ processResponse : function(response){
+ this.response = response;
+ if(!response.responseText){
+ return true;
+ }
+ this.result = this.handleResponse(response);
+ return this.result;
},
- // 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);
- // }
+ // utility functions used internally
+ getUrl : function(appendParams){
+ var url = this.options.url || this.form.url || this.form.el.dom.action;
+ if(appendParams){
+ var p = this.getParams();
+ if(p){
+ url += (url.indexOf('?') != -1 ? '&' : '?') + p;
+ }
+ }
+ return url;
},
-
- // 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);
+
+ getMethod : function(){
+ return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
},
- /**
- * 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');
+ getParams : function(){
+ var bp = this.form.baseParams;
+ var p = this.options.params;
+ if(p){
+ if(typeof p == "object"){
+ p = Roo.urlEncode(Roo.applyIf(p, bp));
+ }else if(typeof p == 'string' && bp){
+ p += '&' + Roo.urlEncode(bp);
}
-
- });
-
-
- this.fireEvent('change', this, v, old);
-
-
- },
-
- // handle setting of hidden value by some other method!!?!?
- setFromHidden: function()
- {
- if(!this.el){
- return;
+ }else if(bp){
+ p = Roo.urlEncode(bp);
}
- //console.log("SET FROM HIDDEN");
- //alert('setFrom hidden');
- this.setValue(this.el.dom.value);
+ return p;
},
-
- onDestroy : function()
- {
- if(this.viewEl){
- Roo.get(this.viewEl).remove();
- }
-
- Roo.form.DayPicker.superclass.onDestroy.call(this);
- }
-});/*
- * RooJS Library 1.1.1
- * Copyright(c) 2008-2011 Alan Knowles
- *
- * License - LGPL
- */
-
+ createCallback : function(){
+ return {
+ success: this.success,
+ failure: this.failure,
+ scope: this,
+ timeout: (this.form.timeout*1000),
+ upload: this.form.fileUpload ? this.success : undefined
+ };
+ }
+};
-/**
- * @class Roo.form.ComboCheck
- * @extends Roo.form.ComboBox
- * A combobox for multiple select items.
- *
- * FIXME - could do with a reset button..
- *
- * @constructor
- * Create a new ComboCheck
- * @param {Object} config Configuration options
- */
-Roo.form.ComboCheck = function(config){
- Roo.form.ComboCheck.superclass.constructor.call(this, config);
- // should verify some data...
- // like
- // hiddenName = required..
- // displayField = required
- // valudField == required
- var req= [ 'hiddenName', 'displayField', 'valueField' ];
- var _t = this;
- Roo.each(req, function(e) {
- if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
- throw "Roo.form.ComboCheck : missing value for: " + e;
- }
- });
-
-
+Roo.form.Action.Submit = function(form, options){
+ Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
};
-Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
-
-
- editable : false,
-
- selectedClass: 'x-menu-item-checked',
+Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
+ type : 'submit',
+
+ haveProgress : false,
+ uploadComplete : false,
- // private
- onRender : function(ct, position){
- var _t = this;
+ // uploadProgress indicator.
+ uploadProgress : function()
+ {
+ if (!this.form.progressUrl) {
+ return;
+ }
+ if (!this.haveProgress) {
+ Roo.MessageBox.progress("Uploading", "Uploading");
+ }
+ if (this.uploadComplete) {
+ Roo.MessageBox.hide();
+ return;
+ }
+ this.haveProgress = true;
+
+ var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
- if(!this.tpl){
- var cls = 'x-combo-list';
-
-
- this.tpl = new Roo.Template({
- html : '<div class="'+cls+'-item x-menu-check-item">' +
- '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' +
- '<span>{' + this.displayField + '}</span>' +
- '</div>'
+ var c = new Roo.data.Connection();
+ c.request({
+ url : this.form.progressUrl,
+ params: {
+ id : uid
+ },
+ method: 'GET',
+ success : function(req){
+ //console.log(data);
+ var rdata = false;
+ var edata;
+ try {
+ rdata = Roo.decode(req.responseText)
+ } catch (e) {
+ Roo.log("Invalid data from server..");
+ Roo.log(edata);
+ return;
+ }
+ if (!rdata || !rdata.success) {
+ Roo.log(rdata);
+ Roo.MessageBox.alert(Roo.encode(rdata));
+ return;
+ }
+ var data = rdata.data;
- });
- }
-
-
- Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
- this.view.singleSelect = false;
- this.view.multiSelect = true;
- this.view.toggleSelect = true;
- this.pageTb.add(new Roo.Toolbar.Fill(),{
-
- text: 'Select All',
- handler: function() {
- _t.selectAll();
- }
- },
- {
- text: 'Done',
- handler: function() {
- _t.collapse();
- }
+ if (this.uploadComplete) {
+ Roo.MessageBox.hide();
+ return;
+ }
+
+ if (data){
+ Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
+ Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
+ );
+ }
+ this.uploadProgress.defer(2000,this);
+ },
+
+ failure: function(data) {
+ Roo.log('progress url failed ');
+ Roo.log(data);
+ },
+ scope : this
});
+
},
- cleanLeadingSpace : function(e)
+
+ run : function()
{
- // this is disabled, as it retriggers setvalue on blur
- return;
+ // run get Values on the form, so it syncs any secondary forms.
+ this.form.getValues();
+
+ var o = this.options;
+ var method = this.getMethod();
+ var isPost = method == 'POST';
+ if(o.clientValidation === false || this.form.isValid()){
+
+ if (this.form.progressUrl) {
+ this.form.findField('UPLOAD_IDENTIFIER').setValue(
+ (new Date() * 1) + '' + Math.random());
+
+ }
+
+
+ Roo.Ajax.request(Roo.apply(this.createCallback(), {
+ form:this.form.el.dom,
+ url:this.getUrl(!isPost),
+ method: method,
+ params:isPost ? this.getParams() : null,
+ isUpload: this.form.fileUpload,
+ formData : this.form.formData
+ }));
+
+ this.uploadProgress();
+
+ }else if (o.clientValidation !== false){ // client validation failed
+ this.failureType = Roo.form.Action.CLIENT_INVALID;
+ this.form.afterAction(this, false);
+ }
},
- doForce : function() {
- // no idea what this did, but it blanks out our values.
- return;
+
+ success : function(response)
+ {
+ this.uploadComplete= true;
+ if (this.haveProgress) {
+ Roo.MessageBox.hide();
+ }
+
+
+ var result = this.processResponse(response);
+ if(result === true || result.success){
+ this.form.afterAction(this, true);
+ return;
+ }
+ if(result.errors){
+ this.form.markInvalid(result.errors);
+ this.failureType = Roo.form.Action.SERVER_INVALID;
+ }
+ this.form.afterAction(this, false);
},
- onViewOver : function(e, t){
- // do nothing...
- return;
+ failure : function(response)
+ {
+ this.uploadComplete= true;
+ if (this.haveProgress) {
+ Roo.MessageBox.hide();
+ }
+ this.response = response;
+ this.failureType = Roo.form.Action.CONNECT_FAILURE;
+ this.form.afterAction(this, false);
},
- onViewClick : function(doFocus,index){
- return;
-
- },
- select: function () {
- //Roo.log("SELECT CALLED");
- },
-
- selectByValue : function(xv, scrollIntoView){
- var ar = this.getValueArray();
- var sels = [];
-
- Roo.each(ar, function(v) {
- if(v === undefined || v === null){
- return;
+ handleResponse : function(response){
+ if(this.form.errorReader){
+ var rs = this.form.errorReader.read(response);
+ var errors = [];
+ if(rs.records){
+ for(var i = 0, len = rs.records.length; i < len; i++) {
+ var r = rs.records[i];
+ errors[i] = r.data;
+ }
}
- var r = this.findRecord(this.valueField, v);
- if(r){
- sels.push(this.store.indexOf(r))
-
+ if(errors.length < 1){
+ errors = null;
}
- },this);
- this.view.select(sels);
- return false;
- },
-
- selectAll : function()
- {
- var sels = [];
- this.store.each(function(r,i) {
- sels.push(i);
- });
- this.view.select(sels);
- this.collapse();
- return false;
-
- },
-
- onSelect : function(record, index){
- // Roo.log("onselect Called");
- // this is only called by the clear button now..
- this.view.clearSelections();
- this.setValue('[]');
- if (this.value != this.valueBefore) {
- this.fireEvent('change', this, this.value, this.valueBefore);
- this.valueBefore = this.value;
+ return {
+ success : rs.success,
+ errors : errors
+ };
}
- },
- getValueArray : function()
- {
- var ar = [] ;
-
+ var ret = false;
try {
- //Roo.log(this.value);
- if (typeof(this.value) == 'undefined') {
- return [];
+ var rt = response.responseText;
+ if (rt.match(/^\<!--\[CDATA\[/)) {
+ rt = rt.replace(/^\<!--\[CDATA\[/,'');
+ rt = rt.replace(/\]\]--\>$/,'');
}
- var ar = Roo.decode(this.value);
- return ar instanceof Array ? ar : []; //?? valid?
- } catch(e) {
- Roo.log(e + "\nRoo.form.ComboCheck:getValueArray invalid data:" + this.getValue());
- return [];
+ ret = Roo.decode(rt);
+ } catch (e) {
+ ret = {
+ success: false,
+ errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
+ errors : []
+ };
}
-
- },
- expand : function ()
- {
-
- Roo.form.ComboCheck.superclass.expand.call(this);
- this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
- //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
+ return ret;
+ }
+});
- },
-
- collapse : function(){
- Roo.form.ComboCheck.superclass.collapse.call(this);
- var sl = this.view.getSelectedIndexes();
- var st = this.store;
- var nv = [];
- var tv = [];
- var r;
- Roo.each(sl, function(i) {
- r = st.getAt(i);
- nv.push(r.get(this.valueField));
- },this);
- this.setValue(Roo.encode(nv));
- if (this.value != this.valueBefore) {
- this.fireEvent('change', this, this.value, this.valueBefore);
- this.valueBefore = this.value;
- }
+Roo.form.Action.Load = function(form, options){
+ Roo.form.Action.Load.superclass.constructor.call(this, form, options);
+ this.reader = this.form.reader;
+};
+
+Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
+ type : 'load',
+
+ run : function(){
+ Roo.Ajax.request(Roo.apply(
+ this.createCallback(), {
+ method:this.getMethod(),
+ url:this.getUrl(false),
+ params:this.getParams()
+ }));
},
-
- setValue : function(v){
- // Roo.log(v);
- this.value = v;
-
- var vals = this.getValueArray();
- var tv = [];
- Roo.each(vals, function(k) {
- var r = this.findRecord(this.valueField, k);
- if(r){
- tv.push(r.data[this.displayField]);
- }else if(this.valueNotFoundText !== undefined){
- tv.push( this.valueNotFoundText );
- }
- },this);
- // Roo.log(tv);
+
+ success : function(response){
- Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
- this.hiddenField.value = v;
- this.value = v;
+ var result = this.processResponse(response);
+ if(result === true || !result.success || !result.data){
+ this.failureType = Roo.form.Action.LOAD_FAILURE;
+ this.form.afterAction(this, false);
+ return;
+ }
+ this.form.clearInvalid();
+ this.form.setValues(result.data);
+ this.form.afterAction(this, true);
+ },
+
+ handleResponse : function(response){
+ if(this.form.reader){
+ var rs = this.form.reader.read(response);
+ var data = rs.records && rs.records[0] ? rs.records[0].data : null;
+ return {
+ success : rs.success,
+ data : data
+ };
+ }
+ return Roo.decode(response.responseText);
}
-
-});/*
+});
+
+Roo.form.Action.ACTION_TYPES = {
+ 'load' : Roo.form.Action.Load,
+ 'submit' : Roo.form.Action.Submit
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.form.Signature
- * @extends Roo.form.Field
- * Signature field.
+ * @class Roo.form.Layout
+ * @extends Roo.Component
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
- *
* @param {Object} config Configuration options
*/
-
-Roo.form.Signature = function(config){
- Roo.form.Signature.superclass.constructor.call(this, config);
-
- this.addEvents({// not in used??
- /**
- * @event confirm
- * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.Signature} combo This combo box
- */
- 'confirm' : true,
- /**
- * @event reset
- * Fires when the 'edit' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
- */
- 'reset' : true
- });
+Roo.form.Layout = function(config){
+ var xitems = [];
+ if (config.items) {
+ xitems = config.items;
+ delete config.items;
+ }
+ Roo.form.Layout.superclass.constructor.call(this, config);
+ this.stack = [];
+ Roo.each(xitems, this.addxtype, this);
+
};
-Roo.extend(Roo.form.Signature, Roo.form.Field, {
+Roo.extend(Roo.form.Layout, Roo.Component, {
/**
- * @cfg {Object} labels Label to use when rendering a form.
- * defaults to
- * labels : {
- * clear : "Clear",
- * confirm : "Confirm"
- * }
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
*/
- labels : {
- clear : "Clear",
- confirm : "Confirm"
- },
/**
- * @cfg {Number} width The signature panel width (defaults to 300)
+ * @cfg {String/Object/Function} style
+ * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
+ * a function which returns such a specification.
*/
- width: 300,
/**
- * @cfg {Number} height The signature panel height (defaults to 100)
+ * @cfg {String} labelAlign (left|top|right)
+ * Valid values are "left," "top" and "right" (defaults to "left")
*/
- height : 100,
/**
- * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
+ * @cfg {Number} labelWidth
+ * Fixed width in pixels of all field labels (defaults to undefined)
*/
- allowBlank : false,
-
- //private
- // {Object} signPanel The signature SVG panel element (defaults to {})
- signPanel : {},
- // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
- isMouseDown : false,
- // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
- isConfirmed : false,
- // {String} signatureTmp SVG mapping string (defaults to empty string)
- signatureTmp : '',
+ /**
+ * @cfg {Boolean} clear
+ * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
+ */
+ clear : true,
+ /**
+ * @cfg {String} labelSeparator
+ * The separator to use after field labels (defaults to ':')
+ */
+ labelSeparator : ':',
+ /**
+ * @cfg {Boolean} hideLabels
+ * True to suppress the display of field labels in this layout (defaults to false)
+ */
+ hideLabels : false,
+
+ // private
+ defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
+ isLayout : true,
- defaultAutoCreate : { // modified by initCompnoent..
- tag: "input",
- type:"hidden"
- },
-
// private
onRender : function(ct, position){
-
- Roo.form.Signature.superclass.onRender.call(this, ct, position);
-
- this.wrap = this.el.wrap({
- cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
- });
-
- this.createToolbar(this);
- this.signPanel = this.wrap.createChild({
- tag: 'div',
- style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
- }, this.el
- );
-
- this.svgID = Roo.id();
- this.svgEl = this.signPanel.createChild({
- xmlns : 'http://www.w3.org/2000/svg',
- tag : 'svg',
- id : this.svgID + "-svg",
- width: this.width,
- height: this.height,
- viewBox: '0 0 '+this.width+' '+this.height,
- cn : [
- {
- tag: "rect",
- id: this.svgID + "-svg-r",
- width: this.width,
- height: this.height,
- fill: "#ffa"
- },
- {
- tag: "line",
- id: this.svgID + "-svg-l",
- x1: "0", // start
- y1: (this.height*0.8), // start set the line in 80% of height
- x2: this.width, // end
- y2: (this.height*0.8), // end set the line in 80% of height
- 'stroke': "#666",
- 'stroke-width': "1",
- 'stroke-dasharray': "3",
- 'shape-rendering': "crispEdges",
- 'pointer-events': "none"
- },
- {
- tag: "path",
- id: this.svgID + "-svg-p",
- 'stroke': "navy",
- 'stroke-width': "3",
- 'fill': "none",
- 'pointer-events': 'none'
- }
- ]
- });
- this.createSVG();
- this.svgBox = this.svgEl.dom.getScreenCTM();
- },
- createSVG : function(){
- var svg = this.signPanel;
- var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
- var t = this;
-
- r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
- r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
- r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
- r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
- r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
- r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
- r.addEventListener('touchend', function(e) { return t.up(e); }, false);
-
- },
- isTouchEvent : function(e){
- return e.type.match(/^touch/);
- },
- getCoords : function (e) {
- var pt = this.svgEl.dom.createSVGPoint();
- pt.x = e.clientX;
- pt.y = e.clientY;
- if (this.isTouchEvent(e)) {
- pt.x = e.targetTouches[0].clientX;
- pt.y = e.targetTouches[0].clientY;
+ if(this.el){ // from markup
+ this.el = Roo.get(this.el);
+ }else { // generate
+ var cfg = this.getAutoCreate();
+ this.el = ct.createChild(cfg, position);
}
- var a = this.svgEl.dom.getScreenCTM();
- var b = a.inverse();
- var mx = pt.matrixTransform(b);
- return mx.x + ',' + mx.y;
- },
- //mouse event headler
- down : function (e) {
- this.signatureTmp += 'M' + this.getCoords(e) + ' ';
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
-
- this.isMouseDown = true;
-
- e.preventDefault();
- },
- move : function (e) {
- if (this.isMouseDown) {
- this.signatureTmp += 'L' + this.getCoords(e) + ' ';
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
+ if(this.style){
+ this.el.applyStyles(this.style);
}
-
- e.preventDefault();
- },
- up : function (e) {
- this.isMouseDown = false;
- var sp = this.signatureTmp.split(' ');
-
- if(sp.length > 1){
- if(!sp[sp.length-2].match(/^L/)){
- sp.pop();
- sp.pop();
- sp.push("");
- this.signatureTmp = sp.join(" ");
+ if(this.labelAlign){
+ this.el.addClass('x-form-label-'+this.labelAlign);
+ }
+ if(this.hideLabels){
+ this.labelStyle = "display:none";
+ this.elementStyle = "padding-left:0;";
+ }else{
+ if(typeof this.labelWidth == 'number'){
+ this.labelStyle = "width:"+this.labelWidth+"px;";
+ this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
+ }
+ if(this.labelAlign == 'top'){
+ this.labelStyle = "width:auto;";
+ this.elementStyle = "padding-left:0;";
}
}
- if(this.getValue() != this.signatureTmp){
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
- this.isConfirmed = false;
+ var stack = this.stack;
+ var slen = stack.length;
+ if(slen > 0){
+ if(!this.fieldTpl){
+ var t = new Roo.Template(
+ '<div class="x-form-item {5}">',
+ '<label for="{0}" style="{2}">{1}{4}</label>',
+ '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+ '</div>',
+ '</div><div class="x-form-clear-left"></div>'
+ );
+ t.disableFormats = true;
+ t.compile();
+ Roo.form.Layout.prototype.fieldTpl = t;
+ }
+ for(var i = 0; i < slen; i++) {
+ if(stack[i].isFormField){
+ this.renderField(stack[i]);
+ }else{
+ this.renderComponent(stack[i]);
+ }
+ }
}
- e.preventDefault();
- },
-
- /**
- * Protected method that will not generally be called directly. It
- * is called when the editor creates its toolbar. Override this method if you need to
- * add custom toolbar buttons.
- * @param {HtmlEditor} editor
- */
- createToolbar : function(editor){
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: editor, // was editor...
- handler:handler||editor.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
+ if(this.clear){
+ this.el.createChild({cls:'x-form-clear'});
}
-
-
- var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
- this.tb = tb;
- this.tb.add(
- {
- cls : ' x-signature-btn x-signature-'+id,
- scope: editor, // was editor...
- handler: this.reset,
- clickEvent:'mousedown',
- text: this.labels.clear
- },
- {
- xtype : 'Fill',
- xns: Roo.Toolbar
- },
- {
- cls : ' x-signature-btn x-signature-'+id,
- scope: editor, // was editor...
- handler: this.confirmHandler,
- clickEvent:'mousedown',
- text: this.labels.confirm
- }
- );
-
},
- //public
+
+ // private
+ renderField : function(f){
+ f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
+ f.id, //0
+ f.fieldLabel, //1
+ f.labelStyle||this.labelStyle||'', //2
+ this.elementStyle||'', //3
+ typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
+ f.itemCls||this.itemCls||'' //5
+ ], true).getPrevSibling());
+ },
+
+ // private
+ renderComponent : function(c){
+ c.render(c.isLayout ? this.el : this.el.createChild());
+ },
/**
- * when user is clicked confirm then show this image.....
- *
- * @return {String} Image Data URI
+ * Adds a object form elements (using the xtype property as the factory method.)
+ * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column
+ * @param {Object} config
*/
- getImageDataURI : function(){
- var svg = this.svgEl.dom.parentNode.innerHTML;
- var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
- return src;
- },
+ addxtype : function(o)
+ {
+ // create the lement.
+ o.form = this.form;
+ var fe = Roo.factory(o, Roo.form);
+ this.form.allItems.push(fe);
+ this.stack.push(fe);
+
+ if (fe.isFormField) {
+ this.form.items.add(fe);
+ }
+
+ return fe;
+ }
+});
+
+
+/**
+ * @class Roo.form.Column
+ * @extends Roo.form.Layout
+ * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Column = function(config){
+ Roo.form.Column.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Column, Roo.form.Layout, {
/**
- *
- * @return {Boolean} this.isConfirmed
+ * @cfg {Number/String} width
+ * The fixed width of the column in pixels or CSS value (defaults to "auto")
*/
- getConfirmed : function(){
- return this.isConfirmed;
- },
/**
- *
- * @return {Number} this.width
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
+ */
+
+ // private
+ defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
+
+ // private
+ onRender : function(ct, position){
+ Roo.form.Column.superclass.onRender.call(this, ct, position);
+ if(this.width){
+ this.el.setWidth(this.width);
+ }
+ }
+});
+
+/**
+ * @class Roo.form.Row
+ * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+
+
+Roo.form.Row = function(config){
+ Roo.form.Row.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Row, Roo.form.Layout, {
+ /**
+ * @cfg {Number/String} width
+ * The fixed width of the column in pixels or CSS value (defaults to "auto")
*/
- getWidth : function(){
- return this.width;
- },
/**
- *
- * @return {Number} this.height
+ * @cfg {Number/String} height
+ * The fixed height of the column in pixels or CSS value (defaults to "auto")
*/
- getHeight : function(){
- return this.height;
- },
- // private
- getSignature : function(){
- return this.signatureTmp;
- },
+ defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+
+ padWidth : 20,
// private
- reset : function(){
- this.signatureTmp = '';
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
- this.isConfirmed = false;
- Roo.form.Signature.superclass.reset.call(this);
- },
- setSignature : function(s){
- this.signatureTmp = s;
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
- this.setValue(s);
- this.isConfirmed = false;
- Roo.form.Signature.superclass.reset.call(this);
- },
- test : function(){
-// Roo.log(this.signPanel.dom.contentWindow.up())
- },
- //private
- setConfirmed : function(){
+ onRender : function(ct, position){
+ //console.log('row render');
+ if(!this.rowTpl){
+ var t = new Roo.Template(
+ '<div class="x-form-item {5}" style="float:left;width:{6}px">',
+ '<label for="{0}" style="{2}">{1}{4}</label>',
+ '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+ '</div>',
+ '</div>'
+ );
+ t.disableFormats = true;
+ t.compile();
+ Roo.form.Layout.prototype.rowTpl = t;
+ }
+ this.fieldTpl = this.rowTpl;
+ //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
+ var labelWidth = 100;
+ if ((this.labelAlign != 'top')) {
+ if (typeof this.labelWidth == 'number') {
+ labelWidth = this.labelWidth
+ }
+ this.padWidth = 20 + labelWidth;
+
+ }
-// Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+ Roo.form.Column.superclass.onRender.call(this, ct, position);
+ if(this.width){
+ this.el.setWidth(this.width);
+ }
+ if(this.height){
+ this.el.setHeight(this.height);
+ }
},
+
// private
- confirmHandler : function(){
- if(!this.getSignature()){
- return;
+ renderField : function(f){
+ f.fieldEl = this.fieldTpl.append(this.el, [
+ f.id, f.fieldLabel,
+ f.labelStyle||this.labelStyle||'',
+ this.elementStyle||'',
+ typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
+ f.itemCls||this.itemCls||'',
+ f.width ? f.width + this.padWidth : 160 + this.padWidth
+ ],true);
+ }
+});
+
+
+/**
+ * @class Roo.form.FieldSet
+ * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.FieldSet = function(config){
+ Roo.form.FieldSet.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
+ /**
+ * @cfg {String} legend
+ * The text to display as the legend for the FieldSet (defaults to '')
+ */
+ /**
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
+ */
+
+ // private
+ defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
+
+ // private
+ onRender : function(ct, position){
+ Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
+ if(this.legend){
+ this.setLegend(this.legend);
}
-
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
- this.setValue(this.getSignature());
- this.isConfirmed = true;
-
- this.fireEvent('confirm', this);
},
+
// private
- // Subclasses should provide the validation implementation by overriding this
- validateValue : function(value){
- if(this.allowBlank){
- return true;
- }
-
- if(this.isConfirmed){
- return true;
+ setLegend : function(text){
+ if(this.rendered){
+ this.el.child('legend').update(text);
}
- return false;
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+/**
+ * @class Roo.form.VTypes
+ * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
+ * @static
+ */
+Roo.form.VTypes = function(){
+ // closure these in so they are only created once.
+ var alpha = /^[a-zA-Z_]+$/;
+ var alphanum = /^[a-zA-Z0-9_]+$/;
+ var email = /^([\w'-]+)(\.[\w'-]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
+ var url = /^(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+ var urlWeb = /^((https?):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+
+ // All these messages and functions are configurable
+ return {
+ /**
+ * The function used to validate email addresses
+ * @param {String} value The email address
+ */
+ email : function(v){
+ return email.test(v);
+ },
+ /**
+ * The error text to display when the email validation function returns false
+ * @type String
+ */
+ emailText : 'This field should be an e-mail address in the format "user@domain.com"',
+ /**
+ * The keystroke filter mask to be applied on email input
+ * @type RegExp
+ */
+ emailMask : /[a-z0-9_\.\-@]/i,
+
+ /**
+ * The function used to validate URLs
+ * @param {String} value The URL
+ */
+ url : function(v){
+ return url.test(v);
+ },
+ /**
+ * The funciton used to validate URLs (only allow schemes 'https' and 'http')
+ * @param {String} v The URL
+ */
+ urlWeb : function(v) {
+ return urlWeb.test(v);
+ },
+ /**
+ * The error text to display when the url validation function returns false
+ * @type String
+ */
+ urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
+
+ /**
+ * The function used to validate alpha values
+ * @param {String} value The value
+ */
+ alpha : function(v){
+ return alpha.test(v);
+ },
+ /**
+ * The error text to display when the alpha validation function returns false
+ * @type String
+ */
+ alphaText : 'This field should only contain letters and _',
+ /**
+ * The keystroke filter mask to be applied on alpha input
+ * @type RegExp
+ */
+ alphaMask : /[a-z_]/i,
+
+ /**
+ * The function used to validate alphanumeric values
+ * @param {String} value The value
+ */
+ alphanum : function(v){
+ return alphanum.test(v);
+ },
+ /**
+ * The error text to display when the alphanumeric validation function returns false
+ * @type String
+ */
+ alphanumText : 'This field should only contain letters, numbers and _',
+ /**
+ * The keystroke filter mask to be applied on alphanumeric input
+ * @type RegExp
+ */
+ alphanumMask : /[a-z0-9_]/i
+ };
+}();//<script type="text/javascript">
/**
- * @class Roo.form.ComboBox
- * @extends Roo.form.TriggerField
- * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @class Roo.form.FCKeditor
+ * @extends Roo.form.TextArea
+ * Wrapper around the FCKEditor http://www.fckeditor.net
* @constructor
- * Create a new ComboBox.
+ * Creates a new FCKeditor
* @param {Object} config Configuration options
*/
-Roo.form.Select = function(config){
- Roo.form.Select.superclass.constructor.call(this, config);
-
+Roo.form.FCKeditor = function(config){
+ Roo.form.FCKeditor.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event editorinit
+ * Fired when the editor is initialized - you can add extra handlers here..
+ * @param {FCKeditor} this
+ * @param {Object} the FCK object.
+ */
+ editorinit : true
+ });
+
+
};
-
-Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
- /**
- * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
- */
- /**
- * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
- * rendering into an Roo.Editor, defaults to false)
- */
- /**
- * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
- * {tag: "input", type: "text", size: "24", autocomplete: "off"})
- */
- /**
- * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
- */
- /**
- * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
- * the dropdown list (defaults to undefined, with no header element)
- */
-
- /**
- * @cfg {String/Roo.Template} tpl The template to use to render the output
- */
-
+Roo.form.FCKeditor.editors = { };
+Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
+{
+ //defaultAutoCreate : {
+ // tag : "textarea",style : "width:100px;height:60px;" ,autocomplete : "off"
+ //},
// private
- defaultAutoCreate : {tag: "select" },
/**
- * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+ * @cfg {Object} fck options - see fck manual for details.
*/
- listWidth: undefined,
+ fckconfig : false,
+
/**
- * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'text' if mode = 'local')
+ * @cfg {Object} fck toolbar set (Basic or Default)
*/
- displayField: undefined,
+ toolbarSet : 'Basic',
/**
- * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'value' if mode = 'local').
- * Note: use of a valueField requires the user make a selection
- * in order for a value to be mapped.
- */
- valueField: undefined,
+ * @cfg {Object} fck BasePath
+ */
+ basePath : '/fckeditor/',
- /**
- * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
- * field's data value (defaults to the underlying DOM element's name)
- */
- hiddenName: undefined,
- /**
- * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
- */
- listClass: '',
- /**
- * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
- */
- selectedClass: 'x-combo-selected',
- /**
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
- * which displays a downward arrow icon).
- */
- triggerClass : 'x-form-arrow-trigger',
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- */
- shadow:'sides',
- /**
- * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
- * anchor positions (defaults to 'tl-bl')
- */
- listAlign: 'tl-bl?',
- /**
- * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
- */
- maxHeight: 300,
- /**
- * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
- * query specified by the allQuery config option (defaults to 'query')
- */
- triggerAction: 'query',
- /**
- * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
- * (defaults to 4, does not apply if editable = false)
- */
- minChars : 4,
- /**
- * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
- * delay (typeAheadDelay) if it matches a known value (defaults to false)
- */
- typeAhead: false,
- /**
- * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
- * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
- */
- queryDelay: 500,
- /**
- * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
- * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
- */
- pageSize: 0,
- /**
- * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
- * when editable = true (defaults to false)
- */
- selectOnFocus:false,
- /**
- * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
- */
- queryParam: 'query',
- /**
- * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
- * when mode = 'remote' (defaults to 'Loading...')
- */
- loadingText: 'Loading...',
- /**
- * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
- */
- resizable: false,
- /**
- * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
- */
- handleHeight : 8,
- /**
- * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
- * traditional select (defaults to true)
- */
- editable: true,
- /**
- * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
- */
- allQuery: '',
- /**
- * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
- */
- mode: 'remote',
- /**
- * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
- * listWidth has a higher value)
- */
- minListWidth : 70,
- /**
- * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
- * allow the user to set arbitrary text into the field (defaults to false)
- */
- forceSelection:false,
- /**
- * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
- * if typeAhead = true (defaults to 250)
- */
- typeAheadDelay : 250,
- /**
- * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
- * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
- */
- valueNotFoundText : undefined,
+ frame : false,
- /**
- * @cfg {String} defaultValue The value displayed after loading the store.
- */
- defaultValue: '',
+ value : '',
- /**
- * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
- */
- blockFocus : false,
+
+ onRender : function(ct, position)
+ {
+ if(!this.el){
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:"width:300px;height:60px;",
+ autocomplete: "new-password"
+ };
+ }
+ Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
+ /*
+ if(this.grow){
+ this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
+ if(this.preventScrollbars){
+ this.el.setStyle("overflow", "hidden");
+ }
+ this.el.setHeight(this.growMin);
+ }
+ */
+ //console.log('onrender' + this.getId() );
+ Roo.form.FCKeditor.editors[this.getId()] = this;
+
+
+ this.replaceTextarea() ;
+
+ },
+ getEditor : function() {
+ return this.fckEditor;
+ },
/**
- * @cfg {Boolean} disableClear Disable showing of clear button.
- */
- disableClear : false,
- /**
- * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
+ * @param {Mixed} value The value to set
*/
- alwaysQuery : false,
- //private
- addicon : false,
- editicon: false,
- // element that contains real text value.. (when hidden is used..)
-
- // private
- onRender : function(ct, position){
- Roo.form.Field.prototype.onRender.call(this, ct, position);
+ setValue : function(value)
+ {
+ //console.log('setValue: ' + value);
- if(this.store){
- this.store.on('beforeload', this.onBeforeLoad, this);
- this.store.on('load', this.onLoad, this);
- this.store.on('loadexception', this.onLoadException, this);
- this.store.load({});
+ if(typeof(value) == 'undefined') { // not sure why this is happending...
+ return;
}
+ Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+
+ //if(!this.el || !this.getEditor()) {
+ // this.value = value;
+ //this.setValue.defer(100,this,[value]);
+ // return;
+ //}
+ if(!this.getEditor()) {
+ return;
+ }
+ this.getEditor().SetData(value);
- },
+ //
- // private
- initEvents : function(){
- //Roo.form.ComboBox.superclass.initEvents.call(this);
-
},
- onDestroy : function(){
-
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
+ /**
+ * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
+ * @return {Mixed} value The field value
+ */
+ getValue : function()
+ {
+
+ if (this.frame && this.frame.dom.style.display == 'none') {
+ return Roo.form.FCKeditor.superclass.getValue.call(this);
}
- //Roo.form.ComboBox.superclass.onDestroy.call(this);
- },
-
- // private
- fireKey : function(e){
- if(e.isNavKeyPress() && !this.list.isVisible()){
- this.fireEvent("specialkey", this, e);
+
+ if(!this.el || !this.getEditor()) {
+
+ // this.getValue.defer(100,this);
+ return this.value;
}
- },
-
- // private
- onResize: function(w, h){
+
- return;
-
+ var value=this.getEditor().GetData();
+ Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+ return Roo.form.FCKeditor.superclass.getValue.call(this);
+
},
/**
- * Allow or prevent the user from directly editing the field text. If false is passed,
- * the user will only be able to select from the items defined in the dropdown list. This method
- * is the runtime equivalent of setting the 'editable' config option at config time.
- * @param {Boolean} value True to allow the user to directly edit the field text
+ * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
+ * @return {Mixed} value The field value
*/
- setEditable : function(value){
+ getRawValue : function()
+ {
+ if (this.frame && this.frame.dom.style.display == 'none') {
+ return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+ }
+
+ if(!this.el || !this.getEditor()) {
+ //this.getRawValue.defer(100,this);
+ return this.value;
+ return;
+ }
+
+
+
+ var value=this.getEditor().GetData();
+ Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
+ return Roo.form.FCKeditor.superclass.getRawValue.call(this);
},
-
- // private
- onBeforeLoad : function(){
-
- Roo.log("Select before load");
- return;
- this.innerList.update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- //this.restrictHeight();
- this.selectedIndex = -1;
+ setSize : function(w,h) {
+
+
+
+ //if (this.frame && this.frame.dom.style.display == 'none') {
+ // Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+ // return;
+ //}
+ //if(!this.el || !this.getEditor()) {
+ // this.setSize.defer(100,this, [w,h]);
+ // return;
+ //}
+
+
+
+ Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+
+ this.frame.dom.setAttribute('width', w);
+ this.frame.dom.setAttribute('height', h);
+ this.frame.setSize(w,h);
+
},
-
- // private
- onLoad : function(){
-
- var dom = this.el.dom;
- dom.innerHTML = '';
- var od = dom.ownerDocument;
+ toggleSourceEdit : function(value) {
+
+
- if (this.emptyText) {
- var op = od.createElement('option');
- op.setAttribute('value', '');
- op.innerHTML = String.format('{0}', this.emptyText);
- dom.appendChild(op);
+ this.el.dom.style.display = value ? '' : 'none';
+ this.frame.dom.style.display = value ? 'none' : '';
+
+ },
+
+
+ focus: function(tag)
+ {
+ if (this.frame.dom.style.display == 'none') {
+ return Roo.form.FCKeditor.superclass.focus.call(this);
}
- if(this.store.getCount() > 0){
-
- var vf = this.valueField;
- var df = this.displayField;
- this.store.data.each(function(r) {
- // which colmsn to use... testing - cdoe / title..
- var op = od.createElement('option');
- op.setAttribute('value', r.data[vf]);
- op.innerHTML = String.format('{0}', r.data[df]);
- dom.appendChild(op);
- });
- if (typeof(this.defaultValue != 'undefined')) {
- this.setValue(this.defaultValue);
+ if(!this.el || !this.getEditor()) {
+ this.focus.defer(100,this, [tag]);
+ return;
+ }
+
+
+
+
+ var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
+ this.getEditor().Focus();
+ if (tgs.length) {
+ if (!this.getEditor().Selection.GetSelection()) {
+ this.focus.defer(100,this, [tag]);
+ return;
}
-
- }else{
- //this.onEmptyResults();
+
+ var r = this.getEditor().EditorDocument.createRange();
+ r.setStart(tgs[0],0);
+ r.setEnd(tgs[0],0);
+ this.getEditor().Selection.GetSelection().removeAllRanges();
+ this.getEditor().Selection.GetSelection().addRange(r);
+ this.getEditor().Focus();
}
- //this.el.focus();
+
},
- // private
- onLoadException : function()
- {
- dom.innerHTML = '';
-
- Roo.log("Select on load exception");
- return;
- this.collapse();
- Roo.log(this.store.reader.jsonData);
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+
+
+ replaceTextarea : function()
+ {
+ if ( document.getElementById( this.getId() + '___Frame' ) ) {
+ return ;
}
+ //if ( !this.checkBrowser || this._isCompatibleBrowser() )
+ //{
+ // We must check the elements firstly using the Id and then the name.
+ var oTextarea = document.getElementById( this.getId() );
-
- },
- // private
- onTypeAhead : function(){
+ var colElementsByName = document.getElementsByName( this.getId() ) ;
+ oTextarea.style.display = 'none' ;
+
+ if ( oTextarea.tabIndex ) {
+ this.TabIndex = oTextarea.tabIndex ;
+ }
+
+ this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
+ this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
+ this.frame = Roo.get(this.getId() + '___Frame')
},
+
+ _getConfigHtml : function()
+ {
+ var sConfig = '' ;
- // private
- onSelect : function(record, index){
- Roo.log('on select?');
- return;
- if(this.fireEvent('beforeselect', this, record, index) !== false){
- this.setFromData(index > -1 ? record.data : false);
- this.collapse();
- this.fireEvent('select', this, record, index);
+ for ( var o in this.fckconfig ) {
+ sConfig += sConfig.length > 0 ? '&' : '';
+ sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
}
+
+ return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
},
+
+
+ _getIFrameHtml : function()
+ {
+ var sFile = 'fckeditor.html' ;
+ /* no idea what this is about..
+ try
+ {
+ if ( (/fcksource=true/i).test( window.top.location.search ) )
+ sFile = 'fckeditor.original.html' ;
+ }
+ catch (e) {
+ */
- /**
- * Returns the currently selected field value or empty string if no value is set.
- * @return {String} value The selected value
- */
- getValue : function(){
- var dom = this.el.dom;
- this.value = dom.options[dom.selectedIndex].value;
- return this.value;
+ var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
+ sLink += this.toolbarSet ? ( '&Toolbar=' + this.toolbarSet) : '';
+
+ var html = '<iframe id="' + this.getId() +
+ '___Frame" src="' + sLink +
+ '" width="' + this.width +
+ '" height="' + this.height + '"' +
+ (this.tabIndex ? ' tabindex="' + this.tabIndex + '"' :'' ) +
+ ' frameborder="0" scrolling="no"></iframe>' ;
+
+ return html ;
},
+
+ _insertHtmlBefore : function( html, element )
+ {
+ if ( element.insertAdjacentHTML ) {
+ // IE
+ element.insertAdjacentHTML( 'beforeBegin', html ) ;
+ } else { // Gecko
+ var oRange = document.createRange() ;
+ oRange.setStartBefore( element ) ;
+ var oFragment = oRange.createContextualFragment( html );
+ element.parentNode.insertBefore( oFragment, element ) ;
+ }
+ }
+
+
+
+
+
+
+
+
+});
+
+//Roo.reg('fckeditor', Roo.form.FCKeditor);
+
+function FCKeditor_OnComplete(editorInstance){
+ var f = Roo.form.FCKeditor.editors[editorInstance.Name];
+ f.fckEditor = editorInstance;
+ //console.log("loaded");
+ f.fireEvent('editorinit', f, editorInstance);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//<script type="text/javascript">
+/**
+ * @class Roo.form.GridField
+ * @extends Roo.form.Field
+ * Embed a grid (or editable grid into a form)
+ * STATUS ALPHA
+ *
+ * This embeds a grid in a form, the value of the field should be the json encoded array of rows
+ * it needs
+ * xgrid.store = Roo.data.Store
+ * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
+ * xgrid.store.reader = Roo.data.JsonReader
+ *
+ *
+ * @constructor
+ * Creates a new GridField
+ * @param {Object} config Configuration options
+ */
+Roo.form.GridField = function(config){
+ Roo.form.GridField.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.form.GridField, Roo.form.Field, {
/**
- * Clears any text/value currently set in the field
+ * @cfg {Number} width - used to restrict width of grid..
*/
- clearValue : function(){
- this.value = '';
- this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
-
- },
-
+ width : 100,
/**
- * Sets the specified value into the field. If the value finds a match, the corresponding record text
- * will be displayed in the field. If the value does not match the data value of an existing item,
- * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
- * Otherwise the field will be blank (although the value will still be set).
- * @param {String} value The value to match
+ * @cfg {Number} height - used to restrict height of grid..
*/
- setValue : function(v){
- var d = this.el.dom;
- for (var i =0; i < d.options.length;i++) {
- if (v == d.options[i].value) {
- d.selectedIndex = i;
- this.value = v;
- return;
- }
- }
- this.clearValue();
- },
+ height : 50,
+ /**
+ * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
+ *
+ *}
+ */
+ xgrid : false,
/**
- * @property {Object} the last set data for the element
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "checkbox", autocomplete: "off"})
*/
-
- lastData : false,
+ // defaultAutoCreate : { tag: 'div' },
+ defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
/**
- * Sets the value of the field based on a object which is related to the record format for the store.
- * @param {Object} value the value to set as. or false on reset?
+ * @cfg {String} addTitle Text to include for adding a title.
*/
- setFromData : function(o){
- Roo.log('setfrom data?');
-
-
-
+ addTitle : false,
+ //
+ onResize : function(){
+ Roo.form.Field.superclass.onResize.apply(this, arguments);
},
- // private
- reset : function(){
- this.clearValue();
+
+ initEvents : function(){
+ // Roo.form.Checkbox.superclass.initEvents.call(this);
+ // has no events...
+
+ },
+
+
+ getResizeEl : function(){
+ return this.wrap;
+ },
+
+ getPositionEl : function(){
+ return this.wrap;
},
+
// private
- findRecord : function(prop, value){
+ onRender : function(ct, position){
- return false;
+ this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
+ var style = this.style;
+ delete this.style;
+
+ Roo.form.GridField.superclass.onRender.call(this, ct, position);
+ this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
+ this.viewEl = this.wrap.createChild({ tag: 'div' });
+ if (style) {
+ this.viewEl.applyStyles(style);
+ }
+ if (this.width) {
+ this.viewEl.setWidth(this.width);
+ }
+ if (this.height) {
+ this.viewEl.setHeight(this.height);
+ }
+ //if(this.inputValue !== undefined){
+ //this.setValue(this.value);
+
+
+ this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
+
+
+ this.grid.render();
+ this.grid.getDataSource().on('remove', this.refreshValue, this);
+ this.grid.getDataSource().on('update', this.refreshValue, this);
+ this.grid.on('afteredit', this.refreshValue, this);
+
+ },
+
- var record;
- if(this.store.getCount() > 0){
- this.store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- return false;
- }
- return true;
- });
+ /**
+ * Sets the value of the item.
+ * @param {String} either an object or a string..
+ */
+ setValue : function(v){
+ //this.value = v;
+ v = v || []; // empty set..
+ // this does not seem smart - it really only affects memoryproxy grids..
+ if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
+ var ds = this.grid.getDataSource();
+ // assumes a json reader..
+ var data = {}
+ data[ds.reader.meta.root ] = typeof(v) == 'string' ? Roo.decode(v) : v;
+ ds.loadData( data);
+ }
+ // clear selection so it does not get stale.
+ if (this.grid.sm) {
+ this.grid.sm.clearSelections();
}
- return record;
- },
-
- getName: function()
- {
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+ Roo.form.GridField.superclass.setValue.call(this, v);
+ this.refreshValue();
+ // should load data in the grid really....
},
-
-
-
// private
- onEmptyResults : function(){
- Roo.log('empty results');
- //this.collapse();
- },
+ refreshValue: function() {
+ var val = [];
+ this.grid.getDataSource().each(function(r) {
+ val.push(r.data);
+ });
+ this.el.dom.value = Roo.encode(val);
+ }
+
+
+
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.DisplayField
+ * @extends Roo.form.Field
+ * A generic Field to display non-editable data.
+ * @cfg {Boolean} closable (true|false) default false
+ * @constructor
+ * Creates a new Display Field item.
+ * @param {Object} config Configuration options
+ */
+Roo.form.DisplayField = function(config){
+ Roo.form.DisplayField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event close
+ * Fires after the click the close btn
+ * @param {Roo.form.DisplayField} this
+ */
+ close : true
+ });
+};
+Roo.extend(Roo.form.DisplayField, Roo.form.TextField, {
+ inputType: 'hidden',
+ allowBlank: true,
+ readOnly: true,
+
+
/**
- * Returns true if the dropdown list is expanded, else false.
+ * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
*/
- isExpanded : function(){
- return false;
- },
-
+ focusClass : undefined,
/**
- * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {String} value The data value of the item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- * @return {Boolean} True if the value matched an item in the list, else false
+ * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
*/
- selectByValue : function(v, scrollIntoView){
- Roo.log('select By Value');
- return false;
+ fieldClass: 'x-form-field',
- if(v !== undefined && v !== null){
- var r = this.findRecord(this.valueField || this.displayField, v);
- if(r){
- this.select(this.store.indexOf(r), scrollIntoView);
- return true;
- }
- }
- return false;
- },
-
+ /**
+ * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
+ */
+ valueRenderer: undefined,
+
+ width: 100,
/**
- * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {Number} index The zero-based index of the list item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "checkbox", autocomplete: "off"})
*/
- select : function(index, scrollIntoView){
- Roo.log('select ');
- return ;
+
+ // defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+
+ closable : false,
+
+ onResize : function(){
+ Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
- this.selectedIndex = index;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.innerList.scrollChildIntoView(el, false);
- }
- }
},
-
-
- // private
- validateBlur : function(){
-
- return;
+ initEvents : function(){
+ // Roo.form.Checkbox.superclass.initEvents.call(this);
+ // has no events...
+ if(this.closable){
+ this.closeEl.on('click', this.onClose, this);
+ }
+
},
- // private
- initQuery : function(){
- this.doQuery(this.getRawValue());
+
+ getResizeEl : function(){
+ return this.wrap;
},
- // private
- doForce : function(){
- if(this.el.dom.value.length > 0){
- this.el.dom.value =
- this.lastSelectionText === undefined ? '' : this.lastSelectionText;
-
- }
+ getPositionEl : function(){
+ return this.wrap;
},
- /**
- * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
- * query allowing the query action to be canceled if needed.
- * @param {String} query The SQL query to execute
- * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
- * in the field than the minimum specified by the minChars config option. It also clears any filter previously
- * saved in the current store (defaults to false)
- */
- doQuery : function(q, forceAll){
+ // private
+ onRender : function(ct, position){
- Roo.log('doQuery?');
- if(q === undefined || q === null){
- q = '';
- }
- var qe = {
- query: q,
- forceAll: forceAll,
- combo: this,
- cancel:false
- };
- if(this.fireEvent('beforequery', qe)===false || qe.cancel){
- return false;
+ Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
+ //if(this.inputValue !== undefined){
+ this.wrap = this.el.wrap();
+
+ this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
+
+ if(this.closable){
+ this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
}
- q = qe.query;
- forceAll = qe.forceAll;
- if(forceAll === true || (q.length >= this.minChars)){
- if(this.lastQuery != q || this.alwaysQuery){
- this.lastQuery = q;
- if(this.mode == 'local'){
- this.selectedIndex = -1;
- if(forceAll){
- this.store.clearFilter();
- }else{
- this.store.filter(this.displayField, q);
- }
- this.onLoad();
- }else{
- this.store.baseParams[this.queryParam] = q;
- this.store.load({
- params: this.getParams(q)
- });
- this.expand();
- }
- }else{
- this.selectedIndex = -1;
- this.onLoad();
- }
+
+ if (this.bodyStyle) {
+ this.viewEl.applyStyles(this.bodyStyle);
}
+ //this.viewEl.setStyle('padding', '2px');
+
+ this.setValue(this.value);
+
},
-
+/*
// private
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
- }
- return p;
- },
+ initValue : Roo.emptyFn,
- /**
- * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
- */
- collapse : function(){
-
- },
+ */
- // private
- collapseIf : function(e){
+ // private
+ onClick : function(){
},
/**
- * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+ * Sets the checked state of the checkbox.
+ * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
*/
- expand : function(){
-
- } ,
-
- // private
-
+ setValue : function(v){
+ this.value = v;
+ var html = this.valueRenderer ? this.valueRenderer(v) : String.format('{0}', v);
+ // this might be called before we have a dom element..
+ if (!this.viewEl) {
+ return;
+ }
+ this.viewEl.dom.innerHTML = html;
+ Roo.form.DisplayField.superclass.setValue.call(this, v);
- /**
- * @cfg {Boolean} grow
- * @hide
- */
- /**
- * @cfg {Number} growMin
- * @hide
- */
- /**
- * @cfg {Number} growMax
- * @hide
- */
- /**
- * @hide
- * @method autoSize
- */
+ },
- setWidth : function()
+ onClose : function(e)
{
+ e.preventDefault();
- },
- getResizeEl : function(){
- return this.el;
+ this.fireEvent('close', this);
}
-});//<script type="text/javasscript">
-
-
-/**
- * @class Roo.DDView
- * A DnD enabled version of Roo.View.
- * @param {Element/String} container The Element in which to create the View.
- * @param {String} tpl The template string used to create the markup for each element of the View
- * @param {Object} config The configuration properties. These include all the config options of
- * {@link Roo.View} plus some specific to this class.<br>
- * <p>
- * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
- * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
- * <p>
- * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
-.x-view-drag-insert-above {
- border-top:1px dotted #3366cc;
-}
-.x-view-drag-insert-below {
- border-bottom:1px dotted #3366cc;
-}
-</code></pre>
+});/*
+ *
+ * Licence- LGPL
*
*/
-
-Roo.DDView = function(container, tpl, config) {
- Roo.DDView.superclass.constructor.apply(this, arguments);
- this.getEl().setStyle("outline", "0px none");
- this.getEl().unselectable();
- if (this.dragGroup) {
- this.setDraggable(this.dragGroup.split(","));
- }
- if (this.dropGroup) {
- this.setDroppable(this.dropGroup.split(","));
- }
- if (this.deletable) {
- this.setDeletable();
- }
- this.isDirtyFlag = false;
- this.addEvents({
- "drop" : true
- });
-};
-
-Roo.extend(Roo.DDView, Roo.View, {
-/** @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
-/** @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
-/** @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
-/** @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
-
- isFormField: true,
-
- reset: Roo.emptyFn,
-
- clearInvalid: Roo.form.Field.prototype.clearInvalid,
-
- validate: function() {
- return true;
- },
-
- destroy: function() {
- this.purgeListeners();
- this.getEl.removeAllListeners();
- this.getEl().remove();
- if (this.dragZone) {
- if (this.dragZone.destroy) {
- this.dragZone.destroy();
- }
- }
- if (this.dropZone) {
- if (this.dropZone.destroy) {
- this.dropZone.destroy();
- }
- }
- },
-
-/** Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
- getName: function() {
- return this.name;
- },
-
-/** Loads the View from a JSON string representing the Records to put into the Store. */
- setValue: function(v) {
- if (!this.store) {
- throw "DDView.setValue(). DDView must be constructed with a valid Store";
- }
- var data = {};
- data[this.store.reader.meta.root] = v ? [].concat(v) : [];
- this.store.proxy = new Roo.data.MemoryProxy(data);
- this.store.load();
- },
-
-/** @return {String} a parenthesised list of the ids of the Records in the View. */
- getValue: function() {
- var result = '(';
- this.store.each(function(rec) {
- result += rec.id + ',';
- });
- return result.substr(0, result.length - 1) + ')';
- },
-
- getIds: function() {
- var i = 0, result = new Array(this.store.getCount());
- this.store.each(function(rec) {
- result[i++] = rec.id;
- });
- return result;
- },
-
- isDirty: function() {
- return this.isDirtyFlag;
- },
/**
- * Part of the Roo.dd.DropZone interface. If no target node is found, the
- * whole Element becomes the target, and this causes the drop gesture to append.
+ * @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
*/
- getTargetFromEvent : function(e) {
- var target = e.getTarget();
- while ((target !== null) && (target.parentNode != this.el.dom)) {
- target = target.parentNode;
- }
- if (!target) {
- target = this.el.dom.lastChild || this.el.dom;
- }
- return target;
- },
+Roo.form.DayPicker= function(config){
+ Roo.form.DayPicker.superclass.constructor.call(this, config);
+
+};
-/**
- * Create the drag data which consists of an object which has the property "ddel" as
- * the drag proxy element.
- */
- getDragData : function(e) {
- var target = this.findItemFromChild(e.getTarget());
- if(target) {
- this.handleSelection(e);
- var selNodes = this.getSelectedNodes();
- var dragData = {
- source: this,
- copy: this.copy || (this.allowCopy && e.ctrlKey),
- nodes: selNodes,
- records: []
- };
- var selectedIndices = this.getSelectedIndexes();
- for (var i = 0; i < selectedIndices.length; i++) {
- dragData.records.push(this.store.getAt(selectedIndices[i]));
- }
- if (selNodes.length == 1) {
- dragData.ddel = target.cloneNode(true); // the div element
- } else {
- var div = document.createElement('div'); // create the multi element drag "ghost"
- div.className = 'multi-proxy';
- for (var i = 0, len = selNodes.length; i < len; i++) {
- div.appendChild(selNodes[i].cloneNode(true));
- }
- dragData.ddel = div;
- }
- //console.log(dragData)
- //console.log(dragData.ddel.innerHTML)
- return dragData;
- }
- //console.log('nodragData')
- return false;
- },
+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: "new-password"},
-/** Specify to which ddGroup items in this DDView may be dragged. */
- setDraggable: function(ddGroup) {
- if (ddGroup instanceof Array) {
- Roo.each(ddGroup, this.setDraggable, this);
- return;
- }
- if (this.dragZone) {
- this.dragZone.addToGroup(ddGroup);
- } else {
- this.dragZone = new Roo.dd.DragZone(this.getEl(), {
- containerScroll: true,
- ddGroup: ddGroup
-
- });
-// Draggability implies selection. DragZone's mousedown selects the element.
- if (!this.multiSelect) { this.singleSelect = true; }
-
-// Wire the DragZone's handlers up to methods in *this*
- this.dragZone.getDragData = this.getDragData.createDelegate(this);
- }
- },
-
-/** Specify from which ddGroup this DDView accepts drops. */
- setDroppable: function(ddGroup) {
- if (ddGroup instanceof Array) {
- Roo.each(ddGroup, this.setDroppable, this);
- return;
- }
- if (this.dropZone) {
- this.dropZone.addToGroup(ddGroup);
- } else {
- this.dropZone = new Roo.dd.DropZone(this.getEl(), {
- containerScroll: true,
- ddGroup: ddGroup
- });
+
+ actionMode : 'viewEl',
+ //
+ // private
+
+ inputType : 'hidden',
+
+
+ inputElement: false, // real input element?
+ basedOn: false, // ????
+
+ isFormField: true, // not sure where this is needed!!!!
-// Wire the DropZone's handlers up to methods in *this*
- this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
- this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
- this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
- this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
- this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
- }
+ onResize : function(){
+ Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+ if(!this.boxLabel){
+ this.el.alignTo(this.wrap, 'c-c');
+ }
},
-/** Decide whether to drop above or below a View node. */
- getDropPoint : function(e, n, dd){
- if (n == this.el.dom) { return "above"; }
- var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
- var c = t + (b - t) / 2;
- var y = Roo.lib.Event.getPageY(e);
- if(y <= c) {
- return "above";
- }else{
- return "below";
- }
+ initEvents : function(){
+ Roo.form.Checkbox.superclass.initEvents.call(this);
+ this.el.on("click", this.onClick, this);
+ this.el.on("change", this.onClick, this);
},
- onNodeEnter : function(n, dd, e, data){
- return false;
- },
-
- onNodeOver : function(n, dd, e, data){
- var pt = this.getDropPoint(e, n, dd);
- // set the insert point style on the target node
- var dragElClass = this.dropNotAllowed;
- if (pt) {
- var targetElClass;
- if (pt == "above"){
- dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
- targetElClass = "x-view-drag-insert-above";
- } else {
- dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
- targetElClass = "x-view-drag-insert-below";
- }
- if (this.lastInsertClass != targetElClass){
- Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
- this.lastInsertClass = targetElClass;
- }
- }
- return dragElClass;
- },
- onNodeOut : function(n, dd, e, data){
- this.removeDropIndicators(n);
+ getResizeEl : function(){
+ return this.wrap;
},
- onNodeDrop : function(n, dd, e, data){
- if (this.fireEvent("drop", this, n, dd, e, data) === false) {
- return false;
- }
- var pt = this.getDropPoint(e, n, dd);
- var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
- if (pt == "below") { insertAt++; }
- for (var i = 0; i < data.records.length; i++) {
- var r = data.records[i];
- var dup = this.store.getById(r.id);
- if (dup && (dd != this.dragZone)) {
- Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
- } else {
- if (data.copy) {
- this.store.insert(insertAt++, r.copy());
- } else {
- data.source.isDirtyFlag = true;
- r.store.remove(r);
- this.store.insert(insertAt++, r);
- }
- this.isDirtyFlag = true;
- }
- }
- this.dragZone.cachedTarget = null;
- return true;
+ getPositionEl : function(){
+ return this.wrap;
},
- removeDropIndicators : function(n){
- if(n){
- Roo.fly(n).removeClass([
- "x-view-drag-insert-above",
- "x-view-drag-insert-below"]);
- this.lastInsertClass = "_noclass";
- }
+
+ // 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
+
+
+
+
},
-/**
- * Utility method. Add a delete option to the DDView's context menu.
- * @param {String} imageUrl The URL of the "delete" icon image.
- */
- setDeletable: function(imageUrl) {
- if (!this.singleSelect && !this.multiSelect) {
- this.singleSelect = true;
- }
- var c = this.getContextMenu();
- this.contextMenu.on("itemclick", function(item) {
- switch (item.id) {
- case "delete":
- this.remove(this.getSelectedIndexes());
- break;
- }
- }, this);
- this.contextMenu.add({
- icon: imageUrl,
- id: "delete",
- text: 'Delete'
- });
- },
-
-/** Return the context menu for this DDView. */
- getContextMenu: function() {
- if (!this.contextMenu) {
-// Create the View's context menu
- this.contextMenu = new Roo.menu.Menu({
- id: this.id + "-contextmenu"
- });
- this.el.on("contextmenu", this.showContextMenu, this);
- }
- return this.contextMenu;
- },
-
- disableContextMenu: function() {
- if (this.contextMenu) {
- this.el.un("contextmenu", this.showContextMenu, this);
- }
- },
+ // private
+ initValue : Roo.emptyFn,
- showContextMenu: function(e, item) {
- item = this.findItemFromChild(e.getTarget());
- if (item) {
- e.stopEvent();
- this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
- this.contextMenu.showAt(e.getXY());
- }
+ /**
+ * Returns the checked state of the checkbox.
+ * @return {Boolean} True if checked, else false
+ */
+ getValue : function(){
+ return this.el.dom.value;
+
},
-/**
- * Remove {@link Roo.data.Record}s at the specified indices.
- * @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
- */
- remove: function(selectedIndices) {
- selectedIndices = [].concat(selectedIndices);
- for (var i = 0; i < selectedIndices.length; i++) {
- var rec = this.store.getAt(selectedIndices[i]);
- this.store.remove(rec);
- }
+ // 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);
},
-/**
- * Double click fires the event, but also, if this is draggable, and there is only one other
- * related DropZone, it transfers the selected node.
- */
- onDblClick : function(e){
- var item = this.findItemFromChild(e.getTarget());
- if(item){
- if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
- return false;
+ /**
+ * 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');
}
- if (this.dragGroup) {
- var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
- while (targets.indexOf(this.dropZone) > -1) {
- targets.remove(this.dropZone);
- }
- if (targets.length == 1) {
- this.dragZone.cachedTarget = null;
- var el = Roo.get(targets[0].getEl());
- var box = el.getBox(true);
- targets[0].onNodeDrop(el.dom, {
- target: el.dom,
- xy: [box.x, box.y + box.height - 1]
- }, null, this.getDragData(e));
- }
- }
+
+ });
+
+
+ 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);
},
- handleSelection: function(e) {
- this.dragZone.cachedTarget = null;
- var item = this.findItemFromChild(e.getTarget());
- if (!item) {
- this.clearSelections(true);
- return;
+ onDestroy : function()
+ {
+ if(this.viewEl){
+ Roo.get(this.viewEl).remove();
}
- if (item && (this.multiSelect || this.singleSelect)){
- if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
- this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
- }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
- this.unselect(item);
- } else {
- this.select(item, this.multiSelect && e.ctrlKey);
- this.lastSelection = item;
- }
- }
- },
-
- onItemClick : function(item, index, e){
- if(this.fireEvent("beforeclick", this, index, item, e) === false){
- return false;
- }
- return true;
- },
-
- unselect : function(nodeInfo, suppressEvent){
- var node = this.getNode(nodeInfo);
- if(node && this.isSelected(node)){
- if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
- Roo.fly(node).removeClass(this.selectedClass);
- this.selections.remove(node);
- if(!suppressEvent){
- this.fireEvent("selectionchange", this, this.selections);
- }
- }
- }
+
+ Roo.form.DayPicker.superclass.onDestroy.call(this);
}
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
+
+});/*
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011 Alan Knowles
*
- * Fork - LGPL
- * <script type="text/javascript">
+ * License - LGPL
*/
+
/**
- * @class Roo.LayoutManager
- * @extends Roo.util.Observable
- * Base class for layout managers.
+ * @class Roo.form.ComboCheck
+ * @extends Roo.form.ComboBox
+ * A combobox for multiple select items.
+ *
+ * FIXME - could do with a reset button..
+ *
+ * @constructor
+ * Create a new ComboCheck
+ * @param {Object} config Configuration options
*/
-Roo.LayoutManager = function(container, config){
- Roo.LayoutManager.superclass.constructor.call(this);
- this.el = Roo.get(container);
- // ie scrollbar fix
- if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
- document.body.scroll = "no";
- }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
- this.el.position('relative');
- }
- this.id = this.el.id;
- this.el.addClass("x-layout-container");
- /** false to disable window resize monitoring @type Boolean */
- this.monitorWindowResize = true;
- this.regions = {};
- this.addEvents({
- /**
- * @event layout
- * Fires when a layout is performed.
- * @param {Roo.LayoutManager} this
- */
- "layout" : true,
- /**
- * @event regionresized
- * Fires when the user resizes a region.
- * @param {Roo.LayoutRegion} region The resized region
- * @param {Number} newSize The new size (width for east/west, height for north/south)
- */
- "regionresized" : true,
- /**
- * @event regioncollapsed
- * Fires when a region is collapsed.
- * @param {Roo.LayoutRegion} region The collapsed region
- */
- "regioncollapsed" : true,
- /**
- * @event regionexpanded
- * Fires when a region is expanded.
- * @param {Roo.LayoutRegion} region The expanded region
- */
- "regionexpanded" : true
+Roo.form.ComboCheck = function(config){
+ Roo.form.ComboCheck.superclass.constructor.call(this, config);
+ // should verify some data...
+ // like
+ // hiddenName = required..
+ // displayField = required
+ // valudField == required
+ var req= [ 'hiddenName', 'displayField', 'valueField' ];
+ var _t = this;
+ Roo.each(req, function(e) {
+ if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
+ throw "Roo.form.ComboCheck : missing value for: " + e;
+ }
});
- this.updating = false;
- Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+
+
};
-Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
- /**
- * Returns true if this layout is currently being updated
- * @return {Boolean}
- */
- isUpdating : function(){
- return this.updating;
- },
+Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
+
+
+ editable : false,
+
+ selectedClass: 'x-menu-item-checked',
- /**
- * Suspend the LayoutManager from doing auto-layouts while
- * making multiple add or remove calls
- */
- beginUpdate : function(){
- this.updating = true;
+ // private
+ onRender : function(ct, position){
+ var _t = this;
+
+
+
+ if(!this.tpl){
+ var cls = 'x-combo-list';
+
+
+ this.tpl = new Roo.Template({
+ html : '<div class="'+cls+'-item x-menu-check-item">' +
+ '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' +
+ '<span>{' + this.displayField + '}</span>' +
+ '</div>'
+
+ });
+ }
+
+
+ Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
+ this.view.singleSelect = false;
+ this.view.multiSelect = true;
+ this.view.toggleSelect = true;
+ this.pageTb.add(new Roo.Toolbar.Fill(),{
+
+ text: 'Select All',
+ handler: function() {
+ _t.selectAll();
+ }
+ },
+ {
+ text: 'Done',
+ handler: function() {
+ _t.collapse();
+ }
+ });
},
- /**
- * Restore auto-layouts and optionally disable the manager from performing a layout
- * @param {Boolean} noLayout true to disable a layout update
- */
- endUpdate : function(noLayout){
- this.updating = false;
- if(!noLayout){
- this.layout();
- }
+ cleanLeadingSpace : function(e)
+ {
+ // this is disabled, as it retriggers setvalue on blur
+ return;
},
-
- layout: function(){
+ doForce : function() {
+ // no idea what this did, but it blanks out our values.
+ return;
+ },
+ onViewOver : function(e, t){
+ // do nothing...
+ return;
},
- onRegionResized : function(region, newSize){
- this.fireEvent("regionresized", region, newSize);
- this.layout();
+ onViewClick : function(doFocus,index){
+ return;
+
+ },
+ select: function () {
+ //Roo.log("SELECT CALLED");
+ },
+
+ selectByValue : function(xv, scrollIntoView){
+ var ar = this.getValueArray();
+ var sels = [];
+
+ Roo.each(ar, function(v) {
+ if(v === undefined || v === null){
+ return;
+ }
+ var r = this.findRecord(this.valueField, v);
+ if(r){
+ sels.push(this.store.indexOf(r))
+
+ }
+ },this);
+ this.view.select(sels);
+ return false;
},
- onRegionCollapsed : function(region){
- this.fireEvent("regioncollapsed", region);
+ selectAll : function()
+ {
+ var sels = [];
+ this.store.each(function(r,i) {
+ sels.push(i);
+ });
+ this.view.select(sels);
+ this.collapse();
+ return false;
+
},
- onRegionExpanded : function(region){
- this.fireEvent("regionexpanded", region);
+ onSelect : function(record, index){
+ // Roo.log("onselect Called");
+ // this is only called by the clear button now..
+ this.view.clearSelections();
+ this.setValue('[]');
+ if (this.value != this.valueBefore) {
+ this.fireEvent('change', this, this.value, this.valueBefore);
+ this.valueBefore = this.value;
+ }
},
+ getValueArray : function()
+ {
+ var ar = [] ;
- /**
- * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
- * performs box-model adjustments.
- * @return {Object} The size as an object {width: (the width), height: (the height)}
- */
- getViewSize : function(){
- var size;
- if(this.el.dom != document.body){
- size = this.el.getSize();
- }else{
- size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
+ try {
+ //Roo.log(this.value);
+ if (typeof(this.value) == 'undefined') {
+ return [];
+ }
+ var ar = Roo.decode(this.value);
+ return ar instanceof Array ? ar : []; //?? valid?
+
+ } catch(e) {
+ Roo.log(e + "\nRoo.form.ComboCheck:getValueArray invalid data:" + this.getValue());
+ return [];
}
- size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
- size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
- return size;
+
},
-
- /**
- * Returns the Element this layout is bound to.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
+ expand : function ()
+ {
+
+ Roo.form.ComboCheck.superclass.expand.call(this);
+ this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
+ //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
+
+
},
- /**
- * Returns the specified region.
- * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
- * @return {Roo.LayoutRegion}
- */
- getRegion : function(target){
- return this.regions[target.toLowerCase()];
+ collapse : function(){
+ Roo.form.ComboCheck.superclass.collapse.call(this);
+ var sl = this.view.getSelectedIndexes();
+ var st = this.store;
+ var nv = [];
+ var tv = [];
+ var r;
+ Roo.each(sl, function(i) {
+ r = st.getAt(i);
+ nv.push(r.get(this.valueField));
+ },this);
+ this.setValue(Roo.encode(nv));
+ if (this.value != this.valueBefore) {
+
+ this.fireEvent('change', this, this.value, this.valueBefore);
+ this.valueBefore = this.value;
+ }
+
},
- onWindowResize : function(){
- if(this.monitorWindowResize){
- this.layout();
- }
+ setValue : function(v){
+ // Roo.log(v);
+ this.value = v;
+
+ var vals = this.getValueArray();
+ var tv = [];
+ Roo.each(vals, function(k) {
+ var r = this.findRecord(this.valueField, k);
+ if(r){
+ tv.push(r.data[this.displayField]);
+ }else if(this.valueNotFoundText !== undefined){
+ tv.push( this.valueNotFoundText );
+ }
+ },this);
+ // Roo.log(tv);
+
+ Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
+ this.hiddenField.value = v;
+ this.value = v;
}
+
});/*
* Based on:
* Ext JS Library 1.1.1
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.BorderLayout
- * @extends Roo.LayoutManager
- * @children Roo.ContentPanel
- * This class represents a common layout manager used in desktop applications. For screenshots and more details,
- * please see: <br><br>
- * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
- * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
- * Example:
- <pre><code>
- var layout = new Roo.BorderLayout(document.body, {
- north: {
- initialSize: 25,
- titlebar: false
- },
- west: {
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true
- },
- east: {
- split:true,
- initialSize: 202,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true
- },
- south: {
- split:true,
- initialSize: 100,
- minSize: 100,
- maxSize: 200,
- titlebar: true,
- collapsible: true
- },
- center: {
- titlebar: true,
- autoScroll:true,
- resizeTabs: true,
- minTabWidth: 50,
- preferredTabWidth: 150
- }
-});
-
-// shorthand
-var CP = Roo.ContentPanel;
-
-layout.beginUpdate();
-layout.add("north", new CP("north", "North"));
-layout.add("south", new CP("south", {title: "South", closable: true}));
-layout.add("west", new CP("west", {title: "West"}));
-layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
-layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
-layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
-layout.getRegion("center").showPanel("center1");
-layout.endUpdate();
-</code></pre>
-
-<b>The container the layout is rendered into can be either the body element or any other element.
-If it is not the body element, the container needs to either be an absolute positioned element,
-or you will need to add "position:relative" to the css of the container. You will also need to specify
-the container size if it is not the body element.</b>
-
-* @constructor
-* Create a new BorderLayout
-* @param {String/HTMLElement/Element} container The container this layout is bound to
-* @param {Object} config Configuration options
+ * @class Roo.form.Signature
+ * @extends Roo.form.Field
+ * Signature field.
+ * @constructor
+ *
+ * @param {Object} config Configuration options
*/
-Roo.BorderLayout = function(container, config){
- config = config || {};
- Roo.BorderLayout.superclass.constructor.call(this, container, config);
- this.factory = config.factory || Roo.BorderLayout.RegionFactory;
- for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
- var target = this.factory.validRegions[i];
- if(config[target]){
- this.addRegion(target, config[target]);
- }
- }
+
+Roo.form.Signature = function(config){
+ Roo.form.Signature.superclass.constructor.call(this, config);
+
+ this.addEvents({// not in used??
+ /**
+ * @event confirm
+ * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.Signature} combo This combo box
+ */
+ 'confirm' : true,
+ /**
+ * @event reset
+ * Fires when the 'edit' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+ */
+ 'reset' : true
+ });
};
-Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
-
- /**
- * @cfg {Roo.LayoutRegion} east
- */
- /**
- * @cfg {Roo.LayoutRegion} west
- */
- /**
- * @cfg {Roo.LayoutRegion} north
- */
- /**
- * @cfg {Roo.LayoutRegion} south
- */
- /**
- * @cfg {Roo.LayoutRegion} center
- */
+Roo.extend(Roo.form.Signature, Roo.form.Field, {
/**
- * Creates and adds a new region if it doesn't already exist.
- * @param {String} target The target region key (north, south, east, west or center).
- * @param {Object} config The regions config object
- * @return {BorderLayoutRegion} The new region
+ * @cfg {Object} labels Label to use when rendering a form.
+ * defaults to
+ * labels : {
+ * clear : "Clear",
+ * confirm : "Confirm"
+ * }
*/
- addRegion : function(target, config){
- if(!this.regions[target]){
- var r = this.factory.create(target, this, config);
- this.bindRegion(target, r);
- }
- return this.regions[target];
- },
-
- // private (kinda)
- bindRegion : function(name, r){
- this.regions[name] = r;
- r.on("visibilitychange", this.layout, this);
- r.on("paneladded", this.layout, this);
- r.on("panelremoved", this.layout, this);
- r.on("invalidated", this.layout, this);
- r.on("resized", this.onRegionResized, this);
- r.on("collapsed", this.onRegionCollapsed, this);
- r.on("expanded", this.onRegionExpanded, this);
+ labels : {
+ clear : "Clear",
+ confirm : "Confirm"
},
-
/**
- * Performs a layout update.
+ * @cfg {Number} width The signature panel width (defaults to 300)
*/
- layout : function(){
- if(this.updating) {
- return;
- }
- var size = this.getViewSize();
- var w = size.width;
- var h = size.height;
- var centerW = w;
- var centerH = h;
- var centerY = 0;
- var centerX = 0;
- //var x = 0, y = 0;
+ width: 300,
+ /**
+ * @cfg {Number} height The signature panel height (defaults to 100)
+ */
+ height : 100,
+ /**
+ * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
+ */
+ allowBlank : false,
+
+ //private
+ // {Object} signPanel The signature SVG panel element (defaults to {})
+ signPanel : {},
+ // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
+ isMouseDown : false,
+ // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
+ isConfirmed : false,
+ // {String} signatureTmp SVG mapping string (defaults to empty string)
+ signatureTmp : '',
+
+
+ defaultAutoCreate : { // modified by initCompnoent..
+ tag: "input",
+ type:"hidden"
+ },
- var rs = this.regions;
- var north = rs["north"];
- var south = rs["south"];
- var west = rs["west"];
- var east = rs["east"];
- var center = rs["center"];
- //if(this.hideOnLayout){ // not supported anymore
- //c.el.setStyle("display", "none");
- //}
- if(north && north.isVisible()){
- var b = north.getBox();
- var m = north.getMargins();
- b.width = w - (m.left+m.right);
- b.x = m.left;
- b.y = m.top;
- centerY = b.height + b.y + m.bottom;
- centerH -= centerY;
- north.updateBox(this.safeBox(b));
+ // private
+ onRender : function(ct, position){
+
+ Roo.form.Signature.superclass.onRender.call(this, ct, position);
+
+ this.wrap = this.el.wrap({
+ cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
+ });
+
+ this.createToolbar(this);
+ this.signPanel = this.wrap.createChild({
+ tag: 'div',
+ style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
+ }, this.el
+ );
+
+ this.svgID = Roo.id();
+ this.svgEl = this.signPanel.createChild({
+ xmlns : 'http://www.w3.org/2000/svg',
+ tag : 'svg',
+ id : this.svgID + "-svg",
+ width: this.width,
+ height: this.height,
+ viewBox: '0 0 '+this.width+' '+this.height,
+ cn : [
+ {
+ tag: "rect",
+ id: this.svgID + "-svg-r",
+ width: this.width,
+ height: this.height,
+ fill: "#ffa"
+ },
+ {
+ tag: "line",
+ id: this.svgID + "-svg-l",
+ x1: "0", // start
+ y1: (this.height*0.8), // start set the line in 80% of height
+ x2: this.width, // end
+ y2: (this.height*0.8), // end set the line in 80% of height
+ 'stroke': "#666",
+ 'stroke-width': "1",
+ 'stroke-dasharray': "3",
+ 'shape-rendering': "crispEdges",
+ 'pointer-events': "none"
+ },
+ {
+ tag: "path",
+ id: this.svgID + "-svg-p",
+ 'stroke': "navy",
+ 'stroke-width': "3",
+ 'fill': "none",
+ 'pointer-events': 'none'
+ }
+ ]
+ });
+ this.createSVG();
+ this.svgBox = this.svgEl.dom.getScreenCTM();
+ },
+ createSVG : function(){
+ var svg = this.signPanel;
+ var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
+ var t = this;
+
+ r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
+ r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
+ r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
+ r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
+ r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
+ r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
+ r.addEventListener('touchend', function(e) { return t.up(e); }, false);
+
+ },
+ isTouchEvent : function(e){
+ return e.type.match(/^touch/);
+ },
+ getCoords : function (e) {
+ var pt = this.svgEl.dom.createSVGPoint();
+ pt.x = e.clientX;
+ pt.y = e.clientY;
+ if (this.isTouchEvent(e)) {
+ pt.x = e.targetTouches[0].clientX;
+ pt.y = e.targetTouches[0].clientY;
}
- if(south && south.isVisible()){
- var b = south.getBox();
- var m = south.getMargins();
- b.width = w - (m.left+m.right);
- b.x = m.left;
- var totalHeight = (b.height + m.top + m.bottom);
- b.y = h - totalHeight + m.top;
- centerH -= totalHeight;
- south.updateBox(this.safeBox(b));
+ var a = this.svgEl.dom.getScreenCTM();
+ var b = a.inverse();
+ var mx = pt.matrixTransform(b);
+ return mx.x + ',' + mx.y;
+ },
+ //mouse event headler
+ down : function (e) {
+ this.signatureTmp += 'M' + this.getCoords(e) + ' ';
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
+
+ this.isMouseDown = true;
+
+ e.preventDefault();
+ },
+ move : function (e) {
+ if (this.isMouseDown) {
+ this.signatureTmp += 'L' + this.getCoords(e) + ' ';
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
}
- if(west && west.isVisible()){
- var b = west.getBox();
- var m = west.getMargins();
- b.height = centerH - (m.top+m.bottom);
- b.x = m.left;
- b.y = centerY + m.top;
- var totalWidth = (b.width + m.left + m.right);
- centerX += totalWidth;
- centerW -= totalWidth;
- west.updateBox(this.safeBox(b));
+
+ e.preventDefault();
+ },
+ up : function (e) {
+ this.isMouseDown = false;
+ var sp = this.signatureTmp.split(' ');
+
+ if(sp.length > 1){
+ if(!sp[sp.length-2].match(/^L/)){
+ sp.pop();
+ sp.pop();
+ sp.push("");
+ this.signatureTmp = sp.join(" ");
+ }
}
- if(east && east.isVisible()){
- var b = east.getBox();
- var m = east.getMargins();
- b.height = centerH - (m.top+m.bottom);
- var totalWidth = (b.width + m.left + m.right);
- b.x = w - totalWidth + m.left;
- b.y = centerY + m.top;
- centerW -= totalWidth;
- east.updateBox(this.safeBox(b));
+ if(this.getValue() != this.signatureTmp){
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+ this.isConfirmed = false;
}
- if(center){
- var m = center.getMargins();
- var centerBox = {
- x: centerX + m.left,
- y: centerY + m.top,
- width: centerW - (m.left+m.right),
- height: centerH - (m.top+m.bottom)
+ e.preventDefault();
+ },
+
+ /**
+ * Protected method that will not generally be called directly. It
+ * is called when the editor creates its toolbar. Override this method if you need to
+ * add custom toolbar buttons.
+ * @param {HtmlEditor} editor
+ */
+ createToolbar : function(editor){
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: editor, // was editor...
+ handler:handler||editor.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
};
- //if(this.hideOnLayout){
- //center.el.setStyle("display", "block");
- //}
- center.updateBox(this.safeBox(centerBox));
}
- this.el.repaint();
- this.fireEvent("layout", this);
- },
-
- // private
- safeBox : function(box){
- box.width = Math.max(0, box.width);
- box.height = Math.max(0, box.height);
- return box;
+
+
+ var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+ this.tb = tb;
+ this.tb.add(
+ {
+ cls : ' x-signature-btn x-signature-'+id,
+ scope: editor, // was editor...
+ handler: this.reset,
+ clickEvent:'mousedown',
+ text: this.labels.clear
+ },
+ {
+ xtype : 'Fill',
+ xns: Roo.Toolbar
+ },
+ {
+ cls : ' x-signature-btn x-signature-'+id,
+ scope: editor, // was editor...
+ handler: this.confirmHandler,
+ clickEvent:'mousedown',
+ text: this.labels.confirm
+ }
+ );
+
},
-
+ //public
/**
- * Adds a ContentPanel (or subclass) to this layout.
- * @param {String} target The target region key (north, south, east, west or center).
- * @param {Roo.ContentPanel} panel The panel to add
- * @return {Roo.ContentPanel} The added panel
+ * when user is clicked confirm then show this image.....
+ *
+ * @return {String} Image Data URI
*/
- add : function(target, panel){
-
- target = target.toLowerCase();
- return this.regions[target].add(panel);
+ getImageDataURI : function(){
+ var svg = this.svgEl.dom.parentNode.innerHTML;
+ var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
+ return src;
},
-
/**
- * Remove a ContentPanel (or subclass) to this layout.
- * @param {String} target The target region key (north, south, east, west or center).
- * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
- * @return {Roo.ContentPanel} The removed panel
+ *
+ * @return {Boolean} this.isConfirmed
*/
- remove : function(target, panel){
- target = target.toLowerCase();
- return this.regions[target].remove(panel);
+ getConfirmed : function(){
+ return this.isConfirmed;
},
-
/**
- * Searches all regions for a panel with the specified id
- * @param {String} panelId
- * @return {Roo.ContentPanel} The panel or null if it wasn't found
+ *
+ * @return {Number} this.width
*/
- findPanel : function(panelId){
- var rs = this.regions;
- for(var target in rs){
- if(typeof rs[target] != "function"){
- var p = rs[target].getPanel(panelId);
- if(p){
- return p;
- }
- }
- }
- return null;
+ getWidth : function(){
+ return this.width;
},
-
/**
- * Searches all regions for a panel with the specified id and activates (shows) it.
- * @param {String/ContentPanel} panelId The panels id or the panel itself
- * @return {Roo.ContentPanel} The shown panel or null
- */
- showPanel : function(panelId) {
- var rs = this.regions;
- for(var target in rs){
- var r = rs[target];
- if(typeof r != "function"){
- if(r.hasPanel(panelId)){
- return r.showPanel(panelId);
- }
- }
- }
- return null;
- },
-
- /**
- * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
- * @param {Roo.state.Provider} provider (optional) An alternate state provider
+ *
+ * @return {Number} this.height
*/
- restoreState : function(provider){
- if(!provider){
- provider = Roo.state.Manager;
- }
- var sm = new Roo.LayoutStateManager();
- sm.init(this, provider);
- },
-
- /**
- * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
- * object should contain properties for each region to add ContentPanels to, and each property's value should be
- * a valid ContentPanel config object. Example:
- * <pre><code>
-// Create the main layout
-var layout = new Roo.BorderLayout('main-ct', {
- west: {
- split:true,
- minSize: 175,
- titlebar: true
+ getHeight : function(){
+ return this.height;
},
- center: {
- title:'Components'
- }
-}, 'main-ct');
-
-// Create and add multiple ContentPanels at once via configs
-layout.batchAdd({
- west: {
- id: 'source-files',
- autoCreate:true,
- title:'Ext Source Files',
- autoScroll:true,
- fitToFrame:true
- },
- center : {
- el: cview,
- autoScroll:true,
- fitToFrame:true,
- toolbar: tb,
- resizeEl:'cbody'
- }
-});
-</code></pre>
- * @param {Object} regions An object containing ContentPanel configs by region name
- */
- batchAdd : function(regions){
- this.beginUpdate();
- for(var rname in regions){
- var lr = this.regions[rname];
- if(lr){
- this.addTypedPanels(lr, regions[rname]);
- }
- }
- this.endUpdate();
+ // private
+ getSignature : function(){
+ return this.signatureTmp;
},
-
// private
- addTypedPanels : function(lr, ps){
- if(typeof ps == 'string'){
- lr.add(new Roo.ContentPanel(ps));
- }
- else if(ps instanceof Array){
- for(var i =0, len = ps.length; i < len; i++){
- this.addTypedPanels(lr, ps[i]);
- }
- }
- else if(!ps.events){ // raw config?
- var el = ps.el;
- delete ps.el; // prevent conflict
- lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
- }
- else { // panel object assumed!
- lr.add(ps);
- }
+ reset : function(){
+ this.signatureTmp = '';
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
+ this.isConfirmed = false;
+ Roo.form.Signature.superclass.reset.call(this);
},
- /**
- * Adds a xtype elements to the layout.
- * <pre><code>
-
-layout.addxtype({
- xtype : 'ContentPanel',
- region: 'west',
- items: [ .... ]
- }
-);
-
-layout.addxtype({
- xtype : 'NestedLayoutPanel',
- region: 'west',
- layout: {
- center: { },
- west: { }
- },
- items : [ ... list of content panels or nested layout panels.. ]
- }
-);
-</code></pre>
- * @param {Object} cfg Xtype definition of item to add.
- */
- addxtype : function(cfg)
- {
- // basically accepts a pannel...
- // can accept a layout region..!?!?
- //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+ setSignature : function(s){
+ this.signatureTmp = s;
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
+ this.setValue(s);
+ this.isConfirmed = false;
+ Roo.form.Signature.superclass.reset.call(this);
+ },
+ test : function(){
+// Roo.log(this.signPanel.dom.contentWindow.up())
+ },
+ //private
+ setConfirmed : function(){
- if (!cfg.xtype.match(/Panel$/)) {
- return false;
- }
- var ret = false;
- if (typeof(cfg.region) == 'undefined') {
- Roo.log("Failed to add Panel, region was not set");
- Roo.log(cfg);
- return false;
+
+// Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+ },
+ // private
+ confirmHandler : function(){
+ if(!this.getSignature()){
+ return;
}
- var region = cfg.region;
- delete cfg.region;
-
- var xitems = [];
- if (cfg.items) {
- xitems = cfg.items;
- delete cfg.items;
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
+ this.setValue(this.getSignature());
+ this.isConfirmed = true;
+
+ this.fireEvent('confirm', this);
+ },
+ // private
+ // Subclasses should provide the validation implementation by overriding this
+ validateValue : function(value){
+ if(this.allowBlank){
+ return true;
}
- var nb = false;
- switch(cfg.xtype)
- {
- case 'ContentPanel': // ContentPanel (el, cfg)
- case 'ScrollPanel': // ContentPanel (el, cfg)
- case 'ViewPanel':
- if(cfg.autoCreate) {
- ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
- } else {
- var el = this.el.createChild();
- ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
- }
-
- this.add(region, ret);
- break;
-
-
- case 'TreePanel': // our new panel!
- cfg.el = this.el.createChild();
- ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
- this.add(region, ret);
- break;
-
- case 'NestedLayoutPanel':
- // create a new Layout (which is a Border Layout...
- var el = this.el.createChild();
- var clayout = cfg.layout;
- delete cfg.layout;
- clayout.items = clayout.items || [];
- // replace this exitems with the clayout ones..
- xitems = clayout.items;
-
-
- if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
- cfg.background = false;
- }
- var layout = new Roo.BorderLayout(el, clayout);
-
- ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
- //console.log('adding nested layout panel ' + cfg.toSource());
- this.add(region, ret);
- nb = {}; /// find first...
- break;
-
- case 'GridPanel':
-
- // needs grid and region
-
- //var el = this.getRegion(region).el.createChild();
- var el = this.el.createChild();
- // create the grid first...
-
- var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
- delete cfg.grid;
- if (region == 'center' && this.active ) {
- cfg.background = false;
- }
- ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
-
- this.add(region, ret);
- if (cfg.background) {
- ret.on('activate', function(gp) {
- if (!gp.grid.rendered) {
- gp.grid.render();
- }
- });
- } else {
- grid.render();
- }
- break;
-
-
-
-
-
-
- default:
- if (typeof(Roo[cfg.xtype]) != 'undefined') {
-
- ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
- this.add(region, ret);
- } else {
-
- alert("Can not add '" + cfg.xtype + "' to BorderLayout");
- return null;
- }
-
- // GridPanel (grid, cfg)
-
+ if(this.isConfirmed){
+ return true;
}
- this.beginUpdate();
- // add children..
- var region = '';
- var abn = {};
- Roo.each(xitems, function(i) {
- region = nb && i.region ? i.region : false;
-
- var add = ret.addxtype(i);
-
- if (region) {
- nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
- if (!i.background) {
- abn[region] = nb[region] ;
- }
- }
-
- });
- this.endUpdate();
+ return false;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
- // make the last non-background panel active..
- //if (nb) { Roo.log(abn); }
- if (nb) {
-
- for(var r in abn) {
- region = this.getRegion(r);
- if (region) {
- // tried using nb[r], but it does not work..
-
- region.showPanel(abn[r]);
-
- }
- }
+/**
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @constructor
+ * Create a new ComboBox.
+ * @param {Object} config Configuration options
+ */
+Roo.form.Select = function(config){
+ Roo.form.Select.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
+ /**
+ * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+ */
+ /**
+ * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
+ * rendering into an Roo.Editor, defaults to false)
+ */
+ /**
+ * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
+ * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+ */
+ /**
+ * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+ */
+ /**
+ * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
+ * the dropdown list (defaults to undefined, with no header element)
+ */
+
+ /**
+ * @cfg {String/Roo.Template} tpl The template to use to render the output
+ */
+
+ // private
+ defaultAutoCreate : {tag: "select" },
+ /**
+ * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+ */
+ listWidth: undefined,
+ /**
+ * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'text' if mode = 'local')
+ */
+ displayField: undefined,
+ /**
+ * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'value' if mode = 'local').
+ * Note: use of a valueField requires the user make a selection
+ * in order for a value to be mapped.
+ */
+ valueField: undefined,
+
+
+ /**
+ * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
+ * field's data value (defaults to the underlying DOM element's name)
+ */
+ hiddenName: undefined,
+ /**
+ * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
+ */
+ listClass: '',
+ /**
+ * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
+ */
+ selectedClass: 'x-combo-selected',
+ /**
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
+ * which displays a downward arrow icon).
+ */
+ triggerClass : 'x-form-arrow-trigger',
+ /**
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+ */
+ shadow:'sides',
+ /**
+ * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+ * anchor positions (defaults to 'tl-bl')
+ */
+ listAlign: 'tl-bl?',
+ /**
+ * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
+ */
+ maxHeight: 300,
+ /**
+ * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
+ * query specified by the allQuery config option (defaults to 'query')
+ */
+ triggerAction: 'query',
+ /**
+ * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
+ * (defaults to 4, does not apply if editable = false)
+ */
+ minChars : 4,
+ /**
+ * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
+ * delay (typeAheadDelay) if it matches a known value (defaults to false)
+ */
+ typeAhead: false,
+ /**
+ * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
+ * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+ */
+ queryDelay: 500,
+ /**
+ * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
+ * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
+ */
+ pageSize: 0,
+ /**
+ * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
+ * when editable = true (defaults to false)
+ */
+ selectOnFocus:false,
+ /**
+ * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+ */
+ queryParam: 'query',
+ /**
+ * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
+ * when mode = 'remote' (defaults to 'Loading...')
+ */
+ loadingText: 'Loading...',
+ /**
+ * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+ */
+ resizable: false,
+ /**
+ * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+ */
+ handleHeight : 8,
+ /**
+ * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+ * traditional select (defaults to true)
+ */
+ editable: true,
+ /**
+ * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+ */
+ allQuery: '',
+ /**
+ * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+ */
+ mode: 'remote',
+ /**
+ * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+ * listWidth has a higher value)
+ */
+ minListWidth : 70,
+ /**
+ * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
+ * allow the user to set arbitrary text into the field (defaults to false)
+ */
+ forceSelection:false,
+ /**
+ * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+ * if typeAhead = true (defaults to 250)
+ */
+ typeAheadDelay : 250,
+ /**
+ * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
+ * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+ */
+ valueNotFoundText : undefined,
+
+ /**
+ * @cfg {String} defaultValue The value displayed after loading the store.
+ */
+ defaultValue: '',
+
+ /**
+ * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+ */
+ blockFocus : false,
+
+ /**
+ * @cfg {Boolean} disableClear Disable showing of clear button.
+ */
+ disableClear : false,
+ /**
+ * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ */
+ alwaysQuery : false,
+
+ //private
+ addicon : false,
+ editicon: false,
+
+ // element that contains real text value.. (when hidden is used..)
+
+ // private
+ onRender : function(ct, position){
+ Roo.form.Field.prototype.onRender.call(this, ct, position);
+
+ if(this.store){
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
+ this.store.load({});
}
- return ret;
- }
-});
-
-/**
- * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
- * the beginUpdate and endUpdate calls internally. The key to this method is the <b>panels</b> property that can be
- * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
- * during creation. The following code is equivalent to the constructor-based example at the beginning of this class:
- * <pre><code>
-// shorthand
-var CP = Roo.ContentPanel;
-
-var layout = Roo.BorderLayout.create({
- north: {
- initialSize: 25,
- titlebar: false,
- panels: [new CP("north", "North")]
- },
- west: {
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- panels: [new CP("west", {title: "West"})]
- },
- east: {
- split:true,
- initialSize: 202,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
+
+
},
- south: {
- split:true,
- initialSize: 100,
- minSize: 100,
- maxSize: 200,
- titlebar: true,
- collapsible: true,
- panels: [new CP("south", {title: "South", closable: true})]
+
+ // private
+ initEvents : function(){
+ //Roo.form.ComboBox.superclass.initEvents.call(this);
+
},
- center: {
- titlebar: true,
- autoScroll:true,
- resizeTabs: true,
- minTabWidth: 50,
- preferredTabWidth: 150,
- panels: [
- new CP("center1", {title: "Close Me", closable: true}),
- new CP("center2", {title: "Center Panel", closable: false})
- ]
- }
-}, document.body);
-layout.getRegion("center").showPanel("center1");
-</code></pre>
- * @param config
- * @param targetEl
- */
-Roo.BorderLayout.create = function(config, targetEl){
- var layout = new Roo.BorderLayout(targetEl || document.body, config);
- layout.beginUpdate();
- var regions = Roo.BorderLayout.RegionFactory.validRegions;
- for(var j = 0, jlen = regions.length; j < jlen; j++){
- var lr = regions[j];
- if(layout.regions[lr] && config[lr].panels){
- var r = layout.regions[lr];
- var ps = config[lr].panels;
- layout.addTypedPanels(r, ps);
+ onDestroy : function(){
+
+ if(this.store){
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('loadexception', this.onLoadException, this);
}
- }
- layout.endUpdate();
- return layout;
-};
+ //Roo.form.ComboBox.superclass.onDestroy.call(this);
+ },
-// private
-Roo.BorderLayout.RegionFactory = {
// private
- validRegions : ["north","south","east","west","center"],
+ fireKey : function(e){
+ if(e.isNavKeyPress() && !this.list.isVisible()){
+ this.fireEvent("specialkey", this, e);
+ }
+ },
// private
- create : function(target, mgr, config){
- target = target.toLowerCase();
- if(config.lightweight || config.basic){
- return new Roo.BasicLayoutRegion(mgr, config, target);
- }
- switch(target){
- case "north":
- return new Roo.NorthLayoutRegion(mgr, config);
- case "south":
- return new Roo.SouthLayoutRegion(mgr, config);
- case "east":
- return new Roo.EastLayoutRegion(mgr, config);
- case "west":
- return new Roo.WestLayoutRegion(mgr, config);
- case "center":
- return new Roo.CenterLayoutRegion(mgr, config);
- }
- throw 'Layout region "'+target+'" not supported.';
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.BasicLayoutRegion
- * @extends Roo.util.Observable
- * This class represents a lightweight region in a layout manager. This region does not move dom nodes
- * and does not have a titlebar, tabs or any other features. All it does is size and position
- * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
- */
-Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
- this.mgr = mgr;
- this.position = pos;
- this.events = {
- /**
- * @scope Roo.BasicLayoutRegion
- */
+ onResize: function(w, h){
- /**
- * @event beforeremove
- * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
- * @param {Object} e The cancel event object
- */
- "beforeremove" : true,
- /**
- * @event invalidated
- * Fires when the layout for this region is changed.
- * @param {Roo.LayoutRegion} this
- */
- "invalidated" : true,
- /**
- * @event visibilitychange
- * Fires when this region is shown or hidden
- * @param {Roo.LayoutRegion} this
- * @param {Boolean} visibility true or false
- */
- "visibilitychange" : true,
- /**
- * @event paneladded
- * Fires when a panel is added.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
- */
- "paneladded" : true,
- /**
- * @event panelremoved
- * Fires when a panel is removed.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
- */
- "panelremoved" : true,
- /**
- * @event beforecollapse
- * Fires when this region before collapse.
- * @param {Roo.LayoutRegion} this
- */
- "beforecollapse" : true,
- /**
- * @event collapsed
- * Fires when this region is collapsed.
- * @param {Roo.LayoutRegion} this
- */
- "collapsed" : true,
- /**
- * @event expanded
- * Fires when this region is expanded.
- * @param {Roo.LayoutRegion} this
- */
- "expanded" : true,
- /**
- * @event slideshow
- * Fires when this region is slid into view.
- * @param {Roo.LayoutRegion} this
- */
- "slideshow" : true,
- /**
- * @event slidehide
- * Fires when this region slides out of view.
- * @param {Roo.LayoutRegion} this
- */
- "slidehide" : true,
- /**
- * @event panelactivated
- * Fires when a panel is activated.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The activated panel
- */
- "panelactivated" : true,
- /**
- * @event resized
- * Fires when the user resizes this region.
- * @param {Roo.LayoutRegion} this
- * @param {Number} newSize The new size (width for east/west, height for north/south)
- */
- "resized" : true
- };
- /** A collection of panels in this region. @type Roo.util.MixedCollection */
- this.panels = new Roo.util.MixedCollection();
- this.panels.getKey = this.getPanelId.createDelegate(this);
- this.box = null;
- this.activePanel = null;
- // ensure listeners are added...
-
- if (config.listeners || config.events) {
- Roo.BasicLayoutRegion.superclass.constructor.call(this, {
- listeners : config.listeners || {},
- events : config.events || {}
- });
- }
+ return;
- if(skipConfig !== true){
- this.applyConfig(config);
- }
-};
+
+ },
-Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
- getPanelId : function(p){
- return p.getId();
+ /**
+ * Allow or prevent the user from directly editing the field text. If false is passed,
+ * the user will only be able to select from the items defined in the dropdown list. This method
+ * is the runtime equivalent of setting the 'editable' config option at config time.
+ * @param {Boolean} value True to allow the user to directly edit the field text
+ */
+ setEditable : function(value){
+
},
-
- applyConfig : function(config){
- this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
- this.config = config;
+
+ // private
+ onBeforeLoad : function(){
+ Roo.log("Select before load");
+ return;
+
+ this.innerList.update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ //this.restrictHeight();
+ this.selectedIndex = -1;
},
+
+ // private
+ onLoad : function(){
+
- /**
- * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
- * the width, for horizontal (north, south) the height.
- * @param {Number} newSize The new width or height
- */
- resizeTo : function(newSize){
- var el = this.el ? this.el :
- (this.activePanel ? this.activePanel.getEl() : null);
- if(el){
- switch(this.position){
- case "east":
- case "west":
- el.setWidth(newSize);
- this.fireEvent("resized", this, newSize);
- break;
- case "north":
- case "south":
- el.setHeight(newSize);
- this.fireEvent("resized", this, newSize);
- break;
+ var dom = this.el.dom;
+ dom.innerHTML = '';
+ var od = dom.ownerDocument;
+
+ if (this.emptyText) {
+ var op = od.createElement('option');
+ op.setAttribute('value', '');
+ op.innerHTML = String.format('{0}', this.emptyText);
+ dom.appendChild(op);
+ }
+ if(this.store.getCount() > 0){
+
+ var vf = this.valueField;
+ var df = this.displayField;
+ this.store.data.each(function(r) {
+ // which colmsn to use... testing - cdoe / title..
+ var op = od.createElement('option');
+ op.setAttribute('value', r.data[vf]);
+ op.innerHTML = String.format('{0}', r.data[df]);
+ dom.appendChild(op);
+ });
+ if (typeof(this.defaultValue != 'undefined')) {
+ this.setValue(this.defaultValue);
}
+
+
+ }else{
+ //this.onEmptyResults();
}
+ //this.el.focus();
},
+ // private
+ onLoadException : function()
+ {
+ dom.innerHTML = '';
+
+ Roo.log("Select on load exception");
+ return;
- getBox : function(){
- return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+
+
},
-
- getMargins : function(){
- return this.margins;
+ // private
+ onTypeAhead : function(){
+
},
-
- updateBox : function(box){
- this.box = box;
- var el = this.activePanel.getEl();
- el.dom.style.left = box.x + "px";
- el.dom.style.top = box.y + "px";
- this.activePanel.setSize(box.width, box.height);
+
+ // private
+ onSelect : function(record, index){
+ Roo.log('on select?');
+ return;
+ if(this.fireEvent('beforeselect', this, record, index) !== false){
+ this.setFromData(index > -1 ? record.data : false);
+ this.collapse();
+ this.fireEvent('select', this, record, index);
+ }
},
-
+
/**
- * Returns the container element for this region.
- * @return {Roo.Element}
+ * Returns the currently selected field value or empty string if no value is set.
+ * @return {String} value The selected value
*/
- getEl : function(){
- return this.activePanel;
+ getValue : function(){
+ var dom = this.el.dom;
+ this.value = dom.options[dom.selectedIndex].value;
+ return this.value;
+
+ },
+
+ /**
+ * Clears any text/value currently set in the field
+ */
+ clearValue : function(){
+ this.value = '';
+ this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
+
+ },
+
+ /**
+ * Sets the specified value into the field. If the value finds a match, the corresponding record text
+ * will be displayed in the field. If the value does not match the data value of an existing item,
+ * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+ * Otherwise the field will be blank (although the value will still be set).
+ * @param {String} value The value to match
+ */
+ setValue : function(v){
+ var d = this.el.dom;
+ for (var i =0; i < d.options.length;i++) {
+ if (v == d.options[i].value) {
+ d.selectedIndex = i;
+ this.value = v;
+ return;
+ }
+ }
+ this.clearValue();
},
+ /**
+ * @property {Object} the last set data for the element
+ */
+ lastData : false,
/**
- * Returns true if this region is currently visible.
- * @return {Boolean}
+ * Sets the value of the field based on a object which is related to the record format for the store.
+ * @param {Object} value the value to set as. or false on reset?
*/
- isVisible : function(){
- return this.activePanel ? true : false;
+ setFromData : function(o){
+ Roo.log('setfrom data?');
+
+
+
+ },
+ // private
+ reset : function(){
+ this.clearValue();
},
+ // private
+ findRecord : function(prop, value){
+
+ return false;
- setActivePanel : function(panel){
- panel = this.getPanel(panel);
- if(this.activePanel && this.activePanel != panel){
- this.activePanel.setActiveState(false);
- this.activePanel.getEl().setLeftTop(-10000,-10000);
- }
- this.activePanel = panel;
- panel.setActiveState(true);
- if(this.box){
- panel.setSize(this.box.width, this.box.height);
+ var record;
+ if(this.store.getCount() > 0){
+ this.store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ return false;
+ }
+ return true;
+ });
}
- this.fireEvent("panelactivated", this, panel);
- this.fireEvent("invalidated");
+ return record;
+ },
+
+ getName: function()
+ {
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+
+ },
+
+
+
+
+ // private
+ onEmptyResults : function(){
+ Roo.log('empty results');
+ //this.collapse();
},
-
+
/**
- * Show the specified panel.
- * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
- * @return {Roo.ContentPanel} The shown panel or null
+ * Returns true if the dropdown list is expanded, else false.
*/
- showPanel : function(panel){
- if(panel = this.getPanel(panel)){
- this.setActivePanel(panel);
- }
- return panel;
+ isExpanded : function(){
+ return false;
},
-
+
/**
- * Get the active panel for this region.
- * @return {Roo.ContentPanel} The active panel or null
+ * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {String} value The data value of the item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
+ * @return {Boolean} True if the value matched an item in the list, else false
*/
- getActivePanel : function(){
- return this.activePanel;
- },
+ selectByValue : function(v, scrollIntoView){
+ Roo.log('select By Value');
+ return false;
+ if(v !== undefined && v !== null){
+ var r = this.findRecord(this.valueField || this.displayField, v);
+ if(r){
+ this.select(this.store.indexOf(r), scrollIntoView);
+ return true;
+ }
+ }
+ return false;
+ },
+
/**
- * Add the passed ContentPanel(s)
- * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
- * @return {Roo.ContentPanel} The panel added (if only one was added)
+ * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {Number} index The zero-based index of the list item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
*/
- add : function(panel){
- if(arguments.length > 1){
- for(var i = 0, len = arguments.length; i < len; i++) {
- this.add(arguments[i]);
+ select : function(index, scrollIntoView){
+ Roo.log('select ');
+ return ;
+
+ this.selectedIndex = index;
+ this.view.select(index);
+ if(scrollIntoView !== false){
+ var el = this.view.getNode(index);
+ if(el){
+ this.innerList.scrollChildIntoView(el, false);
}
- return null;
}
- if(this.hasPanel(panel)){
- this.showPanel(panel);
- return panel;
+ },
+
+
+
+ // private
+ validateBlur : function(){
+
+ return;
+
+ },
+
+ // private
+ initQuery : function(){
+ this.doQuery(this.getRawValue());
+ },
+
+ // private
+ doForce : function(){
+ if(this.el.dom.value.length > 0){
+ this.el.dom.value =
+ this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+
}
- var el = panel.getEl();
- if(el.dom.parentNode != this.mgr.el.dom){
- this.mgr.el.dom.appendChild(el.dom);
+ },
+
+ /**
+ * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
+ * query allowing the query action to be canceled if needed.
+ * @param {String} query The SQL query to execute
+ * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+ * in the field than the minimum specified by the minChars config option. It also clears any filter previously
+ * saved in the current store (defaults to false)
+ */
+ doQuery : function(q, forceAll){
+
+ Roo.log('doQuery?');
+ if(q === undefined || q === null){
+ q = '';
}
- if(panel.setRegion){
- panel.setRegion(this);
+ var qe = {
+ query: q,
+ forceAll: forceAll,
+ combo: this,
+ cancel:false
+ };
+ if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+ return false;
}
- this.panels.add(panel);
- el.setStyle("position", "absolute");
- if(!panel.background){
- this.setActivePanel(panel);
- if(this.config.initialSize && this.panels.getCount()==1){
- this.resizeTo(this.config.initialSize);
+ q = qe.query;
+ forceAll = qe.forceAll;
+ if(forceAll === true || (q.length >= this.minChars)){
+ if(this.lastQuery != q || this.alwaysQuery){
+ this.lastQuery = q;
+ if(this.mode == 'local'){
+ this.selectedIndex = -1;
+ if(forceAll){
+ this.store.clearFilter();
+ }else{
+ this.store.filter(this.displayField, q);
+ }
+ this.onLoad();
+ }else{
+ this.store.baseParams[this.queryParam] = q;
+ this.store.load({
+ params: this.getParams(q)
+ });
+ this.expand();
+ }
+ }else{
+ this.selectedIndex = -1;
+ this.onLoad();
}
}
- this.fireEvent("paneladded", this, panel);
- return panel;
},
-
- /**
- * Returns true if the panel is in this region.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
- * @return {Boolean}
- */
- hasPanel : function(panel){
- if(typeof panel == "object"){ // must be panel obj
- panel = panel.getId();
+
+ // private
+ getParams : function(q){
+ var p = {};
+ //p[this.queryParam] = q;
+ if(this.pageSize){
+ p.start = 0;
+ p.limit = this.pageSize;
}
- return this.getPanel(panel) ? true : false;
+ return p;
},
-
+
/**
- * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
- * @param {Boolean} preservePanel Overrides the config preservePanel option
- * @return {Roo.ContentPanel} The panel that was removed
+ * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
*/
- remove : function(panel, preservePanel){
- panel = this.getPanel(panel);
- if(!panel){
- return null;
- }
- var e = {};
- this.fireEvent("beforeremove", this, panel, e);
- if(e.cancel === true){
- return null;
- }
- var panelId = panel.getId();
- this.panels.removeKey(panelId);
- return panel;
+ collapse : function(){
+
},
-
+
+ // private
+ collapseIf : function(e){
+
+ },
+
/**
- * Returns the panel specified or null if it's not in this region.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
- * @return {Roo.ContentPanel}
+ * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
*/
- getPanel : function(id){
- if(typeof id == "object"){ // must be panel obj
- return id;
- }
- return this.panels.get(id);
- },
-
+ expand : function(){
+
+ } ,
+
+ // private
+
+
+ /**
+ * @cfg {Boolean} grow
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMin
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMax
+ * @hide
+ */
/**
- * Returns this regions position (north/south/east/west/center).
- * @return {String}
+ * @hide
+ * @method autoSize
*/
- getPosition: function(){
- return this.position;
+
+ setWidth : function()
+ {
+
+ },
+ getResizeEl : function(){
+ return this.el;
}
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+});//<script type="text/javasscript">
+
/**
- * @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|bottom) "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
+ * @class Roo.DDView
+ * A DnD enabled version of Roo.View.
+ * @param {Element/String} container The Element in which to create the View.
+ * @param {String} tpl The template string used to create the markup for each element of the View
+ * @param {Object} config The configuration properties. These include all the config options of
+ * {@link Roo.View} plus some specific to this class.<br>
+ * <p>
+ * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
+ * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
+ * <p>
+ * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
+.x-view-drag-insert-above {
+ border-top:1px dotted #3366cc;
+}
+.x-view-drag-insert-below {
+ border-bottom:1px dotted #3366cc;
+}
+</code></pre>
+ *
*/
-Roo.LayoutRegion = function(mgr, config, pos){
- Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
- var dh = Roo.DomHelper;
- /** This region's container element
- * @type Roo.Element */
- this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
- /** This region's title element
- * @type Roo.Element */
-
- this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
- {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: " "},
- {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
- ]}, true);
- this.titleEl.enableDisplayMode();
- /** This region's title text element
- * @type HTMLElement */
- this.titleTextEl = this.titleEl.dom.firstChild;
- this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
- this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
- this.closeBtn.enableDisplayMode();
- this.closeBtn.on("click", this.closeClicked, this);
- this.closeBtn.hide();
-
- this.createBody(config);
- this.visible = true;
- this.collapsed = false;
-
- if(config.hideWhenEmpty){
- this.hide();
- this.on("paneladded", this.validateVisibility, this);
- this.on("panelremoved", this.validateVisibility, this);
+
+Roo.DDView = function(container, tpl, config) {
+ Roo.DDView.superclass.constructor.apply(this, arguments);
+ this.getEl().setStyle("outline", "0px none");
+ this.getEl().unselectable();
+ if (this.dragGroup) {
+ this.setDraggable(this.dragGroup.split(","));
}
- this.applyConfig(config);
+ if (this.dropGroup) {
+ this.setDroppable(this.dropGroup.split(","));
+ }
+ if (this.deletable) {
+ this.setDeletable();
+ }
+ this.isDirtyFlag = false;
+ this.addEvents({
+ "drop" : true
+ });
};
-Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
-
- createBody : function(){
- /** This region's body element
- * @type Roo.Element */
- this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
- },
-
- applyConfig : function(c){
- if(c.collapsible && this.position != "center" && !this.collapsedEl){
- var dh = Roo.DomHelper;
- if(c.titlebar !== false){
- this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
- this.collapseBtn.on("click", this.collapse, this);
- this.collapseBtn.enableDisplayMode();
+Roo.extend(Roo.DDView, Roo.View, {
+/** @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
+/** @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
+/** @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
+/** @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
- if(c.showPin === true || this.showPin){
- this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
- this.stickBtn.enableDisplayMode();
- this.stickBtn.on("click", this.expand, this);
- this.stickBtn.hide();
- }
- }
- /** This region's collapsed element
- * @type Roo.Element */
- this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
- {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
- ]}, true);
- if(c.floatable !== false){
- this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
- this.collapsedEl.on("click", this.collapseClick, this);
- }
+ isFormField: true,
- if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
- this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
- id: "message", unselectable: "on", style:{"float":"left"}});
- this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
- }
- this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
- this.expandBtn.on("click", this.expand, this);
- }
- if(this.collapseBtn){
- this.collapseBtn.setVisible(c.collapsible == true);
- }
- this.cmargins = c.cmargins || this.cmargins ||
- (this.position == "west" || this.position == "east" ?
- {top: 0, left: 2, right:2, bottom: 0} :
- {top: 2, left: 0, right:0, bottom: 2});
- this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
- this.bottomTabs = c.tabPosition != "top";
- this.autoScroll = c.autoScroll || false;
- if(this.autoScroll){
- this.bodyEl.setStyle("overflow", "auto");
- }else{
- this.bodyEl.setStyle("overflow", "hidden");
- }
- //if(c.titlebar !== false){
- if((!c.titlebar && !c.title) || c.titlebar === false){
- this.titleEl.hide();
- }else{
- this.titleEl.show();
- if(c.title){
- this.titleTextEl.innerHTML = c.title;
- }
- }
- //}
- this.duration = c.duration || .30;
- this.slideDuration = c.slideDuration || .45;
- this.config = c;
- if(c.collapsed){
- this.collapse(true);
- }
- if(c.hidden){
- this.hide();
- }
- },
- /**
- * Returns true if this region is currently visible.
- * @return {Boolean}
- */
- isVisible : function(){
- return this.visible;
- },
+ reset: Roo.emptyFn,
+
+ clearInvalid: Roo.form.Field.prototype.clearInvalid,
- /**
- * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
- * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&#160;")
- */
- setCollapsedTitle : function(title){
- title = title || " ";
- if(this.collapsedTitleTextEl){
- this.collapsedTitleTextEl.innerHTML = title;
- }
- },
+ validate: function() {
+ return true;
+ },
+
+ destroy: function() {
+ this.purgeListeners();
+ this.getEl.removeAllListeners();
+ this.getEl().remove();
+ if (this.dragZone) {
+ if (this.dragZone.destroy) {
+ this.dragZone.destroy();
+ }
+ }
+ if (this.dropZone) {
+ if (this.dropZone.destroy) {
+ this.dropZone.destroy();
+ }
+ }
+ },
- getBox : function(){
- var b;
- if(!this.collapsed){
- b = this.el.getBox(false, true);
- }else{
- b = this.collapsedEl.getBox(false, true);
- }
- return b;
- },
+/** Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
+ getName: function() {
+ return this.name;
+ },
- getMargins : function(){
- return this.collapsed ? this.cmargins : this.margins;
- },
+/** Loads the View from a JSON string representing the Records to put into the Store. */
+ setValue: function(v) {
+ if (!this.store) {
+ throw "DDView.setValue(). DDView must be constructed with a valid Store";
+ }
+ var data = {};
+ data[this.store.reader.meta.root] = v ? [].concat(v) : [];
+ this.store.proxy = new Roo.data.MemoryProxy(data);
+ this.store.load();
+ },
- highlight : function(){
- this.el.addClass("x-layout-panel-dragover");
- },
+/** @return {String} a parenthesised list of the ids of the Records in the View. */
+ getValue: function() {
+ var result = '(';
+ this.store.each(function(rec) {
+ result += rec.id + ',';
+ });
+ return result.substr(0, result.length - 1) + ')';
+ },
+
+ getIds: function() {
+ var i = 0, result = new Array(this.store.getCount());
+ this.store.each(function(rec) {
+ result[i++] = rec.id;
+ });
+ return result;
+ },
+
+ isDirty: function() {
+ return this.isDirtyFlag;
+ },
- unhighlight : function(){
- this.el.removeClass("x-layout-panel-dragover");
+/**
+ * Part of the Roo.dd.DropZone interface. If no target node is found, the
+ * whole Element becomes the target, and this causes the drop gesture to append.
+ */
+ getTargetFromEvent : function(e) {
+ var target = e.getTarget();
+ while ((target !== null) && (target.parentNode != this.el.dom)) {
+ target = target.parentNode;
+ }
+ if (!target) {
+ target = this.el.dom.lastChild || this.el.dom;
+ }
+ return target;
},
- updateBox : function(box){
- this.box = box;
- if(!this.collapsed){
- this.el.dom.style.left = box.x + "px";
- this.el.dom.style.top = box.y + "px";
- this.updateBody(box.width, box.height);
- }else{
- this.collapsedEl.dom.style.left = box.x + "px";
- this.collapsedEl.dom.style.top = box.y + "px";
- this.collapsedEl.setSize(box.width, box.height);
- }
- if(this.tabs){
- this.tabs.autoSizeTabs();
- }
+/**
+ * Create the drag data which consists of an object which has the property "ddel" as
+ * the drag proxy element.
+ */
+ getDragData : function(e) {
+ var target = this.findItemFromChild(e.getTarget());
+ if(target) {
+ this.handleSelection(e);
+ var selNodes = this.getSelectedNodes();
+ var dragData = {
+ source: this,
+ copy: this.copy || (this.allowCopy && e.ctrlKey),
+ nodes: selNodes,
+ records: []
+ };
+ var selectedIndices = this.getSelectedIndexes();
+ for (var i = 0; i < selectedIndices.length; i++) {
+ dragData.records.push(this.store.getAt(selectedIndices[i]));
+ }
+ if (selNodes.length == 1) {
+ dragData.ddel = target.cloneNode(true); // the div element
+ } else {
+ var div = document.createElement('div'); // create the multi element drag "ghost"
+ div.className = 'multi-proxy';
+ for (var i = 0, len = selNodes.length; i < len; i++) {
+ div.appendChild(selNodes[i].cloneNode(true));
+ }
+ dragData.ddel = div;
+ }
+ //console.log(dragData)
+ //console.log(dragData.ddel.innerHTML)
+ return dragData;
+ }
+ //console.log('nodragData')
+ return false;
},
+
+/** Specify to which ddGroup items in this DDView may be dragged. */
+ setDraggable: function(ddGroup) {
+ if (ddGroup instanceof Array) {
+ Roo.each(ddGroup, this.setDraggable, this);
+ return;
+ }
+ if (this.dragZone) {
+ this.dragZone.addToGroup(ddGroup);
+ } else {
+ this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+ containerScroll: true,
+ ddGroup: ddGroup
- updateBody : function(w, h){
- if(w !== null){
- this.el.setWidth(w);
- w -= this.el.getBorderWidth("rl");
- if(this.config.adjustments){
- w += this.config.adjustments[0];
- }
- }
- if(h !== null){
- this.el.setHeight(h);
- h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
- h -= this.el.getBorderWidth("tb");
- if(this.config.adjustments){
- h += this.config.adjustments[1];
- }
- this.bodyEl.setHeight(h);
- if(this.tabs){
- h = this.tabs.syncHeight(h);
- }
- }
- if(this.panelSize){
- w = w !== null ? w : this.panelSize.width;
- h = h !== null ? h : this.panelSize.height;
- }
- if(this.activePanel){
- var el = this.activePanel.getEl();
- w = w !== null ? w : el.getWidth();
- h = h !== null ? h : el.getHeight();
- this.panelSize = {width: w, height: h};
- this.activePanel.setSize(w, h);
- }
- if(Roo.isIE && this.tabs){
- this.tabs.el.repaint();
- }
- },
+ });
+// Draggability implies selection. DragZone's mousedown selects the element.
+ if (!this.multiSelect) { this.singleSelect = true; }
- /**
- * Returns the container element for this region.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
+// Wire the DragZone's handlers up to methods in *this*
+ this.dragZone.getDragData = this.getDragData.createDelegate(this);
+ }
},
- /**
- * Hides this region.
- */
- hide : function(){
- if(!this.collapsed){
- this.el.dom.style.left = "-2000px";
- this.el.hide();
- }else{
- this.collapsedEl.dom.style.left = "-2000px";
- this.collapsedEl.hide();
- }
- this.visible = false;
- this.fireEvent("visibilitychange", this, false);
- },
+/** Specify from which ddGroup this DDView accepts drops. */
+ setDroppable: function(ddGroup) {
+ if (ddGroup instanceof Array) {
+ Roo.each(ddGroup, this.setDroppable, this);
+ return;
+ }
+ if (this.dropZone) {
+ this.dropZone.addToGroup(ddGroup);
+ } else {
+ this.dropZone = new Roo.dd.DropZone(this.getEl(), {
+ containerScroll: true,
+ ddGroup: ddGroup
+ });
- /**
- * Shows this region if it was previously hidden.
- */
- show : function(){
- if(!this.collapsed){
- this.el.show();
- }else{
- this.collapsedEl.show();
- }
- this.visible = true;
- this.fireEvent("visibilitychange", this, true);
+// Wire the DropZone's handlers up to methods in *this*
+ this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+ this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+ this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+ this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+ this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+ }
},
- closeClicked : function(){
- if(this.activePanel){
- this.remove(this.activePanel);
- }
+/** Decide whether to drop above or below a View node. */
+ getDropPoint : function(e, n, dd){
+ if (n == this.el.dom) { return "above"; }
+ var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
+ var c = t + (b - t) / 2;
+ var y = Roo.lib.Event.getPageY(e);
+ if(y <= c) {
+ return "above";
+ }else{
+ return "below";
+ }
},
- collapseClick : function(e){
- if(this.isSlid){
- e.stopPropagation();
- this.slideIn();
- }else{
- e.stopPropagation();
- this.slideOut();
- }
+ onNodeEnter : function(n, dd, e, data){
+ return false;
},
+
+ onNodeOver : function(n, dd, e, data){
+ var pt = this.getDropPoint(e, n, dd);
+ // set the insert point style on the target node
+ var dragElClass = this.dropNotAllowed;
+ if (pt) {
+ var targetElClass;
+ if (pt == "above"){
+ dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+ targetElClass = "x-view-drag-insert-above";
+ } else {
+ dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+ targetElClass = "x-view-drag-insert-below";
+ }
+ if (this.lastInsertClass != targetElClass){
+ Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+ this.lastInsertClass = targetElClass;
+ }
+ }
+ return dragElClass;
+ },
- /**
- * Collapses this region.
- * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
- */
- collapse : function(skipAnim, skipCheck){
- if(this.collapsed) {
- return;
- }
-
- if(skipCheck || this.fireEvent("beforecollapse", this) != false){
-
- this.collapsed = true;
- if(this.split){
- this.split.el.hide();
- }
- if(this.config.animate && skipAnim !== true){
- this.fireEvent("invalidated", this);
- this.animateCollapse();
- }else{
- this.el.setLocation(-20000,-20000);
- this.el.hide();
- this.collapsedEl.show();
- this.fireEvent("collapsed", this);
- this.fireEvent("invalidated", this);
- }
- }
-
+ onNodeOut : function(n, dd, e, data){
+ this.removeDropIndicators(n);
},
- animateCollapse : function(){
- // overridden
+ onNodeDrop : function(n, dd, e, data){
+ if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+ return false;
+ }
+ var pt = this.getDropPoint(e, n, dd);
+ var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
+ if (pt == "below") { insertAt++; }
+ for (var i = 0; i < data.records.length; i++) {
+ var r = data.records[i];
+ var dup = this.store.getById(r.id);
+ if (dup && (dd != this.dragZone)) {
+ Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
+ } else {
+ if (data.copy) {
+ this.store.insert(insertAt++, r.copy());
+ } else {
+ data.source.isDirtyFlag = true;
+ r.store.remove(r);
+ this.store.insert(insertAt++, r);
+ }
+ this.isDirtyFlag = true;
+ }
+ }
+ this.dragZone.cachedTarget = null;
+ return true;
},
- /**
- * Expands this region if it was previously collapsed.
- * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
- * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
- */
- expand : function(e, skipAnim){
- if(e) {
- e.stopPropagation();
- }
- if(!this.collapsed || this.el.hasActiveFx()) {
- return;
- }
- if(this.isSlid){
- this.afterSlideIn();
- skipAnim = true;
- }
- this.collapsed = false;
- if(this.config.animate && skipAnim !== true){
- this.animateExpand();
- }else{
- this.el.show();
- if(this.split){
- this.split.el.show();
- }
- this.collapsedEl.setLocation(-2000,-2000);
- this.collapsedEl.hide();
- this.fireEvent("invalidated", this);
- this.fireEvent("expanded", this);
- }
+ removeDropIndicators : function(n){
+ if(n){
+ Roo.fly(n).removeClass([
+ "x-view-drag-insert-above",
+ "x-view-drag-insert-below"]);
+ this.lastInsertClass = "_noclass";
+ }
},
- animateExpand : function(){
- // overridden
- },
+/**
+ * Utility method. Add a delete option to the DDView's context menu.
+ * @param {String} imageUrl The URL of the "delete" icon image.
+ */
+ setDeletable: function(imageUrl) {
+ if (!this.singleSelect && !this.multiSelect) {
+ this.singleSelect = true;
+ }
+ var c = this.getContextMenu();
+ this.contextMenu.on("itemclick", function(item) {
+ switch (item.id) {
+ case "delete":
+ this.remove(this.getSelectedIndexes());
+ break;
+ }
+ }, this);
+ this.contextMenu.add({
+ icon: imageUrl,
+ id: "delete",
+ text: 'Delete'
+ });
+ },
+
+/** Return the context menu for this DDView. */
+ getContextMenu: function() {
+ if (!this.contextMenu) {
+// Create the View's context menu
+ this.contextMenu = new Roo.menu.Menu({
+ id: this.id + "-contextmenu"
+ });
+ this.el.on("contextmenu", this.showContextMenu, this);
+ }
+ return this.contextMenu;
+ },
+
+ disableContextMenu: function() {
+ if (this.contextMenu) {
+ this.el.un("contextmenu", this.showContextMenu, this);
+ }
+ },
- initTabs : function()
- {
- this.bodyEl.setStyle("overflow", "hidden");
- 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);
- }
- this.tabs = ts;
- ts.resizeTabs = this.config.resizeTabs === true;
- ts.minTabWidth = this.config.minTabWidth || 40;
- ts.maxTabWidth = this.config.maxTabWidth || 250;
- ts.preferredTabWidth = this.config.preferredTabWidth || 150;
- ts.monitorResize = false;
- ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
- ts.bodyEl.addClass('x-layout-tabs-body');
- this.panels.each(this.initPanelAsTab, this);
+ showContextMenu: function(e, item) {
+ item = this.findItemFromChild(e.getTarget());
+ if (item) {
+ e.stopEvent();
+ this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
+ this.contextMenu.showAt(e.getXY());
+ }
},
- initPanelAsTab : function(panel){
- var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
- this.config.closeOnTab && panel.isClosable());
- if(panel.tabTip !== undefined){
- ti.setTooltip(panel.tabTip);
- }
- ti.on("activate", function(){
- this.setActivePanel(panel);
- }, this);
- if(this.config.closeOnTab){
- ti.on("beforeclose", function(t, e){
- e.cancel = true;
- this.remove(panel);
- }, this);
- }
- return ti;
+/**
+ * Remove {@link Roo.data.Record}s at the specified indices.
+ * @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
+ */
+ remove: function(selectedIndices) {
+ selectedIndices = [].concat(selectedIndices);
+ for (var i = 0; i < selectedIndices.length; i++) {
+ var rec = this.store.getAt(selectedIndices[i]);
+ this.store.remove(rec);
+ }
},
- updatePanelTitle : function(panel, title){
- if(this.activePanel == panel){
- this.updateTitle(title);
- }
- if(this.tabs){
- var ti = this.tabs.getTab(panel.getEl().id);
- ti.setText(title);
- if(panel.tabTip !== undefined){
- ti.setTooltip(panel.tabTip);
+/**
+ * Double click fires the event, but also, if this is draggable, and there is only one other
+ * related DropZone, it transfers the selected node.
+ */
+ onDblClick : function(e){
+ var item = this.findItemFromChild(e.getTarget());
+ if(item){
+ if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
+ return false;
}
+ if (this.dragGroup) {
+ var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
+ while (targets.indexOf(this.dropZone) > -1) {
+ targets.remove(this.dropZone);
+ }
+ if (targets.length == 1) {
+ this.dragZone.cachedTarget = null;
+ var el = Roo.get(targets[0].getEl());
+ var box = el.getBox(true);
+ targets[0].onNodeDrop(el.dom, {
+ target: el.dom,
+ xy: [box.x, box.y + box.height - 1]
+ }, null, this.getDragData(e));
+ }
+ }
}
},
-
- updateTitle : function(title){
- if(this.titleTextEl && !this.config.title){
- this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : " ");
+
+ handleSelection: function(e) {
+ this.dragZone.cachedTarget = null;
+ var item = this.findItemFromChild(e.getTarget());
+ if (!item) {
+ this.clearSelections(true);
+ return;
}
+ if (item && (this.multiSelect || this.singleSelect)){
+ if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
+ this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
+ }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
+ this.unselect(item);
+ } else {
+ this.select(item, this.multiSelect && e.ctrlKey);
+ this.lastSelection = item;
+ }
+ }
},
- setActivePanel : function(panel){
- panel = this.getPanel(panel);
- if(this.activePanel && this.activePanel != panel){
- this.activePanel.setActiveState(false);
- }
- this.activePanel = panel;
- panel.setActiveState(true);
- if(this.panelSize){
- panel.setSize(this.panelSize.width, this.panelSize.height);
- }
- if(this.closeBtn){
- this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
- }
- this.updateTitle(panel.getTitle());
- if(this.tabs){
- this.fireEvent("invalidated", this);
- }
- this.fireEvent("panelactivated", this, panel);
+ onItemClick : function(item, index, e){
+ if(this.fireEvent("beforeclick", this, index, item, e) === false){
+ return false;
+ }
+ return true;
},
+ unselect : function(nodeInfo, suppressEvent){
+ var node = this.getNode(nodeInfo);
+ if(node && this.isSelected(node)){
+ if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
+ Roo.fly(node).removeClass(this.selectedClass);
+ this.selections.remove(node);
+ if(!suppressEvent){
+ this.fireEvent("selectionchange", this, this.selections);
+ }
+ }
+ }
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.LayoutManager
+ * @extends Roo.util.Observable
+ * Base class for layout managers.
+ */
+Roo.LayoutManager = function(container, config){
+ Roo.LayoutManager.superclass.constructor.call(this);
+ this.el = Roo.get(container);
+ // ie scrollbar fix
+ if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
+ document.body.scroll = "no";
+ }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
+ this.el.position('relative');
+ }
+ this.id = this.el.id;
+ this.el.addClass("x-layout-container");
+ /** false to disable window resize monitoring @type Boolean */
+ this.monitorWindowResize = true;
+ this.regions = {};
+ this.addEvents({
+ /**
+ * @event layout
+ * Fires when a layout is performed.
+ * @param {Roo.LayoutManager} this
+ */
+ "layout" : true,
+ /**
+ * @event regionresized
+ * Fires when the user resizes a region.
+ * @param {Roo.LayoutRegion} region The resized region
+ * @param {Number} newSize The new size (width for east/west, height for north/south)
+ */
+ "regionresized" : true,
+ /**
+ * @event regioncollapsed
+ * Fires when a region is collapsed.
+ * @param {Roo.LayoutRegion} region The collapsed region
+ */
+ "regioncollapsed" : true,
+ /**
+ * @event regionexpanded
+ * Fires when a region is expanded.
+ * @param {Roo.LayoutRegion} region The expanded region
+ */
+ "regionexpanded" : true
+ });
+ this.updating = false;
+ Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+};
+
+Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
/**
- * Shows the specified panel.
- * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
- * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
+ * Returns true if this layout is currently being updated
+ * @return {Boolean}
*/
- showPanel : function(panel)
- {
- panel = this.getPanel(panel);
- if(panel){
- if(this.tabs){
- var tab = this.tabs.getTab(panel.getEl().id);
- if(tab.isHidden()){
- this.tabs.unhideTab(tab.id);
- }
- tab.activate();
- }else{
- this.setActivePanel(panel);
- }
- }
- return panel;
+ isUpdating : function(){
+ return this.updating;
},
-
+
/**
- * Get the active panel for this region.
- * @return {Roo.ContentPanel} The active panel or null
+ * Suspend the LayoutManager from doing auto-layouts while
+ * making multiple add or remove calls
*/
- getActivePanel : function(){
- return this.activePanel;
- },
-
- validateVisibility : function(){
- if(this.panels.getCount() < 1){
- this.updateTitle(" ");
- this.closeBtn.hide();
- this.hide();
- }else{
- if(!this.isVisible()){
- this.show();
- }
- }
+ beginUpdate : function(){
+ this.updating = true;
},
-
+
/**
- * Adds the passed ContentPanel(s) to this region.
- * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
- * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
+ * Restore auto-layouts and optionally disable the manager from performing a layout
+ * @param {Boolean} noLayout true to disable a layout update
*/
- add : function(panel){
- if(arguments.length > 1){
- for(var i = 0, len = arguments.length; i < len; i++) {
- this.add(arguments[i]);
- }
- return null;
- }
- if(this.hasPanel(panel)){
- this.showPanel(panel);
- return panel;
- }
- panel.setRegion(this);
- this.panels.add(panel);
- if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
- this.bodyEl.dom.appendChild(panel.getEl().dom);
- if(panel.background !== true){
- this.setActivePanel(panel);
- }
- this.fireEvent("paneladded", this, panel);
- return panel;
- }
- if(!this.tabs){
- this.initTabs();
- }else{
- this.initPanelAsTab(panel);
- }
- if(panel.background !== true){
- this.tabs.activate(panel.getEl().id);
- }
- this.fireEvent("paneladded", this, panel);
- return panel;
+ endUpdate : function(noLayout){
+ this.updating = false;
+ if(!noLayout){
+ this.layout();
+ }
},
-
- /**
- * Hides the tab for the specified panel.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
- */
- hidePanel : function(panel){
- if(this.tabs && (panel = this.getPanel(panel))){
- this.tabs.hideTab(panel.getEl().id);
- }
+
+ layout: function(){
+
},
-
+
+ onRegionResized : function(region, newSize){
+ this.fireEvent("regionresized", region, newSize);
+ this.layout();
+ },
+
+ onRegionCollapsed : function(region){
+ this.fireEvent("regioncollapsed", region);
+ },
+
+ onRegionExpanded : function(region){
+ this.fireEvent("regionexpanded", region);
+ },
+
/**
- * Unhides the tab for a previously hidden panel.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+ * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
+ * performs box-model adjustments.
+ * @return {Object} The size as an object {width: (the width), height: (the height)}
*/
- unhidePanel : function(panel){
- if(this.tabs && (panel = this.getPanel(panel))){
- this.tabs.unhideTab(panel.getEl().id);
- }
- },
-
- clearPanels : function(){
- while(this.panels.getCount() > 0){
- this.remove(this.panels.first());
+ getViewSize : function(){
+ var size;
+ if(this.el.dom != document.body){
+ size = this.el.getSize();
+ }else{
+ size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
}
+ size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
+ size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+ return size;
},
-
+
/**
- * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
- * @param {Boolean} preservePanel Overrides the config preservePanel option
- * @return {Roo.ContentPanel} The panel that was removed
+ * Returns the Element this layout is bound to.
+ * @return {Roo.Element}
*/
- remove : function(panel, preservePanel){
- panel = this.getPanel(panel);
- if(!panel){
- return null;
- }
- var e = {};
- this.fireEvent("beforeremove", this, panel, e);
- if(e.cancel === true){
- return null;
- }
- preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
- var panelId = panel.getId();
- this.panels.removeKey(panelId);
- if(preservePanel){
- document.body.appendChild(panel.getEl().dom);
- }
- if(this.tabs){
- this.tabs.removeTab(panel.getEl().id);
- }else if (!preservePanel){
- this.bodyEl.dom.removeChild(panel.getEl().dom);
- }
- if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
- var p = this.panels.first();
- var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
- tempEl.appendChild(p.getEl().dom);
- this.bodyEl.update("");
- this.bodyEl.dom.appendChild(p.getEl().dom);
- tempEl = null;
- this.updateTitle(p.getTitle());
- this.tabs = null;
- this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
- this.setActivePanel(p);
- }
- panel.setRegion(null);
- if(this.activePanel == panel){
- this.activePanel = null;
- }
- if(this.config.autoDestroy !== false && preservePanel !== true){
- try{panel.destroy();}catch(e){}
- }
- this.fireEvent("panelremoved", this, panel);
- return panel;
+ getEl : function(){
+ return this.el;
},
-
+
/**
- * Returns the TabPanel component used by this region
- * @return {Roo.TabPanel}
+ * Returns the specified region.
+ * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
+ * @return {Roo.LayoutRegion}
*/
- getTabs : function(){
- return this.tabs;
+ getRegion : function(target){
+ return this.regions[target.toLowerCase()];
},
-
- createTool : function(parentEl, className){
- var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
- children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: " "}]}, true);
- btn.addClassOnOver("x-layout-tools-button-over");
- return btn;
+
+ onWindowResize : function(){
+ if(this.monitorWindowResize){
+ this.layout();
+ }
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+/**
+ * @class Roo.BorderLayout
+ * @extends Roo.LayoutManager
+ * @children Roo.panel.Content
+ * This class represents a common layout manager used in desktop applications. For screenshots and more details,
+ * please see: <br><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
+ * Example:
+ <pre><code>
+ var layout = new Roo.BorderLayout(document.body, {
+ north: {
+ initialSize: 25,
+ titlebar: false
+ },
+ west: {
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true
+ },
+ east: {
+ split:true,
+ initialSize: 202,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true
+ },
+ south: {
+ split:true,
+ initialSize: 100,
+ minSize: 100,
+ maxSize: 200,
+ titlebar: true,
+ collapsible: true
+ },
+ center: {
+ titlebar: true,
+ autoScroll:true,
+ resizeTabs: true,
+ minTabWidth: 50,
+ preferredTabWidth: 150
+ }
+});
+// shorthand
+var CP = Roo.panel.Content;
-/**
- * @class Roo.SplitLayoutRegion
- * @extends Roo.LayoutRegion
- * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+layout.beginUpdate();
+layout.add("north", new CP("north", "North"));
+layout.add("south", new CP("south", {title: "South", closable: true}));
+layout.add("west", new CP("west", {title: "West"}));
+layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
+layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
+layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
+layout.getRegion("center").showPanel("center1");
+layout.endUpdate();
+</code></pre>
+
+<b>The container the layout is rendered into can be either the body element or any other element.
+If it is not the body element, the container needs to either be an absolute positioned element,
+or you will need to add "position:relative" to the css of the container. You will also need to specify
+the container size if it is not the body element.</b>
+
+* @constructor
+* Create a new BorderLayout
+* @param {String/HTMLElement/Element} container The container this layout is bound to
+* @param {Object} config Configuration options
*/
-Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
- this.cursor = cursor;
- Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+Roo.BorderLayout = function(container, config){
+ config = config || {};
+ Roo.BorderLayout.superclass.constructor.call(this, container, config);
+ this.factory = config.factory || Roo.BorderLayout.RegionFactory;
+ for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
+ var target = this.factory.validRegions[i];
+ if(config[target]){
+ this.addRegion(target, config[target]);
+ }
+ }
};
-Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
- splitTip : "Drag to resize.",
- collapsibleSplitTip : "Drag to resize. Double click to hide.",
- useSplitTips : false,
-
- applyConfig : function(config){
- Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
- if(config.split){
- if(!this.split){
- var splitEl = Roo.DomHelper.append(this.mgr.el.dom,
- {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: " "});
- /** The SplitBar for this region
- * @type Roo.SplitBar */
- this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
- this.split.on("moved", this.onSplitMove, this);
- this.split.useShim = config.useShim === true;
- this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
- if(this.useSplitTips){
- this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
- }
- if(config.collapsible){
- this.split.el.on("dblclick", this.collapse, this);
- }
- }
- if(typeof config.minSize != "undefined"){
- this.split.minSize = config.minSize;
- }
- if(typeof config.maxSize != "undefined"){
- this.split.maxSize = config.maxSize;
- }
- if(config.hideWhenEmpty || config.hidden || config.collapsed){
- this.hideSplitter();
- }
+Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+
+ /**
+ * @cfg {Roo.LayoutRegion} east
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} west
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} north
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} south
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} center
+ */
+ /**
+ * Creates and adds a new region if it doesn't already exist.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Object} config The regions config object
+ * @return {BorderLayoutRegion} The new region
+ */
+ addRegion : function(target, config){
+ if(!this.regions[target]){
+ var r = this.factory.create(target, this, config);
+ this.bindRegion(target, r);
}
+ return this.regions[target];
},
- getHMaxSize : function(){
- var cmax = this.config.maxSize || 10000;
- var center = this.mgr.getRegion("center");
- return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+ // private (kinda)
+ bindRegion : function(name, r){
+ this.regions[name] = r;
+ r.on("visibilitychange", this.layout, this);
+ r.on("paneladded", this.layout, this);
+ r.on("panelremoved", this.layout, this);
+ r.on("invalidated", this.layout, this);
+ r.on("resized", this.onRegionResized, this);
+ r.on("collapsed", this.onRegionCollapsed, this);
+ r.on("expanded", this.onRegionExpanded, this);
},
- getVMaxSize : function(){
- var cmax = this.config.maxSize || 10000;
- var center = this.mgr.getRegion("center");
- return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
+ /**
+ * Performs a layout update.
+ */
+ layout : function(){
+ if(this.updating) {
+ return;
+ }
+ var size = this.getViewSize();
+ var w = size.width;
+ var h = size.height;
+ var centerW = w;
+ var centerH = h;
+ var centerY = 0;
+ var centerX = 0;
+ //var x = 0, y = 0;
+
+ var rs = this.regions;
+ var north = rs["north"];
+ var south = rs["south"];
+ var west = rs["west"];
+ var east = rs["east"];
+ var center = rs["center"];
+ //if(this.hideOnLayout){ // not supported anymore
+ //c.el.setStyle("display", "none");
+ //}
+ if(north && north.isVisible()){
+ var b = north.getBox();
+ var m = north.getMargins();
+ b.width = w - (m.left+m.right);
+ b.x = m.left;
+ b.y = m.top;
+ centerY = b.height + b.y + m.bottom;
+ centerH -= centerY;
+ north.updateBox(this.safeBox(b));
+ }
+ if(south && south.isVisible()){
+ var b = south.getBox();
+ var m = south.getMargins();
+ b.width = w - (m.left+m.right);
+ b.x = m.left;
+ var totalHeight = (b.height + m.top + m.bottom);
+ b.y = h - totalHeight + m.top;
+ centerH -= totalHeight;
+ south.updateBox(this.safeBox(b));
+ }
+ if(west && west.isVisible()){
+ var b = west.getBox();
+ var m = west.getMargins();
+ b.height = centerH - (m.top+m.bottom);
+ b.x = m.left;
+ b.y = centerY + m.top;
+ var totalWidth = (b.width + m.left + m.right);
+ centerX += totalWidth;
+ centerW -= totalWidth;
+ west.updateBox(this.safeBox(b));
+ }
+ if(east && east.isVisible()){
+ var b = east.getBox();
+ var m = east.getMargins();
+ b.height = centerH - (m.top+m.bottom);
+ var totalWidth = (b.width + m.left + m.right);
+ b.x = w - totalWidth + m.left;
+ b.y = centerY + m.top;
+ centerW -= totalWidth;
+ east.updateBox(this.safeBox(b));
+ }
+ if(center){
+ var m = center.getMargins();
+ var centerBox = {
+ x: centerX + m.left,
+ y: centerY + m.top,
+ width: centerW - (m.left+m.right),
+ height: centerH - (m.top+m.bottom)
+ };
+ //if(this.hideOnLayout){
+ //center.el.setStyle("display", "block");
+ //}
+ center.updateBox(this.safeBox(centerBox));
+ }
+ this.el.repaint();
+ this.fireEvent("layout", this);
},
- onSplitMove : function(split, newSize){
- this.fireEvent("resized", this, newSize);
+ // private
+ safeBox : function(box){
+ box.width = Math.max(0, box.width);
+ box.height = Math.max(0, box.height);
+ return box;
},
-
- /**
- * Returns the {@link Roo.SplitBar} for this region.
- * @return {Roo.SplitBar}
+
+ /**
+ * Adds a ContentPanel (or subclass) to this layout.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Roo.panel.Content} panel The panel to add
+ * @return {Roo.panel.Content} The added panel
*/
- getSplitBar : function(){
- return this.split;
- },
-
- hide : function(){
- this.hideSplitter();
- Roo.SplitLayoutRegion.superclass.hide.call(this);
+ add : function(target, panel){
+
+ target = target.toLowerCase();
+ return this.regions[target].add(panel);
},
- hideSplitter : function(){
- if(this.split){
- this.split.el.setLocation(-2000,-2000);
- this.split.el.hide();
- }
+ /**
+ * Remove a ContentPanel (or subclass) to this layout.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Number/String/Roo.panel.Content} panel The index, id or panel to remove
+ * @return {Roo.panel.Content} The removed panel
+ */
+ remove : function(target, panel){
+ target = target.toLowerCase();
+ return this.regions[target].remove(panel);
},
- show : function(){
- if(this.split){
- this.split.el.show();
- }
- Roo.SplitLayoutRegion.superclass.show.call(this);
- },
-
- beforeSlide: function(){
- if(Roo.isGecko){// firefox overflow auto bug workaround
- this.bodyEl.clip();
- if(this.tabs) {
- this.tabs.bodyEl.clip();
- }
- if(this.activePanel){
- this.activePanel.getEl().clip();
-
- if(this.activePanel.beforeSlide){
- this.activePanel.beforeSlide();
- }
- }
- }
- },
-
- afterSlide : function(){
- if(Roo.isGecko){// firefox overflow auto bug workaround
- this.bodyEl.unclip();
- if(this.tabs) {
- this.tabs.bodyEl.unclip();
- }
- if(this.activePanel){
- this.activePanel.getEl().unclip();
- if(this.activePanel.afterSlide){
- this.activePanel.afterSlide();
+ /**
+ * Searches all regions for a panel with the specified id
+ * @param {String} panelId
+ * @return {Roo.panel.Content} The panel or null if it wasn't found
+ */
+ findPanel : function(panelId){
+ var rs = this.regions;
+ for(var target in rs){
+ if(typeof rs[target] != "function"){
+ var p = rs[target].getPanel(panelId);
+ if(p){
+ return p;
}
}
}
+ return null;
},
- initAutoHide : function(){
- if(this.autoHide !== false){
- if(!this.autoHideHd){
- var st = new Roo.util.DelayedTask(this.slideIn, this);
- this.autoHideHd = {
- "mouseout": function(e){
- if(!e.within(this.el, true)){
- st.delay(500);
- }
- },
- "mouseover" : function(e){
- st.cancel();
- },
- scope : this
- };
+ /**
+ * Searches all regions for a panel with the specified id and activates (shows) it.
+ * @param {String/panel.Content} panelId The panels id or the panel itself
+ * @return {Roo.panel.Content} The shown panel or null
+ */
+ showPanel : function(panelId) {
+ var rs = this.regions;
+ for(var target in rs){
+ var r = rs[target];
+ if(typeof r != "function"){
+ if(r.hasPanel(panelId)){
+ return r.showPanel(panelId);
}
- this.el.on(this.autoHideHd);
- }
- },
+ }
+ }
+ return null;
+ },
- clearAutoHide : function(){
- if(this.autoHide !== false){
- this.el.un("mouseout", this.autoHideHd.mouseout);
- this.el.un("mouseover", this.autoHideHd.mouseover);
+ /**
+ * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
+ * @param {Roo.state.Provider} provider (optional) An alternate state provider
+ */
+ restoreState : function(provider){
+ if(!provider){
+ provider = Roo.state.Manager;
}
+ var sm = new Roo.LayoutStateManager();
+ sm.init(this, provider);
},
- clearMonitor : function(){
- Roo.get(document).un("click", this.slideInIf, this);
+ /**
+ * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
+ * object should contain properties for each region to add ContentPanels to, and each property's value should be
+ * a valid ContentPanel config object. Example:
+ * <pre><code>
+// Create the main layout
+var layout = new Roo.BorderLayout('main-ct', {
+ west: {
+ split:true,
+ minSize: 175,
+ titlebar: true
},
+ center: {
+ title:'Components'
+ }
+}, 'main-ct');
- // these names are backwards but not changed for compat
- slideOut : function(){
- if(this.isSlid || this.el.hasActiveFx()){
- return;
- }
- this.isSlid = true;
- if(this.collapseBtn){
- this.collapseBtn.hide();
- }
- this.closeBtnState = this.closeBtn.getStyle('display');
- this.closeBtn.hide();
- if(this.stickBtn){
- this.stickBtn.show();
+// Create and add multiple ContentPanels at once via configs
+layout.batchAdd({
+ west: {
+ id: 'source-files',
+ autoCreate:true,
+ title:'Ext Source Files',
+ autoScroll:true,
+ fitToFrame:true
+ },
+ center : {
+ el: cview,
+ autoScroll:true,
+ fitToFrame:true,
+ toolbar: tb,
+ resizeEl:'cbody'
+ }
+});
+</code></pre>
+ * @param {Object} regions An object containing ContentPanel configs by region name
+ */
+ batchAdd : function(regions){
+ this.beginUpdate();
+ for(var rname in regions){
+ var lr = this.regions[rname];
+ if(lr){
+ this.addTypedPanels(lr, regions[rname]);
+ }
}
- this.el.show();
- this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
- this.beforeSlide();
- this.el.setStyle("z-index", 10001);
- this.el.slideIn(this.getSlideAnchor(), {
- callback: function(){
- this.afterSlide();
- this.initAutoHide();
- Roo.get(document).on("click", this.slideInIf, this);
- this.fireEvent("slideshow", this);
- },
- scope: this,
- block: true
- });
+ this.endUpdate();
},
- afterSlideIn : function(){
- this.clearAutoHide();
- this.isSlid = false;
- this.clearMonitor();
- this.el.setStyle("z-index", "");
- if(this.collapseBtn){
- this.collapseBtn.show();
+ // private
+ addTypedPanels : function(lr, ps){
+ if(typeof ps == 'string'){
+ lr.add(new Roo.panel.Content(ps));
}
- this.closeBtn.setStyle('display', this.closeBtnState);
- if(this.stickBtn){
- this.stickBtn.hide();
+ else if(ps instanceof Array){
+ for(var i =0, len = ps.length; i < len; i++){
+ this.addTypedPanels(lr, ps[i]);
+ }
}
- this.fireEvent("slidehide", this);
- },
-
- slideIn : function(cb){
- if(!this.isSlid || this.el.hasActiveFx()){
- Roo.callback(cb);
- return;
+ else if(!ps.events){ // raw config?
+ var el = ps.el;
+ delete ps.el; // prevent conflict
+ lr.add(new Roo.panel.Content(el || Roo.id(), ps));
}
- this.isSlid = false;
- this.beforeSlide();
- this.el.slideOut(this.getSlideAnchor(), {
- callback: function(){
- this.el.setLeftTop(-10000, -10000);
- this.afterSlide();
- this.afterSlideIn();
- Roo.callback(cb);
- },
- scope: this,
- block: true
- });
- },
-
- slideInIf : function(e){
- if(!e.within(this.el)){
- this.slideIn();
+ else { // panel object assumed!
+ lr.add(ps);
}
},
+ /**
+ * Adds a xtype elements to the layout.
+ * <pre><code>
- animateCollapse : function(){
- this.beforeSlide();
- this.el.setStyle("z-index", 20000);
- var anchor = this.getSlideAnchor();
- this.el.slideOut(anchor, {
- callback : function(){
- this.el.setStyle("z-index", "");
- this.collapsedEl.slideIn(anchor, {duration:.3});
- this.afterSlide();
- this.el.setLocation(-10000,-10000);
- this.el.hide();
- this.fireEvent("collapsed", this);
- },
- scope: this,
- block: true
- });
- },
-
- animateExpand : function(){
- this.beforeSlide();
- this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
- this.el.setStyle("z-index", 20000);
- this.collapsedEl.hide({
- duration:.1
- });
- this.el.slideIn(this.getSlideAnchor(), {
- callback : function(){
- this.el.setStyle("z-index", "");
- this.afterSlide();
- if(this.split){
- this.split.el.show();
- }
- this.fireEvent("invalidated", this);
- this.fireEvent("expanded", this);
- },
- scope: this,
- block: true
- });
- },
-
- anchors : {
- "west" : "left",
- "east" : "right",
- "north" : "top",
- "south" : "bottom"
- },
-
- sanchors : {
- "west" : "l",
- "east" : "r",
- "north" : "t",
- "south" : "b"
- },
-
- canchors : {
- "west" : "tl-tr",
- "east" : "tr-tl",
- "north" : "tl-bl",
- "south" : "bl-tl"
- },
-
- getAnchor : function(){
- return this.anchors[this.position];
- },
-
- getCollapseAnchor : function(){
- return this.canchors[this.position];
- },
+layout.addxtype({
+ xtype : 'ContentPanel',
+ region: 'west',
+ items: [ .... ]
+ }
+);
- getSlideAnchor : function(){
- return this.sanchors[this.position];
- },
+layout.addxtype({
+ xtype : 'NestedLayoutPanel',
+ region: 'west',
+ layout: {
+ center: { },
+ west: { }
+ },
+ items : [ ... list of content panels or nested layout panels.. ]
+ }
+);
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+ addxtype : function(cfg)
+ {
+ // basically accepts a pannel...
+ // can accept a layout region..!?!?
+ //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+
+ // if (!cfg.xtype.match(/Panel$/)) {
+ // return false;
+ // }
+ var ret = false;
- getAlignAdj : function(){
- var cm = this.cmargins;
- switch(this.position){
- case "west":
- return [0, 0];
- break;
- case "east":
- return [0, 0];
- break;
- case "north":
- return [0, 0];
- break;
- case "south":
- return [0, 0];
- break;
+ if (typeof(cfg.region) == 'undefined') {
+ Roo.log("Failed to add Panel, region was not set");
+ Roo.log(cfg);
+ return false;
}
- },
+ var region = cfg.region;
+ delete cfg.region;
+
+
+ var xitems = [];
+ if (cfg.items) {
+ xitems = cfg.items;
+ delete cfg.items;
+ }
+ var nb = false;
+
+ switch(cfg.xtype)
+ {
+ case 'Content':
+ if(cfg.autoCreate) {
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ } else {
+ var el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](el, cfg); // new panel!!!!!
+ }
+
+ this.add(region, ret);
+ break;
+ case 'Grid':
+ // needs grid and region
+
+ //var el = this.getRegion(region).el.createChild();
+ var el = this.el.createChild();
+ // create the grid first...
+
+ var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+ delete cfg.grid;
+ if (region == 'center' && this.active ) {
+ cfg.background = false;
+ }
+ ret = new Roo.panel[cfg.xtype](grid, cfg); // new panel!!!!!
+
+ this.add(region, ret);
+ if (cfg.background) {
+ ret.on('activate', function(gp) {
+ if (!gp.grid.rendered) {
+ gp.grid.render();
+ }
+ });
+ } else {
+ grid.render();
+ }
+ break;
+ case 'NestedLayout':
+ // create a new Layout (which is a Border Layout...
+ var el = this.el.createChild();
+ var clayout = cfg.layout;
+ delete cfg.layout;
+ clayout.items = clayout.items || [];
+ // replace this exitems with the clayout ones..
+ xitems = clayout.items;
+
+
+ if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+ cfg.background = false;
+ }
+ var layout = new Roo.BorderLayout(el, clayout);
+
+ ret = new Roo.panel[cfg.xtype](layout, cfg); // new panel!!!!!
+ //console.log('adding nested layout panel ' + cfg.toSource());
+ this.add(region, ret);
+ nb = {}; /// find first...
+ break;
+
+ case 'Calendar':
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'Tree': // our new panel!
+ cfg.el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'ContentPanel':
+ case 'ScrollPanel': // ContentPanel (el, cfg)
+ case 'ViewPanel':
+ if(cfg.autoCreate) {
+ ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+ } else {
+ var el = this.el.createChild();
+ ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
+ }
+
+ this.add(region, ret);
+ break;
+
+
+ case 'TreePanel': // our new panel!
+ cfg.el = this.el.createChild();
+ ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+
+ case 'NestedLayoutPanel':
+ // create a new Layout (which is a Border Layout...
+ var el = this.el.createChild();
+ var clayout = cfg.layout;
+ delete cfg.layout;
+ clayout.items = clayout.items || [];
+ // replace this exitems with the clayout ones..
+ xitems = clayout.items;
+
+
+ if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+ cfg.background = false;
+ }
+ var layout = new Roo.BorderLayout(el, clayout);
+
+ ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
+ //console.log('adding nested layout panel ' + cfg.toSource());
+ this.add(region, ret);
+ nb = {}; /// find first...
+ break;
+
+ case 'GridPanel':
+
+ // needs grid and region
+
+ //var el = this.getRegion(region).el.createChild();
+ var el = this.el.createChild();
+ // create the grid first...
+
+ var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+ delete cfg.grid;
+ if (region == 'center' && this.active ) {
+ cfg.background = false;
+ }
+ ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
+
+ this.add(region, ret);
+ if (cfg.background) {
+ ret.on('activate', function(gp) {
+ if (!gp.grid.rendered) {
+ gp.grid.render();
+ }
+ });
+ } else {
+ grid.render();
+ }
+ break;
+
+
+
+
+
+
+ default:
+ if (typeof(Roo[cfg.xtype]) != 'undefined') {
+
+ ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ } else {
+
+ alert("Can not add '" + cfg.xtype + "' to BorderLayout");
+ return null;
+ }
+
+ // GridPanel (grid, cfg)
+
+ }
+ this.beginUpdate();
+ // add children..
+ var region = '';
+ var abn = {};
+ Roo.each(xitems, function(i) {
+ region = nb && i.region ? i.region : false;
+
+ var add = ret.addxtype(i);
+
+ if (region) {
+ nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
+ if (!i.background) {
+ abn[region] = nb[region] ;
+ }
+ }
+
+ });
+ this.endUpdate();
- getExpandAdj : function(){
- var c = this.collapsedEl, cm = this.cmargins;
- switch(this.position){
- case "west":
- return [-(cm.right+c.getWidth()+cm.left), 0];
- break;
- case "east":
- return [cm.right+c.getWidth()+cm.left, 0];
- break;
- case "north":
- return [0, -(cm.top+cm.bottom+c.getHeight())];
- break;
- case "south":
- return [0, cm.top+cm.bottom+c.getHeight()];
- break;
+ // make the last non-background panel active..
+ //if (nb) { Roo.log(abn); }
+ if (nb) {
+
+ for(var r in abn) {
+ region = this.getRegion(r);
+ if (region) {
+ // tried using nb[r], but it does not work..
+
+ region.showPanel(abn[r]);
+
+ }
+ }
}
+ return ret;
+
}
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/*
- * These classes are private internal classes
- */
-Roo.CenterLayoutRegion = function(mgr, config){
- Roo.LayoutRegion.call(this, mgr, config, "center");
- this.visible = true;
- this.minWidth = config.minWidth || 20;
- this.minHeight = config.minHeight || 20;
-};
+});
-Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
- hide : function(){
- // center panel can't be hidden
+/**
+ * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
+ * the beginUpdate and endUpdate calls internally. The key to this method is the <b>panels</b> property that can be
+ * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
+ * during creation. The following code is equivalent to the constructor-based example at the beginning of this class:
+ * <pre><code>
+// shorthand
+var CP = Roo.ContentPanel;
+
+var layout = Roo.BorderLayout.create({
+ north: {
+ initialSize: 25,
+ titlebar: false,
+ panels: [new CP("north", "North")]
},
-
- show : function(){
- // center panel can't be hidden
+ west: {
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ panels: [new CP("west", {title: "West"})]
},
-
- getMinWidth: function(){
- return this.minWidth;
+ east: {
+ split:true,
+ initialSize: 202,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
},
-
- getMinHeight: function(){
- return this.minHeight;
- }
-});
-
-
-Roo.NorthLayoutRegion = function(mgr, config){
- Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.TOP;
- this.split.orientation = Roo.SplitBar.VERTICAL;
- this.split.el.addClass("x-layout-split-v");
- }
- var size = config.initialSize || config.height;
- if(typeof size != "undefined"){
- this.el.setHeight(size);
- }
-};
-Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.VERTICAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- box.height += this.split.el.getHeight();
- }
- return box;
+ south: {
+ split:true,
+ initialSize: 100,
+ minSize: 100,
+ maxSize: 200,
+ titlebar: true,
+ collapsible: true,
+ panels: [new CP("south", {title: "South", closable: true})]
},
-
- updateBox : function(box){
- if(this.split && !this.collapsed){
- box.height -= this.split.el.getHeight();
- this.split.el.setLeft(box.x);
- this.split.el.setTop(box.y+box.height);
- this.split.el.setWidth(box.width);
- }
- if(this.collapsed){
- this.updateBody(box.width, null);
- }
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ center: {
+ titlebar: true,
+ autoScroll:true,
+ resizeTabs: true,
+ minTabWidth: 50,
+ preferredTabWidth: 150,
+ panels: [
+ new CP("center1", {title: "Close Me", closable: true}),
+ new CP("center2", {title: "Center Panel", closable: false})
+ ]
}
-});
+}, document.body);
-Roo.SouthLayoutRegion = function(mgr, config){
- Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.BOTTOM;
- this.split.orientation = Roo.SplitBar.VERTICAL;
- this.split.el.addClass("x-layout-split-v");
- }
- var size = config.initialSize || config.height;
- if(typeof size != "undefined"){
- this.el.setHeight(size);
- }
-};
-Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.VERTICAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- var sh = this.split.el.getHeight();
- box.height += sh;
- box.y -= sh;
- }
- return box;
- },
-
- updateBox : function(box){
- if(this.split && !this.collapsed){
- var sh = this.split.el.getHeight();
- box.height -= sh;
- box.y += sh;
- this.split.el.setLeft(box.x);
- this.split.el.setTop(box.y-sh);
- this.split.el.setWidth(box.width);
- }
- if(this.collapsed){
- this.updateBody(box.width, null);
+layout.getRegion("center").showPanel("center1");
+</code></pre>
+ * @param config
+ * @param targetEl
+ */
+Roo.BorderLayout.create = function(config, targetEl){
+ var layout = new Roo.BorderLayout(targetEl || document.body, config);
+ layout.beginUpdate();
+ var regions = Roo.BorderLayout.RegionFactory.validRegions;
+ for(var j = 0, jlen = regions.length; j < jlen; j++){
+ var lr = regions[j];
+ if(layout.regions[lr] && config[lr].panels){
+ var r = layout.regions[lr];
+ var ps = config[lr].panels;
+ layout.addTypedPanels(r, ps);
}
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
- }
-});
-
-Roo.EastLayoutRegion = function(mgr, config){
- Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.RIGHT;
- this.split.orientation = Roo.SplitBar.HORIZONTAL;
- this.split.el.addClass("x-layout-split-h");
- }
- var size = config.initialSize || config.width;
- if(typeof size != "undefined"){
- this.el.setWidth(size);
}
+ layout.endUpdate();
+ return layout;
};
-Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.HORIZONTAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- var sw = this.split.el.getWidth();
- box.width += sw;
- box.x -= sw;
- }
- return box;
- },
- updateBox : function(box){
- if(this.split && !this.collapsed){
- var sw = this.split.el.getWidth();
- box.width -= sw;
- this.split.el.setLeft(box.x);
- this.split.el.setTop(box.y);
- this.split.el.setHeight(box.height);
- box.x += sw;
- }
- if(this.collapsed){
- this.updateBody(null, box.height);
- }
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
- }
-});
+// private
+Roo.BorderLayout.RegionFactory = {
+ // private
+ validRegions : ["north","south","east","west","center"],
-Roo.WestLayoutRegion = function(mgr, config){
- Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.LEFT;
- this.split.orientation = Roo.SplitBar.HORIZONTAL;
- this.split.el.addClass("x-layout-split-h");
- }
- var size = config.initialSize || config.width;
- if(typeof size != "undefined"){
- this.el.setWidth(size);
- }
-};
-Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.HORIZONTAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- box.width += this.split.el.getWidth();
- }
- return box;
- },
-
- updateBox : function(box){
- if(this.split && !this.collapsed){
- var sw = this.split.el.getWidth();
- box.width -= sw;
- this.split.el.setLeft(box.x+box.width);
- this.split.el.setTop(box.y);
- this.split.el.setHeight(box.height);
- }
- if(this.collapsed){
- this.updateBody(null, box.height);
+ // private
+ create : function(target, mgr, config){
+ target = target.toLowerCase();
+ if(config.lightweight || config.basic){
+ return new Roo.BasicLayoutRegion(mgr, config, target);
}
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/*
- * Private internal class for reading and applying state
- */
-Roo.LayoutStateManager = function(layout){
- // default empty state
- this.state = {
- north: {},
- south: {},
- east: {},
- west: {}
- };
-};
-
-Roo.LayoutStateManager.prototype = {
- init : function(layout, provider){
- this.provider = provider;
- var state = provider.get(layout.id+"-layout-state");
- if(state){
- var wasUpdating = layout.isUpdating();
- if(!wasUpdating){
- layout.beginUpdate();
- }
- for(var key in state){
- if(typeof state[key] != "function"){
- var rstate = state[key];
- var r = layout.getRegion(key);
- if(r && rstate){
- if(rstate.size){
- r.resizeTo(rstate.size);
- }
- if(rstate.collapsed == true){
- r.collapse(true);
- }else{
- r.expand(null, true);
- }
- }
- }
- }
- if(!wasUpdating){
- layout.endUpdate();
- }
- this.state = state;
+ switch(target){
+ case "north":
+ return new Roo.NorthLayoutRegion(mgr, config);
+ case "south":
+ return new Roo.SouthLayoutRegion(mgr, config);
+ case "east":
+ return new Roo.EastLayoutRegion(mgr, config);
+ case "west":
+ return new Roo.WestLayoutRegion(mgr, config);
+ case "center":
+ return new Roo.CenterLayoutRegion(mgr, config);
}
- this.layout = layout;
- layout.on("regionresized", this.onRegionResized, this);
- layout.on("regioncollapsed", this.onRegionCollapsed, this);
- layout.on("regionexpanded", this.onRegionExpanded, this);
- },
-
- storeState : function(){
- this.provider.set(this.layout.id+"-layout-state", this.state);
- },
-
- onRegionResized : function(region, newSize){
- this.state[region.getPosition()].size = newSize;
- this.storeState();
- },
-
- onRegionCollapsed : function(region){
- this.state[region.getPosition()].collapsed = true;
- this.storeState();
- },
-
- onRegionExpanded : function(region){
- this.state[region.getPosition()].collapsed = false;
- this.storeState();
+ throw 'Layout region "'+target+'" not supported.';
}
};/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.ContentPanel
+ * @class Roo.BasicLayoutRegion
* @extends Roo.util.Observable
- * @children Roo.form.Form Roo.JsonView Roo.View
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * 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|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 {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
- * @cfg {Roo.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) [required] 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.)
- * @cfg {String} style Extra style to add to the content panel
- * @cfg {Roo.menu.Menu} menu popup menu
-
- * @constructor
- * Create a new ContentPanel.
- * @param {String/HTMLElement/Roo.Element} el The container element for this panel
- * @param {String/Object} config A string to set only the title or a config object
- * @param {String} content (optional) Set the HTML content for this panel
- * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ * This class represents a lightweight region in a layout manager. This region does not move dom nodes
+ * and does not have a titlebar, tabs or any other features. All it does is size and position
+ * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
*/
-Roo.ContentPanel = function(el, config, content){
-
- /*
- if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
- config = el;
- el = Roo.id();
- }
- if (config && config.parentLayout) {
- el = config.parentLayout.el.createChild();
- }
- */
- if(el.autoCreate){ // xtype is available if this is called from factory
- config = el;
- el = Roo.id();
- }
- this.el = Roo.get(el);
- if(!this.el && config && config.autoCreate){
- if(typeof config.autoCreate == "object"){
- if(!config.autoCreate.id){
- config.autoCreate.id = config.id||el;
- }
- this.el = Roo.DomHelper.append(document.body,
- config.autoCreate, true);
- }else{
- this.el = Roo.DomHelper.append(document.body,
- {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
- }
- }
-
-
- this.closable = false;
- this.loaded = false;
- this.active = false;
- if(typeof config == "string"){
- this.title = config;
- }else{
- Roo.apply(this, config);
- }
-
- if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
- this.wrapEl = this.el.wrap();
- this.toolbar.container = this.el.insertSibling(false, 'before');
- this.toolbar = new Roo.Toolbar(this.toolbar);
- }
-
- // xtype created footer. - not sure if will work as we normally have to render first..
- if (this.footer && !this.footer.el && this.footer.xtype) {
- if (!this.wrapEl) {
- this.wrapEl = this.el.wrap();
- }
-
- this.footer.container = this.wrapEl.createChild();
-
- this.footer = Roo.factory(this.footer, Roo);
+Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
+ this.mgr = mgr;
+ this.position = pos;
+ this.events = {
+ /**
+ * @scope Roo.BasicLayoutRegion
+ */
- }
-
- if(this.resizeEl){
- this.resizeEl = Roo.get(this.resizeEl, true);
- }else{
- this.resizeEl = this.el;
- }
- // handle view.xtype
-
-
-
-
- this.addEvents({
/**
- * @event activate
- * Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
+ * @event beforeremove
+ * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The panel
+ * @param {Object} e The cancel event object
+ */
+ "beforeremove" : true,
+ /**
+ * @event invalidated
+ * Fires when the layout for this region is changed.
+ * @param {Roo.LayoutRegion} this
+ */
+ "invalidated" : true,
+ /**
+ * @event visibilitychange
+ * Fires when this region is shown or hidden
+ * @param {Roo.LayoutRegion} this
+ * @param {Boolean} visibility true or false
+ */
+ "visibilitychange" : true,
+ /**
+ * @event paneladded
+ * Fires when a panel is added.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The panel
+ */
+ "paneladded" : true,
+ /**
+ * @event panelremoved
+ * Fires when a panel is removed.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The panel
*/
- "activate" : true,
+ "panelremoved" : true,
/**
- * @event deactivate
- * Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
+ * @event beforecollapse
+ * Fires when this region before collapse.
+ * @param {Roo.LayoutRegion} this
*/
- "deactivate" : true,
-
+ "beforecollapse" : true,
/**
- * @event resize
- * Fires when this panel is resized if fitToFrame is true.
- * @param {Roo.ContentPanel} this
- * @param {Number} width The width after any component adjustments
- * @param {Number} height The height after any component adjustments
+ * @event collapsed
+ * Fires when this region is collapsed.
+ * @param {Roo.LayoutRegion} this
*/
- "resize" : true,
-
- /**
- * @event render
- * Fires when this tab is created
- * @param {Roo.ContentPanel} this
+ "collapsed" : true,
+ /**
+ * @event expanded
+ * Fires when this region is expanded.
+ * @param {Roo.LayoutRegion} this
*/
- "render" : true
-
-
- });
-
-
-
+ "expanded" : true,
+ /**
+ * @event slideshow
+ * Fires when this region is slid into view.
+ * @param {Roo.LayoutRegion} this
+ */
+ "slideshow" : true,
+ /**
+ * @event slidehide
+ * Fires when this region slides out of view.
+ * @param {Roo.LayoutRegion} this
+ */
+ "slidehide" : true,
+ /**
+ * @event panelactivated
+ * Fires when a panel is activated.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The activated panel
+ */
+ "panelactivated" : true,
+ /**
+ * @event resized
+ * Fires when the user resizes this region.
+ * @param {Roo.LayoutRegion} this
+ * @param {Number} newSize The new size (width for east/west, height for north/south)
+ */
+ "resized" : true
+ };
+ /** A collection of panels in this region. @type Roo.util.MixedCollection */
+ this.panels = new Roo.util.MixedCollection();
+ this.panels.getKey = this.getPanelId.createDelegate(this);
+ this.box = null;
+ this.activePanel = null;
+ // ensure listeners are added...
- 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);
+ if (config.listeners || config.events) {
+ Roo.BasicLayoutRegion.superclass.constructor.call(this, {
+ listeners : config.listeners || {},
+ events : config.events || {}
});
}
- content = content || this.content;
- if(content){
- this.setContent(content);
- }
- if(config && config.url){
- this.setUrl(this.url, this.params, this.loadOnce);
- }
-
-
- Roo.ContentPanel.superclass.constructor.call(this);
-
- if (this.view && typeof(this.view.xtype) != 'undefined') {
- this.view.el = this.el.appendChild(document.createElement("div"));
- this.view = Roo.factory(this.view);
- this.view.render && this.view.render(false, '');
+ if(skipConfig !== true){
+ this.applyConfig(config);
}
-
-
- this.fireEvent('render', this);
};
-Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
- tabTip:'',
- setRegion : function(region){
- this.region = region;
- if(region){
- this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
- }else{
- this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
- }
+Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
+ getPanelId : function(p){
+ return p.getId();
},
- /**
- * Returns the toolbar for this Panel if one was configured.
- * @return {Roo.Toolbar}
- */
- getToolbar : function(){
- return this.toolbar;
+ applyConfig : function(config){
+ this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+ this.config = config;
+
},
- setActiveState : function(active){
- this.active = active;
- if(!active){
- this.fireEvent("deactivate", this);
- }else{
- this.fireEvent("activate", this);
- }
- },
- /**
- * Updates this panel's element
- * @param {String} content The new content
- * @param {Boolean} loadScripts (optional) true to look for and process scripts
- */
- setContent : function(content, loadScripts){
- this.el.update(content, loadScripts);
- },
-
- ignoreResize : function(w, h){
- if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
- return true;
- }else{
- this.lastSize = {width: w, height: h};
- return false;
- }
- },
- /**
- * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
- * @return {Roo.UpdateManager} The UpdateManager
- */
- getUpdateManager : function(){
- return this.el.getUpdateManager();
- },
- /**
- * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
- * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
-<pre><code>
-panel.load({
- url: "your-url.php",
- params: {param1: "foo", param2: "bar"}, // or a URL encoded string
- callback: yourFunction,
- scope: yourObject, //(optional scope)
- discardUrl: false,
- nocache: false,
- text: "Loading...",
- timeout: 30,
- scripts: false
-});
-</code></pre>
- * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
- * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
- * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
- * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
- * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
- * @return {Roo.ContentPanel} this
- */
- load : function(){
- var um = this.el.getUpdateManager();
- um.update.apply(um, arguments);
- return this;
- },
-
-
/**
- * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
- * @param {String/Function} url The URL to load the content from or a function to call to get the URL
- * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
- * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
- * @return {Roo.UpdateManager} The UpdateManager
+ * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
+ * the width, for horizontal (north, south) the height.
+ * @param {Number} newSize The new width or height
*/
- setUrl : function(url, params, loadOnce){
- if(this.refreshDelegate){
- this.removeListener("activate", this.refreshDelegate);
- }
- this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
- this.on("activate", this.refreshDelegate);
- return this.el.getUpdateManager();
- },
-
- _handleRefresh : function(url, params, loadOnce){
- if(!loadOnce || !this.loaded){
- var updater = this.el.getUpdateManager();
- updater.update(url, params, this._setLoaded.createDelegate(this));
+ resizeTo : function(newSize){
+ var el = this.el ? this.el :
+ (this.activePanel ? this.activePanel.getEl() : null);
+ if(el){
+ switch(this.position){
+ case "east":
+ case "west":
+ el.setWidth(newSize);
+ this.fireEvent("resized", this, newSize);
+ break;
+ case "north":
+ case "south":
+ el.setHeight(newSize);
+ this.fireEvent("resized", this, newSize);
+ break;
+ }
}
},
- _setLoaded : function(){
- this.loaded = true;
- },
-
- /**
- * Returns this panel's id
- * @return {String}
- */
- getId : function(){
- return this.el.id;
- },
-
- /**
- * Returns this panel's element - used by regiosn to add.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.wrapEl || this.el;
- },
-
- adjustForComponents : function(width, height)
- {
- //Roo.log('adjustForComponents ');
- if(this.resizeEl != this.el){
- width -= this.el.getFrameWidth('lr');
- height -= this.el.getFrameWidth('tb');
- }
- if(this.toolbar){
- var te = this.toolbar.getEl();
- height -= te.getHeight();
- te.setWidth(width);
- }
- if(this.footer){
- var te = this.footer.getEl();
- //Roo.log("footer:" + te.getHeight());
-
- height -= te.getHeight();
- te.setWidth(width);
- }
-
-
- if(this.adjustments){
- width += this.adjustments[0];
- height += this.adjustments[1];
- }
- return {"width": width, "height": height};
+ getBox : function(){
+ return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
},
- setSize : function(width, height){
- if(this.fitToFrame && !this.ignoreResize(width, height)){
- if(this.fitContainer && this.resizeEl != this.el){
- this.el.setSize(width, height);
- }
- var size = this.adjustForComponents(width, height);
- this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
- this.fireEvent('resize', this, size.width, size.height);
- }
+ getMargins : function(){
+ return this.margins;
},
- /**
- * Returns this panel's title
- * @return {String}
- */
- getTitle : function(){
- return this.title;
+ updateBox : function(box){
+ this.box = box;
+ var el = this.activePanel.getEl();
+ el.dom.style.left = box.x + "px";
+ el.dom.style.top = box.y + "px";
+ this.activePanel.setSize(box.width, box.height);
},
/**
- * Set this panel's title
- * @param {String} title
+ * Returns the container element for this region.
+ * @return {Roo.Element}
*/
- setTitle : function(title){
- this.title = title;
- if(this.region){
- this.region.updatePanelTitle(this, title);
- }
+ getEl : function(){
+ return this.activePanel;
},
/**
- * Returns true is this panel was configured to be closable
- * @return {Boolean}
+ * Returns true if this region is currently visible.
+ * @return {Boolean}
*/
- isClosable : function(){
- return this.closable;
- },
-
- beforeSlide : function(){
- this.el.clip();
- this.resizeEl.clip();
+ isVisible : function(){
+ return this.activePanel ? true : false;
},
- afterSlide : function(){
- this.el.unclip();
- this.resizeEl.unclip();
+ setActivePanel : function(panel){
+ panel = this.getPanel(panel);
+ if(this.activePanel && this.activePanel != panel){
+ this.activePanel.setActiveState(false);
+ this.activePanel.getEl().setLeftTop(-10000,-10000);
+ }
+ this.activePanel = panel;
+ panel.setActiveState(true);
+ if(this.box){
+ panel.setSize(this.box.width, this.box.height);
+ }
+ this.fireEvent("panelactivated", this, panel);
+ this.fireEvent("invalidated");
},
/**
- * Force a content refresh from the URL specified in the {@link #setUrl} method.
- * Will fail silently if the {@link #setUrl} method has not been called.
- * This does not activate the panel, just updates its content.
+ * Show the specified panel.
+ * @param {Number/String/panel.Content} panelId The panels index, id or the panel itself
+ * @return {Roo.panel.Content} The shown panel or null
*/
- refresh : function(){
- if(this.refreshDelegate){
- this.loaded = false;
- this.refreshDelegate();
+ showPanel : function(panel){
+ if(panel = this.getPanel(panel)){
+ this.setActivePanel(panel);
}
+ return panel;
},
/**
- * Destroys this panel
+ * Get the active panel for this region.
+ * @return {Roo.panel.Content} The active panel or null
*/
- destroy : function(){
- this.el.removeAllListeners();
- var tempEl = document.createElement("span");
- tempEl.appendChild(this.el.dom);
- tempEl.innerHTML = "";
- this.el.remove();
- this.el = null;
+ getActivePanel : function(){
+ return this.activePanel;
},
/**
- * 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>
-
-layout.addxtype({
- xtype : 'Form',
- items: [ .... ]
- }
-);
-
-</code></pre>
- * @param {Object} cfg Xtype definition of item to add.
+ * Add the passed ContentPanel(s)
+ * @param {panel.Content...} panel The ContentPanel(s) to add (you can pass more than one)
+ * @return {Roo.panel.Content} The panel added (if only one was added)
*/
-
- addxtype : function(cfg) {
- if(cfg.xtype.match(/^UploadCropbox$/)) {
-
- this.cropbox = new Roo.factory(cfg);
-
- this.cropbox.render(this.el);
-
- return this.cropbox;
- }
- // add form..
- if (cfg.xtype.match(/^Form$/)) {
-
- var el;
- //if (this.footer) {
- // el = this.footer.container.insertSibling(false, 'before');
- //} else {
- el = this.el.createChild();
- //}
-
- this.form = new Roo.form.Form(cfg);
-
-
- if ( this.form.allItems.length) {
- this.form.render(el.dom);
+ add : function(panel){
+ if(arguments.length > 1){
+ for(var i = 0, len = arguments.length; i < len; i++) {
+ this.add(arguments[i]);
}
- return this.form;
+ return null;
}
- // should only have one of theses..
- if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
- // views.. should not be just added - used named prop 'view''
-
- cfg.el = this.el.appendChild(document.createElement("div"));
- // factory?
-
- var ret = new Roo.factory(cfg);
-
- ret.render && ret.render(false, ''); // render blank..
- this.view = ret;
- return ret;
+ if(this.hasPanel(panel)){
+ this.showPanel(panel);
+ return panel;
}
- return false;
- }
-});
-
-
-
-
-
-
-
-
-
-
-
-
-/**
- * @class Roo.GridPanel
- * @extends Roo.ContentPanel
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * @constructor
- * Create a new GridPanel.
- * @cfg {Roo.grid.Grid} grid The grid for this panel
- */
-Roo.GridPanel = function(grid, config){
-
- // universal ctor...
- if (typeof(grid.grid) != 'undefined') {
- config = grid;
- grid = config.grid;
- }
- this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
- {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
-
- this.wrapper.dom.appendChild(grid.getGridEl().dom);
-
- Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
-
- if(this.toolbar){
- this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
- }
- // xtype created footer. - not sure if will work as we normally have to render first..
- if (this.footer && !this.footer.el && this.footer.xtype) {
-
- this.footer.container = this.grid.getView().getFooterPanel(true);
- this.footer.dataSource = this.grid.dataSource;
- this.footer = Roo.factory(this.footer, Roo);
-
- }
-
- grid.monitorWindowResize = false; // turn off autosizing
- grid.autoHeight = false;
- grid.autoWidth = false;
- this.grid = grid;
- this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
-};
-
-Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
- getId : function(){
- return this.grid.id;
+ var el = panel.getEl();
+ if(el.dom.parentNode != this.mgr.el.dom){
+ this.mgr.el.dom.appendChild(el.dom);
+ }
+ if(panel.setRegion){
+ panel.setRegion(this);
+ }
+ this.panels.add(panel);
+ el.setStyle("position", "absolute");
+ if(!panel.background){
+ this.setActivePanel(panel);
+ if(this.config.initialSize && this.panels.getCount()==1){
+ this.resizeTo(this.config.initialSize);
+ }
+ }
+ this.fireEvent("paneladded", this, panel);
+ return panel;
},
/**
- * Returns the grid for this panel
- * @return {Roo.grid.Grid}
- */
- getGrid : function(){
- return this.grid;
- },
-
- setSize : function(width, height){
- if(!this.ignoreResize(width, height)){
- var grid = this.grid;
- var size = this.adjustForComponents(width, height);
- grid.getGridEl().setSize(size.width, size.height);
- grid.autoSize();
+ * Returns true if the panel is in this region.
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
+ * @return {Boolean}
+ */
+ hasPanel : function(panel){
+ if(typeof panel == "object"){ // must be panel obj
+ panel = panel.getId();
}
+ return this.getPanel(panel) ? true : false;
},
- beforeSlide : function(){
- this.grid.getView().scroller.clip();
+ /**
+ * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
+ * @param {Boolean} preservePanel Overrides the config preservePanel option
+ * @return {Roo.panel.Content} The panel that was removed
+ */
+ remove : function(panel, preservePanel){
+ panel = this.getPanel(panel);
+ if(!panel){
+ return null;
+ }
+ var e = {};
+ this.fireEvent("beforeremove", this, panel, e);
+ if(e.cancel === true){
+ return null;
+ }
+ var panelId = panel.getId();
+ this.panels.removeKey(panelId);
+ return panel;
},
- afterSlide : function(){
- this.grid.getView().scroller.unclip();
+ /**
+ * Returns the panel specified or null if it's not in this region.
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
+ * @return {Roo.panel.Content}
+ */
+ getPanel : function(id){
+ if(typeof id == "object"){ // must be panel obj
+ return id;
+ }
+ return this.panels.get(id);
},
- destroy : function(){
- this.grid.destroy();
- delete this.grid;
- Roo.GridPanel.superclass.destroy.call(this);
+ /**
+ * Returns this regions position (north/south/east/west/center).
+ * @return {String}
+ */
+ getPosition: function(){
+ return this.position;
}
-});
-
-
-/**
- * @class Roo.NestedLayoutPanel
- * @extends Roo.ContentPanel
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * @cfg {Roo.BorderLayout} layout [required] The layout for this panel
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
*
- *
- * @constructor
- * Create a new NestedLayoutPanel.
- *
- *
- * @param {Roo.BorderLayout} layout [required] The layout for this panel
- * @param {String/Object} config A string to set only the title or a config object
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
-Roo.NestedLayoutPanel = function(layout, config)
-{
- // construct with only one argument..
- /* FIXME - implement nicer consturctors
- if (layout.layout) {
- config = layout;
- layout = config.layout;
- delete config.layout;
- }
- if (layout.xtype && !layout.getEl) {
- // then layout needs constructing..
- layout = Roo.factory(layout, Roo);
+
+/**
+ * @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|bottom) "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);
+ var dh = Roo.DomHelper;
+ /** This region's container element
+ * @type Roo.Element */
+ this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
+ /** This region's title element
+ * @type Roo.Element */
+
+ this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
+ {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: " "},
+ {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
+ ]}, true);
+ this.titleEl.enableDisplayMode();
+ /** This region's title text element
+ * @type HTMLElement */
+ this.titleTextEl = this.titleEl.dom.firstChild;
+ this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
+ this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
+ this.closeBtn.enableDisplayMode();
+ this.closeBtn.on("click", this.closeClicked, this);
+ this.closeBtn.hide();
+
+ this.createBody(config);
+ this.visible = true;
+ this.collapsed = false;
+
+ if(config.hideWhenEmpty){
+ this.hide();
+ this.on("paneladded", this.validateVisibility, this);
+ this.on("panelremoved", this.validateVisibility, this);
}
- */
-
-
- Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
-
- layout.monitorWindowResize = false; // turn off autosizing
- this.layout = layout;
- this.layout.getEl().addClass("x-layout-nested-layout");
-
-
-
-
+ this.applyConfig(config);
};
-Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
- layout : false,
+ createBody : function(){
+ /** This region's body element
+ * @type Roo.Element */
+ this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
+ },
- setSize : function(width, height){
- if(!this.ignoreResize(width, height)){
- var size = this.adjustForComponents(width, height);
- var el = this.layout.getEl();
- el.setSize(size.width, size.height);
- var touch = el.dom.offsetWidth;
- this.layout.layout();
- // ie requires a double layout on the first pass
- if(Roo.isIE && !this.initialized){
- this.initialized = true;
- this.layout.layout();
+ applyConfig : function(c){
+ if(c.collapsible && this.position != "center" && !this.collapsedEl){
+ var dh = Roo.DomHelper;
+ if(c.titlebar !== false){
+ this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
+ this.collapseBtn.on("click", this.collapse, this);
+ this.collapseBtn.enableDisplayMode();
+
+ if(c.showPin === true || this.showPin){
+ this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
+ this.stickBtn.enableDisplayMode();
+ this.stickBtn.on("click", this.expand, this);
+ this.stickBtn.hide();
+ }
+ }
+ /** This region's collapsed element
+ * @type Roo.Element */
+ this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
+ {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
+ ]}, true);
+ if(c.floatable !== false){
+ this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
+ this.collapsedEl.on("click", this.collapseClick, this);
}
+
+ if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
+ this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
+ id: "message", unselectable: "on", style:{"float":"left"}});
+ this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
+ }
+ this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
+ this.expandBtn.on("click", this.expand, this);
}
- },
-
- // activate all subpanels if not currently active..
-
- setActiveState : function(active){
- this.active = active;
- if(!active){
- this.fireEvent("deactivate", this);
- return;
+ if(this.collapseBtn){
+ this.collapseBtn.setVisible(c.collapsible == true);
}
-
- this.fireEvent("activate", this);
- // not sure if this should happen before or after..
- if (!this.layout) {
- return; // should not happen..
+ this.cmargins = c.cmargins || this.cmargins ||
+ (this.position == "west" || this.position == "east" ?
+ {top: 0, left: 2, right:2, bottom: 0} :
+ {top: 2, left: 0, right:0, bottom: 2});
+ this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+ this.bottomTabs = c.tabPosition != "top";
+ this.autoScroll = c.autoScroll || false;
+ if(this.autoScroll){
+ this.bodyEl.setStyle("overflow", "auto");
+ }else{
+ this.bodyEl.setStyle("overflow", "hidden");
}
- var reg = false;
- for (var r in this.layout.regions) {
- reg = this.layout.getRegion(r);
- if (reg.getActivePanel()) {
- //reg.showPanel(reg.getActivePanel()); // force it to activate..
- reg.setActivePanel(reg.getActivePanel());
- continue;
- }
- if (!reg.panels.length) {
- continue;
+ //if(c.titlebar !== false){
+ if((!c.titlebar && !c.title) || c.titlebar === false){
+ this.titleEl.hide();
+ }else{
+ this.titleEl.show();
+ if(c.title){
+ this.titleTextEl.innerHTML = c.title;
+ }
}
- reg.showPanel(reg.getPanel(0));
+ //}
+ this.duration = c.duration || .30;
+ this.slideDuration = c.slideDuration || .45;
+ this.config = c;
+ if(c.collapsed){
+ this.collapse(true);
+ }
+ if(c.hidden){
+ this.hide();
}
-
-
-
-
},
-
/**
- * Returns the nested BorderLayout for this panel
- * @return {Roo.BorderLayout}
+ * Returns true if this region is currently visible.
+ * @return {Boolean}
*/
- getLayout : function(){
- return this.layout;
+ isVisible : function(){
+ return this.visible;
},
-
- /**
- * Adds a xtype elements to the layout of the nested panel
- * <pre><code>
-
-panel.addxtype({
- xtype : 'ContentPanel',
- region: 'west',
- items: [ .... ]
- }
-);
-panel.addxtype({
- xtype : 'NestedLayoutPanel',
- region: 'west',
- layout: {
- center: { },
- west: { }
- },
- items : [ ... list of content panels or nested layout panels.. ]
- }
-);
-</code></pre>
- * @param {Object} cfg Xtype definition of item to add.
+ /**
+ * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
+ * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&#160;")
*/
- addxtype : function(cfg) {
- return this.layout.addxtype(cfg);
-
- }
-});
-
-Roo.ScrollPanel = function(el, config, content){
- config = config || {};
- config.fitToFrame = true;
- Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
-
- this.el.dom.style.overflow = "hidden";
- var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
- this.el.removeClass("x-layout-inactive-content");
- this.el.on("mousewheel", this.onWheel, this);
-
- var up = wrap.createChild({cls: "x-scroller-up", html: " "}, this.el.dom);
- var down = wrap.createChild({cls: "x-scroller-down", html: " "});
- up.unselectable(); down.unselectable();
- up.on("click", this.scrollUp, this);
- down.on("click", this.scrollDown, this);
- up.addClassOnOver("x-scroller-btn-over");
- down.addClassOnOver("x-scroller-btn-over");
- up.addClassOnClick("x-scroller-btn-click");
- down.addClassOnClick("x-scroller-btn-click");
- this.adjustments = [0, -(up.getHeight() + down.getHeight())];
-
- this.resizeEl = this.el;
- this.el = wrap; this.up = up; this.down = down;
-};
-
-Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
- increment : 100,
- wheelIncrement : 5,
- scrollUp : function(){
- this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
+ setCollapsedTitle : function(title){
+ title = title || " ";
+ if(this.collapsedTitleTextEl){
+ this.collapsedTitleTextEl.innerHTML = title;
+ }
},
- scrollDown : function(){
- this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
+ getBox : function(){
+ var b;
+ if(!this.collapsed){
+ b = this.el.getBox(false, true);
+ }else{
+ b = this.collapsedEl.getBox(false, true);
+ }
+ return b;
},
- afterScroll : function(){
- var el = this.resizeEl;
- var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
- this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
- this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ getMargins : function(){
+ return this.collapsed ? this.cmargins : this.margins;
},
- setSize : function(){
- Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
- this.afterScroll();
+ highlight : function(){
+ this.el.addClass("x-layout-panel-dragover");
},
- onWheel : function(e){
- var d = e.getWheelDelta();
- this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
- this.afterScroll();
- e.stopEvent();
+ unhighlight : function(){
+ this.el.removeClass("x-layout-panel-dragover");
},
- setContent : function(content, loadScripts){
- this.resizeEl.update(content, loadScripts);
- }
-
-});
-
-
-
-/**
- * @class Roo.TreePanel
- * @extends Roo.ContentPanel
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * Treepanel component
- *
- * @constructor
- * Create a new TreePanel. - defaults to fit/scoll contents.
- * @param {String/Object} config A string to set only the panel's title, or a config object
- */
-Roo.TreePanel = function(config){
- var el = config.el;
- var tree = config.tree;
- delete config.tree;
- delete config.el; // hopefull!
-
- // wrapper for IE7 strict & safari scroll issue
-
- var treeEl = el.createChild();
- config.resizeEl = treeEl;
-
-
-
- Roo.TreePanel.superclass.constructor.call(this, el, config);
-
-
- this.tree = new Roo.tree.TreePanel(treeEl , tree);
- //console.log(tree);
- this.on('activate', function()
- {
- if (this.tree.rendered) {
- return;
+ updateBox : function(box){
+ this.box = box;
+ if(!this.collapsed){
+ this.el.dom.style.left = box.x + "px";
+ this.el.dom.style.top = box.y + "px";
+ this.updateBody(box.width, box.height);
+ }else{
+ this.collapsedEl.dom.style.left = box.x + "px";
+ this.collapsedEl.dom.style.top = box.y + "px";
+ this.collapsedEl.setSize(box.width, box.height);
}
- //console.log('render tree');
- this.tree.render();
- });
- // this should not be needed.. - it's actually the 'el' that resizes?
- // actuall it breaks the containerScroll - dragging nodes auto scroll at top
-
- //this.on('resize', function (cp, w, h) {
- // this.tree.innerCt.setWidth(w);
- // this.tree.innerCt.setHeight(h);
- // //this.tree.innerCt.setStyle('overflow-y', 'auto');
- //});
-
-
-
-};
-
-Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
- fitToFrame : true,
- autoScroll : true,
- /*
- * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
- */
- tree : false
-
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.ReaderLayout
- * @extends Roo.BorderLayout
- * This is a pre-built layout that represents a classic, 5-pane application. It consists of a header, a primary
- * center region containing two nested regions (a top one for a list view and one for item preview below),
- * and regions on either side that can be used for navigation, application commands, informational displays, etc.
- * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
- * expedites the setup of the overall layout and regions for this common application style.
- * Example:
- <pre><code>
-var reader = new Roo.ReaderLayout();
-var CP = Roo.ContentPanel; // shortcut for adding
-
-reader.beginUpdate();
-reader.add("north", new CP("north", "North"));
-reader.add("west", new CP("west", {title: "West"}));
-reader.add("east", new CP("east", {title: "East"}));
-
-reader.regions.listView.add(new CP("listView", "List"));
-reader.regions.preview.add(new CP("preview", "Preview"));
-reader.endUpdate();
-</code></pre>
-* @constructor
-* Create a new ReaderLayout
-* @param {Object} config Configuration options
-* @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
-* document.body if omitted)
-*/
-Roo.ReaderLayout = function(config, renderTo){
- var c = config || {size:{}};
- Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
- north: c.north !== false ? Roo.apply({
- split:false,
- initialSize: 32,
- titlebar: false
- }, c.north) : false,
- west: c.west !== false ? Roo.apply({
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- animate: true,
- margins:{left:5,right:0,bottom:5,top:5},
- cmargins:{left:5,right:5,bottom:5,top:5}
- }, c.west) : false,
- east: c.east !== false ? Roo.apply({
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- animate: true,
- margins:{left:0,right:5,bottom:5,top:5},
- cmargins:{left:5,right:5,bottom:5,top:5}
- }, c.east) : false,
- center: Roo.apply({
- tabPosition: 'top',
- autoScroll:false,
- closeOnTab: true,
- titlebar:false,
- margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
- }, c.center)
- });
+ if(this.tabs){
+ this.tabs.autoSizeTabs();
+ }
+ },
- this.el.addClass('x-reader');
+ updateBody : function(w, h){
+ if(w !== null){
+ this.el.setWidth(w);
+ w -= this.el.getBorderWidth("rl");
+ if(this.config.adjustments){
+ w += this.config.adjustments[0];
+ }
+ }
+ if(h !== null){
+ this.el.setHeight(h);
+ h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
+ h -= this.el.getBorderWidth("tb");
+ if(this.config.adjustments){
+ h += this.config.adjustments[1];
+ }
+ this.bodyEl.setHeight(h);
+ if(this.tabs){
+ h = this.tabs.syncHeight(h);
+ }
+ }
+ if(this.panelSize){
+ w = w !== null ? w : this.panelSize.width;
+ h = h !== null ? h : this.panelSize.height;
+ }
+ if(this.activePanel){
+ var el = this.activePanel.getEl();
+ w = w !== null ? w : el.getWidth();
+ h = h !== null ? h : el.getHeight();
+ this.panelSize = {width: w, height: h};
+ this.activePanel.setSize(w, h);
+ }
+ if(Roo.isIE && this.tabs){
+ this.tabs.el.repaint();
+ }
+ },
- this.beginUpdate();
+ /**
+ * Returns the container element for this region.
+ * @return {Roo.Element}
+ */
+ getEl : function(){
+ return this.el;
+ },
- var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
- south: c.preview !== false ? Roo.apply({
- split:true,
- initialSize: 200,
- minSize: 100,
- autoScroll:true,
- collapsible:true,
- titlebar: true,
- cmargins:{top:5,left:0, right:0, bottom:0}
- }, c.preview) : false,
- center: Roo.apply({
- autoScroll:false,
- titlebar:false,
- minHeight:200
- }, c.listView)
- });
- this.add('center', new Roo.NestedLayoutPanel(inner,
- Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
+ /**
+ * Hides this region.
+ */
+ hide : function(){
+ if(!this.collapsed){
+ this.el.dom.style.left = "-2000px";
+ this.el.hide();
+ }else{
+ this.collapsedEl.dom.style.left = "-2000px";
+ this.collapsedEl.hide();
+ }
+ this.visible = false;
+ this.fireEvent("visibilitychange", this, false);
+ },
- this.endUpdate();
+ /**
+ * Shows this region if it was previously hidden.
+ */
+ show : function(){
+ if(!this.collapsed){
+ this.el.show();
+ }else{
+ this.collapsedEl.show();
+ }
+ this.visible = true;
+ this.fireEvent("visibilitychange", this, true);
+ },
- this.regions.preview = inner.getRegion('south');
- this.regions.listView = inner.getRegion('center');
-};
+ closeClicked : function(){
+ if(this.activePanel){
+ this.remove(this.activePanel);
+ }
+ },
-Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.grid.Grid
- * @extends Roo.util.Observable
- * This class represents the primary interface of a component based grid control.
- * <br><br>Usage:<pre><code>
- var grid = new Roo.grid.Grid("my-container-id", {
- ds: myDataStore,
- cm: myColModel,
- selModel: mySelectionModel,
- autoSizeColumns: true,
- monitorWindowResize: false,
- trackMouseOver: true
- });
- // set any options
- grid.render();
- * </code></pre>
- * <b>Common Problems:</b><br/>
- * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
- * element will correct this<br/>
- * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
- * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
- * are unpredictable.<br/>
- * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
- * grid to calculate dimensions/offsets.<br/>
- * @constructor
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid.
- */
-Roo.grid.Grid = function(container, config){
- // initialize the container
- this.container = Roo.get(container);
- this.container.update("");
- this.container.setStyle("overflow", "hidden");
- this.container.addClass('x-grid-container');
+ collapseClick : function(e){
+ if(this.isSlid){
+ e.stopPropagation();
+ this.slideIn();
+ }else{
+ e.stopPropagation();
+ this.slideOut();
+ }
+ },
- this.id = this.container.id;
+ /**
+ * Collapses this region.
+ * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+ */
+ collapse : function(skipAnim, skipCheck){
+ if(this.collapsed) {
+ return;
+ }
+
+ if(skipCheck || this.fireEvent("beforecollapse", this) != false){
+
+ this.collapsed = true;
+ if(this.split){
+ this.split.el.hide();
+ }
+ if(this.config.animate && skipAnim !== true){
+ this.fireEvent("invalidated", this);
+ this.animateCollapse();
+ }else{
+ this.el.setLocation(-20000,-20000);
+ this.el.hide();
+ this.collapsedEl.show();
+ this.fireEvent("collapsed", this);
+ this.fireEvent("invalidated", this);
+ }
+ }
+
+ },
- Roo.apply(this, config);
- // check and correct shorthanded configs
- if(this.ds){
- this.dataSource = this.ds;
- delete this.ds;
- }
- if(this.cm){
- this.colModel = this.cm;
- delete this.cm;
- }
- if(this.sm){
- this.selModel = this.sm;
- delete this.sm;
- }
+ animateCollapse : function(){
+ // overridden
+ },
- if (this.selModel) {
- this.selModel = Roo.factory(this.selModel, Roo.grid);
- this.sm = this.selModel;
- this.sm.xmodule = this.xmodule || false;
- }
- if (typeof(this.colModel.config) == 'undefined') {
- this.colModel = new Roo.grid.ColumnModel(this.colModel);
- this.cm = this.colModel;
- this.cm.xmodule = this.xmodule || false;
- }
- if (this.dataSource) {
- this.dataSource= Roo.factory(this.dataSource, Roo.data);
- this.ds = this.dataSource;
- this.ds.xmodule = this.xmodule || false;
-
- }
-
-
-
- if(this.width){
- this.container.setWidth(this.width);
- }
+ /**
+ * Expands this region if it was previously collapsed.
+ * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
+ * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
+ */
+ expand : function(e, skipAnim){
+ if(e) {
+ e.stopPropagation();
+ }
+ if(!this.collapsed || this.el.hasActiveFx()) {
+ return;
+ }
+ if(this.isSlid){
+ this.afterSlideIn();
+ skipAnim = true;
+ }
+ this.collapsed = false;
+ if(this.config.animate && skipAnim !== true){
+ this.animateExpand();
+ }else{
+ this.el.show();
+ if(this.split){
+ this.split.el.show();
+ }
+ this.collapsedEl.setLocation(-2000,-2000);
+ this.collapsedEl.hide();
+ this.fireEvent("invalidated", this);
+ this.fireEvent("expanded", this);
+ }
+ },
- if(this.height){
- this.container.setHeight(this.height);
- }
- /** @private */
- this.addEvents({
- // raw events
- /**
- * @event click
- * The raw click event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "click" : true,
- /**
- * @event dblclick
- * The raw dblclick event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "dblclick" : true,
- /**
- * @event contextmenu
- * The raw contextmenu event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "contextmenu" : true,
- /**
- * @event mousedown
- * The raw mousedown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mousedown" : true,
- /**
- * @event mouseup
- * The raw mouseup event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseup" : true,
- /**
- * @event mouseover
- * The raw mouseover event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseover" : true,
- /**
- * @event mouseout
- * The raw mouseout event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseout" : true,
- /**
- * @event keypress
- * The raw keypress event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keypress" : true,
- /**
- * @event keydown
- * The raw keydown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keydown" : true,
+ animateExpand : function(){
+ // overridden
+ },
- // custom events
+ initTabs : function()
+ {
+ this.bodyEl.setStyle("overflow", "hidden");
+ var ts = new Roo.panel.Tab(
+ this.bodyEl.dom,
+ {
+ tabPosition: this.bottomTabs ? 'bottom' : 'top',
+ disableTooltips: this.config.disableTabTips,
+ toolbar : this.config.toolbar
+ }
+ );
+ if(this.config.hideTabs){
+ ts.stripWrap.setDisplayed(false);
+ }
+ this.tabs = ts;
+ ts.resizeTabs = this.config.resizeTabs === true;
+ ts.minTabWidth = this.config.minTabWidth || 40;
+ ts.maxTabWidth = this.config.maxTabWidth || 250;
+ ts.preferredTabWidth = this.config.preferredTabWidth || 150;
+ ts.monitorResize = false;
+ ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+ ts.bodyEl.addClass('x-layout-tabs-body');
+ this.panels.each(this.initPanelAsTab, this);
+ },
- /**
- * @event cellclick
- * Fires when a cell is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "cellclick" : true,
- /**
- * @event celldblclick
- * Fires when a cell is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "celldblclick" : true,
- /**
- * @event rowclick
- * Fires when a row is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowclick" : true,
- /**
- * @event rowdblclick
- * Fires when a row is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowdblclick" : true,
- /**
- * @event headerclick
- * Fires when a header is clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerclick" : true,
- /**
- * @event headerdblclick
- * Fires when a header cell is double clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerdblclick" : true,
- /**
- * @event rowcontextmenu
- * Fires when a row is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowcontextmenu" : true,
- /**
- * @event cellcontextmenu
- * Fires when a cell is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} cellIndex
- * @param {Roo.EventObject} e
- */
- "cellcontextmenu" : true,
- /**
- * @event headercontextmenu
- * Fires when a header is right clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headercontextmenu" : true,
- /**
- * @event bodyscroll
- * Fires when the body element is scrolled
- * @param {Number} scrollLeft
- * @param {Number} scrollTop
- */
- "bodyscroll" : true,
- /**
- * @event columnresize
- * Fires when the user resizes a column
- * @param {Number} columnIndex
- * @param {Number} newSize
- */
- "columnresize" : true,
- /**
- * @event columnmove
- * Fires when the user moves a column
- * @param {Number} oldIndex
- * @param {Number} newIndex
- */
- "columnmove" : true,
- /**
- * @event startdrag
- * Fires when row(s) start being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "startdrag" : true,
- /**
- * @event enddrag
- * Fires when a drag operation is complete
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "enddrag" : true,
- /**
- * @event dragdrop
- * Fires when dragged row(s) are dropped on a valid DD target
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragdrop" : true,
- /**
- * @event dragover
- * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragover" : true,
- /**
- * @event dragenter
- * Fires when the dragged row(s) first cross another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragenter" : true,
- /**
- * @event dragout
- * Fires when the dragged row(s) leave another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragout" : true,
- /**
- * @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.
- */
- 'rowclass' : true,
+ initPanelAsTab : function(panel){
+ var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
+ this.config.closeOnTab && panel.isClosable());
+ if(panel.tabTip !== undefined){
+ ti.setTooltip(panel.tabTip);
+ }
+ ti.on("activate", function(){
+ this.setActivePanel(panel);
+ }, this);
+ if(this.config.closeOnTab){
+ ti.on("beforeclose", function(t, e){
+ e.cancel = true;
+ this.remove(panel);
+ }, this);
+ }
+ return ti;
+ },
+
+ updatePanelTitle : function(panel, title){
+ if(this.activePanel == panel){
+ this.updateTitle(title);
+ }
+ if(this.tabs){
+ var ti = this.tabs.getTab(panel.getEl().id);
+ ti.setText(title);
+ if(panel.tabTip !== undefined){
+ ti.setTooltip(panel.tabTip);
+ }
+ }
+ },
- /**
- * @event render
- * Fires when the grid is rendered
- * @param {Grid} grid
- */
- 'render' : true
- });
+ updateTitle : function(title){
+ if(this.titleTextEl && !this.config.title){
+ this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : " ");
+ }
+ },
+
+ setActivePanel : function(panel){
+ panel = this.getPanel(panel);
+ if(this.activePanel && this.activePanel != panel){
+ this.activePanel.setActiveState(false);
+ }
+ this.activePanel = panel;
+ panel.setActiveState(true);
+ if(this.panelSize){
+ panel.setSize(this.panelSize.width, this.panelSize.height);
+ }
+ if(this.closeBtn){
+ this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
+ }
+ this.updateTitle(panel.getTitle());
+ if(this.tabs){
+ this.fireEvent("invalidated", this);
+ }
+ this.fireEvent("panelactivated", this, panel);
+ },
- Roo.grid.Grid.superclass.constructor.call(this);
-};
-Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
-
/**
- * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
- */
- /**
- * @cfg {Roo.grid.GridView} view The view that renders the grid (default = Roo.grid.GridView)
- */
- /**
- * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
- */
- /**
- * @cfg {Roo.data.Store} ds The data store for the grid
- */
- /**
- * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
- */
-
- /**
- * @cfg {Roo.PagingToolbar} footer the paging toolbar
- */
-
- /**
- * @cfg {String} ddGroup - drag drop group.
- */
- /**
- * @cfg {String} dragGroup - drag group (?? not sure if needed.)
+ * Shows the specified panel.
+ * @param {Number/String/panel.Content} panelId The panel's index, id or the panel itself
+ * @return {Roo.panel.Content} The shown panel, or null if a panel could not be found from panelId
*/
+ showPanel : function(panel)
+ {
+ panel = this.getPanel(panel);
+ if(panel){
+ if(this.tabs){
+ var tab = this.tabs.getTab(panel.getEl().id);
+ if(tab.isHidden()){
+ this.tabs.unhideTab(tab.id);
+ }
+ tab.activate();
+ }else{
+ this.setActivePanel(panel);
+ }
+ }
+ return panel;
+ },
/**
- * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
+ * Get the active panel for this region.
+ * @return {Roo.panel.Content} The active panel or null
*/
- minColumnWidth : 25,
+ getActivePanel : function(){
+ return this.activePanel;
+ },
+
+ validateVisibility : function(){
+ if(this.panels.getCount() < 1){
+ this.updateTitle(" ");
+ this.closeBtn.hide();
+ this.hide();
+ }else{
+ if(!this.isVisible()){
+ this.show();
+ }
+ }
+ },
/**
- * @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.
+ * Adds the passed ContentPanel(s) to this region.
+ * @param {panel.Content...} panel The ContentPanel(s) to add (you can pass more than one)
+ * @return {Roo.panel.Content} The panel added (if only one was added; null otherwise)
*/
- autoSizeColumns : false,
+ add : function(panel){
+ if(arguments.length > 1){
+ for(var i = 0, len = arguments.length; i < len; i++) {
+ this.add(arguments[i]);
+ }
+ return null;
+ }
+ if(this.hasPanel(panel)){
+ this.showPanel(panel);
+ return panel;
+ }
+ panel.setRegion(this);
+ this.panels.add(panel);
+ if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+ this.bodyEl.dom.appendChild(panel.getEl().dom);
+ if(panel.background !== true){
+ this.setActivePanel(panel);
+ }
+ this.fireEvent("paneladded", this, panel);
+ return panel;
+ }
+ if(!this.tabs){
+ this.initTabs();
+ }else{
+ this.initPanelAsTab(panel);
+ }
+ if(panel.background !== true){
+ this.tabs.activate(panel.getEl().id);
+ }
+ this.fireEvent("paneladded", this, panel);
+ return panel;
+ },
/**
- * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
+ * Hides the tab for the specified panel.
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
*/
- autoSizeHeaders : true,
+ hidePanel : function(panel){
+ if(this.tabs && (panel = this.getPanel(panel))){
+ this.tabs.hideTab(panel.getEl().id);
+ }
+ },
/**
- * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+ * Unhides the tab for a previously hidden panel.
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
*/
- monitorWindowResize : true,
+ unhidePanel : function(panel){
+ if(this.tabs && (panel = this.getPanel(panel))){
+ this.tabs.unhideTab(panel.getEl().id);
+ }
+ },
+
+ clearPanels : function(){
+ while(this.panels.getCount() > 0){
+ this.remove(this.panels.first());
+ }
+ },
/**
- * @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).
+ * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
+ * @param {Boolean} preservePanel Overrides the config preservePanel option
+ * @return {Roo.panel.Content} The panel that was removed
*/
- maxRowsToMeasure : 0,
+ remove : function(panel, preservePanel){
+ panel = this.getPanel(panel);
+ if(!panel){
+ return null;
+ }
+ var e = {};
+ this.fireEvent("beforeremove", this, panel, e);
+ if(e.cancel === true){
+ return null;
+ }
+ preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
+ var panelId = panel.getId();
+ this.panels.removeKey(panelId);
+ if(preservePanel){
+ document.body.appendChild(panel.getEl().dom);
+ }
+ if(this.tabs){
+ this.tabs.removeTab(panel.getEl().id);
+ }else if (!preservePanel){
+ this.bodyEl.dom.removeChild(panel.getEl().dom);
+ }
+ if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
+ var p = this.panels.first();
+ var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
+ tempEl.appendChild(p.getEl().dom);
+ this.bodyEl.update("");
+ this.bodyEl.dom.appendChild(p.getEl().dom);
+ tempEl = null;
+ this.updateTitle(p.getTitle());
+ this.tabs = null;
+ this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+ this.setActivePanel(p);
+ }
+ panel.setRegion(null);
+ if(this.activePanel == panel){
+ this.activePanel = null;
+ }
+ if(this.config.autoDestroy !== false && preservePanel !== true){
+ try{panel.destroy();}catch(e){}
+ }
+ this.fireEvent("panelremoved", this, panel);
+ return panel;
+ },
/**
- * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+ * Returns the TabPanel component used by this region
+ * @return {Roo.panel.Tab}
*/
- trackMouseOver : true,
+ getTabs : function(){
+ return this.tabs;
+ },
- /**
- * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
- */
- /**
- * @cfg {Boolean} enableDrop True to enable drop of elements. 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,
+ createTool : function(parentEl, className){
+ var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
+ children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: " "}]}, true);
+ btn.addClassOnOver("x-layout-tools-button-over");
+ return btn;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+
+/**
+ * @class Roo.SplitLayoutRegion
+ * @extends Roo.LayoutRegion
+ * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ */
+Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
+ this.cursor = cursor;
+ Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+};
+
+Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
+ splitTip : "Drag to resize.",
+ collapsibleSplitTip : "Drag to resize. Double click to hide.",
+ useSplitTips : false,
+
+ applyConfig : function(config){
+ Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+ if(config.split){
+ if(!this.split){
+ var splitEl = Roo.DomHelper.append(this.mgr.el.dom,
+ {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: " "});
+ /** The SplitBar for this region
+ * @type Roo.SplitBar */
+ this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
+ this.split.on("moved", this.onSplitMove, this);
+ this.split.useShim = config.useShim === true;
+ this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
+ if(this.useSplitTips){
+ this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
+ }
+ if(config.collapsible){
+ this.split.el.on("dblclick", this.collapse, this);
+ }
+ }
+ if(typeof config.minSize != "undefined"){
+ this.split.minSize = config.minSize;
+ }
+ if(typeof config.maxSize != "undefined"){
+ this.split.maxSize = config.maxSize;
+ }
+ if(config.hideWhenEmpty || config.hidden || config.collapsed){
+ this.hideSplitter();
+ }
+ }
+ },
+
+ getHMaxSize : function(){
+ var cmax = this.config.maxSize || 10000;
+ var center = this.mgr.getRegion("center");
+ return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+ },
+
+ getVMaxSize : function(){
+ var cmax = this.config.maxSize || 10000;
+ var center = this.mgr.getRegion("center");
+ return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
+ },
+
+ onSplitMove : function(split, newSize){
+ this.fireEvent("resized", this, newSize);
+ },
- /**
- * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
- */
- enableColumnMove : true,
+ /**
+ * Returns the {@link Roo.SplitBar} for this region.
+ * @return {Roo.SplitBar}
+ */
+ getSplitBar : function(){
+ return this.split;
+ },
- /**
- * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
- */
- enableColumnHide : true,
+ hide : function(){
+ this.hideSplitter();
+ Roo.SplitLayoutRegion.superclass.hide.call(this);
+ },
+
+ hideSplitter : function(){
+ if(this.split){
+ this.split.el.setLocation(-2000,-2000);
+ this.split.el.hide();
+ }
+ },
+
+ show : function(){
+ if(this.split){
+ this.split.el.show();
+ }
+ Roo.SplitLayoutRegion.superclass.show.call(this);
+ },
- /**
- * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
- */
- enableRowHeightSync : false,
+ beforeSlide: function(){
+ if(Roo.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.clip();
+ if(this.tabs) {
+ this.tabs.bodyEl.clip();
+ }
+ if(this.activePanel){
+ this.activePanel.getEl().clip();
+
+ if(this.activePanel.beforeSlide){
+ this.activePanel.beforeSlide();
+ }
+ }
+ }
+ },
- /**
- * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
- */
- stripeRows : true,
+ afterSlide : function(){
+ if(Roo.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.unclip();
+ if(this.tabs) {
+ this.tabs.bodyEl.unclip();
+ }
+ if(this.activePanel){
+ this.activePanel.getEl().unclip();
+ if(this.activePanel.afterSlide){
+ this.activePanel.afterSlide();
+ }
+ }
+ }
+ },
+
+ initAutoHide : function(){
+ if(this.autoHide !== false){
+ if(!this.autoHideHd){
+ var st = new Roo.util.DelayedTask(this.slideIn, this);
+ this.autoHideHd = {
+ "mouseout": function(e){
+ if(!e.within(this.el, true)){
+ st.delay(500);
+ }
+ },
+ "mouseover" : function(e){
+ st.cancel();
+ },
+ scope : this
+ };
+ }
+ this.el.on(this.autoHideHd);
+ }
+ },
+
+ clearAutoHide : function(){
+ if(this.autoHide !== false){
+ this.el.un("mouseout", this.autoHideHd.mouseout);
+ this.el.un("mouseover", this.autoHideHd.mouseover);
+ }
+ },
+
+ clearMonitor : function(){
+ Roo.get(document).un("click", this.slideInIf, this);
+ },
+
+ // these names are backwards but not changed for compat
+ slideOut : function(){
+ if(this.isSlid || this.el.hasActiveFx()){
+ return;
+ }
+ this.isSlid = true;
+ if(this.collapseBtn){
+ this.collapseBtn.hide();
+ }
+ this.closeBtnState = this.closeBtn.getStyle('display');
+ this.closeBtn.hide();
+ if(this.stickBtn){
+ this.stickBtn.show();
+ }
+ this.el.show();
+ this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
+ this.beforeSlide();
+ this.el.setStyle("z-index", 10001);
+ this.el.slideIn(this.getSlideAnchor(), {
+ callback: function(){
+ this.afterSlide();
+ this.initAutoHide();
+ Roo.get(document).on("click", this.slideInIf, this);
+ this.fireEvent("slideshow", this);
+ },
+ scope: this,
+ block: true
+ });
+ },
+
+ afterSlideIn : function(){
+ this.clearAutoHide();
+ this.isSlid = false;
+ this.clearMonitor();
+ this.el.setStyle("z-index", "");
+ if(this.collapseBtn){
+ this.collapseBtn.show();
+ }
+ this.closeBtn.setStyle('display', this.closeBtnState);
+ if(this.stickBtn){
+ this.stickBtn.hide();
+ }
+ this.fireEvent("slidehide", this);
+ },
+
+ slideIn : function(cb){
+ if(!this.isSlid || this.el.hasActiveFx()){
+ Roo.callback(cb);
+ return;
+ }
+ this.isSlid = false;
+ this.beforeSlide();
+ this.el.slideOut(this.getSlideAnchor(), {
+ callback: function(){
+ this.el.setLeftTop(-10000, -10000);
+ this.afterSlide();
+ this.afterSlideIn();
+ Roo.callback(cb);
+ },
+ scope: this,
+ block: true
+ });
+ },
- /**
- * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
- */
- autoHeight : false,
+ slideInIf : function(e){
+ if(!e.within(this.el)){
+ this.slideIn();
+ }
+ },
+
+ animateCollapse : function(){
+ this.beforeSlide();
+ this.el.setStyle("z-index", 20000);
+ var anchor = this.getSlideAnchor();
+ this.el.slideOut(anchor, {
+ callback : function(){
+ this.el.setStyle("z-index", "");
+ this.collapsedEl.slideIn(anchor, {duration:.3});
+ this.afterSlide();
+ this.el.setLocation(-10000,-10000);
+ this.el.hide();
+ this.fireEvent("collapsed", this);
+ },
+ scope: this,
+ block: true
+ });
+ },
+
+ animateExpand : function(){
+ this.beforeSlide();
+ this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
+ this.el.setStyle("z-index", 20000);
+ this.collapsedEl.hide({
+ duration:.1
+ });
+ this.el.slideIn(this.getSlideAnchor(), {
+ callback : function(){
+ this.el.setStyle("z-index", "");
+ this.afterSlide();
+ if(this.split){
+ this.split.el.show();
+ }
+ this.fireEvent("invalidated", this);
+ this.fireEvent("expanded", this);
+ },
+ scope: this,
+ block: true
+ });
+ },
- /**
- * @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.
- */
- autoExpandColumn : false,
+ anchors : {
+ "west" : "left",
+ "east" : "right",
+ "north" : "top",
+ "south" : "bottom"
+ },
- /**
- * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
- * Default is 50.
- */
- autoExpandMin : 50,
+ sanchors : {
+ "west" : "l",
+ "east" : "r",
+ "north" : "t",
+ "south" : "b"
+ },
- /**
- * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
- */
- autoExpandMax : 1000,
+ canchors : {
+ "west" : "tl-tr",
+ "east" : "tr-tl",
+ "north" : "tl-bl",
+ "south" : "bl-tl"
+ },
- /**
- * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
- */
- view : null,
+ getAnchor : function(){
+ return this.anchors[this.position];
+ },
- /**
- * @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} dropTarget An {@link Roo.dd.DropTarget} config
- */
- dropTarget: false,
- /**
- * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
- */
- sortColMenu : false,
-
- // private
- rendered : false,
+ getCollapseAnchor : function(){
+ return this.canchors[this.position];
+ },
- /**
- * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
- * of a fixed width. Default is false.
- */
- /**
- * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
- */
-
+ getSlideAnchor : function(){
+ return this.sanchors[this.position];
+ },
+
+ getAlignAdj : function(){
+ var cm = this.cmargins;
+ switch(this.position){
+ case "west":
+ return [0, 0];
+ break;
+ case "east":
+ return [0, 0];
+ break;
+ case "north":
+ return [0, 0];
+ break;
+ case "south":
+ return [0, 0];
+ break;
+ }
+ },
+
+ getExpandAdj : function(){
+ var c = this.collapsedEl, cm = this.cmargins;
+ switch(this.position){
+ case "west":
+ return [-(cm.right+c.getWidth()+cm.left), 0];
+ break;
+ case "east":
+ return [cm.right+c.getWidth()+cm.left, 0];
+ break;
+ case "north":
+ return [0, -(cm.top+cm.bottom+c.getHeight())];
+ break;
+ case "south":
+ return [0, cm.top+cm.bottom+c.getHeight()];
+ break;
+ }
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/*
+ * These classes are private internal classes
+ */
+Roo.CenterLayoutRegion = function(mgr, config){
+ Roo.LayoutRegion.call(this, mgr, config, "center");
+ this.visible = true;
+ this.minWidth = config.minWidth || 20;
+ this.minHeight = config.minHeight || 20;
+};
+
+Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
+ hide : function(){
+ // center panel can't be hidden
+ },
- /**
- * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
- * %0 is replaced with the number of selected rows.
- */
- ddText : "{0} selected row{1}",
+ show : function(){
+ // center panel can't be hidden
+ },
+ getMinWidth: function(){
+ return this.minWidth;
+ },
- /**
- * Called once after all setup has been completed and the grid is ready to be rendered.
- * @return {Roo.grid.Grid} this
- */
- render : function()
- {
- var c = this.container;
- // try to detect autoHeight/width mode
- if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
- this.autoHeight = true;
- }
- var view = this.getView();
- view.init(this);
+ getMinHeight: function(){
+ return this.minHeight;
+ }
+});
- c.on("click", this.onClick, this);
- c.on("dblclick", this.onDblClick, this);
- c.on("contextmenu", this.onContextMenu, this);
- c.on("keydown", this.onKeyDown, this);
- if (Roo.isTouch) {
- c.on("touchstart", this.onTouchStart, this);
- }
- this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
+Roo.NorthLayoutRegion = function(mgr, config){
+ Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.TOP;
+ this.split.orientation = Roo.SplitBar.VERTICAL;
+ this.split.el.addClass("x-layout-split-v");
+ }
+ var size = config.initialSize || config.height;
+ if(typeof size != "undefined"){
+ this.el.setHeight(size);
+ }
+};
+Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.VERTICAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ box.height += this.split.el.getHeight();
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ box.height -= this.split.el.getHeight();
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y+box.height);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.updateBody(box.width, null);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
- this.getSelectionModel().init(this);
+Roo.SouthLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.BOTTOM;
+ this.split.orientation = Roo.SplitBar.VERTICAL;
+ this.split.el.addClass("x-layout-split-v");
+ }
+ var size = config.initialSize || config.height;
+ if(typeof size != "undefined"){
+ this.el.setHeight(size);
+ }
+};
+Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.VERTICAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sh = this.split.el.getHeight();
+ box.height += sh;
+ box.y -= sh;
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sh = this.split.el.getHeight();
+ box.height -= sh;
+ box.y += sh;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y-sh);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.updateBody(box.width, null);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
- view.render();
+Roo.EastLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.RIGHT;
+ this.split.orientation = Roo.SplitBar.HORIZONTAL;
+ this.split.el.addClass("x-layout-split-h");
+ }
+ var size = config.initialSize || config.width;
+ if(typeof size != "undefined"){
+ this.el.setWidth(size);
+ }
+};
+Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.HORIZONTAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sw = this.split.el.getWidth();
+ box.width += sw;
+ box.x -= sw;
+ }
+ return box;
+ },
- if(this.loadMask){
- this.loadMask = new Roo.LoadMask(this.container,
- Roo.apply({store:this.dataSource}, this.loadMask));
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ box.x += sw;
}
-
-
- if (this.toolbar && this.toolbar.xtype) {
- this.toolbar.container = this.getView().getHeaderPanel(true);
- this.toolbar = new Roo.Toolbar(this.toolbar);
+ if(this.collapsed){
+ this.updateBody(null, box.height);
}
- if (this.footer && this.footer.xtype) {
- this.footer.dataSource = this.getDataSource();
- this.footer.container = this.getView().getFooterPanel(true);
- this.footer = Roo.factory(this.footer, Roo);
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+
+Roo.WestLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.LEFT;
+ this.split.orientation = Roo.SplitBar.HORIZONTAL;
+ this.split.el.addClass("x-layout-split-h");
+ }
+ var size = config.initialSize || config.width;
+ if(typeof size != "undefined"){
+ this.el.setWidth(size);
+ }
+};
+Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.HORIZONTAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
}
- if (this.dropTarget && this.dropTarget.xtype) {
- delete this.dropTarget.xtype;
- this.dropTarget = new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
+ var box = this.el.getBox();
+ if(this.split){
+ box.width += this.split.el.getWidth();
}
-
-
- this.rendered = true;
- this.fireEvent('render', this);
- return this;
+ return box;
},
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x+box.width);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ }
+ if(this.collapsed){
+ this.updateBody(null, box.height);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/*
+ * Private internal class for reading and applying state
+ */
+Roo.LayoutStateManager = function(layout){
+ // default empty state
+ this.state = {
+ north: {},
+ south: {},
+ east: {},
+ west: {}
+ };
+};
- /**
- * Reconfigures the grid to use a different Store and Column Model.
- * The View will be bound to the new objects and refreshed.
- * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
- * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
- */
- reconfigure : function(dataSource, colModel){
- if(this.loadMask){
- this.loadMask.destroy();
- this.loadMask = new Roo.LoadMask(this.container,
- Roo.apply({store:dataSource}, this.loadMask));
+Roo.LayoutStateManager.prototype = {
+ init : function(layout, provider){
+ this.provider = provider;
+ var state = provider.get(layout.id+"-layout-state");
+ if(state){
+ var wasUpdating = layout.isUpdating();
+ if(!wasUpdating){
+ layout.beginUpdate();
+ }
+ for(var key in state){
+ if(typeof state[key] != "function"){
+ var rstate = state[key];
+ var r = layout.getRegion(key);
+ if(r && rstate){
+ if(rstate.size){
+ r.resizeTo(rstate.size);
+ }
+ if(rstate.collapsed == true){
+ r.collapse(true);
+ }else{
+ r.expand(null, true);
+ }
+ }
+ }
+ }
+ if(!wasUpdating){
+ layout.endUpdate();
+ }
+ this.state = state;
}
- this.view.bind(dataSource, colModel);
- this.dataSource = dataSource;
- this.colModel = colModel;
- this.view.refresh(true);
+ this.layout = layout;
+ layout.on("regionresized", this.onRegionResized, this);
+ layout.on("regioncollapsed", this.onRegionCollapsed, this);
+ layout.on("regionexpanded", this.onRegionExpanded, this);
},
- /**
- * addColumns
- * Add's a column, default at the end..
-
- * @param {int} position to add (default end)
- * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel}
- */
- addColumns : function(pos, ar)
- {
-
- for (var i =0;i< ar.length;i++) {
- var cfg = ar[i];
- cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
- this.cm.lookup[cfg.id] = cfg;
+
+ storeState : function(){
+ this.provider.set(this.layout.id+"-layout-state", this.state);
+ },
+
+ onRegionResized : function(region, newSize){
+ this.state[region.getPosition()].size = newSize;
+ this.storeState();
+ },
+
+ onRegionCollapsed : function(region){
+ this.state[region.getPosition()].collapsed = true;
+ this.storeState();
+ },
+
+ onRegionExpanded : function(region){
+ this.state[region.getPosition()].collapsed = false;
+ this.storeState();
+ }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.panel.Content
+ * @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * A basic Content Panel 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|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 {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Roo.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) [required] 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.)
+ * @cfg {String} style Extra style to add to the content panel
+ * @cfg {Roo.menu.Menu} menu popup menu
+
+ * @constructor
+ * Create a new Content Panel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+Roo.panel.Content = function(el, config, content){
+
+ /*
+ if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ if (config && config.parentLayout) {
+ el = config.parentLayout.el.createChild();
+ }
+ */
+ if(el.autoCreate){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ this.el = Roo.get(el);
+ if(!this.el && config && config.autoCreate){
+ if(typeof config.autoCreate == "object"){
+ if(!config.autoCreate.id){
+ config.autoCreate.id = config.id||el;
+ }
+ this.el = Roo.DomHelper.append(document.body,
+ config.autoCreate, true);
+ }else{
+ this.el = Roo.DomHelper.append(document.body,
+ {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
}
+ }
+
+
+ this.closable = false;
+ this.loaded = false;
+ this.active = false;
+ if(typeof config == "string"){
+ this.title = config;
+ }else{
+ Roo.apply(this, config);
+ }
+
+ if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+ this.wrapEl = this.el.wrap();
+ this.toolbar.container = this.el.insertSibling(false, 'before');
+ this.toolbar = new Roo.Toolbar(this.toolbar);
+ }
+
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+ if (!this.wrapEl) {
+ this.wrapEl = this.el.wrap();
+ }
+
+ this.footer.container = this.wrapEl.createChild();
+
+ this.footer = Roo.factory(this.footer, Roo);
+ }
+
+ if(this.resizeEl){
+ this.resizeEl = Roo.get(this.resizeEl, true);
+ }else{
+ this.resizeEl = this.el;
+ }
+ // handle view.xtype
+
+
+
+
+ this.addEvents({
+ /**
+ * @event activate
+ * Fires when this panel is activated.
+ * @param {Roo.panel.Content} this
+ */
+ "activate" : true,
+ /**
+ * @event deactivate
+ * Fires when this panel is activated.
+ * @param {Roo.panel.Content} this
+ */
+ "deactivate" : true,
+
+ /**
+ * @event resize
+ * Fires when this panel is resized if fitToFrame is true.
+ * @param {Roo.panel.Content} this
+ * @param {Number} width The width after any component adjustments
+ * @param {Number} height The height after any component adjustments
+ */
+ "resize" : true,
- if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
- pos = this.cm.config.length; //this.cm.config.push(cfg);
- }
- pos = Math.max(0,pos);
- ar.unshift(0);
- ar.unshift(pos);
- this.cm.config.splice.apply(this.cm.config, ar);
-
-
-
- this.view.generateRules(this.cm);
- this.view.refresh(true);
+ /**
+ * @event render
+ * Fires when this tab is created
+ * @param {Roo.panel.Content} 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);
+ });
+ }
+ content = content || this.content;
+ if(content){
+ this.setContent(content);
+ }
+ if(config && config.url){
+ this.setUrl(this.url, this.params, this.loadOnce);
+ }
+ Roo.panel.Content.superclass.constructor.call(this);
- // private
- onKeyDown : function(e){
- this.fireEvent("keydown", e);
- },
+ if (this.view && typeof(this.view.xtype) != 'undefined') {
+ this.view.el = this.el.appendChild(document.createElement("div"));
+ this.view = Roo.factory(this.view);
+ this.view.render && this.view.render(false, '');
+ }
+
+
+ this.fireEvent('render', this);
+};
+Roo.extend(Roo.panel.Content, Roo.util.Observable, {
+ tabTip:'',
+ setRegion : function(region){
+ this.region = region;
+ if(region){
+ this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
+ }else{
+ this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
+ }
+ },
+
/**
- * Destroy this grid.
- * @param {Boolean} removeEl True to remove the element
+ * Returns the toolbar for this Panel if one was configured.
+ * @return {Roo.Toolbar}
*/
- destroy : function(removeEl, keepListeners){
- if(this.loadMask){
- this.loadMask.destroy();
- }
- var c = this.container;
- c.removeAllListeners();
- this.view.destroy();
- this.colModel.purgeListeners();
- if(!keepListeners){
- this.purgeListeners();
- }
- c.update("");
- if(removeEl === true){
- c.remove();
- }
+ getToolbar : function(){
+ return this.toolbar;
},
-
- // private
- processEvent : function(name, e){
- // does this fire select???
- //Roo.log('grid:processEvent ' + name);
-
- if (name != 'touchstart' ) {
- this.fireEvent(name, e);
- }
-
- var t = e.getTarget();
- var v = this.view;
- var header = v.findHeaderIndex(t);
- if(header !== false){
- var ename = name == 'touchstart' ? 'click' : name;
-
- this.fireEvent("header" + ename, this, header, e);
+
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent("deactivate", this);
}else{
- var row = v.findRowIndex(t);
- var cell = v.findCellIndex(t);
- if (name == 'touchstart') {
- // first touch is always a click.
- // hopefull this happens after selection is updated.?
- name = false;
-
- if (typeof(this.selModel.getSelectedCell) != 'undefined') {
- var cs = this.selModel.getSelectedCell();
- if (row == cs[0] && cell == cs[1]){
- name = 'dblclick';
- }
- }
- if (typeof(this.selModel.getSelections) != 'undefined') {
- var cs = this.selModel.getSelections();
- var ds = this.dataSource;
- if (cs.length == 1 && ds.getAt(row) == cs[0]){
- name = 'dblclick';
- }
- }
- if (!name) {
- return;
- }
- }
-
-
- if(row !== false){
- this.fireEvent("row" + name, this, row, e);
- if(cell !== false){
- this.fireEvent("cell" + name, this, row, cell, e);
- }
- }
+ this.fireEvent("activate", this);
}
},
-
- // private
- onClick : function(e){
- this.processEvent("click", e);
- },
- // private
- onTouchStart : function(e){
- this.processEvent("touchstart", e);
- },
-
- // private
- onContextMenu : function(e, t){
- this.processEvent("contextmenu", e);
- },
-
- // private
- onDblClick : function(e){
- this.processEvent("dblclick", e);
+ /**
+ * Updates this panel's element
+ * @param {String} content The new content
+ * @param {Boolean} loadScripts (optional) true to look for and process scripts
+ */
+ setContent : function(content, loadScripts){
+ this.el.update(content, loadScripts);
},
- // private
- walkCells : function(row, col, step, fn, scope){
- var cm = this.colModel, clen = cm.getColumnCount();
- var ds = this.dataSource, rlen = ds.getCount(), first = true;
- if(step < 0){
- if(col < 0){
- row--;
- first = false;
- }
- while(row >= 0){
- if(!first){
- col = clen-1;
- }
- first = false;
- while(col >= 0){
- if(fn.call(scope || this, row, col, cm) === true){
- return [row, col];
- }
- col--;
- }
- row--;
- }
- } else {
- if(col >= clen){
- row++;
- first = false;
- }
- while(row < rlen){
- if(!first){
- col = 0;
- }
- first = false;
- while(col < clen){
- if(fn.call(scope || this, row, col, cm) === true){
- return [row, col];
- }
- col++;
- }
- row++;
- }
+ ignoreResize : function(w, h){
+ if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
+ return true;
+ }else{
+ this.lastSize = {width: w, height: h};
+ return false;
}
- return null;
- },
-
- // private
- getSelections : function(){
- return this.selModel.getSelections();
},
-
/**
- * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
- * but if manual update is required this method will initiate it.
+ * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
+ * @return {Roo.UpdateManager} The UpdateManager
*/
- autoSize : function(){
- if(this.rendered){
- this.view.layout();
- if(this.view.adjustForScroll){
- this.view.adjustForScroll();
- }
- }
+ getUpdateManager : function(){
+ return this.el.getUpdateManager();
},
-
- /**
- * Returns the grid's underlying element.
- * @return {Element} The element
+ /**
+ * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
+ * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
+<pre><code>
+panel.load({
+ url: "your-url.php",
+ params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+ callback: yourFunction,
+ scope: yourObject, //(optional scope)
+ discardUrl: false,
+ nocache: false,
+ text: "Loading...",
+ timeout: 30,
+ scripts: false
+});
+</code></pre>
+ * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
+ * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
+ * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
+ * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
+ * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+ * @return {Roo.panel.Content} this
*/
- getGridEl : function(){
- return this.container;
+ load : function(){
+ var um = this.el.getUpdateManager();
+ um.update.apply(um, arguments);
+ return this;
},
- // private for compatibility, overridden by editor grid
- stopEditing : function(){},
/**
- * Returns the grid's SelectionModel.
- * @return {SelectionModel}
+ * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
+ * @param {String/Function} url The URL to load the content from or a function to call to get the URL
+ * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+ * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+ * @return {Roo.UpdateManager} The UpdateManager
*/
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.grid.RowSelectionModel();
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.removeListener("activate", this.refreshDelegate);
}
- return this.selModel;
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on("activate", this.refreshDelegate);
+ return this.el.getUpdateManager();
},
-
- /**
- * Returns the grid's DataSource.
- * @return {DataSource}
- */
- getDataSource : function(){
- return this.dataSource;
+
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.el.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
+ }
},
-
+
+ _setLoaded : function(){
+ this.loaded = true;
+ },
+
/**
- * Returns the grid's ColumnModel.
- * @return {ColumnModel}
+ * Returns this panel's id
+ * @return {String}
*/
- getColumnModel : function(){
- return this.colModel;
+ getId : function(){
+ return this.el.id;
},
-
- /**
- * Returns the grid's GridView object.
- * @return {GridView}
+
+ /**
+ * Returns this panel's element - used by regiosn to add.
+ * @return {Roo.Element}
*/
- getView : function(){
- if(!this.view){
- this.view = new Roo.grid.GridView(this.viewConfig);
- this.relayEvents(this.view, [
- "beforerowremoved", "beforerowsinserted",
- "beforerefresh", "rowremoved",
- "rowsinserted", "rowupdated" ,"refresh"
- ]);
+ getEl : function(){
+ return this.wrapEl || this.el;
+ },
+
+ adjustForComponents : function(width, height)
+ {
+ //Roo.log('adjustForComponents ');
+ if(this.resizeEl != this.el){
+ width -= this.el.getFrameWidth('lr');
+ height -= this.el.getFrameWidth('tb');
+ }
+ if(this.toolbar){
+ var te = this.toolbar.getEl();
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+ if(this.footer){
+ var te = this.footer.getEl();
+ //Roo.log("footer:" + te.getHeight());
+
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+
+
+ if(this.adjustments){
+ width += this.adjustments[0];
+ height += this.adjustments[1];
+ }
+ return {"width": width, "height": height};
+ },
+
+ setSize : function(width, height){
+ if(this.fitToFrame && !this.ignoreResize(width, height)){
+ if(this.fitContainer && this.resizeEl != this.el){
+ this.el.setSize(width, height);
+ }
+ var size = this.adjustForComponents(width, height);
+ this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
+ this.fireEvent('resize', this, size.width, size.height);
}
- return this.view;
},
+
/**
- * Called to get grid's drag proxy text, by default returns this.ddText.
- * Override this to put something different in the dragged text.
- * @return {String}
+ * Returns this panel's title
+ * @return {String}
*/
- getDragDropText : function(){
- var count = this.selModel.getCount();
- return String.format(this.ddText, count, count == 1 ? '' : 's');
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- /**
- * @class Roo.grid.AbstractGridView
- * @extends Roo.util.Observable
- * @abstract
- * Abstract base class for grid Views
- * @constructor
- */
-Roo.grid.AbstractGridView = function(){
- this.grid = null;
-
- this.events = {
- "beforerowremoved" : true,
- "beforerowsinserted" : true,
- "beforerefresh" : true,
- "rowremoved" : true,
- "rowsinserted" : true,
- "rowupdated" : true,
- "refresh" : true
- };
- Roo.grid.AbstractGridView.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
- rowClass : "x-grid-row",
- cellClass : "x-grid-cell",
- tdClass : "x-grid-td",
- hdClass : "x-grid-hd",
- splitClass : "x-grid-hd-split",
+ getTitle : function(){
+ return this.title;
+ },
- init: function(grid){
- this.grid = grid;
- var cid = this.grid.getGridEl().id;
- this.colSelector = "#" + cid + " ." + this.cellClass + "-";
- this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
- this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
- this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
- },
-
- getColumnRenderers : function(){
- var renderers = [];
- var cm = this.grid.colModel;
- var colCount = cm.getColumnCount();
- for(var i = 0; i < colCount; i++){
- renderers[i] = cm.getRenderer(i);
+ /**
+ * Set this panel's title
+ * @param {String} title
+ */
+ setTitle : function(title){
+ this.title = title;
+ if(this.region){
+ this.region.updatePanelTitle(this, title);
}
- return renderers;
},
- getColumnIds : function(){
- var ids = [];
- var cm = this.grid.colModel;
- var colCount = cm.getColumnCount();
- for(var i = 0; i < colCount; i++){
- ids[i] = cm.getColumnId(i);
- }
- return ids;
+ /**
+ * Returns true is this panel was configured to be closable
+ * @return {Boolean}
+ */
+ isClosable : function(){
+ return this.closable;
+ },
+
+ beforeSlide : function(){
+ this.el.clip();
+ this.resizeEl.clip();
},
- getDataIndexes : function(){
- if(!this.indexMap){
- this.indexMap = this.buildIndexMap();
- }
- return this.indexMap.colToData;
+ afterSlide : function(){
+ this.el.unclip();
+ this.resizeEl.unclip();
},
- getColumnIndexByDataIndex : function(dataIndex){
- if(!this.indexMap){
- this.indexMap = this.buildIndexMap();
+ /**
+ * Force a content refresh from the URL specified in the {@link #setUrl} method.
+ * Will fail silently if the {@link #setUrl} method has not been called.
+ * This does not activate the panel, just updates its content.
+ */
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
}
- return this.indexMap.dataToCol[dataIndex];
},
/**
- * Set a css style for a column dynamically.
- * @param {Number} colIndex The index of the column
- * @param {String} name The css property name
- * @param {String} value The css value
+ * Destroys this panel
*/
- setCSSStyle : function(colIndex, name, value){
- var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
- Roo.util.CSS.updateRule(selector, name, value);
+ destroy : function(){
+ this.el.removeAllListeners();
+ var tempEl = document.createElement("span");
+ tempEl.appendChild(this.el.dom);
+ tempEl.innerHTML = "";
+ this.el.remove();
+ this.el = null;
},
- generateRules : function(cm){
- var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
- Roo.util.CSS.removeStyleSheet(rulesId);
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var cid = cm.getColumnId(i);
- ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
- this.tdSelector, cid, " {\n}\n",
- this.hdSelector, cid, " {\n}\n",
- this.splitSelector, cid, " {\n}\n");
- }
- return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ /**
+ * 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>
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.HeaderDragZone = function(grid, hd, hd2){
- this.grid = grid;
- this.view = grid.getView();
- this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
- Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
- if(hd2){
- this.setHandleElId(Roo.id(hd));
- this.setOuterHandleElId(Roo.id(hd2));
- }
- this.scroll = false;
-};
-Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
- maxDragWidth: 120,
- getDragData : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var h = this.view.findHeaderCell(t);
- if(h){
- return {ddel: h.firstChild, header:h};
- }
- return false;
- },
+layout.addxtype({
+ xtype : 'Form',
+ items: [ .... ]
+ }
+);
- onInitDrag : function(e){
- this.view.headersDisabled = true;
- var clone = this.dragData.ddel.cloneNode(true);
- clone.id = Roo.id();
- clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
- this.proxy.update(clone);
- return true;
- },
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+
+ addxtype : function(cfg) {
+ if(cfg.xtype.match(/^Cropbox$/)) {
- afterValidDrop : function(){
- var v = this.view;
- setTimeout(function(){
- v.headersDisabled = false;
- }, 50);
- },
+ this.cropbox = new Roo.factory(cfg);
- afterInvalidDrop : function(){
- var v = this.view;
- setTimeout(function(){
- v.headersDisabled = false;
- }, 50);
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.HeaderDropZone = function(grid, hd, hd2){
- this.grid = grid;
- this.view = grid.getView();
- // split the proxies so they don't interfere with mouse events
- this.proxyTop = Roo.DomHelper.append(document.body, {
- cls:"col-move-top", html:" "
- }, true);
- this.proxyBottom = Roo.DomHelper.append(document.body, {
- cls:"col-move-bottom", html:" "
- }, true);
- this.proxyTop.hide = this.proxyBottom.hide = function(){
- this.setLeftTop(-100,-100);
- this.setStyle("visibility", "hidden");
- };
- this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
- // temporarily disabled
- //Roo.dd.ScrollManager.register(this.view.scroller.dom);
- Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
-};
-Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
- proxyOffsets : [-4, -9],
- fly: Roo.Element.fly,
+ this.cropbox.render(this.el);
- getTargetFromEvent : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var cindex = this.view.findCellIndex(t);
- if(cindex !== false){
- return this.view.getHeaderCell(cindex);
+ return this.cropbox;
}
- return null;
- },
+ // add form..
+ if (cfg.xtype.match(/^Form$/)) {
+
+ var el;
+ //if (this.footer) {
+ // el = this.footer.container.insertSibling(false, 'before');
+ //} else {
+ el = this.el.createChild();
+ //}
- nextVisible : function(h){
- var v = this.view, cm = this.grid.colModel;
- h = h.nextSibling;
- while(h){
- if(!cm.isHidden(v.getCellIndex(h))){
- return h;
+ this.form = new Roo.form.Form(cfg);
+
+
+ if ( this.form.allItems.length) {
+ this.form.render(el.dom);
}
- h = h.nextSibling;
+ return this.form;
}
- return null;
- },
-
- prevVisible : function(h){
- var v = this.view, cm = this.grid.colModel;
- h = h.prevSibling;
- while(h){
- if(!cm.isHidden(v.getCellIndex(h))){
- return h;
- }
- h = h.prevSibling;
+ // should only have one of theses..
+ if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
+ // views.. should not be just added - used named prop 'view''
+
+ cfg.el = this.el.appendChild(document.createElement("div"));
+ // factory?
+
+ var ret = new Roo.factory(cfg);
+
+ ret.render && ret.render(false, ''); // render blank..
+ this.view = ret;
+ return ret;
}
- return null;
- },
+ return false;
+ }
+});
- positionIndicator : function(h, n, e){
- var x = Roo.lib.Event.getPageX(e);
- var r = Roo.lib.Dom.getRegion(n.firstChild);
- var px, pt, py = r.top + this.proxyOffsets[1];
- if((r.right - x) <= (r.right-r.left)/2){
- px = r.right+this.view.borderWidth;
- pt = "after";
- }else{
- px = r.left;
- pt = "before";
- }
- var oldIndex = this.view.getCellIndex(h);
- var newIndex = this.view.getCellIndex(n);
- if(this.grid.colModel.isFixed(newIndex)){
- return false;
- }
- var locked = this.grid.colModel.isLocked(newIndex);
- if(pt == "after"){
- newIndex++;
- }
- if(oldIndex < newIndex){
- newIndex--;
- }
- if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
- return false;
- }
- px += this.proxyOffsets[0];
- this.proxyTop.setLeftTop(px, py);
- this.proxyTop.show();
- if(!this.bottomOffset){
- this.bottomOffset = this.view.mainHd.getHeight();
- }
- this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
- this.proxyBottom.show();
- return pt;
- },
- onNodeEnter : function(n, dd, e, data){
- if(data.header != n){
- this.positionIndicator(data.header, n, e);
- }
- },
- onNodeOver : function(n, dd, e, data){
- var result = false;
- if(data.header != n){
- result = this.positionIndicator(data.header, n, e);
- }
- if(!result){
- this.proxyTop.hide();
- this.proxyBottom.hide();
- }
- return result ? this.dropAllowed : this.dropNotAllowed;
- },
- onNodeOut : function(n, dd, e, data){
- this.proxyTop.hide();
- this.proxyBottom.hide();
- },
- onNodeDrop : function(n, dd, e, data){
- var h = data.header;
- if(h != n){
- var cm = this.grid.colModel;
- var x = Roo.lib.Event.getPageX(e);
- var r = Roo.lib.Dom.getRegion(n.firstChild);
- var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
- var oldIndex = this.view.getCellIndex(h);
- var newIndex = this.view.getCellIndex(n);
- var locked = cm.isLocked(newIndex);
- if(pt == "after"){
- newIndex++;
- }
- if(oldIndex < newIndex){
- newIndex--;
- }
- if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
- return false;
- }
- cm.setLocked(oldIndex, locked, true);
- cm.moveColumn(oldIndex, newIndex);
- this.grid.fireEvent("columnmove", oldIndex, newIndex);
- return true;
+
+
+
+
+/**
+ * @class Roo.panel.Grid
+ * @extends Roo.panel.Content
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @constructor
+ * Create a new GridPanel.
+ * @cfg {Roo.grid.Grid} grid The grid for this panel
+ */
+Roo.panel.Grid = function(grid, config){
+
+ // universal ctor...
+ if (typeof(grid.grid) != 'undefined') {
+ config = grid;
+ grid = config.grid;
+ }
+ this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
+ {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
+
+ this.wrapper.dom.appendChild(grid.getGridEl().dom);
+
+ Roo.panel.Grid.superclass.constructor.call(this, this.wrapper, config);
+
+ if(this.toolbar){
+ this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
+ }
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+
+ this.footer.container = this.grid.getView().getFooterPanel(true);
+ this.footer.dataSource = this.grid.dataSource;
+ this.footer = Roo.factory(this.footer, Roo);
+
+ }
+
+ grid.monitorWindowResize = false; // turn off autosizing
+ grid.autoHeight = false;
+ grid.autoWidth = false;
+ this.grid = grid;
+ this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
+};
+
+Roo.extend(Roo.panel.Grid, Roo.panel.Content, {
+ getId : function(){
+ return this.grid.id;
+ },
+
+ /**
+ * Returns the grid for this panel
+ * @return {Roo.grid.Grid}
+ */
+ getGrid : function(){
+ return this.grid;
+ },
+
+ setSize : function(width, height){
+ if(!this.ignoreResize(width, height)){
+ var grid = this.grid;
+ var size = this.adjustForComponents(width, height);
+ grid.getGridEl().setSize(size.width, size.height);
+ grid.autoSize();
}
- return false;
+ },
+
+ beforeSlide : function(){
+ this.grid.getView().scroller.clip();
+ },
+
+ afterSlide : function(){
+ this.grid.getView().scroller.unclip();
+ },
+
+ destroy : function(){
+ this.grid.destroy();
+ delete this.grid;
+ Roo.panel.Grid.superclass.destroy.call(this);
}
});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+
+
/**
- * @class Roo.grid.GridView
- * @extends Roo.util.Observable
+ * @class Roo.panel.NestedLayout
+ * @extends Roo.panel.Content
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @cfg {Roo.BorderLayout} layout [required] The layout for this panel
*
+ *
* @constructor
- * @param {Object} config
+ * Create a new NestedLayoutPanel.
+ *
+ *
+ * @param {Roo.BorderLayout} layout [required] The layout for this panel
+ * @param {String/Object} config A string to set only the title or a config object
*/
-Roo.grid.GridView = function(config){
- Roo.grid.GridView.superclass.constructor.call(this);
- this.el = null;
-
- Roo.apply(this, config);
+Roo.panel.NestedLayout = function(layout, config)
+{
+ // construct with only one argument..
+ /* FIXME - implement nicer consturctors
+ if (layout.layout) {
+ config = layout;
+ layout = config.layout;
+ delete config.layout;
+ }
+ if (layout.xtype && !layout.getEl) {
+ // then layout needs constructing..
+ layout = Roo.factory(layout, Roo);
+ }
+ */
+
+
+ Roo.panel.NestedLayout.superclass.constructor.call(this, layout.getEl(), config);
+
+ layout.monitorWindowResize = false; // turn off autosizing
+ this.layout = layout;
+ this.layout.getEl().addClass("x-layout-nested-layout");
+
+
+
+
};
-Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
+Roo.extend(Roo.panel.NestedLayout, Roo.panel.Content, {
- unselectable : 'unselectable="on"',
- unselectableCls : 'x-unselectable',
+ layout : false,
+
+ setSize : function(width, height){
+ if(!this.ignoreResize(width, height)){
+ var size = this.adjustForComponents(width, height);
+ var el = this.layout.getEl();
+ el.setSize(size.width, size.height);
+ var touch = el.dom.offsetWidth;
+ this.layout.layout();
+ // ie requires a double layout on the first pass
+ if(Roo.isIE && !this.initialized){
+ this.initialized = true;
+ this.layout.layout();
+ }
+ }
+ },
+ // activate all subpanels if not currently active..
- rowClass : "x-grid-row",
-
- cellClass : "x-grid-col",
-
- tdClass : "x-grid-td",
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent("deactivate", this);
+ return;
+ }
+
+ this.fireEvent("activate", this);
+ // not sure if this should happen before or after..
+ if (!this.layout) {
+ return; // should not happen..
+ }
+ var reg = false;
+ for (var r in this.layout.regions) {
+ reg = this.layout.getRegion(r);
+ if (reg.getActivePanel()) {
+ //reg.showPanel(reg.getActivePanel()); // force it to activate..
+ reg.setActivePanel(reg.getActivePanel());
+ continue;
+ }
+ if (!reg.panels.length) {
+ continue;
+ }
+ reg.showPanel(reg.getPanel(0));
+ }
+
+
+
+
+ },
+
+ /**
+ * Returns the nested BorderLayout for this panel
+ * @return {Roo.BorderLayout}
+ */
+ getLayout : function(){
+ return this.layout;
+ },
+
+ /**
+ * Adds a xtype elements to the layout of the nested panel
+ * <pre><code>
- hdClass : "x-grid-hd",
+panel.addxtype({
+ xtype : 'ContentPanel',
+ region: 'west',
+ items: [ .... ]
+ }
+);
- splitClass : "x-grid-split",
+panel.addxtype({
+ xtype : 'panel.NestedLayout',
+ region: 'west',
+ layout: {
+ center: { },
+ west: { }
+ },
+ items : [ ... list of content panels or nested layout panels.. ]
+ }
+);
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+ addxtype : function(cfg) {
+ return this.layout.addxtype(cfg);
+
+ }
+});
- sortClasses : ["sort-asc", "sort-desc"],
+Roo.ScrollPanel = function(el, config, content){
+ config = config || {};
+ config.fitToFrame = true;
+ Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
+
+ this.el.dom.style.overflow = "hidden";
+ var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
+ this.el.removeClass("x-layout-inactive-content");
+ this.el.on("mousewheel", this.onWheel, this);
- enableMoveAnim : false,
+ var up = wrap.createChild({cls: "x-scroller-up", html: " "}, this.el.dom);
+ var down = wrap.createChild({cls: "x-scroller-down", html: " "});
+ up.unselectable(); down.unselectable();
+ up.on("click", this.scrollUp, this);
+ down.on("click", this.scrollDown, this);
+ up.addClassOnOver("x-scroller-btn-over");
+ down.addClassOnOver("x-scroller-btn-over");
+ up.addClassOnClick("x-scroller-btn-click");
+ down.addClassOnClick("x-scroller-btn-click");
+ this.adjustments = [0, -(up.getHeight() + down.getHeight())];
- hlColor: "C3DAF9",
+ this.resizeEl = this.el;
+ this.el = wrap; this.up = up; this.down = down;
+};
- dh : Roo.DomHelper,
+Roo.extend(Roo.ScrollPanel, Roo.panel.Content, {
+ increment : 100,
+ wheelIncrement : 5,
+ scrollUp : function(){
+ this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
+ },
- fly : Roo.Element.fly,
+ scrollDown : function(){
+ this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
+ },
- css : Roo.util.CSS,
+ afterScroll : function(){
+ var el = this.resizeEl;
+ var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
+ this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ },
- borderWidth: 1,
+ setSize : function(){
+ Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
+ this.afterScroll();
+ },
- splitOffset: 3,
+ onWheel : function(e){
+ var d = e.getWheelDelta();
+ this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
+ this.afterScroll();
+ e.stopEvent();
+ },
- scrollIncrement : 22,
+ setContent : function(content, loadScripts){
+ this.resizeEl.update(content, loadScripts);
+ }
- cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
+});
- findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
- bind : function(ds, cm){
- if(this.ds){
- this.ds.un("load", this.onLoad, this);
- this.ds.un("datachanged", this.onDataChange, this);
- this.ds.un("add", this.onAdd, this);
- this.ds.un("remove", this.onRemove, this);
- this.ds.un("update", this.onUpdate, this);
- this.ds.un("clear", this.onClear, this);
- }
- if(ds){
- ds.on("load", this.onLoad, this);
- ds.on("datachanged", this.onDataChange, this);
- ds.on("add", this.onAdd, this);
- ds.on("remove", this.onRemove, this);
- ds.on("update", this.onUpdate, this);
- ds.on("clear", this.onClear, this);
- }
- this.ds = ds;
- if(this.cm){
- this.cm.un("widthchange", this.onColWidthChange, this);
- this.cm.un("headerchange", this.onHeaderChange, this);
- this.cm.un("hiddenchange", this.onHiddenChange, this);
- this.cm.un("columnmoved", this.onColumnMove, this);
- this.cm.un("columnlockchange", this.onColumnLock, this);
- }
- if(cm){
- this.generateRules(cm);
- cm.on("widthchange", this.onColWidthChange, this);
- cm.on("headerchange", this.onHeaderChange, this);
- cm.on("hiddenchange", this.onHiddenChange, this);
- cm.on("columnmoved", this.onColumnMove, this);
- cm.on("columnlockchange", this.onColumnLock, this);
+/**
+ * @class Roo.panel.Tree
+ * @extends Roo.panel.Content
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * Treepanel component
+ *
+ * @constructor
+ * Create a new TreePanel. - defaults to fit/scoll contents.
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ */
+Roo.panel.Tree = function(config){
+ var el = config.el;
+ var tree = config.tree;
+ delete config.tree;
+ delete config.el; // hopefull!
+
+ // wrapper for IE7 strict & safari scroll issue
+
+ var treeEl = el.createChild();
+ config.resizeEl = treeEl;
+
+
+
+ Roo.panel.Tree.superclass.constructor.call(this, el, config);
+
+
+ this.tree = new Roo.tree.TreePanel(treeEl , tree);
+ //console.log(tree);
+ this.on('activate', function()
+ {
+ if (this.tree.rendered) {
+ return;
}
- this.cm = cm;
- },
-
- init: function(grid){
- Roo.grid.GridView.superclass.init.call(this, grid);
-
- this.bind(grid.dataSource, grid.colModel);
+ //console.log('render tree');
+ this.tree.render();
+ });
+ // this should not be needed.. - it's actually the 'el' that resizes?
+ // actuall it breaks the containerScroll - dragging nodes auto scroll at top
+
+ //this.on('resize', function (cp, w, h) {
+ // this.tree.innerCt.setWidth(w);
+ // this.tree.innerCt.setHeight(h);
+ // //this.tree.innerCt.setStyle('overflow-y', 'auto');
+ //});
- grid.on("headerclick", this.handleHeaderClick, this);
+
+
+};
- if(grid.trackMouseOver){
- grid.on("mouseover", this.onRowOver, this);
- grid.on("mouseout", this.onRowOut, this);
- }
- grid.cancelTextSelection = function(){};
- this.gridId = grid.id;
+Roo.extend(Roo.panel.Tree, Roo.panel.Content, {
+ fitToFrame : true,
+ autoScroll : true,
+ /*
+ * @cfg {Roo.tree.panel.Tree} tree [required] The tree TreePanel, with config etc.
+ */
+ tree : false
- var tpls = this.templates || {};
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
- 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-header">{lockedHeader}</div>',
- '<div class="x-grid-body">{lockedBody}</div>',
- "</div>",
- '<div class="x-grid-viewport">',
- '<div class="x-grid-header">{header}</div>',
- '<div class="x-grid-body">{body}</div>',
- "</div>",
- '<div class="x-grid-bottombar"></div>',
-
- '<div class="x-grid-resize-proxy"> </div>',
- "</div>"
- );
- tpls.master.disableformats = true;
- }
+/**
+ * @class Roo.ReaderLayout
+ * @extends Roo.BorderLayout
+ * This is a pre-built layout that represents a classic, 5-pane application. It consists of a header, a primary
+ * center region containing two nested regions (a top one for a list view and one for item preview below),
+ * and regions on either side that can be used for navigation, application commands, informational displays, etc.
+ * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
+ * expedites the setup of the overall layout and regions for this common application style.
+ * Example:
+ <pre><code>
+var reader = new Roo.ReaderLayout();
+var CP = Roo.panel.Content; // shortcut for adding
- if(!tpls.header){
- tpls.header = new Roo.Template(
- '<table border="0" cellspacing="0" cellpadding="0">',
- '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
- "</table>{splits}"
- );
- tpls.header.disableformats = true;
- }
- tpls.header.compile();
+reader.beginUpdate();
+reader.add("north", new CP("north", "North"));
+reader.add("west", new CP("west", {title: "West"}));
+reader.add("east", new CP("east", {title: "East"}));
- if(!tpls.hcell){
- tpls.hcell = new Roo.Template(
- '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
- '<div class="x-grid-hd-text ' + this.unselectableCls + '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
- "</div></td>"
- );
- tpls.hcell.disableFormats = true;
- }
- tpls.hcell.compile();
+reader.regions.listView.add(new CP("listView", "List"));
+reader.regions.preview.add(new CP("preview", "Preview"));
+reader.endUpdate();
+</code></pre>
+* @constructor
+* Create a new ReaderLayout
+* @param {Object} config Configuration options
+* @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
+* document.body if omitted)
+*/
+Roo.ReaderLayout = function(config, renderTo){
+ var c = config || {size:{}};
+ Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
+ north: c.north !== false ? Roo.apply({
+ split:false,
+ initialSize: 32,
+ titlebar: false
+ }, c.north) : false,
+ west: c.west !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ animate: true,
+ margins:{left:5,right:0,bottom:5,top:5},
+ cmargins:{left:5,right:5,bottom:5,top:5}
+ }, c.west) : false,
+ east: c.east !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ animate: true,
+ margins:{left:0,right:5,bottom:5,top:5},
+ cmargins:{left:5,right:5,bottom:5,top:5}
+ }, c.east) : false,
+ center: Roo.apply({
+ tabPosition: 'top',
+ autoScroll:false,
+ closeOnTab: true,
+ titlebar:false,
+ margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
+ }, c.center)
+ });
- if(!tpls.hsplit){
- tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
- this.unselectableCls + '" ' + this.unselectable +'> </div>');
- tpls.hsplit.disableFormats = true;
- }
- tpls.hsplit.compile();
+ this.el.addClass('x-reader');
- if(!tpls.body){
- tpls.body = new Roo.Template(
- '<table border="0" cellspacing="0" cellpadding="0">',
- "<tbody>{rows}</tbody>",
- "</table>"
- );
- tpls.body.disableFormats = true;
- }
- tpls.body.compile();
+ this.beginUpdate();
- if(!tpls.row){
- tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
- tpls.row.disableFormats = true;
- }
- tpls.row.compile();
+ var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
+ south: c.preview !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 100,
+ autoScroll:true,
+ collapsible:true,
+ titlebar: true,
+ cmargins:{top:5,left:0, right:0, bottom:0}
+ }, c.preview) : false,
+ center: Roo.apply({
+ autoScroll:false,
+ titlebar:false,
+ minHeight:200
+ }, c.listView)
+ });
+ this.add('center', new Roo.panel.NestedLayout(inner,
+ Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
- if(!tpls.cell){
- tpls.cell = new Roo.Template(
- '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
- '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
- this.unselectableCls + '" ' + this.unselectable +'" {attr}>{value}</div></div>',
- "</td>"
- );
- tpls.cell.disableFormats = true;
- }
- tpls.cell.compile();
+ this.endUpdate();
- this.templates = tpls;
- },
+ this.regions.preview = inner.getRegion('south');
+ this.regions.listView = inner.getRegion('center');
+};
- // remap these for backwards compat
- onColWidthChange : function(){
- this.updateColumns.apply(this, arguments);
- },
- onHeaderChange : function(){
- this.updateHeaders.apply(this, arguments);
- },
- onHiddenChange : function(){
- this.handleHiddenChange.apply(this, arguments);
- },
- onColumnMove : function(){
- this.handleColumnMove.apply(this, arguments);
- },
- onColumnLock : function(){
- this.handleLockChange.apply(this, arguments);
- },
+Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.Grid
+ * @extends Roo.util.Observable
+ * This class represents the primary interface of a component based grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.Grid("my-container-id", {
+ ds: myDataStore,
+ cm: myColModel,
+ selModel: mySelectionModel,
+ autoSizeColumns: true,
+ monitorWindowResize: false,
+ trackMouseOver: true
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+ * <b>Common Problems:</b><br/>
+ * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
+ * element will correct this<br/>
+ * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
+ * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
+ * are unpredictable.<br/>
+ * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
+ * grid to calculate dimensions/offsets.<br/>
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.Grid = function(container, config){
+ // initialize the container
+ this.container = Roo.get(container);
+ this.container.update("");
+ this.container.setStyle("overflow", "hidden");
+ this.container.addClass('x-grid-container');
- onDataChange : function(){
- this.refresh();
- this.updateHeaderSortState();
- },
+ this.id = this.container.id;
- onClear : function(){
- this.refresh();
- },
+ Roo.apply(this, config);
+ // check and correct shorthanded configs
+ if(this.ds){
+ this.dataSource = this.ds;
+ delete this.ds;
+ }
+ if(this.cm){
+ this.colModel = this.cm;
+ delete this.cm;
+ }
+ if(this.sm){
+ this.selModel = this.sm;
+ delete this.sm;
+ }
- onUpdate : function(ds, record){
- this.refreshRow(record);
- },
+ if (this.selModel) {
+ this.selModel = Roo.factory(this.selModel, Roo.grid);
+ this.sm = this.selModel;
+ this.sm.xmodule = this.xmodule || false;
+ }
+ if (typeof(this.colModel.config) == 'undefined') {
+ this.colModel = new Roo.grid.ColumnModel(this.colModel);
+ this.cm = this.colModel;
+ this.cm.xmodule = this.xmodule || false;
+ }
+ if (this.dataSource) {
+ this.dataSource= Roo.factory(this.dataSource, Roo.data);
+ this.ds = this.dataSource;
+ this.ds.xmodule = this.xmodule || false;
+
+ }
+
+
+
+ if(this.width){
+ this.container.setWidth(this.width);
+ }
- refreshRow : function(record){
- var ds = this.ds, index;
- if(typeof record == 'number'){
- index = record;
- record = ds.getAt(index);
- }else{
- index = ds.indexOf(record);
- }
- this.insertRows(ds, index, index, true);
- this.onRemove(ds, record, index+1, true);
- this.syncRowHeights(index, index);
- this.layout();
- this.fireEvent("rowupdated", this, index, record);
- },
+ if(this.height){
+ this.container.setHeight(this.height);
+ }
+ /** @private */
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true,
+ /**
+ * @event dblclick
+ * The raw dblclick event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "dblclick" : true,
+ /**
+ * @event contextmenu
+ * The raw contextmenu event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "contextmenu" : true,
+ /**
+ * @event mousedown
+ * The raw mousedown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mousedown" : true,
+ /**
+ * @event mouseup
+ * The raw mouseup event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseup" : true,
+ /**
+ * @event mouseover
+ * The raw mouseover event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseover" : true,
+ /**
+ * @event mouseout
+ * The raw mouseout event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseout" : true,
+ /**
+ * @event keypress
+ * The raw keypress event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keypress" : true,
+ /**
+ * @event keydown
+ * The raw keydown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keydown" : true,
- onAdd : function(ds, records, index){
- this.insertRows(ds, index, index + (records.length-1));
- },
+ // custom events
- onRemove : function(ds, record, index, isUpdate){
- if(isUpdate !== true){
- this.fireEvent("beforerowremoved", this, index, record);
- }
- var bt = this.getBodyTable(), lt = this.getLockedTable();
- if(bt.rows[index]){
- bt.firstChild.removeChild(bt.rows[index]);
- }
- if(lt.rows[index]){
- lt.firstChild.removeChild(lt.rows[index]);
- }
- if(isUpdate !== true){
- this.stripeRows(index);
- this.syncRowHeights(index, index);
- this.layout();
- this.fireEvent("rowremoved", this, index, record);
- }
- },
+ /**
+ * @event cellclick
+ * Fires when a cell is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "cellclick" : true,
+ /**
+ * @event celldblclick
+ * Fires when a cell is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "celldblclick" : true,
+ /**
+ * @event rowclick
+ * Fires when a row is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowclick" : true,
+ /**
+ * @event rowdblclick
+ * Fires when a row is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowdblclick" : true,
+ /**
+ * @event headerclick
+ * Fires when a header is clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headerclick" : true,
+ /**
+ * @event headerdblclick
+ * Fires when a header cell is double clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headerdblclick" : true,
+ /**
+ * @event rowcontextmenu
+ * Fires when a row is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowcontextmenu" : true,
+ /**
+ * @event cellcontextmenu
+ * Fires when a cell is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} cellIndex
+ * @param {Roo.EventObject} e
+ */
+ "cellcontextmenu" : true,
+ /**
+ * @event headercontextmenu
+ * Fires when a header is right clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headercontextmenu" : true,
+ /**
+ * @event bodyscroll
+ * Fires when the body element is scrolled
+ * @param {Number} scrollLeft
+ * @param {Number} scrollTop
+ */
+ "bodyscroll" : true,
+ /**
+ * @event columnresize
+ * Fires when the user resizes a column
+ * @param {Number} columnIndex
+ * @param {Number} newSize
+ */
+ "columnresize" : true,
+ /**
+ * @event columnmove
+ * Fires when the user moves a column
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
+ */
+ "columnmove" : true,
+ /**
+ * @event startdrag
+ * Fires when row(s) start being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
+ */
+ "startdrag" : true,
+ /**
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
+ */
+ "enddrag" : true,
+ /**
+ * @event dragdrop
+ * Fires when dragged row(s) are dropped on a valid DD target
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragdrop" : true,
+ /**
+ * @event dragover
+ * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragover" : true,
+ /**
+ * @event dragenter
+ * Fires when the dragged row(s) first cross another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragenter" : true,
+ /**
+ * @event dragout
+ * Fires when the dragged row(s) leave another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragout" : true,
+ /**
+ * @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.
+ */
+ 'rowclass' : true,
- onLoad : function(){
- this.scrollToTop();
- },
+ /**
+ * @event render
+ * Fires when the grid is rendered
+ * @param {Grid} grid
+ */
+ 'render' : true
+ });
+ Roo.grid.Grid.superclass.constructor.call(this);
+};
+Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
+
/**
- * Scrolls the grid to the top
+ * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
+ */
+ /**
+ * @cfg {Roo.grid.GridView} view The view that renders the grid (default = Roo.grid.GridView)
+ */
+ /**
+ * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
+ */
+ /**
+ * @cfg {Roo.data.Store} ds The data store for the grid
+ */
+ /**
+ * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
+ */
+
+ /**
+ * @cfg {Roo.PagingToolbar} footer the paging toolbar
+ */
+
+ /**
+ * @cfg {String} ddGroup - drag drop group.
+ */
+ /**
+ * @cfg {String} dragGroup - drag group (?? not sure if needed.)
*/
- scrollToTop : function(){
- if(this.scroller){
- this.scroller.dom.scrollTop = 0;
- this.syncScroll();
- }
- },
/**
- * Gets a panel in the header of the grid that can be used for toolbars etc.
- * After modifying the contents of this panel a call to grid.autoSize() may be
- * required to register any changes in size.
- * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
- * @return Roo.Element
+ * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
*/
- getHeaderPanel : function(doShow){
- if(doShow){
- this.headerPanel.show();
- }
- return this.headerPanel;
- },
+ minColumnWidth : 25,
/**
- * Gets a panel in the footer of the grid that can be used for toolbars etc.
- * After modifying the contents of this panel a call to grid.autoSize() may be
- * required to register any changes in size.
- * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
- * @return Roo.Element
+ * @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.
*/
- getFooterPanel : function(doShow){
- if(doShow){
- this.footerPanel.show();
- }
- return this.footerPanel;
- },
-
- initElements : function(){
- var E = Roo.Element;
- var el = this.grid.getGridEl().dom.firstChild;
- var cs = el.childNodes;
-
- this.el = new E(el);
-
- 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[2]);
- this.scrollSizer = new E(this.scroller.dom.firstChild);
-
- 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[4]);
- this.mainHd = new E(this.mainWrap.dom.firstChild);
- this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
-
- this.footerPanel = new E(cs[5]);
- this.footerPanel.enableDisplayMode("block");
-
- this.resizeProxy = new E(cs[6]);
-
- this.headerSelector = String.format(
- '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
- this.lockedHd.id, this.mainHd.id
- );
-
- this.splitterSelector = String.format(
- '#{0} div.x-grid-split, #{1} div.x-grid-split',
- this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
- );
- },
- idToCssName : function(s)
- {
- return s.replace(/[^a-z0-9]+/ig, '-');
- },
-
- getHeaderCell : function(index){
- return Roo.DomQuery.select(this.headerSelector)[index];
- },
-
- getHeaderCellMeasure : function(index){
- return this.getHeaderCell(index).firstChild;
- },
-
- getHeaderCellText : function(index){
- return this.getHeaderCell(index).firstChild.firstChild;
- },
-
- getLockedTable : function(){
- return this.lockedBody.dom.firstChild;
- },
-
- getBodyTable : function(){
- return this.mainBody.dom.firstChild;
- },
-
- getLockedRow : function(index){
- return this.getLockedTable().rows[index];
- },
-
- getRow : function(index){
- return this.getBodyTable().rows[index];
- },
+ autoSizeColumns : false,
- getRowComposite : function(index){
- if(!this.rowEl){
- this.rowEl = new Roo.CompositeElementLite();
- }
- var els = [], lrow, mrow;
- if(lrow = this.getLockedRow(index)){
- els.push(lrow);
- }
- if(mrow = this.getRow(index)){
- els.push(mrow);
- }
- this.rowEl.elements = els;
- return this.rowEl;
- },
/**
- * Gets the 'td' of the cell
- *
- * @param {Integer} rowIndex row to select
- * @param {Integer} colIndex column to select
- *
- * @return {Object}
+ * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
*/
- getCell : function(rowIndex, colIndex){
- var locked = this.cm.getLockedCount();
- var source;
- if(colIndex < locked){
- source = this.lockedBody.dom.firstChild;
- }else{
- source = this.mainBody.dom.firstChild;
- colIndex -= locked;
- }
- return source.rows[rowIndex].childNodes[colIndex];
- },
-
- getCellText : function(rowIndex, colIndex){
- return this.getCell(rowIndex, colIndex).firstChild.firstChild;
- },
-
- getCellBox : function(cell){
- var b = this.fly(cell).getBox();
- if(Roo.isOpera){ // opera fails to report the Y
- b.y = cell.offsetTop + this.mainBody.getY();
- }
- return b;
- },
-
- getCellIndex : function(cell){
- var id = String(cell.className).match(this.cellRE);
- if(id){
- return parseInt(id[1], 10);
- }
- return 0;
- },
-
- findHeaderIndex : function(n){
- var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
- return r ? this.getCellIndex(r) : false;
- },
-
- findHeaderCell : function(n){
- var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
- return r ? r : false;
- },
-
- findRowIndex : function(n){
- if(!n){
- return false;
- }
- var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
- return r ? r.rowIndex : false;
- },
-
- findCellIndex : function(node){
- var stop = this.el.dom;
- while(node && node != stop){
- if(this.findRE.test(node.className)){
- return this.getCellIndex(node);
- }
- node = node.parentNode;
- }
- return false;
- },
-
- getColumnId : function(index){
- return this.cm.getColumnId(index);
- },
-
- getSplitters : function()
- {
- if(this.splitterSelector){
- return Roo.DomQuery.select(this.splitterSelector);
- }else{
- return null;
- }
- },
-
- getSplitter : function(index){
- return this.getSplitters()[index];
- },
-
- onRowOver : function(e, t){
- var row;
- if((row = this.findRowIndex(t)) !== false){
- this.getRowComposite(row).addClass("x-grid-row-over");
- }
- },
+ autoSizeHeaders : true,
- onRowOut : function(e, t){
- var row;
- if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
- this.getRowComposite(row).removeClass("x-grid-row-over");
- }
- },
+ /**
+ * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+ */
+ monitorWindowResize : true,
- renderHeaders : function(){
- var cm = this.cm;
- var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
- var cb = [], lb = [], sb = [], lsb = [], p = {};
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- p.cellId = "x-grid-hd-0-" + i;
- p.splitId = "x-grid-csplit-0-" + i;
- p.id = cm.getColumnId(i);
- p.value = cm.getColumnHeader(i) || "";
- p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</) ? '' : p.value || "";
- p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
- if(!cm.isLocked(i)){
- cb[cb.length] = ct.apply(p);
- sb[sb.length] = st.apply(p);
- }else{
- lb[lb.length] = ct.apply(p);
- lsb[lsb.length] = st.apply(p);
- }
- }
- return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
- ht.apply({cells: cb.join(""), splits:sb.join("")})];
- },
+ /**
+ * @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,
- updateHeaders : function(){
- var html = this.renderHeaders();
- this.lockedHd.update(html[0]);
- this.mainHd.update(html[1]);
- },
+ /**
+ * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+ */
+ trackMouseOver : true,
/**
- * Focuses the specified row.
- * @param {Number} row The row index
- */
- focusRow : function(row)
- {
- //Roo.log('GridView.focusRow');
- var x = this.scroller.dom.scrollLeft;
- this.focusCell(row, 0, false);
- this.scroller.dom.scrollLeft = x;
- },
+ * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
+ */
+ /**
+ * @cfg {Boolean} enableDrop True to enable drop of elements. 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,
/**
- * Focuses the specified cell.
- * @param {Number} row The row index
- * @param {Number} col The column index
- * @param {Boolean} hscroll false to disable horizontal scrolling
+ * @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.
*/
- 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){
- this.focusEl.focus();
- }else{
- this.focusEl.focus.defer(1, this.focusEl);
- }
- },
+ autoExpandColumn : false,
/**
- * Scrolls the specified cell into view
- * @param {Number} row The row index
- * @param {Number} col The column index
- * @param {Boolean} hscroll false to disable horizontal scrolling
- */
- 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 null;
- }
- col = (col !== undefined ? col : 0);
- var cm = this.grid.colModel;
- while(cm.isHidden(col)){
- col++;
- }
+ * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
+ * Default is 50.
+ */
+ autoExpandMin : 50,
- var el = this.getCell(row, col);
- if(!el){
- return null;
- }
- var c = this.scroller.dom;
+ /**
+ * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
+ */
+ autoExpandMax : 1000,
- var ctop = parseInt(el.offsetTop, 10);
- 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;
- //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;
- }else if(cright > sright){
- c.scrollLeft = cright-c.clientWidth;
- }
- }
-
- return el;
- },
+ /**
+ * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
+ */
+ view : null,
- updateColumns : function(){
- this.grid.stopEditing();
- var cm = this.grid.colModel, colIds = this.getColumnIds();
- //var totalWidth = cm.getTotalWidth();
- var pos = 0;
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- //if(cm.isHidden(i)) continue;
- var w = cm.getColumnWidth(i);
- this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
- this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
- }
- this.updateSplitters();
- },
+ /**
+ * @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} dropTarget An {@link Roo.dd.DropTarget} config
+ */
+ dropTarget: false,
+ /**
+ * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
+ */
+ sortColMenu : false,
+
+ // private
+ rendered : false,
- generateRules : function(cm){
- var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
- Roo.util.CSS.removeStyleSheet(rulesId);
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var cid = cm.getColumnId(i);
- var align = '';
- if(cm.config[i].align){
- align = 'text-align:'+cm.config[i].align+';';
- }
- var hidden = '';
- if(cm.isHidden(i)){
- hidden = 'display:none;';
- }
- var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
- ruleBuf.push(
- this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
- this.hdSelector, cid, " {\n", align, width, "}\n",
- this.tdSelector, cid, " {\n",hidden,"\n}\n",
- this.splitSelector, cid, " {\n", hidden , "\n}\n");
- }
- return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
- },
+ /**
+ * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
+ * of a fixed width. Default is false.
+ */
+ /**
+ * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
+ */
+
+
+ /**
+ * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
+ * %0 is replaced with the number of selected rows.
+ */
+ ddText : "{0} selected row{1}",
+
+
+ /**
+ * Called once after all setup has been completed and the grid is ready to be rendered.
+ * @return {Roo.grid.Grid} this
+ */
+ render : function()
+ {
+ var c = this.container;
+ // try to detect autoHeight/width mode
+ if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
+ this.autoHeight = true;
+ }
+ var view = this.getView();
+ view.init(this);
- updateSplitters : function(){
- var cm = this.cm, s = this.getSplitters();
- if(s){ // splitters not created yet
- var pos = 0, locked = true;
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- if(cm.isHidden(i)) {
- continue;
- }
- var w = cm.getColumnWidth(i); // make sure it's a number
- if(!cm.isLocked(i) && locked){
- pos = 0;
- locked = false;
- }
- pos += w;
- s[i].style.left = (pos-this.splitOffset) + "px";
- }
+ c.on("click", this.onClick, this);
+ c.on("dblclick", this.onDblClick, this);
+ c.on("contextmenu", this.onContextMenu, this);
+ c.on("keydown", this.onKeyDown, this);
+ if (Roo.isTouch) {
+ c.on("touchstart", this.onTouchStart, this);
}
- },
- handleHiddenChange : function(colModel, colIndex, hidden){
- if(hidden){
- this.hideColumn(colIndex);
- }else{
- this.unhideColumn(colIndex);
- }
- },
+ this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
- hideColumn : function(colIndex){
- var cid = this.getColumnId(colIndex);
- this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
- this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
- if(Roo.isSafari){
- this.updateHeaders();
- }
- this.updateSplitters();
- this.layout();
- },
+ this.getSelectionModel().init(this);
- unhideColumn : function(colIndex){
- var cid = this.getColumnId(colIndex);
- this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
- this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
+ view.render();
- if(Roo.isSafari){
- this.updateHeaders();
+ if(this.loadMask){
+ this.loadMask = new Roo.LoadMask(this.container,
+ Roo.apply({store:this.dataSource}, this.loadMask));
}
- this.updateSplitters();
- this.layout();
- },
-
- insertRows : function(dm, firstRow, lastRow, isUpdate){
- if(firstRow == 0 && lastRow == dm.getCount()-1){
- this.refresh();
- }else{
- if(!isUpdate){
- this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
- }
- var s = this.getScrollState();
- var markup = this.renderRows(firstRow, lastRow);
- this.bufferRows(markup[0], this.getLockedTable(), firstRow);
- this.bufferRows(markup[1], this.getBodyTable(), firstRow);
- this.restoreScroll(s);
- if(!isUpdate){
- this.fireEvent("rowsinserted", this, firstRow, lastRow);
- this.syncRowHeights(firstRow, lastRow);
- this.stripeRows(firstRow);
- this.layout();
- }
+
+
+ if (this.toolbar && this.toolbar.xtype) {
+ this.toolbar.container = this.getView().getHeaderPanel(true);
+ this.toolbar = new Roo.Toolbar(this.toolbar);
}
- },
-
- bufferRows : function(markup, target, index){
- var before = null, trows = target.rows, tbody = target.tBodies[0];
- if(index < trows.length){
- before = trows[index];
+ if (this.footer && this.footer.xtype) {
+ this.footer.dataSource = this.getDataSource();
+ this.footer.container = this.getView().getFooterPanel(true);
+ this.footer = Roo.factory(this.footer, Roo);
}
- var b = document.createElement("div");
- b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
- var rows = b.firstChild.rows;
- for(var i = 0, len = rows.length; i < len; i++){
- if(before){
- tbody.insertBefore(rows[0], before);
- }else{
- tbody.appendChild(rows[0]);
- }
+ if (this.dropTarget && this.dropTarget.xtype) {
+ delete this.dropTarget.xtype;
+ this.dropTarget = new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
}
- b.innerHTML = "";
- b = null;
+
+
+ this.rendered = true;
+ this.fireEvent('render', this);
+ return this;
},
- deleteRows : function(dm, firstRow, lastRow){
- if(dm.getRowCount()<1){
- this.fireEvent("beforerefresh", this);
- this.mainBody.update("");
- this.lockedBody.update("");
- this.fireEvent("refresh", this);
- }else{
- this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
- var bt = this.getBodyTable();
- var tbody = bt.firstChild;
- var rows = bt.rows;
- for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
- tbody.removeChild(rows[firstRow]);
- }
- this.stripeRows(firstRow);
- this.fireEvent("rowsdeleted", this, firstRow, lastRow);
+ /**
+ * Reconfigures the grid to use a different Store and Column Model.
+ * The View will be bound to the new objects and refreshed.
+ * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
+ * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
+ */
+ reconfigure : function(dataSource, colModel){
+ if(this.loadMask){
+ this.loadMask.destroy();
+ this.loadMask = new Roo.LoadMask(this.container,
+ Roo.apply({store:dataSource}, this.loadMask));
}
+ this.view.bind(dataSource, colModel);
+ this.dataSource = dataSource;
+ this.colModel = colModel;
+ this.view.refresh(true);
},
-
- updateRows : function(dataSource, firstRow, lastRow){
- var s = this.getScrollState();
- this.refresh();
- this.restoreScroll(s);
- },
-
- handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
- if(!noRefresh){
- this.refresh();
+ /**
+ * addColumns
+ * Add's a column, default at the end..
+
+ * @param {int} position to add (default end)
+ * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel}
+ */
+ addColumns : function(pos, ar)
+ {
+
+ for (var i =0;i< ar.length;i++) {
+ var cfg = ar[i];
+ cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
+ this.cm.lookup[cfg.id] = cfg;
}
- this.updateHeaderSortState();
- },
-
- getScrollState : function(){
- var sb = this.scroller.dom;
- return {left: sb.scrollLeft, top: sb.scrollTop};
+
+ if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
+ pos = this.cm.config.length; //this.cm.config.push(cfg);
+ }
+ pos = Math.max(0,pos);
+ ar.unshift(0);
+ ar.unshift(pos);
+ this.cm.config.splice.apply(this.cm.config, ar);
+
+
+
+ this.view.generateRules(this.cm);
+ this.view.refresh(true);
+
+ },
+
+
+
+
+ // private
+ onKeyDown : function(e){
+ this.fireEvent("keydown", e);
},
- stripeRows : function(startRow){
- if(!this.grid.stripeRows || this.ds.getCount() < 1){
- return;
+ /**
+ * Destroy this grid.
+ * @param {Boolean} removeEl True to remove the element
+ */
+ destroy : function(removeEl, keepListeners){
+ if(this.loadMask){
+ this.loadMask.destroy();
}
- startRow = startRow || 0;
- var rows = this.getBodyTable().rows;
- var lrows = this.getLockedTable().rows;
- var cls = ' x-grid-row-alt ';
- for(var i = startRow, len = rows.length; i < len; i++){
- var row = rows[i], lrow = lrows[i];
- var isAlt = ((i+1) % 2 == 0);
- var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
- if(isAlt == hasAlt){
- continue;
- }
- if(isAlt){
- row.className += " x-grid-row-alt";
- }else{
- row.className = row.className.replace("x-grid-row-alt", "");
- }
- if(lrow){
- lrow.className = row.className;
- }
+ var c = this.container;
+ c.removeAllListeners();
+ this.view.destroy();
+ this.colModel.purgeListeners();
+ if(!keepListeners){
+ this.purgeListeners();
+ }
+ c.update("");
+ if(removeEl === true){
+ c.remove();
}
},
- restoreScroll : function(state){
- //Roo.log('GridView.restoreScroll');
- var sb = this.scroller.dom;
- sb.scrollLeft = state.left;
- sb.scrollTop = state.top;
- this.syncScroll();
- },
-
- syncScroll : function(){
- //Roo.log('GridView.syncScroll');
- var sb = this.scroller.dom;
- var sh = this.mainHd.dom;
- var bs = this.mainBody.dom;
- var lv = this.lockedBody.dom;
- sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
- lv.scrollTop = bs.scrollTop = sb.scrollTop;
- },
-
- handleScroll : function(e){
- this.syncScroll();
- var sb = this.scroller.dom;
- this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
- e.stopEvent();
- },
-
- handleWheel : function(e){
- var d = e.getWheelDelta();
- this.scroller.dom.scrollTop -= d*22;
- // set this here to prevent jumpy scrolling on large tables
- this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
- e.stopEvent();
- },
-
- renderRows : function(startRow, endRow){
- // pull in all the crap needed to render rows
- var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
- var colCount = cm.getColumnCount();
-
- if(ds.getCount() < 1){
- return ["", ""];
+ // private
+ processEvent : function(name, e){
+ // does this fire select???
+ //Roo.log('grid:processEvent ' + name);
+
+ if (name != 'touchstart' ) {
+ this.fireEvent(name, e);
}
-
- // build a map for all the columns
- var cs = [];
- for(var i = 0; i < colCount; i++){
- var name = cm.getDataIndex(i);
- cs[i] = {
- name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
- renderer : cm.getRenderer(i),
- id : cm.getColumnId(i),
- locked : cm.isLocked(i),
- has_editor : cm.isCellEditable(i)
- };
+
+ var t = e.getTarget();
+ var v = this.view;
+ var header = v.findHeaderIndex(t);
+ if(header !== false){
+ var ename = name == 'touchstart' ? 'click' : name;
+
+ this.fireEvent("header" + ename, this, header, e);
+ }else{
+ var row = v.findRowIndex(t);
+ var cell = v.findCellIndex(t);
+ if (name == 'touchstart') {
+ // first touch is always a click.
+ // hopefull this happens after selection is updated.?
+ name = false;
+
+ if (typeof(this.selModel.getSelectedCell) != 'undefined') {
+ var cs = this.selModel.getSelectedCell();
+ if (row == cs[0] && cell == cs[1]){
+ name = 'dblclick';
+ }
+ }
+ if (typeof(this.selModel.getSelections) != 'undefined') {
+ var cs = this.selModel.getSelections();
+ var ds = this.dataSource;
+ if (cs.length == 1 && ds.getAt(row) == cs[0]){
+ name = 'dblclick';
+ }
+ }
+ if (!name) {
+ return;
+ }
+ }
+
+
+ if(row !== false){
+ this.fireEvent("row" + name, this, row, e);
+ if(cell !== false){
+ this.fireEvent("cell" + name, this, row, cell, e);
+ }
+ }
}
+ },
- startRow = startRow || 0;
- endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+ // private
+ onClick : function(e){
+ this.processEvent("click", e);
+ },
+ // private
+ onTouchStart : function(e){
+ this.processEvent("touchstart", e);
+ },
- // records to render
- var rs = ds.getRange(startRow, endRow);
+ // private
+ onContextMenu : function(e, t){
+ this.processEvent("contextmenu", e);
+ },
- return this.doRender(cs, rs, ds, startRow, colCount, stripe);
+ // private
+ onDblClick : function(e){
+ this.processEvent("dblclick", e);
},
- // As much as I hate to duplicate code, this was branched because FireFox really hates
- // [].join("") on strings. The performance difference was substantial enough to
- // branch this function
- doRender : Roo.isGecko ?
- function(cs, rs, ds, startRow, colCount, stripe){
- var ts = this.templates, ct = ts.cell, rt = ts.row;
- // buffers
- var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
-
- var hasListener = this.grid.hasListener('rowclass');
- var rowcfg = {};
- for(var j = 0, len = rs.length; j < len; j++){
- r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
- for(var i = 0; i < colCount; i++){
- c = cs[i];
- p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
- p.id = c.id;
- p.css = p.attr = "";
- p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
- if(p.value == undefined || p.value === "") {
- p.value = " ";
- }
- if(c.has_editor){
- p.css += ' x-grid-editable-cell';
- }
- if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
- p.css += ' x-grid-dirty-cell';
- }
- var markup = ct.apply(p);
- if(!c.locked){
- cb+= markup;
- }else{
- lcb+= markup;
- }
- }
- var alt = [];
- if(stripe && ((rowIndex+1) % 2 == 0)){
- alt.push("x-grid-row-alt")
- }
- if(r.dirty){
- alt.push( " x-grid-dirty-row");
- }
- rp.cells = lcb;
- if(this.getRowClass){
- alt.push(this.getRowClass(r, rowIndex));
- }
- if (hasListener) {
- rowcfg = {
-
- record: r,
- rowIndex : rowIndex,
- rowClass : ''
- };
- this.grid.fireEvent('rowclass', this, rowcfg);
- alt.push(rowcfg.rowClass);
- }
- rp.alt = alt.join(" ");
- lbuf+= rt.apply(rp);
- rp.cells = cb;
- buf+= rt.apply(rp);
+ // private
+ walkCells : function(row, col, step, fn, scope){
+ var cm = this.colModel, clen = cm.getColumnCount();
+ var ds = this.dataSource, rlen = ds.getCount(), first = true;
+ if(step < 0){
+ if(col < 0){
+ row--;
+ first = false;
+ }
+ while(row >= 0){
+ if(!first){
+ col = clen-1;
}
- return [lbuf, buf];
- } :
- function(cs, rs, ds, startRow, colCount, stripe){
- var ts = this.templates, ct = ts.cell, rt = ts.row;
- // buffers
- var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
- var hasListener = this.grid.hasListener('rowclass');
-
- var rowcfg = {};
- for(var j = 0, len = rs.length; j < len; j++){
- r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
- for(var i = 0; i < colCount; i++){
- c = cs[i];
- p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
- p.id = c.id;
- p.css = p.attr = "";
- p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
- if(p.value == undefined || p.value === "") {
- p.value = " ";
- }
- //Roo.log(c);
- if(c.has_editor){
- p.css += ' x-grid-editable-cell';
- }
- if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
- p.css += ' x-grid-dirty-cell'
- }
-
- var markup = ct.apply(p);
- if(!c.locked){
- cb[cb.length] = markup;
- }else{
- lcb[lcb.length] = markup;
- }
- }
- var alt = [];
- if(stripe && ((rowIndex+1) % 2 == 0)){
- alt.push( "x-grid-row-alt");
- }
- if(r.dirty){
- alt.push(" x-grid-dirty-row");
- }
- rp.cells = lcb;
- if(this.getRowClass){
- alt.push( this.getRowClass(r, rowIndex));
+ first = false;
+ while(col >= 0){
+ if(fn.call(scope || this, row, col, cm) === true){
+ return [row, col];
}
- if (hasListener) {
- rowcfg = {
-
- record: r,
- rowIndex : rowIndex,
- rowClass : ''
- };
- this.grid.fireEvent('rowclass', this, rowcfg);
- alt.push(rowcfg.rowClass);
+ col--;
+ }
+ row--;
+ }
+ } else {
+ if(col >= clen){
+ row++;
+ first = false;
+ }
+ while(row < rlen){
+ if(!first){
+ col = 0;
+ }
+ first = false;
+ while(col < clen){
+ if(fn.call(scope || this, row, col, cm) === true){
+ return [row, col];
}
-
- rp.alt = alt.join(" ");
- rp.cells = lcb.join("");
- lbuf[lbuf.length] = rt.apply(rp);
- rp.cells = cb.join("");
- buf[buf.length] = rt.apply(rp);
+ col++;
}
- return [lbuf.join(""), buf.join("")];
- },
+ row++;
+ }
+ }
+ return null;
+ },
- renderBody : function(){
- var markup = this.renderRows();
- var bt = this.templates.body;
- return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
+ // private
+ getSelections : function(){
+ return this.selModel.getSelections();
},
/**
- * Refreshes the grid
- * @param {Boolean} headersToo
+ * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
+ * but if manual update is required this method will initiate it.
*/
- refresh : function(headersToo){
- this.fireEvent("beforerefresh", this);
- this.grid.stopEditing();
- var result = this.renderBody();
- this.lockedBody.update(result[0]);
- this.mainBody.update(result[1]);
- if(headersToo === true){
- this.updateHeaders();
- this.updateColumns();
- this.updateSplitters();
- this.updateHeaderSortState();
+ autoSize : function(){
+ if(this.rendered){
+ this.view.layout();
+ if(this.view.adjustForScroll){
+ this.view.adjustForScroll();
+ }
}
- this.syncRowHeights();
- this.layout();
- this.fireEvent("refresh", this);
},
- handleColumnMove : function(cm, oldIndex, newIndex){
- this.indexMap = null;
- var s = this.getScrollState();
- this.refresh(true);
- this.restoreScroll(s);
- this.afterMove(newIndex);
+ /**
+ * Returns the grid's underlying element.
+ * @return {Element} The element
+ */
+ getGridEl : function(){
+ return this.container;
},
- afterMove : function(colIndex){
- 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);
-
-
- }
-
- },
+ // private for compatibility, overridden by editor grid
+ stopEditing : function(){},
- updateCell : function(dm, rowIndex, dataIndex){
- var colIndex = this.getColumnIndexByDataIndex(dataIndex);
- if(typeof colIndex == "undefined"){ // not present in grid
- return;
+ /**
+ * Returns the grid's SelectionModel.
+ * @return {SelectionModel}
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.grid.RowSelectionModel();
}
- var cm = this.grid.colModel;
- var cell = this.getCell(rowIndex, colIndex);
- var cellText = this.getCellText(rowIndex, colIndex);
+ return this.selModel;
+ },
- var p = {
- cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
- id : cm.getColumnId(colIndex),
- css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
- };
- var renderer = cm.getRenderer(colIndex);
- var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
- if(typeof val == "undefined" || val === "") {
- val = " ";
- }
- cellText.innerHTML = val;
- cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
- this.syncRowHeights(rowIndex, rowIndex);
+ /**
+ * Returns the grid's DataSource.
+ * @return {DataSource}
+ */
+ getDataSource : function(){
+ return this.dataSource;
},
- calcColumnWidth : function(colIndex, maxRowsToMeasure){
- var maxWidth = 0;
- if(this.grid.autoSizeHeaders){
- var h = this.getHeaderCellMeasure(colIndex);
- maxWidth = Math.max(maxWidth, h.scrollWidth);
- }
- var tb, index;
- if(this.cm.isLocked(colIndex)){
- tb = this.getLockedTable();
- index = colIndex;
- }else{
- tb = this.getBodyTable();
- index = colIndex - this.cm.getLockedCount();
- }
- if(tb && tb.rows){
- var rows = tb.rows;
- var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
- for(var i = 0; i < stopIndex; i++){
- var cell = rows[i].childNodes[index].firstChild;
- maxWidth = Math.max(maxWidth, cell.scrollWidth);
- }
- }
- return maxWidth + /*margin for error in IE*/ 5;
+ /**
+ * Returns the grid's ColumnModel.
+ * @return {ColumnModel}
+ */
+ getColumnModel : function(){
+ return this.colModel;
},
+
/**
- * Autofit a column to its content.
- * @param {Number} colIndex
- * @param {Boolean} forceMinSize true to force the column to go smaller if possible
+ * Returns the grid's GridView object.
+ * @return {GridView}
*/
- autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
- if(this.cm.isHidden(colIndex)){
- return; // can't calc a hidden column
- }
- if(forceMinSize){
- var cid = this.cm.getColumnId(colIndex);
- this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
- if(this.grid.autoSizeHeaders){
- this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
- }
- }
- var newWidth = this.calcColumnWidth(colIndex);
- this.cm.setColumnWidth(colIndex,
- Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
- if(!suppressEvent){
- this.grid.fireEvent("columnresize", colIndex, newWidth);
+ getView : function(){
+ if(!this.view){
+ this.view = new Roo.grid.GridView(this.viewConfig);
+ this.relayEvents(this.view, [
+ "beforerowremoved", "beforerowsinserted",
+ "beforerefresh", "rowremoved",
+ "rowsinserted", "rowupdated" ,"refresh"
+ ]);
}
+ return this.view;
},
-
/**
- * Autofits all columns to their content and then expands to fit any extra space in the grid
+ * Called to get grid's drag proxy text, by default returns this.ddText.
+ * Override this to put something different in the dragged text.
+ * @return {String}
*/
- autoSizeColumns : function(){
- var cm = this.grid.colModel;
+ getDragDropText : function(){
+ var count = this.selModel.getCount();
+ return String.format(this.ddText, count, count == 1 ? '' : 's');
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ /**
+ * @class Roo.grid.AbstractGridView
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid Views
+ * @constructor
+ */
+Roo.grid.AbstractGridView = function(){
+ this.grid = null;
+
+ this.events = {
+ "beforerowremoved" : true,
+ "beforerowsinserted" : true,
+ "beforerefresh" : true,
+ "rowremoved" : true,
+ "rowsinserted" : true,
+ "rowupdated" : true,
+ "refresh" : true
+ };
+ Roo.grid.AbstractGridView.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
+ rowClass : "x-grid-row",
+ cellClass : "x-grid-cell",
+ tdClass : "x-grid-td",
+ hdClass : "x-grid-hd",
+ splitClass : "x-grid-hd-split",
+
+ init: function(grid){
+ this.grid = grid;
+ var cid = this.grid.getGridEl().id;
+ this.colSelector = "#" + cid + " ." + this.cellClass + "-";
+ this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
+ this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
+ this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
+ },
+
+ getColumnRenderers : function(){
+ var renderers = [];
+ var cm = this.grid.colModel;
var colCount = cm.getColumnCount();
for(var i = 0; i < colCount; i++){
- this.autoSizeColumn(i, true, true);
+ renderers[i] = cm.getRenderer(i);
}
- if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
- this.fitColumns();
- }else{
- this.updateColumns();
- this.layout();
+ return renderers;
+ },
+
+ getColumnIds : function(){
+ var ids = [];
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ for(var i = 0; i < colCount; i++){
+ ids[i] = cm.getColumnId(i);
+ }
+ return ids;
+ },
+
+ getDataIndexes : function(){
+ if(!this.indexMap){
+ this.indexMap = this.buildIndexMap();
}
+ return this.indexMap.colToData;
},
-
+
+ getColumnIndexByDataIndex : function(dataIndex){
+ if(!this.indexMap){
+ this.indexMap = this.buildIndexMap();
+ }
+ return this.indexMap.dataToCol[dataIndex];
+ },
+
/**
- * Autofits all columns to the grid's width proportionate with their current size
- * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
+ * Set a css style for a column dynamically.
+ * @param {Number} colIndex The index of the column
+ * @param {String} name The css property name
+ * @param {String} value The css value
*/
- fitColumns : function(reserveScrollSpace){
- var cm = this.grid.colModel;
- var colCount = cm.getColumnCount();
- var cols = [];
- var width = 0;
- var i, w;
- for (i = 0; i < colCount; i++){
- if(!cm.isHidden(i) && !cm.isFixed(i)){
- w = cm.getColumnWidth(i);
- cols.push(i);
- cols.push(w);
- width += w;
- }
- }
- var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
- if(reserveScrollSpace){
- avail -= 17;
+ setCSSStyle : function(colIndex, name, value){
+ var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
+ Roo.util.CSS.updateRule(selector, name, value);
+ },
+
+ generateRules : function(cm){
+ var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
+ Roo.util.CSS.removeStyleSheet(rulesId);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var cid = cm.getColumnId(i);
+ ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
+ this.tdSelector, cid, " {\n}\n",
+ this.hdSelector, cid, " {\n}\n",
+ this.splitSelector, cid, " {\n}\n");
}
- var frac = (avail - cm.getTotalWidth())/width;
- while (cols.length){
- w = cols.pop();
- i = cols.pop();
- cm.setColumnWidth(i, Math.floor(w + w*frac), true);
+ return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDragZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+ Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
+ if(hd2){
+ this.setHandleElId(Roo.id(hd));
+ this.setOuterHandleElId(Roo.id(hd2));
+ }
+ this.scroll = false;
+};
+Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
+ maxDragWidth: 120,
+ getDragData : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var h = this.view.findHeaderCell(t);
+ if(h){
+ return {ddel: h.firstChild, header:h};
}
- this.updateColumns();
- this.layout();
+ return false;
},
- onRowSelect : function(rowIndex){
- var row = this.getRowComposite(rowIndex);
- row.addClass("x-grid-row-selected");
+ onInitDrag : function(e){
+ this.view.headersDisabled = true;
+ var clone = this.dragData.ddel.cloneNode(true);
+ clone.id = Roo.id();
+ clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
+ this.proxy.update(clone);
+ return true;
},
- onRowDeselect : function(rowIndex){
- var row = this.getRowComposite(rowIndex);
- row.removeClass("x-grid-row-selected");
+ afterValidDrop : function(){
+ var v = this.view;
+ setTimeout(function(){
+ v.headersDisabled = false;
+ }, 50);
},
- onCellSelect : function(row, col){
- var cell = this.getCell(row, col);
- if(cell){
- Roo.fly(cell).addClass("x-grid-cell-selected");
- }
- },
+ afterInvalidDrop : function(){
+ var v = this.view;
+ setTimeout(function(){
+ v.headersDisabled = false;
+ }, 50);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDropZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ // split the proxies so they don't interfere with mouse events
+ this.proxyTop = Roo.DomHelper.append(document.body, {
+ cls:"col-move-top", html:" "
+ }, true);
+ this.proxyBottom = Roo.DomHelper.append(document.body, {
+ cls:"col-move-bottom", html:" "
+ }, true);
+ this.proxyTop.hide = this.proxyBottom.hide = function(){
+ this.setLeftTop(-100,-100);
+ this.setStyle("visibility", "hidden");
+ };
+ this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+ // temporarily disabled
+ //Roo.dd.ScrollManager.register(this.view.scroller.dom);
+ Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
+};
+Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
+ proxyOffsets : [-4, -9],
+ fly: Roo.Element.fly,
- onCellDeselect : function(row, col){
- var cell = this.getCell(row, col);
- if(cell){
- Roo.fly(cell).removeClass("x-grid-cell-selected");
+ getTargetFromEvent : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var cindex = this.view.findCellIndex(t);
+ if(cindex !== false){
+ return this.view.getHeaderCell(cindex);
}
+ return null;
},
- updateHeaderSortState : function(){
-
- // 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;
+ nextVisible : function(h){
+ var v = this.view, cm = this.grid.colModel;
+ h = h.nextSibling;
+ while(h){
+ if(!cm.isHidden(v.getCellIndex(h))){
+ return h;
}
- mstate[state.field] = state.direction;
- // FIXME... - this is not used here.. but might be elsewhere..
- this.sortState = state;
-
- } else {
- mstate = this.ds.sortToggle;
+ h = h.nextSibling;
}
- //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]);
+ return null;
+ },
+
+ prevVisible : function(h){
+ var v = this.view, cm = this.grid.colModel;
+ h = h.prevSibling;
+ while(h){
+ if(!cm.isHidden(v.getCellIndex(h))){
+ return h;
}
+ h = h.prevSibling;
}
-
-
-
+ return null;
},
+ positionIndicator : function(h, n, e){
+ var x = Roo.lib.Event.getPageX(e);
+ var r = Roo.lib.Dom.getRegion(n.firstChild);
+ var px, pt, py = r.top + this.proxyOffsets[1];
+ if((r.right - x) <= (r.right-r.left)/2){
+ px = r.right+this.view.borderWidth;
+ pt = "after";
+ }else{
+ px = r.left;
+ pt = "before";
+ }
+ var oldIndex = this.view.getCellIndex(h);
+ var newIndex = this.view.getCellIndex(n);
- handleHeaderClick : function(g, index,e){
-
- Roo.log("header click");
-
- if (Roo.isTouch) {
- // touch events on header are handled by context
- this.handleHdCtx(g,index,e);
- return;
+ if(this.grid.colModel.isFixed(newIndex)){
+ return false;
}
-
-
- if(this.headersDisabled){
- return;
+
+ var locked = this.grid.colModel.isLocked(newIndex);
+
+ if(pt == "after"){
+ newIndex++;
}
- var dm = g.dataSource, cm = g.colModel;
- if(!cm.isSortable(index)){
- return;
+ if(oldIndex < newIndex){
+ newIndex--;
}
- 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;
+ if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
+ return false;
}
-
-
- dm.sort(cm.getDataIndex(index));
+ px += this.proxyOffsets[0];
+ this.proxyTop.setLeftTop(px, py);
+ this.proxyTop.show();
+ if(!this.bottomOffset){
+ this.bottomOffset = this.view.mainHd.getHeight();
+ }
+ this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
+ this.proxyBottom.show();
+ return pt;
},
-
- destroy : function(){
- if(this.colMenu){
- this.colMenu.removeAll();
- Roo.menu.MenuMgr.unregister(this.colMenu);
- this.colMenu.getEl().remove();
- delete this.colMenu;
+ onNodeEnter : function(n, dd, e, data){
+ if(data.header != n){
+ this.positionIndicator(data.header, n, e);
}
- if(this.hmenu){
- this.hmenu.removeAll();
- Roo.menu.MenuMgr.unregister(this.hmenu);
- this.hmenu.getEl().remove();
- delete this.hmenu;
+ },
+
+ onNodeOver : function(n, dd, e, data){
+ var result = false;
+ if(data.header != n){
+ result = this.positionIndicator(data.header, n, e);
}
- if(this.grid.enableColumnMove){
- var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
- if(dds){
- for(var dd in dds){
- if(!dds[dd].config.isTarget && dds[dd].dragElId){
- var elid = dds[dd].dragElId;
- dds[dd].unreg();
- Roo.get(elid).remove();
- } else if(dds[dd].config.isTarget){
- dds[dd].proxyTop.remove();
- dds[dd].proxyBottom.remove();
- dds[dd].unreg();
- }
- if(Roo.dd.DDM.locationCache[dd]){
- delete Roo.dd.DDM.locationCache[dd];
- }
- }
- delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
- }
+ if(!result){
+ this.proxyTop.hide();
+ this.proxyBottom.hide();
}
- Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
- this.bind(null, null);
- Roo.EventManager.removeResizeListener(this.onWindowResize, this);
+ return result ? this.dropAllowed : this.dropNotAllowed;
},
- handleLockChange : function(){
- this.refresh(true);
+ onNodeOut : function(n, dd, e, data){
+ this.proxyTop.hide();
+ this.proxyBottom.hide();
},
- onDenyColumnLock : function(){
+ onNodeDrop : function(n, dd, e, data){
+ var h = data.header;
+ if(h != n){
+ var cm = this.grid.colModel;
+ var x = Roo.lib.Event.getPageX(e);
+ var r = Roo.lib.Dom.getRegion(n.firstChild);
+ var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
+ var oldIndex = this.view.getCellIndex(h);
+ var newIndex = this.view.getCellIndex(n);
+ var locked = cm.isLocked(newIndex);
+ if(pt == "after"){
+ newIndex++;
+ }
+ if(oldIndex < newIndex){
+ newIndex--;
+ }
+ if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
+ return false;
+ }
+ cm.setLocked(oldIndex, locked, true);
+ cm.moveColumn(oldIndex, newIndex);
+ this.grid.fireEvent("columnmove", oldIndex, newIndex);
+ return true;
+ }
+ return false;
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.GridView
+ * @extends Roo.util.Observable
+ *
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.GridView = function(config){
+ Roo.grid.GridView.superclass.constructor.call(this);
+ this.el = null;
- },
+ Roo.apply(this, config);
+};
- onDenyColumnHide : function(){
+Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
- },
+ unselectable : 'unselectable="on"',
+ unselectableCls : 'x-unselectable',
+
+
+ rowClass : "x-grid-row",
- handleHdMenuClick : function(item){
- var index = this.hdCtxIndex;
- var cm = this.cm, ds = this.ds;
- switch(item.id){
- case "asc":
- ds.sort(cm.getDataIndex(index), "ASC");
- break;
- case "desc":
- ds.sort(cm.getDataIndex(index), "DESC");
- break;
- case "lock":
- var lc = cm.getLockedCount();
- if(cm.getColumnCount(true) <= lc+1){
- this.onDenyColumnLock();
- return;
- }
- if(lc != index){
- cm.setLocked(index, true, true);
- cm.moveColumn(index, lc);
- this.grid.fireEvent("columnmove", index, lc);
- }else{
- cm.setLocked(index, true);
- }
- break;
- case "unlock":
- var lc = cm.getLockedCount();
- if((lc-1) != index){
- cm.setLocked(index, false, true);
- cm.moveColumn(index, lc-1);
- this.grid.fireEvent("columnmove", index, lc-1);
- }else{
- cm.setLocked(index, false);
- }
- break;
- case 'wider': // used to expand cols on touch..
- case 'narrow':
- var cw = cm.getColumnWidth(index);
- cw += (item.id == 'wider' ? 1 : -1) * 50;
- cw = Math.max(0, cw);
- cw = Math.min(cw,4000);
- cm.setColumnWidth(index, cw);
- break;
-
- default:
- index = cm.getIndexById(item.id.substr(4));
- if(index != -1){
- if(item.checked && cm.getColumnCount(true) <= 1){
- this.onDenyColumnHide();
- return false;
- }
- cm.setHidden(index, item.checked);
- }
- }
- return true;
- },
+ cellClass : "x-grid-col",
- beforeColMenuShow : function(){
- var cm = this.cm, colCount = cm.getColumnCount();
- this.colMenu.removeAll();
-
- var items = [];
- for(var i = 0; i < colCount; i++){
- items.push({
- id: "col-"+cm.getColumnId(i),
- text: cm.getColumnHeader(i),
- checked: !cm.isHidden(i),
- hideOnClick:false
- });
- }
-
- if (this.grid.sortColMenu) {
- items.sort(function(a,b) {
- if (a.text == b.text) {
- return 0;
- }
- return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
- });
- }
-
- for(var i = 0; i < colCount; i++){
- this.colMenu.add(new Roo.menu.CheckItem(items[i]));
- }
- },
+ tdClass : "x-grid-td",
- handleHdCtx : function(g, index, e){
- e.stopEvent();
- var hd = this.getHeaderCell(index);
- this.hdCtxIndex = index;
- var ms = this.hmenu.items, cm = this.cm;
- ms.get("asc").setDisabled(!cm.isSortable(index));
- ms.get("desc").setDisabled(!cm.isSortable(index));
- if(this.grid.enableColLock !== false){
- ms.get("lock").setDisabled(cm.isLocked(index));
- ms.get("unlock").setDisabled(!cm.isLocked(index));
- }
- this.hmenu.show(hd, "tl-bl");
- },
+ hdClass : "x-grid-hd",
- handleHdOver : function(e){
- var hd = this.findHeaderCell(e.getTarget());
- if(hd && !this.headersDisabled){
- if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
- this.fly(hd).addClass("x-grid-hd-over");
- }
- }
- },
+ splitClass : "x-grid-split",
- handleHdOut : function(e){
- var hd = this.findHeaderCell(e.getTarget());
- if(hd){
- this.fly(hd).removeClass("x-grid-hd-over");
- }
- },
+ sortClasses : ["sort-asc", "sort-desc"],
- handleSplitDblClick : function(e, t){
- var i = this.getCellIndex(t);
- if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
- this.autoSizeColumn(i, true);
- this.layout();
- }
- },
+ enableMoveAnim : false,
- render : function(){
+ hlColor: "C3DAF9",
- var cm = this.cm;
- var colCount = cm.getColumnCount();
+ dh : Roo.DomHelper,
- if(this.grid.monitorWindowResize === true){
- Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
- }
- var header = this.renderHeaders();
- var body = this.templates.body.apply({rows:""});
- var html = this.templates.master.apply({
- lockedBody: body,
- body: body,
- lockedHeader: header[0],
- header: header[1]
- });
+ fly : Roo.Element.fly,
- //this.updateColumns();
+ css : Roo.util.CSS,
- this.grid.getGridEl().dom.innerHTML = html;
+ borderWidth: 1,
- this.initElements();
-
- // a kludge to fix the random scolling effect in webkit
- this.el.on("scroll", function() {
- this.el.dom.scrollTop=0; // hopefully not recursive..
- },this);
+ splitOffset: 3,
+
+ scrollIncrement : 22,
+
+ cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
+
+ findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
+
+ bind : function(ds, cm){
+ if(this.ds){
+ this.ds.un("load", this.onLoad, this);
+ this.ds.un("datachanged", this.onDataChange, this);
+ this.ds.un("add", this.onAdd, this);
+ this.ds.un("remove", this.onRemove, this);
+ this.ds.un("update", this.onUpdate, this);
+ this.ds.un("clear", this.onClear, this);
+ }
+ if(ds){
+ ds.on("load", this.onLoad, this);
+ ds.on("datachanged", this.onDataChange, this);
+ ds.on("add", this.onAdd, this);
+ ds.on("remove", this.onRemove, this);
+ ds.on("update", this.onUpdate, this);
+ ds.on("clear", this.onClear, this);
+ }
+ this.ds = ds;
+
+ if(this.cm){
+ this.cm.un("widthchange", this.onColWidthChange, this);
+ this.cm.un("headerchange", this.onHeaderChange, this);
+ this.cm.un("hiddenchange", this.onHiddenChange, this);
+ this.cm.un("columnmoved", this.onColumnMove, this);
+ this.cm.un("columnlockchange", this.onColumnLock, this);
+ }
+ if(cm){
+ this.generateRules(cm);
+ cm.on("widthchange", this.onColWidthChange, this);
+ cm.on("headerchange", this.onHeaderChange, this);
+ cm.on("hiddenchange", this.onHiddenChange, this);
+ cm.on("columnmoved", this.onColumnMove, this);
+ cm.on("columnlockchange", this.onColumnLock, this);
+ }
+ this.cm = cm;
+ },
- this.scroller.on("scroll", this.handleScroll, this);
- this.lockedBody.on("mousewheel", this.handleWheel, this);
- this.mainBody.on("mousewheel", this.handleWheel, this);
+ init: function(grid){
+ Roo.grid.GridView.superclass.init.call(this, grid);
- this.mainHd.on("mouseover", this.handleHdOver, this);
- this.mainHd.on("mouseout", this.handleHdOut, this);
- this.mainHd.on("dblclick", this.handleSplitDblClick, this,
- {delegate: "."+this.splitClass});
+ this.bind(grid.dataSource, grid.colModel);
- this.lockedHd.on("mouseover", this.handleHdOver, this);
- this.lockedHd.on("mouseout", this.handleHdOut, this);
- this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
- {delegate: "."+this.splitClass});
+ grid.on("headerclick", this.handleHeaderClick, this);
- if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
- new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ if(grid.trackMouseOver){
+ grid.on("mouseover", this.onRowOver, this);
+ grid.on("mouseout", this.onRowOut, this);
}
+ grid.cancelTextSelection = function(){};
+ this.gridId = grid.id;
- this.updateSplitters();
+ var tpls = this.templates || {};
- if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
- new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
- new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ 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-header">{lockedHeader}</div>',
+ '<div class="x-grid-body">{lockedBody}</div>',
+ "</div>",
+ '<div class="x-grid-viewport">',
+ '<div class="x-grid-header">{header}</div>',
+ '<div class="x-grid-body">{body}</div>',
+ "</div>",
+ '<div class="x-grid-bottombar"></div>',
+
+ '<div class="x-grid-resize-proxy"> </div>',
+ "</div>"
+ );
+ tpls.master.disableformats = true;
}
- if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
- this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
- this.hmenu.add(
- {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
- {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
+ if(!tpls.header){
+ tpls.header = new Roo.Template(
+ '<table border="0" cellspacing="0" cellpadding="0">',
+ '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
+ "</table>{splits}"
);
- if(this.grid.enableColLock !== false){
- this.hmenu.add('-',
- {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
- {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
- );
- }
- if (Roo.isTouch) {
- this.hmenu.add('-',
- {id:"wider", text: this.columnsWiderText},
- {id:"narrow", text: this.columnsNarrowText }
- );
-
-
- }
-
- if(this.grid.enableColumnHide !== false){
+ tpls.header.disableformats = true;
+ }
+ tpls.header.compile();
- this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
- this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
- this.colMenu.on("itemclick", this.handleHdMenuClick, this);
+ if(!tpls.hcell){
+ tpls.hcell = new Roo.Template(
+ '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
+ '<div class="x-grid-hd-text ' + this.unselectableCls + '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
+ "</div></td>"
+ );
+ tpls.hcell.disableFormats = true;
+ }
+ tpls.hcell.compile();
- this.hmenu.add('-',
- {id:"columns", text: this.columnsText, menu: this.colMenu}
- );
- }
- this.hmenu.on("itemclick", this.handleHdMenuClick, this);
+ if(!tpls.hsplit){
+ tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
+ this.unselectableCls + '" ' + this.unselectable +'> </div>');
+ tpls.hsplit.disableFormats = true;
+ }
+ tpls.hsplit.compile();
- this.grid.on("headercontextmenu", this.handleHdCtx, this);
+ if(!tpls.body){
+ tpls.body = new Roo.Template(
+ '<table border="0" cellspacing="0" cellpadding="0">',
+ "<tbody>{rows}</tbody>",
+ "</table>"
+ );
+ tpls.body.disableFormats = true;
}
+ tpls.body.compile();
- if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
- this.dd = new Roo.grid.GridDragZone(this.grid, {
- ddGroup : this.grid.ddGroup || 'GridDD'
- });
-
+ if(!tpls.row){
+ tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
+ tpls.row.disableFormats = true;
}
+ tpls.row.compile();
- /*
- for(var i = 0; i < colCount; i++){
- if(cm.isHidden(i)){
- this.hideColumn(i);
- }
- if(cm.config[i].align){
- this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
- this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
- }
- }*/
-
- this.updateHeaderSortState();
+ if(!tpls.cell){
+ tpls.cell = new Roo.Template(
+ '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
+ '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
+ this.unselectableCls + '" ' + this.unselectable +'" {attr}>{value}</div></div>',
+ "</td>"
+ );
+ tpls.cell.disableFormats = true;
+ }
+ tpls.cell.compile();
- this.beforeInitialResize();
- this.layout(true);
+ this.templates = tpls;
+ },
- // two part rendering gives faster view to the user
- this.renderPhase2.defer(1, this);
+ // remap these for backwards compat
+ onColWidthChange : function(){
+ this.updateColumns.apply(this, arguments);
+ },
+ onHeaderChange : function(){
+ this.updateHeaders.apply(this, arguments);
+ },
+ onHiddenChange : function(){
+ this.handleHiddenChange.apply(this, arguments);
+ },
+ onColumnMove : function(){
+ this.handleColumnMove.apply(this, arguments);
+ },
+ onColumnLock : function(){
+ this.handleLockChange.apply(this, arguments);
},
- renderPhase2 : function(){
- // render the rows now
+ onDataChange : function(){
this.refresh();
- if(this.grid.autoSizeColumns){
- this.autoSizeColumns();
- }
+ this.updateHeaderSortState();
},
- beforeInitialResize : function(){
-
+ onClear : function(){
+ this.refresh();
},
- onColumnSplitterMoved : function(i, w){
- this.userResized = true;
- var cm = this.grid.colModel;
- cm.setColumnWidth(i, w, true);
- var cid = cm.getColumnId(i);
- this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
- this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
- this.updateSplitters();
- this.layout();
- this.grid.fireEvent("columnresize", i, w);
+ onUpdate : function(ds, record){
+ this.refreshRow(record);
},
- syncRowHeights : function(startIndex, endIndex){
- if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
- startIndex = startIndex || 0;
- var mrows = this.getBodyTable().rows;
- var lrows = this.getLockedTable().rows;
- var len = mrows.length-1;
- endIndex = Math.min(endIndex || len, len);
- for(var i = startIndex; i <= endIndex; i++){
- var m = mrows[i], l = lrows[i];
- var h = Math.max(m.offsetHeight, l.offsetHeight);
- m.style.height = l.style.height = h + "px";
- }
+ refreshRow : function(record){
+ var ds = this.ds, index;
+ if(typeof record == 'number'){
+ index = record;
+ record = ds.getAt(index);
+ }else{
+ index = ds.indexOf(record);
}
+ this.insertRows(ds, index, index, true);
+ this.onRemove(ds, record, index+1, true);
+ this.syncRowHeights(index, index);
+ this.layout();
+ this.fireEvent("rowupdated", this, index, record);
},
- layout : function(initialRender, is2ndPass)
- {
- var g = this.grid;
- var auto = g.autoHeight;
- var scrollOffset = 16;
- var c = g.getGridEl(), cm = this.cm,
- expandCol = g.autoExpandColumn,
- gv = this;
- //c.beginMeasure();
+ onAdd : function(ds, records, index){
+ this.insertRows(ds, index, index + (records.length-1));
+ },
- if(!c.dom.offsetWidth){ // display:none?
- if(initialRender){
- this.lockedWrap.show();
- this.mainWrap.show();
- }
- return;
+ onRemove : function(ds, record, index, isUpdate){
+ if(isUpdate !== true){
+ this.fireEvent("beforerowremoved", this, index, record);
}
-
- var hasLock = this.cm.isLocked(0);
-
- var tbh = this.headerPanel.getHeight();
- var bbh = this.footerPanel.getHeight();
-
- if(auto){
- var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
- var newHeight = ch + c.getBorderWidth("tb");
- if(g.maxHeight){
- newHeight = Math.min(g.maxHeight, newHeight);
- }
- c.setHeight(newHeight);
+ var bt = this.getBodyTable(), lt = this.getLockedTable();
+ if(bt.rows[index]){
+ bt.firstChild.removeChild(bt.rows[index]);
}
-
- if(g.autoWidth){
- c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
+ if(lt.rows[index]){
+ lt.firstChild.removeChild(lt.rows[index]);
}
+ if(isUpdate !== true){
+ this.stripeRows(index);
+ this.syncRowHeights(index, index);
+ this.layout();
+ this.fireEvent("rowremoved", this, index, record);
+ }
+ },
- var s = this.scroller;
-
- var csize = c.getSize(true);
+ onLoad : function(){
+ this.scrollToTop();
+ },
- this.el.setSize(csize.width, csize.height);
+ /**
+ * Scrolls the grid to the top
+ */
+ scrollToTop : function(){
+ if(this.scroller){
+ this.scroller.dom.scrollTop = 0;
+ this.syncScroll();
+ }
+ },
- this.headerPanel.setWidth(csize.width);
- this.footerPanel.setWidth(csize.width);
+ /**
+ * Gets a panel in the header of the grid that can be used for toolbars etc.
+ * After modifying the contents of this panel a call to grid.autoSize() may be
+ * required to register any changes in size.
+ * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
+ * @return Roo.Element
+ */
+ getHeaderPanel : function(doShow){
+ if(doShow){
+ this.headerPanel.show();
+ }
+ return this.headerPanel;
+ },
- var hdHeight = this.mainHd.getHeight();
- var vw = csize.width;
- var vh = csize.height - (tbh + bbh);
+ /**
+ * Gets a panel in the footer of the grid that can be used for toolbars etc.
+ * After modifying the contents of this panel a call to grid.autoSize() may be
+ * required to register any changes in size.
+ * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
+ * @return Roo.Element
+ */
+ getFooterPanel : function(doShow){
+ if(doShow){
+ this.footerPanel.show();
+ }
+ return this.footerPanel;
+ },
- s.setSize(vw, vh);
+ initElements : function(){
+ var E = Roo.Element;
+ var el = this.grid.getGridEl().dom.firstChild;
+ var cs = el.childNodes;
- var bt = this.getBodyTable();
+ this.el = new E(el);
- if(cm.getLockedCount() == cm.config.length){
- bt = this.getLockedTable();
- }
+ this.focusEl = new E(el.firstChild);
+ this.focusEl.swallowEvent("click", true);
- var ltWidth = hasLock ?
- Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
-
- var scrollHeight = bt.offsetHeight;
- var scrollWidth = ltWidth + bt.offsetWidth;
- var vscroll = false, hscroll = false;
-
- this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
+ this.headerPanel = new E(cs[1]);
+ this.headerPanel.enableDisplayMode("block");
- var lw = this.lockedWrap, mw = this.mainWrap;
- var lb = this.lockedBody, mb = this.mainBody;
+ this.scroller = new E(cs[2]);
+ this.scrollSizer = new E(this.scroller.dom.firstChild);
- setTimeout(function(){
- var t = s.dom.offsetTop;
- var w = s.dom.clientWidth,
- h = s.dom.clientHeight;
+ this.lockedWrap = new E(cs[3]);
+ this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+ this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
- lw.setTop(t);
- lw.setSize(ltWidth, h);
+ this.mainWrap = new E(cs[4]);
+ this.mainHd = new E(this.mainWrap.dom.firstChild);
+ this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
- mw.setLeftTop(ltWidth, t);
- mw.setSize(w-ltWidth, h);
+ this.footerPanel = new E(cs[5]);
+ this.footerPanel.enableDisplayMode("block");
- lb.setHeight(h-hdHeight);
- mb.setHeight(h-hdHeight);
+ this.resizeProxy = new E(cs[6]);
- if(is2ndPass !== true && !gv.userResized && expandCol){
- // high speed resize without full column calculation
-
- var ci = cm.getIndexById(expandCol);
- if (ci < 0) {
- ci = cm.findColumnIndex(expandCol);
- }
- ci = Math.max(0, ci); // make sure it's got at least the first col.
- var expandId = cm.getColumnId(ci);
- var tw = cm.getTotalWidth(false);
- var currentWidth = cm.getColumnWidth(ci);
- var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
- if(currentWidth != cw){
- cm.setColumnWidth(ci, cw, true);
- gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
- gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
- gv.updateSplitters();
- gv.layout(false, true);
- }
- }
+ this.headerSelector = String.format(
+ '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
+ this.lockedHd.id, this.mainHd.id
+ );
- if(initialRender){
- lw.show();
- mw.show();
- }
- //c.endMeasure();
- }, 10);
+ this.splitterSelector = String.format(
+ '#{0} div.x-grid-split, #{1} div.x-grid-split',
+ this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
+ );
+ },
+ idToCssName : function(s)
+ {
+ return s.replace(/[^a-z0-9]+/ig, '-');
},
- onWindowResize : function(){
- if(!this.grid.monitorWindowResize || this.grid.autoHeight){
- return;
- }
- this.layout();
+ getHeaderCell : function(index){
+ return Roo.DomQuery.select(this.headerSelector)[index];
},
- appendFooter : function(parentEl){
- return null;
+ getHeaderCellMeasure : function(index){
+ return this.getHeaderCell(index).firstChild;
},
- sortAscText : "Sort Ascending",
- sortDescText : "Sort Descending",
- lockText : "Lock Column",
- unlockText : "Unlock Column",
- columnsText : "Columns",
-
- columnsWiderText : "Wider",
- columnsNarrowText : "Thinner"
-});
+ getHeaderCellText : function(index){
+ return this.getHeaderCell(index).firstChild.firstChild;
+ },
+ getLockedTable : function(){
+ return this.lockedBody.dom.firstChild;
+ },
-Roo.grid.GridView.ColumnDragZone = function(grid, hd){
- Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
- this.proxy.el.addClass('x-grid3-col-dd');
-};
+ getBodyTable : function(){
+ return this.mainBody.dom.firstChild;
+ },
-Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
- handleMouseDown : function(e){
+ getLockedRow : function(index){
+ return this.getLockedTable().rows[index];
+ },
+ getRow : function(index){
+ return this.getBodyTable().rows[index];
},
- callHandleMouseDown : function(e){
- Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- /**
- * @extends Roo.dd.DDProxy
- * @class Roo.grid.SplitDragZone
- * Support for Column Header resizing
- * @constructor
- * @param {Object} config
- */
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.SplitDragZone = function(grid, hd, hd2){
- this.grid = grid;
- this.view = grid.getView();
- this.proxy = this.view.resizeProxy;
- Roo.grid.SplitDragZone.superclass.constructor.call(
- this,
- hd, // ID
- "gridSplitters" + this.grid.getGridEl().id, // SGROUP
- { // CONFIG
- dragElId : Roo.id(this.proxy.dom),
- resizeFrame:false
+ getRowComposite : function(index){
+ if(!this.rowEl){
+ this.rowEl = new Roo.CompositeElementLite();
}
- );
-
- this.setHandleElId(Roo.id(hd));
- if (hd2 !== false) {
- this.setOuterHandleElId(Roo.id(hd2));
- }
-
- this.scroll = false;
-};
-Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
- fly: Roo.Element.fly,
-
- b4StartDrag : function(x, y){
- this.view.headersDisabled = true;
- var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
- this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
- );
- this.proxy.setHeight(h);
-
- // for old system colWidth really stored the actual width?
- // in bootstrap we tried using xs/ms/etc.. to do % sizing?
- // which in reality did not work.. - it worked only for fixed sizes
- // for resizable we need to use actual sizes.
- var w = this.cm.getColumnWidth(this.cellIndex);
- if (!this.view.mainWrap) {
- // bootstrap.
- w = this.view.getHeaderIndex(this.cellIndex).getWidth();
+ var els = [], lrow, mrow;
+ if(lrow = this.getLockedRow(index)){
+ els.push(lrow);
}
-
-
-
- // this was w-this.grid.minColumnWidth;
- // doesnt really make sense? - w = thie curren width or the rendered one?
- var minw = Math.max(w-this.grid.minColumnWidth, 0);
- this.resetConstraints();
- this.setXConstraint(minw, 1000);
- this.setYConstraint(0, 0);
- this.minX = x - minw;
- this.maxX = x + 1000;
- this.startPos = x;
- if (!this.view.mainWrap) { // this is Bootstrap code..
- this.getDragEl().style.display='block';
+ if(mrow = this.getRow(index)){
+ els.push(mrow);
}
-
- Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
+ this.rowEl.elements = els;
+ return this.rowEl;
+ },
+ /**
+ * Gets the 'td' of the cell
+ *
+ * @param {Integer} rowIndex row to select
+ * @param {Integer} colIndex column to select
+ *
+ * @return {Object}
+ */
+ getCell : function(rowIndex, colIndex){
+ var locked = this.cm.getLockedCount();
+ var source;
+ if(colIndex < locked){
+ source = this.lockedBody.dom.firstChild;
+ }else{
+ source = this.mainBody.dom.firstChild;
+ colIndex -= locked;
+ }
+ return source.rows[rowIndex].childNodes[colIndex];
},
+ getCellText : function(rowIndex, colIndex){
+ return this.getCell(rowIndex, colIndex).firstChild.firstChild;
+ },
- handleMouseDown : function(e){
- ev = Roo.EventObject.setEvent(e);
- var t = this.fly(ev.getTarget());
- if(t.hasClass("x-grid-split")){
- this.cellIndex = this.view.getCellIndex(t.dom);
- this.split = t.dom;
- this.cm = this.grid.colModel;
- if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
- Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
- }
+ getCellBox : function(cell){
+ var b = this.fly(cell).getBox();
+ if(Roo.isOpera){ // opera fails to report the Y
+ b.y = cell.offsetTop + this.mainBody.getY();
}
+ return b;
},
- endDrag : function(e){
- this.view.headersDisabled = false;
- var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
- var diff = endX - this.startPos;
- //
- var w = this.cm.getColumnWidth(this.cellIndex);
- if (!this.view.mainWrap) {
- w = 0;
+ getCellIndex : function(cell){
+ var id = String(cell.className).match(this.cellRE);
+ if(id){
+ return parseInt(id[1], 10);
}
- this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
+ return 0;
},
- autoOffset : function(){
- this.setDelta(0,0);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.GridDragZone = function(grid, config){
- this.view = grid.getView();
- Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
- if(this.view.lockedBody){
- this.setHandleElId(Roo.id(this.view.mainBody.dom));
- this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
- }
- this.scroll = false;
- this.grid = grid;
- this.ddel = document.createElement('div');
- this.ddel.className = 'x-grid-dd-wrap';
-};
+ findHeaderIndex : function(n){
+ var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+ return r ? this.getCellIndex(r) : false;
+ },
-Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
- ddGroup : "GridDD",
+ findHeaderCell : function(n){
+ var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+ return r ? r : false;
+ },
- getDragData : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var rowIndex = this.view.findRowIndex(t);
- var sm = this.grid.selModel;
-
- //Roo.log(rowIndex);
-
- if (sm.getSelectedCell) {
- // cell selection..
- if (!sm.getSelectedCell()) {
- return false;
- }
- if (rowIndex != sm.getSelectedCell()[0]) {
- return false;
- }
-
- }
- if (sm.getSelections && sm.getSelections().length < 1) {
+ findRowIndex : function(n){
+ if(!n){
return false;
}
-
-
- // before it used to all dragging of unseleted... - now we dont do that.
- if(rowIndex !== false){
-
- // if editorgrid..
-
-
- //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
-
- //if(!sm.isSelected(rowIndex) || e.hasModifier()){
- //
- //}
- if (e.hasModifier()){
- sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
+ var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
+ return r ? r.rowIndex : false;
+ },
+
+ findCellIndex : function(node){
+ var stop = this.el.dom;
+ while(node && node != stop){
+ if(this.findRE.test(node.className)){
+ return this.getCellIndex(node);
}
-
- Roo.log("getDragData");
-
- return {
- grid: this.grid,
- ddel: this.ddel,
- rowIndex: rowIndex,
- selections: sm.getSelections ? sm.getSelections() : (
- sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
- };
+ node = node.parentNode;
}
return false;
},
-
-
- onInitDrag : function(e){
- var data = this.dragData;
- this.ddel.innerHTML = this.grid.getDragDropText();
- this.proxy.update(this.ddel);
- // fire start drag?
- },
- afterRepair : function(){
- this.dragging = false;
+ getColumnId : function(index){
+ return this.cm.getColumnId(index);
},
- getRepairXY : function(e, data){
- return false;
+ getSplitters : function()
+ {
+ if(this.splitterSelector){
+ return Roo.DomQuery.select(this.splitterSelector);
+ }else{
+ return null;
+ }
},
- onEndDrag : function(data, e){
- // fire end drag?
+ getSplitter : function(index){
+ return this.getSplitters()[index];
},
- onValidDrop : function(dd, e, id){
- // fire drag drop?
- this.hideProxy();
+ onRowOver : function(e, t){
+ var row;
+ if((row = this.findRowIndex(t)) !== false){
+ this.getRowComposite(row).addClass("x-grid-row-over");
+ }
},
- beforeInvalidDrop : function(e, id){
-
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.grid.ColumnModel
- * @extends Roo.util.Observable
- * This is the default implementation of a ColumnModel used by the Grid. It defines
- * the columns in the grid.
- * <br>Usage:<br>
- <pre><code>
- var colModel = new Roo.grid.ColumnModel([
- {header: "Ticker", width: 60, sortable: true, locked: true},
- {header: "Company Name", width: 150, sortable: true},
- {header: "Market Cap.", width: 100, sortable: true},
- {header: "$ Sales", width: 100, sortable: true, renderer: money},
- {header: "Employees", width: 100, sortable: true, resizable: false}
- ]);
- </code></pre>
- * <p>
-
- * The config options listed for this class are options which may appear in each
- * individual column definition.
- * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
- * @constructor
- * @param {Object} config An Array of column config objects. See this class's
- * config objects for details.
-*/
-Roo.grid.ColumnModel = function(config){
- /**
- * The config passed into the constructor
- */
- this.config = []; //config;
- this.lookup = {};
-
- // if no id, create one
- // if the column does not have a dataIndex mapping,
- // map it to the order it is in the config
- for(var i = 0, len = config.length; i < len; i++){
- this.addColumn(config[i]);
-
- }
-
- /**
- * The width of columns which have no width specified (defaults to 100)
- * @type Number
- */
- this.defaultWidth = 100;
+ onRowOut : function(e, t){
+ var row;
+ if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
+ this.getRowComposite(row).removeClass("x-grid-row-over");
+ }
+ },
- /**
- * Default sortable of columns which have no sortable specified (defaults to false)
- * @type Boolean
- */
- this.defaultSortable = false;
+ renderHeaders : function(){
+ var cm = this.cm;
+ var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
+ var cb = [], lb = [], sb = [], lsb = [], p = {};
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ p.cellId = "x-grid-hd-0-" + i;
+ p.splitId = "x-grid-csplit-0-" + i;
+ p.id = cm.getColumnId(i);
+ p.value = cm.getColumnHeader(i) || "";
+ p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</) ? '' : p.value || "";
+ p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
+ if(!cm.isLocked(i)){
+ cb[cb.length] = ct.apply(p);
+ sb[sb.length] = st.apply(p);
+ }else{
+ lb[lb.length] = ct.apply(p);
+ lsb[lsb.length] = st.apply(p);
+ }
+ }
+ return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
+ ht.apply({cells: cb.join(""), splits:sb.join("")})];
+ },
- this.addEvents({
- /**
- * @event widthchange
- * Fires when the width of a column changes.
- * @param {ColumnModel} this
- * @param {Number} columnIndex The column index
- * @param {Number} newWidth The new width
- */
- "widthchange": true,
- /**
- * @event headerchange
- * Fires when the text of a header changes.
- * @param {ColumnModel} this
- * @param {Number} columnIndex The column index
- * @param {Number} newText The new header text
- */
- "headerchange": true,
- /**
- * @event hiddenchange
- * Fires when a column is hidden or "unhidden".
- * @param {ColumnModel} this
- * @param {Number} columnIndex The column index
- * @param {Boolean} hidden true if hidden, false otherwise
- */
- "hiddenchange": true,
- /**
- * @event columnmoved
- * Fires when a column is moved.
- * @param {ColumnModel} this
- * @param {Number} oldIndex
- * @param {Number} newIndex
- */
- "columnmoved" : true,
- /**
- * @event columlockchange
- * Fires when a column's locked state is changed
- * @param {ColumnModel} this
- * @param {Number} colIndex
- * @param {Boolean} locked true if locked
- */
- "columnlockchange" : true
- });
- Roo.grid.ColumnModel.superclass.constructor.call(this);
-};
-Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
- /**
- * @cfg {String} header [required] The header text to display in the Grid view.
- */
- /**
- * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
- */
- /**
- * @cfg {String} smHeader Header at Bootsrap Small width
- */
- /**
- * @cfg {String} mdHeader Header at Bootsrap Medium width
- */
- /**
- * @cfg {String} lgHeader Header at Bootsrap Large width
- */
- /**
- * @cfg {String} xlHeader Header at Bootsrap extra Large width
- */
- /**
- * @cfg {String} dataIndex The name of the field in the grid's {@link Roo.data.Store}'s
- * {@link Roo.data.Record} definition from which to draw the column's value. If not
- * specified, the column's index is used as an index into the Record's data Array.
- */
- /**
- * @cfg {Number} width The initial width in pixels of the column. Using this
- * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
- */
- /**
- * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
- * Defaults to the value of the {@link #defaultSortable} property.
- * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
- */
- /**
- * @cfg {Boolean} locked True to lock the column in place while scrolling the Grid. Defaults to false.
- */
- /**
- * @cfg {Boolean} fixed True if the column width cannot be changed. Defaults to false.
- */
- /**
- * @cfg {Boolean} resizable False to disable column resizing. Defaults to true.
- */
- /**
- * @cfg {Boolean} hidden True to hide the column. Defaults to false.
- */
- /**
- * @cfg {Function} renderer A function used to generate HTML markup for a cell
- * given the cell's data value. See {@link #setRenderer}. If not specified, the
- * default renderer returns the escaped data value. If an object is returned (bootstrap only)
- * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
- */
- /**
- * @cfg {Roo.grid.GridEditor} editor For grid editors - returns the grid editor
- */
- /**
- * @cfg {String} align (left|right) Set the CSS text-align property of the column. Defaults to undefined (left).
- */
- /**
- * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined (middle)
- */
- /**
- * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
- */
- /**
- * @cfg {String} tooltip mouse over tooltip text
- */
- /**
- * @cfg {Number} xs can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} lg can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} xl can be '0' for hidden at this size (number less than 12)
- */
- /**
- * Returns the id of the column at the specified index.
- * @param {Number} index The column index
- * @return {String} the id
- */
- getColumnId : function(index){
- return this.config[index].id;
+ updateHeaders : function(){
+ var html = this.renderHeaders();
+ this.lockedHd.update(html[0]);
+ this.mainHd.update(html[1]);
},
/**
- * Returns the column for a specified id.
- * @param {String} id The column id
- * @return {Object} the column
+ * Focuses the specified row.
+ * @param {Number} row The row index
*/
- getColumnById : function(id){
- return this.lookup[id];
+ focusRow : function(row)
+ {
+ //Roo.log('GridView.focusRow');
+ var x = this.scroller.dom.scrollLeft;
+ this.focusCell(row, 0, false);
+ this.scroller.dom.scrollLeft = x;
},
-
/**
- * Returns the column Object for a specified dataIndex.
- * @param {String} dataIndex The column dataIndex
- * @return {Object|Boolean} the column or false if not found
+ * Focuses the specified cell.
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
*/
- getColumnByDataIndex: function(dataIndex){
- var index = this.findColumnIndex(dataIndex);
- return index > -1 ? this.config[index] : false;
+ 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){
+ this.focusEl.focus();
+ }else{
+ this.focusEl.focus.defer(1, this.focusEl);
+ }
},
-
+
/**
- * Returns the index for a specified column id.
- * @param {String} id The column id
- * @return {Number} the index, or -1 if not found
+ * Scrolls the specified cell into view
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
*/
- getIndexById : function(id){
- for(var i = 0, len = this.config.length; i < len; i++){
- if(this.config[i].id == id){
- return i;
+ 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 null;
+ }
+ col = (col !== undefined ? col : 0);
+ var cm = this.grid.colModel;
+ while(cm.isHidden(col)){
+ col++;
+ }
+
+ var el = this.getCell(row, col);
+ if(!el){
+ return null;
+ }
+ var c = this.scroller.dom;
+
+ var ctop = parseInt(el.offsetTop, 10);
+ 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;
+ //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;
+ }else if(cright > sright){
+ c.scrollLeft = cright-c.clientWidth;
}
}
- return -1;
+
+ return el;
},
-
- /**
- * Returns the index for a specified column dataIndex.
- * @param {String} dataIndex The column dataIndex
- * @return {Number} the index, or -1 if not found
- */
-
- findColumnIndex : function(dataIndex){
- for(var i = 0, len = this.config.length; i < len; i++){
- if(this.config[i].dataIndex == dataIndex){
- return i;
- }
+
+ updateColumns : function(){
+ this.grid.stopEditing();
+ var cm = this.grid.colModel, colIds = this.getColumnIds();
+ //var totalWidth = cm.getTotalWidth();
+ var pos = 0;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ //if(cm.isHidden(i)) continue;
+ var w = cm.getColumnWidth(i);
+ this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+ this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
}
- return -1;
- },
-
-
- moveColumn : function(oldIndex, newIndex){
- var c = this.config[oldIndex];
- this.config.splice(oldIndex, 1);
- this.config.splice(newIndex, 0, c);
- this.dataMap = null;
- this.fireEvent("columnmoved", this, oldIndex, newIndex);
+ this.updateSplitters();
},
- isLocked : function(colIndex){
- return this.config[colIndex].locked === true;
+ generateRules : function(cm){
+ var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
+ Roo.util.CSS.removeStyleSheet(rulesId);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var cid = cm.getColumnId(i);
+ var align = '';
+ if(cm.config[i].align){
+ align = 'text-align:'+cm.config[i].align+';';
+ }
+ var hidden = '';
+ if(cm.isHidden(i)){
+ hidden = 'display:none;';
+ }
+ var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
+ ruleBuf.push(
+ this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
+ this.hdSelector, cid, " {\n", align, width, "}\n",
+ this.tdSelector, cid, " {\n",hidden,"\n}\n",
+ this.splitSelector, cid, " {\n", hidden , "\n}\n");
+ }
+ return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
},
- setLocked : function(colIndex, value, suppressEvent){
- if(this.isLocked(colIndex) == value){
- return;
- }
- this.config[colIndex].locked = value;
- if(!suppressEvent){
- this.fireEvent("columnlockchange", this, colIndex, value);
+ updateSplitters : function(){
+ var cm = this.cm, s = this.getSplitters();
+ if(s){ // splitters not created yet
+ var pos = 0, locked = true;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ if(cm.isHidden(i)) {
+ continue;
+ }
+ var w = cm.getColumnWidth(i); // make sure it's a number
+ if(!cm.isLocked(i) && locked){
+ pos = 0;
+ locked = false;
+ }
+ pos += w;
+ s[i].style.left = (pos-this.splitOffset) + "px";
+ }
}
},
- getTotalLockedWidth : function(){
- var totalWidth = 0;
- for(var i = 0; i < this.config.length; i++){
- if(this.isLocked(i) && !this.isHidden(i)){
- this.totalWidth += this.getColumnWidth(i);
- }
+ handleHiddenChange : function(colModel, colIndex, hidden){
+ if(hidden){
+ this.hideColumn(colIndex);
+ }else{
+ this.unhideColumn(colIndex);
}
- return totalWidth;
},
- getLockedCount : function(){
- for(var i = 0, len = this.config.length; i < len; i++){
- if(!this.isLocked(i)){
- return i;
- }
+ hideColumn : function(colIndex){
+ var cid = this.getColumnId(colIndex);
+ this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
+ this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
+ if(Roo.isSafari){
+ this.updateHeaders();
}
-
- return this.config.length;
+ this.updateSplitters();
+ this.layout();
},
- /**
- * Returns the number of columns.
- * @return {Number}
- */
- getColumnCount : function(visibleOnly){
- if(visibleOnly === true){
- var c = 0;
- for(var i = 0, len = this.config.length; i < len; i++){
- if(!this.isHidden(i)){
- c++;
- }
- }
- return c;
+ unhideColumn : function(colIndex){
+ var cid = this.getColumnId(colIndex);
+ this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
+ this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
+
+ if(Roo.isSafari){
+ this.updateHeaders();
}
- return this.config.length;
+ this.updateSplitters();
+ this.layout();
},
- /**
- * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
- * @param {Function} fn
- * @param {Object} scope (optional)
- * @return {Array} result
- */
- getColumnsBy : function(fn, scope){
- var r = [];
- for(var i = 0, len = this.config.length; i < len; i++){
- var c = this.config[i];
- if(fn.call(scope||this, c, i) === true){
- r[r.length] = c;
+ insertRows : function(dm, firstRow, lastRow, isUpdate){
+ if(firstRow == 0 && lastRow == dm.getCount()-1){
+ this.refresh();
+ }else{
+ if(!isUpdate){
+ this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
+ }
+ var s = this.getScrollState();
+ var markup = this.renderRows(firstRow, lastRow);
+ this.bufferRows(markup[0], this.getLockedTable(), firstRow);
+ this.bufferRows(markup[1], this.getBodyTable(), firstRow);
+ this.restoreScroll(s);
+ if(!isUpdate){
+ this.fireEvent("rowsinserted", this, firstRow, lastRow);
+ this.syncRowHeights(firstRow, lastRow);
+ this.stripeRows(firstRow);
+ this.layout();
}
}
- return r;
},
- /**
- * Returns true if the specified column is sortable.
- * @param {Number} col The column index
- * @return {Boolean}
- */
- isSortable : function(col){
- if(typeof this.config[col].sortable == "undefined"){
- return this.defaultSortable;
+ bufferRows : function(markup, target, index){
+ var before = null, trows = target.rows, tbody = target.tBodies[0];
+ if(index < trows.length){
+ before = trows[index];
}
- return this.config[col].sortable;
+ var b = document.createElement("div");
+ b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
+ var rows = b.firstChild.rows;
+ for(var i = 0, len = rows.length; i < len; i++){
+ if(before){
+ tbody.insertBefore(rows[0], before);
+ }else{
+ tbody.appendChild(rows[0]);
+ }
+ }
+ b.innerHTML = "";
+ b = null;
},
- /**
- * Returns the rendering (formatting) function defined for the column.
- * @param {Number} col The column index.
- * @return {Function} The function used to render the cell. See {@link #setRenderer}.
- */
- getRenderer : function(col){
- if(!this.config[col].renderer){
- return Roo.grid.ColumnModel.defaultRenderer;
+ deleteRows : function(dm, firstRow, lastRow){
+ if(dm.getRowCount()<1){
+ this.fireEvent("beforerefresh", this);
+ this.mainBody.update("");
+ this.lockedBody.update("");
+ this.fireEvent("refresh", this);
+ }else{
+ this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
+ var bt = this.getBodyTable();
+ var tbody = bt.firstChild;
+ var rows = bt.rows;
+ for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
+ tbody.removeChild(rows[firstRow]);
+ }
+ this.stripeRows(firstRow);
+ this.fireEvent("rowsdeleted", this, firstRow, lastRow);
}
- return this.config[col].renderer;
},
- /**
- * Sets the rendering (formatting) function for a column.
- * @param {Number} col The column index
- * @param {Function} fn The function to use to process the cell's raw data
- * to return HTML markup for the grid view. The render function is called with
- * the following parameters:<ul>
- * <li>Data value.</li>
- * <li>Cell metadata. An object in which you may set the following attributes:<ul>
- * <li>css A CSS style string to apply to the table cell.</li>
- * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
- * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
- * <li>Row index</li>
- * <li>Column index</li>
- * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
- */
- setRenderer : function(col, fn){
- this.config[col].renderer = fn;
+ updateRows : function(dataSource, firstRow, lastRow){
+ var s = this.getScrollState();
+ this.refresh();
+ this.restoreScroll(s);
},
- /**
- * Returns the width for the specified column.
- * @param {Number} col The column index
- * @param (optional) {String} gridSize bootstrap width size.
- * @return {Number}
- */
- getColumnWidth : function(col, gridSize)
- {
- var cfg = this.config[col];
-
- if (typeof(gridSize) == 'undefined') {
- return cfg.width * 1 || this.defaultWidth;
- }
- if (gridSize === false) { // if we set it..
- return cfg.width || false;
- }
- var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
-
- for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
- if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
- continue;
- }
- return cfg[ sizes[i] ];
- }
- return 1;
-
+ handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
+ if(!noRefresh){
+ this.refresh();
+ }
+ this.updateHeaderSortState();
},
- /**
- * Sets the width for a column.
- * @param {Number} col The column index
- * @param {Number} width The new width
- */
- setColumnWidth : function(col, width, suppressEvent){
- this.config[col].width = width;
- this.totalWidth = null;
- if(!suppressEvent){
- this.fireEvent("widthchange", this, col, width);
- }
+ getScrollState : function(){
+
+ var sb = this.scroller.dom;
+ return {left: sb.scrollLeft, top: sb.scrollTop};
},
- /**
- * Returns the total width of all columns.
- * @param {Boolean} includeHidden True to include hidden column widths
- * @return {Number}
- */
- getTotalWidth : function(includeHidden){
- if(!this.totalWidth){
- this.totalWidth = 0;
- for(var i = 0, len = this.config.length; i < len; i++){
- if(includeHidden || !this.isHidden(i)){
- this.totalWidth += this.getColumnWidth(i);
- }
+ stripeRows : function(startRow){
+ if(!this.grid.stripeRows || this.ds.getCount() < 1){
+ return;
+ }
+ startRow = startRow || 0;
+ var rows = this.getBodyTable().rows;
+ var lrows = this.getLockedTable().rows;
+ var cls = ' x-grid-row-alt ';
+ for(var i = startRow, len = rows.length; i < len; i++){
+ var row = rows[i], lrow = lrows[i];
+ var isAlt = ((i+1) % 2 == 0);
+ var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
+ if(isAlt == hasAlt){
+ continue;
+ }
+ if(isAlt){
+ row.className += " x-grid-row-alt";
+ }else{
+ row.className = row.className.replace("x-grid-row-alt", "");
+ }
+ if(lrow){
+ lrow.className = row.className;
}
}
- return this.totalWidth;
},
- /**
- * Returns the header for the specified column.
- * @param {Number} col The column index
- * @return {String}
- */
- getColumnHeader : function(col){
- return this.config[col].header;
+ restoreScroll : function(state){
+ //Roo.log('GridView.restoreScroll');
+ var sb = this.scroller.dom;
+ sb.scrollLeft = state.left;
+ sb.scrollTop = state.top;
+ this.syncScroll();
},
- /**
- * Sets the header for a column.
- * @param {Number} col The column index
- * @param {String} header The new header
- */
- setColumnHeader : function(col, header){
- this.config[col].header = header;
- this.fireEvent("headerchange", this, col, header);
+ syncScroll : function(){
+ //Roo.log('GridView.syncScroll');
+ var sb = this.scroller.dom;
+ var sh = this.mainHd.dom;
+ var bs = this.mainBody.dom;
+ var lv = this.lockedBody.dom;
+ sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
+ lv.scrollTop = bs.scrollTop = sb.scrollTop;
},
- /**
- * Returns the tooltip for the specified column.
- * @param {Number} col The column index
- * @return {String}
- */
- getColumnTooltip : function(col){
- return this.config[col].tooltip;
+ handleScroll : function(e){
+ this.syncScroll();
+ var sb = this.scroller.dom;
+ this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
+ e.stopEvent();
},
- /**
- * Sets the tooltip for a column.
- * @param {Number} col The column index
- * @param {String} tooltip The new tooltip
- */
- setColumnTooltip : function(col, tooltip){
- this.config[col].tooltip = tooltip;
+
+ handleWheel : function(e){
+ var d = e.getWheelDelta();
+ this.scroller.dom.scrollTop -= d*22;
+ // set this here to prevent jumpy scrolling on large tables
+ this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
+ e.stopEvent();
},
- /**
- * Returns the dataIndex for the specified column.
- * @param {Number} col The column index
- * @return {Number}
- */
- getDataIndex : function(col){
- return this.config[col].dataIndex;
+ renderRows : function(startRow, endRow){
+ // pull in all the crap needed to render rows
+ var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
+ var colCount = cm.getColumnCount();
+
+ if(ds.getCount() < 1){
+ return ["", ""];
+ }
+
+ // build a map for all the columns
+ var cs = [];
+ for(var i = 0; i < colCount; i++){
+ var name = cm.getDataIndex(i);
+ cs[i] = {
+ name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
+ renderer : cm.getRenderer(i),
+ id : cm.getColumnId(i),
+ locked : cm.isLocked(i),
+ has_editor : cm.isCellEditable(i)
+ };
+ }
+
+ startRow = startRow || 0;
+ endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+
+ // records to render
+ var rs = ds.getRange(startRow, endRow);
+
+ return this.doRender(cs, rs, ds, startRow, colCount, stripe);
},
- /**
- * Sets the dataIndex for a column.
- * @param {Number} col The column index
- * @param {Number} dataIndex The new dataIndex
- */
- setDataIndex : function(col, dataIndex){
- this.config[col].dataIndex = dataIndex;
+ // As much as I hate to duplicate code, this was branched because FireFox really hates
+ // [].join("") on strings. The performance difference was substantial enough to
+ // branch this function
+ doRender : Roo.isGecko ?
+ function(cs, rs, ds, startRow, colCount, stripe){
+ var ts = this.templates, ct = ts.cell, rt = ts.row;
+ // buffers
+ var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+
+ var hasListener = this.grid.hasListener('rowclass');
+ var rowcfg = {};
+ for(var j = 0, len = rs.length; j < len; j++){
+ r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
+ for(var i = 0; i < colCount; i++){
+ c = cs[i];
+ p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+ p.id = c.id;
+ p.css = p.attr = "";
+ p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+ if(p.value == undefined || p.value === "") {
+ p.value = " ";
+ }
+ if(c.has_editor){
+ p.css += ' x-grid-editable-cell';
+ }
+ if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
+ p.css += ' x-grid-dirty-cell';
+ }
+ var markup = ct.apply(p);
+ if(!c.locked){
+ cb+= markup;
+ }else{
+ lcb+= markup;
+ }
+ }
+ var alt = [];
+ if(stripe && ((rowIndex+1) % 2 == 0)){
+ alt.push("x-grid-row-alt")
+ }
+ if(r.dirty){
+ alt.push( " x-grid-dirty-row");
+ }
+ rp.cells = lcb;
+ if(this.getRowClass){
+ alt.push(this.getRowClass(r, rowIndex));
+ }
+ if (hasListener) {
+ rowcfg = {
+
+ record: r,
+ rowIndex : rowIndex,
+ rowClass : ''
+ };
+ this.grid.fireEvent('rowclass', this, rowcfg);
+ alt.push(rowcfg.rowClass);
+ }
+ rp.alt = alt.join(" ");
+ lbuf+= rt.apply(rp);
+ rp.cells = cb;
+ buf+= rt.apply(rp);
+ }
+ return [lbuf, buf];
+ } :
+ function(cs, rs, ds, startRow, colCount, stripe){
+ var ts = this.templates, ct = ts.cell, rt = ts.row;
+ // buffers
+ var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+ var hasListener = this.grid.hasListener('rowclass');
+
+ var rowcfg = {};
+ for(var j = 0, len = rs.length; j < len; j++){
+ r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
+ for(var i = 0; i < colCount; i++){
+ c = cs[i];
+ p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+ p.id = c.id;
+ p.css = p.attr = "";
+ p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+ if(p.value == undefined || p.value === "") {
+ p.value = " ";
+ }
+ //Roo.log(c);
+ if(c.has_editor){
+ p.css += ' x-grid-editable-cell';
+ }
+ if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
+ p.css += ' x-grid-dirty-cell'
+ }
+
+ var markup = ct.apply(p);
+ if(!c.locked){
+ cb[cb.length] = markup;
+ }else{
+ lcb[lcb.length] = markup;
+ }
+ }
+ var alt = [];
+ if(stripe && ((rowIndex+1) % 2 == 0)){
+ alt.push( "x-grid-row-alt");
+ }
+ if(r.dirty){
+ alt.push(" x-grid-dirty-row");
+ }
+ rp.cells = lcb;
+ if(this.getRowClass){
+ alt.push( this.getRowClass(r, rowIndex));
+ }
+ if (hasListener) {
+ rowcfg = {
+
+ record: r,
+ rowIndex : rowIndex,
+ rowClass : ''
+ };
+ this.grid.fireEvent('rowclass', this, rowcfg);
+ alt.push(rowcfg.rowClass);
+ }
+
+ rp.alt = alt.join(" ");
+ rp.cells = lcb.join("");
+ lbuf[lbuf.length] = rt.apply(rp);
+ rp.cells = cb.join("");
+ buf[buf.length] = rt.apply(rp);
+ }
+ return [lbuf.join(""), buf.join("")];
+ },
+
+ renderBody : function(){
+ var markup = this.renderRows();
+ var bt = this.templates.body;
+ return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
},
-
-
/**
- * Returns true if the cell is editable.
- * @param {Number} colIndex The column index
- * @param {Number} rowIndex The row index - this is nto actually used..?
- * @return {Boolean}
+ * Refreshes the grid
+ * @param {Boolean} headersToo
*/
- isCellEditable : function(colIndex, rowIndex){
- return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
+ refresh : function(headersToo){
+ this.fireEvent("beforerefresh", this);
+ this.grid.stopEditing();
+ var result = this.renderBody();
+ this.lockedBody.update(result[0]);
+ this.mainBody.update(result[1]);
+ if(headersToo === true){
+ this.updateHeaders();
+ this.updateColumns();
+ this.updateSplitters();
+ this.updateHeaderSortState();
+ }
+ this.syncRowHeights();
+ this.layout();
+ this.fireEvent("refresh", this);
},
- /**
- * Returns the editor defined for the cell/column.
- * return false or null to disable editing.
- * @param {Number} colIndex The column index
- * @param {Number} rowIndex The row index
- * @return {Object}
- */
- getCellEditor : function(colIndex, rowIndex){
- return this.config[colIndex].editor;
+ handleColumnMove : function(cm, oldIndex, newIndex){
+ this.indexMap = null;
+ var s = this.getScrollState();
+ this.refresh(true);
+ this.restoreScroll(s);
+ this.afterMove(newIndex);
},
- /**
- * Sets if a column is editable.
- * @param {Number} col The column index
- * @param {Boolean} editable True if the column is editable
- */
- setEditable : function(col, editable){
- this.config[col].editable = editable;
+ afterMove : function(colIndex){
+ 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){
+ var colIndex = this.getColumnIndexByDataIndex(dataIndex);
+ if(typeof colIndex == "undefined"){ // not present in grid
+ return;
+ }
+ var cm = this.grid.colModel;
+ var cell = this.getCell(rowIndex, colIndex);
+ var cellText = this.getCellText(rowIndex, colIndex);
- /**
- * Returns true if the column is hidden.
- * @param {Number} colIndex The column index
- * @return {Boolean}
- */
- isHidden : function(colIndex){
- return this.config[colIndex].hidden;
+ var p = {
+ cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
+ id : cm.getColumnId(colIndex),
+ css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
+ };
+ var renderer = cm.getRenderer(colIndex);
+ var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
+ if(typeof val == "undefined" || val === "") {
+ val = " ";
+ }
+ cellText.innerHTML = val;
+ cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
+ this.syncRowHeights(rowIndex, rowIndex);
},
-
- /**
- * Returns true if the column width cannot be changed
- */
- isFixed : function(colIndex){
- return this.config[colIndex].fixed;
+ calcColumnWidth : function(colIndex, maxRowsToMeasure){
+ var maxWidth = 0;
+ if(this.grid.autoSizeHeaders){
+ var h = this.getHeaderCellMeasure(colIndex);
+ maxWidth = Math.max(maxWidth, h.scrollWidth);
+ }
+ var tb, index;
+ if(this.cm.isLocked(colIndex)){
+ tb = this.getLockedTable();
+ index = colIndex;
+ }else{
+ tb = this.getBodyTable();
+ index = colIndex - this.cm.getLockedCount();
+ }
+ if(tb && tb.rows){
+ var rows = tb.rows;
+ var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
+ for(var i = 0; i < stopIndex; i++){
+ var cell = rows[i].childNodes[index].firstChild;
+ maxWidth = Math.max(maxWidth, cell.scrollWidth);
+ }
+ }
+ return maxWidth + /*margin for error in IE*/ 5;
},
-
/**
- * Returns true if the column can be resized
- * @return {Boolean}
+ * Autofit a column to its content.
+ * @param {Number} colIndex
+ * @param {Boolean} forceMinSize true to force the column to go smaller if possible
*/
- isResizable : function(colIndex){
- return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
+ autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
+ if(this.cm.isHidden(colIndex)){
+ return; // can't calc a hidden column
+ }
+ if(forceMinSize){
+ var cid = this.cm.getColumnId(colIndex);
+ this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
+ if(this.grid.autoSizeHeaders){
+ this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
+ }
+ }
+ var newWidth = this.calcColumnWidth(colIndex);
+ this.cm.setColumnWidth(colIndex,
+ Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
+ if(!suppressEvent){
+ this.grid.fireEvent("columnresize", colIndex, newWidth);
+ }
},
+
/**
- * Sets if a column is hidden.
- * @param {Number} colIndex The column index
- * @param {Boolean} hidden True if the column is hidden
+ * Autofits all columns to their content and then expands to fit any extra space in the grid
*/
- setHidden : function(colIndex, hidden){
- this.config[colIndex].hidden = hidden;
- this.totalWidth = null;
- this.fireEvent("hiddenchange", this, colIndex, hidden);
+ autoSizeColumns : function(){
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ for(var i = 0; i < colCount; i++){
+ this.autoSizeColumn(i, true, true);
+ }
+ if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
+ this.fitColumns();
+ }else{
+ this.updateColumns();
+ this.layout();
+ }
},
/**
- * Sets the editor for a column.
- * @param {Number} col The column index
- * @param {Object} editor The editor object
+ * Autofits all columns to the grid's width proportionate with their current size
+ * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
*/
- setEditor : function(col, editor){
- this.config[col].editor = editor;
- },
- /**
- * Add a column (experimental...) - defaults to adding to the end..
- * @param {Object} config
- */
- addColumn : function(c)
- {
-
- var i = this.config.length;
- this.config[i] = c;
-
- if(typeof c.dataIndex == "undefined"){
- c.dataIndex = i;
- }
- if(typeof c.renderer == "string"){
- c.renderer = Roo.util.Format[c.renderer];
- }
- if(typeof c.id == "undefined"){
- c.id = Roo.id();
+ fitColumns : function(reserveScrollSpace){
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ var cols = [];
+ var width = 0;
+ var i, w;
+ for (i = 0; i < colCount; i++){
+ if(!cm.isHidden(i) && !cm.isFixed(i)){
+ w = cm.getColumnWidth(i);
+ cols.push(i);
+ cols.push(w);
+ width += w;
+ }
}
- if(c.editor && c.editor.xtype){
- c.editor = Roo.factory(c.editor, Roo.grid);
+ var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
+ if(reserveScrollSpace){
+ avail -= 17;
}
- if(c.editor && c.editor.isFormField){
- c.editor = new Roo.grid.GridEditor(c.editor);
+ var frac = (avail - cm.getTotalWidth())/width;
+ while (cols.length){
+ w = cols.pop();
+ i = cols.pop();
+ cm.setColumnWidth(i, Math.floor(w + w*frac), true);
}
- this.lookup[c.id] = c;
- }
-
-});
-
-Roo.grid.ColumnModel.defaultRenderer = function(value)
-{
- if(typeof value == "object") {
- return value;
- }
- if(typeof value == "string" && value.length < 1){
- return " ";
- }
-
- return String.format("{0}", value);
-};
-
-// Alias for backwards compatibility
-Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.grid.AbstractSelectionModel
- * @extends Roo.util.Observable
- * @abstract
- * Abstract base class for grid SelectionModels. It provides the interface that should be
- * implemented by descendant classes. This class should not be directly instantiated.
- * @constructor
- */
-Roo.grid.AbstractSelectionModel = function(){
- this.locked = false;
- Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
-};
+ this.updateColumns();
+ this.layout();
+ },
-Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable, {
- /** @ignore Called by the grid automatically. Do not call directly. */
- init : function(grid){
- this.grid = grid;
- this.initEvents();
+ onRowSelect : function(rowIndex){
+ var row = this.getRowComposite(rowIndex);
+ row.addClass("x-grid-row-selected");
},
- /**
- * Locks the selections.
- */
- lock : function(){
- this.locked = true;
+ onRowDeselect : function(rowIndex){
+ var row = this.getRowComposite(rowIndex);
+ row.removeClass("x-grid-row-selected");
},
- /**
- * Unlocks the selections.
- */
- unlock : function(){
- this.locked = false;
+ onCellSelect : function(row, col){
+ var cell = this.getCell(row, col);
+ if(cell){
+ Roo.fly(cell).addClass("x-grid-cell-selected");
+ }
},
- /**
- * Returns true if the selections are locked.
- * @return {Boolean}
- */
- isLocked : function(){
- return this.locked;
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @extends Roo.grid.AbstractSelectionModel
- * @class Roo.grid.RowSelectionModel
- * The default SelectionModel used by {@link Roo.grid.Grid}.
- * It supports multiple selections and keyboard selection/navigation.
- * @constructor
- * @param {Object} config
- */
-Roo.grid.RowSelectionModel = function(config){
- Roo.apply(this, config);
- this.selections = new Roo.util.MixedCollection(false, function(o){
- return o.id;
- });
+ onCellDeselect : function(row, col){
+ var cell = this.getCell(row, col);
+ if(cell){
+ Roo.fly(cell).removeClass("x-grid-cell-selected");
+ }
+ },
- this.last = false;
- this.lastActive = false;
+ updateHeaderSortState : function(){
+
+ // 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;
+ }
+ //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]);
+ }
+ }
+
+
+
+ },
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selection changes
- * @param {SelectionModel} this
- */
- "selectionchange" : true,
- /**
- * @event afterselectionchange
- * Fires after the selection changes (eg. by key press or clicking)
- * @param {SelectionModel} this
- */
- "afterselectionchange" : true,
- /**
- * @event beforerowselect
- * Fires when a row is selected being selected, return false to cancel.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Boolean} keepExisting False if other selections will be cleared
- */
- "beforerowselect" : true,
- /**
- * @event rowselect
- * Fires when a row is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Roo.data.Record} r The record
- */
- "rowselect" : true,
- /**
- * @event rowdeselect
- * Fires when a row is deselected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- */
- "rowdeselect" : true
- });
- Roo.grid.RowSelectionModel.superclass.constructor.call(this);
- this.locked = false;
-};
-Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel, {
- /**
- * @cfg {Boolean} singleSelect
- * True to allow selection of only one row at a time (defaults to false)
- */
- singleSelect : false,
+ handleHeaderClick : function(g, index,e){
+
+ Roo.log("header click");
+
+ if (Roo.isTouch) {
+ // touch events on header are handled by context
+ this.handleHdCtx(g,index,e);
+ return;
+ }
+
+
+ if(this.headersDisabled){
+ return;
+ }
+ var dm = g.dataSource, cm = g.colModel;
+ if(!cm.isSortable(index)){
+ 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));
+ },
- // private
- initEvents : function(){
- if(!this.grid.enableDragDrop && !this.grid.enableDrag){
- this.grid.on("mousedown", this.handleMouseDown, this);
- }else{ // allow click to work like normal
- this.grid.on("rowclick", this.handleDragableRowClick, this);
+ destroy : function(){
+ if(this.colMenu){
+ this.colMenu.removeAll();
+ Roo.menu.MenuMgr.unregister(this.colMenu);
+ this.colMenu.getEl().remove();
+ delete this.colMenu;
}
- // bootstrap does not have a view..
- var view = this.grid.view ? this.grid.view : this.grid;
- this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
- "up" : function(e){
- if(!e.shiftKey){
- this.selectPrevious(e.shiftKey);
- }else if(this.last !== false && this.lastActive !== false){
- var last = this.last;
- this.selectRange(this.last, this.lastActive-1);
- view.focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
+ if(this.hmenu){
+ this.hmenu.removeAll();
+ Roo.menu.MenuMgr.unregister(this.hmenu);
+ this.hmenu.getEl().remove();
+ delete this.hmenu;
+ }
+ if(this.grid.enableColumnMove){
+ var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+ if(dds){
+ for(var dd in dds){
+ if(!dds[dd].config.isTarget && dds[dd].dragElId){
+ var elid = dds[dd].dragElId;
+ dds[dd].unreg();
+ Roo.get(elid).remove();
+ } else if(dds[dd].config.isTarget){
+ dds[dd].proxyTop.remove();
+ dds[dd].proxyBottom.remove();
+ dds[dd].unreg();
}
- }else{
- this.selectFirstRow();
- }
- this.fireEvent("afterselectionchange", this);
- },
- "down" : function(e){
- if(!e.shiftKey){
- this.selectNext(e.shiftKey);
- }else if(this.last !== false && this.lastActive !== false){
- var last = this.last;
- this.selectRange(this.last, this.lastActive+1);
- view.focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
+ if(Roo.dd.DDM.locationCache[dd]){
+ delete Roo.dd.DDM.locationCache[dd];
}
- }else{
- this.selectFirstRow();
}
- this.fireEvent("afterselectionchange", this);
- },
- scope: this
- });
+ delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+ }
+ }
+ Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
+ this.bind(null, null);
+ Roo.EventManager.removeResizeListener(this.onWindowResize, this);
+ },
-
- view.on("refresh", this.onRefresh, this);
- view.on("rowupdated", this.onRowUpdated, this);
- view.on("rowremoved", this.onRemove, this);
+ handleLockChange : function(){
+ this.refresh(true);
},
- // private
- onRefresh : function(){
- var ds = this.grid.ds, i, v = this.grid.view;
- var s = this.selections;
- s.each(function(r){
- if((i = ds.indexOfId(r.id)) != -1){
- v.onRowSelect(i);
- s.add(ds.getAt(i)); // updating the selection relate data
- }else{
- s.remove(r);
- }
- });
+ onDenyColumnLock : function(){
+
},
- // private
- onRemove : function(v, index, r){
- this.selections.remove(r);
+ onDenyColumnHide : function(){
+
},
- // private
- onRowUpdated : function(v, index, r){
- if(this.isSelected(r)){
- v.onRowSelect(index);
+ handleHdMenuClick : function(item){
+ var index = this.hdCtxIndex;
+ var cm = this.cm, ds = this.ds;
+ switch(item.id){
+ case "asc":
+ ds.sort(cm.getDataIndex(index), "ASC");
+ break;
+ case "desc":
+ ds.sort(cm.getDataIndex(index), "DESC");
+ break;
+ case "lock":
+ var lc = cm.getLockedCount();
+ if(cm.getColumnCount(true) <= lc+1){
+ this.onDenyColumnLock();
+ return;
+ }
+ if(lc != index){
+ cm.setLocked(index, true, true);
+ cm.moveColumn(index, lc);
+ this.grid.fireEvent("columnmove", index, lc);
+ }else{
+ cm.setLocked(index, true);
+ }
+ break;
+ case "unlock":
+ var lc = cm.getLockedCount();
+ if((lc-1) != index){
+ cm.setLocked(index, false, true);
+ cm.moveColumn(index, lc-1);
+ this.grid.fireEvent("columnmove", index, lc-1);
+ }else{
+ cm.setLocked(index, false);
+ }
+ break;
+ case 'wider': // used to expand cols on touch..
+ case 'narrow':
+ var cw = cm.getColumnWidth(index);
+ cw += (item.id == 'wider' ? 1 : -1) * 50;
+ cw = Math.max(0, cw);
+ cw = Math.min(cw,4000);
+ cm.setColumnWidth(index, cw);
+ break;
+
+ default:
+ index = cm.getIndexById(item.id.substr(4));
+ if(index != -1){
+ if(item.checked && cm.getColumnCount(true) <= 1){
+ this.onDenyColumnHide();
+ return false;
+ }
+ cm.setHidden(index, item.checked);
+ }
}
+ return true;
},
- /**
- * Select records.
- * @param {Array} records The records to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRecords : function(records, keepExisting){
- if(!keepExisting){
- this.clearSelections();
+ beforeColMenuShow : function(){
+ var cm = this.cm, colCount = cm.getColumnCount();
+ this.colMenu.removeAll();
+
+ var items = [];
+ for(var i = 0; i < colCount; i++){
+ items.push({
+ id: "col-"+cm.getColumnId(i),
+ text: cm.getColumnHeader(i),
+ checked: !cm.isHidden(i),
+ hideOnClick:false
+ });
}
- var ds = this.grid.ds;
- for(var i = 0, len = records.length; i < len; i++){
- this.selectRow(ds.indexOf(records[i]), true);
+
+ if (this.grid.sortColMenu) {
+ items.sort(function(a,b) {
+ if (a.text == b.text) {
+ return 0;
+ }
+ return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
+ });
+ }
+
+ for(var i = 0; i < colCount; i++){
+ this.colMenu.add(new Roo.menu.CheckItem(items[i]));
}
},
- /**
- * Gets the number of selected rows.
- * @return {Number}
- */
- getCount : function(){
- return this.selections.length;
+ handleHdCtx : function(g, index, e){
+ e.stopEvent();
+ var hd = this.getHeaderCell(index);
+ this.hdCtxIndex = index;
+ var ms = this.hmenu.items, cm = this.cm;
+ ms.get("asc").setDisabled(!cm.isSortable(index));
+ ms.get("desc").setDisabled(!cm.isSortable(index));
+ if(this.grid.enableColLock !== false){
+ ms.get("lock").setDisabled(cm.isLocked(index));
+ ms.get("unlock").setDisabled(!cm.isLocked(index));
+ }
+ this.hmenu.show(hd, "tl-bl");
},
- /**
- * Selects the first row in the grid.
- */
- selectFirstRow : function(){
- this.selectRow(0);
+ handleHdOver : function(e){
+ var hd = this.findHeaderCell(e.getTarget());
+ if(hd && !this.headersDisabled){
+ if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
+ this.fly(hd).addClass("x-grid-hd-over");
+ }
+ }
},
- /**
- * Select the last row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectLastRow : function(keepExisting){
- this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
+ handleHdOut : function(e){
+ var hd = this.findHeaderCell(e.getTarget());
+ if(hd){
+ this.fly(hd).removeClass("x-grid-hd-over");
+ }
},
- /**
- * Selects the row immediately following the last selected row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectNext : function(keepExisting){
- if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
- this.selectRow(this.last+1, keepExisting);
- var view = this.grid.view ? this.grid.view : this.grid;
- view.focusRow(this.last);
+ handleSplitDblClick : function(e, t){
+ var i = this.getCellIndex(t);
+ if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
+ this.autoSizeColumn(i, true);
+ this.layout();
}
},
- /**
- * Selects the row that precedes the last selected row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectPrevious : function(keepExisting){
- if(this.last){
- this.selectRow(this.last-1, keepExisting);
- var view = this.grid.view ? this.grid.view : this.grid;
- view.focusRow(this.last);
+ render : function(){
+
+ var cm = this.cm;
+ var colCount = cm.getColumnCount();
+
+ if(this.grid.monitorWindowResize === true){
+ Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
}
- },
+ var header = this.renderHeaders();
+ var body = this.templates.body.apply({rows:""});
+ var html = this.templates.master.apply({
+ lockedBody: body,
+ body: body,
+ lockedHeader: header[0],
+ header: header[1]
+ });
- /**
- * Returns the selected records
- * @return {Array} Array of selected records
- */
- getSelections : function(){
- return [].concat(this.selections.items);
- },
+ //this.updateColumns();
- /**
- * Returns the first selected record.
- * @return {Record}
- */
- getSelected : function(){
- return this.selections.itemAt(0);
- },
+ this.grid.getGridEl().dom.innerHTML = html;
+ this.initElements();
+
+ // a kludge to fix the random scolling effect in webkit
+ this.el.on("scroll", function() {
+ this.el.dom.scrollTop=0; // hopefully not recursive..
+ },this);
- /**
- * Clears all selections.
- */
- clearSelections : function(fast){
- if(this.locked) {
- return;
- }
- if(fast !== true){
- var ds = this.grid.ds;
- var s = this.selections;
- s.each(function(r){
- this.deselectRow(ds.indexOfId(r.id));
- }, this);
- s.clear();
- }else{
- this.selections.clear();
- }
- this.last = false;
- },
+ this.scroller.on("scroll", this.handleScroll, this);
+ this.lockedBody.on("mousewheel", this.handleWheel, this);
+ this.mainBody.on("mousewheel", this.handleWheel, this);
+
+ this.mainHd.on("mouseover", this.handleHdOver, this);
+ this.mainHd.on("mouseout", this.handleHdOut, this);
+ this.mainHd.on("dblclick", this.handleSplitDblClick, this,
+ {delegate: "."+this.splitClass});
+ this.lockedHd.on("mouseover", this.handleHdOver, this);
+ this.lockedHd.on("mouseout", this.handleHdOut, this);
+ this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
+ {delegate: "."+this.splitClass});
- /**
- * Selects all rows.
- */
- selectAll : function(){
- if(this.locked) {
- return;
- }
- this.selections.clear();
- for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
- this.selectRow(i, true);
+ if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
+ new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
}
- },
- /**
- * Returns True if there is a selection.
- * @return {Boolean}
- */
- hasSelection : function(){
- return this.selections.length > 0;
- },
+ this.updateSplitters();
- /**
- * Returns True if the specified row is selected.
- * @param {Number/Record} record The record or index of the record to check
- * @return {Boolean}
- */
- isSelected : function(index){
- var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
- return (r && this.selections.key(r.id) ? true : false);
- },
+ if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
+ new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ }
- /**
- * Returns True if the specified record id is selected.
- * @param {String} id The id of record to check
- * @return {Boolean}
- */
- isIdSelected : function(id){
- return (this.selections.key(id) ? true : false);
- },
+ if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
+ this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
+ this.hmenu.add(
+ {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
+ {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
+ );
+ if(this.grid.enableColLock !== false){
+ this.hmenu.add('-',
+ {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
+ {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
+ );
+ }
+ if (Roo.isTouch) {
+ this.hmenu.add('-',
+ {id:"wider", text: this.columnsWiderText},
+ {id:"narrow", text: this.columnsNarrowText }
+ );
+
+
+ }
+
+ if(this.grid.enableColumnHide !== false){
- // private
- handleMouseDown : function(e, t)
- {
- var view = this.grid.view ? this.grid.view : this.grid;
- var rowIndex;
- if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
- return;
- };
- if(e.shiftKey && this.last !== false){
- var last = this.last;
- this.selectRange(last, rowIndex, e.ctrlKey);
- this.last = last; // reset the last
- view.focusRow(rowIndex);
- }else{
- var isSelected = this.isSelected(rowIndex);
- if(e.button !== 0 && isSelected){
- view.focusRow(rowIndex);
- }else if(e.ctrlKey && isSelected){
- this.deselectRow(rowIndex);
- }else if(!isSelected){
- this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
- view.focusRow(rowIndex);
+ this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
+ this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
+ this.colMenu.on("itemclick", this.handleHdMenuClick, this);
+
+ this.hmenu.add('-',
+ {id:"columns", text: this.columnsText, menu: this.colMenu}
+ );
}
- }
- this.fireEvent("afterselectionchange", this);
- },
- // private
- handleDragableRowClick : function(grid, rowIndex, e)
- {
- if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
- this.selectRow(rowIndex, false);
- var view = this.grid.view ? this.grid.view : this.grid;
- view.focusRow(rowIndex);
- this.fireEvent("afterselectionchange", this);
- }
- },
-
- /**
- * Selects multiple rows.
- * @param {Array} rows Array of the indexes of the row to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRows : function(rows, keepExisting){
- if(!keepExisting){
- this.clearSelections();
- }
- for(var i = 0, len = rows.length; i < len; i++){
- this.selectRow(rows[i], true);
- }
- },
+ this.hmenu.on("itemclick", this.handleHdMenuClick, this);
- /**
- * Selects a range of rows. All rows in between startRow and endRow are also selected.
- * @param {Number} startRow The index of the first row in the range
- * @param {Number} endRow The index of the last row in the range
- * @param {Boolean} keepExisting (optional) True to retain existing selections
- */
- selectRange : function(startRow, endRow, keepExisting){
- if(this.locked) {
- return;
+ this.grid.on("headercontextmenu", this.handleHdCtx, this);
}
- if(!keepExisting){
- this.clearSelections();
+
+ if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
+ this.dd = new Roo.grid.GridDragZone(this.grid, {
+ ddGroup : this.grid.ddGroup || 'GridDD'
+ });
+
}
- if(startRow <= endRow){
- for(var i = startRow; i <= endRow; i++){
- this.selectRow(i, true);
+
+ /*
+ for(var i = 0; i < colCount; i++){
+ if(cm.isHidden(i)){
+ this.hideColumn(i);
}
- }else{
- for(var i = startRow; i >= endRow; i--){
- this.selectRow(i, true);
+ if(cm.config[i].align){
+ this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
+ this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
}
- }
+ }*/
+
+ this.updateHeaderSortState();
+
+ this.beforeInitialResize();
+ this.layout(true);
+
+ // two part rendering gives faster view to the user
+ this.renderPhase2.defer(1, this);
},
- /**
- * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
- * @param {Number} startRow The index of the first row in the range
- * @param {Number} endRow The index of the last row in the range
- */
- deselectRange : function(startRow, endRow, preventViewNotify){
- if(this.locked) {
- return;
- }
- for(var i = startRow; i <= endRow; i++){
- this.deselectRow(i, preventViewNotify);
+ renderPhase2 : function(){
+ // render the rows now
+ this.refresh();
+ if(this.grid.autoSizeColumns){
+ this.autoSizeColumns();
}
},
- /**
- * Selects a row.
- * @param {Number} row The index of the row to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRow : function(index, keepExisting, preventViewNotify){
- if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
- return;
- }
- if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
- if(!keepExisting || this.singleSelect){
- this.clearSelections();
- }
- var r = this.grid.ds.getAt(index);
- this.selections.add(r);
- this.last = this.lastActive = index;
- if(!preventViewNotify){
- var view = this.grid.view ? this.grid.view : this.grid;
- view.onRowSelect(index);
+ beforeInitialResize : function(){
+
+ },
+
+ onColumnSplitterMoved : function(i, w){
+ this.userResized = true;
+ var cm = this.grid.colModel;
+ cm.setColumnWidth(i, w, true);
+ var cid = cm.getColumnId(i);
+ this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+ this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+ this.updateSplitters();
+ this.layout();
+ this.grid.fireEvent("columnresize", i, w);
+ },
+
+ syncRowHeights : function(startIndex, endIndex){
+ if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
+ startIndex = startIndex || 0;
+ var mrows = this.getBodyTable().rows;
+ var lrows = this.getLockedTable().rows;
+ var len = mrows.length-1;
+ endIndex = Math.min(endIndex || len, len);
+ for(var i = startIndex; i <= endIndex; i++){
+ var m = mrows[i], l = lrows[i];
+ var h = Math.max(m.offsetHeight, l.offsetHeight);
+ m.style.height = l.style.height = h + "px";
}
- this.fireEvent("rowselect", this, index, r);
- this.fireEvent("selectionchange", this);
}
},
- /**
- * Deselects a row.
- * @param {Number} row The index of the row to deselect
- */
- deselectRow : function(index, preventViewNotify){
- if(this.locked) {
+ layout : function(initialRender, is2ndPass)
+ {
+ var g = this.grid;
+ var auto = g.autoHeight;
+ var scrollOffset = 16;
+ var c = g.getGridEl(), cm = this.cm,
+ expandCol = g.autoExpandColumn,
+ gv = this;
+ //c.beginMeasure();
+
+ if(!c.dom.offsetWidth){ // display:none?
+ if(initialRender){
+ this.lockedWrap.show();
+ this.mainWrap.show();
+ }
return;
}
- if(this.last == index){
- this.last = false;
- }
- if(this.lastActive == index){
- this.lastActive = false;
- }
- var r = this.grid.ds.getAt(index);
- this.selections.remove(r);
- if(!preventViewNotify){
- var view = this.grid.view ? this.grid.view : this.grid;
- view.onRowDeselect(index);
- }
- this.fireEvent("rowdeselect", this, index);
- this.fireEvent("selectionchange", this);
- },
- // private
- restoreLast : function(){
- if(this._last){
- this.last = this._last;
- }
- },
+ var hasLock = this.cm.isLocked(0);
- // private
- acceptsNav : function(row, col, cm){
- return !cm.isHidden(col) && cm.isCellEditable(col, row);
- },
+ var tbh = this.headerPanel.getHeight();
+ var bbh = this.footerPanel.getHeight();
- // private
- onEditorKey : function(field, e){
- var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
- if(k == e.TAB){
- e.stopEvent();
- ed.completeEdit();
- if(e.shiftKey){
- newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- }
- }else if(k == e.ENTER && !e.ctrlKey){
- e.stopEvent();
- ed.completeEdit();
- if(e.shiftKey){
- newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
+ if(auto){
+ var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
+ var newHeight = ch + c.getBorderWidth("tb");
+ if(g.maxHeight){
+ newHeight = Math.min(g.maxHeight, newHeight);
}
- }else if(k == e.ESC){
- ed.cancelEdit();
+ c.setHeight(newHeight);
}
- if(newCell){
- g.startEditing(newCell[0], newCell[1]);
+
+ if(g.autoWidth){
+ c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.grid.CellSelectionModel
- * @extends Roo.grid.AbstractSelectionModel
- * This class provides the basic implementation for cell selection in a grid.
- * @constructor
- * @param {Object} config The object containing the configuration of this model.
- * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
- */
-Roo.grid.CellSelectionModel = function(config){
- Roo.apply(this, config);
- this.selection = null;
+ var s = this.scroller;
- this.addEvents({
- /**
- * @event beforerowselect
- * Fires before a cell is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected row index
- * @param {Number} colIndex The selected cell index
- */
- "beforecellselect" : true,
- /**
- * @event cellselect
- * Fires when a cell is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected row index
- * @param {Number} colIndex The selected cell index
- */
- "cellselect" : true,
- /**
- * @event selectionchange
- * Fires when the active selection changes.
- * @param {SelectionModel} this
- * @param {Object} selection null for no selection or an object (o) with two properties
- <ul>
- <li>o.record: the record object for the row the selection is in</li>
- <li>o.cell: An array of [rowIndex, columnIndex]</li>
- </ul>
- */
- "selectionchange" : true,
- /**
- * @event tabend
- * Fires when the tab (or enter) was pressed on the last editable cell
- * You can use this to trigger add new row.
- * @param {SelectionModel} this
- */
- "tabend" : true,
- /**
- * @event beforeeditnext
- * Fires before the next editable sell is made active
- * You can use this to skip to another cell or fire the tabend
- * if you set cell to false
- * @param {Object} eventdata object : { cell : [ row, col ] }
- */
- "beforeeditnext" : true
- });
- Roo.grid.CellSelectionModel.superclass.constructor.call(this);
-};
+ var csize = c.getSize(true);
-Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel, {
-
- enter_is_tab: false,
+ this.el.setSize(csize.width, csize.height);
- /** @ignore */
- initEvents : function(){
- this.grid.on("mousedown", this.handleMouseDown, this);
- this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
- var view = this.grid.view;
- view.on("refresh", this.onViewChange, this);
- view.on("rowupdated", this.onRowUpdated, this);
- view.on("beforerowremoved", this.clearSelections, this);
- view.on("beforerowsinserted", this.clearSelections, this);
- if(this.grid.isEditor){
- this.grid.on("beforeedit", this.beforeEdit, this);
- }
- },
+ this.headerPanel.setWidth(csize.width);
+ this.footerPanel.setWidth(csize.width);
- //private
- beforeEdit : function(e){
- this.select(e.row, e.column, false, true, e.record);
- },
+ var hdHeight = this.mainHd.getHeight();
+ var vw = csize.width;
+ var vh = csize.height - (tbh + bbh);
- //private
- onRowUpdated : function(v, index, r){
- if(this.selection && this.selection.record == r){
- v.onCellSelect(index, this.selection.cell[1]);
+ s.setSize(vw, vh);
+
+ var bt = this.getBodyTable();
+
+ if(cm.getLockedCount() == cm.config.length){
+ bt = this.getLockedTable();
}
- },
+
+ var ltWidth = hasLock ?
+ Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
- //private
- onViewChange : function(){
- this.clearSelections(true);
- },
+ var scrollHeight = bt.offsetHeight;
+ var scrollWidth = ltWidth + bt.offsetWidth;
+ var vscroll = false, hscroll = false;
- /**
- * Returns the currently selected cell,.
- * @return {Array} The selected cell (row, column) or null if none selected.
- */
- getSelectedCell : function(){
- return this.selection ? this.selection.cell : null;
- },
+ this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
- /**
- * Clears all selections.
- * @param {Boolean} true to prevent the gridview from being notified about the change.
- */
- clearSelections : function(preventNotify){
- var s = this.selection;
- if(s){
- if(preventNotify !== true){
- this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
+ var lw = this.lockedWrap, mw = this.mainWrap;
+ var lb = this.lockedBody, mb = this.mainBody;
+
+ setTimeout(function(){
+ var t = s.dom.offsetTop;
+ var w = s.dom.clientWidth,
+ h = s.dom.clientHeight;
+
+ lw.setTop(t);
+ lw.setSize(ltWidth, h);
+
+ mw.setLeftTop(ltWidth, t);
+ mw.setSize(w-ltWidth, h);
+
+ lb.setHeight(h-hdHeight);
+ mb.setHeight(h-hdHeight);
+
+ if(is2ndPass !== true && !gv.userResized && expandCol){
+ // high speed resize without full column calculation
+
+ var ci = cm.getIndexById(expandCol);
+ if (ci < 0) {
+ ci = cm.findColumnIndex(expandCol);
+ }
+ ci = Math.max(0, ci); // make sure it's got at least the first col.
+ var expandId = cm.getColumnId(ci);
+ var tw = cm.getTotalWidth(false);
+ var currentWidth = cm.getColumnWidth(ci);
+ var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
+ if(currentWidth != cw){
+ cm.setColumnWidth(ci, cw, true);
+ gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+ gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+ gv.updateSplitters();
+ gv.layout(false, true);
+ }
}
- this.selection = null;
- this.fireEvent("selectionchange", this, null);
- }
- },
- /**
- * Returns true if there is a selection.
- * @return {Boolean}
- */
- hasSelection : function(){
- return this.selection ? true : false;
+ if(initialRender){
+ lw.show();
+ mw.show();
+ }
+ //c.endMeasure();
+ }, 10);
},
- /** @ignore */
- handleMouseDown : function(e, t){
- var v = this.grid.getView();
- if(this.isLocked()){
+ onWindowResize : function(){
+ if(!this.grid.monitorWindowResize || this.grid.autoHeight){
return;
- };
- var row = v.findRowIndex(t);
- var cell = v.findCellIndex(t);
- if(row !== false && cell !== false){
- this.select(row, cell);
}
+ this.layout();
},
- /**
- * Selects a cell.
- * @param {Number} rowIndex
- * @param {Number} collIndex
- */
- select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
- if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
- this.clearSelections();
- r = r || this.grid.dataSource.getAt(rowIndex);
- this.selection = {
- record : r,
- cell : [rowIndex, colIndex]
- };
- if(!preventViewNotify){
- var v = this.grid.getView();
- v.onCellSelect(rowIndex, colIndex);
- if(preventFocus !== true){
- v.focusCell(rowIndex, colIndex);
- }
- }
- this.fireEvent("cellselect", this, rowIndex, colIndex);
- this.fireEvent("selectionchange", this, this.selection);
- }
+ appendFooter : function(parentEl){
+ return null;
},
- //private
- isSelectable : function(rowIndex, colIndex, cm){
- return !cm.isHidden(colIndex);
- },
+ sortAscText : "Sort Ascending",
+ sortDescText : "Sort Descending",
+ lockText : "Lock Column",
+ unlockText : "Unlock Column",
+ columnsText : "Columns",
+
+ columnsWiderText : "Wider",
+ columnsNarrowText : "Thinner"
+});
- /** @ignore */
- handleKeyDown : function(e){
- //Roo.log('Cell Sel Model handleKeyDown');
- if(!e.isNavKeyPress()){
- return;
- }
- var g = this.grid, s = this.selection;
- if(!s){
- e.stopEvent();
- var cell = g.walkCells(0, 0, 1, this.isSelectable, this);
- if(cell){
- this.select(cell[0], cell[1]);
- }
- return;
- }
- var sm = this;
- var walk = function(row, col, step){
- return g.walkCells(row, col, step, sm.isSelectable, sm);
- };
- var k = e.getKey(), r = s.cell[0], c = s.cell[1];
- var newCell;
-
+Roo.grid.GridView.ColumnDragZone = function(grid, hd){
+ Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
+ this.proxy.el.addClass('x-grid3-col-dd');
+};
- switch(k){
- case e.TAB:
- // handled by onEditorKey
- if (g.isEditor && g.editing) {
- return;
- }
- if(e.shiftKey) {
- newCell = walk(r, c-1, -1);
- } else {
- newCell = walk(r, c+1, 1);
- }
- break;
-
- case e.DOWN:
- newCell = walk(r+1, c, 1);
- break;
-
- case e.UP:
- newCell = walk(r-1, c, -1);
- break;
-
- case e.RIGHT:
- newCell = walk(r, c+1, 1);
- break;
-
- case e.LEFT:
- newCell = walk(r, c-1, -1);
- break;
-
- case e.ENTER:
-
- if(g.isEditor && !g.editing){
- g.startEditing(r, c);
- e.stopEvent();
- return;
- }
-
-
- break;
- };
- if(newCell){
- this.select(newCell[0], newCell[1]);
- e.stopEvent();
-
- }
- },
+Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
+ handleMouseDown : function(e){
- acceptsNav : function(row, col, cm){
- return !cm.isHidden(col) && cm.isCellEditable(col, row);
},
- /**
- * Selects a cell.
- * @param {Number} field (not used) - as it's normally used as a listener
- * @param {Number} e - event - fake it by using
- *
- * var e = Roo.EventObjectImpl.prototype;
- * e.keyCode = e.TAB
- *
- *
- */
- onEditorKey : function(field, e){
-
- var k = e.getKey(),
- newCell,
- g = this.grid,
- ed = g.activeEditor,
- forward = false;
- ///Roo.log('onEditorKey' + k);
-
+
+ callHandleMouseDown : function(e){
+ Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ /**
+ * @extends Roo.dd.DDProxy
+ * @class Roo.grid.SplitDragZone
+ * Support for Column Header resizing
+ * @constructor
+ * @param {Object} config
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.SplitDragZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ this.proxy = this.view.resizeProxy;
+ Roo.grid.SplitDragZone.superclass.constructor.call(
+ this,
+ hd, // ID
+ "gridSplitters" + this.grid.getGridEl().id, // SGROUP
+ { // CONFIG
+ dragElId : Roo.id(this.proxy.dom),
+ resizeFrame:false
+ }
+ );
+
+ this.setHandleElId(Roo.id(hd));
+ if (hd2 !== false) {
+ this.setOuterHandleElId(Roo.id(hd2));
+ }
+
+ this.scroll = false;
+};
+Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
+ fly: Roo.Element.fly,
+
+ b4StartDrag : function(x, y){
+ this.view.headersDisabled = true;
+ var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
+ this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
+ );
+ this.proxy.setHeight(h);
- if (this.enter_is_tab && k == e.ENTER) {
- k = e.TAB;
+ // for old system colWidth really stored the actual width?
+ // in bootstrap we tried using xs/ms/etc.. to do % sizing?
+ // which in reality did not work.. - it worked only for fixed sizes
+ // for resizable we need to use actual sizes.
+ var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ // bootstrap.
+ w = this.view.getHeaderIndex(this.cellIndex).getWidth();
}
- if(k == e.TAB){
- if(e.shiftKey){
- newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- forward = true;
- }
-
- e.stopEvent();
-
- } else if(k == e.ENTER && !e.ctrlKey){
- ed.completeEdit();
- e.stopEvent();
- newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- } else if(k == e.ESC){
- ed.cancelEdit();
+
+ // this was w-this.grid.minColumnWidth;
+ // doesnt really make sense? - w = thie curren width or the rendered one?
+ var minw = Math.max(w-this.grid.minColumnWidth, 0);
+ this.resetConstraints();
+ this.setXConstraint(minw, 1000);
+ this.setYConstraint(0, 0);
+ this.minX = x - minw;
+ this.maxX = x + 1000;
+ this.startPos = x;
+ if (!this.view.mainWrap) { // this is Bootstrap code..
+ this.getDragEl().style.display='block';
}
-
- if (newCell) {
- var ecall = { cell : newCell, forward : forward };
- this.fireEvent('beforeeditnext', ecall );
- newCell = ecall.cell;
- forward = ecall.forward;
+
+ Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
+ },
+
+
+ handleMouseDown : function(e){
+ ev = Roo.EventObject.setEvent(e);
+ var t = this.fly(ev.getTarget());
+ if(t.hasClass("x-grid-split")){
+ this.cellIndex = this.view.getCellIndex(t.dom);
+ this.split = t.dom;
+ this.cm = this.grid.colModel;
+ if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
+ Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
+ }
}
-
- if(newCell){
- //Roo.log('next cell after edit');
- g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
- } else if (forward) {
- // tabbed past last
- this.fireEvent.defer(100, this, ['tabend',this]);
+ },
+
+ endDrag : function(e){
+ this.view.headersDisabled = false;
+ var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
+ var diff = endX - this.startPos;
+ //
+ var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ w = 0;
}
+ this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
+ },
+
+ autoOffset : function(){
+ this.setDelta(0,0);
}
});/*
* Based on:
* <script type="text/javascript">
*/
-/**
- * @class Roo.grid.EditorGrid
- * @extends Roo.grid.Grid
- * Class for creating and editable grid.
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} dataSource The data model to bind to
- * @param {Object} colModel The column model with info about this grid's columns
- */
-Roo.grid.EditorGrid = function(container, config){
- Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
- this.getGridEl().addClass("xedit-grid");
-
- if(!this.selModel){
- this.selModel = new Roo.grid.CellSelectionModel();
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.GridDragZone = function(grid, config){
+ this.view = grid.getView();
+ Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
+ if(this.view.lockedBody){
+ this.setHandleElId(Roo.id(this.view.mainBody.dom));
+ this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
}
-
- this.activeEditor = null;
-
- this.addEvents({
- /**
- * @event beforeedit
- * Fires before cell editing is triggered. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - This grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value for the field being edited.</li>
- * <li>row - The grid row index</li>
- * <li>column - The grid column index</li>
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
- * </ul>
- * @param {Object} e An edit event (see above for description)
- */
- "beforeedit" : true,
- /**
- * @event afteredit
- * Fires after a cell is edited. <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - This grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value being set</li>
- * <li>originalValue - The original value for the field, before the edit.</li>
- * <li>row - The grid row index</li>
- * <li>column - The grid column index</li>
- * </ul>
- * @param {Object} e An edit event (see above for description)
- */
- "afteredit" : true,
- /**
- * @event validateedit
- * Fires after a cell is edited, but before the value is set in the record.
- * You can use this to modify the value being set in the field, Return false
- * to cancel the change. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>editor - This editor</li>
- * <li>grid - This grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value being set</li>
- * <li>originalValue - The original value for the field, before the edit.</li>
- * <li>row - The grid row index</li>
- * <li>column - The grid column index</li>
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
- * </ul>
- * @param {Object} e An edit event (see above for description)
- */
- "validateedit" : true
- });
- this.on("bodyscroll", this.stopEditing, this);
- this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick, this);
+ this.scroll = false;
+ this.grid = grid;
+ this.ddel = document.createElement('div');
+ this.ddel.className = 'x-grid-dd-wrap';
};
-Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
- /**
- * @cfg {Number} clicksToEdit
- * The number of clicks on a cell required to display the cell's editor (defaults to 2)
- */
- clicksToEdit: 2,
-
- // private
- isEditor : true,
- // private
- trackMouseOver: false, // causes very odd FF errors
-
- onCellDblClick : function(g, row, col){
- this.startEditing(row, col);
- },
+Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
+ ddGroup : "GridDD",
- onEditComplete : function(ed, value, startValue){
- this.editing = false;
- this.activeEditor = null;
- ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
- var r = ed.record;
- var field = this.colModel.getDataIndex(ed.col);
- var e = {
- grid: this,
- record: r,
- field: field,
- originalValue: startValue,
- value: value,
- row: ed.row,
- column: ed.col,
- cancel:false,
- editor: ed
- };
- var cell = Roo.get(this.view.getCell(ed.row,ed.col));
- cell.show();
-
- if(String(value) !== String(startValue)){
+ getDragData : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var rowIndex = this.view.findRowIndex(t);
+ var sm = this.grid.selModel;
- if(this.fireEvent("validateedit", e) !== false && !e.cancel){
- r.set(field, e.value);
- // if we are dealing with a combo box..
- // then we also set the 'name' colum to be the displayField
- if (ed.field.displayField && ed.field.name) {
- r.set(ed.field.name, ed.field.el.dom.value);
- }
-
- delete e.cancel; //?? why!!!
- this.fireEvent("afteredit", e);
+ //Roo.log(rowIndex);
+
+ if (sm.getSelectedCell) {
+ // cell selection..
+ if (!sm.getSelectedCell()) {
+ return false;
}
- } else {
- this.fireEvent("afteredit", e); // always fire it!
+ if (rowIndex != sm.getSelectedCell()[0]) {
+ return false;
+ }
+
}
- this.view.focusCell(ed.row, ed.col);
- },
-
- /**
- * Starts editing the specified for the specified row/column
- * @param {Number} rowIndex
- * @param {Number} colIndex
- */
- startEditing : function(row, col){
- this.stopEditing();
- if(this.colModel.isCellEditable(col, row)){
- this.view.ensureVisible(row, col, true);
-
- var r = this.dataSource.getAt(row);
- var field = this.colModel.getDataIndex(col);
- var cell = Roo.get(this.view.getCell(row,col));
- var e = {
- grid: this,
- record: r,
- field: field,
- value: r.data[field],
- row: row,
- column: col,
- cancel:false
- };
- if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
- this.editing = true;
- var ed = this.colModel.getCellEditor(col, row);
-
- if (!ed) {
- return;
- }
- if(!ed.rendered){
- ed.render(ed.parentEl || document.body);
- }
- ed.field.reset();
+ if (sm.getSelections && sm.getSelections().length < 1) {
+ return false;
+ }
+
+
+ // before it used to all dragging of unseleted... - now we dont do that.
+ if(rowIndex !== false){
+
+ // if editorgrid..
+
+
+ //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
- cell.hide();
-
- (function(){ // complex but required for focus issues in safari, ie and opera
- ed.row = row;
- ed.col = col;
- ed.record = r;
- ed.on("complete", this.onEditComplete, this, {single: true});
- ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
- this.activeEditor = ed;
- var v = r.data[field];
- ed.startEdit(this.view.getCell(row, col), v);
- // combo's with 'displayField and name set
- if (ed.field.displayField && ed.field.name) {
- ed.field.el.dom.value = r.data[ed.field.name];
- }
-
-
- }).defer(50, this);
+ //if(!sm.isSelected(rowIndex) || e.hasModifier()){
+ //
+ //}
+ if (e.hasModifier()){
+ sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
}
+
+ Roo.log("getDragData");
+
+ return {
+ grid: this.grid,
+ ddel: this.ddel,
+ rowIndex: rowIndex,
+ selections: sm.getSelections ? sm.getSelections() : (
+ sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
+ };
}
+ return false;
},
-
- /**
- * Stops any active editing
- */
- stopEditing : function(){
- if(this.activeEditor){
- this.activeEditor.completeEdit();
- }
- this.activeEditor = null;
+
+
+ onInitDrag : function(e){
+ var data = this.dragData;
+ this.ddel.innerHTML = this.grid.getDragDropText();
+ this.proxy.update(this.ddel);
+ // fire start drag?
},
-
- /**
- * Called to get grid's drag proxy text, by default returns this.ddText.
- * @return {String}
- */
- getDragDropText : function(){
- var count = this.selModel.getSelectedCell() ? 1 : 0;
- return String.format(this.ddText, count, count == 1 ? '' : 's');
+
+ afterRepair : function(){
+ this.dragging = false;
+ },
+
+ getRepairXY : function(e, data){
+ return false;
+ },
+
+ onEndDrag : function(data, e){
+ // fire end drag?
+ },
+
+ onValidDrop : function(dd, e, id){
+ // fire drag drop?
+ this.hideProxy();
+ },
+
+ beforeInvalidDrop : function(e, id){
+
}
-
});/*
* Based on:
* Ext JS Library 1.1.1
* Fork - LGPL
* <script type="text/javascript">
*/
-
-// private - not really -- you end up using it !
-// This is a support class used internally by the Grid components
+
/**
- * @class Roo.grid.GridEditor
- * @extends Roo.Editor
- * Class for creating and editable grid elements.
- * @param {Object} config any settings (must include field)
- */
-Roo.grid.GridEditor = function(field, config){
- if (!config && field.field) {
- config = field;
- field = Roo.factory(config.field, Roo.form);
+ * @class Roo.grid.ColumnModel
+ * @extends Roo.util.Observable
+ * This is the default implementation of a ColumnModel used by the Grid. It defines
+ * the columns in the grid.
+ * <br>Usage:<br>
+ <pre><code>
+ var colModel = new Roo.grid.ColumnModel([
+ {header: "Ticker", width: 60, sortable: true, locked: true},
+ {header: "Company Name", width: 150, sortable: true},
+ {header: "Market Cap.", width: 100, sortable: true},
+ {header: "$ Sales", width: 100, sortable: true, renderer: money},
+ {header: "Employees", width: 100, sortable: true, resizable: false}
+ ]);
+ </code></pre>
+ * <p>
+
+ * The config options listed for this class are options which may appear in each
+ * individual column definition.
+ * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
+ * @constructor
+ * @param {Object} config An Array of column config objects. See this class's
+ * config objects for details.
+*/
+Roo.grid.ColumnModel = function(config){
+ /**
+ * The config passed into the constructor
+ */
+ this.config = []; //config;
+ this.lookup = {};
+
+ // if no id, create one
+ // if the column does not have a dataIndex mapping,
+ // map it to the order it is in the config
+ for(var i = 0, len = config.length; i < len; i++){
+ this.addColumn(config[i]);
+
}
- Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
- field.monitorTab = false;
+
+ /**
+ * The width of columns which have no width specified (defaults to 100)
+ * @type Number
+ */
+ this.defaultWidth = 100;
+
+ /**
+ * Default sortable of columns which have no sortable specified (defaults to false)
+ * @type Boolean
+ */
+ this.defaultSortable = false;
+
+ this.addEvents({
+ /**
+ * @event widthchange
+ * Fires when the width of a column changes.
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Number} newWidth The new width
+ */
+ "widthchange": true,
+ /**
+ * @event headerchange
+ * Fires when the text of a header changes.
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Number} newText The new header text
+ */
+ "headerchange": true,
+ /**
+ * @event hiddenchange
+ * Fires when a column is hidden or "unhidden".
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Boolean} hidden true if hidden, false otherwise
+ */
+ "hiddenchange": true,
+ /**
+ * @event columnmoved
+ * Fires when a column is moved.
+ * @param {ColumnModel} this
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
+ */
+ "columnmoved" : true,
+ /**
+ * @event columlockchange
+ * Fires when a column's locked state is changed
+ * @param {ColumnModel} this
+ * @param {Number} colIndex
+ * @param {Boolean} locked true if locked
+ */
+ "columnlockchange" : true
+ });
+ Roo.grid.ColumnModel.superclass.constructor.call(this);
};
+Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
+ /**
+ * @cfg {String} header [required] The header text to display in the Grid view.
+ */
+ /**
+ * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
+ */
+ /**
+ * @cfg {String} smHeader Header at Bootsrap Small width
+ */
+ /**
+ * @cfg {String} mdHeader Header at Bootsrap Medium width
+ */
+ /**
+ * @cfg {String} lgHeader Header at Bootsrap Large width
+ */
+ /**
+ * @cfg {String} xlHeader Header at Bootsrap extra Large width
+ */
+ /**
+ * @cfg {String} dataIndex The name of the field in the grid's {@link Roo.data.Store}'s
+ * {@link Roo.data.Record} definition from which to draw the column's value. If not
+ * specified, the column's index is used as an index into the Record's data Array.
+ */
+ /**
+ * @cfg {Number} width The initial width in pixels of the column. Using this
+ * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
+ */
+ /**
+ * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
+ * Defaults to the value of the {@link #defaultSortable} property.
+ * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
+ */
+ /**
+ * @cfg {Boolean} locked True to lock the column in place while scrolling the Grid. Defaults to false.
+ */
+ /**
+ * @cfg {Boolean} fixed True if the column width cannot be changed. Defaults to false.
+ */
+ /**
+ * @cfg {Boolean} resizable False to disable column resizing. Defaults to true.
+ */
+ /**
+ * @cfg {Boolean} hidden True to hide the column. Defaults to false.
+ */
+ /**
+ * @cfg {Function} renderer A function used to generate HTML markup for a cell
+ * given the cell's data value. See {@link #setRenderer}. If not specified, the
+ * default renderer returns the escaped data value. If an object is returned (bootstrap only)
+ * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
+ */
+ /**
+ * @cfg {Roo.grid.GridEditor} editor For grid editors - returns the grid editor
+ */
+ /**
+ * @cfg {String} align (left|right) Set the CSS text-align property of the column. Defaults to undefined (left).
+ */
+ /**
+ * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined (middle)
+ */
+ /**
+ * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
+ */
+ /**
+ * @cfg {String} tooltip mouse over tooltip text
+ */
+ /**
+ * @cfg {Number} xs can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} lg can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} xl can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * Returns the id of the column at the specified index.
+ * @param {Number} index The column index
+ * @return {String} the id
+ */
+ getColumnId : function(index){
+ return this.config[index].id;
+ },
+
+ /**
+ * Returns the column for a specified id.
+ * @param {String} id The column id
+ * @return {Object} the column
+ */
+ getColumnById : function(id){
+ return this.lookup[id];
+ },
-Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
/**
- * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
+ * Returns the column Object for a specified dataIndex.
+ * @param {String} dataIndex The column dataIndex
+ * @return {Object|Boolean} the column or false if not found
*/
+ getColumnByDataIndex: function(dataIndex){
+ var index = this.findColumnIndex(dataIndex);
+ return index > -1 ? this.config[index] : false;
+ },
- alignment: "tl-tl",
- autoSize: "width",
- hideEl : false,
- cls: "x-small-editor x-grid-editor",
- shim:false,
- shadow:"frame"
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-
-Roo.grid.PropertyRecord = Roo.data.Record.create([
- {name:'name',type:'string'}, 'value'
-]);
+ /**
+ * Returns the index for a specified column id.
+ * @param {String} id The column id
+ * @return {Number} the index, or -1 if not found
+ */
+ getIndexById : function(id){
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(this.config[i].id == id){
+ return i;
+ }
+ }
+ return -1;
+ },
+
+ /**
+ * Returns the index for a specified column dataIndex.
+ * @param {String} dataIndex The column dataIndex
+ * @return {Number} the index, or -1 if not found
+ */
+
+ findColumnIndex : function(dataIndex){
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(this.config[i].dataIndex == dataIndex){
+ return i;
+ }
+ }
+ return -1;
+ },
+
+
+ moveColumn : function(oldIndex, newIndex){
+ var c = this.config[oldIndex];
+ this.config.splice(oldIndex, 1);
+ this.config.splice(newIndex, 0, c);
+ this.dataMap = null;
+ this.fireEvent("columnmoved", this, oldIndex, newIndex);
+ },
+ isLocked : function(colIndex){
+ return this.config[colIndex].locked === true;
+ },
-Roo.grid.PropertyStore = function(grid, source){
- this.grid = grid;
- this.store = new Roo.data.Store({
- recordType : Roo.grid.PropertyRecord
- });
- this.store.on('update', this.onUpdate, this);
- if(source){
- this.setSource(source);
- }
- Roo.grid.PropertyStore.superclass.constructor.call(this);
-};
+ setLocked : function(colIndex, value, suppressEvent){
+ if(this.isLocked(colIndex) == value){
+ return;
+ }
+ this.config[colIndex].locked = value;
+ if(!suppressEvent){
+ this.fireEvent("columnlockchange", this, colIndex, value);
+ }
+ },
+ getTotalLockedWidth : function(){
+ var totalWidth = 0;
+ for(var i = 0; i < this.config.length; i++){
+ if(this.isLocked(i) && !this.isHidden(i)){
+ this.totalWidth += this.getColumnWidth(i);
+ }
+ }
+ return totalWidth;
+ },
+ getLockedCount : function(){
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(!this.isLocked(i)){
+ return i;
+ }
+ }
+
+ return this.config.length;
+ },
-Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
- setSource : function(o){
- this.source = o;
- this.store.removeAll();
- var data = [];
- for(var k in o){
- if(this.isEditableValue(o[k])){
- data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
+ /**
+ * Returns the number of columns.
+ * @return {Number}
+ */
+ getColumnCount : function(visibleOnly){
+ if(visibleOnly === true){
+ var c = 0;
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(!this.isHidden(i)){
+ c++;
+ }
}
+ return c;
}
- this.store.loadRecords({records: data}, {}, true);
+ return this.config.length;
},
- onUpdate : function(ds, record, type){
- if(type == Roo.data.Record.EDIT){
- var v = record.data['value'];
- var oldValue = record.modified['value'];
- if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
- this.source[record.id] = v;
- record.commit();
- this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
- }else{
- record.reject();
+ /**
+ * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
+ * @param {Function} fn
+ * @param {Object} scope (optional)
+ * @return {Array} result
+ */
+ getColumnsBy : function(fn, scope){
+ var r = [];
+ for(var i = 0, len = this.config.length; i < len; i++){
+ var c = this.config[i];
+ if(fn.call(scope||this, c, i) === true){
+ r[r.length] = c;
}
}
+ return r;
},
- getProperty : function(row){
- return this.store.getAt(row);
+ /**
+ * Returns true if the specified column is sortable.
+ * @param {Number} col The column index
+ * @return {Boolean}
+ */
+ isSortable : function(col){
+ if(typeof this.config[col].sortable == "undefined"){
+ return this.defaultSortable;
+ }
+ return this.config[col].sortable;
},
- isEditableValue: function(val){
- if(val && val instanceof Date){
- return true;
- }else if(typeof val == 'object' || typeof val == 'function'){
- return false;
+ /**
+ * Returns the rendering (formatting) function defined for the column.
+ * @param {Number} col The column index.
+ * @return {Function} The function used to render the cell. See {@link #setRenderer}.
+ */
+ getRenderer : function(col){
+ if(!this.config[col].renderer){
+ return Roo.grid.ColumnModel.defaultRenderer;
}
- return true;
+ return this.config[col].renderer;
},
- setValue : function(prop, value){
- this.source[prop] = value;
- this.store.getById(prop).set('value', value);
+ /**
+ * Sets the rendering (formatting) function for a column.
+ * @param {Number} col The column index
+ * @param {Function} fn The function to use to process the cell's raw data
+ * to return HTML markup for the grid view. The render function is called with
+ * the following parameters:<ul>
+ * <li>Data value.</li>
+ * <li>Cell metadata. An object in which you may set the following attributes:<ul>
+ * <li>css A CSS style string to apply to the table cell.</li>
+ * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
+ * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
+ * <li>Row index</li>
+ * <li>Column index</li>
+ * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
+ */
+ setRenderer : function(col, fn){
+ this.config[col].renderer = fn;
},
- getSource : function(){
- return this.source;
- }
-});
+ /**
+ * Returns the width for the specified column.
+ * @param {Number} col The column index
+ * @param (optional) {String} gridSize bootstrap width size.
+ * @return {Number}
+ */
+ getColumnWidth : function(col, gridSize)
+ {
+ var cfg = this.config[col];
+
+ if (typeof(gridSize) == 'undefined') {
+ return cfg.width * 1 || this.defaultWidth;
+ }
+ if (gridSize === false) { // if we set it..
+ return cfg.width || false;
+ }
+ var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+
+ for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
+ if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
+ continue;
+ }
+ return cfg[ sizes[i] ];
+ }
+ return 1;
+
+ },
-Roo.grid.PropertyColumnModel = function(grid, store){
- this.grid = grid;
- var g = Roo.grid;
- g.PropertyColumnModel.superclass.constructor.call(this, [
- {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
- {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
- ]);
- this.store = store;
- this.bselect = Roo.DomHelper.append(document.body, {
- tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
- {tag: 'option', value: 'true', html: 'true'},
- {tag: 'option', value: 'false', html: 'false'}
- ]
- });
- Roo.id(this.bselect);
- var f = Roo.form;
- this.editors = {
- 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
- 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
- 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
- 'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
- 'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
- };
- this.renderCellDelegate = this.renderCell.createDelegate(this);
- this.renderPropDelegate = this.renderProp.createDelegate(this);
-};
+ /**
+ * Sets the width for a column.
+ * @param {Number} col The column index
+ * @param {Number} width The new width
+ */
+ setColumnWidth : function(col, width, suppressEvent){
+ this.config[col].width = width;
+ this.totalWidth = null;
+ if(!suppressEvent){
+ this.fireEvent("widthchange", this, col, width);
+ }
+ },
-Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
-
-
- nameText : 'Name',
- valueText : 'Value',
-
- dateFormat : 'm/j/Y',
-
-
- renderDate : function(dateVal){
- return dateVal.dateFormat(this.dateFormat);
+ /**
+ * Returns the total width of all columns.
+ * @param {Boolean} includeHidden True to include hidden column widths
+ * @return {Number}
+ */
+ getTotalWidth : function(includeHidden){
+ if(!this.totalWidth){
+ this.totalWidth = 0;
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(includeHidden || !this.isHidden(i)){
+ this.totalWidth += this.getColumnWidth(i);
+ }
+ }
+ }
+ return this.totalWidth;
},
- renderBool : function(bVal){
- return bVal ? 'true' : 'false';
+ /**
+ * Returns the header for the specified column.
+ * @param {Number} col The column index
+ * @return {String}
+ */
+ getColumnHeader : function(col){
+ return this.config[col].header;
},
- isCellEditable : function(colIndex, rowIndex){
- return colIndex == 1;
+ /**
+ * Sets the header for a column.
+ * @param {Number} col The column index
+ * @param {String} header The new header
+ */
+ setColumnHeader : function(col, header){
+ this.config[col].header = header;
+ this.fireEvent("headerchange", this, col, header);
},
- getRenderer : function(col){
- return col == 1 ?
- this.renderCellDelegate : this.renderPropDelegate;
+ /**
+ * Returns the tooltip for the specified column.
+ * @param {Number} col The column index
+ * @return {String}
+ */
+ getColumnTooltip : function(col){
+ return this.config[col].tooltip;
+ },
+ /**
+ * Sets the tooltip for a column.
+ * @param {Number} col The column index
+ * @param {String} tooltip The new tooltip
+ */
+ setColumnTooltip : function(col, tooltip){
+ this.config[col].tooltip = tooltip;
},
- renderProp : function(v){
- return this.getPropertyName(v);
+ /**
+ * Returns the dataIndex for the specified column.
+ * @param {Number} col The column index
+ * @return {Number}
+ */
+ getDataIndex : function(col){
+ return this.config[col].dataIndex;
},
- renderCell : function(val){
- var rv = val;
- if(val instanceof Date){
- rv = this.renderDate(val);
- }else if(typeof val == 'boolean'){
- rv = this.renderBool(val);
- }
- return Roo.util.Format.htmlEncode(rv);
+ /**
+ * Sets the dataIndex for a column.
+ * @param {Number} col The column index
+ * @param {Number} dataIndex The new dataIndex
+ */
+ setDataIndex : function(col, dataIndex){
+ this.config[col].dataIndex = dataIndex;
},
- getPropertyName : function(name){
- var pn = this.grid.propertyNames;
- return pn && pn[name] ? pn[name] : name;
+
+
+ /**
+ * Returns true if the cell is editable.
+ * @param {Number} colIndex The column index
+ * @param {Number} rowIndex The row index - this is nto actually used..?
+ * @return {Boolean}
+ */
+ isCellEditable : function(colIndex, rowIndex){
+ return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
},
+ /**
+ * Returns the editor defined for the cell/column.
+ * return false or null to disable editing.
+ * @param {Number} colIndex The column index
+ * @param {Number} rowIndex The row index
+ * @return {Object}
+ */
getCellEditor : function(colIndex, rowIndex){
- var p = this.store.getProperty(rowIndex);
- var n = p.data['name'], val = p.data['value'];
-
- if(typeof(this.grid.customEditors[n]) == 'string'){
- return this.editors[this.grid.customEditors[n]];
- }
- if(typeof(this.grid.customEditors[n]) != 'undefined'){
- return this.grid.customEditors[n];
- }
- if(val instanceof Date){
- return this.editors['date'];
- }else if(typeof val == 'number'){
- return this.editors['number'];
- }else if(typeof val == 'boolean'){
- return this.editors['boolean'];
- }else{
- return this.editors['string'];
- }
- }
-});
+ return this.config[colIndex].editor;
+ },
-/**
- * @class Roo.grid.PropertyGrid
- * @extends Roo.grid.EditorGrid
- * This class represents the interface of a component based property grid control.
- * <br><br>Usage:<pre><code>
- var grid = new Roo.grid.PropertyGrid("my-container-id", {
-
- });
- // set any options
- grid.render();
- * </code></pre>
-
- * @constructor
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid.
- */
-Roo.grid.PropertyGrid = function(container, config){
- config = config || {};
- var store = new Roo.grid.PropertyStore(this);
- this.store = store;
- var cm = new Roo.grid.PropertyColumnModel(this, store);
- store.store.sort('name', 'ASC');
- Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
- ds: store.store,
- cm: cm,
- enableColLock:false,
- enableColumnMove:false,
- stripeRows:false,
- trackMouseOver: false,
- clicksToEdit:1
- }, config));
- this.getGridEl().addClass('x-props-grid');
- this.lastEditRow = null;
- this.on('columnresize', this.onColumnResize, this);
- this.addEvents({
- /**
- * @event beforepropertychange
- * Fires before a property changes (return false to stop?)
- * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
- * @param {String} id Record Id
- * @param {String} newval New Value
- * @param {String} oldval Old Value
- */
- "beforepropertychange": true,
- /**
- * @event propertychange
- * Fires after a property changes
- * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
- * @param {String} id Record Id
- * @param {String} newval New Value
- * @param {String} oldval Old Value
- */
- "propertychange": true
- });
- this.customEditors = this.customEditors || {};
-};
-Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
-
- /**
- * @cfg {Object} customEditors map of colnames=> custom editors.
- * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
- * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
- * false disables editing of the field.
- */
-
- /**
- * @cfg {Object} propertyNames map of property Names to their displayed value
- */
-
- render : function(){
- Roo.grid.PropertyGrid.superclass.render.call(this);
- this.autoSize.defer(100, this);
+ /**
+ * Sets if a column is editable.
+ * @param {Number} col The column index
+ * @param {Boolean} editable True if the column is editable
+ */
+ setEditable : function(col, editable){
+ this.config[col].editable = editable;
},
- autoSize : function(){
- Roo.grid.PropertyGrid.superclass.autoSize.call(this);
- if(this.view){
- this.view.fitColumns();
- }
+
+ /**
+ * Returns true if the column is hidden.
+ * @param {Number} colIndex The column index
+ * @return {Boolean}
+ */
+ isHidden : function(colIndex){
+ return this.config[colIndex].hidden;
},
- onColumnResize : function(){
- this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
- this.autoSize();
+
+ /**
+ * Returns true if the column width cannot be changed
+ */
+ isFixed : function(colIndex){
+ return this.config[colIndex].fixed;
},
+
/**
- * Sets the data for the Grid
- * accepts a Key => Value object of all the elements avaiable.
- * @param {Object} data to appear in grid.
+ * Returns true if the column can be resized
+ * @return {Boolean}
*/
- setSource : function(source){
- this.store.setSource(source);
- //this.autoSize();
+ isResizable : function(colIndex){
+ return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
},
/**
- * Gets all the data from the grid.
- * @return {Object} data data stored in grid
+ * Sets if a column is hidden.
+ * @param {Number} colIndex The column index
+ * @param {Boolean} hidden True if the column is hidden
*/
- getSource : function(){
- return this.store.getSource();
- }
-});/*
-
- * Licence LGPL
-
- */
-
-/**
- * @class Roo.grid.Calendar
- * @extends Roo.grid.Grid
- * This class extends the Grid to provide a calendar widget
- * <br><br>Usage:<pre><code>
- var grid = new Roo.grid.Calendar("my-container-id", {
- ds: myDataStore,
- cm: myColModel,
- selModel: mySelectionModel,
- autoSizeColumns: true,
- monitorWindowResize: false,
- trackMouseOver: true
- eventstore : real data store..
- });
- // set any options
- grid.render();
-
- * @constructor
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid.
- */
-Roo.grid.Calendar = function(container, config){
- // initialize the container
- this.container = Roo.get(container);
- this.container.update("");
- this.container.setStyle("overflow", "hidden");
- this.container.addClass('x-grid-container');
-
- this.id = this.container.id;
+ setHidden : function(colIndex, hidden){
+ this.config[colIndex].hidden = hidden;
+ this.totalWidth = null;
+ this.fireEvent("hiddenchange", this, colIndex, hidden);
+ },
- Roo.apply(this, config);
- // check and correct shorthanded configs
+ /**
+ * Sets the editor for a column.
+ * @param {Number} col The column index
+ * @param {Object} editor The editor object
+ */
+ setEditor : function(col, editor){
+ this.config[col].editor = editor;
+ },
+ /**
+ * Add a column (experimental...) - defaults to adding to the end..
+ * @param {Object} config
+ */
+ addColumn : function(c)
+ {
- var rows = [];
- var d =1;
- for (var r = 0;r < 6;r++) {
-
- rows[r]=[];
- for (var c =0;c < 7;c++) {
- rows[r][c]= '';
+ var i = this.config.length;
+ this.config[i] = c;
+
+ if(typeof c.dataIndex == "undefined"){
+ c.dataIndex = i;
}
- }
- if (this.eventStore) {
- this.eventStore= Roo.factory(this.eventStore, Roo.data);
- this.eventStore.on('load',this.onLoad, this);
- this.eventStore.on('beforeload',this.clearEvents, this);
-
+ if(typeof c.renderer == "string"){
+ c.renderer = Roo.util.Format[c.renderer];
+ }
+ if(typeof c.id == "undefined"){
+ c.id = Roo.id();
+ }
+ if(c.editor && c.editor.xtype){
+ c.editor = Roo.factory(c.editor, Roo.grid);
+ }
+ if(c.editor && c.editor.isFormField){
+ c.editor = new Roo.grid.GridEditor(c.editor);
+ }
+ this.lookup[c.id] = c;
}
- this.dataSource = new Roo.data.Store({
- proxy: new Roo.data.MemoryProxy(rows),
- reader: new Roo.data.ArrayReader({}, [
- 'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
- });
+});
- this.dataSource.load();
- this.ds = this.dataSource;
- this.ds.xmodule = this.xmodule || false;
-
-
- var cellRender = function(v,x,r)
- {
- return String.format(
- '<div class="fc-day fc-widget-content"><div>' +
- '<div class="fc-event-container"></div>' +
- '<div class="fc-day-number">{0}</div>'+
-
- '<div class="fc-day-content"><div style="position:relative"></div></div>' +
- '</div></div>', v);
-
+Roo.grid.ColumnModel.defaultRenderer = function(value)
+{
+ if(typeof value == "object") {
+ return value;
}
+ if(typeof value == "string" && value.length < 1){
+ return " ";
+ }
-
- this.colModel = new Roo.grid.ColumnModel( [
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday0',
- header : 'Sunday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday1',
- header : 'Monday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday2',
- header : 'Tuesday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday3',
- header : 'Wednesday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday4',
- header : 'Thursday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday5',
- header : 'Friday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday6',
- header : 'Saturday',
- renderer : cellRender
- }
- ]);
- this.cm = this.colModel;
- this.cm.xmodule = this.xmodule || false;
-
-
-
- //this.selModel = new Roo.grid.CellSelectionModel();
- //this.sm = this.selModel;
- //this.selModel.init(this);
-
-
- if(this.width){
- this.container.setWidth(this.width);
- }
+ return String.format("{0}", value);
+};
- if(this.height){
- this.container.setHeight(this.height);
- }
- /** @private */
- this.addEvents({
- // raw events
- /**
- * @event click
- * The raw click event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "click" : true,
- /**
- * @event dblclick
- * The raw dblclick event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "dblclick" : true,
- /**
- * @event contextmenu
- * The raw contextmenu event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "contextmenu" : true,
- /**
- * @event mousedown
- * The raw mousedown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mousedown" : true,
- /**
- * @event mouseup
- * The raw mouseup event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseup" : true,
- /**
- * @event mouseover
- * The raw mouseover event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseover" : true,
- /**
- * @event mouseout
- * The raw mouseout event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseout" : true,
- /**
- * @event keypress
- * The raw keypress event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keypress" : true,
- /**
- * @event keydown
- * The raw keydown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keydown" : true,
+// Alias for backwards compatibility
+Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
- // custom events
+/**
+ * @class Roo.grid.AbstractSelectionModel
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid SelectionModels. It provides the interface that should be
+ * implemented by descendant classes. This class should not be directly instantiated.
+ * @constructor
+ */
+Roo.grid.AbstractSelectionModel = function(){
+ this.locked = false;
+ Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
+};
- /**
- * @event cellclick
- * Fires when a cell is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "cellclick" : true,
- /**
- * @event celldblclick
- * Fires when a cell is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "celldblclick" : true,
- /**
- * @event rowclick
- * Fires when a row is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowclick" : true,
- /**
- * @event rowdblclick
- * Fires when a row is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowdblclick" : true,
- /**
- * @event headerclick
- * Fires when a header is clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerclick" : true,
- /**
- * @event headerdblclick
- * Fires when a header cell is double clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerdblclick" : true,
- /**
- * @event rowcontextmenu
- * Fires when a row is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowcontextmenu" : true,
- /**
- * @event cellcontextmenu
- * Fires when a cell is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} cellIndex
- * @param {Roo.EventObject} e
- */
- "cellcontextmenu" : true,
- /**
- * @event headercontextmenu
- * Fires when a header is right clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headercontextmenu" : true,
- /**
- * @event bodyscroll
- * Fires when the body element is scrolled
- * @param {Number} scrollLeft
- * @param {Number} scrollTop
- */
- "bodyscroll" : true,
- /**
- * @event columnresize
- * Fires when the user resizes a column
- * @param {Number} columnIndex
- * @param {Number} newSize
- */
- "columnresize" : true,
- /**
- * @event columnmove
- * Fires when the user moves a column
- * @param {Number} oldIndex
- * @param {Number} newIndex
- */
- "columnmove" : true,
- /**
- * @event startdrag
- * Fires when row(s) start being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "startdrag" : true,
- /**
- * @event enddrag
- * Fires when a drag operation is complete
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "enddrag" : true,
- /**
- * @event dragdrop
- * Fires when dragged row(s) are dropped on a valid DD target
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragdrop" : true,
- /**
- * @event dragover
- * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragover" : true,
- /**
- * @event dragenter
- * Fires when the dragged row(s) first cross another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragenter" : true,
- /**
- * @event dragout
- * Fires when the dragged row(s) leave another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragout" : true,
- /**
- * @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.
- */
- 'rowclass' : true,
+Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable, {
+ /** @ignore Called by the grid automatically. Do not call directly. */
+ init : function(grid){
+ this.grid = grid;
+ this.initEvents();
+ },
+ /**
+ * Locks the selections.
+ */
+ lock : function(){
+ this.locked = true;
+ },
+
+ /**
+ * Unlocks the selections.
+ */
+ unlock : function(){
+ this.locked = false;
+ },
+
+ /**
+ * Returns true if the selections are locked.
+ * @return {Boolean}
+ */
+ isLocked : function(){
+ return this.locked;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @extends Roo.grid.AbstractSelectionModel
+ * @class Roo.grid.RowSelectionModel
+ * The default SelectionModel used by {@link Roo.grid.Grid}.
+ * It supports multiple selections and keyboard selection/navigation.
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.RowSelectionModel = function(config){
+ Roo.apply(this, config);
+ this.selections = new Roo.util.MixedCollection(false, function(o){
+ return o.id;
+ });
+
+ this.last = false;
+ this.lastActive = false;
+
+ this.addEvents({
/**
- * @event render
- * Fires when the grid is rendered
- * @param {Grid} grid
- */
- 'render' : true,
- /**
- * @event select
- * Fires when a date is selected
- * @param {DatePicker} this
- * @param {Date} date The selected date
- */
- 'select': true,
- /**
- * @event monthchange
- * Fires when the displayed month changes
- * @param {DatePicker} this
- * @param {Date} date The selected month
- */
- 'monthchange': true,
- /**
- * @event evententer
- * Fires when mouse over an event
- * @param {Calendar} this
- * @param {event} Event
- */
- 'evententer': true,
- /**
- * @event eventleave
- * Fires when the mouse leaves an
- * @param {Calendar} this
- * @param {event}
- */
- 'eventleave': true,
- /**
- * @event eventclick
- * Fires when the mouse click an
- * @param {Calendar} this
- * @param {event}
- */
- 'eventclick': true,
- /**
- * @event eventrender
- * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
- * @param {Calendar} this
- * @param {data} data to be modified
- */
- 'eventrender': true
-
+ * @event selectionchange
+ * Fires when the selection changes
+ * @param {SelectionModel} this
+ */
+ "selectionchange" : true,
+ /**
+ * @event afterselectionchange
+ * Fires after the selection changes (eg. by key press or clicking)
+ * @param {SelectionModel} this
+ */
+ "afterselectionchange" : true,
+ /**
+ * @event beforerowselect
+ * Fires when a row is selected being selected, return false to cancel.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Boolean} keepExisting False if other selections will be cleared
+ */
+ "beforerowselect" : true,
+ /**
+ * @event rowselect
+ * Fires when a row is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Roo.data.Record} r The record
+ */
+ "rowselect" : true,
+ /**
+ * @event rowdeselect
+ * Fires when a row is deselected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ */
+ "rowdeselect" : true
});
+ Roo.grid.RowSelectionModel.superclass.constructor.call(this);
+ this.locked = false;
+};
- Roo.grid.Grid.superclass.constructor.call(this);
- this.on('render', function() {
- this.view.el.addClass('x-grid-cal');
-
- (function() { this.setDate(new Date()); }).defer(100,this); //default today..
+Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel, {
+ /**
+ * @cfg {Boolean} singleSelect
+ * True to allow selection of only one row at a time (defaults to false)
+ */
+ singleSelect : false,
- },this);
-
- if (!Roo.grid.Calendar.style) {
- Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
-
-
- '.x-grid-cal .x-grid-col' : {
- height: 'auto !important',
- 'vertical-align': 'top'
+ // private
+ initEvents : function(){
+
+ if(!this.grid.enableDragDrop && !this.grid.enableDrag){
+ this.grid.on("mousedown", this.handleMouseDown, this);
+ }else{ // allow click to work like normal
+ this.grid.on("rowclick", this.handleDragableRowClick, this);
+ }
+ // bootstrap does not have a view..
+ var view = this.grid.view ? this.grid.view : this.grid;
+ this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
+ "up" : function(e){
+ if(!e.shiftKey){
+ this.selectPrevious(e.shiftKey);
+ }else if(this.last !== false && this.lastActive !== false){
+ var last = this.last;
+ this.selectRange(this.last, this.lastActive-1);
+ view.focusRow(this.lastActive);
+ if(last !== false){
+ this.last = last;
+ }
+ }else{
+ this.selectFirstRow();
+ }
+ this.fireEvent("afterselectionchange", this);
},
- '.x-grid-cal .fc-event-hori' : {
- height: '14px'
+ "down" : function(e){
+ if(!e.shiftKey){
+ this.selectNext(e.shiftKey);
+ }else if(this.last !== false && this.lastActive !== false){
+ var last = this.last;
+ this.selectRange(this.last, this.lastActive+1);
+ view.focusRow(this.lastActive);
+ if(last !== false){
+ this.last = last;
+ }
+ }else{
+ this.selectFirstRow();
+ }
+ this.fireEvent("afterselectionchange", this);
+ },
+ scope: this
+ });
+
+
+ view.on("refresh", this.onRefresh, this);
+ view.on("rowupdated", this.onRowUpdated, this);
+ view.on("rowremoved", this.onRemove, this);
+ },
+
+ // private
+ onRefresh : function(){
+ var ds = this.grid.ds, i, v = this.grid.view;
+ var s = this.selections;
+ s.each(function(r){
+ if((i = ds.indexOfId(r.id)) != -1){
+ v.onRowSelect(i);
+ s.add(ds.getAt(i)); // updating the selection relate data
+ }else{
+ s.remove(r);
}
-
-
- }, Roo.id());
- }
+ });
+ },
+
+ // private
+ onRemove : function(v, index, r){
+ this.selections.remove(r);
+ },
+
+ // private
+ onRowUpdated : function(v, index, r){
+ if(this.isSelected(r)){
+ v.onRowSelect(index);
+ }
+ },
-
-
-};
-Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
/**
- * @cfg {Store} eventStore The store that loads events.
+ * Select records.
+ * @param {Array} records The records to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
*/
- eventStore : 25,
+ selectRecords : function(records, keepExisting){
+ if(!keepExisting){
+ this.clearSelections();
+ }
+ var ds = this.grid.ds;
+ for(var i = 0, len = records.length; i < len; i++){
+ this.selectRow(ds.indexOf(records[i]), true);
+ }
+ },
-
- activeDate : false,
- startDay : 0,
- autoWidth : true,
- monitorWindowResize : false,
+ /**
+ * Gets the number of selected rows.
+ * @return {Number}
+ */
+ getCount : function(){
+ return this.selections.length;
+ },
-
- resizeColumns : function() {
- var col = (this.view.el.getWidth() / 7) - 3;
- // loop through cols, and setWidth
- for(var i =0 ; i < 7 ; i++){
- this.cm.setColumnWidth(i, col);
+ /**
+ * Selects the first row in the grid.
+ */
+ selectFirstRow : function(){
+ this.selectRow(0);
+ },
+
+ /**
+ * Select the last row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectLastRow : function(keepExisting){
+ this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
+ },
+
+ /**
+ * Selects the row immediately following the last selected row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectNext : function(keepExisting){
+ if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
+ this.selectRow(this.last+1, keepExisting);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
}
},
- setDate :function(date) {
-
- Roo.log('setDate?');
-
- this.resizeColumns();
- var vd = this.activeDate;
- this.activeDate = date;
-// if(vd && this.el){
-// var t = date.getTime();
-// if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
-// Roo.log('using add remove');
-//
-// this.fireEvent('monthchange', this, date);
-//
-// this.cells.removeClass("fc-state-highlight");
-// this.cells.each(function(c){
-// if(c.dateValue == t){
-// c.addClass("fc-state-highlight");
-// setTimeout(function(){
-// try{c.dom.firstChild.focus();}catch(e){}
-// }, 50);
-// return false;
-// }
-// return true;
-// });
-// return;
-// }
-// }
-
- var days = date.getDaysInMonth();
-
- var firstOfMonth = date.getFirstDateOfMonth();
- var startingPos = firstOfMonth.getDay()-this.startDay;
-
- if(startingPos < this.startDay){
- startingPos += 7;
+
+ /**
+ * Selects the row that precedes the last selected row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectPrevious : function(keepExisting){
+ if(this.last){
+ this.selectRow(this.last-1, keepExisting);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
}
-
- var pm = date.add(Date.MONTH, -1);
- var prevStart = pm.getDaysInMonth()-startingPos;
-//
-
-
- this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
-
- this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
- //this.cells.addClassOnOver('fc-state-hover');
-
- var cells = this.cells.elements;
- var textEls = this.textNodes;
-
- //Roo.each(cells, function(cell){
- // cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
- //});
-
- days += startingPos;
+ },
- // convert everything to numbers so it's fast
- var day = 86400000;
- var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
- //Roo.log(d);
- //Roo.log(pm);
- //Roo.log(prevStart);
-
- var today = new Date().clearTime().getTime();
- var sel = date.clearTime().getTime();
- var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
- var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
- var ddMatch = this.disabledDatesRE;
- var ddText = this.disabledDatesText;
- var ddays = this.disabledDays ? this.disabledDays.join("") : false;
- var ddaysText = this.disabledDaysText;
- var format = this.format;
-
- var setCellClass = function(cal, cell){
-
- //Roo.log('set Cell Class');
- cell.title = "";
- var t = d.getTime();
-
- //Roo.log(d);
-
-
- cell.dateValue = t;
- if(t == today){
- cell.className += " fc-today";
- cell.className += " fc-state-highlight";
- cell.title = cal.todayText;
- }
- if(t == sel){
- // disable highlight in other month..
- cell.className += " fc-state-highlight";
-
- }
- // disabling
- if(t < min) {
- //cell.className = " fc-state-disabled";
- cell.title = cal.minText;
- return;
- }
- if(t > max) {
- //cell.className = " fc-state-disabled";
- cell.title = cal.maxText;
- return;
- }
- if(ddays){
- if(ddays.indexOf(d.getDay()) != -1){
- // cell.title = ddaysText;
- // cell.className = " fc-state-disabled";
- }
- }
- if(ddMatch && format){
- var fvalue = d.dateFormat(format);
- if(ddMatch.test(fvalue)){
- cell.title = ddText.replace("%0", fvalue);
- cell.className = " fc-state-disabled";
- }
- }
-
- if (!cell.initialClassName) {
- cell.initialClassName = cell.dom.className;
- }
-
- cell.dom.className = cell.initialClassName + ' ' + cell.className;
+ /**
+ * Returns the selected records
+ * @return {Array} Array of selected records
+ */
+ getSelections : function(){
+ return [].concat(this.selections.items);
+ },
+
+ /**
+ * Returns the first selected record.
+ * @return {Record}
+ */
+ getSelected : function(){
+ return this.selections.itemAt(0);
+ },
+
+
+ /**
+ * Clears all selections.
+ */
+ clearSelections : function(fast){
+ if(this.locked) {
+ return;
+ }
+ if(fast !== true){
+ var ds = this.grid.ds;
+ var s = this.selections;
+ s.each(function(r){
+ this.deselectRow(ds.indexOfId(r.id));
+ }, this);
+ s.clear();
+ }else{
+ this.selections.clear();
+ }
+ this.last = false;
+ },
+
+
+ /**
+ * Selects all rows.
+ */
+ selectAll : function(){
+ if(this.locked) {
+ return;
+ }
+ this.selections.clear();
+ for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
+ this.selectRow(i, true);
+ }
+ },
+
+ /**
+ * Returns True if there is a selection.
+ * @return {Boolean}
+ */
+ hasSelection : function(){
+ return this.selections.length > 0;
+ },
+
+ /**
+ * Returns True if the specified row is selected.
+ * @param {Number/Record} record The record or index of the record to check
+ * @return {Boolean}
+ */
+ isSelected : function(index){
+ var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
+ return (r && this.selections.key(r.id) ? true : false);
+ },
+
+ /**
+ * Returns True if the specified record id is selected.
+ * @param {String} id The id of record to check
+ * @return {Boolean}
+ */
+ isIdSelected : function(id){
+ return (this.selections.key(id) ? true : false);
+ },
+
+ // private
+ handleMouseDown : function(e, t)
+ {
+ var view = this.grid.view ? this.grid.view : this.grid;
+ var rowIndex;
+ if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
+ return;
};
+ if(e.shiftKey && this.last !== false){
+ var last = this.last;
+ this.selectRange(last, rowIndex, e.ctrlKey);
+ this.last = last; // reset the last
+ view.focusRow(rowIndex);
+ }else{
+ var isSelected = this.isSelected(rowIndex);
+ if(e.button !== 0 && isSelected){
+ view.focusRow(rowIndex);
+ }else if(e.ctrlKey && isSelected){
+ this.deselectRow(rowIndex);
+ }else if(!isSelected){
+ this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
+ view.focusRow(rowIndex);
+ }
+ }
+ this.fireEvent("afterselectionchange", this);
+ },
+ // private
+ handleDragableRowClick : function(grid, rowIndex, e)
+ {
+ if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
+ this.selectRow(rowIndex, false);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(rowIndex);
+ this.fireEvent("afterselectionchange", this);
+ }
+ },
+
+ /**
+ * Selects multiple rows.
+ * @param {Array} rows Array of the indexes of the row to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectRows : function(rows, keepExisting){
+ if(!keepExisting){
+ this.clearSelections();
+ }
+ for(var i = 0, len = rows.length; i < len; i++){
+ this.selectRow(rows[i], true);
+ }
+ },
- var i = 0;
-
- for(; i < startingPos; i++) {
- cells[i].dayName = (++prevStart);
- Roo.log(textEls[i]);
- d.setDate(d.getDate()+1);
-
- //cells[i].className = "fc-past fc-other-month";
- setCellClass(this, cells[i]);
+ /**
+ * Selects a range of rows. All rows in between startRow and endRow are also selected.
+ * @param {Number} startRow The index of the first row in the range
+ * @param {Number} endRow The index of the last row in the range
+ * @param {Boolean} keepExisting (optional) True to retain existing selections
+ */
+ selectRange : function(startRow, endRow, keepExisting){
+ if(this.locked) {
+ return;
+ }
+ if(!keepExisting){
+ this.clearSelections();
}
-
- var intDay = 0;
-
- for(; i < days; i++){
- intDay = i - startingPos + 1;
- cells[i].dayName = (intDay);
- d.setDate(d.getDate()+1);
-
- cells[i].className = ''; // "x-date-active";
- setCellClass(this, cells[i]);
+ if(startRow <= endRow){
+ for(var i = startRow; i <= endRow; i++){
+ this.selectRow(i, true);
+ }
+ }else{
+ for(var i = startRow; i >= endRow; i--){
+ this.selectRow(i, true);
+ }
}
- var extraDays = 0;
-
- for(; i < 42; i++) {
- //textEls[i].innerHTML = (++extraDays);
-
- d.setDate(d.getDate()+1);
- cells[i].dayName = (++extraDays);
- cells[i].className = "fc-future fc-other-month";
- setCellClass(this, cells[i]);
+ },
+
+ /**
+ * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
+ * @param {Number} startRow The index of the first row in the range
+ * @param {Number} endRow The index of the last row in the range
+ */
+ deselectRange : function(startRow, endRow, preventViewNotify){
+ if(this.locked) {
+ return;
}
-
- //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
-
- var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
-
- // this will cause all the cells to mis
- var rows= [];
- var i =0;
- for (var r = 0;r < 6;r++) {
- for (var c =0;c < 7;c++) {
- this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
- }
+ for(var i = startRow; i <= endRow; i++){
+ this.deselectRow(i, preventViewNotify);
}
-
- this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
- for(i=0;i<cells.length;i++) {
-
- this.cells.elements[i].dayName = cells[i].dayName ;
- this.cells.elements[i].className = cells[i].className;
- this.cells.elements[i].initialClassName = cells[i].initialClassName ;
- this.cells.elements[i].title = cells[i].title ;
- this.cells.elements[i].dateValue = cells[i].dateValue ;
+ },
+
+ /**
+ * Selects a row.
+ * @param {Number} row The index of the row to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectRow : function(index, keepExisting, preventViewNotify){
+ if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
+ return;
+ }
+ if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
+ if(!keepExisting || this.singleSelect){
+ this.clearSelections();
+ }
+ var r = this.grid.ds.getAt(index);
+ this.selections.add(r);
+ this.last = this.lastActive = index;
+ if(!preventViewNotify){
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowSelect(index);
+ }
+ this.fireEvent("rowselect", this, index, r);
+ this.fireEvent("selectionchange", this);
}
-
-
-
-
- //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
- //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
-
- ////if(totalRows != 6){
- //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
- // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
- // }
-
- this.fireEvent('monthchange', this, date);
-
-
},
- /**
- * Returns the grid's SelectionModel.
- * @return {SelectionModel}
+
+ /**
+ * Deselects a row.
+ * @param {Number} row The index of the row to deselect
*/
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.grid.CellSelectionModel();
+ deselectRow : function(index, preventViewNotify){
+ if(this.locked) {
+ return;
}
- return this.selModel;
+ if(this.last == index){
+ this.last = false;
+ }
+ if(this.lastActive == index){
+ this.lastActive = false;
+ }
+ var r = this.grid.ds.getAt(index);
+ this.selections.remove(r);
+ if(!preventViewNotify){
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowDeselect(index);
+ }
+ this.fireEvent("rowdeselect", this, index);
+ this.fireEvent("selectionchange", this);
},
- load: function() {
- this.eventStore.load()
-
-
-
+ // private
+ restoreLast : function(){
+ if(this._last){
+ this.last = this._last;
+ }
},
-
- findCell : function(dt) {
- dt = dt.clearTime().getTime();
- var ret = false;
- this.cells.each(function(c){
- //Roo.log("check " +c.dateValue + '?=' + dt);
- if(c.dateValue == dt){
- ret = c;
- return false;
- }
- return true;
- });
-
- return ret;
+
+ // private
+ acceptsNav : function(row, col, cm){
+ return !cm.isHidden(col) && cm.isCellEditable(col, row);
},
-
- findCells : function(rec) {
- var s = rec.data.start_dt.clone().clearTime().getTime();
- // Roo.log(s);
- var e= rec.data.end_dt.clone().clearTime().getTime();
- // Roo.log(e);
- var ret = [];
- this.cells.each(function(c){
- ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
-
- if(c.dateValue > e){
- return ;
+
+ // private
+ onEditorKey : function(field, e){
+ var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
+ if(k == e.TAB){
+ e.stopEvent();
+ ed.completeEdit();
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
}
- if(c.dateValue < s){
- return ;
+ }else if(k == e.ENTER && !e.ctrlKey){
+ e.stopEvent();
+ ed.completeEdit();
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
}
- ret.push(c);
- });
-
- return ret;
- },
+ }else if(k == e.ESC){
+ ed.cancelEdit();
+ }
+ if(newCell){
+ g.startEditing(newCell[0], newCell[1]);
+ }
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.grid.CellSelectionModel
+ * @extends Roo.grid.AbstractSelectionModel
+ * This class provides the basic implementation for cell selection in a grid.
+ * @constructor
+ * @param {Object} config The object containing the configuration of this model.
+ * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
+ */
+Roo.grid.CellSelectionModel = function(config){
+ Roo.apply(this, config);
+
+ this.selection = null;
+
+ this.addEvents({
+ /**
+ * @event beforerowselect
+ * Fires before a cell is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected row index
+ * @param {Number} colIndex The selected cell index
+ */
+ "beforecellselect" : true,
+ /**
+ * @event cellselect
+ * Fires when a cell is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected row index
+ * @param {Number} colIndex The selected cell index
+ */
+ "cellselect" : true,
+ /**
+ * @event selectionchange
+ * Fires when the active selection changes.
+ * @param {SelectionModel} this
+ * @param {Object} selection null for no selection or an object (o) with two properties
+ <ul>
+ <li>o.record: the record object for the row the selection is in</li>
+ <li>o.cell: An array of [rowIndex, columnIndex]</li>
+ </ul>
+ */
+ "selectionchange" : true,
+ /**
+ * @event tabend
+ * Fires when the tab (or enter) was pressed on the last editable cell
+ * You can use this to trigger add new row.
+ * @param {SelectionModel} this
+ */
+ "tabend" : true,
+ /**
+ * @event beforeeditnext
+ * Fires before the next editable sell is made active
+ * You can use this to skip to another cell or fire the tabend
+ * if you set cell to false
+ * @param {Object} eventdata object : { cell : [ row, col ] }
+ */
+ "beforeeditnext" : true
+ });
+ Roo.grid.CellSelectionModel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel, {
- findBestRow: function(cells)
- {
- var ret = 0;
-
- for (var i =0 ; i < cells.length;i++) {
- ret = Math.max(cells[i].rows || 0,ret);
+ enter_is_tab: false,
+
+ /** @ignore */
+ initEvents : function(){
+ this.grid.on("mousedown", this.handleMouseDown, this);
+ this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
+ var view = this.grid.view;
+ view.on("refresh", this.onViewChange, this);
+ view.on("rowupdated", this.onRowUpdated, this);
+ view.on("beforerowremoved", this.clearSelections, this);
+ view.on("beforerowsinserted", this.clearSelections, this);
+ if(this.grid.isEditor){
+ this.grid.on("beforeedit", this.beforeEdit, this);
}
- return ret;
-
},
-
-
- addItem : function(rec)
- {
- // look for vertical location slot in
- var cells = this.findCells(rec);
-
- rec.row = this.findBestRow(cells);
-
- // work out the location.
-
- var crow = false;
- var rows = [];
- for(var i =0; i < cells.length; i++) {
- if (!crow) {
- crow = {
- start : cells[i],
- end : cells[i]
- };
- continue;
- }
- if (crow.start.getY() == cells[i].getY()) {
- // on same row.
- crow.end = cells[i];
- continue;
- }
- // different row.
- rows.push(crow);
- crow = {
- start: cells[i],
- end : cells[i]
- };
-
+
+ //private
+ beforeEdit : function(e){
+ this.select(e.row, e.column, false, true, e.record);
+ },
+
+ //private
+ onRowUpdated : function(v, index, r){
+ if(this.selection && this.selection.record == r){
+ v.onCellSelect(index, this.selection.cell[1]);
}
-
- rows.push(crow);
- rec.els = [];
- rec.rows = rows;
- rec.cells = cells;
- for (var i = 0; i < cells.length;i++) {
- cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
-
+ },
+
+ //private
+ onViewChange : function(){
+ this.clearSelections(true);
+ },
+
+ /**
+ * Returns the currently selected cell,.
+ * @return {Array} The selected cell (row, column) or null if none selected.
+ */
+ getSelectedCell : function(){
+ return this.selection ? this.selection.cell : null;
+ },
+
+ /**
+ * Clears all selections.
+ * @param {Boolean} true to prevent the gridview from being notified about the change.
+ */
+ clearSelections : function(preventNotify){
+ var s = this.selection;
+ if(s){
+ if(preventNotify !== true){
+ this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
+ }
+ this.selection = null;
+ this.fireEvent("selectionchange", this, null);
}
-
-
},
-
- clearEvents: function() {
-
- if (!this.eventStore.getCount()) {
+
+ /**
+ * Returns true if there is a selection.
+ * @return {Boolean}
+ */
+ hasSelection : function(){
+ return this.selection ? true : false;
+ },
+
+ /** @ignore */
+ handleMouseDown : function(e, t){
+ var v = this.grid.getView();
+ if(this.isLocked()){
return;
+ };
+ var row = v.findRowIndex(t);
+ var cell = v.findCellIndex(t);
+ if(row !== false && cell !== false){
+ this.select(row, cell);
}
- // reset number of rows in cells.
- Roo.each(this.cells.elements, function(c){
- c.rows = 0;
- });
-
- this.eventStore.each(function(e) {
- this.clearEvent(e);
- },this);
-
},
-
- clearEvent : function(ev)
- {
- if (ev.els) {
- Roo.each(ev.els, function(el) {
- el.un('mouseenter' ,this.onEventEnter, this);
- el.un('mouseleave' ,this.onEventLeave, this);
- el.remove();
- },this);
- ev.els = [];
+
+ /**
+ * Selects a cell.
+ * @param {Number} rowIndex
+ * @param {Number} collIndex
+ */
+ select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
+ if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
+ this.clearSelections();
+ r = r || this.grid.dataSource.getAt(rowIndex);
+ this.selection = {
+ record : r,
+ cell : [rowIndex, colIndex]
+ };
+ if(!preventViewNotify){
+ var v = this.grid.getView();
+ v.onCellSelect(rowIndex, colIndex);
+ if(preventFocus !== true){
+ v.focusCell(rowIndex, colIndex);
+ }
+ }
+ this.fireEvent("cellselect", this, rowIndex, colIndex);
+ this.fireEvent("selectionchange", this, this.selection);
}
},
-
-
- renderEvent : function(ev,ctr) {
- if (!ctr) {
- ctr = this.view.el.select('.fc-event-container',true).first();
+
+ //private
+ isSelectable : function(rowIndex, colIndex, cm){
+ return !cm.isHidden(colIndex);
+ },
+
+ /** @ignore */
+ handleKeyDown : function(e){
+ //Roo.log('Cell Sel Model handleKeyDown');
+ if(!e.isNavKeyPress()){
+ return;
}
-
-
- this.clearEvent(ev);
- //code
-
-
-
- ev.els = [];
- var cells = ev.cells;
- var rows = ev.rows;
- this.fireEvent('eventrender', this, ev);
-
- for(var i =0; i < rows.length; i++) {
-
- cls = '';
- if (i == 0) {
- cls += ' fc-event-start';
- }
- if ((i+1) == rows.length) {
- cls += ' fc-event-end';
+ var g = this.grid, s = this.selection;
+ if(!s){
+ e.stopEvent();
+ var cell = g.walkCells(0, 0, 1, this.isSelectable, this);
+ if(cell){
+ this.select(cell[0], cell[1]);
}
+ return;
+ }
+ var sm = this;
+ var walk = function(row, col, step){
+ return g.walkCells(row, col, step, sm.isSelectable, sm);
+ };
+ var k = e.getKey(), r = s.cell[0], c = s.cell[1];
+ var newCell;
+
+
+
+ switch(k){
+ case e.TAB:
+ // handled by onEditorKey
+ if (g.isEditor && g.editing) {
+ return;
+ }
+ if(e.shiftKey) {
+ newCell = walk(r, c-1, -1);
+ } else {
+ newCell = walk(r, c+1, 1);
+ }
+ break;
- //Roo.log(ev.data);
- // how many rows should it span..
- var cg = this.eventTmpl.append(ctr,Roo.apply({
- fccls : cls
-
- }, ev.data) , true);
-
-
- cg.on('mouseenter' ,this.onEventEnter, this, ev);
- cg.on('mouseleave' ,this.onEventLeave, this, ev);
- cg.on('click', this.onEventClick, this, ev);
-
- ev.els.push(cg);
+ case e.DOWN:
+ newCell = walk(r+1, c, 1);
+ break;
- var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
- var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
- //Roo.log(cg);
-
- cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
- cg.setWidth(ebox.right - sbox.x -2);
- }
- },
-
- renderEvents: function()
- {
- // first make sure there is enough space..
-
- if (!this.eventTmpl) {
- this.eventTmpl = new Roo.Template(
- '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}" style="position: absolute" unselectable="on">' +
- '<div class="fc-event-inner">' +
- '<span class="fc-event-time">{time}</span>' +
- '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
- '</div>' +
- '<div class="ui-resizable-heandle ui-resizable-e"> </div>' +
- '</div>'
- );
-
- }
-
-
-
- this.cells.each(function(c) {
- //Roo.log(c.select('.fc-day-content div',true).first());
- c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
- });
-
- var ctr = this.view.el.select('.fc-event-container',true).first();
-
- var cls;
- this.eventStore.each(function(ev){
+ case e.UP:
+ newCell = walk(r-1, c, -1);
+ break;
- this.renderEvent(ev);
-
-
- }, this);
- this.view.layout();
-
- },
-
- onEventEnter: function (e, el,event,d) {
- this.fireEvent('evententer', this, el, event);
- },
-
- onEventLeave: function (e, el,event,d) {
- this.fireEvent('eventleave', this, el, event);
- },
-
- onEventClick: function (e, el,event,d) {
- this.fireEvent('eventclick', this, el, event);
- },
-
- onMonthChange: function () {
- this.store.load();
- },
-
- onLoad: function () {
-
- //Roo.log('calendar onload');
-//
- if(this.eventStore.getCount() > 0){
+ case e.RIGHT:
+ newCell = walk(r, c+1, 1);
+ break;
-
+ case e.LEFT:
+ newCell = walk(r, c-1, -1);
+ break;
- this.eventStore.each(function(d){
-
+ case e.ENTER:
- // FIXME..
- var add = d.data;
- if (typeof(add.end_dt) == 'undefined') {
- Roo.log("Missing End time in calendar data: ");
- Roo.log(d);
- return;
- }
- if (typeof(add.start_dt) == 'undefined') {
- Roo.log("Missing Start time in calendar data: ");
- Roo.log(d);
- return;
+ if(g.isEditor && !g.editing){
+ g.startEditing(r, c);
+ e.stopEvent();
+ return;
}
- add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
- add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
- add.id = add.id || d.id;
- add.title = add.title || '??';
- this.addItem(d);
-
- },this);
+ break;
+ };
+ if(newCell){
+ this.select(newCell[0], newCell[1]);
+ e.stopEvent();
+
}
-
- this.renderEvents();
- }
-
+ },
-});
-/*
- grid : {
- xtype: 'Grid',
- xns: Roo.grid,
- listeners : {
- render : function ()
- {
- _this.grid = this;
-
- if (!this.view.el.hasClass('course-timesheet')) {
- this.view.el.addClass('course-timesheet');
- }
- if (this.tsStyle) {
- this.ds.load({});
- return;
- }
- Roo.log('width');
- Roo.log(_this.grid.view.el.getWidth());
-
-
- this.tsStyle = Roo.util.CSS.createStyleSheet({
- '.course-timesheet .x-grid-row' : {
- height: '80px'
- },
- '.x-grid-row td' : {
- 'vertical-align' : 0
- },
- '.course-edit-link' : {
- 'color' : 'blue',
- 'text-overflow' : 'ellipsis',
- 'overflow' : 'hidden',
- 'white-space' : 'nowrap',
- 'cursor' : 'pointer'
- },
- '.sub-link' : {
- 'color' : 'green'
- },
- '.de-act-sup-link' : {
- 'color' : 'purple',
- 'text-decoration' : 'line-through'
- },
- '.de-act-link' : {
- 'color' : 'red',
- 'text-decoration' : 'line-through'
- },
- '.course-timesheet .course-highlight' : {
- 'border-top-style': 'dashed !important',
- 'border-bottom-bottom': 'dashed !important'
- },
- '.course-timesheet .course-item' : {
- 'font-family' : 'tahoma, arial, helvetica',
- 'font-size' : '11px',
- 'overflow' : 'hidden',
- 'padding-left' : '10px',
- 'padding-right' : '10px',
- 'padding-top' : '10px'
- }
-
- }, Roo.id());
- this.ds.load({});
- }
- },
- autoWidth : true,
- monitorWindowResize : false,
- cellrenderer : function(v,x,r)
- {
- return v;
- },
- sm : {
- xtype: 'CellSelectionModel',
- xns: Roo.grid
- },
- dataSource : {
- xtype: 'Store',
- xns: Roo.data,
- listeners : {
- beforeload : function (_self, options)
- {
- options.params = options.params || {};
- options.params._month = _this.monthField.getValue();
- options.params.limit = 9999;
- options.params['sort'] = 'when_dt';
- options.params['dir'] = 'ASC';
- this.proxy.loadResponse = this.loadResponse;
- Roo.log("load?");
- //this.addColumns();
- },
- load : function (_self, records, options)
- {
- _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
- // if you click on the translation.. you can edit it...
- var el = Roo.get(this);
- var id = el.dom.getAttribute('data-id');
- var d = el.dom.getAttribute('data-date');
- var t = el.dom.getAttribute('data-time');
- //var id = this.child('span').dom.textContent;
-
- //Roo.log(this);
- Pman.Dialog.CourseCalendar.show({
- id : id,
- when_d : d,
- when_t : t,
- productitem_active : id ? 1 : 0
- }, function() {
- _this.grid.ds.load({});
- });
-
- });
-
- _this.panel.fireEvent('resize', [ '', '' ]);
- }
- },
- loadResponse : function(o, success, response){
- // this is overridden on before load..
-
- Roo.log("our code?");
- //Roo.log(success);
- //Roo.log(response)
- delete this.activeRequest;
- if(!success){
- this.fireEvent("loadexception", this, o, response);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
- return;
- }
- var result;
- try {
- result = o.reader.read(response);
- }catch(e){
- Roo.log("load exception?");
- this.fireEvent("loadexception", this, o, response, e);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
- return;
- }
- Roo.log("ready...");
- // loop through result.records;
- // and set this.tdate[date] = [] << array of records..
- _this.tdata = {};
- Roo.each(result.records, function(r){
- //Roo.log(r.data);
- if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
- _this.tdata[r.data.when_dt.format('j')] = [];
- }
- _this.tdata[r.data.when_dt.format('j')].push(r.data);
- });
-
- //Roo.log(_this.tdata);
-
- result.records = [];
- result.totalRecords = 6;
-
- // let's generate some duumy records for the rows.
- //var st = _this.dateField.getValue();
-
- // work out monday..
- //st = st.add(Date.DAY, -1 * st.format('w'));
-
- var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
-
- var firstOfMonth = date.getFirstDayOfMonth();
- var days = date.getDaysInMonth();
- var d = 1;
- var firstAdded = false;
- for (var i = 0; i < result.totalRecords ; i++) {
- //var d= st.add(Date.DAY, i);
- var row = {};
- var added = 0;
- for(var w = 0 ; w < 7 ; w++){
- if(!firstAdded && firstOfMonth != w){
- continue;
- }
- if(d > days){
- continue;
- }
- firstAdded = true;
- var dd = (d > 0 && d < 10) ? "0"+d : d;
- row['weekday'+w] = String.format(
- '<span style="font-size: 16px;"><b>{0}</b></span>'+
- '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
- d,
- date.format('Y-m-')+dd
- );
- added++;
- if(typeof(_this.tdata[d]) != 'undefined'){
- Roo.each(_this.tdata[d], function(r){
- var is_sub = '';
- var deactive = '';
- var id = r.id;
- var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
- if(r.parent_id*1>0){
- is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
- id = r.parent_id;
- }
- if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
- deactive = 'de-act-link';
- }
-
- row['weekday'+w] += String.format(
- '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
- id, //0
- r.product_id_name, //1
- r.when_dt.format('h:ia'), //2
- is_sub, //3
- deactive, //4
- desc // 5
- );
- });
- }
- d++;
- }
-
- // only do this if something added..
- if(added > 0){
- result.records.push(_this.grid.dataSource.reader.newRow(row));
- }
-
-
- // push it twice. (second one with an hour..
-
- }
- //Roo.log(result);
- this.fireEvent("load", this, o, o.request.arg);
- o.request.callback.call(o.request.scope, result, o.request.arg, true);
- },
- sortInfo : {field: 'when_dt', direction : 'ASC' },
- proxy : {
- xtype: 'HttpProxy',
- xns: Roo.data,
- method : 'GET',
- url : baseURL + '/Roo/Shop_course.php'
- },
- reader : {
- xtype: 'JsonReader',
- xns: Roo.data,
- id : 'id',
- fields : [
- {
- 'name': 'id',
- 'type': 'int'
- },
- {
- 'name': 'when_dt',
- 'type': 'string'
- },
- {
- 'name': 'end_dt',
- 'type': 'string'
- },
- {
- 'name': 'parent_id',
- 'type': 'int'
- },
- {
- 'name': 'product_id',
- 'type': 'int'
- },
- {
- 'name': 'productitem_id',
- 'type': 'int'
- },
- {
- 'name': 'guid',
- 'type': 'int'
- }
- ]
- }
- },
- toolbar : {
- xtype: 'Toolbar',
- xns: Roo,
- items : [
- {
- xtype: 'Button',
- xns: Roo.Toolbar,
- listeners : {
- click : function (_self, e)
- {
- var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
- sd.setMonth(sd.getMonth()-1);
- _this.monthField.setValue(sd.format('Y-m-d'));
- _this.grid.ds.load({});
- }
- },
- text : "Back"
- },
- {
- xtype: 'Separator',
- xns: Roo.Toolbar
- },
- {
- xtype: 'MonthField',
- xns: Roo.form,
- listeners : {
- render : function (_self)
- {
- _this.monthField = _self;
- // _this.monthField.set today
- },
- select : function (combo, date)
- {
- _this.grid.ds.load({});
- }
- },
- value : (function() { return new Date(); })()
- },
- {
- xtype: 'Separator',
- xns: Roo.Toolbar
- },
- {
- xtype: 'TextItem',
- xns: Roo.Toolbar,
- text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
- },
- {
- xtype: 'Fill',
- xns: Roo.Toolbar
- },
- {
- xtype: 'Button',
- xns: Roo.Toolbar,
- listeners : {
- click : function (_self, e)
- {
- var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
- sd.setMonth(sd.getMonth()+1);
- _this.monthField.setValue(sd.format('Y-m-d'));
- _this.grid.ds.load({});
- }
- },
- text : "Next"
- }
- ]
- },
-
+ acceptsNav : function(row, col, cm){
+ return !cm.isHidden(col) && cm.isCellEditable(col, row);
+ },
+ /**
+ * Selects a cell.
+ * @param {Number} field (not used) - as it's normally used as a listener
+ * @param {Number} e - event - fake it by using
+ *
+ * var e = Roo.EventObjectImpl.prototype;
+ * e.keyCode = e.TAB
+ *
+ *
+ */
+ onEditorKey : function(field, e){
+
+ var k = e.getKey(),
+ newCell,
+ g = this.grid,
+ ed = g.activeEditor,
+ forward = false;
+ ///Roo.log('onEditorKey' + k);
+
+
+ if (this.enter_is_tab && k == e.ENTER) {
+ k = e.TAB;
+ }
+
+ if(k == e.TAB){
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+ forward = true;
}
- };
+
+ e.stopEvent();
+
+ } else if(k == e.ENTER && !e.ctrlKey){
+ ed.completeEdit();
+ e.stopEvent();
+ newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- *//*
+ } else if(k == e.ESC){
+ ed.cancelEdit();
+ }
+
+ if (newCell) {
+ var ecall = { cell : newCell, forward : forward };
+ this.fireEvent('beforeeditnext', ecall );
+ newCell = ecall.cell;
+ forward = ecall.forward;
+ }
+
+ if(newCell){
+ //Roo.log('next cell after edit');
+ g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
+ } else if (forward) {
+ // tabbed past last
+ this.fireEvent.defer(100, this, ['tabend',this]);
+ }
+ }
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.LoadMask
- * A simple utility class for generically masking elements while loading data. If the element being masked has
- * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
- * process and the mask element will be cached for reuse. For all other elements, this mask will replace the
- * element's UpdateManager load indicator and will be destroyed after the initial load.
- * @constructor
- * Create a new LoadMask
- * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
- * @param {Object} config The config object
+ * @class Roo.grid.EditorGrid
+ * @extends Roo.grid.Grid
+ * Class for creating and editable grid.
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} dataSource The data model to bind to
+ * @param {Object} colModel The column model with info about this grid's columns
*/
-Roo.LoadMask = function(el, config){
- this.el = Roo.get(el);
- Roo.apply(this, config);
- if(this.store){
- this.store.on('beforeload', this.onBeforeLoad, this);
- this.store.on('load', this.onLoad, this);
- this.store.on('loadexception', this.onLoadException, this);
- this.removeMask = false;
- }else{
- var um = this.el.getUpdateManager();
- um.showLoadIndicator = false; // disable the default indicator
- um.on('beforeupdate', this.onBeforeLoad, this);
- um.on('update', this.onLoad, this);
- um.on('failure', this.onLoad, this);
- this.removeMask = true;
+Roo.grid.EditorGrid = function(container, config){
+ Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
+ this.getGridEl().addClass("xedit-grid");
+
+ if(!this.selModel){
+ this.selModel = new Roo.grid.CellSelectionModel();
}
+
+ this.activeEditor = null;
+
+ this.addEvents({
+ /**
+ * @event beforeedit
+ * Fires before cell editing is triggered. The edit event object has the following properties <br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>grid - This grid</li>
+ * <li>record - The record being edited</li>
+ * <li>field - The field name being edited</li>
+ * <li>value - The value for the field being edited.</li>
+ * <li>row - The grid row index</li>
+ * <li>column - The grid column index</li>
+ * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+ * </ul>
+ * @param {Object} e An edit event (see above for description)
+ */
+ "beforeedit" : true,
+ /**
+ * @event afteredit
+ * Fires after a cell is edited. <br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>grid - This grid</li>
+ * <li>record - The record being edited</li>
+ * <li>field - The field name being edited</li>
+ * <li>value - The value being set</li>
+ * <li>originalValue - The original value for the field, before the edit.</li>
+ * <li>row - The grid row index</li>
+ * <li>column - The grid column index</li>
+ * </ul>
+ * @param {Object} e An edit event (see above for description)
+ */
+ "afteredit" : true,
+ /**
+ * @event validateedit
+ * Fires after a cell is edited, but before the value is set in the record.
+ * You can use this to modify the value being set in the field, Return false
+ * to cancel the change. The edit event object has the following properties <br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>editor - This editor</li>
+ * <li>grid - This grid</li>
+ * <li>record - The record being edited</li>
+ * <li>field - The field name being edited</li>
+ * <li>value - The value being set</li>
+ * <li>originalValue - The original value for the field, before the edit.</li>
+ * <li>row - The grid row index</li>
+ * <li>column - The grid column index</li>
+ * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+ * </ul>
+ * @param {Object} e An edit event (see above for description)
+ */
+ "validateedit" : true
+ });
+ this.on("bodyscroll", this.stopEditing, this);
+ this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick, this);
};
-Roo.LoadMask.prototype = {
+Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
/**
- * @cfg {Boolean} removeMask
- * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
- * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
+ * @cfg {Number} clicksToEdit
+ * The number of clicks on a cell required to display the cell's editor (defaults to 2)
*/
- removeMask : false,
+ clicksToEdit: 2,
+
+ // private
+ isEditor : true,
+ // private
+ trackMouseOver: false, // causes very odd FF errors
+
+ onCellDblClick : function(g, row, col){
+ this.startEditing(row, col);
+ },
+
+ onEditComplete : function(ed, value, startValue){
+ this.editing = false;
+ this.activeEditor = null;
+ ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
+ var r = ed.record;
+ var field = this.colModel.getDataIndex(ed.col);
+ var e = {
+ grid: this,
+ record: r,
+ field: field,
+ originalValue: startValue,
+ value: value,
+ row: ed.row,
+ column: ed.col,
+ cancel:false,
+ editor: ed
+ };
+ var cell = Roo.get(this.view.getCell(ed.row,ed.col));
+ cell.show();
+
+ if(String(value) !== String(startValue)){
+
+ if(this.fireEvent("validateedit", e) !== false && !e.cancel){
+ r.set(field, e.value);
+ // if we are dealing with a combo box..
+ // then we also set the 'name' colum to be the displayField
+ if (ed.field.displayField && ed.field.name) {
+ r.set(ed.field.name, ed.field.el.dom.value);
+ }
+
+ delete e.cancel; //?? why!!!
+ this.fireEvent("afteredit", e);
+ }
+ } else {
+ this.fireEvent("afteredit", e); // always fire it!
+ }
+ this.view.focusCell(ed.row, ed.col);
+ },
+
/**
- * @cfg {String} msg
- * The text to display in a centered loading message box (defaults to 'Loading...')
+ * Starts editing the specified for the specified row/column
+ * @param {Number} rowIndex
+ * @param {Number} colIndex
*/
- msg : 'Loading...',
+ startEditing : function(row, col){
+ this.stopEditing();
+ if(this.colModel.isCellEditable(col, row)){
+ this.view.ensureVisible(row, col, true);
+
+ var r = this.dataSource.getAt(row);
+ var field = this.colModel.getDataIndex(col);
+ var cell = Roo.get(this.view.getCell(row,col));
+ var e = {
+ grid: this,
+ record: r,
+ field: field,
+ value: r.data[field],
+ row: row,
+ column: col,
+ cancel:false
+ };
+ if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
+ this.editing = true;
+ var ed = this.colModel.getCellEditor(col, row);
+
+ if (!ed) {
+ return;
+ }
+ if(!ed.rendered){
+ ed.render(ed.parentEl || document.body);
+ }
+ ed.field.reset();
+
+ cell.hide();
+
+ (function(){ // complex but required for focus issues in safari, ie and opera
+ ed.row = row;
+ ed.col = col;
+ ed.record = r;
+ ed.on("complete", this.onEditComplete, this, {single: true});
+ ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
+ this.activeEditor = ed;
+ var v = r.data[field];
+ ed.startEdit(this.view.getCell(row, col), v);
+ // combo's with 'displayField and name set
+ if (ed.field.displayField && ed.field.name) {
+ ed.field.el.dom.value = r.data[ed.field.name];
+ }
+
+
+ }).defer(50, this);
+ }
+ }
+ },
+
/**
- * @cfg {String} msgCls
- * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
+ * Stops any active editing
*/
- msgCls : 'x-mask-loading',
-
- /**
- * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
- * @type Boolean
+ stopEditing : function(){
+ if(this.activeEditor){
+ this.activeEditor.completeEdit();
+ }
+ this.activeEditor = null;
+ },
+
+ /**
+ * Called to get grid's drag proxy text, by default returns this.ddText.
+ * @return {String}
*/
- disabled: false,
+ getDragDropText : function(){
+ var count = this.selModel.getSelectedCell() ? 1 : 0;
+ return String.format(this.ddText, count, count == 1 ? '' : 's');
+ }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private - not really -- you end up using it !
+// This is a support class used internally by the Grid components
+
+/**
+ * @class Roo.grid.GridEditor
+ * @extends Roo.Editor
+ * Class for creating and editable grid elements.
+ * @param {Object} config any settings (must include field)
+ */
+Roo.grid.GridEditor = function(field, config){
+ if (!config && field.field) {
+ config = field;
+ field = Roo.factory(config.field, Roo.form);
+ }
+ Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
+ field.monitorTab = false;
+};
+Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
+
/**
- * Disables the mask to prevent it from being displayed
+ * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
*/
- disable : function(){
- this.disabled = true;
+
+ alignment: "tl-tl",
+ autoSize: "width",
+ hideEl : false,
+ cls: "x-small-editor x-grid-editor",
+ shim:false,
+ shadow:"frame"
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+
+Roo.grid.PropertyRecord = Roo.data.Record.create([
+ {name:'name',type:'string'}, 'value'
+]);
+
+
+Roo.grid.PropertyStore = function(grid, source){
+ this.grid = grid;
+ this.store = new Roo.data.Store({
+ recordType : Roo.grid.PropertyRecord
+ });
+ this.store.on('update', this.onUpdate, this);
+ if(source){
+ this.setSource(source);
+ }
+ Roo.grid.PropertyStore.superclass.constructor.call(this);
+};
+
+
+
+Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
+ setSource : function(o){
+ this.source = o;
+ this.store.removeAll();
+ var data = [];
+ for(var k in o){
+ if(this.isEditableValue(o[k])){
+ data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
+ }
+ }
+ this.store.loadRecords({records: data}, {}, true);
},
- /**
- * Enables the mask so that it can be displayed
- */
- enable : function(){
- this.disabled = false;
+ onUpdate : function(ds, record, type){
+ if(type == Roo.data.Record.EDIT){
+ var v = record.data['value'];
+ var oldValue = record.modified['value'];
+ if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
+ this.source[record.id] = v;
+ record.commit();
+ this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
+ }else{
+ record.reject();
+ }
+ }
+ },
+
+ getProperty : function(row){
+ return this.store.getAt(row);
+ },
+
+ isEditableValue: function(val){
+ if(val && val instanceof Date){
+ return true;
+ }else if(typeof val == 'object' || typeof val == 'function'){
+ return false;
+ }
+ return true;
+ },
+
+ setValue : function(prop, value){
+ this.source[prop] = value;
+ this.store.getById(prop).set('value', value);
+ },
+
+ getSource : function(){
+ return this.source;
+ }
+});
+
+Roo.grid.PropertyColumnModel = function(grid, store){
+ this.grid = grid;
+ var g = Roo.grid;
+ g.PropertyColumnModel.superclass.constructor.call(this, [
+ {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
+ {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
+ ]);
+ this.store = store;
+ this.bselect = Roo.DomHelper.append(document.body, {
+ tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
+ {tag: 'option', value: 'true', html: 'true'},
+ {tag: 'option', value: 'false', html: 'false'}
+ ]
+ });
+ Roo.id(this.bselect);
+ var f = Roo.form;
+ this.editors = {
+ 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
+ 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
+ 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
+ 'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
+ 'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
+ };
+ this.renderCellDelegate = this.renderCell.createDelegate(this);
+ this.renderPropDelegate = this.renderProp.createDelegate(this);
+};
+
+Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
+
+
+ nameText : 'Name',
+ valueText : 'Value',
+
+ dateFormat : 'm/j/Y',
+
+
+ renderDate : function(dateVal){
+ return dateVal.dateFormat(this.dateFormat);
+ },
+
+ renderBool : function(bVal){
+ return bVal ? 'true' : 'false';
+ },
+
+ isCellEditable : function(colIndex, rowIndex){
+ return colIndex == 1;
+ },
+
+ getRenderer : function(col){
+ return col == 1 ?
+ this.renderCellDelegate : this.renderPropDelegate;
+ },
+
+ renderProp : function(v){
+ return this.getPropertyName(v);
},
+
+ renderCell : function(val){
+ var rv = val;
+ if(val instanceof Date){
+ rv = this.renderDate(val);
+ }else if(typeof val == 'boolean'){
+ rv = this.renderBool(val);
+ }
+ return Roo.util.Format.htmlEncode(rv);
+ },
+
+ getPropertyName : function(name){
+ var pn = this.grid.propertyNames;
+ return pn && pn[name] ? pn[name] : name;
+ },
+
+ getCellEditor : function(colIndex, rowIndex){
+ var p = this.store.getProperty(rowIndex);
+ var n = p.data['name'], val = p.data['value'];
+
+ if(typeof(this.grid.customEditors[n]) == 'string'){
+ return this.editors[this.grid.customEditors[n]];
+ }
+ if(typeof(this.grid.customEditors[n]) != 'undefined'){
+ return this.grid.customEditors[n];
+ }
+ if(val instanceof Date){
+ return this.editors['date'];
+ }else if(typeof val == 'number'){
+ return this.editors['number'];
+ }else if(typeof val == 'boolean'){
+ return this.editors['boolean'];
+ }else{
+ return this.editors['string'];
+ }
+ }
+});
+
+/**
+ * @class Roo.grid.PropertyGrid
+ * @extends Roo.grid.EditorGrid
+ * This class represents the interface of a component based property grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.PropertyGrid("my-container-id", {
+
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.PropertyGrid = function(container, config){
+ config = config || {};
+ var store = new Roo.grid.PropertyStore(this);
+ this.store = store;
+ var cm = new Roo.grid.PropertyColumnModel(this, store);
+ store.store.sort('name', 'ASC');
+ Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
+ ds: store.store,
+ cm: cm,
+ enableColLock:false,
+ enableColumnMove:false,
+ stripeRows:false,
+ trackMouseOver: false,
+ clicksToEdit:1
+ }, config));
+ this.getGridEl().addClass('x-props-grid');
+ this.lastEditRow = null;
+ this.on('columnresize', this.onColumnResize, this);
+ this.addEvents({
+ /**
+ * @event beforepropertychange
+ * Fires before a property changes (return false to stop?)
+ * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+ * @param {String} id Record Id
+ * @param {String} newval New Value
+ * @param {String} oldval Old Value
+ */
+ "beforepropertychange": true,
+ /**
+ * @event propertychange
+ * Fires after a property changes
+ * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+ * @param {String} id Record Id
+ * @param {String} newval New Value
+ * @param {String} oldval Old Value
+ */
+ "propertychange": true
+ });
+ this.customEditors = this.customEditors || {};
+};
+Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
- onLoadException : function()
- {
- Roo.log(arguments);
-
- if (typeof(arguments[3]) != 'undefined') {
- Roo.MessageBox.alert("Error loading",arguments[3]);
- }
- /*
- try {
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
- }
- } catch(e) {
-
- }
- */
+ /**
+ * @cfg {Object} customEditors map of colnames=> custom editors.
+ * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
+ * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
+ * false disables editing of the field.
+ */
- (function() { this.el.unmask(this.removeMask); }).defer(50, this);
- },
- // private
- onLoad : function()
- {
- (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+ /**
+ * @cfg {Object} propertyNames map of property Names to their displayed value
+ */
+
+ render : function(){
+ Roo.grid.PropertyGrid.superclass.render.call(this);
+ this.autoSize.defer(100, this);
},
- // private
- onBeforeLoad : function(){
- if(!this.disabled){
- (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
+ autoSize : function(){
+ Roo.grid.PropertyGrid.superclass.autoSize.call(this);
+ if(this.view){
+ this.view.fitColumns();
}
},
- // private
- destroy : function(){
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
- }else{
- var um = this.el.getUpdateManager();
- um.un('beforeupdate', this.onBeforeLoad, this);
- um.un('update', this.onLoad, this);
- um.un('failure', this.onLoad, this);
- }
+ onColumnResize : function(){
+ this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
+ this.autoSize();
+ },
+ /**
+ * Sets the data for the Grid
+ * accepts a Key => Value object of all the elements avaiable.
+ * @param {Object} data to appear in grid.
+ */
+ setSource : function(source){
+ this.store.setSource(source);
+ //this.autoSize();
+ },
+ /**
+ * Gets all the data from the grid.
+ * @return {Object} data data stored in grid
+ */
+ getSource : function(){
+ return this.store.getSource();
}
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.XTemplate
- * @extends Roo.Template
- * Provides a template that can have nested templates for loops or conditionals. The syntax is:
-<pre><code>
-var t = new Roo.XTemplate(
- '<select name="{name}">',
- '<tpl for="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
- '</select>'
-);
+});/*
+
+ * Licence LGPL
-// then append, applying the master template values
- </code></pre>
- *
- * Supported features:
- *
- * Tags:
-
-<pre><code>
- {a_variable} - output encoded.
- {a_variable.format:("Y-m-d")} - call a method on the variable
- {a_variable:raw} - unencoded output
- {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
- {a_variable:this.method_on_template(...)} - call a method on the template object.
+ */
-</code></pre>
- * The tpl tag:
-<pre><code>
- <tpl for="a_variable or condition.."></tpl>
- <tpl if="a_variable or condition"></tpl>
- <tpl exec="some javascript"></tpl>
- <tpl name="named_template"></tpl> (experimental)
+/**
+ * @class Roo.grid.Calendar
+ * @extends Roo.grid.Grid
+ * This class extends the Grid to provide a calendar widget
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.Calendar("my-container-id", {
+ ds: myDataStore,
+ cm: myColModel,
+ selModel: mySelectionModel,
+ autoSizeColumns: true,
+ monitorWindowResize: false,
+ trackMouseOver: true
+ eventstore : real data store..
+ });
+ // set any options
+ grid.render();
- <tpl for="."></tpl> - just iterate the property..
- <tpl for=".."></tpl> - iterates with the parent (probably the template)
-</code></pre>
- *
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
*/
-Roo.XTemplate = function()
-{
- Roo.XTemplate.superclass.constructor.apply(this, arguments);
- if (this.html) {
- this.compile();
- }
-};
-
-
-Roo.extend(Roo.XTemplate, Roo.Template, {
+Roo.grid.Calendar = function(container, config){
+ // initialize the container
+ this.container = Roo.get(container);
+ this.container.update("");
+ this.container.setStyle("overflow", "hidden");
+ this.container.addClass('x-grid-container');
- /**
- * The various sub templates
- */
- tpls : false,
- /**
- *
- * basic tag replacing syntax
- * WORD:WORD()
- *
- * // you can fake an object call by doing this
- * x.t:(test,tesT)
- *
- */
- re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+ this.id = this.container.id;
- /**
- * compile the template
- *
- * This is not recursive, so I'm not sure how nested templates are really going to be handled..
- *
- */
- compile: function()
- {
- var s = this.html;
-
- s = ['<tpl>', s, '</tpl>'].join('');
-
- var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
- nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
- ifRe = /^<tpl\b[^>]*?if="(.*?)"/,
- execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
- namedRe = /^<tpl\b[^>]*?name="(\w+)"/, // named templates..
- m,
- id = 0,
- tpls = [];
+ Roo.apply(this, config);
+ // check and correct shorthanded configs
- while(true == !!(m = s.match(re))){
- var forMatch = m[0].match(nameRe),
- ifMatch = m[0].match(ifRe),
- execMatch = m[0].match(execRe),
- namedMatch = m[0].match(namedRe),
-
- exp = null,
- fn = null,
- exec = null,
- name = forMatch && forMatch[1] ? forMatch[1] : '';
-
- if (ifMatch) {
- // if - puts fn into test..
- exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
- if(exp){
- fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
- }
- }
-
- if (execMatch) {
- // exec - calls a function... returns empty if true is returned.
- exp = execMatch && execMatch[1] ? execMatch[1] : null;
- if(exp){
- exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
- }
- }
-
-
- if (name) {
- // for =
- switch(name){
- case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
- case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
- default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
- }
- }
- var uid = namedMatch ? namedMatch[1] : id;
-
-
- tpls.push({
- id: namedMatch ? namedMatch[1] : id,
- target: name,
- exec: exec,
- test: fn,
- body: m[1] || ''
- });
- if (namedMatch) {
- s = s.replace(m[0], '');
- } else {
- s = s.replace(m[0], '{xtpl'+ id + '}');
- }
- ++id;
- }
- this.tpls = [];
- for(var i = tpls.length-1; i >= 0; --i){
- this.compileTpl(tpls[i]);
- this.tpls[tpls[i].id] = tpls[i];
- }
- this.master = tpls[tpls.length-1];
- return this;
- },
- /**
- * same as applyTemplate, except it's done to one of the subTemplates
- * when using named templates, you can do:
- *
- * var str = pl.applySubTemplate('your-name', values);
- *
- *
- * @param {Number} id of the template
- * @param {Object} values to apply to template
- * @param {Object} parent (normaly the instance of this object)
- */
- applySubTemplate : function(id, values, parent)
- {
-
-
- var t = this.tpls[id];
-
+ var rows = [];
+ var d =1;
+ for (var r = 0;r < 6;r++) {
- try {
- if(t.test && !t.test.call(this, values, parent)){
- return '';
- }
- } catch(e) {
- Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.test);
- return ''
- }
- try {
-
- if(t.exec && t.exec.call(this, values, parent)){
- return '';
- }
- } catch(e) {
- Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.exec);
- return ''
- }
- try {
- var vs = t.target ? t.target.call(this, values, parent) : values;
- parent = t.target ? values : parent;
- if(t.target && vs instanceof Array){
- var buf = [];
- for(var i = 0, len = vs.length; i < len; i++){
- buf[buf.length] = t.compiled.call(this, vs[i], parent);
- }
- return buf.join('');
- }
- return t.compiled.call(this, vs, parent);
- } catch (e) {
- Roo.log("Xtemplate.applySubTemplate : Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.compiled);
- return '';
+ rows[r]=[];
+ for (var c =0;c < 7;c++) {
+ rows[r][c]= '';
}
- },
+ }
+ if (this.eventStore) {
+ this.eventStore= Roo.factory(this.eventStore, Roo.data);
+ this.eventStore.on('load',this.onLoad, this);
+ this.eventStore.on('beforeload',this.clearEvents, this);
+
+ }
+
+ this.dataSource = new Roo.data.Store({
+ proxy: new Roo.data.MemoryProxy(rows),
+ reader: new Roo.data.ArrayReader({}, [
+ 'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
+ });
- compileTpl : function(tpl)
+ this.dataSource.load();
+ this.ds = this.dataSource;
+ this.ds.xmodule = this.xmodule || false;
+
+
+ var cellRender = function(v,x,r)
{
- var fm = Roo.util.Format;
- var useF = this.disableFormats !== true;
- var sep = Roo.isGecko ? "+" : ",";
- var undef = function(str) {
- Roo.log("Property not found :" + str);
- return '';
- };
-
- var fn = function(m, name, format, args)
- {
- //Roo.log(arguments);
- args = args ? args.replace(/\\'/g,"'") : args;
- //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
- if (typeof(format) == 'undefined') {
- format= 'htmlEncode';
- }
- if (format == 'raw' ) {
- format = false;
- }
-
- if(name.substr(0, 4) == 'xtpl'){
- return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
- }
-
- // build an array of options to determine if value is undefined..
-
- // basically get 'xxxx.yyyy' then do
- // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
- // (function () { Roo.log("Property not found"); return ''; })() :
- // ......
-
- var udef_ar = [];
- var lookfor = '';
- Roo.each(name.split('.'), function(st) {
- lookfor += (lookfor.length ? '.': '') + st;
- udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
- });
-
- var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
-
-
- if(format && useF){
-
- args = args ? ',' + args : "";
-
- if(format.substr(0, 5) != "this."){
- format = "fm." + format + '(';
- }else{
- format = 'this.call("'+ format.substr(5) + '", ';
- args = ", values";
- }
+ return String.format(
+ '<div class="fc-day fc-widget-content"><div>' +
+ '<div class="fc-event-container"></div>' +
+ '<div class="fc-day-number">{0}</div>'+
- return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
- }
-
- if (args.length) {
- // called with xxyx.yuu:(test,test)
- // change to ()
- return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
- }
- // raw.. - :raw modifier..
- return "'"+ sep + udef_st + name + ")"+sep+"'";
-
- };
- var body;
- // branched to use + in gecko and [].join() in others
- if(Roo.isGecko){
- body = "tpl.compiled = function(values, parent){ with(values) { return '" +
- tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
- "';};};";
- }else{
- body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
- body.push(tpl.body.replace(/(\r\n|\n)/g,
- '\\n').replace(/'/g, "\\'").replace(this.re, fn));
- body.push("'].join('');};};");
- body = body.join('');
+ '<div class="fc-day-content"><div style="position:relative"></div></div>' +
+ '</div></div>', v);
+
+ }
+
+
+ this.colModel = new Roo.grid.ColumnModel( [
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday0',
+ header : 'Sunday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday1',
+ header : 'Monday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday2',
+ header : 'Tuesday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday3',
+ header : 'Wednesday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday4',
+ header : 'Thursday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday5',
+ header : 'Friday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday6',
+ header : 'Saturday',
+ renderer : cellRender
}
+ ]);
+ this.cm = this.colModel;
+ this.cm.xmodule = this.xmodule || false;
+
- Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
-
- /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
- eval(body);
-
- return this;
- },
-
- applyTemplate : function(values){
- return this.master.compiled.call(this, values, {});
- //var s = this.subs;
- },
-
- apply : function(){
- return this.applyTemplate.apply(this, arguments);
- }
-
- });
-
-Roo.XTemplate.from = function(el){
- el = Roo.getDom(el);
- return new Roo.XTemplate(el.value || el.innerHTML);
-};Roo.dialog = {};
-/*
-* Licence: LGPL
-*/
+
+ //this.selModel = new Roo.grid.CellSelectionModel();
+ //this.sm = this.selModel;
+ //this.selModel.init(this);
+
+
+ if(this.width){
+ this.container.setWidth(this.width);
+ }
-/**
- * @class Roo.dialog.UploadCropbox
- * @extends Roo.BoxComponent
- * Dialog UploadCropbox class
- * @cfg {String} emptyText show when image has been loaded
- * @cfg {String} rotateNotify show when image too small to rotate
- * @cfg {Number} errorTimeout default 3000
- * @cfg {Number} minWidth default 300
- * @cfg {Number} minHeight default 300
- * @cfg {Number} outputMaxWidth default 1200
- * @cfg {Number} windowSize default 300
- * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
- * @cfg {Boolean} isDocument (true|false) default false
- * @cfg {String} url action url
- * @cfg {String} paramName default 'imageUpload'
- * @cfg {String} method default POST
- * @cfg {Boolean} loadMask (true|false) default true
- * @cfg {Boolean} loadingText default 'Loading...'
- *
- * @constructor
- * Create a new UploadCropbox
- * @param {Object} config The config object
- */
+ if(this.height){
+ this.container.setHeight(this.height);
+ }
+ /** @private */
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true,
+ /**
+ * @event dblclick
+ * The raw dblclick event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "dblclick" : true,
+ /**
+ * @event contextmenu
+ * The raw contextmenu event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "contextmenu" : true,
+ /**
+ * @event mousedown
+ * The raw mousedown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mousedown" : true,
+ /**
+ * @event mouseup
+ * The raw mouseup event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseup" : true,
+ /**
+ * @event mouseover
+ * The raw mouseover event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseover" : true,
+ /**
+ * @event mouseout
+ * The raw mouseout event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseout" : true,
+ /**
+ * @event keypress
+ * The raw keypress event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keypress" : true,
+ /**
+ * @event keydown
+ * The raw keydown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keydown" : true,
+
+ // custom events
- Roo.dialog.UploadCropbox = function(config){
- Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
-
- this.addEvents({
/**
- * @event beforeselectfile
- * Fire before select file
- * @param {Roo.dialog.UploadCropbox} this
+ * @event cellclick
+ * Fires when a cell is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "beforeselectfile" : true,
+ "cellclick" : true,
/**
- * @event initial
- * Fire after initEvent
- * @param {Roo.dialog.UploadCropbox} this
+ * @event celldblclick
+ * Fires when a cell is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "initial" : true,
+ "celldblclick" : true,
/**
- * @event crop
- * Fire after initEvent
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} data
+ * @event rowclick
+ * Fires when a row is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
*/
- "crop" : true,
+ "rowclick" : true,
/**
- * @event prepare
- * Fire when preparing the file data
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} file
+ * @event rowdblclick
+ * Fires when a row is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
*/
- "prepare" : true,
+ "rowdblclick" : true,
/**
- * @event exception
- * Fire when get exception
- * @param {Roo.dialog.UploadCropbox} this
- * @param {XMLHttpRequest} xhr
+ * @event headerclick
+ * Fires when a header is clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "exception" : true,
+ "headerclick" : true,
/**
- * @event beforeloadcanvas
- * Fire before load the canvas
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} src
+ * @event headerdblclick
+ * Fires when a header cell is double clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "beforeloadcanvas" : true,
+ "headerdblclick" : true,
/**
- * @event trash
- * Fire when trash image
- * @param {Roo.dialog.UploadCropbox} this
+ * @event rowcontextmenu
+ * Fires when a row is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
*/
- "trash" : true,
+ "rowcontextmenu" : true,
/**
- * @event download
- * Fire when download the image
- * @param {Roo.dialog.UploadCropbox} this
+ * @event cellcontextmenu
+ * Fires when a cell is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} cellIndex
+ * @param {Roo.EventObject} e
*/
- "download" : true,
+ "cellcontextmenu" : true,
/**
- * @event footerbuttonclick
- * Fire when footerbuttonclick
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} type
+ * @event headercontextmenu
+ * Fires when a header is right clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "footerbuttonclick" : true,
+ "headercontextmenu" : true,
/**
- * @event resize
- * Fire when resize
- * @param {Roo.dialog.UploadCropbox} this
+ * @event bodyscroll
+ * Fires when the body element is scrolled
+ * @param {Number} scrollLeft
+ * @param {Number} scrollTop
*/
- "resize" : true,
+ "bodyscroll" : true,
/**
- * @event rotate
- * Fire when rotate the image
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} pos
+ * @event columnresize
+ * Fires when the user resizes a column
+ * @param {Number} columnIndex
+ * @param {Number} newSize
*/
- "rotate" : true,
+ "columnresize" : true,
/**
- * @event inspect
- * Fire when inspect the file
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} file
+ * @event columnmove
+ * Fires when the user moves a column
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
*/
- "inspect" : true,
+ "columnmove" : true,
/**
- * @event upload
- * Fire when xhr upload the file
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} data
+ * @event startdrag
+ * Fires when row(s) start being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
*/
- "upload" : true,
+ "startdrag" : true,
/**
- * @event arrange
- * Fire when arrange the file data
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} formData
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
*/
- "arrange" : true,
+ "enddrag" : true,
/**
- * @event loadcanvas
- * Fire after load the canvas
- * @param {Roo.dialog.UploadCropbox}
- * @param {Object} imgEl
+ * @event dragdrop
+ * Fires when dragged row(s) are dropped on a valid DD target
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
*/
- "loadcanvas" : true
- });
-
- this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
-};
-
-Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, {
-
- emptyText : 'Click to upload image',
- rotateNotify : 'Image is too small to rotate',
- errorTimeout : 3000,
- scale : 0,
- baseScale : 1,
- rotate : 0,
- dragable : false,
- pinching : false,
- mouseX : 0,
- mouseY : 0,
- cropData : false,
- minWidth : 300,
- minHeight : 300,
- outputMaxWidth : 1200,
- windowSize : 300,
- file : false,
- exif : {},
- baseRotate : 1,
- cropType : 'image/jpeg',
- buttons : false,
- canvasLoaded : false,
- isDocument : false,
- method : 'POST',
- paramName : 'imageUpload',
- loadMask : true,
- loadingText : 'Loading...',
- maskEl : false,
-
- getAutoCreate : function()
- {
- var cfg = {
- tag : 'div',
- cls : 'roo-upload-cropbox',
- cn : [
- {
- tag : 'input',
- cls : 'roo-upload-cropbox-selector',
- type : 'file'
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-body',
- style : 'cursor:pointer',
- cn : [
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-preview'
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-thumb'
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-empty-notify',
- html : this.emptyText
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-error-notify alert alert-danger',
- html : this.rotateNotify
- }
- ]
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-footer',
- cn : {
- tag : 'div',
- cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
- cn : []
- }
- }
- ]
- };
-
- return cfg;
- },
-
- onRender : function(ct, position)
- {
- Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
-
- if(this.el){
- if (this.el.attr('xtype')) {
- this.el.attr('xtypex', this.el.attr('xtype'));
- this.el.dom.removeAttribute('xtype');
-
- this.initEvents();
- }
- }
- else {
- var cfg = Roo.apply({}, this.getAutoCreate());
-
- cfg.id = this.id || Roo.id();
-
- if (this.cls) {
- cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
- }
-
- if (this.style) { // fixme needs to support more complex style data.
- cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
- }
-
- this.el = ct.createChild(cfg, position);
-
- this.initEvents();
- }
-
- if (this.buttons.length) {
-
- Roo.each(this.buttons, function(bb) {
-
- var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
-
- btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
-
- }, this);
- }
-
- if(this.loadMask){
- this.maskEl = this.el;
- }
- },
-
- initEvents : function()
- {
- this.urlAPI = (window.createObjectURL && window) ||
- (window.URL && URL.revokeObjectURL && URL) ||
- (window.webkitURL && webkitURL);
-
- this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
- this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
-
- this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
- this.selectorEl.hide();
-
- this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
- this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
-
- this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
- this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.thumbEl.hide();
-
- this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
- this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
-
- this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
- this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.errorEl.hide();
-
- this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
- this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.footerEl.hide();
-
- this.setThumbBoxSize();
-
- this.bind();
-
- this.resize();
-
- this.fireEvent('initial', this);
- },
-
- bind : function()
- {
- var _this = this;
-
- window.addEventListener("resize", function() { _this.resize(); } );
-
- this.bodyEl.on('click', this.beforeSelectFile, this);
-
- if(Roo.isTouch){
- this.bodyEl.on('touchstart', this.onTouchStart, this);
- this.bodyEl.on('touchmove', this.onTouchMove, this);
- this.bodyEl.on('touchend', this.onTouchEnd, this);
- }
-
- if(!Roo.isTouch){
- this.bodyEl.on('mousedown', this.onMouseDown, this);
- this.bodyEl.on('mousemove', this.onMouseMove, this);
- var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
- this.bodyEl.on(mousewheel, this.onMouseWheel, this);
- Roo.get(document).on('mouseup', this.onMouseUp, this);
- }
-
- this.selectorEl.on('change', this.onFileSelected, this);
- },
-
- reset : function()
- {
- this.scale = 0;
- this.baseScale = 1;
- this.rotate = 0;
- this.baseRotate = 1;
- this.dragable = false;
- this.pinching = false;
- this.mouseX = 0;
- this.mouseY = 0;
- this.cropData = false;
- this.notifyEl.dom.innerHTML = this.emptyText;
-
- // this.selectorEl.dom.value = '';
-
- },
-
- resize : function()
- {
- if(this.fireEvent('resize', this) != false){
- this.setThumbBoxPosition();
- this.setCanvasPosition();
- }
- },
-
- onFooterButtonClick : function(e, el, o, type)
- {
- switch (type) {
- case 'rotate-left' :
- this.onRotateLeft(e);
- break;
- case 'rotate-right' :
- this.onRotateRight(e);
- break;
- case 'picture' :
- this.beforeSelectFile(e);
- break;
- case 'trash' :
- this.trash(e);
- break;
- case 'crop' :
- this.crop(e);
- break;
- case 'download' :
- this.download(e);
- break;
- case 'center' :
- this.center(e);
- break;
- default :
- break;
- }
-
- this.fireEvent('footerbuttonclick', this, type);
- },
-
- beforeSelectFile : function(e)
- {
- e.preventDefault();
-
- if(this.fireEvent('beforeselectfile', this) != false){
- this.selectorEl.dom.click();
- }
- },
-
- onFileSelected : function(e)
- {
- e.preventDefault();
-
- if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
- return;
- }
-
- var file = this.selectorEl.dom.files[0];
+ "dragdrop" : true,
+ /**
+ * @event dragover
+ * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragover" : true,
+ /**
+ * @event dragenter
+ * Fires when the dragged row(s) first cross another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragenter" : true,
+ /**
+ * @event dragout
+ * Fires when the dragged row(s) leave another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragout" : true,
+ /**
+ * @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.
+ */
+ 'rowclass' : true,
+
+ /**
+ * @event render
+ * Fires when the grid is rendered
+ * @param {Grid} grid
+ */
+ 'render' : true,
+ /**
+ * @event select
+ * Fires when a date is selected
+ * @param {DatePicker} this
+ * @param {Date} date The selected date
+ */
+ 'select': true,
+ /**
+ * @event monthchange
+ * Fires when the displayed month changes
+ * @param {DatePicker} this
+ * @param {Date} date The selected month
+ */
+ 'monthchange': true,
+ /**
+ * @event evententer
+ * Fires when mouse over an event
+ * @param {Calendar} this
+ * @param {event} Event
+ */
+ 'evententer': true,
+ /**
+ * @event eventleave
+ * Fires when the mouse leaves an
+ * @param {Calendar} this
+ * @param {event}
+ */
+ 'eventleave': true,
+ /**
+ * @event eventclick
+ * Fires when the mouse click an
+ * @param {Calendar} this
+ * @param {event}
+ */
+ 'eventclick': true,
+ /**
+ * @event eventrender
+ * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
+ * @param {Calendar} this
+ * @param {data} data to be modified
+ */
+ 'eventrender': true
- if(this.fireEvent('inspect', this, file) != false){
- this.prepare(file);
- }
+ });
+
+ Roo.grid.Grid.superclass.constructor.call(this);
+ this.on('render', function() {
+ this.view.el.addClass('x-grid-cal');
- },
-
- trash : function(e)
- {
- this.fireEvent('trash', this);
- },
-
- download : function(e)
- {
- this.fireEvent('download', this);
- },
+ (function() { this.setDate(new Date()); }).defer(100,this); //default today..
- center : function(e)
- {
- this.setCanvasPosition();
- },
-
- loadCanvas : function(src)
- {
- if(this.fireEvent('beforeloadcanvas', this, src) != false){
-
- this.reset();
-
- this.imageEl = document.createElement('img');
-
- var _this = this;
-
- this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
-
- this.imageEl.src = src;
- }
- },
+ },this);
- onLoadCanvas : function()
- {
- this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
- this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
-
- if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
-
- this.bodyEl.un('click', this.beforeSelectFile, this);
-
- this.notifyEl.hide();
- this.thumbEl.show();
- this.footerEl.show();
+ if (!Roo.grid.Calendar.style) {
+ Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
- this.baseRotateLevel();
- if(this.isDocument){
- this.setThumbBoxSize();
+ '.x-grid-cal .x-grid-col' : {
+ height: 'auto !important',
+ 'vertical-align': 'top'
+ },
+ '.x-grid-cal .fc-event-hori' : {
+ height: '14px'
}
+
- this.setThumbBoxPosition();
-
- this.baseScaleLevel();
-
- this.draw();
-
- this.resize();
-
- this.canvasLoaded = true;
-
- }
-
- if(this.loadMask){
- this.maskEl.unmask();
- }
-
- },
-
- setCanvasPosition : function(center = true)
- {
- if(!this.canvasEl){
- return;
- }
-
- var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
- var newCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
-
- if(center) {
- this.previewEl.setLeft(newCenterLeft);
- this.previewEl.setTop(newCenterTop);
-
- return;
- }
-
- var oldScaleLevel = this.baseScale * Math.pow(1.02, this.startScale);
- var oldCanvasWidth = Math.floor(this.imageEl.OriginWidth * oldScaleLevel);
- var oldCanvasHeight = Math.floor(this.imageEl.OriginHeight * oldScaleLevel);
-
- var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - oldCanvasWidth) / 2);
- var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - oldCanvasHeight) / 2);
-
- var leftDiff = newCenterLeft - oldCenterLeft;
- var topDiff = newCenterTop - oldCenterTop;
-
- var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
- var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+ }, Roo.id());
+ }
- this.previewEl.setLeft(newPreviewLeft);
- this.previewEl.setTop(newPreviewTop);
-
- },
- onMouseDown : function(e)
- {
- e.stopEvent();
-
- this.dragable = true;
- this.pinching = false;
-
- if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
- this.dragable = false;
- return;
- }
-
- this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
- this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
-
- },
- onMouseMove : function(e)
- {
- e.stopEvent();
-
- if(!this.canvasLoaded){
- return;
- }
-
- if (!this.dragable){
- return;
- }
-
- var maxPaddingLeft = this.canvasEl.width / 0.9 * 0.05;
- var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
- maxPaddingLeft = (this.canvasEl.height * this.minWidth / this.minHeight - this.canvasEl.width) / 2 + maxPaddingLeft;
- }
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
- maxPaddingTop = (this.canvasEl.width * this.minHeight / this.minWidth - this.canvasEl.height) / 2 + maxPaddingTop;
- }
-
- var minX = Math.ceil(this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - this.canvasEl.width - maxPaddingLeft);
- var minY = Math.ceil(this.thumbEl.getTop(true) + this.thumbEl.getHeight() - this.canvasEl.height - maxPaddingTop);
-
- var maxX = Math.ceil(this.thumbEl.getLeft(true) + maxPaddingLeft);
- var maxY = Math.ceil(this.thumbEl.getTop(true) + maxPaddingTop);
+};
+Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
+ /**
+ * @cfg {Store} eventStore The store that loads events.
+ */
+ eventStore : 25,
- if(minX > maxX) {
- var tempX = minX;
- minX = maxX;
- maxX = tempX;
- }
+
+ activeDate : false,
+ startDay : 0,
+ autoWidth : true,
+ monitorWindowResize : false,
- if(minY > maxY) {
- var tempY = minY;
- minY = maxY;
- maxY = tempY;
+
+ resizeColumns : function() {
+ var col = (this.view.el.getWidth() / 7) - 3;
+ // loop through cols, and setWidth
+ for(var i =0 ; i < 7 ; i++){
+ this.cm.setColumnWidth(i, col);
}
-
- var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
- var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
-
- x = x - this.mouseX;
- y = y - this.mouseY;
-
- var bgX = Math.ceil(x + this.previewEl.getLeft(true));
- var bgY = Math.ceil(y + this.previewEl.getTop(true));
-
- bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
- bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+ },
+ setDate :function(date) {
- this.previewEl.setLeft(bgX);
- this.previewEl.setTop(bgY);
+ Roo.log('setDate?');
- this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
- this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
- },
-
- onMouseUp : function(e)
- {
- e.stopEvent();
+ this.resizeColumns();
+ var vd = this.activeDate;
+ this.activeDate = date;
+// if(vd && this.el){
+// var t = date.getTime();
+// if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
+// Roo.log('using add remove');
+//
+// this.fireEvent('monthchange', this, date);
+//
+// this.cells.removeClass("fc-state-highlight");
+// this.cells.each(function(c){
+// if(c.dateValue == t){
+// c.addClass("fc-state-highlight");
+// setTimeout(function(){
+// try{c.dom.firstChild.focus();}catch(e){}
+// }, 50);
+// return false;
+// }
+// return true;
+// });
+// return;
+// }
+// }
- this.dragable = false;
- },
-
- onMouseWheel : function(e)
- {
- e.stopEvent();
+ var days = date.getDaysInMonth();
- this.startScale = this.scale;
- this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1);
+ var firstOfMonth = date.getFirstDateOfMonth();
+ var startingPos = firstOfMonth.getDay()-this.startDay;
- if(!this.zoomable()){
- this.scale = this.startScale;
- return;
+ if(startingPos < this.startDay){
+ startingPos += 7;
}
-
-
- this.draw();
- return;
- },
-
- zoomable : function()
- {
- var minScale = this.thumbEl.getWidth() / this.minWidth;
+ var pm = date.add(Date.MONTH, -1);
+ var prevStart = pm.getDaysInMonth()-startingPos;
+//
- if(this.minWidth < this.minHeight){
- minScale = this.thumbEl.getHeight() / this.minHeight;
- }
- var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
- var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
-
- var maxWidth = this.imageEl.OriginWidth;
- var maxHeight = this.imageEl.OriginHeight;
-
-
- var newCanvasWidth = Math.floor(this.imageEl.OriginWidth * this.getScaleLevel());
- var newCanvasHeight = Math.floor(this.imageEl.OriginHeight * this.getScaleLevel());
-
- var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
- var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
-
- var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - newCanvasWidth) / 2);
- var newCenterTop = Math.ceil((this.bodyEl.getHeight() - newCanvasHeight) / 2);
-
- var leftDiff = newCenterLeft - oldCenterLeft;
- var topDiff = newCenterTop - oldCenterTop;
-
- var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
- var newPreviewTop = this.previewEl.getTop(true) + topDiff;
-
- var paddingLeft = newPreviewLeft - this.thumbEl.getLeft(true);
- var paddingTop = newPreviewTop - this.thumbEl.getTop(true);
-
- var paddingRight = this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - newCanvasWidth - newPreviewLeft;
- var paddingBottom = this.thumbEl.getTop(true) + this.thumbEl.getHeight() - newCanvasHeight - newPreviewTop;
-
- var maxPaddingLeft = newCanvasWidth / 0.9 * 0.05;
- var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
- maxPaddingLeft = (newCanvasHeight * this.minWidth / this.minHeight - newCanvasWidth) / 2 + maxPaddingLeft;
- }
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
- maxPaddingTop = (newCanvasWidth * this.minHeight / this.minWidth - newCanvasHeight) / 2 + maxPaddingTop;
- }
+ this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
- if(
- this.isDocument &&
- (this.rotate == 0 || this.rotate == 180) &&
- (
- width > this.imageEl.OriginWidth ||
- height > this.imageEl.OriginHeight ||
- (width < this.minWidth && height < this.minHeight)
- )
- ){
- return false;
- }
+ this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
+ //this.cells.addClassOnOver('fc-state-hover');
- if(
- this.isDocument &&
- (this.rotate == 90 || this.rotate == 270) &&
- (
- width > this.imageEl.OriginWidth ||
- height > this.imageEl.OriginHeight ||
- (width < this.minHeight && height < this.minWidth)
- )
- ){
- return false;
- }
+ var cells = this.cells.elements;
+ var textEls = this.textNodes;
- if(
- !this.isDocument &&
- (this.rotate == 0 || this.rotate == 180) &&
- (
- // for zoom out
- paddingLeft > maxPaddingLeft ||
- paddingRight > maxPaddingLeft ||
- paddingTop > maxPaddingTop ||
- paddingBottom > maxPaddingTop ||
- // for zoom in
- width > maxWidth ||
- height > maxHeight
- )
- ){
- return false;
- }
+ //Roo.each(cells, function(cell){
+ // cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
+ //});
- if(
- !this.isDocument &&
- (this.rotate == 90 || this.rotate == 270) &&
- (
- width < this.minHeight ||
- width > this.imageEl.OriginWidth ||
- height < this.minWidth ||
- height > this.imageEl.OriginHeight
- )
- ){
- return false;
- }
+ days += startingPos;
+
+ // convert everything to numbers so it's fast
+ var day = 86400000;
+ var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
+ //Roo.log(d);
+ //Roo.log(pm);
+ //Roo.log(prevStart);
- return true;
+ var today = new Date().clearTime().getTime();
+ var sel = date.clearTime().getTime();
+ var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
+ var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
+ var ddMatch = this.disabledDatesRE;
+ var ddText = this.disabledDatesText;
+ var ddays = this.disabledDays ? this.disabledDays.join("") : false;
+ var ddaysText = this.disabledDaysText;
+ var format = this.format;
- },
-
- onRotateLeft : function(e)
- {
- if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
-
- var minScale = this.thumbEl.getWidth() / this.minWidth;
+ var setCellClass = function(cal, cell){
- var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
- var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+ //Roo.log('set Cell Class');
+ cell.title = "";
+ var t = d.getTime();
- this.startScale = this.scale;
+ //Roo.log(d);
- while (this.getScaleLevel() < minScale){
- this.scale = this.scale + 1;
-
- if(!this.zoomable()){
- break;
- }
-
- if(
- Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
- Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
- ){
- continue;
- }
-
- this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
-
- this.draw();
+ cell.dateValue = t;
+ if(t == today){
+ cell.className += " fc-today";
+ cell.className += " fc-state-highlight";
+ cell.title = cal.todayText;
+ }
+ if(t == sel){
+ // disable highlight in other month..
+ cell.className += " fc-state-highlight";
+ }
+ // disabling
+ if(t < min) {
+ //cell.className = " fc-state-disabled";
+ cell.title = cal.minText;
+ return;
+ }
+ if(t > max) {
+ //cell.className = " fc-state-disabled";
+ cell.title = cal.maxText;
return;
}
+ if(ddays){
+ if(ddays.indexOf(d.getDay()) != -1){
+ // cell.title = ddaysText;
+ // cell.className = " fc-state-disabled";
+ }
+ }
+ if(ddMatch && format){
+ var fvalue = d.dateFormat(format);
+ if(ddMatch.test(fvalue)){
+ cell.title = ddText.replace("%0", fvalue);
+ cell.className = " fc-state-disabled";
+ }
+ }
- this.scale = this.startScale;
+ if (!cell.initialClassName) {
+ cell.initialClassName = cell.dom.className;
+ }
- this.onRotateFail();
+ cell.dom.className = cell.initialClassName + ' ' + cell.className;
+ };
+
+ var i = 0;
+
+ for(; i < startingPos; i++) {
+ cells[i].dayName = (++prevStart);
+ Roo.log(textEls[i]);
+ d.setDate(d.getDate()+1);
- return false;
+ //cells[i].className = "fc-past fc-other-month";
+ setCellClass(this, cells[i]);
}
- this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
-
- if(this.isDocument){
- this.setThumbBoxSize();
- this.setThumbBoxPosition();
- this.setCanvasPosition();
+ var intDay = 0;
+
+ for(; i < days; i++){
+ intDay = i - startingPos + 1;
+ cells[i].dayName = (intDay);
+ d.setDate(d.getDate()+1);
+
+ cells[i].className = ''; // "x-date-active";
+ setCellClass(this, cells[i]);
}
+ var extraDays = 0;
- this.draw();
+ for(; i < 42; i++) {
+ //textEls[i].innerHTML = (++extraDays);
+
+ d.setDate(d.getDate()+1);
+ cells[i].dayName = (++extraDays);
+ cells[i].className = "fc-future fc-other-month";
+ setCellClass(this, cells[i]);
+ }
- this.fireEvent('rotate', this, 'left');
+ //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
- },
-
- onRotateRight : function(e)
- {
- if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
-
- var minScale = this.thumbEl.getWidth() / this.minWidth;
+ var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
- var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
- var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
-
- this.startScale = this.scale;
-
- while (this.getScaleLevel() < minScale){
-
- this.scale = this.scale + 1;
-
- if(!this.zoomable()){
- break;
- }
-
- if(
- Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
- Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
- ){
- continue;
- }
-
- this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-
- this.draw();
-
- return;
- }
-
- this.scale = this.startScale;
-
- this.onRotateFail();
-
- return false;
+ // this will cause all the cells to mis
+ var rows= [];
+ var i =0;
+ for (var r = 0;r < 6;r++) {
+ for (var c =0;c < 7;c++) {
+ this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
+ }
}
- this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-
- if(this.isDocument){
- this.setThumbBoxSize();
- this.setThumbBoxPosition();
- this.setCanvasPosition();
+ this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
+ for(i=0;i<cells.length;i++) {
+
+ this.cells.elements[i].dayName = cells[i].dayName ;
+ this.cells.elements[i].className = cells[i].className;
+ this.cells.elements[i].initialClassName = cells[i].initialClassName ;
+ this.cells.elements[i].title = cells[i].title ;
+ this.cells.elements[i].dateValue = cells[i].dateValue ;
}
- this.draw();
- this.fireEvent('rotate', this, 'right');
- },
-
- onRotateFail : function()
- {
- this.errorEl.show(true);
- var _this = this;
- (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
- },
-
- draw : function()
- {
- this.previewEl.dom.innerHTML = '';
+ //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
+ //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
- var canvasEl = document.createElement("canvas");
+ ////if(totalRows != 6){
+ //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
+ // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
+ // }
- var contextEl = canvasEl.getContext("2d");
+ this.fireEvent('monthchange', this, date);
- canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
- canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
- var center = this.imageEl.OriginWidth / 2;
- if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
- canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
- canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
- center = this.imageEl.OriginHeight / 2;
+ },
+ /**
+ * Returns the grid's SelectionModel.
+ * @return {SelectionModel}
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.grid.CellSelectionModel();
}
-
- contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
-
- contextEl.translate(center, center);
- contextEl.rotate(this.rotate * Math.PI / 180);
+ return this.selModel;
+ },
- contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
-
- this.canvasEl = document.createElement("canvas");
+ load: function() {
+ this.eventStore.load()
- this.contextEl = this.canvasEl.getContext("2d");
- switch (this.rotate) {
- case 0 :
-
- this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
-
- this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- case 90 :
-
- this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
-
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
- break;
- }
-
- this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- case 180 :
-
- this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
-
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
- break;
- }
-
- this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- case 270 :
-
- this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
- break;
- }
-
- this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- default :
- break;
- }
+ },
+
+ findCell : function(dt) {
+ dt = dt.clearTime().getTime();
+ var ret = false;
+ this.cells.each(function(c){
+ //Roo.log("check " +c.dateValue + '?=' + dt);
+ if(c.dateValue == dt){
+ ret = c;
+ return false;
+ }
+ return true;
+ });
- this.previewEl.appendChild(this.canvasEl);
+ return ret;
+ },
+
+ findCells : function(rec) {
+ var s = rec.data.start_dt.clone().clearTime().getTime();
+ // Roo.log(s);
+ var e= rec.data.end_dt.clone().clearTime().getTime();
+ // Roo.log(e);
+ var ret = [];
+ this.cells.each(function(c){
+ ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
+
+ if(c.dateValue > e){
+ return ;
+ }
+ if(c.dateValue < s){
+ return ;
+ }
+ ret.push(c);
+ });
- this.setCanvasPosition(false);
+ return ret;
},
- crop : function()
+ findBestRow: function(cells)
{
- if(!this.canvasLoaded){
- return;
- }
-
- var imageCanvas = document.createElement("canvas");
-
- var imageContext = imageCanvas.getContext("2d");
-
- imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
- imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
-
- var center = imageCanvas.width / 2;
+ var ret = 0;
- imageContext.translate(center, center);
+ for (var i =0 ; i < cells.length;i++) {
+ ret = Math.max(cells[i].rows || 0,ret);
+ }
+ return ret;
- imageContext.rotate(this.rotate * Math.PI / 180);
+ },
+
+
+ addItem : function(rec)
+ {
+ // look for vertical location slot in
+ var cells = this.findCells(rec);
- imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+ rec.row = this.findBestRow(cells);
- var canvas = document.createElement("canvas");
+ // work out the location.
- var context = canvas.getContext("2d");
-
- canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+ var crow = false;
+ var rows = [];
+ for(var i =0; i < cells.length; i++) {
+ if (!crow) {
+ crow = {
+ start : cells[i],
+ end : cells[i]
+ };
+ continue;
+ }
+ if (crow.start.getY() == cells[i].getY()) {
+ // on same row.
+ crow.end = cells[i];
+ continue;
+ }
+ // different row.
+ rows.push(crow);
+ crow = {
+ start: cells[i],
+ end : cells[i]
+ };
+
+ }
- canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
-
- switch (this.rotate) {
- case 0 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
- var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- if(canvas.width > this.outputMaxWidth) {
- var scale = this.outputMaxWidth / canvas.width;
- canvas.width = canvas.width * scale;
- canvas.height = canvas.height * scale;
- context.scale(scale, scale);
- }
-
- context.fillStyle = 'white';
- context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel());
-
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- case 90 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var targetWidth = this.minWidth - 2 * x;
- var targetHeight = this.minHeight - 2 * y;
-
- var scale = 1;
-
- if((x == 0 && y == 0) || (x == 0 && y > 0)){
- scale = targetWidth / width;
- }
-
- if(x > 0 && y == 0){
- scale = targetHeight / height;
- }
-
- if(x > 0 && y > 0){
- scale = targetWidth / width;
-
- if(width < height){
- scale = targetHeight / height;
- }
- }
-
- context.scale(scale, scale);
-
- var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
- var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- case 180 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var targetWidth = this.minWidth - 2 * x;
- var targetHeight = this.minHeight - 2 * y;
-
- var scale = 1;
-
- if((x == 0 && y == 0) || (x == 0 && y > 0)){
- scale = targetWidth / width;
- }
-
- if(x > 0 && y == 0){
- scale = targetHeight / height;
- }
-
- if(x > 0 && y > 0){
- scale = targetWidth / width;
-
- if(width < height){
- scale = targetHeight / height;
- }
- }
-
- context.scale(scale, scale);
-
- var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
- var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
- sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- case 270 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var targetWidth = this.minWidth - 2 * x;
- var targetHeight = this.minHeight - 2 * y;
-
- var scale = 1;
-
- if((x == 0 && y == 0) || (x == 0 && y > 0)){
- scale = targetWidth / width;
- }
-
- if(x > 0 && y == 0){
- scale = targetHeight / height;
- }
-
- if(x > 0 && y > 0){
- scale = targetWidth / width;
-
- if(width < height){
- scale = targetHeight / height;
- }
- }
-
- context.scale(scale, scale);
- var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
- var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- default :
- break;
+ rows.push(crow);
+ rec.els = [];
+ rec.rows = rows;
+ rec.cells = cells;
+ for (var i = 0; i < cells.length;i++) {
+ cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
+
}
- this.cropData = canvas.toDataURL(this.cropType);
- if(this.fireEvent('crop', this, this.cropData) !== false){
- this.process(this.file, this.cropData);
+ },
+
+ clearEvents: function() {
+
+ if (!this.eventStore.getCount()) {
+ return;
}
+ // reset number of rows in cells.
+ Roo.each(this.cells.elements, function(c){
+ c.rows = 0;
+ });
- return;
+ this.eventStore.each(function(e) {
+ this.clearEvent(e);
+ },this);
},
- setThumbBoxSize : function()
+ clearEvent : function(ev)
{
- var width, height;
+ if (ev.els) {
+ Roo.each(ev.els, function(el) {
+ el.un('mouseenter' ,this.onEventEnter, this);
+ el.un('mouseleave' ,this.onEventLeave, this);
+ el.remove();
+ },this);
+ ev.els = [];
+ }
+ },
+
+
+ renderEvent : function(ev,ctr) {
+ if (!ctr) {
+ ctr = this.view.el.select('.fc-event-container',true).first();
+ }
+
+
+ this.clearEvent(ev);
+ //code
+
+
+
+ ev.els = [];
+ var cells = ev.cells;
+ var rows = ev.rows;
+ this.fireEvent('eventrender', this, ev);
- if(this.isDocument && typeof(this.imageEl) != 'undefined'){
- width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
- height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
-
- this.minWidth = width;
- this.minHeight = height;
+ for(var i =0; i < rows.length; i++) {
- if(this.rotate == 90 || this.rotate == 270){
- this.minWidth = height;
- this.minHeight = width;
+ cls = '';
+ if (i == 0) {
+ cls += ' fc-event-start';
+ }
+ if ((i+1) == rows.length) {
+ cls += ' fc-event-end';
}
+
+ //Roo.log(ev.data);
+ // how many rows should it span..
+ var cg = this.eventTmpl.append(ctr,Roo.apply({
+ fccls : cls
+
+ }, ev.data) , true);
+
+
+ cg.on('mouseenter' ,this.onEventEnter, this, ev);
+ cg.on('mouseleave' ,this.onEventLeave, this, ev);
+ cg.on('click', this.onEventClick, this, ev);
+
+ ev.els.push(cg);
+
+ var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
+ var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
+ //Roo.log(cg);
+
+ cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
+ cg.setWidth(ebox.right - sbox.x -2);
}
+ },
+
+ renderEvents: function()
+ {
+ // first make sure there is enough space..
- height = this.windowSize;
- width = Math.ceil(this.minWidth * height / this.minHeight);
-
- if(this.minWidth > this.minHeight){
- width = this.windowSize;
- height = Math.ceil(this.minHeight * width / this.minWidth);
+ if (!this.eventTmpl) {
+ this.eventTmpl = new Roo.Template(
+ '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}" style="position: absolute" unselectable="on">' +
+ '<div class="fc-event-inner">' +
+ '<span class="fc-event-time">{time}</span>' +
+ '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
+ '</div>' +
+ '<div class="ui-resizable-heandle ui-resizable-e"> </div>' +
+ '</div>'
+ );
+
}
+
- this.thumbEl.setStyle({
- width : width + 'px',
- height : height + 'px'
+
+ this.cells.each(function(c) {
+ //Roo.log(c.select('.fc-day-content div',true).first());
+ c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
});
-
- return;
+
+ var ctr = this.view.el.select('.fc-event-container',true).first();
+
+ var cls;
+ this.eventStore.each(function(ev){
+ this.renderEvent(ev);
+
+
+ }, this);
+ this.view.layout();
+
},
- setThumbBoxPosition : function()
- {
- var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
- var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
-
- this.thumbEl.setLeft(x);
- this.thumbEl.setTop(y);
-
+ onEventEnter: function (e, el,event,d) {
+ this.fireEvent('evententer', this, el, event);
},
- baseRotateLevel : function()
- {
- this.baseRotate = 1;
-
- if(
- typeof(this.exif) != 'undefined' &&
- typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
- [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
- ){
- this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
- }
-
- this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
-
+ onEventLeave: function (e, el,event,d) {
+ this.fireEvent('eventleave', this, el, event);
},
- baseScaleLevel : function()
- {
- var width, height;
+ onEventClick: function (e, el,event,d) {
+ this.fireEvent('eventclick', this, el, event);
+ },
+
+ onMonthChange: function () {
+ this.store.load();
+ },
+
+ onLoad: function () {
- if(this.isDocument){
+ //Roo.log('calendar onload');
+//
+ if(this.eventStore.getCount() > 0){
- if(this.baseRotate == 6 || this.baseRotate == 8){
+
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginWidth;
-
- if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginHeight;
+ this.eventStore.each(function(d){
+
+
+ // FIXME..
+ var add = d.data;
+ if (typeof(add.end_dt) == 'undefined') {
+ Roo.log("Missing End time in calendar data: ");
+ Roo.log(d);
+ return;
}
-
- return;
- }
-
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginWidth;
- }
-
- return;
+ if (typeof(add.start_dt) == 'undefined') {
+ Roo.log("Missing Start time in calendar data: ");
+ Roo.log(d);
+ return;
+ }
+ add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
+ add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
+ add.id = add.id || d.id;
+ add.title = add.title || '??';
+
+ this.addItem(d);
+
+
+ },this);
}
- if(this.baseRotate == 6 || this.baseRotate == 8){
-
- width = this.thumbEl.getHeight();
- this.baseScale = width / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
- height = this.thumbEl.getWidth();
- this.baseScale = height / this.imageEl.OriginHeight;
- }
-
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- height = this.thumbEl.getWidth();
- this.baseScale = height / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
- width = this.thumbEl.getHeight();
- this.baseScale = width / this.imageEl.OriginWidth;
- }
+ this.renderEvents();
+ }
+
+
+});
+/*
+ grid : {
+ xtype: 'Grid',
+ xns: Roo.grid,
+ listeners : {
+ render : function ()
+ {
+ _this.grid = this;
+
+ if (!this.view.el.hasClass('course-timesheet')) {
+ this.view.el.addClass('course-timesheet');
+ }
+ if (this.tsStyle) {
+ this.ds.load({});
+ return;
+ }
+ Roo.log('width');
+ Roo.log(_this.grid.view.el.getWidth());
+
+
+ this.tsStyle = Roo.util.CSS.createStyleSheet({
+ '.course-timesheet .x-grid-row' : {
+ height: '80px'
+ },
+ '.x-grid-row td' : {
+ 'vertical-align' : 0
+ },
+ '.course-edit-link' : {
+ 'color' : 'blue',
+ 'text-overflow' : 'ellipsis',
+ 'overflow' : 'hidden',
+ 'white-space' : 'nowrap',
+ 'cursor' : 'pointer'
+ },
+ '.sub-link' : {
+ 'color' : 'green'
+ },
+ '.de-act-sup-link' : {
+ 'color' : 'purple',
+ 'text-decoration' : 'line-through'
+ },
+ '.de-act-link' : {
+ 'color' : 'red',
+ 'text-decoration' : 'line-through'
+ },
+ '.course-timesheet .course-highlight' : {
+ 'border-top-style': 'dashed !important',
+ 'border-bottom-bottom': 'dashed !important'
+ },
+ '.course-timesheet .course-item' : {
+ 'font-family' : 'tahoma, arial, helvetica',
+ 'font-size' : '11px',
+ 'overflow' : 'hidden',
+ 'padding-left' : '10px',
+ 'padding-right' : '10px',
+ 'padding-top' : '10px'
+ }
+
+ }, Roo.id());
+ this.ds.load({});
+ }
+ },
+ autoWidth : true,
+ monitorWindowResize : false,
+ cellrenderer : function(v,x,r)
+ {
+ return v;
+ },
+ sm : {
+ xtype: 'CellSelectionModel',
+ xns: Roo.grid
+ },
+ dataSource : {
+ xtype: 'Store',
+ xns: Roo.data,
+ listeners : {
+ beforeload : function (_self, options)
+ {
+ options.params = options.params || {};
+ options.params._month = _this.monthField.getValue();
+ options.params.limit = 9999;
+ options.params['sort'] = 'when_dt';
+ options.params['dir'] = 'ASC';
+ this.proxy.loadResponse = this.loadResponse;
+ Roo.log("load?");
+ //this.addColumns();
+ },
+ load : function (_self, records, options)
+ {
+ _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
+ // if you click on the translation.. you can edit it...
+ var el = Roo.get(this);
+ var id = el.dom.getAttribute('data-id');
+ var d = el.dom.getAttribute('data-date');
+ var t = el.dom.getAttribute('data-time');
+ //var id = this.child('span').dom.textContent;
+
+ //Roo.log(this);
+ Pman.Dialog.CourseCalendar.show({
+ id : id,
+ when_d : d,
+ when_t : t,
+ productitem_active : id ? 1 : 0
+ }, function() {
+ _this.grid.ds.load({});
+ });
+
+ });
+
+ _this.panel.fireEvent('resize', [ '', '' ]);
+ }
+ },
+ loadResponse : function(o, success, response){
+ // this is overridden on before load..
+
+ Roo.log("our code?");
+ //Roo.log(success);
+ //Roo.log(response)
+ delete this.activeRequest;
+ if(!success){
+ this.fireEvent("loadexception", this, o, response);
+ o.request.callback.call(o.request.scope, null, o.request.arg, false);
+ return;
+ }
+ var result;
+ try {
+ result = o.reader.read(response);
+ }catch(e){
+ Roo.log("load exception?");
+ this.fireEvent("loadexception", this, o, response, e);
+ o.request.callback.call(o.request.scope, null, o.request.arg, false);
+ return;
+ }
+ Roo.log("ready...");
+ // loop through result.records;
+ // and set this.tdate[date] = [] << array of records..
+ _this.tdata = {};
+ Roo.each(result.records, function(r){
+ //Roo.log(r.data);
+ if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
+ _this.tdata[r.data.when_dt.format('j')] = [];
+ }
+ _this.tdata[r.data.when_dt.format('j')].push(r.data);
+ });
+
+ //Roo.log(_this.tdata);
+
+ result.records = [];
+ result.totalRecords = 6;
+
+ // let's generate some duumy records for the rows.
+ //var st = _this.dateField.getValue();
+
+ // work out monday..
+ //st = st.add(Date.DAY, -1 * st.format('w'));
+
+ var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+
+ var firstOfMonth = date.getFirstDayOfMonth();
+ var days = date.getDaysInMonth();
+ var d = 1;
+ var firstAdded = false;
+ for (var i = 0; i < result.totalRecords ; i++) {
+ //var d= st.add(Date.DAY, i);
+ var row = {};
+ var added = 0;
+ for(var w = 0 ; w < 7 ; w++){
+ if(!firstAdded && firstOfMonth != w){
+ continue;
+ }
+ if(d > days){
+ continue;
+ }
+ firstAdded = true;
+ var dd = (d > 0 && d < 10) ? "0"+d : d;
+ row['weekday'+w] = String.format(
+ '<span style="font-size: 16px;"><b>{0}</b></span>'+
+ '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
+ d,
+ date.format('Y-m-')+dd
+ );
+ added++;
+ if(typeof(_this.tdata[d]) != 'undefined'){
+ Roo.each(_this.tdata[d], function(r){
+ var is_sub = '';
+ var deactive = '';
+ var id = r.id;
+ var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
+ if(r.parent_id*1>0){
+ is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
+ id = r.parent_id;
+ }
+ if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
+ deactive = 'de-act-link';
+ }
+
+ row['weekday'+w] += String.format(
+ '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
+ id, //0
+ r.product_id_name, //1
+ r.when_dt.format('h:ia'), //2
+ is_sub, //3
+ deactive, //4
+ desc // 5
+ );
+ });
+ }
+ d++;
+ }
+
+ // only do this if something added..
+ if(added > 0){
+ result.records.push(_this.grid.dataSource.reader.newRow(row));
+ }
+
+
+ // push it twice. (second one with an hour..
+
+ }
+ //Roo.log(result);
+ this.fireEvent("load", this, o, o.request.arg);
+ o.request.callback.call(o.request.scope, result, o.request.arg, true);
+ },
+ sortInfo : {field: 'when_dt', direction : 'ASC' },
+ proxy : {
+ xtype: 'HttpProxy',
+ xns: Roo.data,
+ method : 'GET',
+ url : baseURL + '/Roo/Shop_course.php'
+ },
+ reader : {
+ xtype: 'JsonReader',
+ xns: Roo.data,
+ id : 'id',
+ fields : [
+ {
+ 'name': 'id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'when_dt',
+ 'type': 'string'
+ },
+ {
+ 'name': 'end_dt',
+ 'type': 'string'
+ },
+ {
+ 'name': 'parent_id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'product_id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'productitem_id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'guid',
+ 'type': 'int'
+ }
+ ]
+ }
+ },
+ toolbar : {
+ xtype: 'Toolbar',
+ xns: Roo,
+ items : [
+ {
+ xtype: 'Button',
+ xns: Roo.Toolbar,
+ listeners : {
+ click : function (_self, e)
+ {
+ var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+ sd.setMonth(sd.getMonth()-1);
+ _this.monthField.setValue(sd.format('Y-m-d'));
+ _this.grid.ds.load({});
+ }
+ },
+ text : "Back"
+ },
+ {
+ xtype: 'Separator',
+ xns: Roo.Toolbar
+ },
+ {
+ xtype: 'MonthField',
+ xns: Roo.form,
+ listeners : {
+ render : function (_self)
+ {
+ _this.monthField = _self;
+ // _this.monthField.set today
+ },
+ select : function (combo, date)
+ {
+ _this.grid.ds.load({});
+ }
+ },
+ value : (function() { return new Date(); })()
+ },
+ {
+ xtype: 'Separator',
+ xns: Roo.Toolbar
+ },
+ {
+ xtype: 'TextItem',
+ xns: Roo.Toolbar,
+ text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
+ },
+ {
+ xtype: 'Fill',
+ xns: Roo.Toolbar
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.Toolbar,
+ listeners : {
+ click : function (_self, e)
+ {
+ var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+ sd.setMonth(sd.getMonth()+1);
+ _this.monthField.setValue(sd.format('Y-m-d'));
+ _this.grid.ds.load({});
+ }
+ },
+ text : "Next"
+ }
+ ]
+ },
+
}
-
- return;
- }
-
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginWidth;
-
- if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginHeight;
- }
+ };
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
-
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginWidth;
- }
-
- }
+ *//*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.LoadMask
+ * A simple utility class for generically masking elements while loading data. If the element being masked has
+ * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
+ * process and the mask element will be cached for reuse. For all other elements, this mask will replace the
+ * element's UpdateManager load indicator and will be destroyed after the initial load.
+ * @constructor
+ * Create a new LoadMask
+ * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
+ * @param {Object} config The config object
+ */
+Roo.LoadMask = function(el, config){
+ this.el = Roo.get(el);
+ Roo.apply(this, config);
+ if(this.store){
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
+ this.removeMask = false;
+ }else{
+ var um = this.el.getUpdateManager();
+ um.showLoadIndicator = false; // disable the default indicator
+ um.on('beforeupdate', this.onBeforeLoad, this);
+ um.on('update', this.onLoad, this);
+ um.on('failure', this.onLoad, this);
+ this.removeMask = true;
+ }
+};
- if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
- this.baseScale = width / this.minWidth;
- }
+Roo.LoadMask.prototype = {
+ /**
+ * @cfg {Boolean} removeMask
+ * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
+ * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
+ */
+ removeMask : false,
+ /**
+ * @cfg {String} msg
+ * The text to display in a centered loading message box (defaults to 'Loading...')
+ */
+ msg : 'Loading...',
+ /**
+ * @cfg {String} msgCls
+ * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
+ */
+ msgCls : 'x-mask-loading',
- return;
+ /**
+ * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
+ * @type Boolean
+ */
+ disabled: false,
+
+ /**
+ * Disables the mask to prevent it from being displayed
+ */
+ disable : function(){
+ this.disabled = true;
},
-
- getScaleLevel : function()
- {
- return this.baseScale * Math.pow(1.02, this.scale);
+
+ /**
+ * Enables the mask so that it can be displayed
+ */
+ enable : function(){
+ this.disabled = false;
},
- onTouchStart : function(e)
+ onLoadException : function()
{
- if(!this.canvasLoaded){
- this.beforeSelectFile(e);
- return;
- }
-
- var touches = e.browserEvent.touches;
-
- if(!touches){
- return;
- }
-
- if(touches.length == 1){
- this.onMouseDown(e);
- return;
- }
-
- if(touches.length != 2){
- return;
- }
-
- var coords = [];
+ Roo.log(arguments);
- for(var i = 0, finger; finger = touches[i]; i++){
- coords.push(finger.pageX, finger.pageY);
+ if (typeof(arguments[3]) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",arguments[3]);
+ }
+ /*
+ try {
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+ } catch(e) {
+
}
-
- var x = Math.pow(coords[0] - coords[2], 2);
- var y = Math.pow(coords[1] - coords[3], 2);
-
- this.startDistance = Math.sqrt(x + y);
-
- this.startScale = this.scale;
-
- this.pinching = true;
- this.dragable = false;
-
- },
+ */
- onTouchMove : function(e)
- {
- if(!this.pinching && !this.dragable){
- return;
- }
-
- var touches = e.browserEvent.touches;
-
- if(!touches){
- return;
- }
-
- if(this.dragable){
- this.onMouseMove(e);
- return;
- }
-
- var coords = [];
-
- for(var i = 0, finger; finger = touches[i]; i++){
- coords.push(finger.pageX, finger.pageY);
- }
-
- var x = Math.pow(coords[0] - coords[2], 2);
- var y = Math.pow(coords[1] - coords[3], 2);
-
- this.endDistance = Math.sqrt(x + y);
-
- this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
-
- if(!this.zoomable()){
- this.scale = this.startScale;
- return;
- }
-
- this.draw();
-
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
},
-
- onTouchEnd : function(e)
+ // private
+ onLoad : function()
{
- this.pinching = false;
- this.dragable = false;
-
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
},
-
- process : function(file, crop)
- {
- if(this.loadMask){
- this.maskEl.mask(this.loadingText);
- }
-
- this.xhr = new XMLHttpRequest();
-
- file.xhr = this.xhr;
- this.xhr.open(this.method, this.url, true);
-
- var headers = {
- "Accept": "application/json",
- "Cache-Control": "no-cache",
- "X-Requested-With": "XMLHttpRequest"
- };
-
- for (var headerName in headers) {
- var headerValue = headers[headerName];
- if (headerValue) {
- this.xhr.setRequestHeader(headerName, headerValue);
- }
- }
-
- var _this = this;
-
- this.xhr.onload = function()
- {
- _this.xhrOnLoad(_this.xhr);
+ // private
+ onBeforeLoad : function(){
+ if(!this.disabled){
+ (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
}
-
- this.xhr.onerror = function()
- {
- _this.xhrOnError(_this.xhr);
+ },
+
+ // private
+ destroy : function(){
+ if(this.store){
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('loadexception', this.onLoadException, this);
+ }else{
+ var um = this.el.getUpdateManager();
+ um.un('beforeupdate', this.onBeforeLoad, this);
+ um.un('update', this.onLoad, this);
+ um.un('failure', this.onLoad, this);
}
-
- var formData = new FormData();
+ }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
- formData.append('returnHTML', 'NO');
- if(crop){
- formData.append('crop', crop);
- var blobBin = atob(crop.split(',')[1]);
- var array = [];
- for(var i = 0; i < blobBin.length; i++) {
- array.push(blobBin.charCodeAt(i));
- }
- var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
- formData.append(this.paramName, croppedFile, file.name);
- }
-
- if(typeof(file.filename) != 'undefined'){
- formData.append('filename', file.filename);
- }
-
- if(typeof(file.mimetype) != 'undefined'){
- formData.append('mimetype', file.mimetype);
- }
+/**
+ * @class Roo.XTemplate
+ * @extends Roo.Template
+ * Provides a template that can have nested templates for loops or conditionals. The syntax is:
+<pre><code>
+var t = new Roo.XTemplate(
+ '<select name="{name}">',
+ '<tpl for="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
+ '</select>'
+);
+
+// then append, applying the master template values
+ </code></pre>
+ *
+ * Supported features:
+ *
+ * Tags:
- if(this.fireEvent('arrange', this, formData) != false){
- this.xhr.send(formData);
- };
- },
-
- xhrOnLoad : function(xhr)
- {
- if(this.loadMask){
- this.maskEl.unmask();
- }
-
- if (xhr.readyState !== 4) {
- this.fireEvent('exception', this, xhr);
- return;
- }
+<pre><code>
+ {a_variable} - output encoded.
+ {a_variable.format:("Y-m-d")} - call a method on the variable
+ {a_variable:raw} - unencoded output
+ {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
+ {a_variable:this.method_on_template(...)} - call a method on the template object.
+
+</code></pre>
+ * The tpl tag:
+<pre><code>
+ <tpl for="a_variable or condition.."></tpl>
+ <tpl if="a_variable or condition"></tpl>
+ <tpl exec="some javascript"></tpl>
+ <tpl name="named_template"></tpl> (experimental)
+
+ <tpl for="."></tpl> - just iterate the property..
+ <tpl for=".."></tpl> - iterates with the parent (probably the template)
+</code></pre>
+ *
+ */
+Roo.XTemplate = function()
+{
+ Roo.XTemplate.superclass.constructor.apply(this, arguments);
+ if (this.html) {
+ this.compile();
+ }
+};
- var response = Roo.decode(xhr.responseText);
-
- if(!response.success){
- this.fireEvent('exception', this, xhr);
- return;
- }
-
- var response = Roo.decode(xhr.responseText);
-
- this.fireEvent('upload', this, response);
-
- },
-
- xhrOnError : function()
+
+Roo.extend(Roo.XTemplate, Roo.Template, {
+
+ /**
+ * The various sub templates
+ */
+ tpls : false,
+ /**
+ *
+ * basic tag replacing syntax
+ * WORD:WORD()
+ *
+ * // you can fake an object call by doing this
+ * x.t:(test,tesT)
+ *
+ */
+ re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+
+ /**
+ * compile the template
+ *
+ * This is not recursive, so I'm not sure how nested templates are really going to be handled..
+ *
+ */
+ compile: function()
{
- if(this.loadMask){
- this.maskEl.unmask();
- }
-
- Roo.log('xhr on error');
-
- var response = Roo.decode(xhr.responseText);
-
- Roo.log(response);
-
- },
+ var s = this.html;
+
+ s = ['<tpl>', s, '</tpl>'].join('');
- prepare : function(file)
- {
- if(this.loadMask){
- this.maskEl.mask(this.loadingText);
- }
-
- this.file = false;
- this.exif = {};
-
- if(typeof(file) === 'string'){
- this.loadCanvas(file);
- return;
- }
-
- if(!file || !this.urlAPI){
- return;
- }
-
- this.file = file;
- if(typeof(file.type) != 'undefined' && file.type.length != 0) {
- this.cropType = file.type;
- }
-
- var _this = this;
-
- if(this.fireEvent('prepare', this, this.file) != false){
-
- var reader = new FileReader();
-
- reader.onload = function (e) {
- if (e.target.error) {
- Roo.log(e.target.error);
- return;
- }
+ var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
+ nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
+ ifRe = /^<tpl\b[^>]*?if="(.*?)"/,
+ execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
+ namedRe = /^<tpl\b[^>]*?name="(\w+)"/, // named templates..
+ m,
+ id = 0,
+ tpls = [];
+
+ while(true == !!(m = s.match(re))){
+ var forMatch = m[0].match(nameRe),
+ ifMatch = m[0].match(ifRe),
+ execMatch = m[0].match(execRe),
+ namedMatch = m[0].match(namedRe),
- var buffer = e.target.result,
- dataView = new DataView(buffer),
- offset = 2,
- maxOffset = dataView.byteLength - 4,
- markerBytes,
- markerLength;
+ exp = null,
+ fn = null,
+ exec = null,
+ name = forMatch && forMatch[1] ? forMatch[1] : '';
- if (dataView.getUint16(0) === 0xffd8) {
- while (offset < maxOffset) {
- markerBytes = dataView.getUint16(offset);
-
- if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
- markerLength = dataView.getUint16(offset + 2) + 2;
- if (offset + markerLength > dataView.byteLength) {
- Roo.log('Invalid meta data: Invalid segment size.');
- break;
- }
-
- if(markerBytes == 0xffe1){
- _this.parseExifData(
- dataView,
- offset,
- markerLength
- );
- }
-
- offset += markerLength;
-
- continue;
- }
-
- break;
- }
-
+ if (ifMatch) {
+ // if - puts fn into test..
+ exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
+ if(exp){
+ fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ }
+ }
+
+ if (execMatch) {
+ // exec - calls a function... returns empty if true is returned.
+ exp = execMatch && execMatch[1] ? execMatch[1] : null;
+ if(exp){
+ exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ }
+ }
+
+
+ if (name) {
+ // for =
+ switch(name){
+ case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
+ case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
+ default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
}
-
- var url = _this.urlAPI.createObjectURL(_this.file);
-
- _this.loadCanvas(url);
-
- return;
}
+ var uid = namedMatch ? namedMatch[1] : id;
- reader.readAsArrayBuffer(this.file);
+ tpls.push({
+ id: namedMatch ? namedMatch[1] : id,
+ target: name,
+ exec: exec,
+ test: fn,
+ body: m[1] || ''
+ });
+ if (namedMatch) {
+ s = s.replace(m[0], '');
+ } else {
+ s = s.replace(m[0], '{xtpl'+ id + '}');
+ }
+ ++id;
}
-
+ this.tpls = [];
+ for(var i = tpls.length-1; i >= 0; --i){
+ this.compileTpl(tpls[i]);
+ this.tpls[tpls[i].id] = tpls[i];
+ }
+ this.master = tpls[tpls.length-1];
+ return this;
},
-
- parseExifData : function(dataView, offset, length)
+ /**
+ * same as applyTemplate, except it's done to one of the subTemplates
+ * when using named templates, you can do:
+ *
+ * var str = pl.applySubTemplate('your-name', values);
+ *
+ *
+ * @param {Number} id of the template
+ * @param {Object} values to apply to template
+ * @param {Object} parent (normaly the instance of this object)
+ */
+ applySubTemplate : function(id, values, parent)
{
- var tiffOffset = offset + 10,
- littleEndian,
- dirOffset;
-
- if (dataView.getUint32(offset + 4) !== 0x45786966) {
- // No Exif data, might be XMP data instead
- return;
- }
- // Check for the ASCII code for "Exif" (0x45786966):
- if (dataView.getUint32(offset + 4) !== 0x45786966) {
- // No Exif data, might be XMP data instead
- return;
- }
- if (tiffOffset + 8 > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid segment size.');
- return;
- }
- // Check for the two null bytes:
- if (dataView.getUint16(offset + 8) !== 0x0000) {
- Roo.log('Invalid Exif data: Missing byte alignment offset.');
- return;
- }
- // Check the byte alignment:
- switch (dataView.getUint16(tiffOffset)) {
- case 0x4949:
- littleEndian = true;
- break;
- case 0x4D4D:
- littleEndian = false;
- break;
- default:
- Roo.log('Invalid Exif data: Invalid byte alignment marker.');
- return;
- }
- // Check for the TIFF tag marker (0x002A):
- if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
- Roo.log('Invalid Exif data: Missing TIFF marker.');
- return;
- }
- // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
- dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
- this.parseExifTags(
- dataView,
- tiffOffset,
- tiffOffset + dirOffset,
- littleEndian
- );
- },
-
- parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
- {
- var tagsNumber,
- dirEndOffset,
- i;
- if (dirOffset + 6 > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid directory offset.');
- return;
- }
- tagsNumber = dataView.getUint16(dirOffset, littleEndian);
- dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
- if (dirEndOffset + 4 > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid directory size.');
- return;
- }
- for (i = 0; i < tagsNumber; i += 1) {
- this.parseExifTag(
- dataView,
- tiffOffset,
- dirOffset + 2 + 12 * i, // tag offset
- littleEndian
- );
- }
- // Return the offset to the next directory:
- return dataView.getUint32(dirEndOffset, littleEndian);
- },
-
- parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
- {
- var tag = dataView.getUint16(offset, littleEndian);
+ var t = this.tpls[id];
- this.exif[tag] = this.getExifValue(
- dataView,
- tiffOffset,
- offset,
- dataView.getUint16(offset + 2, littleEndian), // tag type
- dataView.getUint32(offset + 4, littleEndian), // tag length
- littleEndian
- );
- },
-
- getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
- {
- var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
- tagSize,
- dataOffset,
- values,
- i,
- str,
- c;
-
- if (!tagType) {
- Roo.log('Invalid Exif data: Invalid tag type.');
- return;
- }
- tagSize = tagType.size * length;
- // Determine if the value is contained in the dataOffset bytes,
- // or if the value at the dataOffset is a pointer to the actual data:
- dataOffset = tagSize > 4 ?
- tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
- if (dataOffset + tagSize > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid data offset.');
- return;
- }
- if (length === 1) {
- return tagType.getValue(dataView, dataOffset, littleEndian);
+ try {
+ if(t.test && !t.test.call(this, values, parent)){
+ return '';
+ }
+ } catch(e) {
+ Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.test);
+ return ''
}
- values = [];
- for (i = 0; i < length; i += 1) {
- values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ try {
+
+ if(t.exec && t.exec.call(this, values, parent)){
+ return '';
+ }
+ } catch(e) {
+ Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.exec);
+ return ''
}
-
- if (tagType.ascii) {
- str = '';
- // Concatenate the chars:
- for (i = 0; i < values.length; i += 1) {
- c = values[i];
- // Ignore the terminating NULL byte(s):
- if (c === '\u0000') {
- break;
+ try {
+ var vs = t.target ? t.target.call(this, values, parent) : values;
+ parent = t.target ? values : parent;
+ if(t.target && vs instanceof Array){
+ var buf = [];
+ for(var i = 0, len = vs.length; i < len; i++){
+ buf[buf.length] = t.compiled.call(this, vs[i], parent);
}
- str += c;
+ return buf.join('');
}
- return str;
- }
- return values;
- }
-
-});
-
-Roo.apply(Roo.dialog.UploadCropbox, {
- tags : {
- 'Orientation': 0x0112
- },
-
- Orientation: {
- 1: 0, //'top-left',
-// 2: 'top-right',
- 3: 180, //'bottom-right',
-// 4: 'bottom-left',
-// 5: 'left-top',
- 6: 90, //'right-top',
-// 7: 'right-bottom',
- 8: 270 //'left-bottom'
- },
-
- exifTagTypes : {
- // byte, 8-bit unsigned int:
- 1: {
- getValue: function (dataView, dataOffset) {
- return dataView.getUint8(dataOffset);
- },
- size: 1
- },
- // ascii, 8-bit byte:
- 2: {
- getValue: function (dataView, dataOffset) {
- return String.fromCharCode(dataView.getUint8(dataOffset));
- },
- size: 1,
- ascii: true
- },
- // short, 16 bit int:
- 3: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getUint16(dataOffset, littleEndian);
- },
- size: 2
- },
- // long, 32 bit int:
- 4: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getUint32(dataOffset, littleEndian);
- },
- size: 4
- },
- // rational = two long values, first is numerator, second is denominator:
- 5: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getUint32(dataOffset, littleEndian) /
- dataView.getUint32(dataOffset + 4, littleEndian);
- },
- size: 8
- },
- // slong, 32 bit signed int:
- 9: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getInt32(dataOffset, littleEndian);
- },
- size: 4
- },
- // srational, two slongs, first is numerator, second is denominator:
- 10: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getInt32(dataOffset, littleEndian) /
- dataView.getInt32(dataOffset + 4, littleEndian);
- },
- size: 8
+ return t.compiled.call(this, vs, parent);
+ } catch (e) {
+ Roo.log("Xtemplate.applySubTemplate : Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.compiled);
+ return '';
}
},
-
- footer : {
- STANDARD : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-left',
- action : 'rotate-left',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-undo"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-picture',
- action : 'picture',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-picture-o"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-right',
- action : 'rotate-right',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-repeat"></i>'
- }
- ]
+
+ compileTpl : function(tpl)
+ {
+ var fm = Roo.util.Format;
+ var useF = this.disableFormats !== true;
+ var sep = Roo.isGecko ? "+" : ",";
+ var undef = function(str) {
+ Roo.log("Property not found :" + str);
+ return '';
+ };
+
+ var fn = function(m, name, format, args)
+ {
+ //Roo.log(arguments);
+ args = args ? args.replace(/\\'/g,"'") : args;
+ //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
+ if (typeof(format) == 'undefined') {
+ format= 'htmlEncode';
}
- ],
- DOCUMENT : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-left',
- action : 'rotate-left',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-undo"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-download',
- action : 'download',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-download"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-crop',
- action : 'crop',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-crop"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-trash',
- action : 'trash',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-trash"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-right',
- action : 'rotate-right',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-repeat"></i>'
- }
- ]
+ if (format == 'raw' ) {
+ format = false;
}
- ],
- ROTATOR : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-left',
- action : 'rotate-left',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-undo"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-right',
- action : 'rotate-right',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-repeat"></i>'
- }
- ]
+
+ if(name.substr(0, 4) == 'xtpl'){
+ return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
}
- ],
- CENTER : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-center',
- action : 'center',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : 'CENTER'
- }
- ]
+
+ // build an array of options to determine if value is undefined..
+
+ // basically get 'xxxx.yyyy' then do
+ // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
+ // (function () { Roo.log("Property not found"); return ''; })() :
+ // ......
+
+ var udef_ar = [];
+ var lookfor = '';
+ Roo.each(name.split('.'), function(st) {
+ lookfor += (lookfor.length ? '.': '') + st;
+ udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
+ });
+
+ var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
+
+
+ if(format && useF){
+
+ args = args ? ',' + args : "";
+
+ if(format.substr(0, 5) != "this."){
+ format = "fm." + format + '(';
+ }else{
+ format = 'this.call("'+ format.substr(5) + '", ';
+ args = ", values";
+ }
+
+ return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
}
- ]
+
+ if (args.length) {
+ // called with xxyx.yuu:(test,test)
+ // change to ()
+ return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
+ }
+ // raw.. - :raw modifier..
+ return "'"+ sep + udef_st + name + ")"+sep+"'";
+
+ };
+ var body;
+ // branched to use + in gecko and [].join() in others
+ if(Roo.isGecko){
+ body = "tpl.compiled = function(values, parent){ with(values) { return '" +
+ tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
+ "';};};";
+ }else{
+ body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
+ body.push(tpl.body.replace(/(\r\n|\n)/g,
+ '\\n').replace(/'/g, "\\'").replace(this.re, fn));
+ body.push("'].join('');};};");
+ body = body.join('');
+ }
+
+ Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
+
+ /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
+ eval(body);
+
+ return this;
+ },
+
+ applyTemplate : function(values){
+ return this.master.compiled.call(this, values, {});
+ //var s = this.subs;
+ },
+
+ apply : function(){
+ return this.applyTemplate.apply(this, arguments);
}
-});
+
+ });
+
+Roo.XTemplate.from = function(el){
+ el = Roo.getDom(el);
+ return new Roo.XTemplate(el.value || el.innerHTML);
+};// old names for panel elements
+Roo.GridPanel = Roo.panel.Grid;
+Roo.CalendarPanel = Roo.panel.Calendar;
+Roo.ContentPanel = Roo.panel.Content;
+Roo.NestedLayoutPanel = Roo.panel.NestedLayout;
+Roo.TabPanel = Roo.panel.Tab;
+Roo.TabPanelItem = Roo.panel.TabItem;
+Roo.TreePanel = Roo.panel.Tree;
\ No newline at end of file
}
-}); /*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.TabPanel
- * @extends Roo.util.Observable
- * A lightweight tab container.
- * <br><br>
- * Usage:
- * <pre><code>
-// basic tabs 1, built from existing content
-var tabs = new Roo.TabPanel("tabs1");
-tabs.addTab("script", "View Script");
-tabs.addTab("markup", "View Markup");
-tabs.activate("script");
-
-// more advanced tabs, built from javascript
-var jtabs = new Roo.TabPanel("jtabs");
-jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
-
-// set up the UpdateManager
-var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
-var updater = tab2.getUpdateManager();
-updater.setDefaultUrl("ajax1.htm");
-tab2.on('activate', updater.refresh, updater, true);
-
-// Use setUrl for Ajax loading
-var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
-tab3.setUrl("ajax2.htm", null, true);
-
-// Disabled tab
-var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
-tab4.disable();
+});Roo.panel = {};
+/*
+* Licence: LGPL
+*/
-jtabs.activate("jtabs-1");
- * </code></pre>
+/**
+ * @class Roo.panel.Cropbox
+ * @extends Roo.BoxComponent
+ * Panel Cropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Number} windowSize default 300
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ *
* @constructor
- * Create a new TabPanel.
- * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
- * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
+ * Create a new Cropbox
+ * @param {Object} config The config object
*/
-Roo.TabPanel = function(container, config){
- /**
- * The container element for this TabPanel.
- * @type Roo.Element
- */
- this.el = Roo.get(container, true);
- if(config){
- if(typeof config == "boolean"){
- this.tabPosition = config ? "bottom" : "top";
- }else{
- Roo.apply(this, config);
- }
- }
- if(this.tabPosition == "bottom"){
- this.bodyEl = Roo.get(this.createBody(this.el.dom));
- this.el.addClass("x-tabs-bottom");
- }
- this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
- this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
- this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
- if(Roo.isIE){
- 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");
- }
- this.items = [];
-
- this.bodyEl.setStyle("position", "relative");
-
- this.active = null;
- this.activateDelegate = this.activate.createDelegate(this);
+ Roo.panel.Cropbox = function(config){
+ Roo.panel.Cropbox.superclass.constructor.call(this, config);
+
this.addEvents({
/**
- * @event tabchange
- * Fires when the active tab changes
- * @param {Roo.TabPanel} this
- * @param {Roo.TabPanelItem} activePanel The new active tab
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.panel.Cropbox} this
*/
- "tabchange": true,
+ "beforeselectfile" : true,
/**
- * @event beforetabchange
- * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
- * @param {Roo.TabPanel} this
- * @param {Object} e Set cancel to true on this object to cancel the tab change
- * @param {Roo.TabPanelItem} tab The tab being changed to
+ * @event initial
+ * Fire after initEvent
+ * @param {Roo.panel.Cropbox} this
*/
- "beforetabchange" : true
+ "initial" : true,
+ /**
+ * @event crop
+ * Fire after initEvent
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} data
+ */
+ "crop" : true,
+ /**
+ * @event prepare
+ * Fire when preparing the file data
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} file
+ */
+ "prepare" : true,
+ /**
+ * @event exception
+ * Fire when get exception
+ * @param {Roo.panel.Cropbox} this
+ * @param {XMLHttpRequest} xhr
+ */
+ "exception" : true,
+ /**
+ * @event beforeloadcanvas
+ * Fire before load the canvas
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} src
+ */
+ "beforeloadcanvas" : true,
+ /**
+ * @event trash
+ * Fire when trash image
+ * @param {Roo.panel.Cropbox} this
+ */
+ "trash" : true,
+ /**
+ * @event download
+ * Fire when download the image
+ * @param {Roo.panel.Cropbox} this
+ */
+ "download" : true,
+ /**
+ * @event footerbuttonclick
+ * Fire when footerbuttonclick
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} type
+ */
+ "footerbuttonclick" : true,
+ /**
+ * @event resize
+ * Fire when resize
+ * @param {Roo.panel.Cropbox} this
+ */
+ "resize" : true,
+ /**
+ * @event rotate
+ * Fire when rotate the image
+ * @param {Roo.panel.Cropbox} this
+ * @param {String} pos
+ */
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.panel.Cropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true,
+ /**
+ * @event loadcanvas
+ * Fire after load the canvas
+ * @param {Roo.panel.Cropbox}
+ * @param {Object} imgEl
+ */
+ "loadcanvas" : true
});
+
+ this.buttons = this.buttons || Roo.panel.Cropbox.footer.STANDARD;
+};
- Roo.EventManager.onWindowResize(this.onResize, this);
- this.cpad = this.el.getPadding("lr");
- this.hiddenCount = 0;
-
+Roo.extend(Roo.panel.Cropbox, Roo.Component, {
+
+ emptyText : 'Click to upload image',
+ rotateNotify : 'Image is too small to rotate',
+ errorTimeout : 3000,
+ scale : 0,
+ baseScale : 1,
+ rotate : 0,
+ dragable : false,
+ pinching : false,
+ mouseX : 0,
+ mouseY : 0,
+ cropData : false,
+ minWidth : 300,
+ minHeight : 300,
+ outputMaxWidth : 1200,
+ windowSize : 300,
+ file : false,
+ exif : {},
+ baseRotate : 1,
+ cropType : 'image/jpeg',
+ buttons : false,
+ canvasLoaded : false,
+ isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ tag : 'div',
+ cls : 'roo-upload-cropbox',
+ cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-body',
+ style : 'cursor:pointer',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-preview'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-thumb'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-empty-notify',
+ html : this.emptyText
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-error-notify alert alert-danger',
+ html : this.rotateNotify
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-footer',
+ cn : {
+ tag : 'div',
+ cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
+ cn : []
+ }
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.panel.Cropbox.superclass.onRender.call(this, ct, position);
- // 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%');
+ if(this.el){
+ if (this.el.attr('xtype')) {
+ this.el.attr('xtypex', this.el.attr('xtype'));
+ this.el.dom.removeAttribute('xtype');
+
+ this.initEvents();
+ }
}
+ else {
+ var cfg = Roo.apply({}, this.getAutoCreate());
- }
-
-
-
- Roo.TabPanel.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.TabPanel, Roo.util.Observable, {
- /*
- *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
- */
- tabPosition : "top",
- /*
- *@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)
- */
- minTabWidth : 40,
- /*
- *@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)
- */
- preferredTabWidth : 175,
- /*
- *@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)
- */
- 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.
- * @param {String} id The id of the div to use <b>or create</b>
- * @param {String} text The text for the tab
- * @param {String} content (optional) Content to put in the TabPanelItem body
- * @param {Boolean} closable (optional) True to create a close icon on the tab
- * @return {Roo.TabPanelItem} The created TabPanelItem
- */
- addTab : function(id, text, content, closable){
- var item = new Roo.TabPanelItem(this, id, text, closable);
- this.addTabItem(item);
- if(content){
- item.setContent(content);
+ cfg.id = this.id || Roo.id();
+
+ if (this.cls) {
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
+ }
+
+ if (this.style) { // fixme needs to support more complex style data.
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
+ }
+
+ this.el = ct.createChild(cfg, position);
+
+ this.initEvents();
+ }
+
+ if (this.buttons.length) {
+
+ Roo.each(this.buttons, function(bb) {
+
+ var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
+
+ btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
+
+ }, this);
+ }
+
+ if(this.loadMask){
+ this.maskEl = this.el;
}
- return item;
},
-
- /**
- * Returns the {@link Roo.TabPanelItem} with the specified id/index
- * @param {String/Number} id The id or index of the TabPanelItem to fetch.
- * @return {Roo.TabPanelItem}
- */
- getTab : function(id){
- return this.items[id];
+
+ initEvents : function()
+ {
+ this.urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+ this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
+ this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
+ this.selectorEl.hide();
+
+ this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
+ this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
+ this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.thumbEl.hide();
+
+ this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
+ this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+
+ this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
+ this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.errorEl.hide();
+
+ this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
+ this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.footerEl.hide();
+
+ this.setThumbBoxSize();
+
+ this.bind();
+
+ this.resize();
+
+ this.fireEvent('initial', this);
},
- /**
- * Hides the {@link Roo.TabPanelItem} with the specified id/index
- * @param {String/Number} id The id or index of the TabPanelItem to hide.
- */
- hideTab : function(id){
- var t = this.items[id];
- if(!t.isHidden()){
- t.setHidden(true);
- this.hiddenCount++;
- this.autoSizeTabs();
+ bind : function()
+ {
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
+ this.bodyEl.on('click', this.beforeSelectFile, this);
+
+ if(Roo.isTouch){
+ this.bodyEl.on('touchstart', this.onTouchStart, this);
+ this.bodyEl.on('touchmove', this.onTouchMove, this);
+ this.bodyEl.on('touchend', this.onTouchEnd, this);
}
- },
-
- /**
- * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
- * @param {String/Number} id The id or index of the TabPanelItem to unhide.
- */
- unhideTab : function(id){
- var t = this.items[id];
- if(t.isHidden()){
- t.setHidden(false);
- this.hiddenCount--;
- this.autoSizeTabs();
+
+ if(!Roo.isTouch){
+ this.bodyEl.on('mousedown', this.onMouseDown, this);
+ this.bodyEl.on('mousemove', this.onMouseMove, this);
+ var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+ this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
}
+
+ this.selectorEl.on('change', this.onFileSelected, this);
},
-
- /**
- * Adds an existing {@link Roo.TabPanelItem}.
- * @param {Roo.TabPanelItem} item The TabPanelItem to add
- */
- addTabItem : function(item){
- this.items[item.id] = item;
- this.items.push(item);
- if(this.resizeTabs){
- item.setWidth(this.currentTabWidth || this.preferredTabWidth);
- this.autoSizeTabs();
- }else{
- item.autoSize();
- }
+
+ reset : function()
+ {
+ this.scale = 0;
+ this.baseScale = 1;
+ this.rotate = 0;
+ this.baseRotate = 1;
+ this.dragable = false;
+ this.pinching = false;
+ this.mouseX = 0;
+ this.mouseY = 0;
+ this.cropData = false;
+ this.notifyEl.dom.innerHTML = this.emptyText;
+
+ // this.selectorEl.dom.value = '';
+
},
-
- /**
- * Removes a {@link Roo.TabPanelItem}.
- * @param {String/Number} id The id or index of the TabPanelItem to remove.
- */
- removeTab : function(id){
- var items = this.items;
- var tab = items[id];
- if(!tab) { return; }
- var index = items.indexOf(tab);
- if(this.active == tab && items.length > 1){
- var newTab = this.getNextAvailable(index);
- if(newTab) {
- newTab.activate();
- }
- }
- this.stripEl.dom.removeChild(tab.pnode.dom);
- if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
- this.bodyEl.dom.removeChild(tab.bodyEl.dom);
+
+ resize : function()
+ {
+ if(this.fireEvent('resize', this) != false){
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
}
- items.splice(index, 1);
- delete this.items[tab.id];
- tab.fireEvent("close", tab);
- tab.purgeListeners();
- this.autoSizeTabs();
},
-
- getNextAvailable : function(start){
- var items = this.items;
- var index = start;
- // look for a next tab that will slide over to
- // replace the one being removed
- while(index < items.length){
- var item = items[++index];
- if(item && !item.isHidden()){
- return item;
- }
- }
- // if one isn't found select the previous tab (on the left)
- index = start;
- while(index >= 0){
- var item = items[--index];
- if(item && !item.isHidden()){
- return item;
- }
+
+ onFooterButtonClick : function(e, el, o, type)
+ {
+ switch (type) {
+ case 'rotate-left' :
+ this.onRotateLeft(e);
+ break;
+ case 'rotate-right' :
+ this.onRotateRight(e);
+ break;
+ case 'picture' :
+ this.beforeSelectFile(e);
+ break;
+ case 'trash' :
+ this.trash(e);
+ break;
+ case 'crop' :
+ this.crop(e);
+ break;
+ case 'download' :
+ this.download(e);
+ break;
+ case 'center' :
+ this.center(e);
+ break;
+ default :
+ break;
}
- return null;
+
+ this.fireEvent('footerbuttonclick', this, type);
},
-
- /**
- * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
- * @param {String/Number} id The id or index of the TabPanelItem to disable.
- */
- disableTab : function(id){
- var tab = this.items[id];
- if(tab && this.active != tab){
- tab.disable();
+
+ beforeSelectFile : function(e)
+ {
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
}
},
-
- /**
- * Enables a {@link Roo.TabPanelItem} that is disabled.
- * @param {String/Number} id The id or index of the TabPanelItem to enable.
- */
- enableTab : function(id){
- var tab = this.items[id];
- tab.enable();
- },
-
- /**
- * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
- * @param {String/Number} id The id or index of the TabPanelItem to activate.
- * @return {Roo.TabPanelItem} The TabPanelItem.
- */
- activate : function(id){
- var tab = this.items[id];
- if(!tab){
- return null;
- }
- if(tab == this.active || tab.disabled){
- return tab;
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
}
- var e = {};
- this.fireEvent("beforetabchange", this, e, tab);
- if(e.cancel !== true && !tab.disabled){
- if(this.active){
- this.active.hide();
- }
- this.active = this.items[id];
- this.active.show();
- this.fireEvent("tabchange", this, this.active);
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
}
- return tab;
- },
-
- /**
- * Gets the active {@link Roo.TabPanelItem}.
- * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
- */
- getActiveTab : function(){
- return this.active;
- },
-
- /**
- * Updates the tab body element to fit the height of the container element
- * for overflow scrolling
- * @param {Number} targetHeight (optional) Override the starting height from the elements height
- */
- syncHeight : function(targetHeight){
- var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
- var bm = this.bodyEl.getMargins();
- var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
- this.bodyEl.setHeight(newHeight);
- return newHeight;
+
},
-
- onResize : function(){
- if(this.monitorResize){
- this.autoSizeTabs();
- }
+
+ trash : function(e)
+ {
+ this.fireEvent('trash', this);
},
-
- /**
- * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
- */
- beginUpdate : function(){
- this.updating = true;
+
+ download : function(e)
+ {
+ this.fireEvent('download', this);
},
- /**
- * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
- */
- endUpdate : function(){
- this.updating = false;
- this.autoSizeTabs();
+ center : function(e)
+ {
+ this.setCanvasPosition();
},
-
- /**
- * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
- */
- autoSizeTabs : function(){
- var count = this.items.length;
- var vcount = count - this.hiddenCount;
- if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
- return;
- }
- var w = Math.max(this.el.getWidth() - this.cpad, 10);
- var availWidth = Math.floor(w / vcount);
- var b = this.stripBody;
- if(b.getWidth() > w){
- var tabs = this.items;
- this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
- if(availWidth < this.minTabWidth){
- /*if(!this.sleft){ // incomplete scrolling code
- this.createScrollButtons();
- }
- this.showScroll();
- this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
- }
- }else{
- if(this.currentTabWidth < this.preferredTabWidth){
- this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
- }
+
+ loadCanvas : function(src)
+ {
+ if(this.fireEvent('beforeloadcanvas', this, src) != false){
+
+ this.reset();
+
+ this.imageEl = document.createElement('img');
+
+ var _this = this;
+
+ this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
+
+ this.imageEl.src = src;
}
},
+
+ onLoadCanvas : function()
+ {
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
- /**
- * Returns the number of tabs in this TabPanel.
- * @return {Number}
- */
- getCount : function(){
- return this.items.length;
- },
-
- /**
- * Resizes all the tabs to the passed width
- * @param {Number} The new width
- */
- setTabWidth : function(width){
- this.currentTabWidth = width;
- for(var i = 0, len = this.items.length; i < len; i++) {
- if(!this.items[i].isHidden()) {
- this.items[i].setWidth(width);
+ if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
+
+ this.bodyEl.un('click', this.beforeSelectFile, this);
+
+ this.notifyEl.hide();
+ this.thumbEl.show();
+ this.footerEl.show();
+
+ this.baseRotateLevel();
+
+ if(this.isDocument){
+ this.setThumbBoxSize();
}
+
+ this.setThumbBoxPosition();
+
+ this.baseScaleLevel();
+
+ this.draw();
+
+ this.resize();
+
+ this.canvasLoaded = true;
+
}
- },
-
- /**
- * Destroys this TabPanel
- * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
- */
- destroy : function(removeEl){
- Roo.EventManager.removeResizeListener(this.onResize, this);
- for(var i = 0, len = this.items.length; i < len; i++){
- this.items[i].purgeListeners();
+
+ if(this.loadMask){
+ this.maskEl.unmask();
}
- if(removeEl === true){
- this.el.update("");
- this.el.remove();
+
+ },
+
+ setCanvasPosition : function(center = true)
+ {
+ if(!this.canvasEl){
+ return;
}
- }
-});
-/**
- * @class Roo.TabPanelItem
- * @extends Roo.util.Observable
- * Represents an individual item (tab plus body) in a TabPanel.
- * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @param {String} id The id of this TabPanelItem
- * @param {String} text The text for the tab of this TabPanelItem
- * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
- */
-Roo.TabPanelItem = function(tabPanel, id, text, closable){
- /**
- * The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @type Roo.TabPanel
- */
- this.tabPanel = tabPanel;
- /**
- * The id for this TabPanelItem
- * @type String
- */
- this.id = id;
- /** @private */
- this.disabled = false;
- /** @private */
- this.text = text;
- /** @private */
- this.loaded = false;
- this.closable = closable;
+ var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var newCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
- /**
- * The body element for this TabPanelItem.
- * @type Roo.Element
- */
- this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
- this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
- this.bodyEl.setStyle("display", "block");
- this.bodyEl.setStyle("zoom", "1");
- this.hideAction();
+ if(center) {
+ this.previewEl.setLeft(newCenterLeft);
+ this.previewEl.setTop(newCenterTop);
- var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
- /** @private */
- this.el = Roo.get(els.el, true);
- this.inner = Roo.get(els.inner, true);
- this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
- this.pnode = Roo.get(els.el.parentNode, true);
- this.el.on("mousedown", this.onTabMouseDown, this);
- this.el.on("click", this.onTabClick, this);
- /** @private */
- if(closable){
- var c = Roo.get(els.close, true);
- c.dom.title = this.closeText;
- c.addClassOnOver("close-over");
- c.on("click", this.closeClick, this);
- }
+ return;
+ }
+
+ var oldScaleLevel = this.baseScale * Math.pow(1.02, this.startScale);
+ var oldCanvasWidth = Math.floor(this.imageEl.OriginWidth * oldScaleLevel);
+ var oldCanvasHeight = Math.floor(this.imageEl.OriginHeight * oldScaleLevel);
- this.addEvents({
- /**
- * @event activate
- * Fires when this tab becomes the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "activate": true,
- /**
- * @event beforeclose
- * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
- * @param {Roo.TabPanelItem} this
- * @param {Object} e Set cancel to true on this object to cancel the close.
- */
- "beforeclose": true,
- /**
- * @event close
- * Fires when this tab is closed.
- * @param {Roo.TabPanelItem} this
- */
- "close": true,
- /**
- * @event deactivate
- * Fires when this tab is no longer the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "deactivate" : true
- });
- this.hidden = false;
+ var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - oldCanvasWidth) / 2);
+ var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - oldCanvasHeight) / 2);
- Roo.TabPanelItem.superclass.constructor.call(this);
-};
+ var leftDiff = newCenterLeft - oldCenterLeft;
+ var topDiff = newCenterTop - oldCenterTop;
-Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
- purgeListeners : function(){
- Roo.util.Observable.prototype.purgeListeners.call(this);
- this.el.removeAllListeners();
+ var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+ var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+
+ this.previewEl.setLeft(newPreviewLeft);
+ this.previewEl.setTop(newPreviewTop);
+
},
- /**
- * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
- */
- show : function(){
- this.pnode.addClass("on");
- this.showAction();
- if(Roo.isOpera){
- this.tabPanel.stripWrap.repaint();
+
+ onMouseDown : function(e)
+ {
+ e.stopEvent();
+
+ this.dragable = true;
+ this.pinching = false;
+
+ if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
+ this.dragable = false;
+ return;
}
- this.fireEvent("activate", this.tabPanel, this);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
},
+
+ onMouseMove : function(e)
+ {
+ e.stopEvent();
+
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ if (!this.dragable){
+ return;
+ }
- /**
- * Returns true if this tab is the active tab.
- * @return {Boolean}
- */
- isActive : function(){
- return this.tabPanel.getActiveTab() == this;
- },
+ var maxPaddingLeft = this.canvasEl.width / 0.9 * 0.05;
+ var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
- /**
- * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
- */
- hide : function(){
- this.pnode.removeClass("on");
- this.hideAction();
- this.fireEvent("deactivate", this.tabPanel, this);
- },
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+ maxPaddingLeft = (this.canvasEl.height * this.minWidth / this.minHeight - this.canvasEl.width) / 2 + maxPaddingLeft;
+ }
- hideAction : function(){
- this.bodyEl.hide();
- this.bodyEl.setStyle("position", "absolute");
- this.bodyEl.setLeft("-20000px");
- this.bodyEl.setTop("-20000px");
- },
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+ maxPaddingTop = (this.canvasEl.width * this.minHeight / this.minWidth - this.canvasEl.height) / 2 + maxPaddingTop;
+ }
+
+ var minX = Math.ceil(this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - this.canvasEl.width - maxPaddingLeft);
+ var minY = Math.ceil(this.thumbEl.getTop(true) + this.thumbEl.getHeight() - this.canvasEl.height - maxPaddingTop);
+
+ var maxX = Math.ceil(this.thumbEl.getLeft(true) + maxPaddingLeft);
+ var maxY = Math.ceil(this.thumbEl.getTop(true) + maxPaddingTop);
- showAction : function(){
- this.bodyEl.setStyle("position", "relative");
- this.bodyEl.setTop("");
- this.bodyEl.setLeft("");
- this.bodyEl.show();
- },
+ if(minX > maxX) {
+ var tempX = minX;
+ minX = maxX;
+ maxX = tempX;
+ }
- /**
- * Set the tooltip for the tab.
- * @param {String} tooltip The tab's tooltip
- */
- setTooltip : function(text){
- if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
- this.textEl.dom.qtip = text;
- this.textEl.dom.removeAttribute('title');
- }else{
- this.textEl.dom.title = text;
+ if(minY > maxY) {
+ var tempY = minY;
+ minY = maxY;
+ maxY = tempY;
}
- },
- onTabClick : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
- },
+ var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
+ x = x - this.mouseX;
+ y = y - this.mouseY;
- onTabMouseDown : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
+ var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+ var bgY = Math.ceil(y + this.previewEl.getTop(true));
+
+ bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
+ bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+
+ this.previewEl.setLeft(bgX);
+ this.previewEl.setTop(bgY);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
},
-
- getWidth : function(){
- return this.inner.getWidth();
+
+ onMouseUp : function(e)
+ {
+ e.stopEvent();
+
+ this.dragable = false;
},
+
+ onMouseWheel : function(e)
+ {
+ e.stopEvent();
+
+ this.startScale = this.scale;
+ this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1);
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
- setWidth : function(width){
- var iwidth = width - this.pnode.getPadding("lr");
- this.inner.setWidth(iwidth);
- this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
- this.pnode.setWidth(width);
- },
-
- /**
- * Show or hide the tab
- * @param {Boolean} hidden True to hide or false to show.
- */
- setHidden : function(hidden){
- this.hidden = hidden;
- this.pnode.setStyle("display", hidden ? "none" : "");
+
+ this.draw();
+
+ return;
},
+
+ zoomable : function()
+ {
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ if(this.minWidth < this.minHeight){
+ minScale = this.thumbEl.getHeight() / this.minHeight;
+ }
+
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
+
+ var maxWidth = this.imageEl.OriginWidth;
+ var maxHeight = this.imageEl.OriginHeight;
- /**
- * Returns true if this tab is "hidden"
- * @return {Boolean}
- */
- isHidden : function(){
- return this.hidden;
- },
- /**
- * Returns the text for this tab
- * @return {String}
- */
- getText : function(){
- return this.text;
- },
+ var newCanvasWidth = Math.floor(this.imageEl.OriginWidth * this.getScaleLevel());
+ var newCanvasHeight = Math.floor(this.imageEl.OriginHeight * this.getScaleLevel());
- autoSize : function(){
- //this.el.beginMeasure();
- this.textEl.setWidth(1);
- /*
- * #2804 [new] Tabs in Roojs
- * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
- */
- this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
- //this.el.endMeasure();
- },
+ var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
- /**
- * Sets the text for the tab (Note: this also sets the tooltip text)
- * @param {String} text The tab's text and tooltip
- */
- setText : function(text){
- this.text = text;
- this.textEl.update(text);
- this.setTooltip(text);
- if(!this.tabPanel.resizeTabs){
- this.autoSize();
- }
- },
- /**
- * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
- */
- activate : function(){
- this.tabPanel.activate(this.id);
- },
+ var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - newCanvasWidth) / 2);
+ var newCenterTop = Math.ceil((this.bodyEl.getHeight() - newCanvasHeight) / 2);
- /**
- * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
- */
- disable : function(){
- if(this.tabPanel.active != this){
- this.disabled = true;
- this.pnode.addClass("disabled");
- }
- },
+ var leftDiff = newCenterLeft - oldCenterLeft;
+ var topDiff = newCenterTop - oldCenterTop;
- /**
- * Enables this TabPanelItem if it was previously disabled.
- */
- enable : function(){
- this.disabled = false;
- this.pnode.removeClass("disabled");
- },
+ var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+ var newPreviewTop = this.previewEl.getTop(true) + topDiff;
- /**
- * Sets the content for this TabPanelItem.
- * @param {String} content The content
- * @param {Boolean} loadScripts true to look for and load scripts
- */
- setContent : function(content, loadScripts){
- this.bodyEl.update(content, loadScripts);
- },
+ var paddingLeft = newPreviewLeft - this.thumbEl.getLeft(true);
+ var paddingTop = newPreviewTop - this.thumbEl.getTop(true);
- /**
- * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
- * @return {Roo.UpdateManager} The UpdateManager
- */
- getUpdateManager : function(){
- return this.bodyEl.getUpdateManager();
- },
+ var paddingRight = this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - newCanvasWidth - newPreviewLeft;
+ var paddingBottom = this.thumbEl.getTop(true) + this.thumbEl.getHeight() - newCanvasHeight - newPreviewTop;
- /**
- * Set a URL to be used to load the content for this TabPanelItem.
- * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
- * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
- * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
- * @return {Roo.UpdateManager} The UpdateManager
- */
- setUrl : function(url, params, loadOnce){
- if(this.refreshDelegate){
- this.un('activate', this.refreshDelegate);
- }
- this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
- this.on("activate", this.refreshDelegate);
- return this.bodyEl.getUpdateManager();
- },
+ var maxPaddingLeft = newCanvasWidth / 0.9 * 0.05;
+ var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
- /** @private */
- _handleRefresh : function(url, params, loadOnce){
- if(!loadOnce || !this.loaded){
- var updater = this.bodyEl.getUpdateManager();
- updater.update(url, params, this._setLoaded.createDelegate(this));
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+ maxPaddingLeft = (newCanvasHeight * this.minWidth / this.minHeight - newCanvasWidth) / 2 + maxPaddingLeft;
}
- },
- /**
- * Forces a content refresh from the URL specified in the {@link #setUrl} method.
- * Will fail silently if the setUrl method has not been called.
- * This does not activate the panel, just updates its content.
- */
- refresh : function(){
- if(this.refreshDelegate){
- this.loaded = false;
- this.refreshDelegate();
+ if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+ maxPaddingTop = (newCanvasWidth * this.minHeight / this.minWidth - newCanvasHeight) / 2 + maxPaddingTop;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minWidth && height < this.minHeight)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minHeight && height < this.minWidth)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ // for zoom out
+ paddingLeft > maxPaddingLeft ||
+ paddingRight > maxPaddingLeft ||
+ paddingTop > maxPaddingTop ||
+ paddingBottom > maxPaddingTop ||
+ // for zoom in
+ width > maxWidth ||
+ height > maxHeight
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width < this.minHeight ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minWidth ||
+ height > this.imageEl.OriginHeight
+ )
+ ){
+ return false;
}
+
+ return true;
+
},
+
+ onRotateLeft : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
+
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
- /** @private */
- _setLoaded : function(){
- this.loaded = true;
- },
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
+ return false;
+ }
+
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
- /** @private */
- closeClick : function(e){
- var o = {};
- e.stopEvent();
- this.fireEvent("beforeclose", this, o);
- if(o.cancel !== true){
- this.tabPanel.removeTab(this.id);
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
}
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'left');
+
},
- /**
- * The text displayed in the tooltip for the close icon.
- * @type String
- */
- closeText : "Close this tab"
-});
+
+ onRotateRight : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
+
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-/** @private */
-Roo.TabPanel.prototype.createStrip = function(container){
- var strip = document.createElement("div");
- strip.className = "x-tabs-wrap";
- container.appendChild(strip);
- return strip;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripList = function(strip){
- // div wrapper for retard IE
- // 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 */
-Roo.TabPanel.prototype.createBody = function(container){
- var body = document.createElement("div");
- Roo.id(body, "tab-body");
- Roo.fly(body).addClass("x-tabs-body");
- container.appendChild(body);
- return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
- var body = Roo.getDom(id);
- if(!body){
- body = document.createElement("div");
- body.id = id;
- }
- Roo.fly(body).addClass("x-tabs-item-body");
- bodyEl.insertBefore(body, bodyEl.firstChild);
- return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
- var td = document.createElement("td");
- stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
- //stripEl.appendChild(td);
- if(closable){
- td.className = "x-tabs-closable";
- if(!this.closeTpl){
- this.closeTpl = new Roo.Template(
- '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
- '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
- '<div unselectable="on" class="close-icon"> </div></em></span></a>'
- );
- }
- var el = this.closeTpl.overwrite(td, {"text": text});
- var close = el.getElementsByTagName("div")[0];
- var inner = el.getElementsByTagName("em")[0];
- return {"el": el, "close": close, "inner": inner};
- } else {
- if(!this.tabTpl){
- this.tabTpl = new Roo.Template(
- '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
- '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
- );
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
+ return false;
}
- var el = this.tabTpl.overwrite(td, {"text": text});
- var inner = el.getElementsByTagName("em")[0];
- return {"el": el, "inner": inner};
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-/**
- * @class Roo.Button
- * @extends Roo.util.Observable
- * Simple Button class
- * @cfg {String} text The button text
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
- * @cfg {Object} scope The scope of the handler
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
- * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
- * @cfg {Boolean} hidden True to start hidden (defaults to false)
- * @cfg {Boolean} disabled True to start disabled (defaults to false)
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
- applies if enableToggle = true)
- * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
- an {@link Roo.util.ClickRepeater} config object (defaults to false).
- * @constructor
- * Create a new button
- * @param {Object} config The config object
- */
-Roo.Button = function(renderTo, config)
-{
- if (!config) {
- config = renderTo;
- renderTo = config.renderTo || false;
- }
-
- Roo.apply(this, config);
- this.addEvents({
- /**
- * @event click
- * Fires when this button is clicked
- * @param {Button} this
- * @param {EventObject} e The click event
- */
- "click" : true,
- /**
- * @event toggle
- * Fires when the "pressed" state of this button changes (only if enableToggle = true)
- * @param {Button} this
- * @param {Boolean} pressed
- */
- "toggle" : true,
- /**
- * @event mouseover
- * Fires when the mouse hovers over the button
- * @param {Button} this
- * @param {Event} e The event object
- */
- 'mouseover' : true,
- /**
- * @event mouseout
- * Fires when the mouse exits the button
- * @param {Button} this
- * @param {Event} e The event object
- */
- 'mouseout': true,
- /**
- * @event render
- * Fires when the button is rendered
- * @param {Button} this
- */
- 'render': true
- });
- if(this.menu){
- this.menu = Roo.menu.MenuMgr.get(this.menu);
- }
- // register listeners first!! - so render can be captured..
- Roo.util.Observable.call(this);
- if(renderTo){
- this.render(renderTo);
- }
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'right');
+ },
-
-};
-
-Roo.extend(Roo.Button, Roo.util.Observable, {
- /**
- *
- */
+ onRotateFail : function()
+ {
+ this.errorEl.show(true);
+
+ var _this = this;
+
+ (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
+ },
- /**
- * Read-only. True if this button is hidden
- * @type Boolean
- */
- hidden : false,
- /**
- * Read-only. True if this button is disabled
- * @type Boolean
- */
- disabled : false,
- /**
- * Read-only. True if this button is pressed (only if enableToggle = true)
- * @type Boolean
- */
- pressed : false,
+ draw : function()
+ {
+ this.previewEl.dom.innerHTML = '';
+
+ var canvasEl = document.createElement("canvas");
+
+ var contextEl = canvasEl.getContext("2d");
+
+ canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+ var center = this.imageEl.OriginWidth / 2;
+
+ if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+ canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+ center = this.imageEl.OriginHeight / 2;
+ }
+
+ contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
+
+ contextEl.translate(center, center);
+ contextEl.rotate(this.rotate * Math.PI / 180);
- /**
- * @cfg {Number} tabIndex
- * The DOM tabIndex for this button (defaults to undefined)
- */
- tabIndex : undefined,
+ contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ this.canvasEl = document.createElement("canvas");
+
+ this.contextEl = this.canvasEl.getContext("2d");
+
+ switch (this.rotate) {
+ case 0 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 90 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 180 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 270 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ default :
+ break;
+ }
+
+ this.previewEl.appendChild(this.canvasEl);
+
+ this.setCanvasPosition(false);
+ },
+
+ crop : function()
+ {
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ var imageCanvas = document.createElement("canvas");
+
+ var imageContext = imageCanvas.getContext("2d");
+
+ imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+ imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+
+ var center = imageCanvas.width / 2;
+
+ imageContext.translate(center, center);
+
+ imageContext.rotate(this.rotate * Math.PI / 180);
+
+ imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ var canvas = document.createElement("canvas");
+
+ var context = canvas.getContext("2d");
- /**
- * @cfg {Boolean} enableToggle
- * True to enable pressed/not pressed toggling (defaults to false)
- */
- enableToggle: false,
- /**
- * @cfg {Roo.menu.Menu} menu
- * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
- */
- menu : undefined,
- /**
- * @cfg {String} menuAlign
- * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
- */
- menuAlign : "tl-bl?",
+ canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+
+ canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
- /**
- * @cfg {String} iconCls
- * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
- */
- iconCls : undefined,
- /**
- * @cfg {String} type
- * The button's type, corresponding to the DOM input element type attribute. Either "submit," "reset" or "button" (default).
- */
- type : 'button',
+ switch (this.rotate) {
+ case 0 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+ var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
- // private
- menuClassTarget: 'tr',
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
- /**
- * @cfg {String} clickEvent
- * The type of event to map to the button's event handler (defaults to 'click')
- */
- clickEvent : 'click',
+ if(canvas.width > this.outputMaxWidth) {
+ var scale = this.outputMaxWidth / canvas.width;
+ canvas.width = canvas.width * scale;
+ canvas.height = canvas.height * scale;
+ context.scale(scale, scale);
+ }
- /**
- * @cfg {Boolean} handleMouseEvents
- * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
- */
- handleMouseEvents : true,
+ context.fillStyle = 'white';
+ context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel());
- /**
- * @cfg {String} tooltipType
- * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
- */
- tooltipType : 'qtip',
- /**
- * @cfg {String} cls
- * A CSS class to apply to the button's main element.
- */
-
- /**
- * @cfg {Roo.Template} template (Optional)
- * An {@link Roo.Template} with which to create the Button's main element. This Template must
- * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
- * require code modifications if required elements (e.g. a button) aren't present.
- */
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 90 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
- // private
- render : function(renderTo){
- var btn;
- if(this.hideParent){
- this.parentEl = Roo.get(renderTo);
- }
- if(!this.dhconfig){
- if(!this.template){
- if(!Roo.Button.buttonTemplate){
- // hideous table template
- Roo.Button.buttonTemplate = new Roo.Template(
- '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
- '<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
- "</tr></tbody></table>");
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 180 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
}
- this.template = Roo.Button.buttonTemplate;
- }
- btn = this.template.append(renderTo, [this.text || ' ', this.type], true);
- var btnEl = btn.child("button:first");
- btnEl.on('focus', this.onFocus, this);
- btnEl.on('blur', this.onBlur, this);
- if(this.cls){
- btn.addClass(this.cls);
- }
- if(this.icon){
- btnEl.setStyle('background-image', 'url(' +this.icon +')');
- }
- if(this.iconCls){
- btnEl.addClass(this.iconCls);
- if(!this.cls){
- btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
}
- }
- if(this.tabIndex !== undefined){
- btnEl.dom.tabIndex = this.tabIndex;
- }
- if(this.tooltip){
- if(typeof this.tooltip == 'object'){
- Roo.QuickTips.tips(Roo.apply({
- target: btnEl.id
- }, this.tooltip));
- } else {
- btnEl.dom[this.tooltipType] = this.tooltip;
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
}
- }
- }else{
- btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
- }
- this.el = btn;
- if(this.id){
- this.el.dom.id = this.el.id = this.id;
- }
- if(this.menu){
- this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
- this.menu.on("show", this.onMenuShow, this);
- this.menu.on("hide", this.onMenuHide, this);
- }
- btn.addClass("x-btn");
- if(Roo.isIE && !Roo.isIE7){
- this.autoWidth.defer(1, this);
- }else{
- this.autoWidth();
- }
- if(this.handleMouseEvents){
- btn.on("mouseover", this.onMouseOver, this);
- btn.on("mouseout", this.onMouseOut, this);
- btn.on("mousedown", this.onMouseDown, this);
- }
- btn.on(this.clickEvent, this.onClick, this);
- //btn.on("mouseup", this.onMouseUp, this);
- if(this.hidden){
- this.hide();
- }
- if(this.disabled){
- this.disable();
- }
- Roo.ButtonToggleMgr.register(this);
- if(this.pressed){
- this.el.addClass("x-btn-pressed");
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 270 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ default :
+ break;
}
- if(this.repeat){
- var repeater = new Roo.util.ClickRepeater(btn,
- typeof this.repeat == "object" ? this.repeat : {}
- );
- repeater.on("click", this.onClick, this);
+
+ this.cropData = canvas.toDataURL(this.cropType);
+
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
}
- this.fireEvent('render', this);
+ return;
},
- /**
- * Returns the button's underlying element
- * @return {Roo.Element} The element
- */
- getEl : function(){
- return this.el;
- },
- /**
- * Destroys this Button and removes any listeners.
- */
- destroy : function(){
- Roo.ButtonToggleMgr.unregister(this);
- this.el.removeAllListeners();
- this.purgeListeners();
- this.el.remove();
- },
-
- // private
- autoWidth : function(){
- if(this.el){
- this.el.setWidth("auto");
- if(Roo.isIE7 && Roo.isStrict){
- var ib = this.el.child('button');
- if(ib && ib.getWidth() > 20){
- ib.clip();
- ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
- }
- }
- if(this.minWidth){
- if(this.hidden){
- this.el.beginMeasure();
- }
- if(this.el.getWidth() < this.minWidth){
- this.el.setWidth(this.minWidth);
- }
- if(this.hidden){
- this.el.endMeasure();
- }
+ setThumbBoxSize : function()
+ {
+ var width, height;
+
+ if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+ width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+ height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+
+ this.minWidth = width;
+ this.minHeight = height;
+
+ if(this.rotate == 90 || this.rotate == 270){
+ this.minWidth = height;
+ this.minHeight = width;
}
}
- },
-
- /**
- * Assigns this button's click handler
- * @param {Function} handler The function to call when the button is clicked
- * @param {Object} scope (optional) Scope for the function passed in
- */
- setHandler : function(handler, scope){
- this.handler = handler;
- this.scope = scope;
- },
-
- /**
- * Sets this button's text
- * @param {String} text The button text
- */
- setText : function(text){
- this.text = text;
- if(this.el){
- this.el.child("td.x-btn-center button.x-btn-text").update(text);
+
+ height = this.windowSize;
+ width = Math.ceil(this.minWidth * height / this.minHeight);
+
+ if(this.minWidth > this.minHeight){
+ width = this.windowSize;
+ height = Math.ceil(this.minHeight * width / this.minWidth);
}
- this.autoWidth();
- },
-
- /**
- * Gets the text for this button
- * @return {String} The button text
- */
- getText : function(){
- return this.text;
+
+ this.thumbEl.setStyle({
+ width : width + 'px',
+ height : height + 'px'
+ });
+
+ return;
+
},
- /**
- * Show this button
- */
- show: function(){
- this.hidden = false;
- if(this.el){
- this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
- }
+ setThumbBoxPosition : function()
+ {
+ var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
+ var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
+
+ this.thumbEl.setLeft(x);
+ this.thumbEl.setTop(y);
+
},
- /**
- * Hide this button
- */
- hide: function(){
- this.hidden = true;
- if(this.el){
- this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
+ baseRotateLevel : function()
+ {
+ this.baseRotate = 1;
+
+ if(
+ typeof(this.exif) != 'undefined' &&
+ typeof(this.exif[Roo.panel.Cropbox['tags']['Orientation']]) != 'undefined' &&
+ [1, 3, 6, 8].indexOf(this.exif[Roo.panel.Cropbox['tags']['Orientation']]) != -1
+ ){
+ this.baseRotate = this.exif[Roo.panel.Cropbox['tags']['Orientation']];
}
+
+ this.rotate = Roo.panel.Cropbox['Orientation'][this.baseRotate];
+
},
- /**
- * Convenience function for boolean show/hide
- * @param {Boolean} visible True to show, false to hide
- */
- setVisible: function(visible){
- if(visible) {
- this.show();
- }else{
- this.hide();
- }
- },
- /**
- * Similar to toggle, but does not trigger event.
- * @param {Boolean} state [required] Force a particular state
- */
- setPressed : function(state)
- {
- if(state != this.pressed){
- if(state){
- this.el.addClass("x-btn-pressed");
- this.pressed = true;
- }else{
- this.el.removeClass("x-btn-pressed");
- this.pressed = false;
+ baseScaleLevel : function()
+ {
+ var width, height;
+
+ if(this.isDocument){
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginHeight;
+ }
+
+ return;
+ }
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
}
+
+ return;
}
- },
-
- /**
- * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
- * @param {Boolean} state (optional) Force a particular state
- */
- toggle : function(state){
- state = state === undefined ? !this.pressed : state;
- if(state != this.pressed){
- if(state){
- this.el.addClass("x-btn-pressed");
- this.pressed = true;
- this.fireEvent("toggle", this, true);
- }else{
- this.el.removeClass("x-btn-pressed");
- this.pressed = false;
- this.fireEvent("toggle", this, false);
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
}
- if(this.toggleHandler){
- this.toggleHandler.call(this.scope || this, this, state);
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+ }
+
+ return;
+ }
+
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
}
+
+ }
+
+ if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
+ this.baseScale = width / this.minWidth;
}
+
+ return;
},
-
-
- /**
- * Focus the button
- */
- focus : function(){
- this.el.child('button:first').focus();
+ getScaleLevel : function()
+ {
+ return this.baseScale * Math.pow(1.02, this.scale);
},
- /**
- * Disable this button
- */
- disable : function(){
- if(this.el){
- this.el.addClass("x-btn-disabled");
+ onTouchStart : function(e)
+ {
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
}
- this.disabled = true;
- },
-
- /**
- * Enable this button
- */
- enable : function(){
- if(this.el){
- this.el.removeClass("x-btn-disabled");
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
}
- this.disabled = false;
- },
-
- /**
- * Convenience function for boolean enable/disable
- * @param {Boolean} enabled True to enable, false to disable
- */
- setDisabled : function(v){
- this[v !== true ? "enable" : "disable"]();
- },
-
- // private
- onClick : function(e)
- {
- if(e){
- e.preventDefault();
+
+ if(touches.length == 1){
+ this.onMouseDown(e);
+ return;
}
- if(e.button != 0){
+
+ if(touches.length != 2){
return;
}
- if(!this.disabled){
- if(this.enableToggle){
- this.toggle();
- }
- if(this.menu && !this.menu.isVisible()){
- this.menu.show(this.el, this.menuAlign);
- }
- this.fireEvent("click", this, e);
- if(this.handler){
- this.el.removeClass("x-btn-over");
- this.handler.call(this.scope || this, this, e);
- }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
}
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.startDistance = Math.sqrt(x + y);
+
+ this.startScale = this.scale;
+
+ this.pinching = true;
+ this.dragable = false;
+
},
- // private
- onMouseOver : function(e){
- if(!this.disabled){
- this.el.addClass("x-btn-over");
- this.fireEvent('mouseover', this, e);
+
+ onTouchMove : function(e)
+ {
+ if(!this.pinching && !this.dragable){
+ return;
}
- },
- // private
- onMouseOut : function(e){
- if(!e.within(this.el, true)){
- this.el.removeClass("x-btn-over");
- this.fireEvent('mouseout', this, e);
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
}
- },
- // private
- onFocus : function(e){
- if(!this.disabled){
- this.el.addClass("x-btn-focus");
+
+ if(this.dragable){
+ this.onMouseMove(e);
+ return;
}
- },
- // private
- onBlur : function(e){
- this.el.removeClass("x-btn-focus");
- },
- // private
- onMouseDown : function(e){
- if(!this.disabled && e.button == 0){
- this.el.addClass("x-btn-click");
- Roo.get(document).on('mouseup', this.onMouseUp, this);
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
}
- },
- // private
- onMouseUp : function(e){
- if(e.button == 0){
- this.el.removeClass("x-btn-click");
- Roo.get(document).un('mouseup', this.onMouseUp, this);
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.endDistance = Math.sqrt(x + y);
+
+ this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
}
+
+ this.draw();
+
},
- // private
- onMenuShow : function(e){
- this.el.addClass("x-btn-menu-active");
+
+ onTouchEnd : function(e)
+ {
+ this.pinching = false;
+ this.dragable = false;
+
},
- // private
- onMenuHide : function(e){
- this.el.removeClass("x-btn-menu-active");
- }
-});
-
-// Private utility class used by Button
-Roo.ButtonToggleMgr = function(){
- var groups = {};
-
- function toggleGroup(btn, state){
- if(state){
- var g = groups[btn.toggleGroup];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != btn){
- g[i].toggle(false);
- }
- }
- }
- }
-
- return {
- register : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(!g){
- g = groups[btn.toggleGroup] = [];
- }
- g.push(btn);
- btn.on("toggle", toggleGroup);
- },
-
- unregister : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(g){
- g.remove(btn);
- btn.un("toggle", toggleGroup);
- }
- }
- };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.SplitButton
- * @extends Roo.Button
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
- * click event of the button. Typically this would be used to display a dropdown menu that provides additional
- * options to the primary button action, but any custom handler can provide the arrowclick implementation.
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
- * @cfg {String} arrowTooltip The title attribute of the arrow
- * @constructor
- * Create a new menu button
- * @param {String/HTMLElement/Element} renderTo The element to append the button to
- * @param {Object} config The config object
- */
-Roo.SplitButton = function(renderTo, config){
- Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
- /**
- * @event arrowclick
- * Fires when this button's arrow is clicked
- * @param {SplitButton} this
- * @param {EventObject} e The click event
- */
- this.addEvents({"arrowclick":true});
-};
-
-Roo.extend(Roo.SplitButton, Roo.Button, {
- render : function(renderTo){
- // this is one sweet looking template!
- var tpl = new Roo.Template(
- '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
- '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
- '<tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
- "</tbody></table></td><td>",
- '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
- '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button"> </button></td><td class="x-btn-right"><i> </i></td></tr>',
- "</tbody></table></td></tr></table>"
- );
- var btn = tpl.append(renderTo, [this.text, this.type], true);
- var btnEl = btn.child("button");
- if(this.cls){
- btn.addClass(this.cls);
- }
- if(this.icon){
- btnEl.setStyle('background-image', 'url(' +this.icon +')');
+
+ process : function(file, crop)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
}
- if(this.iconCls){
- btnEl.addClass(this.iconCls);
- if(!this.cls){
- btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
}
}
- this.el = btn;
- if(this.handleMouseEvents){
- btn.on("mouseover", this.onMouseOver, this);
- btn.on("mouseout", this.onMouseOut, this);
- btn.on("mousedown", this.onMouseDown, this);
- btn.on("mouseup", this.onMouseUp, this);
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
}
- btn.on(this.clickEvent, this.onClick, this);
- if(this.tooltip){
- if(typeof this.tooltip == 'object'){
- Roo.QuickTips.tips(Roo.apply({
- target: btnEl.id
- }, this.tooltip));
- } else {
- btnEl.dom[this.tooltipType] = this.tooltip;
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ var blobBin = atob(crop.split(',')[1]);
+ var array = [];
+ for(var i = 0; i < blobBin.length; i++) {
+ array.push(blobBin.charCodeAt(i));
}
+ var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
+ formData.append(this.paramName, croppedFile, file.name);
}
- if(this.arrowTooltip){
- btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
}
- if(this.hidden){
- this.hide();
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
}
- if(this.disabled){
- this.disable();
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
}
- if(this.pressed){
- this.el.addClass("x-btn-pressed");
+
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
}
- if(Roo.isIE && !Roo.isIE7){
- this.autoWidth.defer(1, this);
- }else{
- this.autoWidth();
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
}
- if(this.menu){
- this.menu.on("show", this.onMenuShow, this);
- this.menu.on("hide", this.onMenuHide, this);
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
}
- this.fireEvent('render', this);
- },
-
- // private
- autoWidth : function(){
- if(this.el){
- var tbl = this.el.child("table:first");
- var tbl2 = this.el.child("table:last");
- this.el.setWidth("auto");
- tbl.setWidth("auto");
- if(Roo.isIE7 && Roo.isStrict){
- var ib = this.el.child('button:first');
- if(ib && ib.getWidth() > 20){
- ib.clip();
- ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
- }
- }
- if(this.minWidth){
- if(this.hidden){
- this.el.beginMeasure();
- }
- if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
- tbl.setWidth(this.minWidth-tbl2.getWidth());
- }
- if(this.hidden){
- this.el.endMeasure();
- }
- }
- this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
- }
- },
- /**
- * Sets this button's click handler
- * @param {Function} handler The function to call when the button is clicked
- * @param {Object} scope (optional) Scope for the function passed above
- */
- setHandler : function(handler, scope){
- this.handler = handler;
- this.scope = scope;
- },
-
- /**
- * Sets this button's arrow click handler
- * @param {Function} handler The function to call when the arrow is clicked
- * @param {Object} scope (optional) Scope for the function passed above
- */
- setArrowHandler : function(handler, scope){
- this.arrowHandler = handler;
- this.scope = scope;
+
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
},
- /**
- * Focus the button
- */
- focus : function(){
- if(this.el){
- this.el.child("button:first").focus();
+ prepare : function(file)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
}
- },
-
- // private
- onClick : function(e){
- e.preventDefault();
- if(!this.disabled){
- if(e.getTarget(".x-btn-menu-arrow-wrap")){
- if(this.menu && !this.menu.isVisible()){
- this.menu.show(this.el, this.menuAlign);
- }
- this.fireEvent("arrowclick", this, e);
- if(this.arrowHandler){
- this.arrowHandler.call(this.scope || this, this, e);
+
+ this.file = false;
+ this.exif = {};
+
+ if(typeof(file) === 'string'){
+ this.loadCanvas(file);
+ return;
+ }
+
+ if(!file || !this.urlAPI){
+ return;
+ }
+
+ this.file = file;
+ if(typeof(file.type) != 'undefined' && file.type.length != 0) {
+ this.cropType = file.type;
+ }
+
+ var _this = this;
+
+ if(this.fireEvent('prepare', this, this.file) != false){
+
+ var reader = new FileReader();
+
+ reader.onload = function (e) {
+ if (e.target.error) {
+ Roo.log(e.target.error);
+ return;
}
- }else{
- this.fireEvent("click", this, e);
- if(this.handler){
- this.handler.call(this.scope || this, this, e);
+
+ var buffer = e.target.result,
+ dataView = new DataView(buffer),
+ offset = 2,
+ maxOffset = dataView.byteLength - 4,
+ markerBytes,
+ markerLength;
+
+ if (dataView.getUint16(0) === 0xffd8) {
+ while (offset < maxOffset) {
+ markerBytes = dataView.getUint16(offset);
+
+ if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
+ markerLength = dataView.getUint16(offset + 2) + 2;
+ if (offset + markerLength > dataView.byteLength) {
+ Roo.log('Invalid meta data: Invalid segment size.');
+ break;
+ }
+
+ if(markerBytes == 0xffe1){
+ _this.parseExifData(
+ dataView,
+ offset,
+ markerLength
+ );
+ }
+
+ offset += markerLength;
+
+ continue;
+ }
+
+ break;
+ }
+
}
+
+ var url = _this.urlAPI.createObjectURL(_this.file);
+
+ _this.loadCanvas(url);
+
+ return;
}
+
+ reader.readAsArrayBuffer(this.file);
+
}
+
},
- // private
- onMouseDown : function(e){
- if(!this.disabled){
- Roo.fly(e.getTarget("table")).addClass("x-btn-click");
- }
- },
- // private
- onMouseUp : function(e){
- Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
- }
-});
-
-
-// backwards compat
-Roo.MenuButton = Roo.SplitButton;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.Toolbar
- * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
- * Basic Toolbar class.
- * @constructor
- * Creates a new Toolbar
- * @param {Object} container The config object
- */
-Roo.Toolbar = function(container, buttons, config)
-{
- /// old consturctor format still supported..
- if(container instanceof Array){ // omit the container for later rendering
- buttons = container;
- config = buttons;
- container = null;
- }
- if (typeof(container) == 'object' && container.xtype) {
- config = container;
- container = config.container;
- buttons = config.buttons || []; // not really - use items!!
- }
- var xitems = [];
- if (config && config.items) {
- xitems = config.items;
- delete config.items;
- }
- Roo.apply(this, config);
- this.buttons = buttons;
- if(container){
- this.render(container);
- }
- this.xitems = xitems;
- Roo.each(xitems, function(b) {
- this.add(b);
- }, this);
+ parseExifData : function(dataView, offset, length)
+ {
+ var tiffOffset = offset + 10,
+ littleEndian,
+ dirOffset;
-};
-
-Roo.Toolbar.prototype = {
- /**
- * @cfg {Array} items
- * array of button configs or elements to add (will be converted to a MixedCollection)
- */
- items: false,
- /**
- * @cfg {String/HTMLElement/Element} container
- * The id or element that will contain the toolbar
- */
- // private
- render : function(ct){
- this.el = Roo.get(ct);
- if(this.cls){
- this.el.addClass(this.cls);
- }
- // using a table allows for vertical alignment
- // 100% width is needed by Safari...
- this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
- this.tr = this.el.child("tr", true);
- var autoId = 0;
- this.items = new Roo.util.MixedCollection(false, function(o){
- return o.id || ("item" + (++autoId));
- });
- if(this.buttons){
- this.add.apply(this, this.buttons);
- delete this.buttons;
- }
- },
-
- /**
- * Adds element(s) to the toolbar -- this function takes a variable number of
- * arguments of mixed type and adds them to the toolbar.
- * @param {Mixed} arg1 The following types of arguments are all valid:<br />
- * <ul>
- * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
- * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
- * <li>Field: Any form field (equivalent to {@link #addField})</li>
- * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
- * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
- * Note that there are a few special strings that are treated differently as explained nRoo.</li>
- * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
- * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
- * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
- * </ul>
- * @param {Mixed} arg2
- * @param {Mixed} etc.
- */
- add : function(){
- var a = arguments, l = a.length;
- for(var i = 0; i < l; i++){
- this._add(a[i]);
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
}
- },
- // private..
- _add : function(el) {
- if (el.xtype) {
- el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
+ // Check for the ASCII code for "Exif" (0x45786966):
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
}
-
- if (el.applyTo){ // some kind of form field
- return this.addField(el);
- }
- if (el.render){ // some kind of Toolbar.Item
- return this.addItem(el);
+ if (tiffOffset + 8 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid segment size.');
+ return;
}
- if (typeof el == "string"){ // string
- if(el == "separator" || el == "-"){
- return this.addSeparator();
- }
- if (el == " "){
- return this.addSpacer();
- }
- if(el == "->"){
- return this.addFill();
- }
- return this.addText(el);
-
+ // Check for the two null bytes:
+ if (dataView.getUint16(offset + 8) !== 0x0000) {
+ Roo.log('Invalid Exif data: Missing byte alignment offset.');
+ return;
}
- if(el.tagName){ // element
- return this.addElement(el);
+ // Check the byte alignment:
+ switch (dataView.getUint16(tiffOffset)) {
+ case 0x4949:
+ littleEndian = true;
+ break;
+ case 0x4D4D:
+ littleEndian = false;
+ break;
+ default:
+ Roo.log('Invalid Exif data: Invalid byte alignment marker.');
+ return;
}
- if(typeof el == "object"){ // must be button config?
- return this.addButton(el);
+ // Check for the TIFF tag marker (0x002A):
+ if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
+ Roo.log('Invalid Exif data: Missing TIFF marker.');
+ return;
}
- // and now what?!?!
- return false;
+ // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+ dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+ this.parseExifTags(
+ dataView,
+ tiffOffset,
+ tiffOffset + dirOffset,
+ littleEndian
+ );
},
- /**
- * Add an Xtype element
- * @param {Object} xtype Xtype Object
- * @return {Object} created Object
- */
- addxtype : function(e){
- return this.add(e);
+ parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
+ {
+ var tagsNumber,
+ dirEndOffset,
+ i;
+ if (dirOffset + 6 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory offset.');
+ return;
+ }
+ tagsNumber = dataView.getUint16(dirOffset, littleEndian);
+ dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+ if (dirEndOffset + 4 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory size.');
+ return;
+ }
+ for (i = 0; i < tagsNumber; i += 1) {
+ this.parseExifTag(
+ dataView,
+ tiffOffset,
+ dirOffset + 2 + 12 * i, // tag offset
+ littleEndian
+ );
+ }
+ // Return the offset to the next directory:
+ return dataView.getUint32(dirEndOffset, littleEndian);
},
- /**
- * Returns the Element for this toolbar.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
+ parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
+ {
+ var tag = dataView.getUint16(offset, littleEndian);
+
+ this.exif[tag] = this.getExifValue(
+ dataView,
+ tiffOffset,
+ offset,
+ dataView.getUint16(offset + 2, littleEndian), // tag type
+ dataView.getUint32(offset + 4, littleEndian), // tag length
+ littleEndian
+ );
},
- /**
- * Adds a separator
- * @return {Roo.Toolbar.Item} The separator item
- */
- addSeparator : function(){
- return this.addItem(new Roo.Toolbar.Separator());
- },
-
- /**
- * Adds a spacer element
- * @return {Roo.Toolbar.Spacer} The spacer item
- */
- addSpacer : function(){
- return this.addItem(new Roo.Toolbar.Spacer());
- },
-
- /**
- * Adds a fill element that forces subsequent additions to the right side of the toolbar
- * @return {Roo.Toolbar.Fill} The fill item
- */
- addFill : function(){
- return this.addItem(new Roo.Toolbar.Fill());
- },
-
- /**
- * Adds any standard HTML element to the toolbar
- * @param {String/HTMLElement/Element} el The element or id of the element to add
- * @return {Roo.Toolbar.Item} The element's item
- */
- addElement : function(el){
- return this.addItem(new Roo.Toolbar.Item(el));
- },
- /**
- * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
- * @type Roo.util.MixedCollection
- */
- items : false,
-
- /**
- * Adds any Toolbar.Item or subclass
- * @param {Roo.Toolbar.Item} item
- * @return {Roo.Toolbar.Item} The item
- */
- addItem : function(item){
- var td = this.nextBlock();
- item.render(td);
- this.items.add(item);
- return item;
- },
+ getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
+ {
+ var tagType = Roo.panel.Cropbox.exifTagTypes[type],
+ tagSize,
+ dataOffset,
+ values,
+ i,
+ str,
+ c;
- /**
- * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
- * @param {Object/Array} config A button config or array of configs
- * @return {Roo.Toolbar.Button/Array}
- */
- addButton : function(config){
- if(config instanceof Array){
- var buttons = [];
- for(var i = 0, len = config.length; i < len; i++) {
- buttons.push(this.addButton(config[i]));
- }
- return buttons;
+ if (!tagType) {
+ Roo.log('Invalid Exif data: Invalid tag type.');
+ return;
}
- var b = config;
- if(!(config instanceof Roo.Toolbar.Button)){
- b = config.split ?
- new Roo.Toolbar.SplitButton(config) :
- new Roo.Toolbar.Button(config);
+
+ tagSize = tagType.size * length;
+ // Determine if the value is contained in the dataOffset bytes,
+ // or if the value at the dataOffset is a pointer to the actual data:
+ dataOffset = tagSize > 4 ?
+ tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
+ if (dataOffset + tagSize > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid data offset.');
+ return;
}
- var td = this.nextBlock();
- b.render(td);
- this.items.add(b);
- return b;
+ if (length === 1) {
+ return tagType.getValue(dataView, dataOffset, littleEndian);
+ }
+ values = [];
+ for (i = 0; i < length; i += 1) {
+ values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ }
+
+ if (tagType.ascii) {
+ str = '';
+ // Concatenate the chars:
+ for (i = 0; i < values.length; i += 1) {
+ c = values[i];
+ // Ignore the terminating NULL byte(s):
+ if (c === '\u0000') {
+ break;
+ }
+ str += c;
+ }
+ return str;
+ }
+ return values;
+ }
+
+});
+
+Roo.apply(Roo.panel.Cropbox, {
+ tags : {
+ 'Orientation': 0x0112
},
- /**
- * Adds text to the toolbar
- * @param {String} text The text to add
- * @return {Roo.Toolbar.Item} The element's item
- */
- addText : function(text){
- return this.addItem(new Roo.Toolbar.TextItem(text));
+ Orientation: {
+ 1: 0, //'top-left',
+// 2: 'top-right',
+ 3: 180, //'bottom-right',
+// 4: 'bottom-left',
+// 5: 'left-top',
+ 6: 90, //'right-top',
+// 7: 'right-bottom',
+ 8: 270 //'left-bottom'
},
- /**
- * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
- * @param {Number} index The index where the item is to be inserted
- * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
- * @return {Roo.Toolbar.Button/Item}
- */
- insertButton : function(index, item){
- if(item instanceof Array){
- var buttons = [];
- for(var i = 0, len = item.length; i < len; i++) {
- buttons.push(this.insertButton(index + i, item[i]));
- }
- return buttons;
- }
- if (!(item instanceof Roo.Toolbar.Button)){
- item = new Roo.Toolbar.Button(item);
+ exifTagTypes : {
+ // byte, 8-bit unsigned int:
+ 1: {
+ getValue: function (dataView, dataOffset) {
+ return dataView.getUint8(dataOffset);
+ },
+ size: 1
+ },
+ // ascii, 8-bit byte:
+ 2: {
+ getValue: function (dataView, dataOffset) {
+ return String.fromCharCode(dataView.getUint8(dataOffset));
+ },
+ size: 1,
+ ascii: true
+ },
+ // short, 16 bit int:
+ 3: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint16(dataOffset, littleEndian);
+ },
+ size: 2
+ },
+ // long, 32 bit int:
+ 4: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // rational = two long values, first is numerator, second is denominator:
+ 5: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian) /
+ dataView.getUint32(dataOffset + 4, littleEndian);
+ },
+ size: 8
+ },
+ // slong, 32 bit signed int:
+ 9: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // srational, two slongs, first is numerator, second is denominator:
+ 10: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian) /
+ dataView.getInt32(dataOffset + 4, littleEndian);
+ },
+ size: 8
}
- var td = document.createElement("td");
- this.tr.insertBefore(td, this.tr.childNodes[index]);
- item.render(td);
- this.items.insert(index, item);
- return item;
},
- /**
- * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
- * @param {Object} config
- * @return {Roo.Toolbar.Item} The element's item
- */
- addDom : function(config, returnEl){
- var td = this.nextBlock();
- Roo.DomHelper.overwrite(td, config);
- var ti = new Roo.Toolbar.Item(td.firstChild);
- ti.render(td);
- this.items.add(ti);
- return ti;
- },
+ footer : {
+ STANDARD : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-picture',
+ action : 'picture',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-picture-o"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ DOCUMENT : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-download',
+ action : 'download',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-download"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-crop',
+ action : 'crop',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-crop"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-trash',
+ action : 'trash',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-trash"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ ROTATOR : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
+ ],
+ CENTER : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-center',
+ action : 'center',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : 'CENTER'
+ }
+ ]
+ }
+ ]
+ }
+});
+ /*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.panel.Tab
+ * @extends Roo.util.Observable
+ * A lightweight tab container.
+ * <br><br>
+ * Usage:
+ * <pre><code>
+// basic tabs 1, built from existing content
+var tabs = new Roo.panel.Tab("tabs1");
+tabs.addTab("script", "View Script");
+tabs.addTab("markup", "View Markup");
+tabs.activate("script");
- /**
- * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
- * @type Roo.util.MixedCollection
- */
- fields : false,
-
- /**
- * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
- * Note: the field should not have been rendered yet. For a field that has already been
- * rendered, use {@link #addElement}.
- * @param {Roo.form.Field} field
- * @return {Roo.ToolbarItem}
- */
-
-
- addField : function(field) {
- if (!this.fields) {
- var autoId = 0;
- this.fields = new Roo.util.MixedCollection(false, function(o){
- return o.id || ("item" + (++autoId));
- });
+// more advanced tabs, built from javascript
+var jtabs = new Roo.panel.Tab("jtabs");
+jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
- }
-
- var td = this.nextBlock();
- field.render(td);
- var ti = new Roo.Toolbar.Item(td.firstChild);
- ti.render(td);
- this.items.add(ti);
- this.fields.add(field);
- return ti;
- },
- /**
- * Hide the toolbar
- * @method hide
- */
-
-
- hide : function()
- {
- this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
- this.el.child('div').hide();
- },
- /**
- * Show the toolbar
- * @method show
- */
- show : function()
- {
- this.el.child('div').show();
- },
-
- // private
- nextBlock : function(){
- var td = document.createElement("td");
- this.tr.appendChild(td);
- return td;
- },
+// set up the UpdateManager
+var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
+var updater = tab2.getUpdateManager();
+updater.setDefaultUrl("ajax1.htm");
+tab2.on('activate', updater.refresh, updater, true);
- // private
- destroy : function(){
- if(this.items){ // rendered?
- Roo.destroy.apply(Roo, this.items.items);
- }
- if(this.fields){ // rendered?
- Roo.destroy.apply(Roo, this.fields.items);
- }
- Roo.Element.uncache(this.el, this.tr);
- }
-};
+// Use setUrl for Ajax loading
+var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
+tab3.setUrl("ajax2.htm", null, true);
-/**
- * @class Roo.Toolbar.Item
- * The base class that other classes should extend in order to get some basic common toolbar item functionality.
+// Disabled tab
+var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
+tab4.disable();
+
+jtabs.activate("jtabs-1");
+ * </code></pre>
* @constructor
- * Creates a new Item
- * @param {HTMLElement} el
+ * Create a new TabPanel.
+ * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
+ * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
*/
-Roo.Toolbar.Item = function(el){
- var cfg = {};
- if (typeof (el.xtype) != 'undefined') {
- cfg = el;
- el = cfg.el;
+Roo.panel.Tab = function(container, config){
+ /**
+ * The container element for this TabPanel.
+ * @type Roo.Element
+ */
+ this.el = Roo.get(container, true);
+ if(config){
+ if(typeof config == "boolean"){
+ this.tabPosition = config ? "bottom" : "top";
+ }else{
+ Roo.apply(this, config);
+ }
}
-
- this.el = Roo.getDom(el);
- this.id = Roo.id(this.el);
- this.hidden = false;
-
+ if(this.tabPosition == "bottom"){
+ this.bodyEl = Roo.get(this.createBody(this.el.dom));
+ this.el.addClass("x-tabs-bottom");
+ }
+ this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
+ this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+ this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+ if(Roo.isIE){
+ Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
+ }
+ if(this.tabPosition != "bottom"){
+ /** The body element that contains {@link Roo.panel.TabItem} bodies. +
+ * @type Roo.Element
+ */
+ this.bodyEl = Roo.get(this.createBody(this.el.dom));
+ this.el.addClass("x-tabs-top");
+ }
+ this.items = [];
+
+ this.bodyEl.setStyle("position", "relative");
+
+ this.active = null;
+ this.activateDelegate = this.activate.createDelegate(this);
+
this.addEvents({
- /**
- * @event render
- * Fires when the button is rendered
- * @param {Button} this
- */
- 'render': true
+ /**
+ * @event tabchange
+ * Fires when the active tab changes
+ * @param {Roo.panel.Tab} this
+ * @param {Roo.panel.TabItem} activePanel The new active tab
+ */
+ "tabchange": true,
+ /**
+ * @event beforetabchange
+ * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
+ * @param {Roo.panel.Tab} this
+ * @param {Object} e Set cancel to true on this object to cancel the tab change
+ * @param {Roo.panel.TabItem} tab The tab being changed to
+ */
+ "beforetabchange" : true
});
- Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
+
+ Roo.EventManager.onWindowResize(this.onResize, this);
+ 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.panel.Tab.superclass.constructor.call(this);
};
-Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
-//Roo.Toolbar.Item.prototype = {
-
+
+Roo.extend(Roo.panel.Tab, Roo.util.Observable, {
+ /*
+ *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
+ */
+ tabPosition : "top",
+ /*
+ *@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)
+ */
+ minTabWidth : 40,
+ /*
+ *@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)
+ */
+ preferredTabWidth : 175,
+ /*
+ *@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)
+ */
+ monitorResize : true,
+ /*
+ *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
+ */
+ toolbar : false,
+
/**
- * Get this item's HTML Element
- * @return {HTMLElement}
+ * Creates a new {@link Roo.panel.TabItem} by looking for an existing element with the provided id -- if it's not found it creates one.
+ * @param {String} id The id of the div to use <b>or create</b>
+ * @param {String} text The text for the tab
+ * @param {String} content (optional) Content to put in the TabPanelItem body
+ * @param {Boolean} closable (optional) True to create a close icon on the tab
+ * @return {Roo.panel.TabItem} The created TabPanelItem
*/
- getEl : function(){
- return this.el;
+ addTab : function(id, text, content, closable){
+ var item = new Roo.panel.TabItem(this, id, text, closable);
+ this.addTabItem(item);
+ if(content){
+ item.setContent(content);
+ }
+ return item;
},
- // private
- render : function(td){
-
- this.td = td;
- td.appendChild(this.el);
-
- this.fireEvent('render', this);
- },
-
/**
- * Removes and destroys this item.
+ * Returns the {@link Roo.panel.TabItem} with the specified id/index
+ * @param {String/Number} id The id or index of the TabPanelItem to fetch.
+ * @return {Roo.panel.TabItem}
*/
- destroy : function(){
- this.td.parentNode.removeChild(this.td);
+ getTab : function(id){
+ return this.items[id];
},
-
+
/**
- * Shows this item.
+ * Hides the {@link Roo.panel.TabItem} with the specified id/index
+ * @param {String/Number} id The id or index of the TabPanelItem to hide.
*/
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
+ hideTab : function(id){
+ var t = this.items[id];
+ if(!t.isHidden()){
+ t.setHidden(true);
+ this.hiddenCount++;
+ this.autoSizeTabs();
+ }
},
-
+
/**
- * Hides this item.
+ * "Unhides" the {@link Roo.panel.TabItem} with the specified id/index.
+ * @param {String/Number} id The id or index of the TabPanelItem to unhide.
*/
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
+ unhideTab : function(id){
+ var t = this.items[id];
+ if(t.isHidden()){
+ t.setHidden(false);
+ this.hiddenCount--;
+ this.autoSizeTabs();
+ }
},
-
+
/**
- * Convenience function for boolean show/hide.
- * @param {Boolean} visible true to show/false to hide
+ * Adds an existing {@link Roo.panel.TabItem}.
+ * @param {Roo.panel.TabItem} item The TabPanelItem to add
*/
- setVisible: function(visible){
- if(visible) {
- this.show();
+ addTabItem : function(item){
+ this.items[item.id] = item;
+ this.items.push(item);
+ if(this.resizeTabs){
+ item.setWidth(this.currentTabWidth || this.preferredTabWidth);
+ this.autoSizeTabs();
}else{
- this.hide();
+ item.autoSize();
}
},
-
+
/**
- * Try to focus this item.
+ * Removes a {@link Roo.panel.TabItem}.
+ * @param {String/Number} id The id or index of the TabPanelItem to remove.
*/
- focus : function(){
- Roo.fly(this.el).focus();
+ removeTab : function(id){
+ var items = this.items;
+ var tab = items[id];
+ if(!tab) { return; }
+ var index = items.indexOf(tab);
+ if(this.active == tab && items.length > 1){
+ var newTab = this.getNextAvailable(index);
+ if(newTab) {
+ newTab.activate();
+ }
+ }
+ this.stripEl.dom.removeChild(tab.pnode.dom);
+ if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
+ this.bodyEl.dom.removeChild(tab.bodyEl.dom);
+ }
+ items.splice(index, 1);
+ delete this.items[tab.id];
+ tab.fireEvent("close", tab);
+ tab.purgeListeners();
+ this.autoSizeTabs();
},
-
- /**
- * Disables this item.
- */
- disable : function(){
- Roo.fly(this.td).addClass("x-item-disabled");
- this.disabled = true;
- this.el.disabled = true;
+
+ getNextAvailable : function(start){
+ var items = this.items;
+ var index = start;
+ // look for a next tab that will slide over to
+ // replace the one being removed
+ while(index < items.length){
+ var item = items[++index];
+ if(item && !item.isHidden()){
+ return item;
+ }
+ }
+ // if one isn't found select the previous tab (on the left)
+ index = start;
+ while(index >= 0){
+ var item = items[--index];
+ if(item && !item.isHidden()){
+ return item;
+ }
+ }
+ return null;
},
-
+
/**
- * Enables this item.
+ * Disables a {@link Roo.panel.TabItem}. It cannot be the active tab, if it is this call is ignored.
+ * @param {String/Number} id The id or index of the TabPanelItem to disable.
*/
- enable : function(){
- Roo.fly(this.td).removeClass("x-item-disabled");
- this.disabled = false;
- this.el.disabled = false;
- }
-});
-
-
-/**
- * @class Roo.Toolbar.Separator
- * @extends Roo.Toolbar.Item
- * A simple toolbar separator class
- * @constructor
- * Creates a new Separator
- */
-Roo.Toolbar.Separator = function(cfg){
-
- var s = document.createElement("span");
- s.className = "ytb-sep";
- if (cfg) {
- cfg.el = s;
- }
-
- Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Spacer
- * @extends Roo.Toolbar.Item
- * A simple element that adds extra horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Spacer = function(cfg){
- var s = document.createElement("div");
- s.className = "ytb-spacer";
- if (cfg) {
- cfg.el = s;
- }
- Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Fill
- * @extends Roo.Toolbar.Spacer
- * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
- // private
- render : function(td){
- td.style.width = '100%';
- Roo.Toolbar.Fill.superclass.render.call(this, td);
- }
-});
+ disableTab : function(id){
+ var tab = this.items[id];
+ if(tab && this.active != tab){
+ tab.disable();
+ }
+ },
-/**
- * @class Roo.Toolbar.TextItem
- * @extends Roo.Toolbar.Item
- * A simple class that renders text directly into a toolbar.
- * @constructor
- * Creates a new TextItem
- * @cfg {string} text
- */
-Roo.Toolbar.TextItem = function(cfg){
- var text = cfg || "";
- if (typeof(cfg) == 'object') {
- text = cfg.text || "";
- } else {
- cfg = null;
- }
- var s = document.createElement("span");
- s.className = "ytb-text";
- s.innerHTML = text;
- if (cfg) {
- cfg.el = s;
- }
-
- Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
-
-
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn,
- /**
- * Shows this button
+ /**
+ * Enables a {@link Roo.panel.TabItem} that is disabled.
+ * @param {String/Number} id The id or index of the TabPanelItem to enable.
*/
- show: function(){
- this.hidden = false;
- this.el.style.display = "";
+ enableTab : function(id){
+ var tab = this.items[id];
+ tab.enable();
},
-
+
/**
- * Hides this button
+ * Activates a {@link Roo.panel.TabItem}. The currently active one will be deactivated.
+ * @param {String/Number} id The id or index of the TabPanelItem to activate.
+ * @return {Roo.panel.TabItem} The TabPanelItem.
*/
- hide: function(){
- this.hidden = true;
- this.el.style.display = "none";
- }
-
-});
-
-/**
- * @class Roo.Toolbar.Button
- * @extends Roo.Button
- * A button that renders into a toolbar.
- * @constructor
- * Creates a new Button
- * @param {Object} config A standard {@link Roo.Button} config object
- */
-Roo.Toolbar.Button = function(config){
- Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.Toolbar.Button, Roo.Button,
-{
-
-
- render : function(td){
- this.td = td;
- Roo.Toolbar.Button.superclass.render.call(this, td);
+ activate : function(id){
+ var tab = this.items[id];
+ if(!tab){
+ return null;
+ }
+ if(tab == this.active || tab.disabled){
+ return tab;
+ }
+ var e = {};
+ this.fireEvent("beforetabchange", this, e, tab);
+ if(e.cancel !== true && !tab.disabled){
+ if(this.active){
+ this.active.hide();
+ }
+ this.active = this.items[id];
+ this.active.show();
+ this.fireEvent("tabchange", this, this.active);
+ }
+ return tab;
},
-
+
/**
- * Removes and destroys this button
+ * Gets the active {@link Roo.panel.TabItem}.
+ * @return {Roo.panel.TabItem} The active TabPanelItem or null if none are active.
*/
- destroy : function(){
- Roo.Toolbar.Button.superclass.destroy.call(this);
- this.td.parentNode.removeChild(this.td);
+ getActiveTab : function(){
+ return this.active;
},
-
+
/**
- * Shows this button
+ * Updates the tab body element to fit the height of the container element
+ * for overflow scrolling
+ * @param {Number} targetHeight (optional) Override the starting height from the elements height
*/
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
+ syncHeight : function(targetHeight){
+ var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+ var bm = this.bodyEl.getMargins();
+ var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
+ this.bodyEl.setHeight(newHeight);
+ return newHeight;
},
-
+
+ onResize : function(){
+ if(this.monitorResize){
+ this.autoSizeTabs();
+ }
+ },
+
/**
- * Hides this button
+ * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
*/
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
+ beginUpdate : function(){
+ this.updating = true;
},
/**
- * Disables this item
+ * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
*/
- disable : function(){
- Roo.fly(this.td).addClass("x-item-disabled");
- this.disabled = true;
+ endUpdate : function(){
+ this.updating = false;
+ this.autoSizeTabs();
},
/**
- * Enables this item
+ * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
*/
- enable : function(){
- Roo.fly(this.td).removeClass("x-item-disabled");
- this.disabled = false;
- }
-});
-// backwards compat
-Roo.ToolbarButton = Roo.Toolbar.Button;
-
-/**
- * @class Roo.Toolbar.SplitButton
- * @extends Roo.SplitButton
- * A menu button that renders into a toolbar.
- * @constructor
- * Creates a new SplitButton
- * @param {Object} config A standard {@link Roo.SplitButton} config object
- */
-Roo.Toolbar.SplitButton = function(config){
- Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
- render : function(td){
- this.td = td;
- Roo.Toolbar.SplitButton.superclass.render.call(this, td);
+ autoSizeTabs : function(){
+ var count = this.items.length;
+ var vcount = count - this.hiddenCount;
+ if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
+ return;
+ }
+ var w = Math.max(this.el.getWidth() - this.cpad, 10);
+ var availWidth = Math.floor(w / vcount);
+ var b = this.stripBody;
+ if(b.getWidth() > w){
+ var tabs = this.items;
+ this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
+ if(availWidth < this.minTabWidth){
+ /*if(!this.sleft){ // incomplete scrolling code
+ this.createScrollButtons();
+ }
+ this.showScroll();
+ this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
+ }
+ }else{
+ if(this.currentTabWidth < this.preferredTabWidth){
+ this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
+ }
+ }
},
-
+
/**
- * Removes and destroys this button
+ * Returns the number of tabs in this TabPanel.
+ * @return {Number}
*/
- destroy : function(){
- Roo.Toolbar.SplitButton.superclass.destroy.call(this);
- this.td.parentNode.removeChild(this.td);
- },
-
+ getCount : function(){
+ return this.items.length;
+ },
+
/**
- * Shows this button
+ * Resizes all the tabs to the passed width
+ * @param {Number} The new width
*/
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
+ setTabWidth : function(width){
+ this.currentTabWidth = width;
+ for(var i = 0, len = this.items.length; i < len; i++) {
+ if(!this.items[i].isHidden()) {
+ this.items[i].setWidth(width);
+ }
+ }
},
-
+
/**
- * Hides this button
+ * Destroys this TabPanel
+ * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
*/
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
+ destroy : function(removeEl){
+ Roo.EventManager.removeResizeListener(this.onResize, this);
+ for(var i = 0, len = this.items.length; i < len; i++){
+ this.items[i].purgeListeners();
+ }
+ if(removeEl === true){
+ this.el.update("");
+ this.el.remove();
+ }
}
});
-// backwards compat
-Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.PagingToolbar
- * @extends Roo.Toolbar
- * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
- * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
- * @constructor
- * Create a new PagingToolbar
- * @param {Object} config The config object
- */
-Roo.PagingToolbar = function(el, ds, config)
-{
- // old args format still supported... - xtype is prefered..
- if (typeof(el) == 'object' && el.xtype) {
- // created from xtype...
- config = el;
- ds = el.dataSource;
- el = config.container;
- }
- var items = [];
- if (config.items) {
- items = config.items;
- config.items = [];
+
+/** @private */
+Roo.panel.Tab.prototype.createStripList = function(strip){
+ // div wrapper for retard IE
+ // 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 */
+Roo.panel.Tab.prototype.createBody = function(container){
+ var body = document.createElement("div");
+ Roo.id(body, "tab-body");
+ Roo.fly(body).addClass("x-tabs-body");
+ container.appendChild(body);
+ return body;
+};
+/** @private */
+Roo.panel.Tab.prototype.createItemBody = function(bodyEl, id){
+ var body = Roo.getDom(id);
+ if(!body){
+ body = document.createElement("div");
+ body.id = id;
}
-
- Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
- this.ds = ds;
- this.cursor = 0;
- this.renderButtons(this.el);
- this.bind(ds);
-
- // supprot items array.
-
- Roo.each(items, function(e) {
- this.add(Roo.factory(e));
- },this);
-
+ Roo.fly(body).addClass("x-tabs-item-body");
+ bodyEl.insertBefore(body, bodyEl.firstChild);
+ return body;
};
-
-Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
-
- /**
- * @cfg {String/HTMLElement/Element} container
- * container The id or element that will contain the toolbar
- */
- /**
- * @cfg {Boolean} displayInfo
- * True to display the displayMsg (defaults to false)
- */
-
-
- /**
- * @cfg {Number} pageSize
- * The number of records to display per page (defaults to 20)
- */
- pageSize: 20,
- /**
- * @cfg {String} displayMsg
- * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
- */
- displayMsg : 'Displaying {0} - {1} of {2}',
+/** @private */
+Roo.panel.Tab.prototype.createStripElements = function(stripEl, text, closable){
+ var td = document.createElement("td");
+ stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
+ //stripEl.appendChild(td);
+ if(closable){
+ td.className = "x-tabs-closable";
+ if(!this.closeTpl){
+ this.closeTpl = new Roo.Template(
+ '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
+ '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
+ '<div unselectable="on" class="close-icon"> </div></em></span></a>'
+ );
+ }
+ var el = this.closeTpl.overwrite(td, {"text": text});
+ var close = el.getElementsByTagName("div")[0];
+ var inner = el.getElementsByTagName("em")[0];
+ return {"el": el, "close": close, "inner": inner};
+ } else {
+ if(!this.tabTpl){
+ this.tabTpl = new Roo.Template(
+ '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
+ '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
+ );
+ }
+ var el = this.tabTpl.overwrite(td, {"text": text});
+ var inner = el.getElementsByTagName("em")[0];
+ return {"el": el, "inner": inner};
+ }
+};/**
+ * @class Roo.panel.TabItem
+ * @extends Roo.util.Observable
+ * Represents an individual item (tab plus body) in a TabPanel.
+ * @param {Roo.panel.Tab} tabPanel The {@link Roo.panel.Tab} this TabPanelItem belongs to
+ * @param {String} id The id of this TabPanelItem
+ * @param {String} text The text for the tab of this TabPanelItem
+ * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
+ */
+ Roo.panel.TabItem = function(tabPanel, id, text, closable){
/**
- * @cfg {String} emptyMsg
- * The message to display when no records are found (defaults to "No data to display")
+ * The {@link Roo.panel.Tab} this TabPanelItem belongs to
+ * @type Roo.panel.Tab
*/
- emptyMsg : 'No data to display',
+ this.tabPanel = tabPanel;
/**
- * Customizable piece of the default paging text (defaults to "Page")
+ * The id for this TabPanelItem
* @type String
*/
- beforePageText : "Page",
+ this.id = id;
+ /** @private */
+ this.disabled = false;
+ /** @private */
+ this.text = text;
+ /** @private */
+ this.loaded = false;
+ this.closable = closable;
+
/**
- * Customizable piece of the default paging text (defaults to "of %0")
- * @type String
+ * The body element for this TabPanelItem.
+ * @type Roo.Element
*/
- afterPageText : "of {0}",
+ this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
+ this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
+ this.bodyEl.setStyle("display", "block");
+ this.bodyEl.setStyle("zoom", "1");
+ this.hideAction();
+
+ var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
+ /** @private */
+ this.el = Roo.get(els.el, true);
+ this.inner = Roo.get(els.inner, true);
+ this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
+ this.pnode = Roo.get(els.el.parentNode, true);
+ this.el.on("mousedown", this.onTabMouseDown, this);
+ this.el.on("click", this.onTabClick, this);
+ /** @private */
+ if(closable){
+ var c = Roo.get(els.close, true);
+ c.dom.title = this.closeText;
+ c.addClassOnOver("close-over");
+ c.on("click", this.closeClick, this);
+ }
+
+ this.addEvents({
+ /**
+ * @event activate
+ * Fires when this tab becomes the active tab.
+ * @param {Roo.panel.Tab} tabPanel The parent TabPanel
+ * @param {Roo.panel.TabItem} this
+ */
+ "activate": true,
+ /**
+ * @event beforeclose
+ * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
+ * @param {Roo.panel.TabItem} this
+ * @param {Object} e Set cancel to true on this object to cancel the close.
+ */
+ "beforeclose": true,
+ /**
+ * @event close
+ * Fires when this tab is closed.
+ * @param {Roo.panel.TabItem} this
+ */
+ "close": true,
+ /**
+ * @event deactivate
+ * Fires when this tab is no longer the active tab.
+ * @param {Roo.panel.Tab} tabPanel The parent TabPanel
+ * @param {Roo.panel.TabItem} this
+ */
+ "deactivate" : true
+ });
+ this.hidden = false;
+
+ Roo.panel.TabItem.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.panel.TabItem, Roo.util.Observable, {
+ purgeListeners : function(){
+ Roo.util.Observable.prototype.purgeListeners.call(this);
+ this.el.removeAllListeners();
+ },
/**
- * Customizable piece of the default paging text (defaults to "First Page")
- * @type String
+ * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
*/
- firstText : "First Page",
+ show : function(){
+ this.pnode.addClass("on");
+ this.showAction();
+ if(Roo.isOpera){
+ this.tabPanel.stripWrap.repaint();
+ }
+ this.fireEvent("activate", this.tabPanel, this);
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Previous Page")
- * @type String
+ * Returns true if this tab is the active tab.
+ * @return {Boolean}
*/
- prevText : "Previous Page",
+ isActive : function(){
+ return this.tabPanel.getActiveTab() == this;
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Next Page")
- * @type String
+ * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
*/
- nextText : "Next Page",
+ hide : function(){
+ this.pnode.removeClass("on");
+ this.hideAction();
+ this.fireEvent("deactivate", this.tabPanel, this);
+ },
+
+ hideAction : function(){
+ this.bodyEl.hide();
+ this.bodyEl.setStyle("position", "absolute");
+ this.bodyEl.setLeft("-20000px");
+ this.bodyEl.setTop("-20000px");
+ },
+
+ showAction : function(){
+ this.bodyEl.setStyle("position", "relative");
+ this.bodyEl.setTop("");
+ this.bodyEl.setLeft("");
+ this.bodyEl.show();
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Last Page")
- * @type String
+ * Set the tooltip for the tab.
+ * @param {String} tooltip The tab's tooltip
*/
- lastText : "Last Page",
+ setTooltip : function(text){
+ if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
+ this.textEl.dom.qtip = text;
+ this.textEl.dom.removeAttribute('title');
+ }else{
+ this.textEl.dom.title = text;
+ }
+ },
+
+ onTabClick : function(e){
+ e.preventDefault();
+ this.tabPanel.activate(this.id);
+ },
+
+ onTabMouseDown : function(e){
+ e.preventDefault();
+ this.tabPanel.activate(this.id);
+ },
+
+ getWidth : function(){
+ return this.inner.getWidth();
+ },
+
+ setWidth : function(width){
+ var iwidth = width - this.pnode.getPadding("lr");
+ this.inner.setWidth(iwidth);
+ this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
+ this.pnode.setWidth(width);
+ },
+
/**
- * Customizable piece of the default paging text (defaults to "Refresh")
- * @type String
+ * Show or hide the tab
+ * @param {Boolean} hidden True to hide or false to show.
*/
- refreshText : "Refresh",
+ setHidden : function(hidden){
+ this.hidden = hidden;
+ this.pnode.setStyle("display", hidden ? "none" : "");
+ },
- // private
- renderButtons : function(el){
- Roo.PagingToolbar.superclass.render.call(this, el);
- this.first = this.addButton({
- tooltip: this.firstText,
- cls: "x-btn-icon x-grid-page-first",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["first"])
- });
- this.prev = this.addButton({
- tooltip: this.prevText,
- cls: "x-btn-icon x-grid-page-prev",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["prev"])
- });
- //this.addSeparator();
- this.add(this.beforePageText);
- this.field = Roo.get(this.addDom({
- tag: "input",
- type: "text",
- size: "3",
- value: "1",
- cls: "x-grid-page-number"
- }).el);
- this.field.on("keydown", this.onPagingKeydown, this);
- this.field.on("focus", function(){this.dom.select();});
- this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
- this.field.setHeight(18);
- //this.addSeparator();
- this.next = this.addButton({
- tooltip: this.nextText,
- cls: "x-btn-icon x-grid-page-next",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["next"])
- });
- this.last = this.addButton({
- tooltip: this.lastText,
- cls: "x-btn-icon x-grid-page-last",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["last"])
- });
- //this.addSeparator();
- this.loading = this.addButton({
- tooltip: this.refreshText,
- cls: "x-btn-icon x-grid-loading",
- handler: this.onClick.createDelegate(this, ["refresh"])
- });
+ /**
+ * Returns true if this tab is "hidden"
+ * @return {Boolean}
+ */
+ isHidden : function(){
+ return this.hidden;
+ },
- if(this.displayInfo){
- this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
- }
+ /**
+ * Returns the text for this tab
+ * @return {String}
+ */
+ getText : function(){
+ return this.text;
},
- // private
- updateInfo : function(){
- if(this.displayEl){
- var count = this.ds.getCount();
- var msg = count == 0 ?
- this.emptyMsg :
- String.format(
- this.displayMsg,
- this.cursor+1, this.cursor+count, this.ds.getTotalCount()
- );
- this.displayEl.update(msg);
+ autoSize : function(){
+ //this.el.beginMeasure();
+ this.textEl.setWidth(1);
+ /*
+ * #2804 [new] Tabs in Roojs
+ * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
+ */
+ this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
+ //this.el.endMeasure();
+ },
+
+ /**
+ * Sets the text for the tab (Note: this also sets the tooltip text)
+ * @param {String} text The tab's text and tooltip
+ */
+ setText : function(text){
+ this.text = text;
+ this.textEl.update(text);
+ this.setTooltip(text);
+ if(!this.tabPanel.resizeTabs){
+ this.autoSize();
}
},
+ /**
+ * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
+ */
+ activate : function(){
+ this.tabPanel.activate(this.id);
+ },
- // private
- onLoad : function(ds, r, o){
- this.cursor = o.params ? o.params.start : 0;
- var d = this.getPageData(), ap = d.activePage, ps = d.pages;
+ /**
+ * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
+ */
+ disable : function(){
+ if(this.tabPanel.active != this){
+ this.disabled = true;
+ this.pnode.addClass("disabled");
+ }
+ },
- this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
- this.field.dom.value = ap;
- this.first.setDisabled(ap == 1);
- this.prev.setDisabled(ap == 1);
- this.next.setDisabled(ap == ps);
- this.last.setDisabled(ap == ps);
- this.loading.enable();
- this.updateInfo();
+ /**
+ * Enables this TabPanelItem if it was previously disabled.
+ */
+ enable : function(){
+ this.disabled = false;
+ this.pnode.removeClass("disabled");
},
- // private
- getPageData : function(){
- var total = this.ds.getTotalCount();
- return {
- total : total,
- activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
- pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
- };
+ /**
+ * Sets the content for this TabPanelItem.
+ * @param {String} content The content
+ * @param {Boolean} loadScripts true to look for and load scripts
+ */
+ setContent : function(content, loadScripts){
+ this.bodyEl.update(content, loadScripts);
},
- // private
- onLoadError : function(){
- this.loading.enable();
+ /**
+ * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ getUpdateManager : function(){
+ return this.bodyEl.getUpdateManager();
},
- // private
- onPagingKeydown : function(e){
- var k = e.getKey();
- var d = this.getPageData();
- if(k == e.RETURN){
- var v = this.field.dom.value, pageNum;
- if(!v || isNaN(pageNum = parseInt(v, 10))){
- this.field.dom.value = d.activePage;
- return;
- }
- pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
- this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
- e.stopEvent();
- }
- else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
- {
- var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
- this.field.dom.value = pageNum;
- this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
- e.stopEvent();
- }
- else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
- {
- var v = this.field.dom.value, pageNum;
- var increment = (e.shiftKey) ? 10 : 1;
- if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
- increment *= -1;
- }
- if(!v || isNaN(pageNum = parseInt(v, 10))) {
- this.field.dom.value = d.activePage;
- return;
- }
- else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
- {
- this.field.dom.value = parseInt(v, 10) + increment;
- pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
- this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
- }
- e.stopEvent();
+ /**
+ * Set a URL to be used to load the content for this TabPanelItem.
+ * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
+ * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+ * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.un('activate', this.refreshDelegate);
}
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on("activate", this.refreshDelegate);
+ return this.bodyEl.getUpdateManager();
},
- // private
- beforeLoad : function(){
- if(this.loading){
- this.loading.disable();
+ /** @private */
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.bodyEl.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
}
},
+
/**
- * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
- * @param {String} which (first|prev|next|last|refresh) which button to press.
- *
+ * Forces a content refresh from the URL specified in the {@link #setUrl} method.
+ * Will fail silently if the setUrl method has not been called.
+ * This does not activate the panel, just updates its content.
*/
- // private
- onClick : function(which){
- var ds = this.ds;
- switch(which){
- case "first":
- ds.load({params:{start: 0, limit: this.pageSize}});
- break;
- case "prev":
- ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
- break;
- case "next":
- ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
- break;
- case "last":
- var total = ds.getTotalCount();
- var extra = total % this.pageSize;
- var lastStart = extra ? (total - extra) : total-this.pageSize;
- ds.load({params:{start: lastStart, limit: this.pageSize}});
- break;
- case "refresh":
- ds.load({params:{start: this.cursor, limit: this.pageSize}});
- break;
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
}
},
- /**
- * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
- * @param {Roo.data.Store} store The data store to unbind
- */
- unbind : function(ds){
- ds.un("beforeload", this.beforeLoad, this);
- ds.un("load", this.onLoad, this);
- ds.un("loadexception", this.onLoadError, this);
- ds.un("remove", this.updateInfo, this);
- ds.un("add", this.updateInfo, this);
- this.ds = undefined;
+ /** @private */
+ _setLoaded : function(){
+ this.loaded = true;
},
+ /** @private */
+ closeClick : function(e){
+ var o = {};
+ e.stopEvent();
+ this.fireEvent("beforeclose", this, o);
+ if(o.cancel !== true){
+ this.tabPanel.removeTab(this.id);
+ }
+ },
/**
- * Binds the paging toolbar to the specified {@link Roo.data.Store}
- * @param {Roo.data.Store} store The data store to bind
+ * The text displayed in the tooltip for the close icon.
+ * @type String
*/
- bind : function(ds){
- ds.on("beforeload", this.beforeLoad, this);
- ds.on("load", this.onLoad, this);
- ds.on("loadexception", this.onLoadError, this);
- ds.on("remove", this.updateInfo, this);
- ds.on("add", this.updateInfo, this);
- this.ds = ds;
- }
-});/*
+ closeText : "Close this tab"
+});
+
+/** @private */
+Roo.panel.Tab.prototype.createStrip = function(container){
+ var strip = document.createElement("div");
+ strip.className = "x-tabs-wrap";
+ container.appendChild(strip);
+ return strip;
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.Resizable
+ * @class Roo.Button
* @extends Roo.util.Observable
- * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
- * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
- * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
- * the element will be wrapped for you automatically.</p>
- * <p>Here is the list of valid resize handles:</p>
- * <pre>
-Value Description
------- -------------------
- 'n' north
- 's' south
- 'e' east
- 'w' west
- 'nw' northwest
- 'sw' southwest
- 'se' southeast
- 'ne' northeast
- 'hd' horizontal drag
- 'all' all
-</pre>
- * <p>Here's an example showing the creation of a typical Resizable:</p>
- * <pre><code>
-var resizer = new Roo.Resizable("element-id", {
- handles: 'all',
- minWidth: 200,
- minHeight: 100,
- maxWidth: 500,
- maxHeight: 400,
- pinned: true
-});
-resizer.on("resize", myHandler);
-</code></pre>
- * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
- * resizer.east.setDisplayed(false);</p>
- * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
- * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
- * resize operation's new size (defaults to [0, 0])
- * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
- * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
- * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
- * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
- * @cfg {Boolean} enabled False to disable resizing (defaults to true)
- * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
- * @cfg {Number} width The width of the element in pixels (defaults to null)
- * @cfg {Number} height The height of the element in pixels (defaults to null)
- * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
- * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
- * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
- * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
- * @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
- * in favor of the handles config option (defaults to false)
- * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
- * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
- * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
- * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
- * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
- * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
- * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
- * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
- * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
- * @constructor
- * Create a new resizable component
- * @param {String/HTMLElement/Roo.Element} el The id or element to resize
- * @param {Object} config configuration options
- */
-Roo.Resizable = function(el, config)
-{
- this.el = Roo.get(el);
-
- if(config && config.wrap){
- config.resizeChild = this.el;
- this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
- this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
- this.el.setStyle("overflow", "hidden");
- this.el.setPositioning(config.resizeChild.getPositioning());
- config.resizeChild.clearPositioning();
- if(!config.width || !config.height){
- var csize = config.resizeChild.getSize();
- this.el.setSize(csize.width, csize.height);
- }
- if(config.pinned && !config.adjustments){
- config.adjustments = "auto";
- }
- }
-
- this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
- this.proxy.unselectable();
- this.proxy.enableDisplayMode('block');
-
- Roo.apply(this, config);
-
- if(this.pinned){
- this.disableTrackOver = true;
- this.el.addClass("x-resizable-pinned");
- }
- // if the element isn't positioned, make it relative
- var position = this.el.getStyle("position");
- if(position != "absolute" && position != "fixed"){
- this.el.setStyle("position", "relative");
- }
- if(!this.handles){ // no handles passed, must be legacy style
- this.handles = 's,e,se';
- if(this.multiDirectional){
- this.handles += ',n,w';
- }
- }
- if(this.handles == "all"){
- this.handles = "n s e w ne nw se sw";
- }
- var hs = this.handles.split(/\s*?[,;]\s*?| /);
- var ps = Roo.Resizable.positions;
- for(var i = 0, len = hs.length; i < len; i++){
- if(hs[i] && ps[hs[i]]){
- var pos = ps[hs[i]];
- this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
- }
- }
- // legacy
- this.corner = this.southeast;
-
- // updateBox = the box can move..
- if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
- this.updateBox = true;
- }
-
- this.activeHandle = null;
-
- if(this.resizeChild){
- if(typeof this.resizeChild == "boolean"){
- this.resizeChild = Roo.get(this.el.dom.firstChild, true);
- }else{
- this.resizeChild = Roo.get(this.resizeChild, true);
- }
+ * Simple Button class
+ * @cfg {String} text The button text
+ * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
+ * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
+ * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
+ * @cfg {Object} scope The scope of the handler
+ * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
+ * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
+ * @cfg {Boolean} hidden True to start hidden (defaults to false)
+ * @cfg {Boolean} disabled True to start disabled (defaults to false)
+ * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+ * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
+ applies if enableToggle = true)
+ * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
+ * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
+ an {@link Roo.util.ClickRepeater} config object (defaults to false).
+ * @constructor
+ * Create a new button
+ * @param {Object} config The config object
+ */
+Roo.Button = function(renderTo, config)
+{
+ if (!config) {
+ config = renderTo;
+ renderTo = config.renderTo || false;
}
- if(this.adjustments == "auto"){
- var rc = this.resizeChild;
- var hw = this.west, he = this.east, hn = this.north, hs = this.south;
- if(rc && (hw || hn)){
- rc.position("relative");
- rc.setLeft(hw ? hw.el.getWidth() : 0);
- rc.setTop(hn ? hn.el.getHeight() : 0);
- }
- this.adjustments = [
- (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
- (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
- ];
- }
-
- if(this.draggable){
- this.dd = this.dynamic ?
- this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
- this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
- }
-
- // public events
+ Roo.apply(this, config);
this.addEvents({
/**
- * @event beforeresize
- * Fired before resize is allowed. Set enabled to false to cancel resize.
- * @param {Roo.Resizable} this
- * @param {Roo.EventObject} e The mousedown event
- */
- "beforeresize" : true,
+ * @event click
+ * Fires when this button is clicked
+ * @param {Button} this
+ * @param {EventObject} e The click event
+ */
+ "click" : true,
/**
- * @event resizing
- * Fired a resizing.
- * @param {Roo.Resizable} this
- * @param {Number} x The new x position
- * @param {Number} y The new y position
- * @param {Number} w The new w width
- * @param {Number} h The new h hight
- * @param {Roo.EventObject} e The mouseup event
- */
- "resizing" : true,
+ * @event toggle
+ * Fires when the "pressed" state of this button changes (only if enableToggle = true)
+ * @param {Button} this
+ * @param {Boolean} pressed
+ */
+ "toggle" : true,
/**
- * @event resize
- * Fired after a resize.
- * @param {Roo.Resizable} this
- * @param {Number} width The new width
- * @param {Number} height The new height
- * @param {Roo.EventObject} e The mouseup event
- */
- "resize" : true
+ * @event mouseover
+ * Fires when the mouse hovers over the button
+ * @param {Button} this
+ * @param {Event} e The event object
+ */
+ 'mouseover' : true,
+ /**
+ * @event mouseout
+ * Fires when the mouse exits the button
+ * @param {Button} this
+ * @param {Event} e The event object
+ */
+ 'mouseout': true,
+ /**
+ * @event render
+ * Fires when the button is rendered
+ * @param {Button} this
+ */
+ 'render': true
});
-
- if(this.width !== null && this.height !== null){
- this.resizeTo(this.width, this.height);
- }else{
- this.updateChildSize();
+ if(this.menu){
+ this.menu = Roo.menu.MenuMgr.get(this.menu);
}
- if(Roo.isIE){
- this.el.dom.style.zoom = 1;
+ // register listeners first!! - so render can be captured..
+ Roo.util.Observable.call(this);
+ if(renderTo){
+ this.render(renderTo);
}
- Roo.Resizable.superclass.constructor.call(this);
+
+
};
-Roo.extend(Roo.Resizable, Roo.util.Observable, {
- resizeChild : false,
- adjustments : [0, 0],
- minWidth : 5,
- minHeight : 5,
- maxWidth : 10000,
- maxHeight : 10000,
- enabled : true,
- animate : false,
- duration : .35,
- dynamic : false,
- handles : false,
- multiDirectional : false,
- disableTrackOver : false,
- easing : 'easeOutStrong',
- widthIncrement : 0,
- heightIncrement : 0,
- pinned : false,
- width : null,
- height : null,
- preserveRatio : false,
- transparent: false,
- minX: 0,
- minY: 0,
- draggable: false,
+Roo.extend(Roo.Button, Roo.util.Observable, {
+ /**
+ *
+ */
+
+ /**
+ * Read-only. True if this button is hidden
+ * @type Boolean
+ */
+ hidden : false,
+ /**
+ * Read-only. True if this button is disabled
+ * @type Boolean
+ */
+ disabled : false,
+ /**
+ * Read-only. True if this button is pressed (only if enableToggle = true)
+ * @type Boolean
+ */
+ pressed : false,
- /**
- * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
- */
- constrainTo: undefined,
- /**
- * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
- */
- resizeRegion: undefined,
+ /**
+ * @cfg {Number} tabIndex
+ * The DOM tabIndex for this button (defaults to undefined)
+ */
+ tabIndex : undefined,
+ /**
+ * @cfg {Boolean} enableToggle
+ * True to enable pressed/not pressed toggling (defaults to false)
+ */
+ enableToggle: false,
+ /**
+ * @cfg {Roo.menu.Menu} menu
+ * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
+ */
+ menu : undefined,
+ /**
+ * @cfg {String} menuAlign
+ * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
+ */
+ menuAlign : "tl-bl?",
/**
- * Perform a manual resize
- * @param {Number} width
- * @param {Number} height
+ * @cfg {String} iconCls
+ * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
*/
- resizeTo : function(width, height){
- this.el.setSize(width, height);
- this.updateChildSize();
- this.fireEvent("resize", this, width, height, null);
- },
+ iconCls : undefined,
+ /**
+ * @cfg {String} type
+ * The button's type, corresponding to the DOM input element type attribute. Either "submit," "reset" or "button" (default).
+ */
+ type : 'button',
// private
- startSizing : function(e, handle){
- this.fireEvent("beforeresize", this, e);
- if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
-
- if(!this.overlay){
- this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: " "});
- this.overlay.unselectable();
- this.overlay.enableDisplayMode("block");
- this.overlay.on("mousemove", this.onMouseMove, this);
- this.overlay.on("mouseup", this.onMouseUp, this);
- }
- this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
+ menuClassTarget: 'tr',
- this.resizing = true;
- this.startBox = this.el.getBox();
- this.startPoint = e.getXY();
- this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
- (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+ /**
+ * @cfg {String} clickEvent
+ * The type of event to map to the button's event handler (defaults to 'click')
+ */
+ clickEvent : 'click',
- this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- this.overlay.show();
+ /**
+ * @cfg {Boolean} handleMouseEvents
+ * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
+ */
+ handleMouseEvents : true,
- if(this.constrainTo) {
- var ct = Roo.get(this.constrainTo);
- this.resizeRegion = ct.getRegion().adjust(
- ct.getFrameWidth('t'),
- ct.getFrameWidth('l'),
- -ct.getFrameWidth('b'),
- -ct.getFrameWidth('r')
- );
- }
+ /**
+ * @cfg {String} tooltipType
+ * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
+ */
+ tooltipType : 'qtip',
- this.proxy.setStyle('visibility', 'hidden'); // workaround display none
- this.proxy.show();
- this.proxy.setBox(this.startBox);
- if(!this.dynamic){
- this.proxy.setStyle('visibility', 'visible');
- }
- }
- },
+ /**
+ * @cfg {String} cls
+ * A CSS class to apply to the button's main element.
+ */
+
+ /**
+ * @cfg {Roo.Template} template (Optional)
+ * An {@link Roo.Template} with which to create the Button's main element. This Template must
+ * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
+ * require code modifications if required elements (e.g. a button) aren't present.
+ */
// private
- onMouseDown : function(handle, e){
- if(this.enabled){
- e.stopEvent();
- this.activeHandle = handle;
- this.startSizing(e, handle);
+ render : function(renderTo){
+ var btn;
+ if(this.hideParent){
+ this.parentEl = Roo.get(renderTo);
}
- },
-
- // private
- onMouseUp : function(e){
- var size = this.resizeElement();
- this.resizing = false;
- this.handleOut();
- this.overlay.hide();
- this.proxy.hide();
- this.fireEvent("resize", this, size.width, size.height, e);
- },
-
- // private
- updateChildSize : function(){
-
- if(this.resizeChild){
- var el = this.el;
- var child = this.resizeChild;
- var adj = this.adjustments;
- if(el.dom.offsetWidth){
- var b = el.getSize(true);
- child.setSize(b.width+adj[0], b.height+adj[1]);
+ if(!this.dhconfig){
+ if(!this.template){
+ if(!Roo.Button.buttonTemplate){
+ // hideous table template
+ Roo.Button.buttonTemplate = new Roo.Template(
+ '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
+ '<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
+ "</tr></tbody></table>");
+ }
+ this.template = Roo.Button.buttonTemplate;
}
- // Second call here for IE
- // The first call enables instant resizing and
- // the second call corrects scroll bars if they
- // exist
- if(Roo.isIE){
- setTimeout(function(){
- if(el.dom.offsetWidth){
- var b = el.getSize(true);
- child.setSize(b.width+adj[0], b.height+adj[1]);
- }
- }, 10);
+ btn = this.template.append(renderTo, [this.text || ' ', this.type], true);
+ var btnEl = btn.child("button:first");
+ btnEl.on('focus', this.onFocus, this);
+ btnEl.on('blur', this.onBlur, this);
+ if(this.cls){
+ btn.addClass(this.cls);
+ }
+ if(this.icon){
+ btnEl.setStyle('background-image', 'url(' +this.icon +')');
+ }
+ if(this.iconCls){
+ btnEl.addClass(this.iconCls);
+ if(!this.cls){
+ btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+ }
}
+ if(this.tabIndex !== undefined){
+ btnEl.dom.tabIndex = this.tabIndex;
+ }
+ if(this.tooltip){
+ if(typeof this.tooltip == 'object'){
+ Roo.QuickTips.tips(Roo.apply({
+ target: btnEl.id
+ }, this.tooltip));
+ } else {
+ btnEl.dom[this.tooltipType] = this.tooltip;
+ }
+ }
+ }else{
+ btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
}
- },
-
- // private
- snap : function(value, inc, min){
- if(!inc || !value) {
- return value;
+ this.el = btn;
+ if(this.id){
+ this.el.dom.id = this.el.id = this.id;
}
- var newValue = value;
- var m = value % inc;
- if(m > 0){
- if(m > (inc/2)){
- newValue = value + (inc-m);
- }else{
- newValue = value - m;
- }
+ if(this.menu){
+ this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
+ this.menu.on("show", this.onMenuShow, this);
+ this.menu.on("hide", this.onMenuHide, this);
}
- return Math.max(min, newValue);
- },
-
- // private
- resizeElement : function(){
- var box = this.proxy.getBox();
- if(this.updateBox){
- this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
+ btn.addClass("x-btn");
+ if(Roo.isIE && !Roo.isIE7){
+ this.autoWidth.defer(1, this);
}else{
- this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
+ this.autoWidth();
}
- this.updateChildSize();
- if(!this.dynamic){
- this.proxy.hide();
+ if(this.handleMouseEvents){
+ btn.on("mouseover", this.onMouseOver, this);
+ btn.on("mouseout", this.onMouseOut, this);
+ btn.on("mousedown", this.onMouseDown, this);
}
- return box;
- },
-
- // private
- constrain : function(v, diff, m, mx){
- if(v - diff < m){
- diff = v - m;
- }else if(v - diff > mx){
- diff = mx - v;
+ btn.on(this.clickEvent, this.onClick, this);
+ //btn.on("mouseup", this.onMouseUp, this);
+ if(this.hidden){
+ this.hide();
}
- return diff;
+ if(this.disabled){
+ this.disable();
+ }
+ Roo.ButtonToggleMgr.register(this);
+ if(this.pressed){
+ this.el.addClass("x-btn-pressed");
+ }
+ if(this.repeat){
+ var repeater = new Roo.util.ClickRepeater(btn,
+ typeof this.repeat == "object" ? this.repeat : {}
+ );
+ repeater.on("click", this.onClick, this);
+ }
+
+ this.fireEvent('render', this);
+
+ },
+ /**
+ * Returns the button's underlying element
+ * @return {Roo.Element} The element
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+ /**
+ * Destroys this Button and removes any listeners.
+ */
+ destroy : function(){
+ Roo.ButtonToggleMgr.unregister(this);
+ this.el.removeAllListeners();
+ this.purgeListeners();
+ this.el.remove();
},
// private
- onMouseMove : function(e){
-
- if(this.enabled){
- try{// try catch so if something goes wrong the user doesn't get hung
-
- if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
- return;
- }
-
- //var curXY = this.startPoint;
- var curSize = this.curSize || this.startBox;
- var x = this.startBox.x, y = this.startBox.y;
- var ox = x, oy = y;
- var w = curSize.width, h = curSize.height;
- var ow = w, oh = h;
- var mw = this.minWidth, mh = this.minHeight;
- var mxw = this.maxWidth, mxh = this.maxHeight;
- var wi = this.widthIncrement;
- var hi = this.heightIncrement;
-
- var eventXY = e.getXY();
- var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
- var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
-
- var pos = this.activeHandle.position;
-
- switch(pos){
- case "east":
- w += diffX;
- w = Math.min(Math.max(mw, w), mxw);
- break;
-
- case "south":
- h += diffY;
- h = Math.min(Math.max(mh, h), mxh);
- break;
- case "southeast":
- w += diffX;
- h += diffY;
- w = Math.min(Math.max(mw, w), mxw);
- h = Math.min(Math.max(mh, h), mxh);
- break;
- case "north":
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- break;
- case "hdrag":
-
- if (wi) {
- var adiffX = Math.abs(diffX);
- var sub = (adiffX % wi); // how much
- if (sub > (wi/2)) { // far enough to snap
- diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
- } else {
- // remove difference..
- diffX = (diffX > 0) ? diffX-sub : diffX+sub;
- }
- }
- x += diffX;
- x = Math.max(this.minX, x);
- break;
- case "west":
- diffX = this.constrain(w, diffX, mw, mxw);
- x += diffX;
- w -= diffX;
- break;
- case "northeast":
- w += diffX;
- w = Math.min(Math.max(mw, w), mxw);
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- break;
- case "northwest":
- diffX = this.constrain(w, diffX, mw, mxw);
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- x += diffX;
- w -= diffX;
- break;
- case "southwest":
- diffX = this.constrain(w, diffX, mw, mxw);
- h += diffY;
- h = Math.min(Math.max(mh, h), mxh);
- x += diffX;
- w -= diffX;
- break;
- }
-
- var sw = this.snap(w, wi, mw);
- var sh = this.snap(h, hi, mh);
- if(sw != w || sh != h){
- switch(pos){
- case "northeast":
- y -= sh - h;
- break;
- case "north":
- y -= sh - h;
- break;
- case "southwest":
- x -= sw - w;
- break;
- case "west":
- x -= sw - w;
- break;
- case "northwest":
- x -= sw - w;
- y -= sh - h;
- break;
+ autoWidth : function(){
+ if(this.el){
+ this.el.setWidth("auto");
+ if(Roo.isIE7 && Roo.isStrict){
+ var ib = this.el.child('button');
+ if(ib && ib.getWidth() > 20){
+ ib.clip();
+ ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
}
- w = sw;
- h = sh;
}
-
- if(this.preserveRatio){
- switch(pos){
- case "southeast":
- case "east":
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- w = ow * (h/oh);
- break;
- case "south":
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- break;
- case "northeast":
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- break;
- case "north":
- var tw = w;
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- x += (tw - w) / 2;
- break;
- case "southwest":
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- var tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case "west":
- var th = h;
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- y += (th - h) / 2;
- var tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case "northwest":
- var tw = w;
- var th = h;
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- w = ow * (h/oh);
- y += th - h;
- x += tw - w;
- break;
-
+ if(this.minWidth){
+ if(this.hidden){
+ this.el.beginMeasure();
+ }
+ if(this.el.getWidth() < this.minWidth){
+ this.el.setWidth(this.minWidth);
+ }
+ if(this.hidden){
+ this.el.endMeasure();
}
}
- if (pos == 'hdrag') {
- w = ow;
- }
- this.proxy.setBounds(x, y, w, h);
- if(this.dynamic){
- this.resizeElement();
- }
- }catch(e){}
}
- this.fireEvent("resizing", this, x, y, w, h, e);
},
- // private
- handleOver : function(){
- if(this.enabled){
- this.el.addClass("x-resizable-over");
- }
+ /**
+ * Assigns this button's click handler
+ * @param {Function} handler The function to call when the button is clicked
+ * @param {Object} scope (optional) Scope for the function passed in
+ */
+ setHandler : function(handler, scope){
+ this.handler = handler;
+ this.scope = scope;
},
-
- // private
- handleOut : function(){
- if(!this.resizing){
- this.el.removeClass("x-resizable-over");
+
+ /**
+ * Sets this button's text
+ * @param {String} text The button text
+ */
+ setText : function(text){
+ this.text = text;
+ if(this.el){
+ this.el.child("td.x-btn-center button.x-btn-text").update(text);
}
+ this.autoWidth();
},
-
+
/**
- * Returns the element this component is bound to.
- * @return {Roo.Element}
+ * Gets the text for this button
+ * @return {String} The button text
*/
- getEl : function(){
- return this.el;
+ getText : function(){
+ return this.text;
},
-
+
/**
- * Returns the resizeChild element (or null).
- * @return {Roo.Element}
+ * Show this button
*/
- getResizeChild : function(){
- return this.resizeChild;
+ show: function(){
+ this.hidden = false;
+ if(this.el){
+ this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
+ }
},
- groupHandler : function()
- {
-
+
+ /**
+ * Hide this button
+ */
+ hide: function(){
+ this.hidden = true;
+ if(this.el){
+ this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
+ }
},
+
/**
- * Destroys this resizable. If the element was wrapped and
- * removeEl is not true then the element remains.
- * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+ * Convenience function for boolean show/hide
+ * @param {Boolean} visible True to show, false to hide
*/
- destroy : function(removeEl){
- this.proxy.remove();
- if(this.overlay){
- this.overlay.removeAllListeners();
- this.overlay.remove();
+ setVisible: function(visible){
+ if(visible) {
+ this.show();
+ }else{
+ this.hide();
}
- var ps = Roo.Resizable.positions;
- for(var k in ps){
- if(typeof ps[k] != "function" && this[ps[k]]){
- var h = this[ps[k]];
- h.el.removeAllListeners();
- h.el.remove();
+ },
+ /**
+ * Similar to toggle, but does not trigger event.
+ * @param {Boolean} state [required] Force a particular state
+ */
+ setPressed : function(state)
+ {
+ if(state != this.pressed){
+ if(state){
+ this.el.addClass("x-btn-pressed");
+ this.pressed = true;
+ }else{
+ this.el.removeClass("x-btn-pressed");
+ this.pressed = false;
}
}
- if(removeEl){
- this.el.update("");
- this.el.remove();
+ },
+
+ /**
+ * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
+ * @param {Boolean} state (optional) Force a particular state
+ */
+ toggle : function(state){
+ state = state === undefined ? !this.pressed : state;
+ if(state != this.pressed){
+ if(state){
+ this.el.addClass("x-btn-pressed");
+ this.pressed = true;
+ this.fireEvent("toggle", this, true);
+ }else{
+ this.el.removeClass("x-btn-pressed");
+ this.pressed = false;
+ this.fireEvent("toggle", this, false);
+ }
+ if(this.toggleHandler){
+ this.toggleHandler.call(this.scope || this, this, state);
+ }
}
- }
-});
-
-// private
-// hash to map config positions to true positions
-Roo.Resizable.positions = {
- n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast",
- hd: "hdrag"
-};
-
-// private
-Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
- if(!this.tpl){
- // only initialize the template if resizable is used
- var tpl = Roo.DomHelper.createTemplate(
- {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
- );
- tpl.compile();
- Roo.Resizable.Handle.prototype.tpl = tpl;
- }
- this.position = pos;
- this.rz = rz;
- // show north drag fro topdra
- var handlepos = pos == 'hdrag' ? 'north' : pos;
+ },
- this.el = this.tpl.append(rz.el.dom, [handlepos], true);
- if (pos == 'hdrag') {
- this.el.setStyle('cursor', 'pointer');
- }
- this.el.unselectable();
- if(transparent){
- this.el.setOpacity(0);
- }
- this.el.on("mousedown", this.onMouseDown, this);
- if(!disableTrackOver){
- this.el.on("mouseover", this.onMouseOver, this);
- this.el.on("mouseout", this.onMouseOut, this);
- }
-};
+
+
+ /**
+ * Focus the button
+ */
+ focus : function(){
+ this.el.child('button:first').focus();
+ },
+
+ /**
+ * Disable this button
+ */
+ disable : function(){
+ if(this.el){
+ this.el.addClass("x-btn-disabled");
+ }
+ this.disabled = true;
+ },
+
+ /**
+ * Enable this button
+ */
+ enable : function(){
+ if(this.el){
+ this.el.removeClass("x-btn-disabled");
+ }
+ this.disabled = false;
+ },
-// private
-Roo.Resizable.Handle.prototype = {
- afterResize : function(rz){
- Roo.log('after?');
- // do nothing
+ /**
+ * Convenience function for boolean enable/disable
+ * @param {Boolean} enabled True to enable, false to disable
+ */
+ setDisabled : function(v){
+ this[v !== true ? "enable" : "disable"]();
},
+
// private
- onMouseDown : function(e){
- this.rz.onMouseDown(this, e);
+ onClick : function(e)
+ {
+ if(e){
+ e.preventDefault();
+ }
+ if(e.button != 0){
+ return;
+ }
+ if(!this.disabled){
+ if(this.enableToggle){
+ this.toggle();
+ }
+ if(this.menu && !this.menu.isVisible()){
+ this.menu.show(this.el, this.menuAlign);
+ }
+ this.fireEvent("click", this, e);
+ if(this.handler){
+ this.el.removeClass("x-btn-over");
+ this.handler.call(this.scope || this, this, e);
+ }
+ }
},
// private
onMouseOver : function(e){
- this.rz.handleOver(this, e);
+ if(!this.disabled){
+ this.el.addClass("x-btn-over");
+ this.fireEvent('mouseover', this, e);
+ }
},
// private
onMouseOut : function(e){
- this.rz.handleOut(this, e);
- }
-};/*
+ if(!e.within(this.el, true)){
+ this.el.removeClass("x-btn-over");
+ this.fireEvent('mouseout', this, e);
+ }
+ },
+ // private
+ onFocus : function(e){
+ if(!this.disabled){
+ this.el.addClass("x-btn-focus");
+ }
+ },
+ // private
+ onBlur : function(e){
+ this.el.removeClass("x-btn-focus");
+ },
+ // private
+ onMouseDown : function(e){
+ if(!this.disabled && e.button == 0){
+ this.el.addClass("x-btn-click");
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
+ }
+ },
+ // private
+ onMouseUp : function(e){
+ if(e.button == 0){
+ this.el.removeClass("x-btn-click");
+ Roo.get(document).un('mouseup', this.onMouseUp, this);
+ }
+ },
+ // private
+ onMenuShow : function(e){
+ this.el.addClass("x-btn-menu-active");
+ },
+ // private
+ onMenuHide : function(e){
+ this.el.removeClass("x-btn-menu-active");
+ }
+});
+
+// Private utility class used by Button
+Roo.ButtonToggleMgr = function(){
+ var groups = {};
+
+ function toggleGroup(btn, state){
+ if(state){
+ var g = groups[btn.toggleGroup];
+ for(var i = 0, l = g.length; i < l; i++){
+ if(g[i] != btn){
+ g[i].toggle(false);
+ }
+ }
+ }
+ }
+
+ return {
+ register : function(btn){
+ if(!btn.toggleGroup){
+ return;
+ }
+ var g = groups[btn.toggleGroup];
+ if(!g){
+ g = groups[btn.toggleGroup] = [];
+ }
+ g.push(btn);
+ btn.on("toggle", toggleGroup);
+ },
+
+ unregister : function(btn){
+ if(!btn.toggleGroup){
+ return;
+ }
+ var g = groups[btn.toggleGroup];
+ if(g){
+ g.remove(btn);
+ btn.un("toggle", toggleGroup);
+ }
+ }
+ };
+}();/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
- * @class Roo.Editor
- * @extends Roo.Component
- * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
+ * @class Roo.SplitButton
+ * @extends Roo.Button
+ * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
+ * click event of the button. Typically this would be used to display a dropdown menu that provides additional
+ * options to the primary button action, but any custom handler can provide the arrowclick implementation.
+ * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
+ * @cfg {String} arrowTooltip The title attribute of the arrow
* @constructor
- * Create a new Editor
- * @param {Roo.form.Field} field The Field object (or descendant)
+ * Create a new menu button
+ * @param {String/HTMLElement/Element} renderTo The element to append the button to
* @param {Object} config The config object
*/
-Roo.Editor = function(field, config){
- Roo.Editor.superclass.constructor.call(this, config);
- this.field = field;
- this.addEvents({
- /**
- * @event beforestartedit
- * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
- * false from the handler of this event.
- * @param {Editor} this
- * @param {Roo.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The field value being set
- */
- "beforestartedit" : true,
- /**
- * @event startedit
- * Fires when this editor is displayed
- * @param {Roo.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The starting field value
- */
- "startedit" : true,
- /**
- * @event beforecomplete
- * Fires after a change has been made to the field, but before the change is reflected in the underlying
- * field. Saving the change to the field can be canceled by returning false from the handler of this event.
- * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
- * event will not fire since no edit actually occurred.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "beforecomplete" : true,
- /**
- * @event complete
- * Fires after editing is complete and any changed value has been written to the underlying field.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "complete" : true,
- /**
- * @event specialkey
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
- * {@link Roo.EventObject#getKey} to determine which key was pressed.
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event object
- */
- "specialkey" : true
- });
-};
-
-Roo.extend(Roo.Editor, Roo.Component, {
- /**
- * @cfg {Boolean/String} autosize
- * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
- * or "height" to adopt the height only (defaults to false)
- */
- /**
- * @cfg {Boolean} revertInvalid
- * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
- * validation fails (defaults to true)
- */
- /**
- * @cfg {Boolean} ignoreNoChange
- * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
- * the value has not changed (defaults to false). Applies only to string values - edits for other data types
- * will never be ignored.
- */
- /**
- * @cfg {Boolean} hideEl
- * False to keep the bound element visible while the editor is displayed (defaults to true)
- */
- /**
- * @cfg {Mixed} value
- * The data value of the underlying field (defaults to "")
- */
- value : "",
- /**
- * @cfg {String} alignment
- * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
- */
- alignment: "c-c?",
- /**
- * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
- * for bottom-right shadow (defaults to "frame")
- */
- shadow : "frame",
- /**
- * @cfg {Boolean} constrain True to constrain the editor to the viewport
- */
- constrain : false,
- /**
- * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
- */
- completeOnEnter : false,
- /**
- * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
- */
- cancelOnEsc : false,
+Roo.SplitButton = function(renderTo, config){
+ Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
/**
- * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
+ * @event arrowclick
+ * Fires when this button's arrow is clicked
+ * @param {SplitButton} this
+ * @param {EventObject} e The click event
*/
- updateEl : false,
+ this.addEvents({"arrowclick":true});
+};
- // private
- onRender : function(ct, position){
- this.el = new Roo.Layer({
- shadow: this.shadow,
- cls: "x-editor",
- parentEl : ct,
- shim : this.shim,
- shadowOffset:4,
- id: this.id,
- constrain: this.constrain
- });
- this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
- if(this.field.msgTarget != 'title'){
- this.field.msgTarget = 'qtip';
+Roo.extend(Roo.SplitButton, Roo.Button, {
+ render : function(renderTo){
+ // this is one sweet looking template!
+ var tpl = new Roo.Template(
+ '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
+ '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
+ '<tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
+ "</tbody></table></td><td>",
+ '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
+ '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button"> </button></td><td class="x-btn-right"><i> </i></td></tr>',
+ "</tbody></table></td></tr></table>"
+ );
+ var btn = tpl.append(renderTo, [this.text, this.type], true);
+ var btnEl = btn.child("button");
+ if(this.cls){
+ btn.addClass(this.cls);
}
- this.field.render(this.el);
- if(Roo.isGecko){
- this.field.el.dom.setAttribute('autocomplete', 'off');
+ if(this.icon){
+ btnEl.setStyle('background-image', 'url(' +this.icon +')');
}
- this.field.on("specialkey", this.onSpecialKey, this);
- if(this.swallowKeys){
- this.field.el.swallowEvent(['keydown','keypress']);
+ if(this.iconCls){
+ btnEl.addClass(this.iconCls);
+ if(!this.cls){
+ btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+ }
}
- this.field.show();
- this.field.on("blur", this.onBlur, this);
- if(this.field.grow){
- this.field.on("autosize", this.el.sync, this.el, {delay:1});
+ this.el = btn;
+ if(this.handleMouseEvents){
+ btn.on("mouseover", this.onMouseOver, this);
+ btn.on("mouseout", this.onMouseOut, this);
+ btn.on("mousedown", this.onMouseDown, this);
+ btn.on("mouseup", this.onMouseUp, this);
}
- },
-
- onSpecialKey : function(field, e)
- {
- //Roo.log('editor onSpecialKey');
- if(this.completeOnEnter && e.getKey() == e.ENTER){
- e.stopEvent();
- this.completeEdit();
- return;
+ btn.on(this.clickEvent, this.onClick, this);
+ if(this.tooltip){
+ if(typeof this.tooltip == 'object'){
+ Roo.QuickTips.tips(Roo.apply({
+ target: btnEl.id
+ }, this.tooltip));
+ } else {
+ btnEl.dom[this.tooltipType] = this.tooltip;
+ }
}
- // do not fire special key otherwise it might hide close the editor...
- if(e.getKey() == e.ENTER){
- return;
+ if(this.arrowTooltip){
+ btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
}
- if(this.cancelOnEsc && e.getKey() == e.ESC){
- this.cancelEdit();
- return;
- }
- this.fireEvent('specialkey', field, e);
-
- },
-
- /**
- * Starts the editing process and shows the editor.
- * @param {String/HTMLElement/Element} el The element to edit
- * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
- * to the innerHTML of el.
- */
- startEdit : function(el, value){
- if(this.editing){
- this.completeEdit();
+ if(this.hidden){
+ this.hide();
}
- this.boundEl = Roo.get(el);
- var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
- if(!this.rendered){
- this.render(this.parentEl || document.body);
+ if(this.disabled){
+ this.disable();
}
- if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
- return;
+ if(this.pressed){
+ this.el.addClass("x-btn-pressed");
}
- this.startValue = v;
- this.field.setValue(v);
- if(this.autoSize){
- var sz = this.boundEl.getSize();
- switch(this.autoSize){
- case "width":
- this.setSize(sz.width, "");
- break;
- case "height":
- this.setSize("", sz.height);
- break;
- default:
- this.setSize(sz.width, sz.height);
- }
+ if(Roo.isIE && !Roo.isIE7){
+ this.autoWidth.defer(1, this);
+ }else{
+ this.autoWidth();
}
- this.el.alignTo(this.boundEl, this.alignment);
- this.editing = true;
- if(Roo.QuickTips){
- Roo.QuickTips.disable();
+ if(this.menu){
+ this.menu.on("show", this.onMenuShow, this);
+ this.menu.on("hide", this.onMenuHide, this);
}
- this.show();
+ this.fireEvent('render', this);
},
- /**
- * Sets the height and width of this editor.
- * @param {Number} width The new width
- * @param {Number} height The new height
- */
- setSize : function(w, h){
- this.field.setSize(w, h);
+ // private
+ autoWidth : function(){
if(this.el){
- this.el.sync();
- }
+ var tbl = this.el.child("table:first");
+ var tbl2 = this.el.child("table:last");
+ this.el.setWidth("auto");
+ tbl.setWidth("auto");
+ if(Roo.isIE7 && Roo.isStrict){
+ var ib = this.el.child('button:first');
+ if(ib && ib.getWidth() > 20){
+ ib.clip();
+ ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
+ }
+ }
+ if(this.minWidth){
+ if(this.hidden){
+ this.el.beginMeasure();
+ }
+ if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
+ tbl.setWidth(this.minWidth-tbl2.getWidth());
+ }
+ if(this.hidden){
+ this.el.endMeasure();
+ }
+ }
+ this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
+ }
},
-
/**
- * Realigns the editor to the bound field based on the current alignment config value.
+ * Sets this button's click handler
+ * @param {Function} handler The function to call when the button is clicked
+ * @param {Object} scope (optional) Scope for the function passed above
*/
- realign : function(){
- this.el.alignTo(this.boundEl, this.alignment);
+ setHandler : function(handler, scope){
+ this.handler = handler;
+ this.scope = scope;
},
-
+
/**
- * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
+ * Sets this button's arrow click handler
+ * @param {Function} handler The function to call when the arrow is clicked
+ * @param {Object} scope (optional) Scope for the function passed above
*/
- completeEdit : function(remainVisible){
- if(!this.editing){
- return;
- }
- var v = this.getValue();
- if(this.revertInvalid !== false && !this.field.isValid()){
- v = this.startValue;
- this.cancelEdit(true);
- }
- if(String(v) === String(this.startValue) && this.ignoreNoChange){
- this.editing = false;
- this.hide();
- return;
- }
- if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
- this.editing = false;
- if(this.updateEl && this.boundEl){
- this.boundEl.update(v);
- }
- if(remainVisible !== true){
- this.hide();
- }
- this.fireEvent("complete", this, v, this.startValue);
- }
- },
-
- // private
- onShow : function(){
- this.el.show();
- if(this.hideEl !== false){
- this.boundEl.hide();
- }
- this.field.show();
- if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
- this.fixIEFocus = true;
- this.deferredFocus.defer(50, this);
- }else{
- this.field.focus();
- }
- this.fireEvent("startedit", this.boundEl, this.startValue);
- },
-
- deferredFocus : function(){
- if(this.editing){
- this.field.focus();
- }
+ setArrowHandler : function(handler, scope){
+ this.arrowHandler = handler;
+ this.scope = scope;
},
-
+
/**
- * Cancels the editing process and hides the editor without persisting any changes. The field value will be
- * reverted to the original starting value.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
- * cancel (defaults to false)
+ * Focus the button
*/
- cancelEdit : function(remainVisible){
- if(this.editing){
- this.setValue(this.startValue);
- if(remainVisible !== true){
- this.hide();
- }
+ focus : function(){
+ if(this.el){
+ this.el.child("button:first").focus();
}
},
// private
- onBlur : function(){
- if(this.allowBlur !== true && this.editing){
- this.completeEdit();
+ onClick : function(e){
+ e.preventDefault();
+ if(!this.disabled){
+ if(e.getTarget(".x-btn-menu-arrow-wrap")){
+ if(this.menu && !this.menu.isVisible()){
+ this.menu.show(this.el, this.menuAlign);
+ }
+ this.fireEvent("arrowclick", this, e);
+ if(this.arrowHandler){
+ this.arrowHandler.call(this.scope || this, this, e);
+ }
+ }else{
+ this.fireEvent("click", this, e);
+ if(this.handler){
+ this.handler.call(this.scope || this, this, e);
+ }
+ }
}
},
-
// private
- onHide : function(){
- if(this.editing){
- this.completeEdit();
- return;
- }
- this.field.blur();
- if(this.field.collapse){
- this.field.collapse();
- }
- this.el.hide();
- if(this.hideEl !== false){
- this.boundEl.show();
- }
- if(Roo.QuickTips){
- Roo.QuickTips.enable();
+ onMouseDown : function(e){
+ if(!this.disabled){
+ Roo.fly(e.getTarget("table")).addClass("x-btn-click");
}
},
+ // private
+ onMouseUp : function(e){
+ Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
+ }
+});
- /**
- * Sets the data value of the editor
- * @param {Mixed} value Any valid value supported by the underlying field
- */
- setValue : function(v){
- this.field.setValue(v);
- },
- /**
- * Gets the data value of the editor
- * @return {Mixed} The data value
- */
- getValue : function(){
- return this.field.getValue();
- }
-});/*
+// backwards compat
+Roo.MenuButton = Roo.SplitButton;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
- * @class Roo.BasicDialog
- * @extends Roo.util.Observable
- * @parent none builder
- * Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
- * <pre><code>
-var dlg = new Roo.BasicDialog("my-dlg", {
- height: 200,
- width: 300,
- minHeight: 100,
- minWidth: 150,
- modal: true,
- proxyDrag: true,
- shadow: true
-});
-dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
-dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
-dlg.addButton('Cancel', dlg.hide, dlg);
-dlg.show();
-</code></pre>
- <b>A Dialog should always be a direct child of the body element.</b>
- * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
- * @cfg {String} title Default text to display in the title bar (defaults to null)
- * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
- * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
- * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
- * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
- * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
- * (defaults to null with no animation)
- * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
- * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
- * property for valid values (defaults to 'all')
- * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
- * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
- * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
- * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
- * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
- * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
- * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
- * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
- * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
- * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
- * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
- * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
- * draggable = true (defaults to false)
- * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- * shadow (defaults to false)
- * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
- * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
- * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
- * @cfg {Array} buttons Array of buttons
- * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
+ * @class Roo.Toolbar
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
+ * Basic Toolbar class.
* @constructor
- * Create a new BasicDialog.
- * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
- * @param {Object} config Configuration options
- */
-Roo.BasicDialog = function(el, config){
- this.el = Roo.get(el);
- var dh = Roo.DomHelper;
- if(!this.el && config && config.autoCreate){
- if(typeof config.autoCreate == "object"){
- if(!config.autoCreate.id){
- config.autoCreate.id = el;
- }
- this.el = dh.append(document.body,
- config.autoCreate, true);
- }else{
- this.el = dh.append(document.body,
- {tag: "div", id: el, style:'visibility:hidden;'}, true);
- }
+ * Creates a new Toolbar
+ * @param {Object} container The config object
+ */
+Roo.Toolbar = function(container, buttons, config)
+{
+ /// old consturctor format still supported..
+ if(container instanceof Array){ // omit the container for later rendering
+ buttons = container;
+ config = buttons;
+ container = null;
}
- el = this.el;
- el.setDisplayed(true);
- el.hide = this.hideAction;
- this.id = el.id;
- el.addClass("x-dlg");
-
- Roo.apply(this, config);
-
- this.proxy = el.createProxy("x-dlg-proxy");
- this.proxy.hide = this.hideAction;
- this.proxy.setOpacity(.5);
- this.proxy.hide();
-
- if(config.width){
- el.setWidth(config.width);
- }
- if(config.height){
- el.setHeight(config.height);
- }
- this.size = el.getSize();
- if(typeof config.x != "undefined" && typeof config.y != "undefined"){
- this.xy = [config.x,config.y];
- }else{
- this.xy = el.getCenterXY(true);
- }
- /** The header element @type Roo.Element */
- this.header = el.child("> .x-dlg-hd");
- /** The body element @type Roo.Element */
- this.body = el.child("> .x-dlg-bd");
- /** The footer element @type Roo.Element */
- this.footer = el.child("> .x-dlg-ft");
-
- if(!this.header){
- this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
- }
- if(!this.body){
- this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
- }
-
- this.header.unselectable();
- if(this.title){
- this.header.update(this.title);
- }
- // this element allows the dialog to be focused for keyboard event
- this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
- this.focusEl.swallowEvent("click", true);
-
- this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
-
- // wrap the body and footer for special rendering
- this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
- if(this.footer){
- this.bwrap.dom.appendChild(this.footer.dom);
- }
-
- this.bg = this.el.createChild({
- tag: "div", cls:"x-dlg-bg",
- html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center"> </div></div></div>'
- });
- this.centerBg = this.bg.child("div.x-dlg-bg-center");
-
-
- if(this.autoScroll !== false && !this.autoTabs){
- this.body.setStyle("overflow", "auto");
- }
-
- this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
-
- if(this.closable !== false){
- this.el.addClass("x-dlg-closable");
- this.close = this.toolbox.createChild({cls:"x-dlg-close"});
- this.close.on("click", this.closeClick, this);
- this.close.addClassOnOver("x-dlg-close-over");
- }
- if(this.collapsible !== false){
- this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
- this.collapseBtn.on("click", this.collapseClick, this);
- this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
- this.header.on("dblclick", this.collapseClick, this);
- }
- if(this.resizable !== false){
- this.el.addClass("x-dlg-resizable");
- this.resizer = new Roo.Resizable(el, {
- minWidth: this.minWidth || 80,
- minHeight:this.minHeight || 80,
- handles: this.resizeHandles || "all",
- pinned: true
- });
- this.resizer.on("beforeresize", this.beforeResize, this);
- this.resizer.on("resize", this.onResize, this);
- }
- if(this.draggable !== false){
- el.addClass("x-dlg-draggable");
- if (!this.proxyDrag) {
- var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
- }
- else {
- var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
- }
- dd.setHandleElId(this.header.id);
- dd.endDrag = this.endMove.createDelegate(this);
- dd.startDrag = this.startMove.createDelegate(this);
- dd.onDrag = this.onDrag.createDelegate(this);
- dd.scroll = false;
- this.dd = dd;
- }
- if(this.modal){
- this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
- this.mask.enableDisplayMode("block");
- this.mask.hide();
- this.el.addClass("x-dlg-modal");
- }
- if(this.shadow){
- this.shadow = new Roo.Shadow({
- mode : typeof this.shadow == "string" ? this.shadow : "sides",
- offset : this.shadowOffset
- });
- }else{
- this.shadowOffset = 0;
- }
- if(Roo.useShims && this.shim !== false){
- this.shim = this.el.createShim();
- this.shim.hide = this.hideAction;
- this.shim.hide();
- }else{
- this.shim = false;
- }
- if(this.autoTabs){
- this.initTabs();
+ if (typeof(container) == 'object' && container.xtype) {
+ config = container;
+ container = config.container;
+ buttons = config.buttons || []; // not really - use items!!
}
- if (this.buttons) {
- var bts= this.buttons;
- this.buttons = [];
- Roo.each(bts, function(b) {
- this.addButton(b);
- }, this);
+ var xitems = [];
+ if (config && config.items) {
+ xitems = config.items;
+ delete config.items;
}
+ Roo.apply(this, config);
+ this.buttons = buttons;
+ if(container){
+ this.render(container);
+ }
+ this.xitems = xitems;
+ Roo.each(xitems, function(b) {
+ this.add(b);
+ }, this);
- this.addEvents({
- /**
- * @event keydown
- * Fires when a key is pressed
- * @param {Roo.BasicDialog} this
- * @param {Roo.EventObject} e
- */
- "keydown" : true,
- /**
- * @event move
- * Fires when this dialog is moved by the user.
- * @param {Roo.BasicDialog} this
- * @param {Number} x The new page X
- * @param {Number} y The new page Y
- */
- "move" : true,
- /**
- * @event resize
- * Fires when this dialog is resized by the user.
- * @param {Roo.BasicDialog} this
- * @param {Number} width The new width
- * @param {Number} height The new height
- */
- "resize" : true,
- /**
- * @event beforehide
- * Fires before this dialog is hidden.
- * @param {Roo.BasicDialog} this
- */
- "beforehide" : true,
- /**
- * @event hide
- * Fires when this dialog is hidden.
- * @param {Roo.BasicDialog} this
- */
- "hide" : true,
- /**
- * @event beforeshow
- * Fires before this dialog is shown.
- * @param {Roo.BasicDialog} this
- */
- "beforeshow" : true,
- /**
- * @event show
- * Fires when this dialog is shown.
- * @param {Roo.BasicDialog} this
- */
- "show" : true
- });
- el.on("keydown", this.onKeyDown, this);
- el.on("mousedown", this.toFront, this);
- Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
- this.el.hide();
- Roo.DialogManager.register(this);
- Roo.BasicDialog.superclass.constructor.call(this);
};
-Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
- shadowOffset: Roo.isIE ? 6 : 5,
- minHeight: 80,
- minWidth: 200,
- minButtonWidth: 75,
- defaultButton: null,
- buttonAlign: "right",
- tabTag: 'div',
- firstShow: true,
-
+Roo.Toolbar.prototype = {
/**
- * Sets the dialog title text
- * @param {String} text The title text to display
- * @return {Roo.BasicDialog} this
+ * @cfg {Array} items
+ * array of button configs or elements to add (will be converted to a MixedCollection)
*/
- setTitle : function(text){
- this.header.update(text);
- return this;
- },
-
- // private
- closeClick : function(){
- this.hide();
- },
-
- // private
- collapseClick : function(){
- this[this.collapsed ? "expand" : "collapse"]();
- },
-
+ items: false,
/**
- * Collapses the dialog to its minimized state (only the title bar is visible).
- * Equivalent to the user clicking the collapse dialog button.
+ * @cfg {String/HTMLElement/Element} container
+ * The id or element that will contain the toolbar
*/
- collapse : function(){
- if(!this.collapsed){
- this.collapsed = true;
- this.el.addClass("x-dlg-collapsed");
- this.restoreHeight = this.el.getHeight();
- this.resizeTo(this.el.getWidth(), this.header.getHeight());
+ // private
+ render : function(ct){
+ this.el = Roo.get(ct);
+ if(this.cls){
+ this.el.addClass(this.cls);
+ }
+ // using a table allows for vertical alignment
+ // 100% width is needed by Safari...
+ this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
+ this.tr = this.el.child("tr", true);
+ var autoId = 0;
+ this.items = new Roo.util.MixedCollection(false, function(o){
+ return o.id || ("item" + (++autoId));
+ });
+ if(this.buttons){
+ this.add.apply(this, this.buttons);
+ delete this.buttons;
}
},
/**
- * Expands a collapsed dialog back to its normal state. Equivalent to the user
- * clicking the expand dialog button.
+ * Adds element(s) to the toolbar -- this function takes a variable number of
+ * arguments of mixed type and adds them to the toolbar.
+ * @param {Mixed} arg1 The following types of arguments are all valid:<br />
+ * <ul>
+ * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
+ * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
+ * <li>Field: Any form field (equivalent to {@link #addField})</li>
+ * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
+ * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
+ * Note that there are a few special strings that are treated differently as explained nRoo.</li>
+ * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
+ * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
+ * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
+ * </ul>
+ * @param {Mixed} arg2
+ * @param {Mixed} etc.
*/
- expand : function(){
- if(this.collapsed){
- this.collapsed = false;
- this.el.removeClass("x-dlg-collapsed");
- this.resizeTo(this.el.getWidth(), this.restoreHeight);
+ add : function(){
+ var a = arguments, l = a.length;
+ for(var i = 0; i < l; i++){
+ this._add(a[i]);
}
},
-
- /**
- * Reinitializes the tabs component, clearing out old tabs and finding new ones.
- * @return {Roo.TabPanel} The tabs component
- */
- initTabs : function(){
- var tabs = this.getTabs();
- while(tabs.getTab(0)){
- tabs.removeTab(0);
+ // private..
+ _add : function(el) {
+
+ if (el.xtype) {
+ el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
}
- this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
- var dom = el.dom;
- tabs.addTab(Roo.id(dom), dom.title);
- dom.title = "";
- });
- tabs.activate(0);
- return tabs;
+
+ if (el.applyTo){ // some kind of form field
+ return this.addField(el);
+ }
+ if (el.render){ // some kind of Toolbar.Item
+ return this.addItem(el);
+ }
+ if (typeof el == "string"){ // string
+ if(el == "separator" || el == "-"){
+ return this.addSeparator();
+ }
+ if (el == " "){
+ return this.addSpacer();
+ }
+ if(el == "->"){
+ return this.addFill();
+ }
+ return this.addText(el);
+
+ }
+ if(el.tagName){ // element
+ return this.addElement(el);
+ }
+ if(typeof el == "object"){ // must be button config?
+ return this.addButton(el);
+ }
+ // and now what?!?!
+ return false;
+
},
-
- // private
- beforeResize : function(){
- this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
+
+ /**
+ * Add an Xtype element
+ * @param {Object} xtype Xtype Object
+ * @return {Object} created Object
+ */
+ addxtype : function(e){
+ return this.add(e);
},
-
- // private
- onResize : function(){
- this.refreshSize();
- this.syncBodyHeight();
- this.adjustAssets();
- this.focus();
- this.fireEvent("resize", this, this.size.width, this.size.height);
+
+ /**
+ * Returns the Element for this toolbar.
+ * @return {Roo.Element}
+ */
+ getEl : function(){
+ return this.el;
},
-
- // private
- onKeyDown : function(e){
- if(this.isVisible()){
- this.fireEvent("keydown", this, e);
- }
+
+ /**
+ * Adds a separator
+ * @return {Roo.Toolbar.Item} The separator item
+ */
+ addSeparator : function(){
+ return this.addItem(new Roo.Toolbar.Separator());
},
/**
- * Resizes the dialog.
- * @param {Number} width
- * @param {Number} height
- * @return {Roo.BasicDialog} this
+ * Adds a spacer element
+ * @return {Roo.Toolbar.Spacer} The spacer item
*/
- resizeTo : function(width, height){
- this.el.setSize(width, height);
- this.size = {width: width, height: height};
- this.syncBodyHeight();
- if(this.fixedcenter){
- this.center();
- }
- if(this.isVisible()){
- this.constrainXY();
- this.adjustAssets();
- }
- this.fireEvent("resize", this, width, height);
- return this;
+ addSpacer : function(){
+ return this.addItem(new Roo.Toolbar.Spacer());
},
-
/**
- * Resizes the dialog to fit the specified content size.
- * @param {Number} width
- * @param {Number} height
- * @return {Roo.BasicDialog} this
+ * Adds a fill element that forces subsequent additions to the right side of the toolbar
+ * @return {Roo.Toolbar.Fill} The fill item
*/
- setContentSize : function(w, h){
- h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
- w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
- //if(!this.el.isBorderBox()){
- h += this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
- w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
- //}
- if(this.tabs){
- h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
- w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
- }
- this.resizeTo(w, h);
- return this;
+ addFill : function(){
+ return this.addItem(new Roo.Toolbar.Fill());
},
/**
- * Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be
- * executed in response to a particular key being pressed while the dialog is active.
- * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
- * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function
- * @return {Roo.BasicDialog} this
+ * Adds any standard HTML element to the toolbar
+ * @param {String/HTMLElement/Element} el The element or id of the element to add
+ * @return {Roo.Toolbar.Item} The element's item
*/
- addKeyListener : function(key, fn, scope){
- var keyCode, shift, ctrl, alt;
- if(typeof key == "object" && !(key instanceof Array)){
- keyCode = key["key"];
- shift = key["shift"];
- ctrl = key["ctrl"];
- alt = key["alt"];
- }else{
- keyCode = key;
- }
- var handler = function(dlg, e){
- if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
- var k = e.getKey();
- if(keyCode instanceof Array){
- for(var i = 0, len = keyCode.length; i < len; i++){
- if(keyCode[i] == k){
- fn.call(scope || window, dlg, k, e);
- return;
- }
- }
- }else{
- if(k == keyCode){
- fn.call(scope || window, dlg, k, e);
- }
- }
- }
- };
- this.on("keydown", handler);
- return this;
+ addElement : function(el){
+ return this.addItem(new Roo.Toolbar.Item(el));
},
-
/**
- * Returns the TabPanel component (creates it if it doesn't exist).
- * Note: If you wish to simply check for the existence of tabs without creating them,
- * check for a null 'tabs' property.
- * @return {Roo.TabPanel} The tabs component
+ * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
+ * @type Roo.util.MixedCollection
*/
- getTabs : function(){
- if(!this.tabs){
- this.el.addClass("x-dlg-auto-tabs");
- this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
- this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
- }
- return this.tabs;
+ items : false,
+
+ /**
+ * Adds any Toolbar.Item or subclass
+ * @param {Roo.Toolbar.Item} item
+ * @return {Roo.Toolbar.Item} The item
+ */
+ addItem : function(item){
+ var td = this.nextBlock();
+ item.render(td);
+ this.items.add(item);
+ return item;
},
-
+
/**
- * Adds a button to the footer section of the dialog.
- * @param {String/Object} config A string becomes the button text, an object can either be a Button config
- * object or a valid Roo.DomHelper element config
- * @param {Function} handler The function called when the button is clicked
- * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
- * @return {Roo.Button} The new button
+ * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
+ * @param {Object/Array} config A button config or array of configs
+ * @return {Roo.Toolbar.Button/Array}
*/
- addButton : function(config, handler, scope){
- var dh = Roo.DomHelper;
- if(!this.footer){
- this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
+ addButton : function(config){
+ if(config instanceof Array){
+ var buttons = [];
+ for(var i = 0, len = config.length; i < len; i++) {
+ buttons.push(this.addButton(config[i]));
+ }
+ return buttons;
}
- if(!this.btnContainer){
- var tb = this.footer.createChild({
-
- cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
- html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
- }, null, true);
- this.btnContainer = tb.firstChild.firstChild.firstChild;
+ var b = config;
+ if(!(config instanceof Roo.Toolbar.Button)){
+ b = config.split ?
+ new Roo.Toolbar.SplitButton(config) :
+ new Roo.Toolbar.Button(config);
}
- var bconfig = {
- handler: handler,
- scope: scope,
- minWidth: this.minButtonWidth,
- hideParent:true
- };
- if(typeof config == "string"){
- bconfig.text = config;
- }else{
- if(config.tag){
- bconfig.dhconfig = config;
- }else{
- Roo.apply(bconfig, config);
- }
- }
- var fc = false;
- if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
- bconfig.position = Math.max(0, bconfig.position);
- fc = this.btnContainer.childNodes[bconfig.position];
- }
-
- var btn = new Roo.Button(
- fc ?
- this.btnContainer.insertBefore(document.createElement("td"),fc)
- : this.btnContainer.appendChild(document.createElement("td")),
- //Roo.get(this.btnContainer).createChild( { tag: 'td'}, fc ),
- bconfig
- );
- this.syncBodyHeight();
- if(!this.buttons){
- /**
- * Array of all the buttons that have been added to this dialog via addButton
- * @type Array
- */
- this.buttons = [];
- }
- this.buttons.push(btn);
- return btn;
+ var td = this.nextBlock();
+ b.render(td);
+ this.items.add(b);
+ return b;
},
-
+
/**
- * Sets the default button to be focused when the dialog is displayed.
- * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
- * @return {Roo.BasicDialog} this
+ * Adds text to the toolbar
+ * @param {String} text The text to add
+ * @return {Roo.Toolbar.Item} The element's item
*/
- setDefaultButton : function(btn){
- this.defaultButton = btn;
- return this;
- },
-
- // private
- getHeaderFooterHeight : function(safe){
- var height = 0;
- if(this.header){
- height += this.header.getHeight();
- }
- if(this.footer){
- var fm = this.footer.getMargins();
- height += (this.footer.getHeight()+fm.top+fm.bottom);
- }
- height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
- height += this.centerBg.getPadding("tb");
- return height;
- },
-
- // private
- syncBodyHeight : function()
- {
- var bd = this.body, // the text
- cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
- bw = this.bwrap;
- var height = this.size.height - this.getHeaderFooterHeight(false);
- bd.setHeight(height-bd.getMargins("tb"));
- var hh = this.header.getHeight();
- var h = this.size.height-hh;
- cb.setHeight(h);
-
- bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
- bw.setHeight(h-cb.getPadding("tb"));
-
- bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
- bd.setWidth(bw.getWidth(true));
- if(this.tabs){
- this.tabs.syncHeight();
- if(Roo.isIE){
- this.tabs.el.repaint();
- }
- }
+ addText : function(text){
+ return this.addItem(new Roo.Toolbar.TextItem(text));
},
-
+
/**
- * Restores the previous state of the dialog if Roo.state is configured.
- * @return {Roo.BasicDialog} this
+ * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
+ * @param {Number} index The index where the item is to be inserted
+ * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
+ * @return {Roo.Toolbar.Button/Item}
*/
- restoreState : function(){
- var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
- if(box && box.width){
- this.xy = [box.x, box.y];
- this.resizeTo(box.width, box.height);
- }
- return this;
- },
-
- // private
- beforeShow : function(){
- this.expand();
- if(this.fixedcenter){
- this.xy = this.el.getCenterXY(true);
+ insertButton : function(index, item){
+ if(item instanceof Array){
+ var buttons = [];
+ for(var i = 0, len = item.length; i < len; i++) {
+ buttons.push(this.insertButton(index + i, item[i]));
+ }
+ return buttons;
}
- if(this.modal){
- Roo.get(document.body).addClass("x-body-masked");
- this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- this.mask.show();
+ if (!(item instanceof Roo.Toolbar.Button)){
+ item = new Roo.Toolbar.Button(item);
}
- this.constrainXY();
+ var td = document.createElement("td");
+ this.tr.insertBefore(td, this.tr.childNodes[index]);
+ item.render(td);
+ this.items.insert(index, item);
+ return item;
},
-
- // private
- animShow : function(){
- var b = Roo.get(this.animateTarget).getBox();
- this.proxy.setSize(b.width, b.height);
- this.proxy.setLocation(b.x, b.y);
- this.proxy.show();
- this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
- true, .35, this.showEl.createDelegate(this));
+
+ /**
+ * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
+ * @param {Object} config
+ * @return {Roo.Toolbar.Item} The element's item
+ */
+ addDom : function(config, returnEl){
+ var td = this.nextBlock();
+ Roo.DomHelper.overwrite(td, config);
+ var ti = new Roo.Toolbar.Item(td.firstChild);
+ ti.render(td);
+ this.items.add(ti);
+ return ti;
},
/**
- * Shows the dialog.
- * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
- * @return {Roo.BasicDialog} this
+ * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
+ * @type Roo.util.MixedCollection
*/
- show : function(animateTarget){
- if (this.fireEvent("beforeshow", this) === false){
- return;
- }
- if(this.syncHeightBeforeShow){
- this.syncBodyHeight();
- }else if(this.firstShow){
- this.firstShow = false;
- this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
- }
- this.animateTarget = animateTarget || this.animateTarget;
- if(!this.el.isVisible()){
- this.beforeShow();
- if(this.animateTarget && Roo.get(this.animateTarget)){
- this.animShow();
- }else{
- this.showEl();
- }
- }
- return this;
- },
+ fields : false,
+
+ /**
+ * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
+ * Note: the field should not have been rendered yet. For a field that has already been
+ * rendered, use {@link #addElement}.
+ * @param {Roo.form.Field} field
+ * @return {Roo.ToolbarItem}
+ */
+
+
+ addField : function(field) {
+ if (!this.fields) {
+ var autoId = 0;
+ this.fields = new Roo.util.MixedCollection(false, function(o){
+ return o.id || ("item" + (++autoId));
+ });
- // private
- showEl : function(){
- this.proxy.hide();
- this.el.setXY(this.xy);
- this.el.show();
- this.adjustAssets(true);
- this.toFront();
- this.focus();
- // IE peekaboo bug - fix found by Dave Fenwick
- if(Roo.isIE){
- this.el.repaint();
}
- this.fireEvent("show", this);
+
+ var td = this.nextBlock();
+ field.render(td);
+ var ti = new Roo.Toolbar.Item(td.firstChild);
+ ti.render(td);
+ this.items.add(ti);
+ this.fields.add(field);
+ return ti;
},
-
/**
- * Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
- * dialog itself will receive focus.
+ * Hide the toolbar
+ * @method hide
*/
- focus : function(){
- if(this.defaultButton){
- this.defaultButton.focus();
- }else{
- this.focusEl.focus();
- }
- },
-
- // private
- constrainXY : function(){
- if(this.constraintoviewport !== false){
- if(!this.viewSize){
- if(this.container){
- var s = this.container.getSize();
- this.viewSize = [s.width, s.height];
- }else{
- this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
- }
- }
- var s = Roo.get(this.container||document).getScroll();
-
- var x = this.xy[0], y = this.xy[1];
- var w = this.size.width, h = this.size.height;
- var vw = this.viewSize[0], vh = this.viewSize[1];
- // only move it if it needs it
- var moved = false;
- // first validate right/bottom
- if(x + w > vw+s.left){
- x = vw - w;
- moved = true;
- }
- if(y + h > vh+s.top){
- y = vh - h;
- moved = true;
- }
- // then make sure top/left isn't negative
- if(x < s.left){
- x = s.left;
- moved = true;
- }
- if(y < s.top){
- y = s.top;
- moved = true;
- }
- if(moved){
- // cache xy
- this.xy = [x, y];
- if(this.isVisible()){
- this.el.setLocation(x, y);
- this.adjustAssets();
- }
- }
- }
+
+
+ hide : function()
+ {
+ this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
+ this.el.child('div').hide();
},
-
- // private
- onDrag : function(){
- if(!this.proxyDrag){
- this.xy = this.el.getXY();
- this.adjustAssets();
- }
+ /**
+ * Show the toolbar
+ * @method show
+ */
+ show : function()
+ {
+ this.el.child('div').show();
},
-
+
// private
- adjustAssets : function(doShow){
- var x = this.xy[0], y = this.xy[1];
- var w = this.size.width, h = this.size.height;
- if(doShow === true){
- if(this.shadow){
- this.shadow.show(this.el);
- }
- if(this.shim){
- this.shim.show();
- }
- }
- if(this.shadow && this.shadow.isVisible()){
- this.shadow.show(this.el);
- }
- if(this.shim && this.shim.isVisible()){
- this.shim.setBounds(x, y, w, h);
- }
+ nextBlock : function(){
+ var td = document.createElement("td");
+ this.tr.appendChild(td);
+ return td;
},
// private
- adjustViewport : function(w, h){
- if(!w || !h){
- w = Roo.lib.Dom.getViewWidth();
- h = Roo.lib.Dom.getViewHeight();
- }
- // cache the size
- this.viewSize = [w, h];
- if(this.modal && this.mask.isVisible()){
- this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
- this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ destroy : function(){
+ if(this.items){ // rendered?
+ Roo.destroy.apply(Roo, this.items.items);
}
- if(this.isVisible()){
- this.constrainXY();
+ if(this.fields){ // rendered?
+ Roo.destroy.apply(Roo, this.fields.items);
}
- },
+ Roo.Element.uncache(this.el, this.tr);
+ }
+};
+/**
+ * @class Roo.Toolbar.Item
+ * The base class that other classes should extend in order to get some basic common toolbar item functionality.
+ * @constructor
+ * Creates a new Item
+ * @param {HTMLElement} el
+ */
+Roo.Toolbar.Item = function(el){
+ var cfg = {};
+ if (typeof (el.xtype) != 'undefined') {
+ cfg = el;
+ el = cfg.el;
+ }
+
+ this.el = Roo.getDom(el);
+ this.id = Roo.id(this.el);
+ this.hidden = false;
+
+ this.addEvents({
+ /**
+ * @event render
+ * Fires when the button is rendered
+ * @param {Button} this
+ */
+ 'render': true
+ });
+ Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
+};
+Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
+//Roo.Toolbar.Item.prototype = {
+
/**
- * Destroys this dialog and all its supporting elements (including any tabs, shim,
- * shadow, proxy, mask, etc.) Also removes all event listeners.
- * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+ * Get this item's HTML Element
+ * @return {HTMLElement}
*/
- destroy : function(removeEl){
- if(this.isVisible()){
- this.animateTarget = null;
- this.hide();
- }
- Roo.EventManager.removeResizeListener(this.adjustViewport, this);
- if(this.tabs){
- this.tabs.destroy(removeEl);
- }
- Roo.destroy(
- this.shim,
- this.proxy,
- this.resizer,
- this.close,
- this.mask
- );
- if(this.dd){
- this.dd.unreg();
- }
- if(this.buttons){
- for(var i = 0, len = this.buttons.length; i < len; i++){
- this.buttons[i].destroy();
- }
- }
- this.el.removeAllListeners();
- if(removeEl === true){
- this.el.update("");
- this.el.remove();
- }
- Roo.DialogManager.unregister(this);
- },
-
- // private
- startMove : function(){
- if(this.proxyDrag){
- this.proxy.show();
- }
- if(this.constraintoviewport !== false){
- this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
- }
+ getEl : function(){
+ return this.el;
},
// private
- endMove : function(){
- if(!this.proxyDrag){
- Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
- }else{
- Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
- this.proxy.hide();
- }
- this.refreshSize();
- this.adjustAssets();
- this.focus();
- this.fireEvent("move", this, this.xy[0], this.xy[1]);
+ render : function(td){
+
+ this.td = td;
+ td.appendChild(this.el);
+
+ this.fireEvent('render', this);
},
-
+
/**
- * Brings this dialog to the front of any other visible dialogs
- * @return {Roo.BasicDialog} this
+ * Removes and destroys this item.
*/
- toFront : function(){
- Roo.DialogManager.bringToFront(this);
- return this;
+ destroy : function(){
+ this.td.parentNode.removeChild(this.td);
},
-
+
/**
- * Sends this dialog to the back (under) of any other visible dialogs
- * @return {Roo.BasicDialog} this
+ * Shows this item.
*/
- toBack : function(){
- Roo.DialogManager.sendToBack(this);
- return this;
+ show: function(){
+ this.hidden = false;
+ this.td.style.display = "";
},
-
+
/**
- * Centers this dialog in the viewport
- * @return {Roo.BasicDialog} this
+ * Hides this item.
*/
- center : function(){
- var xy = this.el.getCenterXY(true);
- this.moveTo(xy[0], xy[1]);
- return this;
+ hide: function(){
+ this.hidden = true;
+ this.td.style.display = "none";
},
-
+
/**
- * Moves the dialog's top-left corner to the specified point
- * @param {Number} x
- * @param {Number} y
- * @return {Roo.BasicDialog} this
+ * Convenience function for boolean show/hide.
+ * @param {Boolean} visible true to show/false to hide
*/
- moveTo : function(x, y){
- this.xy = [x,y];
- if(this.isVisible()){
- this.el.setXY(this.xy);
- this.adjustAssets();
+ setVisible: function(visible){
+ if(visible) {
+ this.show();
+ }else{
+ this.hide();
}
- return this;
},
-
+
/**
- * Aligns the dialog to the specified element
- * @param {String/HTMLElement/Roo.Element} element The element to align to.
- * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @return {Roo.BasicDialog} this
+ * Try to focus this item.
*/
- alignTo : function(element, position, offsets){
- this.xy = this.el.getAlignToXY(element, position, offsets);
- if(this.isVisible()){
- this.el.setXY(this.xy);
- this.adjustAssets();
- }
- return this;
+ focus : function(){
+ Roo.fly(this.el).focus();
},
-
+
/**
- * Anchors an element to another element and realigns it when the window is resized.
- * @param {String/HTMLElement/Roo.Element} element The element to align to.
- * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
- * is a number, it is used as the buffer delay (defaults to 50ms).
- * @return {Roo.BasicDialog} this
- */
- anchorTo : function(el, alignment, offsets, monitorScroll){
- var action = function(){
- this.alignTo(el, alignment, offsets);
- };
- Roo.EventManager.onWindowResize(action, this);
- var tm = typeof monitorScroll;
- if(tm != 'undefined'){
- Roo.EventManager.on(window, 'scroll', action, this,
- {buffer: tm == 'number' ? monitorScroll : 50});
- }
- action.call(this);
- return this;
- },
-
- /**
- * Returns true if the dialog is visible
- * @return {Boolean}
+ * Disables this item.
*/
- isVisible : function(){
- return this.el.isVisible();
- },
-
- // private
- animHide : function(callback){
- var b = Roo.get(this.animateTarget).getBox();
- this.proxy.show();
- this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
- this.el.hide();
- this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
- this.hideEl.createDelegate(this, [callback]));
+ disable : function(){
+ Roo.fly(this.td).addClass("x-item-disabled");
+ this.disabled = true;
+ this.el.disabled = true;
},
-
+
/**
- * Hides the dialog.
- * @param {Function} callback (optional) Function to call when the dialog is hidden
- * @return {Roo.BasicDialog} this
+ * Enables this item.
*/
- hide : function(callback){
- if (this.fireEvent("beforehide", this) === false){
- return;
- }
- if(this.shadow){
- this.shadow.hide();
- }
- if(this.shim) {
- this.shim.hide();
- }
- // sometimes animateTarget seems to get set.. causing problems...
- // this just double checks..
- if(this.animateTarget && Roo.get(this.animateTarget)) {
- this.animHide(callback);
- }else{
- this.el.hide();
- this.hideEl(callback);
- }
- return this;
- },
-
- // private
- hideEl : function(callback){
- this.proxy.hide();
- if(this.modal){
- this.mask.hide();
- Roo.get(document.body).removeClass("x-body-masked");
- }
- this.fireEvent("hide", this);
- if(typeof callback == "function"){
- callback();
- }
- },
-
- // private
- hideAction : function(){
- this.setLeft("-10000px");
- this.setTop("-10000px");
- this.setStyle("visibility", "hidden");
- },
-
- // private
- refreshSize : function(){
- this.size = this.el.getSize();
- this.xy = this.el.getXY();
- Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
- },
-
- // private
- // z-index is managed by the DialogManager and may be overwritten at any time
- setZIndex : function(index){
- if(this.modal){
- this.mask.setStyle("z-index", index);
- }
- if(this.shim){
- this.shim.setStyle("z-index", ++index);
- }
- if(this.shadow){
- this.shadow.setZIndex(++index);
- }
- this.el.setStyle("z-index", ++index);
- if(this.proxy){
- this.proxy.setStyle("z-index", ++index);
- }
- if(this.resizer){
- this.resizer.proxy.setStyle("z-index", ++index);
- }
+ enable : function(){
+ Roo.fly(this.td).removeClass("x-item-disabled");
+ this.disabled = false;
+ this.el.disabled = false;
+ }
+});
- this.lastZIndex = index;
- },
- /**
- * Returns the element for this dialog
- * @return {Roo.Element} The underlying dialog Element
- */
- getEl : function(){
- return this.el;
+/**
+ * @class Roo.Toolbar.Separator
+ * @extends Roo.Toolbar.Item
+ * A simple toolbar separator class
+ * @constructor
+ * Creates a new Separator
+ */
+Roo.Toolbar.Separator = function(cfg){
+
+ var s = document.createElement("span");
+ s.className = "ytb-sep";
+ if (cfg) {
+ cfg.el = s;
}
+
+ Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
+};
+Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
+ enable:Roo.emptyFn,
+ disable:Roo.emptyFn,
+ focus:Roo.emptyFn
});
/**
- * @class Roo.DialogManager
- * Provides global access to BasicDialogs that have been created and
- * support for z-indexing (layering) multiple open dialogs.
+ * @class Roo.Toolbar.Spacer
+ * @extends Roo.Toolbar.Item
+ * A simple element that adds extra horizontal space to a toolbar.
+ * @constructor
+ * Creates a new Spacer
*/
-Roo.DialogManager = function(){
- var list = {};
- var accessList = [];
- var front = null;
-
- // private
- var sortDialogs = function(d1, d2){
- return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
- };
+Roo.Toolbar.Spacer = function(cfg){
+ var s = document.createElement("div");
+ s.className = "ytb-spacer";
+ if (cfg) {
+ cfg.el = s;
+ }
+ Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
+};
+Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
+ enable:Roo.emptyFn,
+ disable:Roo.emptyFn,
+ focus:Roo.emptyFn
+});
+/**
+ * @class Roo.Toolbar.Fill
+ * @extends Roo.Toolbar.Spacer
+ * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
+ * @constructor
+ * Creates a new Spacer
+ */
+Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
// private
- var orderDialogs = function(){
- accessList.sort(sortDialogs);
- var seed = Roo.DialogManager.zseed;
- for(var i = 0, len = accessList.length; i < len; i++){
- var dlg = accessList[i];
- if(dlg){
- dlg.setZIndex(seed + (i*10));
- }
- }
- };
-
- return {
- /**
- * The starting z-index for BasicDialogs (defaults to 9000)
- * @type Number The z-index value
- */
- zseed : 9000,
-
- // private
- register : function(dlg){
- list[dlg.id] = dlg;
- accessList.push(dlg);
- },
-
- // private
- unregister : function(dlg){
- delete list[dlg.id];
- var i=0;
- var len=0;
- if(!accessList.indexOf){
- for( i = 0, len = accessList.length; i < len; i++){
- if(accessList[i] == dlg){
- accessList.splice(i, 1);
- return;
- }
- }
- }else{
- i = accessList.indexOf(dlg);
- if(i != -1){
- accessList.splice(i, 1);
- }
- }
- },
-
- /**
- * Gets a registered dialog by id
- * @param {String/Object} id The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- get : function(id){
- return typeof id == "object" ? id : list[id];
- },
-
- /**
- * Brings the specified dialog to the front
- * @param {String/Object} dlg The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- bringToFront : function(dlg){
- dlg = this.get(dlg);
- if(dlg != front){
- front = dlg;
- dlg._lastAccess = new Date().getTime();
- orderDialogs();
- }
- return dlg;
- },
-
- /**
- * Sends the specified dialog to the back
- * @param {String/Object} dlg The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- sendToBack : function(dlg){
- dlg = this.get(dlg);
- dlg._lastAccess = -(new Date().getTime());
- orderDialogs();
- return dlg;
- },
-
- /**
- * Hides all dialogs
- */
- hideAll : function(){
- for(var id in list){
- if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
- list[id].hide();
- }
- }
- }
- };
-}();
+ render : function(td){
+ td.style.width = '100%';
+ Roo.Toolbar.Fill.superclass.render.call(this, td);
+ }
+});
/**
- * @class Roo.LayoutDialog
- * @extends Roo.BasicDialog
- * @children Roo.ContentPanel
- * @parent builder none
- * Dialog which provides adjustments for working with a layout in a Dialog.
- * Add your necessary layout config options to the dialog's config.<br>
- * Example usage (including a nested layout):
- * <pre><code>
-if(!dialog){
- dialog = new Roo.LayoutDialog("download-dlg", {
- modal: true,
- width:600,
- height:450,
- shadow:true,
- minWidth:500,
- minHeight:350,
- autoTabs:true,
- proxyDrag:true,
- // layout config merges with the dialog config
- center:{
- tabPosition: "top",
- alwaysShowTabs: true
- }
- });
- dialog.addKeyListener(27, dialog.hide, dialog);
- dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
- dialog.addButton("Build It!", this.getDownload, this);
-
- // we can even add nested layouts
- var innerLayout = new Roo.BorderLayout("dl-inner", {
- east: {
- initialSize: 200,
- autoScroll:true,
- split:true
- },
- center: {
- autoScroll:true
- }
- });
- innerLayout.beginUpdate();
- innerLayout.add("east", new Roo.ContentPanel("dl-details"));
- innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
- innerLayout.endUpdate(true);
-
- var layout = dialog.getLayout();
- layout.beginUpdate();
- layout.add("center", new Roo.ContentPanel("standard-panel",
- {title: "Download the Source", fitToFrame:true}));
- layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
- {title: "Build your own roo.js"}));
- layout.getRegion("center").showPanel(sp);
- layout.endUpdate();
-}
-</code></pre>
- * @constructor
- * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
- * @param {Object} config configuration options
- */
-Roo.LayoutDialog = function(el, cfg){
-
- var config= cfg;
- if (typeof(cfg) == 'undefined') {
- config = Roo.apply({}, el);
- // not sure why we use documentElement here.. - it should always be body.
- // IE7 borks horribly if we use documentElement.
- // webkit also does not like documentElement - it creates a body element...
- el = Roo.get( document.body || document.documentElement ).createChild();
- //config.autoCreate = true;
+ * @class Roo.Toolbar.TextItem
+ * @extends Roo.Toolbar.Item
+ * A simple class that renders text directly into a toolbar.
+ * @constructor
+ * Creates a new TextItem
+ * @cfg {string} text
+ */
+Roo.Toolbar.TextItem = function(cfg){
+ var text = cfg || "";
+ if (typeof(cfg) == 'object') {
+ text = cfg.text || "";
+ } else {
+ cfg = null;
}
-
-
- config.autoTabs = false;
- Roo.LayoutDialog.superclass.constructor.call(this, el, config);
- this.body.setStyle({overflow:"hidden", position:"relative"});
- this.layout = new Roo.BorderLayout(this.body.dom, config);
- this.layout.monitorWindowResize = false;
- this.el.addClass("x-dlg-auto-layout");
- // fix case when center region overwrites center function
- this.center = Roo.BasicDialog.prototype.center;
- this.on("show", this.layout.layout, this.layout, true);
- if (config.items) {
- var xitems = config.items;
- delete config.items;
- Roo.each(xitems, this.addxtype, this);
+ var s = document.createElement("span");
+ s.className = "ytb-text";
+ s.innerHTML = text;
+ if (cfg) {
+ cfg.el = s;
}
-
+ Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg || s);
};
-Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
-
+Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
- /**
- * @cfg {Roo.LayoutRegion} east
- */
- /**
- * @cfg {Roo.LayoutRegion} west
- */
- /**
- * @cfg {Roo.LayoutRegion} south
+
+ enable:Roo.emptyFn,
+ disable:Roo.emptyFn,
+ focus:Roo.emptyFn,
+ /**
+ * Shows this button
*/
+ show: function(){
+ this.hidden = false;
+ this.el.style.display = "";
+ },
+
/**
- * @cfg {Roo.LayoutRegion} north
+ * Hides this button
*/
+ hide: function(){
+ this.hidden = true;
+ this.el.style.display = "none";
+ }
+
+});
+
+/**
+ * @class Roo.Toolbar.Button
+ * @extends Roo.Button
+ * A button that renders into a toolbar.
+ * @constructor
+ * Creates a new Button
+ * @param {Object} config A standard {@link Roo.Button} config object
+ */
+Roo.Toolbar.Button = function(config){
+ Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
+};
+Roo.extend(Roo.Toolbar.Button, Roo.Button,
+{
+
+
+ render : function(td){
+ this.td = td;
+ Roo.Toolbar.Button.superclass.render.call(this, td);
+ },
+
/**
- * @cfg {Roo.LayoutRegion} center
+ * Removes and destroys this button
*/
+ destroy : function(){
+ Roo.Toolbar.Button.superclass.destroy.call(this);
+ this.td.parentNode.removeChild(this.td);
+ },
+
/**
- * @cfg {Roo.Button} buttons[] Bottom buttons..
+ * Shows this button
*/
-
+ show: function(){
+ this.hidden = false;
+ this.td.style.display = "";
+ },
/**
- * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
- * @deprecated
+ * Hides this button
*/
- endUpdate : function(){
- this.layout.endUpdate();
+ hide: function(){
+ this.hidden = true;
+ this.td.style.display = "none";
},
/**
- * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
- * @deprecated
+ * Disables this item
*/
- beginUpdate : function(){
- this.layout.beginUpdate();
+ disable : function(){
+ Roo.fly(this.td).addClass("x-item-disabled");
+ this.disabled = true;
},
/**
- * Get the BorderLayout for this dialog
- * @return {Roo.BorderLayout}
+ * Enables this item
*/
- getLayout : function(){
- return this.layout;
- },
-
- showEl : function(){
- Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
- if(Roo.isIE7){
- this.layout.layout();
- }
- },
+ enable : function(){
+ Roo.fly(this.td).removeClass("x-item-disabled");
+ this.disabled = false;
+ }
+});
+// backwards compat
+Roo.ToolbarButton = Roo.Toolbar.Button;
- // private
- // Use the syncHeightBeforeShow config option to control this automatically
- syncBodyHeight : function(){
- Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
- if(this.layout){this.layout.layout();}
+/**
+ * @class Roo.Toolbar.SplitButton
+ * @extends Roo.SplitButton
+ * A menu button that renders into a toolbar.
+ * @constructor
+ * Creates a new SplitButton
+ * @param {Object} config A standard {@link Roo.SplitButton} config object
+ */
+Roo.Toolbar.SplitButton = function(config){
+ Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
+};
+Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
+ render : function(td){
+ this.td = td;
+ Roo.Toolbar.SplitButton.superclass.render.call(this, td);
},
- /**
- * Add an xtype element (actually adds to the layout.)
- * @return {Object} xdata xtype object data.
+ /**
+ * Removes and destroys this button
*/
+ destroy : function(){
+ Roo.Toolbar.SplitButton.superclass.destroy.call(this);
+ this.td.parentNode.removeChild(this.td);
+ },
- addxtype : function(c) {
- return this.layout.addxtype(c);
- }
-});/*
- * Based on:
+ /**
+ * Shows this button
+ */
+ show: function(){
+ this.hidden = false;
+ this.td.style.display = "";
+ },
+
+ /**
+ * Hides this button
+ */
+ hide: function(){
+ this.hidden = true;
+ this.td.style.display = "none";
+ }
+});
+
+// backwards compat
+Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
+ * Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*
*/
/**
- * @class Roo.MessageBox
- * @static
- * Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
- * Example usage:
- *<pre><code>
-// Basic alert:
-Roo.Msg.alert('Status', 'Changes saved successfully.');
-
-// Prompt for user data:
-Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
- if (btn == 'ok'){
- // process text value...
+ * @class Roo.PagingToolbar
+ * @extends Roo.Toolbar
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
+ * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
+ * @constructor
+ * Create a new PagingToolbar
+ * @param {Object} config The config object
+ */
+Roo.PagingToolbar = function(el, ds, config)
+{
+ // old args format still supported... - xtype is prefered..
+ if (typeof(el) == 'object' && el.xtype) {
+ // created from xtype...
+ config = el;
+ ds = el.dataSource;
+ el = config.container;
}
-});
+ var items = [];
+ if (config.items) {
+ items = config.items;
+ config.items = [];
+ }
+
+ Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
+ this.ds = ds;
+ this.cursor = 0;
+ this.renderButtons(this.el);
+ this.bind(ds);
+
+ // supprot items array.
+
+ Roo.each(items, function(e) {
+ this.add(Roo.factory(e));
+ },this);
+
+};
-// Show a dialog using config options:
-Roo.Msg.show({
- title:'Save Changes?',
- msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
- buttons: Roo.Msg.YESNOCANCEL,
- fn: processResult,
- animEl: 'elId'
-});
-</code></pre>
- * @static
- */
-Roo.MessageBox = function(){
- var dlg, opt, mask, waitTimer;
- var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
- var buttons, activeTextEl, bwidth;
+Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
+
+ /**
+ * @cfg {String/HTMLElement/Element} container
+ * container The id or element that will contain the toolbar
+ */
+ /**
+ * @cfg {Boolean} displayInfo
+ * True to display the displayMsg (defaults to false)
+ */
+
+
+ /**
+ * @cfg {Number} pageSize
+ * The number of records to display per page (defaults to 20)
+ */
+ pageSize: 20,
+ /**
+ * @cfg {String} displayMsg
+ * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
+ */
+ displayMsg : 'Displaying {0} - {1} of {2}',
+ /**
+ * @cfg {String} emptyMsg
+ * The message to display when no records are found (defaults to "No data to display")
+ */
+ emptyMsg : 'No data to display',
+ /**
+ * Customizable piece of the default paging text (defaults to "Page")
+ * @type String
+ */
+ beforePageText : "Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "of %0")
+ * @type String
+ */
+ afterPageText : "of {0}",
+ /**
+ * Customizable piece of the default paging text (defaults to "First Page")
+ * @type String
+ */
+ firstText : "First Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Previous Page")
+ * @type String
+ */
+ prevText : "Previous Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Next Page")
+ * @type String
+ */
+ nextText : "Next Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Last Page")
+ * @type String
+ */
+ lastText : "Last Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Refresh")
+ * @type String
+ */
+ refreshText : "Refresh",
// private
- var handleButton = function(button){
- dlg.hide();
- Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
- };
+ renderButtons : function(el){
+ Roo.PagingToolbar.superclass.render.call(this, el);
+ this.first = this.addButton({
+ tooltip: this.firstText,
+ cls: "x-btn-icon x-grid-page-first",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["first"])
+ });
+ this.prev = this.addButton({
+ tooltip: this.prevText,
+ cls: "x-btn-icon x-grid-page-prev",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["prev"])
+ });
+ //this.addSeparator();
+ this.add(this.beforePageText);
+ this.field = Roo.get(this.addDom({
+ tag: "input",
+ type: "text",
+ size: "3",
+ value: "1",
+ cls: "x-grid-page-number"
+ }).el);
+ this.field.on("keydown", this.onPagingKeydown, this);
+ this.field.on("focus", function(){this.dom.select();});
+ this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
+ this.field.setHeight(18);
+ //this.addSeparator();
+ this.next = this.addButton({
+ tooltip: this.nextText,
+ cls: "x-btn-icon x-grid-page-next",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["next"])
+ });
+ this.last = this.addButton({
+ tooltip: this.lastText,
+ cls: "x-btn-icon x-grid-page-last",
+ disabled: true,
+ handler: this.onClick.createDelegate(this, ["last"])
+ });
+ //this.addSeparator();
+ this.loading = this.addButton({
+ tooltip: this.refreshText,
+ cls: "x-btn-icon x-grid-loading",
+ handler: this.onClick.createDelegate(this, ["refresh"])
+ });
- // private
- var handleHide = function(){
- if(opt && opt.cls){
- dlg.el.removeClass(opt.cls);
- }
- if(waitTimer){
- Roo.TaskMgr.stop(waitTimer);
- waitTimer = null;
+ if(this.displayInfo){
+ this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
}
- };
+ },
// private
- var updateButtons = function(b){
- var width = 0;
- if(!b){
- buttons["ok"].hide();
- buttons["cancel"].hide();
- buttons["yes"].hide();
- buttons["no"].hide();
- dlg.footer.dom.style.display = 'none';
- return width;
- }
- dlg.footer.dom.style.display = '';
- for(var k in buttons){
- if(typeof buttons[k] != "function"){
- if(b[k]){
- buttons[k].show();
- buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
- width += buttons[k].el.getWidth()+15;
- }else{
- buttons[k].hide();
- }
- }
+ updateInfo : function(){
+ if(this.displayEl){
+ var count = this.ds.getCount();
+ var msg = count == 0 ?
+ this.emptyMsg :
+ String.format(
+ this.displayMsg,
+ this.cursor+1, this.cursor+count, this.ds.getTotalCount()
+ );
+ this.displayEl.update(msg);
}
- return width;
- };
+ },
// private
- var handleEsc = function(d, k, e){
- if(opt && opt.closable !== false){
- dlg.hide();
- }
- if(e){
- e.stopEvent();
- }
- };
+ onLoad : function(ds, r, o){
+ this.cursor = o.params ? o.params.start : 0;
+ var d = this.getPageData(), ap = d.activePage, ps = d.pages;
- return {
- /**
- * Returns a reference to the underlying {@link Roo.BasicDialog} element
- * @return {Roo.BasicDialog} The BasicDialog element
- */
- getDialog : function(){
- if(!dlg){
- dlg = new Roo.BasicDialog("x-msg-box", {
- autoCreate : true,
- shadow: true,
- draggable: true,
- resizable:false,
- constraintoviewport:false,
- fixedcenter:true,
- collapsible : false,
- shim:true,
- modal: true,
- width:400, height:100,
- buttonAlign:"center",
- closeClick : function(){
- if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
- handleButton("no");
- }else{
- handleButton("cancel");
- }
- }
- });
-
- dlg.on("hide", handleHide);
- mask = dlg.mask;
- dlg.addKeyListener(27, handleEsc);
- buttons = {};
- var bt = this.buttonText;
- buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
- buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
- buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
- buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
- bodyEl = dlg.body.createChild({
+ this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
+ this.field.dom.value = ap;
+ this.first.setDisabled(ap == 1);
+ this.prev.setDisabled(ap == 1);
+ this.next.setDisabled(ap == ps);
+ this.last.setDisabled(ap == ps);
+ this.loading.enable();
+ this.updateInfo();
+ },
- html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar"> </div></div></div>'
- });
- msgEl = bodyEl.dom.firstChild;
- textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
- textboxEl.enableDisplayMode();
- textboxEl.addKeyListener([10,13], function(){
- if(dlg.isVisible() && opt && opt.buttons){
- if(opt.buttons.ok){
- handleButton("ok");
- }else if(opt.buttons.yes){
- handleButton("yes");
- }
- }
- });
- textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
- textareaEl.enableDisplayMode();
- progressEl = Roo.get(bodyEl.dom.childNodes[4]);
- progressEl.enableDisplayMode();
- var pf = progressEl.dom.firstChild;
- if (pf) {
- pp = Roo.get(pf.firstChild);
- pp.setHeight(pf.offsetHeight);
- }
-
- }
- return dlg;
- },
+ // private
+ getPageData : function(){
+ var total = this.ds.getTotalCount();
+ return {
+ total : total,
+ activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
+ pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
+ };
+ },
- /**
- * Updates the message box body text
- * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
- * the XHTML-compliant non-breaking space character '&#160;')
- * @return {Roo.MessageBox} This message box
- */
- updateText : function(text){
- if(!dlg.isVisible() && !opt.width){
- dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
- }
- msgEl.innerHTML = text || ' ';
-
- var cw = Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
- //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
- var w = Math.max(
- Math.min(opt.width || cw , this.maxWidth),
- Math.max(opt.minWidth || this.minWidth, bwidth)
- );
- if(opt.prompt){
- activeTextEl.setWidth(w);
- }
- if(dlg.isVisible()){
- dlg.fixedcenter = false;
- }
- // to big, make it scroll. = But as usual stupid IE does not support
- // !important..
-
- if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
- bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
- bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
- } else {
- bodyEl.dom.style.height = '';
- bodyEl.dom.style.overflowY = '';
- }
- if (cw > w) {
- bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
- } else {
- bodyEl.dom.style.overflowX = '';
- }
-
- dlg.setContentSize(w, bodyEl.getHeight());
- if(dlg.isVisible()){
- dlg.fixedcenter = true;
- }
- return this;
- },
+ // private
+ onLoadError : function(){
+ this.loading.enable();
+ },
- /**
- * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
- * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
- * @param {Number} value Any number between 0 and 1 (e.g., .5)
- * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
- * @return {Roo.MessageBox} This message box
- */
- updateProgress : function(value, text){
- if(text){
- this.updateText(text);
- }
- if (pp) { // weird bug on my firefox - for some reason this is not defined
- pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
+ // private
+ onPagingKeydown : function(e){
+ var k = e.getKey();
+ var d = this.getPageData();
+ if(k == e.RETURN){
+ var v = this.field.dom.value, pageNum;
+ if(!v || isNaN(pageNum = parseInt(v, 10))){
+ this.field.dom.value = d.activePage;
+ return;
}
- return this;
- },
+ pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
+ this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+ e.stopEvent();
+ }
+ else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
+ {
+ var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
+ this.field.dom.value = pageNum;
+ this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
+ e.stopEvent();
+ }
+ else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
+ {
+ var v = this.field.dom.value, pageNum;
+ var increment = (e.shiftKey) ? 10 : 1;
+ if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
+ increment *= -1;
+ }
+ if(!v || isNaN(pageNum = parseInt(v, 10))) {
+ this.field.dom.value = d.activePage;
+ return;
+ }
+ else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
+ {
+ this.field.dom.value = parseInt(v, 10) + increment;
+ pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
+ this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+ }
+ e.stopEvent();
+ }
+ },
- /**
- * Returns true if the message box is currently displayed
- * @return {Boolean} True if the message box is visible, else false
- */
- isVisible : function(){
- return dlg && dlg.isVisible();
- },
+ // private
+ beforeLoad : function(){
+ if(this.loading){
+ this.loading.disable();
+ }
+ },
+ /**
+ * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
+ * @param {String} which (first|prev|next|last|refresh) which button to press.
+ *
+ */
+ // private
+ onClick : function(which){
+ var ds = this.ds;
+ switch(which){
+ case "first":
+ ds.load({params:{start: 0, limit: this.pageSize}});
+ break;
+ case "prev":
+ ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
+ break;
+ case "next":
+ ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
+ break;
+ case "last":
+ var total = ds.getTotalCount();
+ var extra = total % this.pageSize;
+ var lastStart = extra ? (total - extra) : total-this.pageSize;
+ ds.load({params:{start: lastStart, limit: this.pageSize}});
+ break;
+ case "refresh":
+ ds.load({params:{start: this.cursor, limit: this.pageSize}});
+ break;
+ }
+ },
- /**
- * Hides the message box if it is displayed
- */
- hide : function(){
- if(this.isVisible()){
- dlg.hide();
- }
- },
+ /**
+ * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
+ * @param {Roo.data.Store} store The data store to unbind
+ */
+ unbind : function(ds){
+ ds.un("beforeload", this.beforeLoad, this);
+ ds.un("load", this.onLoad, this);
+ ds.un("loadexception", this.onLoadError, this);
+ ds.un("remove", this.updateInfo, this);
+ ds.un("add", this.updateInfo, this);
+ this.ds = undefined;
+ },
- /**
- * Displays a new message box, or reinitializes an existing message box, based on the config options
- * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
- * The following config object properties are supported:
- * <pre>
-Property Type Description
----------- --------------- ------------------------------------------------------------------------------------
-animEl String/Element An id or Element from which the message box should animate as it opens and
- closes (defaults to undefined)
-buttons Object/Boolean A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
- cancel:'Bar'}), or false to not show any buttons (defaults to false)
-closable Boolean False to hide the top-right close button (defaults to true). Note that
- progress and wait dialogs will ignore this property and always hide the
- close button as they can only be closed programmatically.
-cls String A custom CSS class to apply to the message box element
-defaultTextHeight Number The default height in pixels of the message box's multiline textarea if
- displayed (defaults to 75)
-fn Function A callback function to execute after closing the dialog. The arguments to the
- function will be btn (the name of the button that was clicked, if applicable,
- e.g. "ok"), and text (the value of the active text field, if applicable).
- Progress and wait dialogs will ignore this option since they do not respond to
- user actions and can only be closed programmatically, so any required function
- should be called by the same code after it closes the dialog.
-icon String A CSS class that provides a background image to be used as an icon for
- the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
-maxWidth Number The maximum width in pixels of the message box (defaults to 600)
-minWidth Number The minimum width in pixels of the message box (defaults to 100)
-modal Boolean False to allow user interaction with the page while the message box is
- displayed (defaults to true)
-msg String A string that will replace the existing message box body text (defaults
- to the XHTML-compliant non-breaking space character ' ')
-multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
-progress Boolean True to display a progress bar (defaults to false)
-progressText String The text to display inside the progress bar if progress = true (defaults to '')
-prompt Boolean True to prompt the user to enter single-line text (defaults to false)
-proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
-title String The title text
-value String The string value to set into the active textbox element if displayed
-wait Boolean True to display a progress bar (defaults to false)
-width Number The width of the dialog in pixels
+ /**
+ * Binds the paging toolbar to the specified {@link Roo.data.Store}
+ * @param {Roo.data.Store} store The data store to bind
+ */
+ bind : function(ds){
+ ds.on("beforeload", this.beforeLoad, this);
+ ds.on("load", this.onLoad, this);
+ ds.on("loadexception", this.onLoadError, this);
+ ds.on("remove", this.updateInfo, this);
+ ds.on("add", this.updateInfo, this);
+ this.ds = ds;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.Resizable
+ * @extends Roo.util.Observable
+ * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
+ * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
+ * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
+ * the element will be wrapped for you automatically.</p>
+ * <p>Here is the list of valid resize handles:</p>
+ * <pre>
+Value Description
+------ -------------------
+ 'n' north
+ 's' south
+ 'e' east
+ 'w' west
+ 'nw' northwest
+ 'sw' southwest
+ 'se' southeast
+ 'ne' northeast
+ 'hd' horizontal drag
+ 'all' all
</pre>
- *
- * Example usage:
- * <pre><code>
-Roo.Msg.show({
- title: 'Address',
- msg: 'Please enter your address:',
- width: 300,
- buttons: Roo.MessageBox.OKCANCEL,
- multiline: true,
- fn: saveAddress,
- animEl: 'addAddressBtn'
+ * <p>Here's an example showing the creation of a typical Resizable:</p>
+ * <pre><code>
+var resizer = new Roo.Resizable("element-id", {
+ handles: 'all',
+ minWidth: 200,
+ minHeight: 100,
+ maxWidth: 500,
+ maxHeight: 400,
+ pinned: true
});
+resizer.on("resize", myHandler);
</code></pre>
- * @param {Object} config Configuration options
- * @return {Roo.MessageBox} This message box
- */
- show : function(options)
- {
-
- // this causes nightmares if you show one dialog after another
- // especially on callbacks..
-
- if(this.isVisible()){
-
- this.hide();
- Roo.log("[Roo.Messagebox] Show called while message displayed:" );
- Roo.log("Old Dialog Message:" + msgEl.innerHTML );
- Roo.log("New Dialog Message:" + options.msg )
- //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
- //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
-
- }
- var d = this.getDialog();
- opt = options;
- d.setTitle(opt.title || " ");
- d.close.setDisplayed(opt.closable !== false);
- activeTextEl = textboxEl;
- opt.prompt = opt.prompt || (opt.multiline ? true : false);
- if(opt.prompt){
- if(opt.multiline){
- textboxEl.hide();
- textareaEl.show();
- textareaEl.setHeight(typeof opt.multiline == "number" ?
- opt.multiline : this.defaultTextHeight);
- activeTextEl = textareaEl;
- }else{
- textboxEl.show();
- textareaEl.hide();
- }
- }else{
- textboxEl.hide();
- textareaEl.hide();
- }
- progressEl.setDisplayed(opt.progress === true);
- this.updateProgress(0);
- activeTextEl.dom.value = opt.value || "";
- if(opt.prompt){
- dlg.setDefaultButton(activeTextEl);
- }else{
- var bs = opt.buttons;
- var db = null;
- if(bs && bs.ok){
- db = buttons["ok"];
- }else if(bs && bs.yes){
- db = buttons["yes"];
- }
- dlg.setDefaultButton(db);
- }
- bwidth = updateButtons(opt.buttons);
- this.updateText(opt.msg);
- if(opt.cls){
- d.el.addClass(opt.cls);
- }
- d.proxyDrag = opt.proxyDrag === true;
- d.modal = opt.modal !== false;
- d.mask = opt.modal !== false ? mask : false;
- if(!d.isVisible()){
- // force it to the end of the z-index stack so it gets a cursor in FF
- document.body.appendChild(dlg.el.dom);
- d.animateTarget = null;
- d.show(options.animEl);
- }
- dlg.toFront();
- return this;
- },
+ * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
+ * resizer.east.setDisplayed(false);</p>
+ * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
+ * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
+ * resize operation's new size (defaults to [0, 0])
+ * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
+ * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
+ * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+ * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+ * @cfg {Boolean} enabled False to disable resizing (defaults to true)
+ * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
+ * @cfg {Number} width The width of the element in pixels (defaults to null)
+ * @cfg {Number} height The height of the element in pixels (defaults to null)
+ * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
+ * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
+ * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
+ * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
+ * @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
+ * in favor of the handles config option (defaults to false)
+ * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
+ * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
+ * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
+ * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
+ * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
+ * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
+ * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
+ * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+ * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
+ * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
+ * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
+ * @constructor
+ * Create a new resizable component
+ * @param {String/HTMLElement/Roo.Element} el The id or element to resize
+ * @param {Object} config configuration options
+ */
+Roo.Resizable = function(el, config)
+{
+ this.el = Roo.get(el);
- /**
- * Displays a message box with a progress bar. This message box has no buttons and is not closeable by
- * the user. You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
- * and closing the message box when the process is complete.
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @return {Roo.MessageBox} This message box
- */
- progress : function(title, msg){
- this.show({
- title : title,
- msg : msg,
- buttons: false,
- progress:true,
- closable:false,
- minWidth: this.minProgressWidth,
- modal : true
- });
- return this;
- },
+ if(config && config.wrap){
+ config.resizeChild = this.el;
+ this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
+ this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
+ this.el.setStyle("overflow", "hidden");
+ this.el.setPositioning(config.resizeChild.getPositioning());
+ config.resizeChild.clearPositioning();
+ if(!config.width || !config.height){
+ var csize = config.resizeChild.getSize();
+ this.el.setSize(csize.width, csize.height);
+ }
+ if(config.pinned && !config.adjustments){
+ config.adjustments = "auto";
+ }
+ }
- /**
- * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
- * If a callback function is passed it will be called after the user clicks the button, and the
- * id of the button that was clicked will be passed as the only parameter to the callback
- * (could also be the top-right close button).
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @return {Roo.MessageBox} This message box
- */
- alert : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OK,
- fn: fn,
- scope : scope,
- modal : true
- });
- return this;
- },
+ this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
+ this.proxy.unselectable();
+ this.proxy.enableDisplayMode('block');
- /**
- * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
- * interaction while waiting for a long-running process to complete that does not have defined intervals.
- * You are responsible for closing the message box when the process is complete.
- * @param {String} msg The message box body text
- * @param {String} title (optional) The title bar text
- * @return {Roo.MessageBox} This message box
- */
- wait : function(msg, title){
- this.show({
- title : title,
- msg : msg,
- buttons: false,
- closable:false,
- progress:true,
- modal:true,
- width:300,
- wait:true
- });
- waitTimer = Roo.TaskMgr.start({
- run: function(i){
- Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
- },
- interval: 1000
- });
- return this;
- },
+ Roo.apply(this, config);
- /**
- * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
- * If a callback function is passed it will be called after the user clicks either button, and the id of the
- * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @return {Roo.MessageBox} This message box
- */
- confirm : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.YESNO,
- fn: fn,
- scope : scope,
- modal : true
- });
- return this;
- },
+ if(this.pinned){
+ this.disableTrackOver = true;
+ this.el.addClass("x-resizable-pinned");
+ }
+ // if the element isn't positioned, make it relative
+ var position = this.el.getStyle("position");
+ if(position != "absolute" && position != "fixed"){
+ this.el.setStyle("position", "relative");
+ }
+ if(!this.handles){ // no handles passed, must be legacy style
+ this.handles = 's,e,se';
+ if(this.multiDirectional){
+ this.handles += ',n,w';
+ }
+ }
+ if(this.handles == "all"){
+ this.handles = "n s e w ne nw se sw";
+ }
+ var hs = this.handles.split(/\s*?[,;]\s*?| /);
+ var ps = Roo.Resizable.positions;
+ for(var i = 0, len = hs.length; i < len; i++){
+ if(hs[i] && ps[hs[i]]){
+ var pos = ps[hs[i]];
+ this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
+ }
+ }
+ // legacy
+ this.corner = this.southeast;
+
+ // updateBox = the box can move..
+ if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
+ this.updateBox = true;
+ }
- /**
- * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
- * JavaScript's Window.prompt). The prompt can be a single-line or multi-line textbox. If a callback function
- * is passed it will be called after the user clicks either button, and the id of the button that was clicked
- * (could also be the top-right close button) and the text that was entered will be passed as the two
- * parameters to the callback.
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
- * property, or the height in pixels to create the textbox (defaults to false / single-line)
- * @return {Roo.MessageBox} This message box
- */
- prompt : function(title, msg, fn, scope, multiline){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OKCANCEL,
- fn: fn,
- minWidth:250,
- scope : scope,
- prompt:true,
- multiline: multiline,
- modal : true
- });
- return this;
- },
+ this.activeHandle = null;
- /**
- * Button config that displays a single OK button
- * @type Object
- */
- OK : {ok:true},
- /**
- * Button config that displays Yes and No buttons
- * @type Object
- */
- YESNO : {yes:true, no:true},
- /**
- * Button config that displays OK and Cancel buttons
- * @type Object
- */
- OKCANCEL : {ok:true, cancel:true},
- /**
- * Button config that displays Yes, No and Cancel buttons
- * @type Object
- */
- YESNOCANCEL : {yes:true, no:true, cancel:true},
+ if(this.resizeChild){
+ if(typeof this.resizeChild == "boolean"){
+ this.resizeChild = Roo.get(this.el.dom.firstChild, true);
+ }else{
+ this.resizeChild = Roo.get(this.resizeChild, true);
+ }
+ }
+
+ if(this.adjustments == "auto"){
+ var rc = this.resizeChild;
+ var hw = this.west, he = this.east, hn = this.north, hs = this.south;
+ if(rc && (hw || hn)){
+ rc.position("relative");
+ rc.setLeft(hw ? hw.el.getWidth() : 0);
+ rc.setTop(hn ? hn.el.getHeight() : 0);
+ }
+ this.adjustments = [
+ (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
+ (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
+ ];
+ }
+
+ if(this.draggable){
+ this.dd = this.dynamic ?
+ this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
+ this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
+ }
+ // public events
+ this.addEvents({
/**
- * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
- * @type Number
+ * @event beforeresize
+ * Fired before resize is allowed. Set enabled to false to cancel resize.
+ * @param {Roo.Resizable} this
+ * @param {Roo.EventObject} e The mousedown event
*/
- defaultTextHeight : 75,
+ "beforeresize" : true,
/**
- * The maximum width in pixels of the message box (defaults to 600)
- * @type Number
+ * @event resizing
+ * Fired a resizing.
+ * @param {Roo.Resizable} this
+ * @param {Number} x The new x position
+ * @param {Number} y The new y position
+ * @param {Number} w The new w width
+ * @param {Number} h The new h hight
+ * @param {Roo.EventObject} e The mouseup event
*/
- maxWidth : 600,
+ "resizing" : true,
/**
- * The minimum width in pixels of the message box (defaults to 100)
- * @type Number
+ * @event resize
+ * Fired after a resize.
+ * @param {Roo.Resizable} this
+ * @param {Number} width The new width
+ * @param {Number} height The new height
+ * @param {Roo.EventObject} e The mouseup event
*/
- minWidth : 100,
+ "resize" : true
+ });
+
+ if(this.width !== null && this.height !== null){
+ this.resizeTo(this.width, this.height);
+ }else{
+ this.updateChildSize();
+ }
+ if(Roo.isIE){
+ this.el.dom.style.zoom = 1;
+ }
+ Roo.Resizable.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.Resizable, Roo.util.Observable, {
+ resizeChild : false,
+ adjustments : [0, 0],
+ minWidth : 5,
+ minHeight : 5,
+ maxWidth : 10000,
+ maxHeight : 10000,
+ enabled : true,
+ animate : false,
+ duration : .35,
+ dynamic : false,
+ handles : false,
+ multiDirectional : false,
+ disableTrackOver : false,
+ easing : 'easeOutStrong',
+ widthIncrement : 0,
+ heightIncrement : 0,
+ pinned : false,
+ width : null,
+ height : null,
+ preserveRatio : false,
+ transparent: false,
+ minX: 0,
+ minY: 0,
+ draggable: false,
+
/**
- * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
- * for setting a different minimum width than text-only dialogs may need (defaults to 250)
- * @type Number
+ * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
*/
- minProgressWidth : 250,
+ constrainTo: undefined,
/**
- * An object containing the default button text strings that can be overriden for localized language support.
- * Supported properties are: ok, cancel, yes and no.
- * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
- * @type Object
+ * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
*/
- buttonText : {
- ok : "OK",
- cancel : "Cancel",
- yes : "Yes",
- no : "No"
- }
- };
-}();
+ resizeRegion: undefined,
-/**
- * Shorthand for {@link Roo.MessageBox}
- */
-Roo.Msg = Roo.MessageBox;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.QuickTips
- * Provides attractive and customizable tooltips for any element.
- * @static
- */
-Roo.QuickTips = function(){
- var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
- var ce, bd, xy, dd;
- var visible = false, disabled = true, inited = false;
- var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
-
- var onOver = function(e){
- if(disabled){
- return;
- }
- var t = e.getTarget();
- if(!t || t.nodeType !== 1 || t == document || t == document.body){
- return;
- }
- if(ce && t == ce.el){
- clearTimeout(hideProc);
- return;
- }
- if(t && tagEls[t.id]){
- tagEls[t.id].el = t;
- showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
- return;
- }
- var ttp, et = Roo.fly(t);
- var ns = cfg.namespace;
- if(tm.interceptTitles && t.title){
- ttp = t.title;
- t.qtip = ttp;
- t.removeAttribute("title");
- e.preventDefault();
- }else{
- ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
- }
- if(ttp){
- showProc = show.defer(tm.showDelay, tm, [{
- el: t,
- text: ttp.replace(/\\n/g,'<br/>'),
- width: et.getAttributeNS(ns, cfg.width),
- autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
- title: et.getAttributeNS(ns, cfg.title),
- cls: et.getAttributeNS(ns, cfg.cls)
- }]);
- }
- };
-
- var onOut = function(e){
- clearTimeout(showProc);
- var t = e.getTarget();
- if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
- hideProc = setTimeout(hide, tm.hideDelay);
- }
- };
-
- var onMove = function(e){
- if(disabled){
- return;
- }
- xy = e.getXY();
- xy[1] += 18;
- if(tm.trackMouse && ce){
- el.setXY(xy);
- }
- };
-
- var onDown = function(e){
- clearTimeout(showProc);
- clearTimeout(hideProc);
- if(!e.within(el)){
- if(tm.hideOnClick){
- hide();
- tm.disable();
- tm.enable.defer(100, tm);
+
+ /**
+ * Perform a manual resize
+ * @param {Number} width
+ * @param {Number} height
+ */
+ resizeTo : function(width, height){
+ this.el.setSize(width, height);
+ this.updateChildSize();
+ this.fireEvent("resize", this, width, height, null);
+ },
+
+ // private
+ startSizing : function(e, handle){
+ this.fireEvent("beforeresize", this, e);
+ if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
+
+ if(!this.overlay){
+ this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: " "});
+ this.overlay.unselectable();
+ this.overlay.enableDisplayMode("block");
+ this.overlay.on("mousemove", this.onMouseMove, this);
+ this.overlay.on("mouseup", this.onMouseUp, this);
}
- }
- };
-
- var getPad = function(){
- return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
- };
+ this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
- var show = function(o){
- if(disabled){
- return;
+ this.resizing = true;
+ this.startBox = this.el.getBox();
+ this.startPoint = e.getXY();
+ this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
+ (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+
+ this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this.overlay.show();
+
+ if(this.constrainTo) {
+ var ct = Roo.get(this.constrainTo);
+ this.resizeRegion = ct.getRegion().adjust(
+ ct.getFrameWidth('t'),
+ ct.getFrameWidth('l'),
+ -ct.getFrameWidth('b'),
+ -ct.getFrameWidth('r')
+ );
+ }
+
+ this.proxy.setStyle('visibility', 'hidden'); // workaround display none
+ this.proxy.show();
+ this.proxy.setBox(this.startBox);
+ if(!this.dynamic){
+ this.proxy.setStyle('visibility', 'visible');
+ }
}
- clearTimeout(dismissProc);
- ce = o;
- if(removeCls){ // in case manually hidden
- el.removeClass(removeCls);
- removeCls = null;
+ },
+
+ // private
+ onMouseDown : function(handle, e){
+ if(this.enabled){
+ e.stopEvent();
+ this.activeHandle = handle;
+ this.startSizing(e, handle);
}
- if(ce.cls){
- el.addClass(ce.cls);
- removeCls = ce.cls;
+ },
+
+ // private
+ onMouseUp : function(e){
+ var size = this.resizeElement();
+ this.resizing = false;
+ this.handleOut();
+ this.overlay.hide();
+ this.proxy.hide();
+ this.fireEvent("resize", this, size.width, size.height, e);
+ },
+
+ // private
+ updateChildSize : function(){
+
+ if(this.resizeChild){
+ var el = this.el;
+ var child = this.resizeChild;
+ var adj = this.adjustments;
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ // Second call here for IE
+ // The first call enables instant resizing and
+ // the second call corrects scroll bars if they
+ // exist
+ if(Roo.isIE){
+ setTimeout(function(){
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ }, 10);
+ }
}
- if(ce.title){
- tipTitle.update(ce.title);
- tipTitle.show();
- }else{
- tipTitle.update('');
- tipTitle.hide();
+ },
+
+ // private
+ snap : function(value, inc, min){
+ if(!inc || !value) {
+ return value;
}
- el.dom.style.width = tm.maxWidth+'px';
- //tipBody.dom.style.width = '';
- tipBodyText.update(o.text);
- var p = getPad(), w = ce.width;
- if(!w){
- var td = tipBodyText.dom;
- var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
- if(aw > tm.maxWidth){
- w = tm.maxWidth;
- }else if(aw < tm.minWidth){
- w = tm.minWidth;
+ var newValue = value;
+ var m = value % inc;
+ if(m > 0){
+ if(m > (inc/2)){
+ newValue = value + (inc-m);
}else{
- w = aw;
- }
- }
- //tipBody.setWidth(w);
- el.setWidth(parseInt(w, 10) + p);
- if(ce.autoHide === false){
- close.setDisplayed(true);
- if(dd){
- dd.unlock();
- }
- }else{
- close.setDisplayed(false);
- if(dd){
- dd.lock();
+ newValue = value - m;
}
}
- if(xy){
- el.avoidY = xy[1]-18;
- el.setXY(xy);
- }
- if(tm.animate){
- el.setOpacity(.1);
- el.setStyle("visibility", "visible");
- el.fadeIn({callback: afterShow});
+ return Math.max(min, newValue);
+ },
+
+ // private
+ resizeElement : function(){
+ var box = this.proxy.getBox();
+ if(this.updateBox){
+ this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
}else{
- afterShow();
- }
- };
-
- var afterShow = function(){
- if(ce){
- el.show();
- esc.enable();
- if(tm.autoDismiss && ce.autoHide !== false){
- dismissProc = setTimeout(hide, tm.autoDismissDelay);
- }
+ this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
}
- };
-
- var hide = function(noanim){
- clearTimeout(dismissProc);
- clearTimeout(hideProc);
- ce = null;
- if(el.isVisible()){
- esc.disable();
- if(noanim !== true && tm.animate){
- el.fadeOut({callback: afterHide});
- }else{
- afterHide();
- }
+ this.updateChildSize();
+ if(!this.dynamic){
+ this.proxy.hide();
}
- };
-
- var afterHide = function(){
- el.hide();
- if(removeCls){
- el.removeClass(removeCls);
- removeCls = null;
+ return box;
+ },
+
+ // private
+ constrain : function(v, diff, m, mx){
+ if(v - diff < m){
+ diff = v - m;
+ }else if(v - diff > mx){
+ diff = mx - v;
}
- };
-
- return {
- /**
- * @cfg {Number} minWidth
- * The minimum width of the quick tip (defaults to 40)
- */
- minWidth : 40,
- /**
- * @cfg {Number} maxWidth
- * The maximum width of the quick tip (defaults to 300)
- */
- maxWidth : 300,
- /**
- * @cfg {Boolean} interceptTitles
- * True to automatically use the element's DOM title value if available (defaults to false)
- */
- interceptTitles : false,
- /**
- * @cfg {Boolean} trackMouse
- * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
- */
- trackMouse : false,
- /**
- * @cfg {Boolean} hideOnClick
- * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
- */
- hideOnClick : true,
- /**
- * @cfg {Number} showDelay
- * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
- */
- showDelay : 500,
- /**
- * @cfg {Number} hideDelay
- * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
- */
- hideDelay : 200,
- /**
- * @cfg {Boolean} autoHide
- * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
- * Used in conjunction with hideDelay.
- */
- autoHide : true,
- /**
- * @cfg {Boolean}
- * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
- * (defaults to true). Used in conjunction with autoDismissDelay.
- */
- autoDismiss : true,
- /**
- * @cfg {Number}
- * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
- */
- autoDismissDelay : 5000,
- /**
- * @cfg {Boolean} animate
- * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
- */
- animate : false,
+ return diff;
+ },
- /**
- * @cfg {String} title
- * Title text to display (defaults to ''). This can be any valid HTML markup.
- */
- title: '',
- /**
- * @cfg {String} text
- * Body text to display (defaults to ''). This can be any valid HTML markup.
- */
- text : '',
- /**
- * @cfg {String} cls
- * A CSS class to apply to the base quick tip element (defaults to '').
- */
- cls : '',
- /**
- * @cfg {Number} width
- * Width in pixels of the quick tip (defaults to auto). Width will be ignored if it exceeds the bounds of
- * minWidth or maxWidth.
- */
- width : null,
+ // private
+ onMouseMove : function(e){
+
+ if(this.enabled){
+ try{// try catch so if something goes wrong the user doesn't get hung
- /**
- * Initialize and enable QuickTips for first use. This should be called once before the first attempt to access
- * or display QuickTips in a page.
- */
- init : function(){
- tm = Roo.QuickTips;
- cfg = tm.tagConfig;
- if(!inited){
- if(!Roo.isReady){ // allow calling of init() before onReady
- Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
- return;
- }
- el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
- el.fxDefaults = {stopFx: true};
- // maximum custom styling
- //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
- el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');
- tipTitle = el.child('h3');
- tipTitle.enableDisplayMode("block");
- tipBody = el.child('div.x-tip-bd');
- tipBodyText = el.child('div.x-tip-bd-inner');
- //bdLeft = el.child('div.x-tip-bd-left');
- //bdRight = el.child('div.x-tip-bd-right');
- close = el.child('div.x-tip-close');
- close.enableDisplayMode("block");
- close.on("click", hide);
- var d = Roo.get(document);
- d.on("mousedown", onDown);
- d.on("mouseover", onOver);
- d.on("mouseout", onOut);
- d.on("mousemove", onMove);
- esc = d.addKeyListener(27, hide);
- esc.disable();
- if(Roo.dd.DD){
- dd = el.initDD("default", null, {
- onDrag : function(){
- el.sync();
- }
- });
- dd.setHandleElId(tipTitle.id);
- dd.lock();
- }
- inited = true;
- }
- this.enable();
- },
+ if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
+ return;
+ }
- /**
- * Configures a new quick tip instance and assigns it to a target element. The following config options
- * are supported:
- * <pre>
-Property Type Description
----------- --------------------- ------------------------------------------------------------------------
-target Element/String/Array An Element, id or array of ids that this quick tip should be tied to
- * </ul>
- * @param {Object} config The config object
- */
- register : function(config){
- var cs = config instanceof Array ? config : arguments;
- for(var i = 0, len = cs.length; i < len; i++) {
- var c = cs[i];
- var target = c.target;
- if(target){
- if(target instanceof Array){
- for(var j = 0, jlen = target.length; j < jlen; j++){
- tagEls[target[j]] = c;
- }
- }else{
- tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
- }
- }
- }
- },
+ //var curXY = this.startPoint;
+ var curSize = this.curSize || this.startBox;
+ var x = this.startBox.x, y = this.startBox.y;
+ var ox = x, oy = y;
+ var w = curSize.width, h = curSize.height;
+ var ow = w, oh = h;
+ var mw = this.minWidth, mh = this.minHeight;
+ var mxw = this.maxWidth, mxh = this.maxHeight;
+ var wi = this.widthIncrement;
+ var hi = this.heightIncrement;
- /**
- * Removes this quick tip from its element and destroys it.
- * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
- */
- unregister : function(el){
- delete tagEls[Roo.id(el)];
- },
+ var eventXY = e.getXY();
+ var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
+ var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
- /**
- * Enable this quick tip.
- */
- enable : function(){
- if(inited && disabled){
- locks.pop();
- if(locks.length < 1){
- disabled = false;
- }
- }
- },
+ var pos = this.activeHandle.position;
- /**
- * Disable this quick tip.
- */
- disable : function(){
- disabled = true;
- clearTimeout(showProc);
- clearTimeout(hideProc);
- clearTimeout(dismissProc);
- if(ce){
- hide(true);
- }
- locks.push(1);
- },
+ switch(pos){
+ case "east":
+ w += diffX;
+ w = Math.min(Math.max(mw, w), mxw);
+ break;
+
+ case "south":
+ h += diffY;
+ h = Math.min(Math.max(mh, h), mxh);
+ break;
+ case "southeast":
+ w += diffX;
+ h += diffY;
+ w = Math.min(Math.max(mw, w), mxw);
+ h = Math.min(Math.max(mh, h), mxh);
+ break;
+ case "north":
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ break;
+ case "hdrag":
+
+ if (wi) {
+ var adiffX = Math.abs(diffX);
+ var sub = (adiffX % wi); // how much
+ if (sub > (wi/2)) { // far enough to snap
+ diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
+ } else {
+ // remove difference..
+ diffX = (diffX > 0) ? diffX-sub : diffX+sub;
+ }
+ }
+ x += diffX;
+ x = Math.max(this.minX, x);
+ break;
+ case "west":
+ diffX = this.constrain(w, diffX, mw, mxw);
+ x += diffX;
+ w -= diffX;
+ break;
+ case "northeast":
+ w += diffX;
+ w = Math.min(Math.max(mw, w), mxw);
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ break;
+ case "northwest":
+ diffX = this.constrain(w, diffX, mw, mxw);
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ x += diffX;
+ w -= diffX;
+ break;
+ case "southwest":
+ diffX = this.constrain(w, diffX, mw, mxw);
+ h += diffY;
+ h = Math.min(Math.max(mh, h), mxh);
+ x += diffX;
+ w -= diffX;
+ break;
+ }
- /**
- * Returns true if the quick tip is enabled, else false.
- */
- isEnabled : function(){
- return !disabled;
- },
+ var sw = this.snap(w, wi, mw);
+ var sh = this.snap(h, hi, mh);
+ if(sw != w || sh != h){
+ switch(pos){
+ case "northeast":
+ y -= sh - h;
+ break;
+ case "north":
+ y -= sh - h;
+ break;
+ case "southwest":
+ x -= sw - w;
+ break;
+ case "west":
+ x -= sw - w;
+ break;
+ case "northwest":
+ x -= sw - w;
+ y -= sh - h;
+ break;
+ }
+ w = sw;
+ h = sh;
+ }
- // private
- tagConfig : {
- namespace : "roo", // was ext?? this may break..
- alt_namespace : "ext",
- attribute : "qtip",
- width : "width",
- target : "target",
- title : "qtitle",
- hide : "hide",
- cls : "qclass"
- }
- };
-}();
+ if(this.preserveRatio){
+ switch(pos){
+ case "southeast":
+ case "east":
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ w = ow * (h/oh);
+ break;
+ case "south":
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ break;
+ case "northeast":
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ break;
+ case "north":
+ var tw = w;
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ x += (tw - w) / 2;
+ break;
+ case "southwest":
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ var tw = w;
+ w = ow * (h/oh);
+ x += tw - w;
+ break;
+ case "west":
+ var th = h;
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ y += (th - h) / 2;
+ var tw = w;
+ w = ow * (h/oh);
+ x += tw - w;
+ break;
+ case "northwest":
+ var tw = w;
+ var th = h;
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ w = ow * (h/oh);
+ y += th - h;
+ x += tw - w;
+ break;
-// backwards compat
-Roo.QuickTips.tips = Roo.QuickTips.register;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+ }
+ }
+ if (pos == 'hdrag') {
+ w = ow;
+ }
+ this.proxy.setBounds(x, y, w, h);
+ if(this.dynamic){
+ this.resizeElement();
+ }
+ }catch(e){}
+ }
+ this.fireEvent("resizing", this, x, y, w, h, e);
+ },
-/**
- * @class Roo.tree.TreePanel
- * @extends Roo.data.Tree
- * @cfg {Roo.tree.TreeNode} root The root node
- * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
- * @cfg {Boolean} lines false to disable tree lines (defaults to true)
- * @cfg {Boolean} enableDD true to enable drag and drop
- * @cfg {Boolean} enableDrag true to enable just drag
- * @cfg {Boolean} enableDrop true to enable just drop
- * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
- * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
- * @cfg {String} ddGroup The DD group this TreePanel belongs to
- * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
- * @cfg {Boolean} ddScroll true to enable YUI body scrolling
- * @cfg {Boolean} containerScroll true to register this container with ScrollManager
- * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
- * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
- * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
- * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
- * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
- * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
- * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
- * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
- * @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- * @cfg {Function} rendererTip DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- *
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.tree.TreePanel = function(el, config){
- var root = false;
- var loader = false;
- if (config.root) {
- root = config.root;
- delete config.root;
- }
- if (config.loader) {
- loader = config.loader;
- delete config.loader;
- }
-
- Roo.apply(this, config);
- Roo.tree.TreePanel.superclass.constructor.call(this);
- this.el = Roo.get(el);
- this.el.addClass('x-tree');
- //console.log(root);
- if (root) {
- this.setRootNode( Roo.factory(root, Roo.tree));
- }
- if (loader) {
- this.loader = Roo.factory(loader, Roo.tree);
- }
- /**
- * Read-only. The id of the container element becomes this TreePanel's id.
- */
- this.id = this.el.id;
- this.addEvents({
- /**
- * @event beforeload
- * Fires before a node is loaded, return false to cancel
- * @param {Node} node The node being loaded
- */
- "beforeload" : true,
- /**
- * @event load
- * Fires when a node is loaded
- * @param {Node} node The node that was loaded
- */
- "load" : true,
- /**
- * @event textchange
- * Fires when the text for a node is changed
- * @param {Node} node The node
- * @param {String} text The new text
- * @param {String} oldText The old text
- */
- "textchange" : true,
- /**
- * @event beforeexpand
- * Fires before a node is expanded, return false to cancel.
- * @param {Node} node The node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforeexpand" : true,
- /**
- * @event beforecollapse
- * Fires before a node is collapsed, return false to cancel.
- * @param {Node} node The node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforecollapse" : true,
- /**
- * @event expand
- * Fires when a node is expanded
- * @param {Node} node The node
- */
- "expand" : true,
- /**
- * @event disabledchange
- * Fires when the disabled status of a node changes
- * @param {Node} node The node
- * @param {Boolean} disabled
- */
- "disabledchange" : true,
- /**
- * @event collapse
- * Fires when a node is collapsed
- * @param {Node} node The node
- */
- "collapse" : true,
- /**
- * @event beforeclick
- * Fires before click processing on a node. Return false to cancel the default action.
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "beforeclick":true,
- /**
- * @event checkchange
- * Fires when a node with a checkbox's checked property changes
- * @param {Node} this This node
- * @param {Boolean} checked
- */
- "checkchange":true,
- /**
- * @event click
- * Fires when a node is clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "click":true,
- /**
- * @event dblclick
- * Fires when a node is double clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "dblclick":true,
- /**
- * @event contextmenu
- * Fires when a node is right clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "contextmenu":true,
- /**
- * @event beforechildrenrendered
- * Fires right before the child nodes for a node are rendered
- * @param {Node} node The node
- */
- "beforechildrenrendered":true,
- /**
- * @event startdrag
- * Fires when a node starts being dragged
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {event} e The raw browser event
- */
- "startdrag" : true,
- /**
- * @event enddrag
- * Fires when a drag operation is complete
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {event} e The raw browser event
- */
- "enddrag" : true,
- /**
- * @event dragdrop
- * Fires when a dragged node is dropped on a valid DD target
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {DD} dd The dd it was dropped on
- * @param {event} e The raw browser event
- */
- "dragdrop" : true,
- /**
- * @event beforenodedrop
- * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
- * to be inserted by setting them on this object.</li>
- * <li>cancel - Set this to true to cancel the drop.</li>
- * </ul>
- * @param {Object} dropEvent
- */
- "beforenodedrop" : true,
- /**
- * @event nodedrop
- * Fires after a DD object is dropped on a node in this tree. The dropEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Dropped node(s).</li>
- * </ul>
- * @param {Object} dropEvent
- */
- "nodedrop" : true,
- /**
- * @event nodedragover
- * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Drop node(s) provided by the source.</li>
- * <li>cancel - Set this to true to signal drop not allowed.</li>
- * </ul>
- * @param {Object} dragOverEvent
- */
- "nodedragover" : true,
- /**
- * @event appendnode
- * Fires when append node to the tree
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {Number} index The index of the newly appended node
- */
- "appendnode" : true
-
- });
- if(this.singleExpand){
- this.on("beforeexpand", this.restrictExpand, this);
- }
- if (this.editor) {
- this.editor.tree = this;
- this.editor = Roo.factory(this.editor, Roo.tree);
- }
-
- if (this.selModel) {
- this.selModel = Roo.factory(this.selModel, Roo.tree);
- }
-
-};
-Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
- rootVisible : true,
- animate: Roo.enableFx,
- lines : true,
- enableDD : false,
- hlDrop : Roo.enableFx,
-
- renderer: false,
-
- rendererTip: false,
// private
- restrictExpand : function(node){
- var p = node.parentNode;
- if(p){
- if(p.expandedChild && p.expandedChild.parentNode == p){
- p.expandedChild.collapse();
- }
- p.expandedChild = node;
+ handleOver : function(){
+ if(this.enabled){
+ this.el.addClass("x-resizable-over");
}
},
- // private override
- setRootNode : function(node){
- Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
- if(!this.rootVisible){
- node.ui = new Roo.tree.RootTreeNodeUI(node);
+ // private
+ handleOut : function(){
+ if(!this.resizing){
+ this.el.removeClass("x-resizable-over");
}
- return node;
},
/**
- * Returns the container element for this TreePanel
+ * Returns the element this component is bound to.
+ * @return {Roo.Element}
*/
getEl : function(){
return this.el;
},
/**
- * Returns the default TreeLoader for this TreePanel
- */
- getLoader : function(){
- return this.loader;
- },
-
- /**
- * Expand all nodes
+ * Returns the resizeChild element (or null).
+ * @return {Roo.Element}
*/
- expandAll : function(){
- this.root.expand(true);
+ getResizeChild : function(){
+ return this.resizeChild;
},
-
- /**
- * Collapse all nodes
- */
- collapseAll : function(){
- this.root.collapse(true);
+ groupHandler : function()
+ {
+
},
-
/**
- * Returns the selection model used by this TreePanel
+ * Destroys this resizable. If the element was wrapped and
+ * removeEl is not true then the element remains.
+ * @param {Boolean} removeEl (optional) true to remove the element from the DOM
*/
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.tree.DefaultSelectionModel();
+ destroy : function(removeEl){
+ this.proxy.remove();
+ if(this.overlay){
+ this.overlay.removeAllListeners();
+ this.overlay.remove();
}
- return this.selModel;
- },
-
- /**
- * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
- * @param {String} attribute (optional) Defaults to null (return the actual nodes)
- * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
- * @return {Array}
- */
- getChecked : function(a, startNode){
- startNode = startNode || this.root;
- var r = [];
- var f = function(){
- if(this.attributes.checked){
- r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
- }
- }
- startNode.cascade(f);
- return r;
- },
-
- /**
- * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
- * @param {String} path
- * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
- * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
- * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
- */
- expandPath : function(path, attr, callback){
- attr = attr || "id";
- var keys = path.split(this.pathSeparator);
- var curNode = this.root;
- if(curNode.attributes[attr] != keys[1]){ // invalid root
- if(callback){
- callback(false, null);
+ var ps = Roo.Resizable.positions;
+ for(var k in ps){
+ if(typeof ps[k] != "function" && this[ps[k]]){
+ var h = this[ps[k]];
+ h.el.removeAllListeners();
+ h.el.remove();
}
- return;
}
- var index = 1;
- var f = function(){
- if(++index == keys.length){
- if(callback){
- callback(true, curNode);
- }
- return;
- }
- var c = curNode.findChild(attr, keys[index]);
- if(!c){
- if(callback){
- callback(false, curNode);
- }
- return;
- }
- curNode = c;
- c.expand(false, false, f);
- };
- curNode.expand(false, false, f);
- },
-
- /**
- * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
- * @param {String} path
- * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
- * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
- * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
- */
- selectPath : function(path, attr, callback){
- attr = attr || "id";
- var keys = path.split(this.pathSeparator);
- var v = keys.pop();
- if(keys.length > 0){
- var f = function(success, node){
- if(success && node){
- var n = node.findChild(attr, v);
- if(n){
- n.select();
- if(callback){
- callback(true, n);
- }
- }else if(callback){
- callback(false, n);
- }
- }else{
- if(callback){
- callback(false, n);
- }
- }
- };
- this.expandPath(keys.join(this.pathSeparator), attr, f);
- }else{
- this.root.select();
- if(callback){
- callback(true, this.root);
- }
+ if(removeEl){
+ this.el.update("");
+ this.el.remove();
}
- },
+ }
+});
- getTreeEl : function(){
- return this.el;
- },
+// private
+// hash to map config positions to true positions
+Roo.Resizable.positions = {
+ n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast",
+ hd: "hdrag"
+};
- /**
- * Trigger rendering of this TreePanel
- */
- render : function(){
- if (this.innerCt) {
- return this; // stop it rendering more than once!!
- }
-
- this.innerCt = this.el.createChild({tag:"ul",
- cls:"x-tree-root-ct " +
- (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
+// private
+Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
+ if(!this.tpl){
+ // only initialize the template if resizable is used
+ var tpl = Roo.DomHelper.createTemplate(
+ {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
+ );
+ tpl.compile();
+ Roo.Resizable.Handle.prototype.tpl = tpl;
+ }
+ this.position = pos;
+ this.rz = rz;
+ // show north drag fro topdra
+ var handlepos = pos == 'hdrag' ? 'north' : pos;
+
+ this.el = this.tpl.append(rz.el.dom, [handlepos], true);
+ if (pos == 'hdrag') {
+ this.el.setStyle('cursor', 'pointer');
+ }
+ this.el.unselectable();
+ if(transparent){
+ this.el.setOpacity(0);
+ }
+ this.el.on("mousedown", this.onMouseDown, this);
+ if(!disableTrackOver){
+ this.el.on("mouseover", this.onMouseOver, this);
+ this.el.on("mouseout", this.onMouseOut, this);
+ }
+};
- if(this.containerScroll){
- Roo.dd.ScrollManager.register(this.el);
- }
- if((this.enableDD || this.enableDrop) && !this.dropZone){
- /**
- * The dropZone used by this tree if drop is enabled
- * @type Roo.tree.TreeDropZone
- */
- this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
- ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
- });
- }
- if((this.enableDD || this.enableDrag) && !this.dragZone){
- /**
- * The dragZone used by this tree if drag is enabled
- * @type Roo.tree.TreeDragZone
- */
- this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
- ddGroup: this.ddGroup || "TreeDD",
- scroll: this.ddScroll
- });
- }
- this.getSelectionModel().init(this);
- if (!this.root) {
- Roo.log("ROOT not set in tree");
- return this;
- }
- this.root.render();
- if(!this.rootVisible){
- this.root.renderChildren();
- }
- return this;
+// private
+Roo.Resizable.Handle.prototype = {
+ afterResize : function(rz){
+ Roo.log('after?');
+ // do nothing
+ },
+ // private
+ onMouseDown : function(e){
+ this.rz.onMouseDown(this, e);
+ },
+ // private
+ onMouseOver : function(e){
+ this.rz.handleOver(this, e);
+ },
+ // private
+ onMouseOut : function(e){
+ this.rz.handleOut(this, e);
}
-});/*
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
/**
- * @class Roo.tree.DefaultSelectionModel
- * @extends Roo.util.Observable
- * The default single selection for a TreePanel.
- * @param {Object} cfg Configuration
+ * @class Roo.Editor
+ * @extends Roo.Component
+ * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
+ * @constructor
+ * Create a new Editor
+ * @param {Roo.form.Field} field The Field object (or descendant)
+ * @param {Object} config The config object
*/
-Roo.tree.DefaultSelectionModel = function(cfg){
- this.selNode = null;
-
-
-
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selected node changes
- * @param {DefaultSelectionModel} this
- * @param {TreeNode} node the new selection
- */
- "selectionchange" : true,
-
- /**
- * @event beforeselect
- * Fires before the selected node changes, return false to cancel the change
- * @param {DefaultSelectionModel} this
- * @param {TreeNode} node the new selection
- * @param {TreeNode} node the old selection
- */
- "beforeselect" : true
- });
-
- Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
+Roo.Editor = function(field, config){
+ Roo.Editor.superclass.constructor.call(this, config);
+ this.field = field;
+ this.addEvents({
+ /**
+ * @event beforestartedit
+ * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
+ * false from the handler of this event.
+ * @param {Editor} this
+ * @param {Roo.Element} boundEl The underlying element bound to this editor
+ * @param {Mixed} value The field value being set
+ */
+ "beforestartedit" : true,
+ /**
+ * @event startedit
+ * Fires when this editor is displayed
+ * @param {Roo.Element} boundEl The underlying element bound to this editor
+ * @param {Mixed} value The starting field value
+ */
+ "startedit" : true,
+ /**
+ * @event beforecomplete
+ * Fires after a change has been made to the field, but before the change is reflected in the underlying
+ * field. Saving the change to the field can be canceled by returning false from the handler of this event.
+ * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
+ * event will not fire since no edit actually occurred.
+ * @param {Editor} this
+ * @param {Mixed} value The current field value
+ * @param {Mixed} startValue The original field value
+ */
+ "beforecomplete" : true,
+ /**
+ * @event complete
+ * Fires after editing is complete and any changed value has been written to the underlying field.
+ * @param {Editor} this
+ * @param {Mixed} value The current field value
+ * @param {Mixed} startValue The original field value
+ */
+ "complete" : true,
+ /**
+ * @event specialkey
+ * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
+ * {@link Roo.EventObject#getKey} to determine which key was pressed.
+ * @param {Roo.form.Field} this
+ * @param {Roo.EventObject} e The event object
+ */
+ "specialkey" : true
+ });
};
-Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
- init : function(tree){
- this.tree = tree;
- tree.getTreeEl().on("keydown", this.onKeyDown, this);
- tree.on("click", this.onNodeClick, this);
- },
-
- onNodeClick : function(node, e){
- if (e.ctrlKey && this.selNode == node) {
- this.unselect(node);
- return;
- }
- this.select(node);
- },
-
+Roo.extend(Roo.Editor, Roo.Component, {
/**
- * Select a node.
- * @param {TreeNode} node The node to select
- * @return {TreeNode} The selected node
+ * @cfg {Boolean/String} autosize
+ * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
+ * or "height" to adopt the height only (defaults to false)
*/
- select : function(node){
- var last = this.selNode;
- if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
- if(last){
- last.ui.onSelectedChange(false);
- }
- this.selNode = node;
- node.ui.onSelectedChange(true);
- this.fireEvent("selectionchange", this, node, last);
- }
- return node;
- },
-
/**
- * Deselect a node.
- * @param {TreeNode} node The node to unselect
+ * @cfg {Boolean} revertInvalid
+ * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
+ * validation fails (defaults to true)
*/
- unselect : function(node){
- if(this.selNode == node){
- this.clearSelections();
- }
- },
-
/**
- * Clear all selections
+ * @cfg {Boolean} ignoreNoChange
+ * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
+ * the value has not changed (defaults to false). Applies only to string values - edits for other data types
+ * will never be ignored.
*/
- clearSelections : function(){
- var n = this.selNode;
- if(n){
- n.ui.onSelectedChange(false);
- this.selNode = null;
- this.fireEvent("selectionchange", this, null);
- }
- return n;
- },
-
/**
- * Get the selected node
- * @return {TreeNode} The selected node
+ * @cfg {Boolean} hideEl
+ * False to keep the bound element visible while the editor is displayed (defaults to true)
*/
- getSelectedNode : function(){
- return this.selNode;
- },
-
/**
- * Returns true if the node is selected
- * @param {TreeNode} node The node to check
- * @return {Boolean}
+ * @cfg {Mixed} value
+ * The data value of the underlying field (defaults to "")
*/
- isSelected : function(node){
- return this.selNode == node;
+ value : "",
+ /**
+ * @cfg {String} alignment
+ * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
+ */
+ alignment: "c-c?",
+ /**
+ * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
+ * for bottom-right shadow (defaults to "frame")
+ */
+ shadow : "frame",
+ /**
+ * @cfg {Boolean} constrain True to constrain the editor to the viewport
+ */
+ constrain : false,
+ /**
+ * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
+ */
+ completeOnEnter : false,
+ /**
+ * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
+ */
+ cancelOnEsc : false,
+ /**
+ * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
+ */
+ updateEl : false,
+
+ // private
+ onRender : function(ct, position){
+ this.el = new Roo.Layer({
+ shadow: this.shadow,
+ cls: "x-editor",
+ parentEl : ct,
+ shim : this.shim,
+ shadowOffset:4,
+ id: this.id,
+ constrain: this.constrain
+ });
+ this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
+ if(this.field.msgTarget != 'title'){
+ this.field.msgTarget = 'qtip';
+ }
+ this.field.render(this.el);
+ if(Roo.isGecko){
+ this.field.el.dom.setAttribute('autocomplete', 'off');
+ }
+ this.field.on("specialkey", this.onSpecialKey, this);
+ if(this.swallowKeys){
+ this.field.el.swallowEvent(['keydown','keypress']);
+ }
+ this.field.show();
+ this.field.on("blur", this.onBlur, this);
+ if(this.field.grow){
+ this.field.on("autosize", this.el.sync, this.el, {delay:1});
+ }
+ },
+
+ onSpecialKey : function(field, e)
+ {
+ //Roo.log('editor onSpecialKey');
+ if(this.completeOnEnter && e.getKey() == e.ENTER){
+ e.stopEvent();
+ this.completeEdit();
+ return;
+ }
+ // do not fire special key otherwise it might hide close the editor...
+ if(e.getKey() == e.ENTER){
+ return;
+ }
+ if(this.cancelOnEsc && e.getKey() == e.ESC){
+ this.cancelEdit();
+ return;
+ }
+ this.fireEvent('specialkey', field, e);
+
},
/**
- * Selects the node above the selected node in the tree, intelligently walking the nodes
- * @return TreeNode The new selection
+ * Starts the editing process and shows the editor.
+ * @param {String/HTMLElement/Element} el The element to edit
+ * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
+ * to the innerHTML of el.
*/
- selectPrevious : function(){
- var s = this.selNode || this.lastSelNode;
- if(!s){
- return null;
+ startEdit : function(el, value){
+ if(this.editing){
+ this.completeEdit();
}
- var ps = s.previousSibling;
- if(ps){
- if(!ps.isExpanded() || ps.childNodes.length < 1){
- return this.select(ps);
- } else{
- var lc = ps.lastChild;
- while(lc && lc.isExpanded() && lc.childNodes.length > 0){
- lc = lc.lastChild;
- }
- return this.select(lc);
+ this.boundEl = Roo.get(el);
+ var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
+ if(!this.rendered){
+ this.render(this.parentEl || document.body);
+ }
+ if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
+ return;
+ }
+ this.startValue = v;
+ this.field.setValue(v);
+ if(this.autoSize){
+ var sz = this.boundEl.getSize();
+ switch(this.autoSize){
+ case "width":
+ this.setSize(sz.width, "");
+ break;
+ case "height":
+ this.setSize("", sz.height);
+ break;
+ default:
+ this.setSize(sz.width, sz.height);
}
- } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
- return this.select(s.parentNode);
}
- return null;
+ this.el.alignTo(this.boundEl, this.alignment);
+ this.editing = true;
+ if(Roo.QuickTips){
+ Roo.QuickTips.disable();
+ }
+ this.show();
},
/**
- * Selects the node above the selected node in the tree, intelligently walking the nodes
- * @return TreeNode The new selection
+ * Sets the height and width of this editor.
+ * @param {Number} width The new width
+ * @param {Number} height The new height
*/
- selectNext : function(){
- var s = this.selNode || this.lastSelNode;
- if(!s){
- return null;
+ setSize : function(w, h){
+ this.field.setSize(w, h);
+ if(this.el){
+ this.el.sync();
}
- if(s.firstChild && s.isExpanded()){
- return this.select(s.firstChild);
- }else if(s.nextSibling){
- return this.select(s.nextSibling);
- }else if(s.parentNode){
- var newS = null;
- s.parentNode.bubble(function(){
- if(this.nextSibling){
- newS = this.getOwnerTree().selModel.select(this.nextSibling);
- return false;
- }
- });
- return newS;
- }
- return null;
},
- onKeyDown : function(e){
- var s = this.selNode || this.lastSelNode;
- // undesirable, but required
- var sm = this;
- if(!s){
- return;
- }
- var k = e.getKey();
- switch(k){
- case e.DOWN:
- e.stopEvent();
- this.selectNext();
- break;
- case e.UP:
- e.stopEvent();
- this.selectPrevious();
- break;
- case e.RIGHT:
- e.preventDefault();
- if(s.hasChildNodes()){
- if(!s.isExpanded()){
- s.expand();
- }else if(s.firstChild){
- this.select(s.firstChild, e);
- }
- }
- break;
- case e.LEFT:
- e.preventDefault();
- if(s.hasChildNodes() && s.isExpanded()){
- s.collapse();
- }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
- this.select(s.parentNode, e);
- }
- break;
- };
- }
-});
-
-/**
- * @class Roo.tree.MultiSelectionModel
- * @extends Roo.util.Observable
- * Multi selection for a TreePanel.
- * @param {Object} cfg Configuration
- */
-Roo.tree.MultiSelectionModel = function(){
- this.selNodes = [];
- this.selMap = {};
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selected nodes change
- * @param {MultiSelectionModel} this
- * @param {Array} nodes Array of the selected nodes
- */
- "selectionchange" : true
- });
- Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
-
-};
-
-Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
- init : function(tree){
- this.tree = tree;
- tree.getTreeEl().on("keydown", this.onKeyDown, this);
- tree.on("click", this.onNodeClick, this);
- },
-
- onNodeClick : function(node, e){
- this.select(node, e, e.ctrlKey);
- },
-
/**
- * Select a node.
- * @param {TreeNode} node The node to select
- * @param {EventObject} e (optional) An event associated with the selection
- * @param {Boolean} keepExisting True to retain existing selections
- * @return {TreeNode} The selected node
+ * Realigns the editor to the bound field based on the current alignment config value.
*/
- select : function(node, e, keepExisting){
- if(keepExisting !== true){
- this.clearSelections(true);
- }
- if(this.isSelected(node)){
- this.lastSelNode = node;
- return node;
- }
- this.selNodes.push(node);
- this.selMap[node.id] = node;
- this.lastSelNode = node;
- node.ui.onSelectedChange(true);
- this.fireEvent("selectionchange", this, this.selNodes);
- return node;
+ realign : function(){
+ this.el.alignTo(this.boundEl, this.alignment);
},
-
+
/**
- * Deselect a node.
- * @param {TreeNode} node The node to unselect
+ * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
+ * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
*/
- unselect : function(node){
- if(this.selMap[node.id]){
- node.ui.onSelectedChange(false);
- var sn = this.selNodes;
- var index = -1;
- if(sn.indexOf){
- index = sn.indexOf(node);
- }else{
- for(var i = 0, len = sn.length; i < len; i++){
- if(sn[i] == node){
- index = i;
- break;
- }
- }
+ completeEdit : function(remainVisible){
+ if(!this.editing){
+ return;
+ }
+ var v = this.getValue();
+ if(this.revertInvalid !== false && !this.field.isValid()){
+ v = this.startValue;
+ this.cancelEdit(true);
+ }
+ if(String(v) === String(this.startValue) && this.ignoreNoChange){
+ this.editing = false;
+ this.hide();
+ return;
+ }
+ if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
+ this.editing = false;
+ if(this.updateEl && this.boundEl){
+ this.boundEl.update(v);
}
- if(index != -1){
- this.selNodes.splice(index, 1);
+ if(remainVisible !== true){
+ this.hide();
}
- delete this.selMap[node.id];
- this.fireEvent("selectionchange", this, this.selNodes);
+ this.fireEvent("complete", this, v, this.startValue);
}
},
-
+
+ // private
+ onShow : function(){
+ this.el.show();
+ if(this.hideEl !== false){
+ this.boundEl.hide();
+ }
+ this.field.show();
+ if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
+ this.fixIEFocus = true;
+ this.deferredFocus.defer(50, this);
+ }else{
+ this.field.focus();
+ }
+ this.fireEvent("startedit", this.boundEl, this.startValue);
+ },
+
+ deferredFocus : function(){
+ if(this.editing){
+ this.field.focus();
+ }
+ },
+
/**
- * Clear all selections
+ * Cancels the editing process and hides the editor without persisting any changes. The field value will be
+ * reverted to the original starting value.
+ * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
+ * cancel (defaults to false)
*/
- clearSelections : function(suppressEvent){
- var sn = this.selNodes;
- if(sn.length > 0){
- for(var i = 0, len = sn.length; i < len; i++){
- sn[i].ui.onSelectedChange(false);
- }
- this.selNodes = [];
- this.selMap = {};
- if(suppressEvent !== true){
- this.fireEvent("selectionchange", this, this.selNodes);
+ cancelEdit : function(remainVisible){
+ if(this.editing){
+ this.setValue(this.startValue);
+ if(remainVisible !== true){
+ this.hide();
}
}
},
-
- /**
- * Returns true if the node is selected
- * @param {TreeNode} node The node to check
- * @return {Boolean}
- */
- isSelected : function(node){
- return this.selMap[node.id] ? true : false;
+
+ // private
+ onBlur : function(){
+ if(this.allowBlur !== true && this.editing){
+ this.completeEdit();
+ }
},
-
+
+ // private
+ onHide : function(){
+ if(this.editing){
+ this.completeEdit();
+ return;
+ }
+ this.field.blur();
+ if(this.field.collapse){
+ this.field.collapse();
+ }
+ this.el.hide();
+ if(this.hideEl !== false){
+ this.boundEl.show();
+ }
+ if(Roo.QuickTips){
+ Roo.QuickTips.enable();
+ }
+ },
+
/**
- * Returns an array of the selected nodes
- * @return {Array}
+ * Sets the data value of the editor
+ * @param {Mixed} value Any valid value supported by the underlying field
*/
- getSelectedNodes : function(){
- return this.selNodes;
+ setValue : function(v){
+ this.field.setValue(v);
},
- onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
-
- selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
-
- selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
+ /**
+ * Gets the data value of the editor
+ * @return {Mixed} The data value
+ */
+ getValue : function(){
+ return this.field.getValue();
+ }
});/*
* Based on:
* Ext JS Library 1.1.1
*/
/**
- * @class Roo.tree.TreeNode
- * @extends Roo.data.Node
- * @cfg {String} text The text for this node
- * @cfg {Boolean} expanded true to start the node expanded
- * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
- * @cfg {Boolean} allowDrop false if this node cannot be drop on
- * @cfg {Boolean} disabled true to start the node disabled
- * @cfg {String} icon The path to an icon for the node. The preferred way to do this
- * is to use the cls or iconCls attributes and add the icon via a CSS background image.
- * @cfg {String} cls A css class to be added to the node
- * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
- * @cfg {String} href URL of the link used for the node (defaults to #)
- * @cfg {String} hrefTarget target frame for the link
- * @cfg {String} qtip An Ext QuickTip for the node
- * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
- * @cfg {Boolean} singleClickExpand True for single click expand on this node
- * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
- * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
- * (defaults to undefined with no checkbox rendered)
+ * @class Roo.BasicDialog
+ * @extends Roo.util.Observable
+ * @parent none builder
+ * Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
+ * <pre><code>
+var dlg = new Roo.BasicDialog("my-dlg", {
+ height: 200,
+ width: 300,
+ minHeight: 100,
+ minWidth: 150,
+ modal: true,
+ proxyDrag: true,
+ shadow: true
+});
+dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
+dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
+dlg.addButton('Cancel', dlg.hide, dlg);
+dlg.show();
+</code></pre>
+ <b>A Dialog should always be a direct child of the body element.</b>
+ * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
+ * @cfg {String} title Default text to display in the title bar (defaults to null)
+ * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
+ * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
+ * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
+ * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
+ * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
+ * (defaults to null with no animation)
+ * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
+ * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
+ * property for valid values (defaults to 'all')
+ * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
+ * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
+ * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
+ * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
+ * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
+ * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
+ * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
+ * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
+ * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
+ * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
+ * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
+ * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
+ * draggable = true (defaults to false)
+ * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+ * shadow (defaults to false)
+ * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
+ * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
+ * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
+ * @cfg {Array} buttons Array of buttons
+ * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
* @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ * Create a new BasicDialog.
+ * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
+ * @param {Object} config Configuration options
*/
-Roo.tree.TreeNode = function(attributes){
- attributes = attributes || {};
- if(typeof attributes == "string"){
- attributes = {text: attributes};
+Roo.BasicDialog = function(el, config){
+ this.el = Roo.get(el);
+ var dh = Roo.DomHelper;
+ if(!this.el && config && config.autoCreate){
+ if(typeof config.autoCreate == "object"){
+ if(!config.autoCreate.id){
+ config.autoCreate.id = el;
+ }
+ this.el = dh.append(document.body,
+ config.autoCreate, true);
+ }else{
+ this.el = dh.append(document.body,
+ {tag: "div", id: el, style:'visibility:hidden;'}, true);
+ }
}
- this.childrenRendered = false;
- this.rendered = false;
- Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
- this.expanded = attributes.expanded === true;
- this.isTarget = attributes.isTarget !== false;
- this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
- this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
+ el = this.el;
+ el.setDisplayed(true);
+ el.hide = this.hideAction;
+ this.id = el.id;
+ el.addClass("x-dlg");
- /**
- * Read-only. The text for this node. To change it use setText().
- * @type String
- */
- this.text = attributes.text;
- /**
- * True if this node is disabled.
- * @type Boolean
- */
- this.disabled = attributes.disabled === true;
+ Roo.apply(this, config);
- this.addEvents({
- /**
- * @event textchange
- * Fires when the text for this node is changed
- * @param {Node} this This node
- * @param {String} text The new text
- * @param {String} oldText The old text
- */
- "textchange" : true,
- /**
- * @event beforeexpand
- * Fires before this node is expanded, return false to cancel.
- * @param {Node} this This node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforeexpand" : true,
- /**
- * @event beforecollapse
- * Fires before this node is collapsed, return false to cancel.
- * @param {Node} this This node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforecollapse" : true,
- /**
- * @event expand
- * Fires when this node is expanded
- * @param {Node} this This node
- */
- "expand" : true,
- /**
- * @event disabledchange
- * Fires when the disabled status of this node changes
- * @param {Node} this This node
- * @param {Boolean} disabled
- */
- "disabledchange" : true,
- /**
- * @event collapse
- * Fires when this node is collapsed
- * @param {Node} this This node
- */
- "collapse" : true,
- /**
- * @event beforeclick
- * Fires before click processing. Return false to cancel the default action.
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "beforeclick":true,
- /**
- * @event checkchange
- * Fires when a node with a checkbox's checked property changes
- * @param {Node} this This node
- * @param {Boolean} checked
- */
- "checkchange":true,
- /**
- * @event click
- * Fires when this node is clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "click":true,
- /**
- * @event dblclick
- * Fires when this node is double clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "dblclick":true,
- /**
- * @event contextmenu
- * Fires when this node is right clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "contextmenu":true,
- /**
- * @event beforechildrenrendered
- * Fires right before the child nodes for this node are rendered
- * @param {Node} this This node
- */
- "beforechildrenrendered":true
- });
+ this.proxy = el.createProxy("x-dlg-proxy");
+ this.proxy.hide = this.hideAction;
+ this.proxy.setOpacity(.5);
+ this.proxy.hide();
- var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
+ if(config.width){
+ el.setWidth(config.width);
+ }
+ if(config.height){
+ el.setHeight(config.height);
+ }
+ this.size = el.getSize();
+ if(typeof config.x != "undefined" && typeof config.y != "undefined"){
+ this.xy = [config.x,config.y];
+ }else{
+ this.xy = el.getCenterXY(true);
+ }
+ /** The header element @type Roo.Element */
+ this.header = el.child("> .x-dlg-hd");
+ /** The body element @type Roo.Element */
+ this.body = el.child("> .x-dlg-bd");
+ /** The footer element @type Roo.Element */
+ this.footer = el.child("> .x-dlg-ft");
- /**
- * Read-only. The UI for this node
- * @type TreeNodeUI
- */
- this.ui = new uiClass(this);
-
- // finally support items[]
- if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
- return;
+ if(!this.header){
+ this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
+ }
+ if(!this.body){
+ this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
}
-
-
- Roo.each(this.attributes.items, function(c) {
- this.appendChild(Roo.factory(c,Roo.Tree));
- }, this);
- delete this.attributes.items;
-
-
-
-};
-Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
- preventHScroll: true,
- /**
- * Returns true if this node is expanded
- * @return {Boolean}
- */
- isExpanded : function(){
- return this.expanded;
- },
- /**
- * Returns the UI object for this node
- * @return {TreeNodeUI}
- */
- getUI : function(){
- return this.ui;
- },
+ this.header.unselectable();
+ if(this.title){
+ this.header.update(this.title);
+ }
+ // this element allows the dialog to be focused for keyboard event
+ this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
+ this.focusEl.swallowEvent("click", true);
- // private override
- setFirstChild : function(node){
- var of = this.firstChild;
- Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
- if(this.childrenRendered && of && node != of){
- of.renderIndent(true, true);
- }
- if(this.rendered){
- this.renderIndent(true, true);
- }
- },
+ this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
- // private override
- setLastChild : function(node){
- var ol = this.lastChild;
- Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
- if(this.childrenRendered && ol && node != ol){
- ol.renderIndent(true, true);
- }
- if(this.rendered){
- this.renderIndent(true, true);
- }
- },
+ // wrap the body and footer for special rendering
+ this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
+ if(this.footer){
+ this.bwrap.dom.appendChild(this.footer.dom);
+ }
- // these methods are overridden to provide lazy rendering support
- // private override
- appendChild : function()
- {
- var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
- if(node && this.childrenRendered){
- node.render();
- }
- this.ui.updateExpandIcon();
- return node;
- },
+ this.bg = this.el.createChild({
+ tag: "div", cls:"x-dlg-bg",
+ html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center"> </div></div></div>'
+ });
+ this.centerBg = this.bg.child("div.x-dlg-bg-center");
- // private override
- removeChild : function(node){
- this.ownerTree.getSelectionModel().unselect(node);
- Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
- // if it's been rendered remove dom node
- if(this.childrenRendered){
- node.ui.remove();
- }
- if(this.childNodes.length < 1){
- this.collapse(false, false);
- }else{
- this.ui.updateExpandIcon();
+
+ if(this.autoScroll !== false && !this.autoTabs){
+ this.body.setStyle("overflow", "auto");
+ }
+
+ this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
+
+ if(this.closable !== false){
+ this.el.addClass("x-dlg-closable");
+ this.close = this.toolbox.createChild({cls:"x-dlg-close"});
+ this.close.on("click", this.closeClick, this);
+ this.close.addClassOnOver("x-dlg-close-over");
+ }
+ if(this.collapsible !== false){
+ this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
+ this.collapseBtn.on("click", this.collapseClick, this);
+ this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
+ this.header.on("dblclick", this.collapseClick, this);
+ }
+ if(this.resizable !== false){
+ this.el.addClass("x-dlg-resizable");
+ this.resizer = new Roo.Resizable(el, {
+ minWidth: this.minWidth || 80,
+ minHeight:this.minHeight || 80,
+ handles: this.resizeHandles || "all",
+ pinned: true
+ });
+ this.resizer.on("beforeresize", this.beforeResize, this);
+ this.resizer.on("resize", this.onResize, this);
+ }
+ if(this.draggable !== false){
+ el.addClass("x-dlg-draggable");
+ if (!this.proxyDrag) {
+ var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
}
- if(!this.firstChild) {
- this.childrenRendered = false;
+ else {
+ var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
}
- return node;
- },
+ dd.setHandleElId(this.header.id);
+ dd.endDrag = this.endMove.createDelegate(this);
+ dd.startDrag = this.startMove.createDelegate(this);
+ dd.onDrag = this.onDrag.createDelegate(this);
+ dd.scroll = false;
+ this.dd = dd;
+ }
+ if(this.modal){
+ this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
+ this.mask.enableDisplayMode("block");
+ this.mask.hide();
+ this.el.addClass("x-dlg-modal");
+ }
+ if(this.shadow){
+ this.shadow = new Roo.Shadow({
+ mode : typeof this.shadow == "string" ? this.shadow : "sides",
+ offset : this.shadowOffset
+ });
+ }else{
+ this.shadowOffset = 0;
+ }
+ if(Roo.useShims && this.shim !== false){
+ this.shim = this.el.createShim();
+ this.shim.hide = this.hideAction;
+ this.shim.hide();
+ }else{
+ this.shim = false;
+ }
+ if(this.autoTabs){
+ this.initTabs();
+ }
+ if (this.buttons) {
+ var bts= this.buttons;
+ this.buttons = [];
+ Roo.each(bts, function(b) {
+ this.addButton(b);
+ }, this);
+ }
+
+
+ this.addEvents({
+ /**
+ * @event keydown
+ * Fires when a key is pressed
+ * @param {Roo.BasicDialog} this
+ * @param {Roo.EventObject} e
+ */
+ "keydown" : true,
+ /**
+ * @event move
+ * Fires when this dialog is moved by the user.
+ * @param {Roo.BasicDialog} this
+ * @param {Number} x The new page X
+ * @param {Number} y The new page Y
+ */
+ "move" : true,
+ /**
+ * @event resize
+ * Fires when this dialog is resized by the user.
+ * @param {Roo.BasicDialog} this
+ * @param {Number} width The new width
+ * @param {Number} height The new height
+ */
+ "resize" : true,
+ /**
+ * @event beforehide
+ * Fires before this dialog is hidden.
+ * @param {Roo.BasicDialog} this
+ */
+ "beforehide" : true,
+ /**
+ * @event hide
+ * Fires when this dialog is hidden.
+ * @param {Roo.BasicDialog} this
+ */
+ "hide" : true,
+ /**
+ * @event beforeshow
+ * Fires before this dialog is shown.
+ * @param {Roo.BasicDialog} this
+ */
+ "beforeshow" : true,
+ /**
+ * @event show
+ * Fires when this dialog is shown.
+ * @param {Roo.BasicDialog} this
+ */
+ "show" : true
+ });
+ el.on("keydown", this.onKeyDown, this);
+ el.on("mousedown", this.toFront, this);
+ Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
+ this.el.hide();
+ Roo.DialogManager.register(this);
+ Roo.BasicDialog.superclass.constructor.call(this);
+};
- // private override
- insertBefore : function(node, refNode){
- var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
- if(newNode && refNode && this.childrenRendered){
- node.render();
- }
- this.ui.updateExpandIcon();
- return newNode;
- },
+Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
+ shadowOffset: Roo.isIE ? 6 : 5,
+ minHeight: 80,
+ minWidth: 200,
+ minButtonWidth: 75,
+ defaultButton: null,
+ buttonAlign: "right",
+ tabTag: 'div',
+ firstShow: true,
/**
- * Sets the text for this node
- * @param {String} text
+ * Sets the dialog title text
+ * @param {String} text The title text to display
+ * @return {Roo.BasicDialog} this
*/
- setText : function(text){
- var oldText = this.text;
- this.text = text;
- this.attributes.text = text;
- if(this.rendered){ // event without subscribing
- this.ui.onTextChange(this, text, oldText);
- }
- this.fireEvent("textchange", this, text, oldText);
+ setTitle : function(text){
+ this.header.update(text);
+ return this;
},
- /**
- * Triggers selection of this node
- */
- select : function(){
- this.getOwnerTree().getSelectionModel().select(this);
+ // private
+ closeClick : function(){
+ this.hide();
},
- /**
- * Triggers deselection of this node
- */
- unselect : function(){
- this.getOwnerTree().getSelectionModel().unselect(this);
+ // private
+ collapseClick : function(){
+ this[this.collapsed ? "expand" : "collapse"]();
},
/**
- * Returns true if this node is selected
- * @return {Boolean}
+ * Collapses the dialog to its minimized state (only the title bar is visible).
+ * Equivalent to the user clicking the collapse dialog button.
*/
- isSelected : function(){
- return this.getOwnerTree().getSelectionModel().isSelected(this);
+ collapse : function(){
+ if(!this.collapsed){
+ this.collapsed = true;
+ this.el.addClass("x-dlg-collapsed");
+ this.restoreHeight = this.el.getHeight();
+ this.resizeTo(this.el.getWidth(), this.header.getHeight());
+ }
},
/**
- * Expand this node.
- * @param {Boolean} deep (optional) True to expand all children as well
- * @param {Boolean} anim (optional) false to cancel the default animation
- * @param {Function} callback (optional) A callback to be called when
- * expanding this node completes (does not wait for deep expand to complete).
- * Called with 1 parameter, this node.
+ * Expands a collapsed dialog back to its normal state. Equivalent to the user
+ * clicking the expand dialog button.
*/
- expand : function(deep, anim, callback){
- if(!this.expanded){
- if(this.fireEvent("beforeexpand", this, deep, anim) === false){
- return;
- }
- if(!this.childrenRendered){
- this.renderChildren();
- }
- this.expanded = true;
-
- if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
- this.ui.animExpand(function(){
- this.fireEvent("expand", this);
- if(typeof callback == "function"){
- callback(this);
- }
- if(deep === true){
- this.expandChildNodes(true);
- }
- }.createDelegate(this));
- return;
- }else{
- this.ui.expand();
- this.fireEvent("expand", this);
- if(typeof callback == "function"){
- callback(this);
- }
- }
- }else{
- if(typeof callback == "function"){
- callback(this);
- }
- }
- if(deep === true){
- this.expandChildNodes(true);
+ expand : function(){
+ if(this.collapsed){
+ this.collapsed = false;
+ this.el.removeClass("x-dlg-collapsed");
+ this.resizeTo(this.el.getWidth(), this.restoreHeight);
}
},
- isHiddenRoot : function(){
- return this.isRoot && !this.getOwnerTree().rootVisible;
- },
-
/**
- * Collapse this node.
- * @param {Boolean} deep (optional) True to collapse all children as well
- * @param {Boolean} anim (optional) false to cancel the default animation
+ * Reinitializes the tabs component, clearing out old tabs and finding new ones.
+ * @return {Roo.panel.Tab} The tabs component
*/
- collapse : function(deep, anim){
- if(this.expanded && !this.isHiddenRoot()){
- if(this.fireEvent("beforecollapse", this, deep, anim) === false){
- return;
- }
- this.expanded = false;
- if((this.getOwnerTree().animate && anim !== false) || anim){
- this.ui.animCollapse(function(){
- this.fireEvent("collapse", this);
- if(deep === true){
- this.collapseChildNodes(true);
- }
- }.createDelegate(this));
- return;
- }else{
- this.ui.collapse();
- this.fireEvent("collapse", this);
- }
- }
- if(deep === true){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(true, false);
- }
+ initTabs : function(){
+ var tabs = this.getTabs();
+ while(tabs.getTab(0)){
+ tabs.removeTab(0);
}
+ this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
+ var dom = el.dom;
+ tabs.addTab(Roo.id(dom), dom.title);
+ dom.title = "";
+ });
+ tabs.activate(0);
+ return tabs;
},
// private
- delayedExpand : function(delay){
- if(!this.expandProcId){
- this.expandProcId = this.expand.defer(delay, this);
- }
+ beforeResize : function(){
+ this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
},
// private
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
- }
- this.expandProcId = false;
+ onResize : function(){
+ this.refreshSize();
+ this.syncBodyHeight();
+ this.adjustAssets();
+ this.focus();
+ this.fireEvent("resize", this, this.size.width, this.size.height);
},
- /**
- * Toggles expanded/collapsed state of the node
- */
- toggle : function(){
- if(this.expanded){
- this.collapse();
- }else{
- this.expand();
+ // private
+ onKeyDown : function(e){
+ if(this.isVisible()){
+ this.fireEvent("keydown", this, e);
}
},
/**
- * Ensures all parent nodes are expanded
+ * Resizes the dialog.
+ * @param {Number} width
+ * @param {Number} height
+ * @return {Roo.BasicDialog} this
*/
- ensureVisible : function(callback){
- var tree = this.getOwnerTree();
- tree.expandPath(this.parentNode.getPath(), false, function(){
- tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
- Roo.callback(callback);
- }.createDelegate(this));
+ resizeTo : function(width, height){
+ this.el.setSize(width, height);
+ this.size = {width: width, height: height};
+ this.syncBodyHeight();
+ if(this.fixedcenter){
+ this.center();
+ }
+ if(this.isVisible()){
+ this.constrainXY();
+ this.adjustAssets();
+ }
+ this.fireEvent("resize", this, width, height);
+ return this;
},
+
/**
- * Expand all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
+ * Resizes the dialog to fit the specified content size.
+ * @param {Number} width
+ * @param {Number} height
+ * @return {Roo.BasicDialog} this
*/
- expandChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].expand(deep);
+ setContentSize : function(w, h){
+ h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
+ w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
+ //if(!this.el.isBorderBox()){
+ h += this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
+ w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
+ //}
+ if(this.tabs){
+ h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
+ w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
}
+ this.resizeTo(w, h);
+ return this;
},
/**
- * Collapse all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
+ * Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be
+ * executed in response to a particular key being pressed while the dialog is active.
+ * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
+ * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope of the function
+ * @return {Roo.BasicDialog} this
*/
- collapseChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(deep);
+ addKeyListener : function(key, fn, scope){
+ var keyCode, shift, ctrl, alt;
+ if(typeof key == "object" && !(key instanceof Array)){
+ keyCode = key["key"];
+ shift = key["shift"];
+ ctrl = key["ctrl"];
+ alt = key["alt"];
+ }else{
+ keyCode = key;
}
+ var handler = function(dlg, e){
+ if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
+ var k = e.getKey();
+ if(keyCode instanceof Array){
+ for(var i = 0, len = keyCode.length; i < len; i++){
+ if(keyCode[i] == k){
+ fn.call(scope || window, dlg, k, e);
+ return;
+ }
+ }
+ }else{
+ if(k == keyCode){
+ fn.call(scope || window, dlg, k, e);
+ }
+ }
+ }
+ };
+ this.on("keydown", handler);
+ return this;
},
/**
- * Disables this node
+ * Returns the panel.Tab component (creates it if it doesn't exist).
+ * Note: If you wish to simply check for the existence of tabs without creating them,
+ * check for a null 'tabs' property.
+ * @return {Roo.panel.Tab} The tabs component
*/
- disable : function(){
- this.disabled = true;
- this.unselect();
- if(this.rendered && this.ui.onDisableChange){ // event without subscribing
- this.ui.onDisableChange(this, true);
+ getTabs : function(){
+ if(!this.tabs){
+ this.el.addClass("x-dlg-auto-tabs");
+ this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
+ this.tabs = new Roo.panel.Tab(this.body.dom, this.tabPosition == "bottom");
}
- this.fireEvent("disabledchange", this, true);
+ return this.tabs;
},
/**
- * Enables this node
+ * Adds a button to the footer section of the dialog.
+ * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+ * object or a valid Roo.DomHelper element config
+ * @param {Function} handler The function called when the button is clicked
+ * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
+ * @return {Roo.Button} The new button
*/
- enable : function(){
- this.disabled = false;
- if(this.rendered && this.ui.onDisableChange){ // event without subscribing
- this.ui.onDisableChange(this, false);
+ addButton : function(config, handler, scope){
+ var dh = Roo.DomHelper;
+ if(!this.footer){
+ this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
}
- this.fireEvent("disabledchange", this, false);
- },
+ if(!this.btnContainer){
+ var tb = this.footer.createChild({
- // private
- renderChildren : function(suppressEvent){
- if(suppressEvent !== false){
- this.fireEvent("beforechildrenrendered", this);
- }
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].render(true);
+ cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
+ html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+ }, null, true);
+ this.btnContainer = tb.firstChild.firstChild.firstChild;
}
- this.childrenRendered = true;
- },
-
- // private
- sort : function(fn, scope){
- Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
- if(this.childrenRendered){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].render(true);
+ var bconfig = {
+ handler: handler,
+ scope: scope,
+ minWidth: this.minButtonWidth,
+ hideParent:true
+ };
+ if(typeof config == "string"){
+ bconfig.text = config;
+ }else{
+ if(config.tag){
+ bconfig.dhconfig = config;
+ }else{
+ Roo.apply(bconfig, config);
}
}
+ var fc = false;
+ if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
+ bconfig.position = Math.max(0, bconfig.position);
+ fc = this.btnContainer.childNodes[bconfig.position];
+ }
+
+ var btn = new Roo.Button(
+ fc ?
+ this.btnContainer.insertBefore(document.createElement("td"),fc)
+ : this.btnContainer.appendChild(document.createElement("td")),
+ //Roo.get(this.btnContainer).createChild( { tag: 'td'}, fc ),
+ bconfig
+ );
+ this.syncBodyHeight();
+ if(!this.buttons){
+ /**
+ * Array of all the buttons that have been added to this dialog via addButton
+ * @type Array
+ */
+ this.buttons = [];
+ }
+ this.buttons.push(btn);
+ return btn;
},
- // private
- render : function(bulkRender){
- this.ui.render(bulkRender);
- if(!this.rendered){
- this.rendered = true;
- if(this.expanded){
- this.expanded = false;
- this.expand(false, false);
- }
- }
+ /**
+ * Sets the default button to be focused when the dialog is displayed.
+ * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
+ * @return {Roo.BasicDialog} this
+ */
+ setDefaultButton : function(btn){
+ this.defaultButton = btn;
+ return this;
},
// private
- renderIndent : function(deep, refresh){
- if(refresh){
- this.ui.childIndent = null;
- }
- this.ui.renderIndent();
- if(deep === true && this.childrenRendered){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].renderIndent(true, refresh);
- }
+ getHeaderFooterHeight : function(safe){
+ var height = 0;
+ if(this.header){
+ height += this.header.getHeight();
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.tree.AsyncTreeNode
- * @extends Roo.tree.TreeNode
- * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
- * @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
- */
- Roo.tree.AsyncTreeNode = function(config){
- this.loaded = false;
- this.loading = false;
- Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
- /**
- * @event beforeload
- * Fires before this node is loaded, return false to cancel
- * @param {Node} this This node
- */
- this.addEvents({'beforeload':true, 'load': true});
- /**
- * @event load
- * Fires when this node is loaded
- * @param {Node} this This node
- */
- /**
- * The loader used by this node (defaults to using the tree's defined loader)
- * @type TreeLoader
- * @property loader
- */
-};
-Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
- expand : function(deep, anim, callback){
- if(this.loading){ // if an async load is already running, waiting til it's done
- var timer;
- var f = function(){
- if(!this.loading){ // done loading
- clearInterval(timer);
- this.expand(deep, anim, callback);
- }
- }.createDelegate(this);
- timer = setInterval(f, 200);
- return;
+ if(this.footer){
+ var fm = this.footer.getMargins();
+ height += (this.footer.getHeight()+fm.top+fm.bottom);
}
- if(!this.loaded){
- if(this.fireEvent("beforeload", this) === false){
- return;
- }
- this.loading = true;
- this.ui.beforeLoad(this);
- var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
- if(loader){
- loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
- return;
+ height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
+ height += this.centerBg.getPadding("tb");
+ return height;
+ },
+
+ // private
+ syncBodyHeight : function()
+ {
+ var bd = this.body, // the text
+ cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
+ bw = this.bwrap;
+ var height = this.size.height - this.getHeaderFooterHeight(false);
+ bd.setHeight(height-bd.getMargins("tb"));
+ var hh = this.header.getHeight();
+ var h = this.size.height-hh;
+ cb.setHeight(h);
+
+ bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
+ bw.setHeight(h-cb.getPadding("tb"));
+
+ bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
+ bd.setWidth(bw.getWidth(true));
+ if(this.tabs){
+ this.tabs.syncHeight();
+ if(Roo.isIE){
+ this.tabs.el.repaint();
}
}
- Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
- },
-
- /**
- * Returns true if this node is currently loading
- * @return {Boolean}
- */
- isLoading : function(){
- return this.loading;
- },
-
- loadComplete : function(deep, anim, callback){
- this.loading = false;
- this.loaded = true;
- this.ui.afterLoad(this);
- this.fireEvent("load", this);
- this.expand(deep, anim, callback);
},
-
+
/**
- * Returns true if this node has been loaded
- * @return {Boolean}
+ * Restores the previous state of the dialog if Roo.state is configured.
+ * @return {Roo.BasicDialog} this
*/
- isLoaded : function(){
- return this.loaded;
- },
-
- hasChildNodes : function(){
- if(!this.isLeaf() && !this.loaded){
- return true;
- }else{
- return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
+ restoreState : function(){
+ var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
+ if(box && box.width){
+ this.xy = [box.x, box.y];
+ this.resizeTo(box.width, box.height);
}
+ return this;
},
- /**
- * Trigger a reload for this node
- * @param {Function} callback
- */
- reload : function(callback){
- this.collapse(false, false);
- while(this.firstChild){
- this.removeChild(this.firstChild);
- }
- this.childrenRendered = false;
- this.loaded = false;
- if(this.isHiddenRoot()){
- this.expanded = false;
+ // private
+ beforeShow : function(){
+ this.expand();
+ if(this.fixedcenter){
+ this.xy = this.el.getCenterXY(true);
}
- this.expand(false, false, callback);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.tree.TreeNodeUI
- * @constructor
- * @param {Object} node The node to render
- * The TreeNode UI implementation is separate from the
- * tree implementation. Unless you are customizing the tree UI,
- * you should never have to use this directly.
- */
-Roo.tree.TreeNodeUI = function(node){
- this.node = node;
- this.rendered = false;
- this.animating = false;
- this.emptyIcon = Roo.BLANK_IMAGE_URL;
-};
-
-Roo.tree.TreeNodeUI.prototype = {
- removeChild : function(node){
- if(this.rendered){
- this.ctNode.removeChild(node.ui.getEl());
+ if(this.modal){
+ Roo.get(document.body).addClass("x-body-masked");
+ this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this.mask.show();
}
+ this.constrainXY();
},
- beforeLoad : function(){
- this.addClass("x-tree-node-loading");
- },
-
- afterLoad : function(){
- this.removeClass("x-tree-node-loading");
+ // private
+ animShow : function(){
+ var b = Roo.get(this.animateTarget).getBox();
+ this.proxy.setSize(b.width, b.height);
+ this.proxy.setLocation(b.x, b.y);
+ this.proxy.show();
+ this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
+ true, .35, this.showEl.createDelegate(this));
},
- onTextChange : function(node, text, oldText){
- if(this.rendered){
- this.textNode.innerHTML = text;
+ /**
+ * Shows the dialog.
+ * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
+ * @return {Roo.BasicDialog} this
+ */
+ show : function(animateTarget){
+ if (this.fireEvent("beforeshow", this) === false){
+ return;
+ }
+ if(this.syncHeightBeforeShow){
+ this.syncBodyHeight();
+ }else if(this.firstShow){
+ this.firstShow = false;
+ this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
+ }
+ this.animateTarget = animateTarget || this.animateTarget;
+ if(!this.el.isVisible()){
+ this.beforeShow();
+ if(this.animateTarget && Roo.get(this.animateTarget)){
+ this.animShow();
+ }else{
+ this.showEl();
+ }
}
+ return this;
},
- onDisableChange : function(node, state){
- this.disabled = state;
- if(state){
- this.addClass("x-tree-node-disabled");
- }else{
- this.removeClass("x-tree-node-disabled");
+ // private
+ showEl : function(){
+ this.proxy.hide();
+ this.el.setXY(this.xy);
+ this.el.show();
+ this.adjustAssets(true);
+ this.toFront();
+ this.focus();
+ // IE peekaboo bug - fix found by Dave Fenwick
+ if(Roo.isIE){
+ this.el.repaint();
}
+ this.fireEvent("show", this);
},
- onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
+ /**
+ * Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
+ * dialog itself will receive focus.
+ */
+ focus : function(){
+ if(this.defaultButton){
+ this.defaultButton.focus();
}else{
- //this.blur();
- this.removeClass("x-tree-selected");
+ this.focusEl.focus();
}
},
- onMove : function(tree, node, oldParent, newParent, index, refNode){
- this.childIndent = null;
- if(this.rendered){
- var targetNode = newParent.ui.getContainer();
- if(!targetNode){//target not rendered
- this.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
- return;
+ // private
+ constrainXY : function(){
+ if(this.constraintoviewport !== false){
+ if(!this.viewSize){
+ if(this.container){
+ var s = this.container.getSize();
+ this.viewSize = [s.width, s.height];
+ }else{
+ this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
+ }
}
- var insertBefore = refNode ? refNode.ui.getEl() : null;
- if(insertBefore){
- targetNode.insertBefore(this.wrap, insertBefore);
- }else{
- targetNode.appendChild(this.wrap);
+ var s = Roo.get(this.container||document).getScroll();
+
+ var x = this.xy[0], y = this.xy[1];
+ var w = this.size.width, h = this.size.height;
+ var vw = this.viewSize[0], vh = this.viewSize[1];
+ // only move it if it needs it
+ var moved = false;
+ // first validate right/bottom
+ if(x + w > vw+s.left){
+ x = vw - w;
+ moved = true;
+ }
+ if(y + h > vh+s.top){
+ y = vh - h;
+ moved = true;
+ }
+ // then make sure top/left isn't negative
+ if(x < s.left){
+ x = s.left;
+ moved = true;
+ }
+ if(y < s.top){
+ y = s.top;
+ moved = true;
+ }
+ if(moved){
+ // cache xy
+ this.xy = [x, y];
+ if(this.isVisible()){
+ this.el.setLocation(x, y);
+ this.adjustAssets();
+ }
}
- this.node.renderIndent(true);
}
},
- addClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).addClass(cls);
+ // private
+ onDrag : function(){
+ if(!this.proxyDrag){
+ this.xy = this.el.getXY();
+ this.adjustAssets();
}
},
- removeClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).removeClass(cls);
+ // private
+ adjustAssets : function(doShow){
+ var x = this.xy[0], y = this.xy[1];
+ var w = this.size.width, h = this.size.height;
+ if(doShow === true){
+ if(this.shadow){
+ this.shadow.show(this.el);
+ }
+ if(this.shim){
+ this.shim.show();
+ }
}
- },
-
- remove : function(){
- if(this.rendered){
- this.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
+ if(this.shadow && this.shadow.isVisible()){
+ this.shadow.show(this.el);
+ }
+ if(this.shim && this.shim.isVisible()){
+ this.shim.setBounds(x, y, w, h);
}
},
- fireEvent : function(){
- return this.node.fireEvent.apply(this.node, arguments);
+ // private
+ adjustViewport : function(w, h){
+ if(!w || !h){
+ w = Roo.lib.Dom.getViewWidth();
+ h = Roo.lib.Dom.getViewHeight();
+ }
+ // cache the size
+ this.viewSize = [w, h];
+ if(this.modal && this.mask.isVisible()){
+ this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
+ this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ }
+ if(this.isVisible()){
+ this.constrainXY();
+ }
},
- initEvents : function(){
- this.node.on("move", this.onMove, this);
- var E = Roo.EventManager;
- var a = this.anchor;
-
- var el = Roo.fly(a, '_treeui');
-
- if(Roo.isOpera){ // opera render bug ignores the CSS
- el.setStyle("text-decoration", "none");
+ /**
+ * Destroys this dialog and all its supporting elements (including any tabs, shim,
+ * shadow, proxy, mask, etc.) Also removes all event listeners.
+ * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+ */
+ destroy : function(removeEl){
+ if(this.isVisible()){
+ this.animateTarget = null;
+ this.hide();
}
-
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
-
- if(this.checkbox){
- Roo.EventManager.on(this.checkbox,
- Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
+ Roo.EventManager.removeResizeListener(this.adjustViewport, this);
+ if(this.tabs){
+ this.tabs.destroy(removeEl);
}
-
- el.on("contextmenu", this.onContextMenu, this);
-
- var icon = Roo.fly(this.iconNode);
- icon.on("click", this.onClick, this);
- icon.on("dblclick", this.onDblClick, this);
- icon.on("contextmenu", this.onContextMenu, this);
- E.on(this.ecNode, "click", this.ecClick, this, true);
-
- if(this.node.disabled){
- this.addClass("x-tree-node-disabled");
+ Roo.destroy(
+ this.shim,
+ this.proxy,
+ this.resizer,
+ this.close,
+ this.mask
+ );
+ if(this.dd){
+ this.dd.unreg();
}
- if(this.node.hidden){
- this.addClass("x-tree-node-disabled");
+ if(this.buttons){
+ for(var i = 0, len = this.buttons.length; i < len; i++){
+ this.buttons[i].destroy();
+ }
}
- var ot = this.node.getOwnerTree();
- var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
- if(dd && (!this.node.isRoot || ot.rootVisible)){
- Roo.dd.Registry.register(this.elNode, {
- node: this.node,
- handles: this.getDDHandles(),
- isHandle: false
- });
+ this.el.removeAllListeners();
+ if(removeEl === true){
+ this.el.update("");
+ this.el.remove();
}
+ Roo.DialogManager.unregister(this);
},
- getDDHandles : function(){
- return [this.iconNode, this.textNode];
- },
-
- hide : function(){
- if(this.rendered){
- this.wrap.style.display = "none";
- }
- },
-
- show : function(){
- if(this.rendered){
- this.wrap.style.display = "";
+ // private
+ startMove : function(){
+ if(this.proxyDrag){
+ this.proxy.show();
}
- },
-
- onContextMenu : function(e){
- if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
- e.preventDefault();
- this.focus();
- this.fireEvent("contextmenu", this.node, e);
+ if(this.constraintoviewport !== false){
+ this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
}
},
- onClick : function(e){
- if(this.dropping){
- e.stopEvent();
- return;
- }
- if(this.fireEvent("beforeclick", this.node, e) !== false){
- if(!this.disabled && this.node.attributes.href){
- this.fireEvent("click", this.node, e);
- return;
- }
- e.preventDefault();
- if(this.disabled){
- return;
- }
-
- if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
- this.node.toggle();
- }
-
- this.fireEvent("click", this.node, e);
+ // private
+ endMove : function(){
+ if(!this.proxyDrag){
+ Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
}else{
- e.stopEvent();
- }
- },
-
- onDblClick : function(e){
- e.preventDefault();
- if(this.disabled){
- return;
- }
- if(this.checkbox){
- this.toggleCheck();
- }
- if(!this.animating && this.node.hasChildNodes()){
- this.node.toggle();
+ Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
+ this.proxy.hide();
}
- this.fireEvent("dblclick", this.node, e);
+ this.refreshSize();
+ this.adjustAssets();
+ this.focus();
+ this.fireEvent("move", this, this.xy[0], this.xy[1]);
},
- onCheckChange : function(){
- var checked = this.checkbox.checked;
- this.node.attributes.checked = checked;
- this.fireEvent('checkchange', this.node, checked);
+ /**
+ * Brings this dialog to the front of any other visible dialogs
+ * @return {Roo.BasicDialog} this
+ */
+ toFront : function(){
+ Roo.DialogManager.bringToFront(this);
+ return this;
},
- ecClick : function(e){
- if(!this.animating && this.node.hasChildNodes()){
- this.node.toggle();
- }
+ /**
+ * Sends this dialog to the back (under) of any other visible dialogs
+ * @return {Roo.BasicDialog} this
+ */
+ toBack : function(){
+ Roo.DialogManager.sendToBack(this);
+ return this;
},
- startDrop : function(){
- this.dropping = true;
+ /**
+ * Centers this dialog in the viewport
+ * @return {Roo.BasicDialog} this
+ */
+ center : function(){
+ var xy = this.el.getCenterXY(true);
+ this.moveTo(xy[0], xy[1]);
+ return this;
},
- // delayed drop so the click event doesn't get fired on a drop
- endDrop : function(){
- setTimeout(function(){
- this.dropping = false;
- }.createDelegate(this), 50);
+ /**
+ * Moves the dialog's top-left corner to the specified point
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Roo.BasicDialog} this
+ */
+ moveTo : function(x, y){
+ this.xy = [x,y];
+ if(this.isVisible()){
+ this.el.setXY(this.xy);
+ this.adjustAssets();
+ }
+ return this;
},
- expand : function(){
- this.updateExpandIcon();
- this.ctNode.style.display = "";
+ /**
+ * Aligns the dialog to the specified element
+ * @param {String/HTMLElement/Roo.Element} element The element to align to.
+ * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @return {Roo.BasicDialog} this
+ */
+ alignTo : function(element, position, offsets){
+ this.xy = this.el.getAlignToXY(element, position, offsets);
+ if(this.isVisible()){
+ this.el.setXY(this.xy);
+ this.adjustAssets();
+ }
+ return this;
},
- focus : function(){
- if(!this.node.preventHScroll){
- try{this.anchor.focus();
- }catch(e){}
- }else if(!Roo.isIE){
- try{
- var noscroll = this.node.getOwnerTree().getTreeEl().dom;
- var l = noscroll.scrollLeft;
- this.anchor.focus();
- noscroll.scrollLeft = l;
- }catch(e){}
+ /**
+ * Anchors an element to another element and realigns it when the window is resized.
+ * @param {String/HTMLElement/Roo.Element} element The element to align to.
+ * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
+ * is a number, it is used as the buffer delay (defaults to 50ms).
+ * @return {Roo.BasicDialog} this
+ */
+ anchorTo : function(el, alignment, offsets, monitorScroll){
+ var action = function(){
+ this.alignTo(el, alignment, offsets);
+ };
+ Roo.EventManager.onWindowResize(action, this);
+ var tm = typeof monitorScroll;
+ if(tm != 'undefined'){
+ Roo.EventManager.on(window, 'scroll', action, this,
+ {buffer: tm == 'number' ? monitorScroll : 50});
}
+ action.call(this);
+ return this;
},
- toggleCheck : function(value){
- var cb = this.checkbox;
- if(cb){
- cb.checked = (value === undefined ? !cb.checked : value);
- }
+ /**
+ * Returns true if the dialog is visible
+ * @return {Boolean}
+ */
+ isVisible : function(){
+ return this.el.isVisible();
},
- blur : function(){
- try{
- this.anchor.blur();
- }catch(e){}
+ // private
+ animHide : function(callback){
+ var b = Roo.get(this.animateTarget).getBox();
+ this.proxy.show();
+ this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
+ this.el.hide();
+ this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
+ this.hideEl.createDelegate(this, [callback]));
},
- animExpand : function(callback){
- var ct = Roo.get(this.ctNode);
- ct.stopFx();
- if(!this.node.hasChildNodes()){
- this.updateExpandIcon();
- this.ctNode.style.display = "";
- Roo.callback(callback);
+ /**
+ * Hides the dialog.
+ * @param {Function} callback (optional) Function to call when the dialog is hidden
+ * @return {Roo.BasicDialog} this
+ */
+ hide : function(callback){
+ if (this.fireEvent("beforehide", this) === false){
return;
}
- this.animating = true;
- this.updateExpandIcon();
-
- ct.slideIn('t', {
- callback : function(){
- this.animating = false;
- Roo.callback(callback);
- },
- scope: this,
- duration: this.node.ownerTree.duration || .25
- });
+ if(this.shadow){
+ this.shadow.hide();
+ }
+ if(this.shim) {
+ this.shim.hide();
+ }
+ // sometimes animateTarget seems to get set.. causing problems...
+ // this just double checks..
+ if(this.animateTarget && Roo.get(this.animateTarget)) {
+ this.animHide(callback);
+ }else{
+ this.el.hide();
+ this.hideEl(callback);
+ }
+ return this;
},
- highlight : function(){
- var tree = this.node.getOwnerTree();
- Roo.fly(this.wrap).highlight(
- tree.hlColor || "C3DAF9",
- {endColor: tree.hlBaseColor}
- );
+ // private
+ hideEl : function(callback){
+ this.proxy.hide();
+ if(this.modal){
+ this.mask.hide();
+ Roo.get(document.body).removeClass("x-body-masked");
+ }
+ this.fireEvent("hide", this);
+ if(typeof callback == "function"){
+ callback();
+ }
},
- collapse : function(){
- this.updateExpandIcon();
- this.ctNode.style.display = "none";
+ // private
+ hideAction : function(){
+ this.setLeft("-10000px");
+ this.setTop("-10000px");
+ this.setStyle("visibility", "hidden");
},
- animCollapse : function(callback){
- var ct = Roo.get(this.ctNode);
- ct.enableDisplayMode('block');
- ct.stopFx();
-
- this.animating = true;
- this.updateExpandIcon();
-
- ct.slideOut('t', {
- callback : function(){
- this.animating = false;
- Roo.callback(callback);
- },
- scope: this,
- duration: this.node.ownerTree.duration || .25
- });
+ // private
+ refreshSize : function(){
+ this.size = this.el.getSize();
+ this.xy = this.el.getXY();
+ Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
},
- getContainer : function(){
- return this.ctNode;
- },
+ // private
+ // z-index is managed by the DialogManager and may be overwritten at any time
+ setZIndex : function(index){
+ if(this.modal){
+ this.mask.setStyle("z-index", index);
+ }
+ if(this.shim){
+ this.shim.setStyle("z-index", ++index);
+ }
+ if(this.shadow){
+ this.shadow.setZIndex(++index);
+ }
+ this.el.setStyle("z-index", ++index);
+ if(this.proxy){
+ this.proxy.setStyle("z-index", ++index);
+ }
+ if(this.resizer){
+ this.resizer.proxy.setStyle("z-index", ++index);
+ }
- getEl : function(){
- return this.wrap;
+ this.lastZIndex = index;
},
- appendDDGhost : function(ghostNode){
- ghostNode.appendChild(this.elNode.cloneNode(true));
- },
+ /**
+ * Returns the element for this dialog
+ * @return {Roo.Element} The underlying dialog Element
+ */
+ getEl : function(){
+ return this.el;
+ }
+});
- getDDRepairXY : function(){
- return Roo.lib.Dom.getXY(this.iconNode);
- },
+/**
+ * @class Roo.DialogManager
+ * Provides global access to BasicDialogs that have been created and
+ * support for z-indexing (layering) multiple open dialogs.
+ */
+Roo.DialogManager = function(){
+ var list = {};
+ var accessList = [];
+ var front = null;
- onRender : function(){
- this.render();
- },
+ // private
+ var sortDialogs = function(d1, d2){
+ return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
+ };
- render : function(bulkRender){
- var n = this.node, a = n.attributes;
- var targetNode = n.parentNode ?
- n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
+ // private
+ var orderDialogs = function(){
+ accessList.sort(sortDialogs);
+ var seed = Roo.DialogManager.zseed;
+ for(var i = 0, len = accessList.length; i < len; i++){
+ var dlg = accessList[i];
+ if(dlg){
+ dlg.setZIndex(seed + (i*10));
+ }
+ }
+ };
- if(!this.rendered){
- this.rendered = true;
+ return {
+ /**
+ * The starting z-index for BasicDialogs (defaults to 9000)
+ * @type Number The z-index value
+ */
+ zseed : 9000,
- this.renderElements(n, a, targetNode, bulkRender);
+ // private
+ register : function(dlg){
+ list[dlg.id] = dlg;
+ accessList.push(dlg);
+ },
- if(a.qtip){
- if(this.textNode.setAttributeNS){
- this.textNode.setAttributeNS("ext", "qtip", a.qtip);
- if(a.qtipTitle){
- this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
- }
- }else{
- this.textNode.setAttribute("ext:qtip", a.qtip);
- if(a.qtipTitle){
- this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
- }
- }
- }else if(a.qtipCfg){
- a.qtipCfg.target = Roo.id(this.textNode);
- Roo.QuickTips.register(a.qtipCfg);
+ // private
+ unregister : function(dlg){
+ delete list[dlg.id];
+ var i=0;
+ var len=0;
+ if(!accessList.indexOf){
+ for( i = 0, len = accessList.length; i < len; i++){
+ if(accessList[i] == dlg){
+ accessList.splice(i, 1);
+ return;
+ }
+ }
+ }else{
+ i = accessList.indexOf(dlg);
+ if(i != -1){
+ accessList.splice(i, 1);
+ }
}
- this.initEvents();
- if(!this.node.expanded){
- this.updateExpandIcon();
+ },
+
+ /**
+ * Gets a registered dialog by id
+ * @param {String/Object} id The id of the dialog or a dialog
+ * @return {Roo.BasicDialog} this
+ */
+ get : function(id){
+ return typeof id == "object" ? id : list[id];
+ },
+
+ /**
+ * Brings the specified dialog to the front
+ * @param {String/Object} dlg The id of the dialog or a dialog
+ * @return {Roo.BasicDialog} this
+ */
+ bringToFront : function(dlg){
+ dlg = this.get(dlg);
+ if(dlg != front){
+ front = dlg;
+ dlg._lastAccess = new Date().getTime();
+ orderDialogs();
}
- }else{
- if(bulkRender === true) {
- targetNode.appendChild(this.wrap);
+ return dlg;
+ },
+
+ /**
+ * Sends the specified dialog to the back
+ * @param {String/Object} dlg The id of the dialog or a dialog
+ * @return {Roo.BasicDialog} this
+ */
+ sendToBack : function(dlg){
+ dlg = this.get(dlg);
+ dlg._lastAccess = -(new Date().getTime());
+ orderDialogs();
+ return dlg;
+ },
+
+ /**
+ * Hides all dialogs
+ */
+ hideAll : function(){
+ for(var id in list){
+ if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
+ list[id].hide();
+ }
}
}
- },
+ };
+}();
- renderElements : function(n, a, targetNode, bulkRender)
- {
- // add some indent caching, this helps performance when rendering a large tree
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
- var t = n.getOwnerTree();
- var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
- if (typeof(n.attributes.html) != 'undefined') {
- txt = n.attributes.html;
+/**
+ * @class Roo.LayoutDialog
+ * @extends Roo.BasicDialog
+ * @children Roo.panel.Content
+ * @parent builder none
+ * Dialog which provides adjustments for working with a layout in a Dialog.
+ * Add your necessary layout config options to the dialog's config.<br>
+ * Example usage (including a nested layout):
+ * <pre><code>
+if(!dialog){
+ dialog = new Roo.LayoutDialog("download-dlg", {
+ modal: true,
+ width:600,
+ height:450,
+ shadow:true,
+ minWidth:500,
+ minHeight:350,
+ autoTabs:true,
+ proxyDrag:true,
+ // layout config merges with the dialog config
+ center:{
+ tabPosition: "top",
+ alwaysShowTabs: true
}
- var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
- var cb = typeof a.checked == 'boolean';
- var href = a.href ? a.href : Roo.isGecko ? "" : "#";
- var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
- '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
- cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
- '<a hidefocus="on" href="',href,'" tabIndex="1" ',
- a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "",
- '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',
- "</li>"];
+ });
+ dialog.addKeyListener(27, dialog.hide, dialog);
+ dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
+ dialog.addButton("Build It!", this.getDownload, this);
- if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
- this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
- n.nextSibling.ui.getEl(), buf.join(""));
- }else{
- this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+ // we can even add nested layouts
+ var innerLayout = new Roo.BorderLayout("dl-inner", {
+ east: {
+ initialSize: 200,
+ autoScroll:true,
+ split:true
+ },
+ center: {
+ autoScroll:true
}
+ });
+ innerLayout.beginUpdate();
+ innerLayout.add("east", new Roo.panel.Content("dl-details"));
+ innerLayout.add("center", new Roo.panel.Content("selection-panel"));
+ innerLayout.endUpdate(true);
- this.elNode = this.wrap.childNodes[0];
- this.ctNode = this.wrap.childNodes[1];
- var cs = this.elNode.childNodes;
- this.indentNode = cs[0];
- this.ecNode = cs[1];
- this.iconNode = cs[2];
- var index = 3;
- if(cb){
- this.checkbox = cs[3];
- index++;
- }
- this.anchor = cs[index];
- this.textNode = cs[index].firstChild;
- },
-
- getAnchor : function(){
- return this.anchor;
- },
-
- getTextEl : function(){
- return this.textNode;
- },
-
- getIconEl : function(){
- return this.iconNode;
- },
-
- isChecked : function(){
- return this.checkbox ? this.checkbox.checked : false;
- },
-
- updateExpandIcon : function(){
- if(this.rendered){
- var n = this.node, c1, c2;
- var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
- var hasChild = n.hasChildNodes();
- if(hasChild){
- if(n.expanded){
- cls += "-minus";
- c1 = "x-tree-node-collapsed";
- c2 = "x-tree-node-expanded";
- }else{
- cls += "-plus";
- c1 = "x-tree-node-expanded";
- c2 = "x-tree-node-collapsed";
- }
- if(this.wasLeaf){
- this.removeClass("x-tree-node-leaf");
- this.wasLeaf = false;
- }
- if(this.c1 != c1 || this.c2 != c2){
- Roo.fly(this.elNode).replaceClass(c1, c2);
- this.c1 = c1; this.c2 = c2;
- }
- }else{
- // this changes non-leafs into leafs if they have no children.
- // it's not very rational behaviour..
-
- if(!this.wasLeaf && this.node.leaf){
- Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
- delete this.c1;
- delete this.c2;
- this.wasLeaf = true;
- }
- }
- var ecc = "x-tree-ec-icon "+cls;
- if(this.ecc != ecc){
- this.ecNode.className = ecc;
- this.ecc = ecc;
- }
- }
- },
-
- getChildIndent : function(){
- if(!this.childIndent){
- var buf = [];
- var p = this.node;
- while(p){
- if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
- if(!p.isLast()) {
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
- } else {
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
- }
- }
- p = p.parentNode;
- }
- this.childIndent = buf.join("");
- }
- return this.childIndent;
- },
-
- renderIndent : function(){
- if(this.rendered){
- var indent = "";
- var p = this.node.parentNode;
- if(p){
- indent = p.ui.getChildIndent();
- }
- if(this.indentMarkup != indent){ // don't rerender if not required
- this.indentNode.innerHTML = indent;
- this.indentMarkup = indent;
- }
- this.updateExpandIcon();
- }
- }
-};
-
-Roo.tree.RootTreeNodeUI = function(){
- Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
-};
-Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
- render : function(){
- if(!this.rendered){
- var targetNode = this.node.ownerTree.innerCt.dom;
- this.node.expanded = true;
- targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
- this.wrap = this.ctNode = targetNode.firstChild;
- }
- },
- collapse : function(){
- },
- expand : function(){
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.tree.TreeLoader
- * @extends Roo.util.Observable
- * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
- * nodes from a specified URL. The response must be a javascript Array definition
- * who's elements are node definition objects. eg:
- * <pre><code>
-{ success : true,
- data : [
-
- { 'id': 1, 'text': 'A folder Node', 'leaf': false },
- { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
- ]
+ var layout = dialog.getLayout();
+ layout.beginUpdate();
+ layout.add("center", new Roo.panel.Content("standard-panel",
+ {title: "Download the Source", fitToFrame:true}));
+ layout.add("center", new Roo.panel.NestedLayout(innerLayout,
+ {title: "Build your own roo.js"}));
+ layout.getRegion("center").showPanel(sp);
+ layout.endUpdate();
}
-
-
</code></pre>
- * <br><br>
- * The old style respose with just an array is still supported, but not recommended.
- * <br><br>
- *
- * A server request is sent, and child nodes are loaded only when a node is expanded.
- * The loading node's id is passed to the server under the parameter name "node" to
- * enable the server to produce the correct child nodes.
- * <br><br>
- * To pass extra parameters, an event handler may be attached to the "beforeload"
- * event, and the parameters specified in the TreeLoader's baseParams property:
- * <pre><code>
- myTreeLoader.on("beforeload", function(treeLoader, node) {
- this.baseParams.category = node.attributes.category;
- }, this);
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
+ * @param {Object} config configuration options
+ */
+Roo.LayoutDialog = function(el, cfg){
+
+ var config= cfg;
+ if (typeof(cfg) == 'undefined') {
+ config = Roo.apply({}, el);
+ // not sure why we use documentElement here.. - it should always be body.
+ // IE7 borks horribly if we use documentElement.
+ // webkit also does not like documentElement - it creates a body element...
+ el = Roo.get( document.body || document.documentElement ).createChild();
+ //config.autoCreate = true;
+ }
+
+
+ config.autoTabs = false;
+ Roo.LayoutDialog.superclass.constructor.call(this, el, config);
+ this.body.setStyle({overflow:"hidden", position:"relative"});
+ this.layout = new Roo.BorderLayout(this.body.dom, config);
+ this.layout.monitorWindowResize = false;
+ this.el.addClass("x-dlg-auto-layout");
+ // fix case when center region overwrites center function
+ this.center = Roo.BasicDialog.prototype.center;
+ this.on("show", this.layout.layout, this.layout, true);
+ if (config.items) {
+ var xitems = config.items;
+ delete config.items;
+ Roo.each(xitems, this.addxtype, this);
+ }
-</code></pre>
- *
- * This would pass an HTTP parameter called "category" to the server containing
- * the value of the Node's "category" attribute.
- * @constructor
- * Creates a new Treeloader.
- * @param {Object} config A config object containing config properties.
- */
-Roo.tree.TreeLoader = function(config){
- this.baseParams = {};
- this.requestMethod = "POST";
- Roo.apply(this, config);
-
- this.addEvents({
- /**
- * @event beforeload
- * Fires before a network request is made to retrieve the Json text which specifies a node's children.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} callback The callback function specified in the {@link #load} call.
- */
- beforeload : true,
- /**
- * @event load
- * Fires when the node has been successfuly loaded.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} response The response object containing the data from the server.
- */
- load : true,
- /**
- * @event loadexception
- * Fires if the network request failed.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} response The response object containing the data from the server.
- */
- loadexception : true,
- /**
- * @event create
- * Fires before a node is created, enabling you to return custom Node types
- * @param {Object} This TreeLoader object.
- * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
- */
- create : true
- });
-
- Roo.tree.TreeLoader.superclass.constructor.call(this);
};
-
-Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
- /**
- * @cfg {String} dataUrl The URL from which to request a Json string which
- * specifies an array of node definition object representing the child nodes
- * to be loaded.
- */
+Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
+
+
/**
- * @cfg {String} requestMethod either GET or POST
- * defaults to POST (due to BC)
- * to be loaded.
- */
+ * @cfg {Roo.LayoutRegion} east
+ */
/**
- * @cfg {Object} baseParams (optional) An object containing properties which
- * specify HTTP parameters to be passed to each request for child nodes.
- */
+ * @cfg {Roo.LayoutRegion} west
+ */
/**
- * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
- * created by this loader. If the attributes sent by the server have an attribute in this object,
- * they take priority.
- */
+ * @cfg {Roo.LayoutRegion} south
+ */
/**
- * @cfg {Object} uiProviders (optional) An object containing properties which
- *
- * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
- * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
- * <i>uiProvider</i> attribute of a returned child node is a string rather
- * than a reference to a TreeNodeUI implementation, this that string value
- * is used as a property name in the uiProviders object. You can define the provider named
- * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
- */
- uiProviders : {},
-
+ * @cfg {Roo.LayoutRegion} north
+ */
/**
- * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
- * child nodes before loading.
- */
- clearOnLoad : true,
-
+ * @cfg {Roo.LayoutRegion} center
+ */
/**
- * @cfg {String} root (optional) Default to false. Use this to read data from an object
- * property on loading, rather than expecting an array. (eg. more compatible to a standard
- * Grid query { data : [ .....] }
- */
-
- root : false,
- /**
- * @cfg {String} queryParam (optional)
- * Name of the query as it will be passed on the querystring (defaults to 'node')
- * eg. the request will be ?node=[id]
- */
-
+ * @cfg {Roo.Button} buttons[] Bottom buttons..
+ */
- queryParam: false,
/**
- * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
- * This is called automatically when a node is expanded, but may be used to reload
- * a node (or append new children if the {@link #clearOnLoad} option is false.)
- * @param {Roo.tree.TreeNode} node
- * @param {Function} callback
+ * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
+ * @deprecated
*/
- load : function(node, callback){
- if(this.clearOnLoad){
- while(node.firstChild){
- node.removeChild(node.firstChild);
- }
- }
- if(node.attributes.children){ // preloaded json children
- var cs = node.attributes.children;
- for(var i = 0, len = cs.length; i < len; i++){
- node.appendChild(this.createNode(cs[i]));
- }
- if(typeof callback == "function"){
- callback();
- }
- }else if(this.dataUrl){
- this.requestData(node, callback);
- }
- },
-
- getParams: function(node){
- var buf = [], bp = this.baseParams;
- for(var key in bp){
- if(typeof bp[key] != "function"){
- buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
- }
- }
- var n = this.queryParam === false ? 'node' : this.queryParam;
- buf.push(n + "=", encodeURIComponent(node.id));
- return buf.join("");
+ endUpdate : function(){
+ this.layout.endUpdate();
},
- requestData : function(node, callback){
- if(this.fireEvent("beforeload", this, node, callback) !== false){
- this.transId = Roo.Ajax.request({
- method:this.requestMethod,
- url: this.dataUrl||this.url,
- success: this.handleResponse,
- failure: this.handleFailure,
- scope: this,
- argument: {callback: callback, node: node},
- params: this.getParams(node)
- });
- }else{
- // if the load is cancelled, make sure we notify
- // the node that we are done
- if(typeof callback == "function"){
- callback();
- }
- }
+ /**
+ * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
+ * @deprecated
+ */
+ beginUpdate : function(){
+ this.layout.beginUpdate();
},
- isLoading : function(){
- return this.transId ? true : false;
+ /**
+ * Get the BorderLayout for this dialog
+ * @return {Roo.BorderLayout}
+ */
+ getLayout : function(){
+ return this.layout;
},
- abort : function(){
- if(this.isLoading()){
- Roo.Ajax.abort(this.transId);
+ showEl : function(){
+ Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
+ if(Roo.isIE7){
+ this.layout.layout();
}
},
// private
- createNode : function(attr)
- {
- // apply baseAttrs, nice idea Corey!
- if(this.baseAttrs){
- Roo.applyIf(attr, this.baseAttrs);
- }
- if(this.applyLoader !== false){
- attr.loader = this;
- }
- // uiProvider = depreciated..
-
- if(typeof(attr.uiProvider) == 'string'){
- attr.uiProvider = this.uiProviders[attr.uiProvider] ||
- /** eval:var:attr */ eval(attr.uiProvider);
- }
- if(typeof(this.uiProviders['default']) != 'undefined') {
- attr.uiProvider = this.uiProviders['default'];
- }
-
- this.fireEvent('create', this, attr);
-
- attr.leaf = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
- return(attr.leaf ?
- new Roo.tree.TreeNode(attr) :
- new Roo.tree.AsyncTreeNode(attr));
- },
-
- processResponse : function(response, node, callback)
- {
- var json = response.responseText;
- try {
-
- var o = Roo.decode(json);
-
- if (this.root === false && typeof(o.success) != undefined) {
- this.root = 'data'; // the default behaviour for list like data..
- }
-
- if (this.root !== false && !o.success) {
- // it's a failure condition.
- var a = response.argument;
- this.fireEvent("loadexception", this, a.node, response);
- Roo.log("Load failed - should have a handler really");
- return;
- }
-
-
-
- if (this.root !== false) {
- o = o[this.root];
- }
-
- for(var i = 0, len = o.length; i < len; i++){
- var n = this.createNode(o[i]);
- if(n){
- node.appendChild(n);
- }
- }
- if(typeof callback == "function"){
- callback(this, node);
- }
- }catch(e){
- this.handleFailure(response);
- }
- },
-
- handleResponse : function(response){
- this.transId = false;
- var a = response.argument;
- this.processResponse(response, a.node, a.callback);
- this.fireEvent("load", this, a.node, response);
+ // Use the syncHeightBeforeShow config option to control this automatically
+ syncBodyHeight : function(){
+ Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
+ if(this.layout){this.layout.layout();}
},
-
- handleFailure : function(response)
- {
- // should handle failure better..
- this.transId = false;
- var a = response.argument;
- this.fireEvent("loadexception", this, a.node, response);
- if(typeof a.callback == "function"){
- a.callback(this, a.node);
- }
+
+ /**
+ * Add an xtype element (actually adds to the layout.)
+ * @return {Object} xdata xtype object data.
+ */
+
+ addxtype : function(c) {
+ return this.layout.addxtype(c);
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
-* @class Roo.tree.TreeFilter
-* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
-* @param {TreePanel} tree
-* @param {Object} config (optional)
- */
-Roo.tree.TreeFilter = function(tree, config){
- this.tree = tree;
- this.filtered = {};
- Roo.apply(this, config);
-};
+ * @class Roo.MessageBox
+ * @static
+ * Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
+ * Example usage:
+ *<pre><code>
+// Basic alert:
+Roo.Msg.alert('Status', 'Changes saved successfully.');
-Roo.tree.TreeFilter.prototype = {
- clearBlank:false,
- reverse:false,
- autoClear:false,
- remove:false,
+// Prompt for user data:
+Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+ if (btn == 'ok'){
+ // process text value...
+ }
+});
- /**
- * Filter the data by a specific attribute.
- * @param {String/RegExp} value Either string that the attribute value
- * should start with or a RegExp to test against the attribute
- * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
- * @param {TreeNode} startNode (optional) The node to start the filter at.
- */
- filter : function(value, attr, startNode){
- attr = attr || "text";
- var f;
- if(typeof value == "string"){
- var vlen = value.length;
- // auto clear empty filter
- if(vlen == 0 && this.clearBlank){
- this.clear();
- return;
- }
- value = value.toLowerCase();
- f = function(n){
- return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
- };
- }else if(value.exec){ // regex?
- f = function(n){
- return value.test(n.attributes[attr]);
- };
- }else{
- throw 'Illegal filter type, must be string or regex';
- }
- this.filterBy(f, null, startNode);
- },
+// Show a dialog using config options:
+Roo.Msg.show({
+ title:'Save Changes?',
+ msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
+ buttons: Roo.Msg.YESNOCANCEL,
+ fn: processResult,
+ animEl: 'elId'
+});
+</code></pre>
+ * @static
+ */
+Roo.MessageBox = function(){
+ var dlg, opt, mask, waitTimer;
+ var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
+ var buttons, activeTextEl, bwidth;
- /**
- * Filter by a function. The passed function will be called with each
- * node in the tree (or from the startNode). If the function returns true, the node is kept
- * otherwise it is filtered. If a node is filtered, its children are also filtered.
- * @param {Function} fn The filter function
- * @param {Object} scope (optional) The scope of the function (defaults to the current node)
- */
- filterBy : function(fn, scope, startNode){
- startNode = startNode || this.tree.root;
- if(this.autoClear){
- this.clear();
+ // private
+ var handleButton = function(button){
+ dlg.hide();
+ Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
+ };
+
+ // private
+ var handleHide = function(){
+ if(opt && opt.cls){
+ dlg.el.removeClass(opt.cls);
}
- var af = this.filtered, rv = this.reverse;
- var f = function(n){
- if(n == startNode){
- return true;
- }
- if(af[n.id]){
- return false;
- }
- var m = fn.call(scope || n, n);
- if(!m || rv){
- af[n.id] = n;
- n.ui.hide();
- return false;
- }
- return true;
- };
- startNode.cascade(f);
- if(this.remove){
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n && n.parentNode){
- n.parentNode.removeChild(n);
- }
- }
- }
+ if(waitTimer){
+ Roo.TaskMgr.stop(waitTimer);
+ waitTimer = null;
}
- },
+ };
- /**
- * Clears the current filter. Note: with the "remove" option
- * set a filter cannot be cleared.
- */
- clear : function(){
- var t = this.tree;
- var af = this.filtered;
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n){
- n.ui.show();
+ // private
+ var updateButtons = function(b){
+ var width = 0;
+ if(!b){
+ buttons["ok"].hide();
+ buttons["cancel"].hide();
+ buttons["yes"].hide();
+ buttons["no"].hide();
+ dlg.footer.dom.style.display = 'none';
+ return width;
+ }
+ dlg.footer.dom.style.display = '';
+ for(var k in buttons){
+ if(typeof buttons[k] != "function"){
+ if(b[k]){
+ buttons[k].show();
+ buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
+ width += buttons[k].el.getWidth()+15;
+ }else{
+ buttons[k].hide();
}
}
}
- this.filtered = {};
- }
-};
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.tree.TreeSorter
- * Provides sorting of nodes in a TreePanel
- *
- * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
- * @cfg {String} property The named attribute on the node to sort by (defaults to text)
- * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
- * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
- * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
- * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
- * @constructor
- * @param {TreePanel} tree
- * @param {Object} config
- */
-Roo.tree.TreeSorter = function(tree, config){
- Roo.apply(this, config);
- tree.on("beforechildrenrendered", this.doSort, this);
- tree.on("append", this.updateSort, this);
- tree.on("insert", this.updateSort, this);
-
- var dsc = this.dir && this.dir.toLowerCase() == "desc";
- var p = this.property || "text";
- var sortType = this.sortType;
- var fs = this.folderSort;
- var cs = this.caseSensitive === true;
- var leafAttr = this.leafAttr || 'leaf';
+ return width;
+ };
- this.sortFn = function(n1, n2){
- if(fs){
- if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
- return 1;
- }
- if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
- return -1;
- }
+ // private
+ var handleEsc = function(d, k, e){
+ if(opt && opt.closable !== false){
+ dlg.hide();
}
- var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
- var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
- if(v1 < v2){
- return dsc ? +1 : -1;
- }else if(v1 > v2){
- return dsc ? -1 : +1;
- }else{
- return 0;
+ if(e){
+ e.stopEvent();
}
};
-};
-Roo.tree.TreeSorter.prototype = {
- doSort : function(node){
- node.sort(this.sortFn);
- },
-
- compareNodes : function(n1, n2){
- return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
- },
-
- updateSort : function(tree, node){
- if(node.childrenRendered){
- this.doSort.defer(1, this, [node]);
- }
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ return {
+ /**
+ * Returns a reference to the underlying {@link Roo.BasicDialog} element
+ * @return {Roo.BasicDialog} The BasicDialog element
+ */
+ getDialog : function(){
+ if(!dlg){
+ dlg = new Roo.BasicDialog("x-msg-box", {
+ autoCreate : true,
+ shadow: true,
+ draggable: true,
+ resizable:false,
+ constraintoviewport:false,
+ fixedcenter:true,
+ collapsible : false,
+ shim:true,
+ modal: true,
+ width:400, height:100,
+ buttonAlign:"center",
+ closeClick : function(){
+ if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
+ handleButton("no");
+ }else{
+ handleButton("cancel");
+ }
+ }
+ });
+
+ dlg.on("hide", handleHide);
+ mask = dlg.mask;
+ dlg.addKeyListener(27, handleEsc);
+ buttons = {};
+ var bt = this.buttonText;
+ buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
+ buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
+ buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
+ buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
+ bodyEl = dlg.body.createChild({
-if(Roo.dd.DropZone){
-
-Roo.tree.TreeDropZone = function(tree, config){
- this.allowParentInsert = false;
- this.allowContainerDrop = false;
- this.appendOnly = false;
- Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
- this.tree = tree;
- this.lastInsertClass = "x-tree-no-status";
- this.dragOverData = {};
-};
+ html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar"> </div></div></div>'
+ });
+ msgEl = bodyEl.dom.firstChild;
+ textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
+ textboxEl.enableDisplayMode();
+ textboxEl.addKeyListener([10,13], function(){
+ if(dlg.isVisible() && opt && opt.buttons){
+ if(opt.buttons.ok){
+ handleButton("ok");
+ }else if(opt.buttons.yes){
+ handleButton("yes");
+ }
+ }
+ });
+ textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
+ textareaEl.enableDisplayMode();
+ progressEl = Roo.get(bodyEl.dom.childNodes[4]);
+ progressEl.enableDisplayMode();
+ var pf = progressEl.dom.firstChild;
+ if (pf) {
+ pp = Roo.get(pf.firstChild);
+ pp.setHeight(pf.offsetHeight);
+ }
+
+ }
+ return dlg;
+ },
-Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
- ddGroup : "TreeDD",
- scroll: true,
-
- expandDelay : 1000,
-
- expandNode : function(node){
- if(node.hasChildNodes() && !node.isExpanded()){
- node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
- }
- },
-
- queueExpand : function(node){
- this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
- },
-
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
- this.expandProcId = false;
- }
- },
-
- isValidDropPoint : function(n, pt, dd, e, data){
- if(!n || !data){ return false; }
- var targetNode = n.node;
- var dropNode = data.node;
- // default drop rules
- if(!(targetNode && targetNode.isTarget && pt)){
- return false;
- }
- if(pt == "append" && targetNode.allowChildren === false){
- return false;
- }
- if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
- return false;
- }
- if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
- return false;
- }
- // reuse the object
- var overEvent = this.dragOverData;
- overEvent.tree = this.tree;
- overEvent.target = targetNode;
- overEvent.data = data;
- overEvent.point = pt;
- overEvent.source = dd;
- overEvent.rawEvent = e;
- overEvent.dropNode = dropNode;
- overEvent.cancel = false;
- var result = this.tree.fireEvent("nodedragover", overEvent);
- return overEvent.cancel === false && result !== false;
- },
-
- getDropPoint : function(e, n, dd)
- {
- var tn = n.node;
- if(tn.isRoot){
- return tn.allowChildren !== false ? "append" : false; // always append for root
- }
- var dragEl = n.ddel;
- var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
- var y = Roo.lib.Event.getPageY(e);
- //var noAppend = tn.allowChildren === false || tn.isLeaf();
-
- // we may drop nodes anywhere, as long as allowChildren has not been set to false..
- var noAppend = tn.allowChildren === false;
- if(this.appendOnly || tn.parentNode.allowChildren === false){
- return noAppend ? false : "append";
- }
- var noBelow = false;
- if(!this.allowParentInsert){
- noBelow = tn.hasChildNodes() && tn.isExpanded();
- }
- var q = (b - t) / (noAppend ? 2 : 3);
- if(y >= t && y < (t + q)){
- return "above";
- }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
- return "below";
- }else{
- return "append";
- }
- },
-
- onNodeEnter : function(n, dd, e, data)
- {
- this.cancelExpand();
- },
-
- onNodeOver : function(n, dd, e, data)
- {
-
- var pt = this.getDropPoint(e, n, dd);
- var node = n.node;
-
- // auto node expand check
- if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
- this.queueExpand(node);
- }else if(pt != "append"){
- this.cancelExpand();
- }
-
- // set the insert point style on the target node
- var returnCls = this.dropNotAllowed;
- if(this.isValidDropPoint(n, pt, dd, e, data)){
- if(pt){
- var el = n.ddel;
- var cls;
- if(pt == "above"){
- returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
- cls = "x-tree-drag-insert-above";
- }else if(pt == "below"){
- returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
- cls = "x-tree-drag-insert-below";
- }else{
- returnCls = "x-tree-drop-ok-append";
- cls = "x-tree-drag-append";
- }
- if(this.lastInsertClass != cls){
- Roo.fly(el).replaceClass(this.lastInsertClass, cls);
- this.lastInsertClass = cls;
- }
- }
- }
- return returnCls;
- },
-
- onNodeOut : function(n, dd, e, data){
-
- this.cancelExpand();
- this.removeDropIndicators(n);
- },
-
- onNodeDrop : function(n, dd, e, data){
- var point = this.getDropPoint(e, n, dd);
- var targetNode = n.node;
- targetNode.ui.startDrop();
- if(!this.isValidDropPoint(n, point, dd, e, data)){
- targetNode.ui.endDrop();
- return false;
- }
- // first try to find the drop node
- var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
- var dropEvent = {
- tree : this.tree,
- target: targetNode,
- data: data,
- point: point,
- source: dd,
- rawEvent: e,
- dropNode: dropNode,
- cancel: !dropNode
- };
- var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
- if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
- targetNode.ui.endDrop();
- return false;
- }
- // allow target changing
- targetNode = dropEvent.target;
- if(point == "append" && !targetNode.isExpanded()){
- targetNode.expand(false, null, function(){
- this.completeDrop(dropEvent);
- }.createDelegate(this));
- }else{
- this.completeDrop(dropEvent);
- }
- return true;
- },
-
- completeDrop : function(de){
- var ns = de.dropNode, p = de.point, t = de.target;
- if(!(ns instanceof Array)){
- ns = [ns];
- }
- var n;
- for(var i = 0, len = ns.length; i < len; i++){
- n = ns[i];
- if(p == "above"){
- t.parentNode.insertBefore(n, t);
- }else if(p == "below"){
- t.parentNode.insertBefore(n, t.nextSibling);
- }else{
- t.appendChild(n);
+ /**
+ * Updates the message box body text
+ * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
+ * the XHTML-compliant non-breaking space character '&#160;')
+ * @return {Roo.MessageBox} This message box
+ */
+ updateText : function(text){
+ if(!dlg.isVisible() && !opt.width){
+ dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
}
- }
- n.ui.focus();
- if(this.tree.hlDrop){
- n.ui.highlight();
- }
- t.ui.endDrop();
- this.tree.fireEvent("nodedrop", de);
- },
-
- afterNodeMoved : function(dd, data, e, targetNode, dropNode){
- if(this.tree.hlDrop){
- dropNode.ui.focus();
- dropNode.ui.highlight();
- }
- this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
- },
-
- getTree : function(){
- return this.tree;
- },
-
- removeDropIndicators : function(n){
- if(n && n.ddel){
- var el = n.ddel;
- Roo.fly(el).removeClass([
- "x-tree-drag-insert-above",
- "x-tree-drag-insert-below",
- "x-tree-drag-append"]);
- this.lastInsertClass = "_noclass";
- }
- },
-
- beforeDragDrop : function(target, e, id){
- this.cancelExpand();
- return true;
- },
-
- afterRepair : function(data){
- if(data && Roo.enableFx){
- data.node.ui.highlight();
- }
- this.hideProxy();
- }
-
-});
+ msgEl.innerHTML = text || ' ';
+
+ var cw = Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
+ //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
+ var w = Math.max(
+ Math.min(opt.width || cw , this.maxWidth),
+ Math.max(opt.minWidth || this.minWidth, bwidth)
+ );
+ if(opt.prompt){
+ activeTextEl.setWidth(w);
+ }
+ if(dlg.isVisible()){
+ dlg.fixedcenter = false;
+ }
+ // to big, make it scroll. = But as usual stupid IE does not support
+ // !important..
+
+ if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
+ bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
+ bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
+ } else {
+ bodyEl.dom.style.height = '';
+ bodyEl.dom.style.overflowY = '';
+ }
+ if (cw > w) {
+ bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
+ } else {
+ bodyEl.dom.style.overflowX = '';
+ }
+
+ dlg.setContentSize(w, bodyEl.getHeight());
+ if(dlg.isVisible()){
+ dlg.fixedcenter = true;
+ }
+ return this;
+ },
-}
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+ /**
+ * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
+ * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
+ * @param {Number} value Any number between 0 and 1 (e.g., .5)
+ * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
+ * @return {Roo.MessageBox} This message box
+ */
+ updateProgress : function(value, text){
+ if(text){
+ this.updateText(text);
+ }
+ if (pp) { // weird bug on my firefox - for some reason this is not defined
+ pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
+ }
+ return this;
+ },
-if(Roo.dd.DragZone){
-Roo.tree.TreeDragZone = function(tree, config){
- Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
- this.tree = tree;
-};
+ /**
+ * Returns true if the message box is currently displayed
+ * @return {Boolean} True if the message box is visible, else false
+ */
+ isVisible : function(){
+ return dlg && dlg.isVisible();
+ },
-Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
- ddGroup : "TreeDD",
-
- onBeforeDrag : function(data, e){
- var n = data.node;
- return n && n.draggable && !n.disabled;
- },
-
-
- onInitDrag : function(e){
- var data = this.dragData;
- this.tree.getSelectionModel().select(data.node);
- this.proxy.update("");
- data.node.ui.appendDDGhost(this.proxy.ghost.dom);
- this.tree.fireEvent("startdrag", this.tree, data.node, e);
- },
-
- getRepairXY : function(e, data){
- return data.node.ui.getDDRepairXY();
- },
-
- onEndDrag : function(data, e){
- this.tree.fireEvent("enddrag", this.tree, data.node, e);
-
-
- },
-
- onValidDrop : function(dd, e, id){
- this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
- this.hideProxy();
- },
-
- beforeInvalidDrop : function(e, id){
- // this scrolls the original position back into view
- var sm = this.tree.getSelectionModel();
- sm.clearSelections();
- sm.select(this.dragData.node);
- }
+ /**
+ * Hides the message box if it is displayed
+ */
+ hide : function(){
+ if(this.isVisible()){
+ dlg.hide();
+ }
+ },
+
+ /**
+ * Displays a new message box, or reinitializes an existing message box, based on the config options
+ * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
+ * The following config object properties are supported:
+ * <pre>
+Property Type Description
+---------- --------------- ------------------------------------------------------------------------------------
+animEl String/Element An id or Element from which the message box should animate as it opens and
+ closes (defaults to undefined)
+buttons Object/Boolean A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
+ cancel:'Bar'}), or false to not show any buttons (defaults to false)
+closable Boolean False to hide the top-right close button (defaults to true). Note that
+ progress and wait dialogs will ignore this property and always hide the
+ close button as they can only be closed programmatically.
+cls String A custom CSS class to apply to the message box element
+defaultTextHeight Number The default height in pixels of the message box's multiline textarea if
+ displayed (defaults to 75)
+fn Function A callback function to execute after closing the dialog. The arguments to the
+ function will be btn (the name of the button that was clicked, if applicable,
+ e.g. "ok"), and text (the value of the active text field, if applicable).
+ Progress and wait dialogs will ignore this option since they do not respond to
+ user actions and can only be closed programmatically, so any required function
+ should be called by the same code after it closes the dialog.
+icon String A CSS class that provides a background image to be used as an icon for
+ the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
+maxWidth Number The maximum width in pixels of the message box (defaults to 600)
+minWidth Number The minimum width in pixels of the message box (defaults to 100)
+modal Boolean False to allow user interaction with the page while the message box is
+ displayed (defaults to true)
+msg String A string that will replace the existing message box body text (defaults
+ to the XHTML-compliant non-breaking space character ' ')
+multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
+progress Boolean True to display a progress bar (defaults to false)
+progressText String The text to display inside the progress bar if progress = true (defaults to '')
+prompt Boolean True to prompt the user to enter single-line text (defaults to false)
+proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
+title String The title text
+value String The string value to set into the active textbox element if displayed
+wait Boolean True to display a progress bar (defaults to false)
+width Number The width of the dialog in pixels
+</pre>
+ *
+ * Example usage:
+ * <pre><code>
+Roo.Msg.show({
+ title: 'Address',
+ msg: 'Please enter your address:',
+ width: 300,
+ buttons: Roo.MessageBox.OKCANCEL,
+ multiline: true,
+ fn: saveAddress,
+ animEl: 'addAddressBtn'
});
-}/*
+</code></pre>
+ * @param {Object} config Configuration options
+ * @return {Roo.MessageBox} This message box
+ */
+ show : function(options)
+ {
+
+ // this causes nightmares if you show one dialog after another
+ // especially on callbacks..
+
+ if(this.isVisible()){
+
+ this.hide();
+ Roo.log("[Roo.Messagebox] Show called while message displayed:" );
+ Roo.log("Old Dialog Message:" + msgEl.innerHTML );
+ Roo.log("New Dialog Message:" + options.msg )
+ //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
+ //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
+
+ }
+ var d = this.getDialog();
+ opt = options;
+ d.setTitle(opt.title || " ");
+ d.close.setDisplayed(opt.closable !== false);
+ activeTextEl = textboxEl;
+ opt.prompt = opt.prompt || (opt.multiline ? true : false);
+ if(opt.prompt){
+ if(opt.multiline){
+ textboxEl.hide();
+ textareaEl.show();
+ textareaEl.setHeight(typeof opt.multiline == "number" ?
+ opt.multiline : this.defaultTextHeight);
+ activeTextEl = textareaEl;
+ }else{
+ textboxEl.show();
+ textareaEl.hide();
+ }
+ }else{
+ textboxEl.hide();
+ textareaEl.hide();
+ }
+ progressEl.setDisplayed(opt.progress === true);
+ this.updateProgress(0);
+ activeTextEl.dom.value = opt.value || "";
+ if(opt.prompt){
+ dlg.setDefaultButton(activeTextEl);
+ }else{
+ var bs = opt.buttons;
+ var db = null;
+ if(bs && bs.ok){
+ db = buttons["ok"];
+ }else if(bs && bs.yes){
+ db = buttons["yes"];
+ }
+ dlg.setDefaultButton(db);
+ }
+ bwidth = updateButtons(opt.buttons);
+ this.updateText(opt.msg);
+ if(opt.cls){
+ d.el.addClass(opt.cls);
+ }
+ d.proxyDrag = opt.proxyDrag === true;
+ d.modal = opt.modal !== false;
+ d.mask = opt.modal !== false ? mask : false;
+ if(!d.isVisible()){
+ // force it to the end of the z-index stack so it gets a cursor in FF
+ document.body.appendChild(dlg.el.dom);
+ d.animateTarget = null;
+ d.show(options.animEl);
+ }
+ dlg.toFront();
+ return this;
+ },
+
+ /**
+ * Displays a message box with a progress bar. This message box has no buttons and is not closeable by
+ * the user. You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
+ * and closing the message box when the process is complete.
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @return {Roo.MessageBox} This message box
+ */
+ progress : function(title, msg){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: false,
+ progress:true,
+ closable:false,
+ minWidth: this.minProgressWidth,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
+ * If a callback function is passed it will be called after the user clicks the button, and the
+ * id of the button that was clicked will be passed as the only parameter to the callback
+ * (could also be the top-right close button).
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @param {Function} fn (optional) The callback function invoked after the message box is closed
+ * @param {Object} scope (optional) The scope of the callback function
+ * @return {Roo.MessageBox} This message box
+ */
+ alert : function(title, msg, fn, scope){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: this.OK,
+ fn: fn,
+ scope : scope,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
+ * interaction while waiting for a long-running process to complete that does not have defined intervals.
+ * You are responsible for closing the message box when the process is complete.
+ * @param {String} msg The message box body text
+ * @param {String} title (optional) The title bar text
+ * @return {Roo.MessageBox} This message box
+ */
+ wait : function(msg, title){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: false,
+ closable:false,
+ progress:true,
+ modal:true,
+ width:300,
+ wait:true
+ });
+ waitTimer = Roo.TaskMgr.start({
+ run: function(i){
+ Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
+ },
+ interval: 1000
+ });
+ return this;
+ },
+
+ /**
+ * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
+ * If a callback function is passed it will be called after the user clicks either button, and the id of the
+ * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @param {Function} fn (optional) The callback function invoked after the message box is closed
+ * @param {Object} scope (optional) The scope of the callback function
+ * @return {Roo.MessageBox} This message box
+ */
+ confirm : function(title, msg, fn, scope){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: this.YESNO,
+ fn: fn,
+ scope : scope,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
+ * JavaScript's Window.prompt). The prompt can be a single-line or multi-line textbox. If a callback function
+ * is passed it will be called after the user clicks either button, and the id of the button that was clicked
+ * (could also be the top-right close button) and the text that was entered will be passed as the two
+ * parameters to the callback.
+ * @param {String} title The title bar text
+ * @param {String} msg The message box body text
+ * @param {Function} fn (optional) The callback function invoked after the message box is closed
+ * @param {Object} scope (optional) The scope of the callback function
+ * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
+ * property, or the height in pixels to create the textbox (defaults to false / single-line)
+ * @return {Roo.MessageBox} This message box
+ */
+ prompt : function(title, msg, fn, scope, multiline){
+ this.show({
+ title : title,
+ msg : msg,
+ buttons: this.OKCANCEL,
+ fn: fn,
+ minWidth:250,
+ scope : scope,
+ prompt:true,
+ multiline: multiline,
+ modal : true
+ });
+ return this;
+ },
+
+ /**
+ * Button config that displays a single OK button
+ * @type Object
+ */
+ OK : {ok:true},
+ /**
+ * Button config that displays Yes and No buttons
+ * @type Object
+ */
+ YESNO : {yes:true, no:true},
+ /**
+ * Button config that displays OK and Cancel buttons
+ * @type Object
+ */
+ OKCANCEL : {ok:true, cancel:true},
+ /**
+ * Button config that displays Yes, No and Cancel buttons
+ * @type Object
+ */
+ YESNOCANCEL : {yes:true, no:true, cancel:true},
+
+ /**
+ * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
+ * @type Number
+ */
+ defaultTextHeight : 75,
+ /**
+ * The maximum width in pixels of the message box (defaults to 600)
+ * @type Number
+ */
+ maxWidth : 600,
+ /**
+ * The minimum width in pixels of the message box (defaults to 100)
+ * @type Number
+ */
+ minWidth : 100,
+ /**
+ * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
+ * for setting a different minimum width than text-only dialogs may need (defaults to 250)
+ * @type Number
+ */
+ minProgressWidth : 250,
+ /**
+ * An object containing the default button text strings that can be overriden for localized language support.
+ * Supported properties are: ok, cancel, yes and no.
+ * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
+ * @type Object
+ */
+ buttonText : {
+ ok : "OK",
+ cancel : "Cancel",
+ yes : "Yes",
+ no : "No"
+ }
+ };
+}();
+
+/**
+ * Shorthand for {@link Roo.MessageBox}
+ */
+Roo.Msg = Roo.MessageBox;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
/**
- * @class Roo.tree.TreeEditor
- * @extends Roo.Editor
- * Provides editor functionality for inline tree node editing. Any valid {@link Roo.form.Field} can be used
- * as the editor field.
- * @constructor
- * @param {Object} config (used to be the tree panel.)
- * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
- *
- * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
- * @cfg {Roo.form.TextField} field [required] The field configuration
- *
- *
+ * @class Roo.QuickTips
+ * Provides attractive and customizable tooltips for any element.
+ * @static
*/
-Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
- var tree = config;
- var field;
- if (oldconfig) { // old style..
- field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
- } else {
- // new style..
- tree = config.tree;
- config.field = config.field || {};
- config.field.xtype = 'TextField';
- field = Roo.factory(config.field, Roo.form);
- }
- config = config || {};
-
-
- this.addEvents({
- /**
- * @event beforenodeedit
- * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
- * false from the handler of this event.
- * @param {Editor} this
- * @param {Roo.tree.Node} node
- */
- "beforenodeedit" : true
- });
+Roo.QuickTips = function(){
+ var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
+ var ce, bd, xy, dd;
+ var visible = false, disabled = true, inited = false;
+ var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
- //Roo.log(config);
- Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
-
- this.tree = tree;
-
- tree.on('beforeclick', this.beforeNodeClick, this);
- tree.getTreeEl().on('mousedown', this.hide, this);
- this.on('complete', this.updateNode, this);
- this.on('beforestartedit', this.fitToTree, this);
- this.on('startedit', this.bindScroll, this, {delay:10});
- this.on('specialkey', this.onSpecialKey, this);
-};
-
-Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
- /**
- * @cfg {String} alignment
- * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
- */
- alignment: "l-l",
- // inherit
- autoSize: false,
- /**
- * @cfg {Boolean} hideEl
- * True to hide the bound element while the editor is displayed (defaults to false)
- */
- hideEl : false,
+ var onOver = function(e){
+ if(disabled){
+ return;
+ }
+ var t = e.getTarget();
+ if(!t || t.nodeType !== 1 || t == document || t == document.body){
+ return;
+ }
+ if(ce && t == ce.el){
+ clearTimeout(hideProc);
+ return;
+ }
+ if(t && tagEls[t.id]){
+ tagEls[t.id].el = t;
+ showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
+ return;
+ }
+ var ttp, et = Roo.fly(t);
+ var ns = cfg.namespace;
+ if(tm.interceptTitles && t.title){
+ ttp = t.title;
+ t.qtip = ttp;
+ t.removeAttribute("title");
+ e.preventDefault();
+ }else{
+ ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
+ }
+ if(ttp){
+ showProc = show.defer(tm.showDelay, tm, [{
+ el: t,
+ text: ttp.replace(/\\n/g,'<br/>'),
+ width: et.getAttributeNS(ns, cfg.width),
+ autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
+ title: et.getAttributeNS(ns, cfg.title),
+ cls: et.getAttributeNS(ns, cfg.cls)
+ }]);
+ }
+ };
+
+ var onOut = function(e){
+ clearTimeout(showProc);
+ var t = e.getTarget();
+ if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
+ hideProc = setTimeout(hide, tm.hideDelay);
+ }
+ };
+
+ var onMove = function(e){
+ if(disabled){
+ return;
+ }
+ xy = e.getXY();
+ xy[1] += 18;
+ if(tm.trackMouse && ce){
+ el.setXY(xy);
+ }
+ };
+
+ var onDown = function(e){
+ clearTimeout(showProc);
+ clearTimeout(hideProc);
+ if(!e.within(el)){
+ if(tm.hideOnClick){
+ hide();
+ tm.disable();
+ tm.enable.defer(100, tm);
+ }
+ }
+ };
+
+ var getPad = function(){
+ return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
+ };
+
+ var show = function(o){
+ if(disabled){
+ return;
+ }
+ clearTimeout(dismissProc);
+ ce = o;
+ if(removeCls){ // in case manually hidden
+ el.removeClass(removeCls);
+ removeCls = null;
+ }
+ if(ce.cls){
+ el.addClass(ce.cls);
+ removeCls = ce.cls;
+ }
+ if(ce.title){
+ tipTitle.update(ce.title);
+ tipTitle.show();
+ }else{
+ tipTitle.update('');
+ tipTitle.hide();
+ }
+ el.dom.style.width = tm.maxWidth+'px';
+ //tipBody.dom.style.width = '';
+ tipBodyText.update(o.text);
+ var p = getPad(), w = ce.width;
+ if(!w){
+ var td = tipBodyText.dom;
+ var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
+ if(aw > tm.maxWidth){
+ w = tm.maxWidth;
+ }else if(aw < tm.minWidth){
+ w = tm.minWidth;
+ }else{
+ w = aw;
+ }
+ }
+ //tipBody.setWidth(w);
+ el.setWidth(parseInt(w, 10) + p);
+ if(ce.autoHide === false){
+ close.setDisplayed(true);
+ if(dd){
+ dd.unlock();
+ }
+ }else{
+ close.setDisplayed(false);
+ if(dd){
+ dd.lock();
+ }
+ }
+ if(xy){
+ el.avoidY = xy[1]-18;
+ el.setXY(xy);
+ }
+ if(tm.animate){
+ el.setOpacity(.1);
+ el.setStyle("visibility", "visible");
+ el.fadeIn({callback: afterShow});
+ }else{
+ afterShow();
+ }
+ };
+
+ var afterShow = function(){
+ if(ce){
+ el.show();
+ esc.enable();
+ if(tm.autoDismiss && ce.autoHide !== false){
+ dismissProc = setTimeout(hide, tm.autoDismissDelay);
+ }
+ }
+ };
+
+ var hide = function(noanim){
+ clearTimeout(dismissProc);
+ clearTimeout(hideProc);
+ ce = null;
+ if(el.isVisible()){
+ esc.disable();
+ if(noanim !== true && tm.animate){
+ el.fadeOut({callback: afterHide});
+ }else{
+ afterHide();
+ }
+ }
+ };
+
+ var afterHide = function(){
+ el.hide();
+ if(removeCls){
+ el.removeClass(removeCls);
+ removeCls = null;
+ }
+ };
+
+ return {
+ /**
+ * @cfg {Number} minWidth
+ * The minimum width of the quick tip (defaults to 40)
+ */
+ minWidth : 40,
+ /**
+ * @cfg {Number} maxWidth
+ * The maximum width of the quick tip (defaults to 300)
+ */
+ maxWidth : 300,
+ /**
+ * @cfg {Boolean} interceptTitles
+ * True to automatically use the element's DOM title value if available (defaults to false)
+ */
+ interceptTitles : false,
+ /**
+ * @cfg {Boolean} trackMouse
+ * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
+ */
+ trackMouse : false,
+ /**
+ * @cfg {Boolean} hideOnClick
+ * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
+ */
+ hideOnClick : true,
+ /**
+ * @cfg {Number} showDelay
+ * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
+ */
+ showDelay : 500,
+ /**
+ * @cfg {Number} hideDelay
+ * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
+ */
+ hideDelay : 200,
+ /**
+ * @cfg {Boolean} autoHide
+ * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
+ * Used in conjunction with hideDelay.
+ */
+ autoHide : true,
+ /**
+ * @cfg {Boolean}
+ * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
+ * (defaults to true). Used in conjunction with autoDismissDelay.
+ */
+ autoDismiss : true,
+ /**
+ * @cfg {Number}
+ * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
+ */
+ autoDismissDelay : 5000,
+ /**
+ * @cfg {Boolean} animate
+ * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
+ */
+ animate : false,
+
+ /**
+ * @cfg {String} title
+ * Title text to display (defaults to ''). This can be any valid HTML markup.
+ */
+ title: '',
+ /**
+ * @cfg {String} text
+ * Body text to display (defaults to ''). This can be any valid HTML markup.
+ */
+ text : '',
+ /**
+ * @cfg {String} cls
+ * A CSS class to apply to the base quick tip element (defaults to '').
+ */
+ cls : '',
+ /**
+ * @cfg {Number} width
+ * Width in pixels of the quick tip (defaults to auto). Width will be ignored if it exceeds the bounds of
+ * minWidth or maxWidth.
+ */
+ width : null,
+
/**
- * @cfg {String} cls
- * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
+ * Initialize and enable QuickTips for first use. This should be called once before the first attempt to access
+ * or display QuickTips in a page.
*/
- cls: "x-small-editor x-tree-editor",
+ init : function(){
+ tm = Roo.QuickTips;
+ cfg = tm.tagConfig;
+ if(!inited){
+ if(!Roo.isReady){ // allow calling of init() before onReady
+ Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
+ return;
+ }
+ el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
+ el.fxDefaults = {stopFx: true};
+ // maximum custom styling
+ //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
+ el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');
+ tipTitle = el.child('h3');
+ tipTitle.enableDisplayMode("block");
+ tipBody = el.child('div.x-tip-bd');
+ tipBodyText = el.child('div.x-tip-bd-inner');
+ //bdLeft = el.child('div.x-tip-bd-left');
+ //bdRight = el.child('div.x-tip-bd-right');
+ close = el.child('div.x-tip-close');
+ close.enableDisplayMode("block");
+ close.on("click", hide);
+ var d = Roo.get(document);
+ d.on("mousedown", onDown);
+ d.on("mouseover", onOver);
+ d.on("mouseout", onOut);
+ d.on("mousemove", onMove);
+ esc = d.addKeyListener(27, hide);
+ esc.disable();
+ if(Roo.dd.DD){
+ dd = el.initDD("default", null, {
+ onDrag : function(){
+ el.sync();
+ }
+ });
+ dd.setHandleElId(tipTitle.id);
+ dd.lock();
+ }
+ inited = true;
+ }
+ this.enable();
+ },
+
/**
- * @cfg {Boolean} shim
- * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
+ * Configures a new quick tip instance and assigns it to a target element. The following config options
+ * are supported:
+ * <pre>
+Property Type Description
+---------- --------------------- ------------------------------------------------------------------------
+target Element/String/Array An Element, id or array of ids that this quick tip should be tied to
+ * </ul>
+ * @param {Object} config The config object
*/
- shim:false,
- // inherit
- shadow:"frame",
+ register : function(config){
+ var cs = config instanceof Array ? config : arguments;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ var c = cs[i];
+ var target = c.target;
+ if(target){
+ if(target instanceof Array){
+ for(var j = 0, jlen = target.length; j < jlen; j++){
+ tagEls[target[j]] = c;
+ }
+ }else{
+ tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
+ }
+ }
+ }
+ },
+
/**
- * @cfg {Number} maxWidth
- * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
- * the containing tree element's size, it will be automatically limited for you to the container width, taking
- * scroll and client offsets into account prior to each edit.
+ * Removes this quick tip from its element and destroys it.
+ * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
*/
- maxWidth: 250,
-
- editDelay : 350,
-
- // private
- fitToTree : function(ed, el){
- var td = this.tree.getTreeEl().dom, nd = el.dom;
- if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
- td.scrollLeft = nd.offsetLeft;
- }
- var w = Math.min(
- this.maxWidth,
- (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
- this.setSize(w, '');
-
- return this.fireEvent('beforenodeedit', this, this.editNode);
-
- },
-
- // private
- triggerEdit : function(node){
- this.completeEdit();
- this.editNode = node;
- this.startEdit(node.ui.textNode, node.text);
- },
+ unregister : function(el){
+ delete tagEls[Roo.id(el)];
+ },
- // private
- bindScroll : function(){
- this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
- },
+ /**
+ * Enable this quick tip.
+ */
+ enable : function(){
+ if(inited && disabled){
+ locks.pop();
+ if(locks.length < 1){
+ disabled = false;
+ }
+ }
+ },
- // private
- beforeNodeClick : function(node, e){
- var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
- this.lastClick = new Date();
- if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
- e.stopEvent();
- this.triggerEdit(node);
- return false;
- }
- return true;
- },
+ /**
+ * Disable this quick tip.
+ */
+ disable : function(){
+ disabled = true;
+ clearTimeout(showProc);
+ clearTimeout(hideProc);
+ clearTimeout(dismissProc);
+ if(ce){
+ hide(true);
+ }
+ locks.push(1);
+ },
- // private
- updateNode : function(ed, value){
- this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
- this.editNode.setText(value);
- },
+ /**
+ * Returns true if the quick tip is enabled, else false.
+ */
+ isEnabled : function(){
+ return !disabled;
+ },
- // private
- onHide : function(){
- Roo.tree.TreeEditor.superclass.onHide.call(this);
- if(this.editNode){
- this.editNode.ui.focus();
- }
- },
+ // private
+ tagConfig : {
+ namespace : "roo", // was ext?? this may break..
+ alt_namespace : "ext",
+ attribute : "qtip",
+ width : "width",
+ target : "target",
+ title : "qtitle",
+ hide : "hide",
+ cls : "qclass"
+ }
+ };
+}();
- // private
- onSpecialKey : function(field, e){
- var k = e.getKey();
- if(k == e.ESC){
- e.stopEvent();
- this.cancelEdit();
- }else if(k == e.ENTER && !e.hasModifier()){
- e.stopEvent();
- this.completeEdit();
- }
- }
-});//<Script type="text/javascript">
-/*
+// backwards compat
+Roo.QuickTips.tips = Roo.QuickTips.register;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
+
/**
- * Not documented??? - probably should be...
+ * @class Roo.tree.TreePanel
+ * @extends Roo.data.Tree
+ * @cfg {Roo.tree.TreeNode} root The root node
+ * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
+ * @cfg {Boolean} lines false to disable tree lines (defaults to true)
+ * @cfg {Boolean} enableDD true to enable drag and drop
+ * @cfg {Boolean} enableDrag true to enable just drag
+ * @cfg {Boolean} enableDrop true to enable just drop
+ * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
+ * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
+ * @cfg {String} ddGroup The DD group this TreePanel belongs to
+ * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
+ * @cfg {Boolean} ddScroll true to enable YUI body scrolling
+ * @cfg {Boolean} containerScroll true to register this container with ScrollManager
+ * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
+ * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
+ * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
+ * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
+ * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
+ * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
+ * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
+ * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
+ * @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
+ * @cfg {Function} rendererTip DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
+ *
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
*/
-
-Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
- //focus: Roo.emptyFn, // prevent odd scrolling behavior
+Roo.tree.TreePanel = function(el, config){
+ var root = false;
+ var loader = false;
+ if (config.root) {
+ root = config.root;
+ delete config.root;
+ }
+ if (config.loader) {
+ loader = config.loader;
+ delete config.loader;
+ }
- renderElements : function(n, a, targetNode, bulkRender){
- //consel.log("renderElements?");
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
-
- var t = n.getOwnerTree();
- var tid = Pman.Tab.Document_TypesTree.tree.el.id;
-
- var cols = t.columns;
- var bw = t.borderWidth;
- var c = cols[0];
- var href = a.href ? a.href : Roo.isGecko ? "" : "#";
- var cb = typeof a.checked == "boolean";
- var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
- var colcls = 'x-t-' + tid + '-c0';
- var buf = [
- '<li class="x-tree-node">',
-
-
- '<div class="x-tree-node-el ', a.cls,'">',
- // extran...
- '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
-
-
- '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon " />',
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
- (a.icon ? ' x-tree-node-inline-icon' : ''),
- (a.iconCls ? ' '+a.iconCls : ''),
- '" unselectable="on" />',
- (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' +
- (a.checked ? 'checked="checked" />' : ' />')) : ''),
-
- '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
- (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
- '<span unselectable="on" qtip="' + tx + '">',
- tx,
- '</span></a>' ,
- '</div>',
- '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
- (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
- ];
- for(var i = 1, len = cols.length; i < len; i++){
- c = cols[i];
- colcls = 'x-t-' + tid + '-c' +i;
- tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
- buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
- '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
- "</div>");
- }
-
- buf.push(
- '</a>',
- '<div class="x-clear"></div></div>',
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',
- "</li>");
+ Roo.apply(this, config);
+ Roo.tree.TreePanel.superclass.constructor.call(this);
+ this.el = Roo.get(el);
+ this.el.addClass('x-tree');
+ //console.log(root);
+ if (root) {
+ this.setRootNode( Roo.factory(root, Roo.tree));
+ }
+ if (loader) {
+ this.loader = Roo.factory(loader, Roo.tree);
+ }
+ /**
+ * Read-only. The id of the container element becomes this TreePanel's id.
+ */
+ this.id = this.el.id;
+ this.addEvents({
+ /**
+ * @event beforeload
+ * Fires before a node is loaded, return false to cancel
+ * @param {Node} node The node being loaded
+ */
+ "beforeload" : true,
+ /**
+ * @event load
+ * Fires when a node is loaded
+ * @param {Node} node The node that was loaded
+ */
+ "load" : true,
+ /**
+ * @event textchange
+ * Fires when the text for a node is changed
+ * @param {Node} node The node
+ * @param {String} text The new text
+ * @param {String} oldText The old text
+ */
+ "textchange" : true,
+ /**
+ * @event beforeexpand
+ * Fires before a node is expanded, return false to cancel.
+ * @param {Node} node The node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforeexpand" : true,
+ /**
+ * @event beforecollapse
+ * Fires before a node is collapsed, return false to cancel.
+ * @param {Node} node The node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforecollapse" : true,
+ /**
+ * @event expand
+ * Fires when a node is expanded
+ * @param {Node} node The node
+ */
+ "expand" : true,
+ /**
+ * @event disabledchange
+ * Fires when the disabled status of a node changes
+ * @param {Node} node The node
+ * @param {Boolean} disabled
+ */
+ "disabledchange" : true,
+ /**
+ * @event collapse
+ * Fires when a node is collapsed
+ * @param {Node} node The node
+ */
+ "collapse" : true,
+ /**
+ * @event beforeclick
+ * Fires before click processing on a node. Return false to cancel the default action.
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "beforeclick":true,
+ /**
+ * @event checkchange
+ * Fires when a node with a checkbox's checked property changes
+ * @param {Node} this This node
+ * @param {Boolean} checked
+ */
+ "checkchange":true,
+ /**
+ * @event click
+ * Fires when a node is clicked
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "click":true,
+ /**
+ * @event dblclick
+ * Fires when a node is double clicked
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "dblclick":true,
+ /**
+ * @event contextmenu
+ * Fires when a node is right clicked
+ * @param {Node} node The node
+ * @param {Roo.EventObject} e The event object
+ */
+ "contextmenu":true,
+ /**
+ * @event beforechildrenrendered
+ * Fires right before the child nodes for a node are rendered
+ * @param {Node} node The node
+ */
+ "beforechildrenrendered":true,
+ /**
+ * @event startdrag
+ * Fires when a node starts being dragged
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {event} e The raw browser event
+ */
+ "startdrag" : true,
+ /**
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {event} e The raw browser event
+ */
+ "enddrag" : true,
+ /**
+ * @event dragdrop
+ * Fires when a dragged node is dropped on a valid DD target
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {DD} dd The dd it was dropped on
+ * @param {event} e The raw browser event
+ */
+ "dragdrop" : true,
+ /**
+ * @event beforenodedrop
+ * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
+ * to be inserted by setting them on this object.</li>
+ * <li>cancel - Set this to true to cancel the drop.</li>
+ * </ul>
+ * @param {Object} dropEvent
+ */
+ "beforenodedrop" : true,
+ /**
+ * @event nodedrop
+ * Fires after a DD object is dropped on a node in this tree. The dropEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Dropped node(s).</li>
+ * </ul>
+ * @param {Object} dropEvent
+ */
+ "nodedrop" : true,
+ /**
+ * @event nodedragover
+ * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Drop node(s) provided by the source.</li>
+ * <li>cancel - Set this to true to signal drop not allowed.</li>
+ * </ul>
+ * @param {Object} dragOverEvent
+ */
+ "nodedragover" : true,
+ /**
+ * @event appendnode
+ * Fires when append node to the tree
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {Number} index The index of the newly appended node
+ */
+ "appendnode" : true
- if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
- this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
- n.nextSibling.ui.getEl(), buf.join(""));
- }else{
- this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+ });
+ if(this.singleExpand){
+ this.on("beforeexpand", this.restrictExpand, this);
+ }
+ if (this.editor) {
+ this.editor.tree = this;
+ this.editor = Roo.factory(this.editor, Roo.tree);
+ }
+
+ if (this.selModel) {
+ this.selModel = Roo.factory(this.selModel, Roo.tree);
+ }
+
+};
+Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
+ rootVisible : true,
+ animate: Roo.enableFx,
+ lines : true,
+ enableDD : false,
+ hlDrop : Roo.enableFx,
+
+ renderer: false,
+
+ rendererTip: false,
+ // private
+ restrictExpand : function(node){
+ var p = node.parentNode;
+ if(p){
+ if(p.expandedChild && p.expandedChild.parentNode == p){
+ p.expandedChild.collapse();
+ }
+ p.expandedChild = node;
}
- var el = this.wrap.firstChild;
- this.elRow = el;
- this.elNode = el.firstChild;
- this.ranchor = el.childNodes[1];
- this.ctNode = this.wrap.childNodes[1];
- var cs = el.firstChild.childNodes;
- this.indentNode = cs[0];
- this.ecNode = cs[1];
- this.iconNode = cs[2];
- var index = 3;
- if(cb){
- this.checkbox = cs[3];
- index++;
+ },
+
+ // private override
+ setRootNode : function(node){
+ Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
+ if(!this.rootVisible){
+ node.ui = new Roo.tree.RootTreeNodeUI(node);
}
- this.anchor = cs[index];
-
- this.textNode = cs[index].firstChild;
-
- //el.on("click", this.onClick, this);
- //el.on("dblclick", this.onDblClick, this);
-
-
- // console.log(this);
+ return node;
},
- initEvents : function(){
- Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
-
-
- var a = this.ranchor;
- var el = Roo.get(a);
+ /**
+ * Returns the container element for this TreePanel
+ */
+ getEl : function(){
+ return this.el;
+ },
- if(Roo.isOpera){ // opera render bug ignores the CSS
- el.setStyle("text-decoration", "none");
+ /**
+ * Returns the default TreeLoader for this TreePanel
+ */
+ getLoader : function(){
+ return this.loader;
+ },
+
+ /**
+ * Expand all nodes
+ */
+ expandAll : function(){
+ this.root.expand(true);
+ },
+
+ /**
+ * Collapse all nodes
+ */
+ collapseAll : function(){
+ this.root.collapse(true);
+ },
+
+ /**
+ * Returns the selection model used by this TreePanel
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.tree.DefaultSelectionModel();
}
+ return this.selModel;
+ },
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
- el.on("contextmenu", this.onContextMenu, this);
-
+ /**
+ * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
+ * @param {String} attribute (optional) Defaults to null (return the actual nodes)
+ * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
+ * @return {Array}
+ */
+ getChecked : function(a, startNode){
+ startNode = startNode || this.root;
+ var r = [];
+ var f = function(){
+ if(this.attributes.checked){
+ r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
+ }
+ }
+ startNode.cascade(f);
+ return r;
},
-
- /*onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
+
+ /**
+ * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
+ * @param {String} path
+ * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
+ * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
+ * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
+ */
+ expandPath : function(path, attr, callback){
+ attr = attr || "id";
+ var keys = path.split(this.pathSeparator);
+ var curNode = this.root;
+ if(curNode.attributes[attr] != keys[1]){ // invalid root
+ if(callback){
+ callback(false, null);
+ }
+ return;
+ }
+ var index = 1;
+ var f = function(){
+ if(++index == keys.length){
+ if(callback){
+ callback(true, curNode);
+ }
+ return;
+ }
+ var c = curNode.findChild(attr, keys[index]);
+ if(!c){
+ if(callback){
+ callback(false, curNode);
+ }
+ return;
+ }
+ curNode = c;
+ c.expand(false, false, f);
+ };
+ curNode.expand(false, false, f);
+ },
+
+ /**
+ * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
+ * @param {String} path
+ * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
+ * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
+ * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
+ */
+ selectPath : function(path, attr, callback){
+ attr = attr || "id";
+ var keys = path.split(this.pathSeparator);
+ var v = keys.pop();
+ if(keys.length > 0){
+ var f = function(success, node){
+ if(success && node){
+ var n = node.findChild(attr, v);
+ if(n){
+ n.select();
+ if(callback){
+ callback(true, n);
+ }
+ }else if(callback){
+ callback(false, n);
+ }
+ }else{
+ if(callback){
+ callback(false, n);
+ }
+ }
+ };
+ this.expandPath(keys.join(this.pathSeparator), attr, f);
}else{
- //this.blur();
- this.removeClass("x-tree-selected");
+ this.root.select();
+ if(callback){
+ callback(true, this.root);
+ }
}
- },*/
- addClass : function(cls){
- if(this.elRow){
- Roo.fly(this.elRow).addClass(cls);
+ },
+
+ getTreeEl : function(){
+ return this.el;
+ },
+
+ /**
+ * Trigger rendering of this TreePanel
+ */
+ render : function(){
+ if (this.innerCt) {
+ return this; // stop it rendering more than once!!
}
- },
-
-
- removeClass : function(cls){
- if(this.elRow){
- Roo.fly(this.elRow).removeClass(cls);
+ this.innerCt = this.el.createChild({tag:"ul",
+ cls:"x-tree-root-ct " +
+ (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
+
+ if(this.containerScroll){
+ Roo.dd.ScrollManager.register(this.el);
+ }
+ if((this.enableDD || this.enableDrop) && !this.dropZone){
+ /**
+ * The dropZone used by this tree if drop is enabled
+ * @type Roo.tree.TreeDropZone
+ */
+ this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
+ ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
+ });
}
+ if((this.enableDD || this.enableDrag) && !this.dragZone){
+ /**
+ * The dragZone used by this tree if drag is enabled
+ * @type Roo.tree.TreeDragZone
+ */
+ this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
+ ddGroup: this.ddGroup || "TreeDD",
+ scroll: this.ddScroll
+ });
+ }
+ this.getSelectionModel().init(this);
+ if (!this.root) {
+ Roo.log("ROOT not set in tree");
+ return this;
+ }
+ this.root.render();
+ if(!this.rootVisible){
+ this.root.renderChildren();
+ }
+ return this;
}
-
-
-
-});//<Script type="text/javascript">
-
-/*
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.tree.ColumnTree
- * @extends Roo.tree.TreePanel
- * @cfg {Object} columns Including width, header, renderer, cls, dataIndex
- * @cfg {int} borderWidth compined right/left border allowance
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * @class Roo.tree.DefaultSelectionModel
+ * @extends Roo.util.Observable
+ * The default single selection for a TreePanel.
+ * @param {Object} cfg Configuration
*/
-Roo.tree.ColumnTree = function(el, config)
-{
- Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
+Roo.tree.DefaultSelectionModel = function(cfg){
+ this.selNode = null;
+
+
+
this.addEvents({
- /**
- * @event resize
- * Fire this event on a container when it resizes
- * @param {int} w Width
- * @param {int} h Height
+ /**
+ * @event selectionchange
+ * Fires when the selected node changes
+ * @param {DefaultSelectionModel} this
+ * @param {TreeNode} node the new selection
*/
- "resize" : true
- });
- this.on('resize', this.onResize, this);
+ "selectionchange" : true,
+
+ /**
+ * @event beforeselect
+ * Fires before the selected node changes, return false to cancel the change
+ * @param {DefaultSelectionModel} this
+ * @param {TreeNode} node the new selection
+ * @param {TreeNode} node the old selection
+ */
+ "beforeselect" : true
+ });
+
+ Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
};
-Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
- //lines:false,
+Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
+ init : function(tree){
+ this.tree = tree;
+ tree.getTreeEl().on("keydown", this.onKeyDown, this);
+ tree.on("click", this.onNodeClick, this);
+ },
+ onNodeClick : function(node, e){
+ if (e.ctrlKey && this.selNode == node) {
+ this.unselect(node);
+ return;
+ }
+ this.select(node);
+ },
- borderWidth: Roo.isBorderBox ? 0 : 2,
- headEls : false,
+ /**
+ * Select a node.
+ * @param {TreeNode} node The node to select
+ * @return {TreeNode} The selected node
+ */
+ select : function(node){
+ var last = this.selNode;
+ if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
+ if(last){
+ last.ui.onSelectedChange(false);
+ }
+ this.selNode = node;
+ node.ui.onSelectedChange(true);
+ this.fireEvent("selectionchange", this, node, last);
+ }
+ return node;
+ },
- render : function(){
- // add the header.....
-
- Roo.tree.ColumnTree.superclass.render.apply(this);
-
- this.el.addClass('x-column-tree');
-
- this.headers = this.el.createChild(
- {cls:'x-tree-headers'},this.innerCt.dom);
-
- var cols = this.columns, c;
- var totalWidth = 0;
- this.headEls = [];
- var len = cols.length;
- for(var i = 0; i < len; i++){
- c = cols[i];
- totalWidth += c.width;
- this.headEls.push(this.headers.createChild({
- cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
- cn: {
- cls:'x-tree-hd-text',
- html: c.header
- },
- style:'width:'+(c.width-this.borderWidth)+'px;'
- }));
+ /**
+ * Deselect a node.
+ * @param {TreeNode} node The node to unselect
+ */
+ unselect : function(node){
+ if(this.selNode == node){
+ this.clearSelections();
+ }
+ },
+
+ /**
+ * Clear all selections
+ */
+ clearSelections : function(){
+ var n = this.selNode;
+ if(n){
+ n.ui.onSelectedChange(false);
+ this.selNode = null;
+ this.fireEvent("selectionchange", this, null);
}
- this.headers.createChild({cls:'x-clear'});
- // prevent floats from wrapping when clipped
- this.headers.setWidth(totalWidth);
- //this.innerCt.setWidth(totalWidth);
- this.innerCt.setStyle({ overflow: 'auto' });
- this.onResize(this.width, this.height);
-
-
+ return n;
},
- onResize : function(w,h)
- {
- this.height = h;
- this.width = w;
- // resize cols..
- this.innerCt.setWidth(this.width);
- this.innerCt.setHeight(this.height-20);
-
- // headers...
- var cols = this.columns, c;
- var totalWidth = 0;
- var expEl = false;
- var len = cols.length;
- for(var i = 0; i < len; i++){
- c = cols[i];
- if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
- // it's the expander..
- expEl = this.headEls[i];
- continue;
+
+ /**
+ * Get the selected node
+ * @return {TreeNode} The selected node
+ */
+ getSelectedNode : function(){
+ return this.selNode;
+ },
+
+ /**
+ * Returns true if the node is selected
+ * @param {TreeNode} node The node to check
+ * @return {Boolean}
+ */
+ isSelected : function(node){
+ return this.selNode == node;
+ },
+
+ /**
+ * Selects the node above the selected node in the tree, intelligently walking the nodes
+ * @return TreeNode The new selection
+ */
+ selectPrevious : function(){
+ var s = this.selNode || this.lastSelNode;
+ if(!s){
+ return null;
+ }
+ var ps = s.previousSibling;
+ if(ps){
+ if(!ps.isExpanded() || ps.childNodes.length < 1){
+ return this.select(ps);
+ } else{
+ var lc = ps.lastChild;
+ while(lc && lc.isExpanded() && lc.childNodes.length > 0){
+ lc = lc.lastChild;
+ }
+ return this.select(lc);
}
- totalWidth += c.width;
-
+ } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
+ return this.select(s.parentNode);
}
- if (expEl) {
- expEl.setWidth( ((w - totalWidth)-this.borderWidth - 20));
+ return null;
+ },
+
+ /**
+ * Selects the node above the selected node in the tree, intelligently walking the nodes
+ * @return TreeNode The new selection
+ */
+ selectNext : function(){
+ var s = this.selNode || this.lastSelNode;
+ if(!s){
+ return null;
}
- this.headers.setWidth(w-20);
+ if(s.firstChild && s.isExpanded()){
+ return this.select(s.firstChild);
+ }else if(s.nextSibling){
+ return this.select(s.nextSibling);
+ }else if(s.parentNode){
+ var newS = null;
+ s.parentNode.bubble(function(){
+ if(this.nextSibling){
+ newS = this.getOwnerTree().selModel.select(this.nextSibling);
+ return false;
+ }
+ });
+ return newS;
+ }
+ return null;
+ },
-
-
-
+ onKeyDown : function(e){
+ var s = this.selNode || this.lastSelNode;
+ // undesirable, but required
+ var sm = this;
+ if(!s){
+ return;
+ }
+ var k = e.getKey();
+ switch(k){
+ case e.DOWN:
+ e.stopEvent();
+ this.selectNext();
+ break;
+ case e.UP:
+ e.stopEvent();
+ this.selectPrevious();
+ break;
+ case e.RIGHT:
+ e.preventDefault();
+ if(s.hasChildNodes()){
+ if(!s.isExpanded()){
+ s.expand();
+ }else if(s.firstChild){
+ this.select(s.firstChild, e);
+ }
+ }
+ break;
+ case e.LEFT:
+ e.preventDefault();
+ if(s.hasChildNodes() && s.isExpanded()){
+ s.collapse();
+ }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
+ this.select(s.parentNode, e);
+ }
+ break;
+ };
}
});
-/*
+
+/**
+ * @class Roo.tree.MultiSelectionModel
+ * @extends Roo.util.Observable
+ * Multi selection for a TreePanel.
+ * @param {Object} cfg Configuration
+ */
+Roo.tree.MultiSelectionModel = function(){
+ this.selNodes = [];
+ this.selMap = {};
+ this.addEvents({
+ /**
+ * @event selectionchange
+ * Fires when the selected nodes change
+ * @param {MultiSelectionModel} this
+ * @param {Array} nodes Array of the selected nodes
+ */
+ "selectionchange" : true
+ });
+ Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
+
+};
+
+Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
+ init : function(tree){
+ this.tree = tree;
+ tree.getTreeEl().on("keydown", this.onKeyDown, this);
+ tree.on("click", this.onNodeClick, this);
+ },
+
+ onNodeClick : function(node, e){
+ this.select(node, e, e.ctrlKey);
+ },
+
+ /**
+ * Select a node.
+ * @param {TreeNode} node The node to select
+ * @param {EventObject} e (optional) An event associated with the selection
+ * @param {Boolean} keepExisting True to retain existing selections
+ * @return {TreeNode} The selected node
+ */
+ select : function(node, e, keepExisting){
+ if(keepExisting !== true){
+ this.clearSelections(true);
+ }
+ if(this.isSelected(node)){
+ this.lastSelNode = node;
+ return node;
+ }
+ this.selNodes.push(node);
+ this.selMap[node.id] = node;
+ this.lastSelNode = node;
+ node.ui.onSelectedChange(true);
+ this.fireEvent("selectionchange", this, this.selNodes);
+ return node;
+ },
+
+ /**
+ * Deselect a node.
+ * @param {TreeNode} node The node to unselect
+ */
+ unselect : function(node){
+ if(this.selMap[node.id]){
+ node.ui.onSelectedChange(false);
+ var sn = this.selNodes;
+ var index = -1;
+ if(sn.indexOf){
+ index = sn.indexOf(node);
+ }else{
+ for(var i = 0, len = sn.length; i < len; i++){
+ if(sn[i] == node){
+ index = i;
+ break;
+ }
+ }
+ }
+ if(index != -1){
+ this.selNodes.splice(index, 1);
+ }
+ delete this.selMap[node.id];
+ this.fireEvent("selectionchange", this, this.selNodes);
+ }
+ },
+
+ /**
+ * Clear all selections
+ */
+ clearSelections : function(suppressEvent){
+ var sn = this.selNodes;
+ if(sn.length > 0){
+ for(var i = 0, len = sn.length; i < len; i++){
+ sn[i].ui.onSelectedChange(false);
+ }
+ this.selNodes = [];
+ this.selMap = {};
+ if(suppressEvent !== true){
+ this.fireEvent("selectionchange", this, this.selNodes);
+ }
+ }
+ },
+
+ /**
+ * Returns true if the node is selected
+ * @param {TreeNode} node The node to check
+ * @return {Boolean}
+ */
+ isSelected : function(node){
+ return this.selMap[node.id] ? true : false;
+ },
+
+ /**
+ * Returns an array of the selected nodes
+ * @return {Array}
+ */
+ getSelectedNodes : function(){
+ return this.selNodes;
+ },
+
+ onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
+
+ selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
+
+ selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.menu.Menu
- * @extends Roo.util.Observable
- * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
- * A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class
- * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
+ * @class Roo.tree.TreeNode
+ * @extends Roo.data.Node
+ * @cfg {String} text The text for this node
+ * @cfg {Boolean} expanded true to start the node expanded
+ * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
+ * @cfg {Boolean} allowDrop false if this node cannot be drop on
+ * @cfg {Boolean} disabled true to start the node disabled
+ * @cfg {String} icon The path to an icon for the node. The preferred way to do this
+ * is to use the cls or iconCls attributes and add the icon via a CSS background image.
+ * @cfg {String} cls A css class to be added to the node
+ * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
+ * @cfg {String} href URL of the link used for the node (defaults to #)
+ * @cfg {String} hrefTarget target frame for the link
+ * @cfg {String} qtip An Ext QuickTip for the node
+ * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
+ * @cfg {Boolean} singleClickExpand True for single click expand on this node
+ * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
+ * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
+ * (defaults to undefined with no checkbox rendered)
* @constructor
- * Creates a new Menu
- * @param {Object} config Configuration options
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
*/
-Roo.menu.Menu = function(config){
-
- Roo.menu.Menu.superclass.constructor.call(this, config);
-
- this.id = this.id || Roo.id();
+Roo.tree.TreeNode = function(attributes){
+ attributes = attributes || {};
+ if(typeof attributes == "string"){
+ attributes = {text: attributes};
+ }
+ this.childrenRendered = false;
+ this.rendered = false;
+ Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
+ this.expanded = attributes.expanded === true;
+ this.isTarget = attributes.isTarget !== false;
+ this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
+ this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
+
+ /**
+ * Read-only. The text for this node. To change it use setText().
+ * @type String
+ */
+ this.text = attributes.text;
+ /**
+ * True if this node is disabled.
+ * @type Boolean
+ */
+ this.disabled = attributes.disabled === true;
+
this.addEvents({
/**
- * @event beforeshow
- * Fires before this menu is displayed
- * @param {Roo.menu.Menu} this
- */
- beforeshow : true,
+ * @event textchange
+ * Fires when the text for this node is changed
+ * @param {Node} this This node
+ * @param {String} text The new text
+ * @param {String} oldText The old text
+ */
+ "textchange" : true,
/**
- * @event beforehide
- * Fires before this menu is hidden
- * @param {Roo.menu.Menu} this
- */
- beforehide : true,
+ * @event beforeexpand
+ * Fires before this node is expanded, return false to cancel.
+ * @param {Node} this This node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforeexpand" : true,
/**
- * @event show
- * Fires after this menu is displayed
- * @param {Roo.menu.Menu} this
- */
- show : true,
+ * @event beforecollapse
+ * Fires before this node is collapsed, return false to cancel.
+ * @param {Node} this This node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ "beforecollapse" : true,
/**
- * @event hide
- * Fires after this menu is hidden
- * @param {Roo.menu.Menu} this
- */
- hide : true,
+ * @event expand
+ * Fires when this node is expanded
+ * @param {Node} this This node
+ */
+ "expand" : true,
/**
- * @event click
- * Fires when this menu is clicked (or when the enter key is pressed while it is active)
- * @param {Roo.menu.Menu} this
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- * @param {Roo.EventObject} e
- */
- click : true,
+ * @event disabledchange
+ * Fires when the disabled status of this node changes
+ * @param {Node} this This node
+ * @param {Boolean} disabled
+ */
+ "disabledchange" : true,
/**
- * @event mouseover
- * Fires when the mouse is hovering over this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseover : true,
+ * @event collapse
+ * Fires when this node is collapsed
+ * @param {Node} this This node
+ */
+ "collapse" : true,
/**
- * @event mouseout
- * Fires when the mouse exits this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseout : true,
+ * @event beforeclick
+ * Fires before click processing. Return false to cancel the default action.
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "beforeclick":true,
/**
- * @event itemclick
- * Fires when a menu item contained in this menu is clicked
- * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
- * @param {Roo.EventObject} e
- */
- itemclick: true
+ * @event checkchange
+ * Fires when a node with a checkbox's checked property changes
+ * @param {Node} this This node
+ * @param {Boolean} checked
+ */
+ "checkchange":true,
+ /**
+ * @event click
+ * Fires when this node is clicked
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "click":true,
+ /**
+ * @event dblclick
+ * Fires when this node is double clicked
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "dblclick":true,
+ /**
+ * @event contextmenu
+ * Fires when this node is right clicked
+ * @param {Node} this This node
+ * @param {Roo.EventObject} e The event object
+ */
+ "contextmenu":true,
+ /**
+ * @event beforechildrenrendered
+ * Fires right before the child nodes for this node are rendered
+ * @param {Node} this This node
+ */
+ "beforechildrenrendered":true
});
- if (this.registerMenu) {
- Roo.menu.MenuMgr.register(this);
- }
-
- var mis = this.items;
- this.items = new Roo.util.MixedCollection();
- if(mis){
- this.add.apply(this, mis);
- }
-};
-Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
- /**
- * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
- */
- minWidth : 120,
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
- * for bottom-right shadow (defaults to "sides")
- */
- shadow : "sides",
- /**
- * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
- * this menu (defaults to "tl-tr?")
- */
- subMenuAlign : "tl-tr?",
+ var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
+
/**
- * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
- * relative to its element of origin (defaults to "tl-bl?")
+ * Read-only. The UI for this node
+ * @type TreeNodeUI
*/
- defaultAlign : "tl-bl?",
+ this.ui = new uiClass(this);
+
+ // finally support items[]
+ if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
+ return;
+ }
+
+
+ Roo.each(this.attributes.items, function(c) {
+ this.appendChild(Roo.factory(c,Roo.Tree));
+ }, this);
+ delete this.attributes.items;
+
+
+
+};
+Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
+ preventHScroll: true,
/**
- * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
+ * Returns true if this node is expanded
+ * @return {Boolean}
*/
- allowOtherMenus : false,
+ isExpanded : function(){
+ return this.expanded;
+ },
+
/**
- * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
+ * Returns the UI object for this node
+ * @return {TreeNodeUI}
*/
- registerMenu : true,
-
- hidden:true,
+ getUI : function(){
+ return this.ui;
+ },
- // private
- render : function(){
- if(this.el){
- return;
+ // private override
+ setFirstChild : function(node){
+ var of = this.firstChild;
+ Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
+ if(this.childrenRendered && of && node != of){
+ of.renderIndent(true, true);
}
- var el = this.el = new Roo.Layer({
- cls: "x-menu",
- shadow:this.shadow,
- constrain: false,
- parentEl: this.parentEl || document.body,
- zindex:15000
- });
-
- this.keyNav = new Roo.menu.MenuNav(this);
+ if(this.rendered){
+ this.renderIndent(true, true);
+ }
+ },
- if(this.plain){
- el.addClass("x-menu-plain");
+ // private override
+ setLastChild : function(node){
+ var ol = this.lastChild;
+ Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
+ if(this.childrenRendered && ol && node != ol){
+ ol.renderIndent(true, true);
}
- if(this.cls){
- el.addClass(this.cls);
+ if(this.rendered){
+ this.renderIndent(true, true);
}
- // generic focus element
- this.focusEl = el.createChild({
- tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
- });
- var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
- //disabling touch- as it's causing issues ..
- //ul.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
- ul.on('click' , this.onClick, this);
-
-
- ul.on("mouseover", this.onMouseOver, this);
- ul.on("mouseout", this.onMouseOut, this);
- this.items.each(function(item){
- if (item.hidden) {
- return;
- }
-
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- ul.dom.appendChild(li);
- item.render(li, this);
- }, this);
- this.ul = ul;
- this.autoWidth();
},
- // private
- autoWidth : function(){
- var el = this.el, ul = this.ul;
- if(!el){
- return;
- }
- var w = this.width;
- if(w){
- el.setWidth(w);
- }else if(Roo.isIE){
- el.setWidth(this.minWidth);
- var t = el.dom.offsetWidth; // force recalc
- el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
+ // these methods are overridden to provide lazy rendering support
+ // private override
+ appendChild : function()
+ {
+ var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
+ if(node && this.childrenRendered){
+ node.render();
}
+ this.ui.updateExpandIcon();
+ return node;
},
- // private
- delayAutoWidth : function(){
- if(this.rendered){
- if(!this.awTask){
- this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
- }
- this.awTask.delay(20);
+ // private override
+ removeChild : function(node){
+ this.ownerTree.getSelectionModel().unselect(node);
+ Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
+ // if it's been rendered remove dom node
+ if(this.childrenRendered){
+ node.ui.remove();
+ }
+ if(this.childNodes.length < 1){
+ this.collapse(false, false);
+ }else{
+ this.ui.updateExpandIcon();
+ }
+ if(!this.firstChild) {
+ this.childrenRendered = false;
}
+ return node;
},
- // private
- findTargetItem : function(e){
- var t = e.getTarget(".x-menu-list-item", this.ul, true);
- if(t && t.menuItemId){
- return this.items.get(t.menuItemId);
+ // private override
+ insertBefore : function(node, refNode){
+ var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
+ if(newNode && refNode && this.childrenRendered){
+ node.render();
}
+ this.ui.updateExpandIcon();
+ return newNode;
},
- // private
- onClick : function(e){
- Roo.log("menu.onClick");
- var t = this.findTargetItem(e);
- if(!t){
- return;
+ /**
+ * Sets the text for this node
+ * @param {String} text
+ */
+ setText : function(text){
+ var oldText = this.text;
+ this.text = text;
+ this.attributes.text = text;
+ if(this.rendered){ // event without subscribing
+ this.ui.onTextChange(this, text, oldText);
}
- Roo.log(e);
- if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
- if(t == this.activeItem && t.shouldDeactivate(e)){
- this.activeItem.deactivate();
- delete this.activeItem;
+ this.fireEvent("textchange", this, text, oldText);
+ },
+
+ /**
+ * Triggers selection of this node
+ */
+ select : function(){
+ this.getOwnerTree().getSelectionModel().select(this);
+ },
+
+ /**
+ * Triggers deselection of this node
+ */
+ unselect : function(){
+ this.getOwnerTree().getSelectionModel().unselect(this);
+ },
+
+ /**
+ * Returns true if this node is selected
+ * @return {Boolean}
+ */
+ isSelected : function(){
+ return this.getOwnerTree().getSelectionModel().isSelected(this);
+ },
+
+ /**
+ * Expand this node.
+ * @param {Boolean} deep (optional) True to expand all children as well
+ * @param {Boolean} anim (optional) false to cancel the default animation
+ * @param {Function} callback (optional) A callback to be called when
+ * expanding this node completes (does not wait for deep expand to complete).
+ * Called with 1 parameter, this node.
+ */
+ expand : function(deep, anim, callback){
+ if(!this.expanded){
+ if(this.fireEvent("beforeexpand", this, deep, anim) === false){
return;
}
- if(t.canActivate){
- this.setActiveItem(t, true);
+ if(!this.childrenRendered){
+ this.renderChildren();
}
- return;
-
+ this.expanded = true;
+ if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
+ this.ui.animExpand(function(){
+ this.fireEvent("expand", this);
+ if(typeof callback == "function"){
+ callback(this);
+ }
+ if(deep === true){
+ this.expandChildNodes(true);
+ }
+ }.createDelegate(this));
+ return;
+ }else{
+ this.ui.expand();
+ this.fireEvent("expand", this);
+ if(typeof callback == "function"){
+ callback(this);
+ }
+ }
+ }else{
+ if(typeof callback == "function"){
+ callback(this);
+ }
+ }
+ if(deep === true){
+ this.expandChildNodes(true);
}
-
- t.onClick(e);
- this.fireEvent("click", this, t, e);
},
- // private
- setActiveItem : function(item, autoExpand){
- if(item != this.activeItem){
- if(this.activeItem){
- this.activeItem.deactivate();
+ isHiddenRoot : function(){
+ return this.isRoot && !this.getOwnerTree().rootVisible;
+ },
+
+ /**
+ * Collapse this node.
+ * @param {Boolean} deep (optional) True to collapse all children as well
+ * @param {Boolean} anim (optional) false to cancel the default animation
+ */
+ collapse : function(deep, anim){
+ if(this.expanded && !this.isHiddenRoot()){
+ if(this.fireEvent("beforecollapse", this, deep, anim) === false){
+ return;
+ }
+ this.expanded = false;
+ if((this.getOwnerTree().animate && anim !== false) || anim){
+ this.ui.animCollapse(function(){
+ this.fireEvent("collapse", this);
+ if(deep === true){
+ this.collapseChildNodes(true);
+ }
+ }.createDelegate(this));
+ return;
+ }else{
+ this.ui.collapse();
+ this.fireEvent("collapse", this);
+ }
+ }
+ if(deep === true){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].collapse(true, false);
}
- this.activeItem = item;
- item.activate(autoExpand);
- }else if(autoExpand){
- item.expandMenu();
}
},
// private
- tryActivate : function(start, step){
- var items = this.items;
- for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
- var item = items.get(i);
- if(!item.disabled && item.canActivate){
- this.setActiveItem(item, false);
- return item;
- }
+ delayedExpand : function(delay){
+ if(!this.expandProcId){
+ this.expandProcId = this.expand.defer(delay, this);
}
- return false;
},
// private
- onMouseOver : function(e){
- var t;
- if(t = this.findTargetItem(e)){
- if(t.canActivate && !t.disabled){
- this.setActiveItem(t, true);
- }
+ cancelExpand : function(){
+ if(this.expandProcId){
+ clearTimeout(this.expandProcId);
}
- this.fireEvent("mouseover", this, e, t);
+ this.expandProcId = false;
},
- // private
- onMouseOut : function(e){
- var t;
- if(t = this.findTargetItem(e)){
- if(t == this.activeItem && t.shouldDeactivate(e)){
- this.activeItem.deactivate();
- delete this.activeItem;
- }
+ /**
+ * Toggles expanded/collapsed state of the node
+ */
+ toggle : function(){
+ if(this.expanded){
+ this.collapse();
+ }else{
+ this.expand();
}
- this.fireEvent("mouseout", this, e, t);
},
/**
- * Read-only. Returns true if the menu is currently displayed, else false.
- * @type Boolean
+ * Ensures all parent nodes are expanded
*/
- isVisible : function(){
- return this.el && !this.hidden;
+ ensureVisible : function(callback){
+ var tree = this.getOwnerTree();
+ tree.expandPath(this.parentNode.getPath(), false, function(){
+ tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
+ Roo.callback(callback);
+ }.createDelegate(this));
},
/**
- * Displays this menu relative to another element
- * @param {String/HTMLElement/Roo.Element} element The element to align to
- * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
- * the element (defaults to this.defaultAlign)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ * Expand all child nodes
+ * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
*/
- show : function(el, pos, parentMenu){
- this.parentMenu = parentMenu;
- if(!this.el){
- this.render();
+ expandChildNodes : function(deep){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].expand(deep);
}
- this.fireEvent("beforeshow", this);
- this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
},
/**
- * Displays this menu at a specific xy position
- * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ * Collapse all child nodes
+ * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
*/
- showAt : function(xy, parentMenu, /* private: */_e){
- this.parentMenu = parentMenu;
- if(!this.el){
- this.render();
+ collapseChildNodes : function(deep){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].collapse(deep);
}
- if(_e !== false){
- this.fireEvent("beforeshow", this);
- xy = this.el.adjustForConstraints(xy);
+ },
+
+ /**
+ * Disables this node
+ */
+ disable : function(){
+ this.disabled = true;
+ this.unselect();
+ if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+ this.ui.onDisableChange(this, true);
}
- this.el.setXY(xy);
- this.el.show();
- this.hidden = false;
- this.focus();
- this.fireEvent("show", this);
+ this.fireEvent("disabledchange", this, true);
},
- focus : function(){
- if(!this.hidden){
- this.doFocus.defer(50, this);
+ /**
+ * Enables this node
+ */
+ enable : function(){
+ this.disabled = false;
+ if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+ this.ui.onDisableChange(this, false);
}
+ this.fireEvent("disabledchange", this, false);
},
- doFocus : function(){
- if(!this.hidden){
- this.focusEl.focus();
+ // private
+ renderChildren : function(suppressEvent){
+ if(suppressEvent !== false){
+ this.fireEvent("beforechildrenrendered", this);
+ }
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i].render(true);
}
+ this.childrenRendered = true;
},
- /**
- * Hides this menu and optionally all parent menus
- * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
- */
- hide : function(deep){
- if(this.el && this.isVisible()){
- this.fireEvent("beforehide", this);
- if(this.activeItem){
- this.activeItem.deactivate();
- this.activeItem = null;
+ // private
+ sort : function(fn, scope){
+ Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
+ if(this.childrenRendered){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i].render(true);
}
- this.el.hide();
- this.hidden = true;
- this.fireEvent("hide", this);
- }
- if(deep === true && this.parentMenu){
- this.parentMenu.hide(true);
}
},
- /**
- * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
- * Any of the following are valid:
- * <ul>
- * <li>Any menu item object based on {@link Roo.menu.Item}</li>
- * <li>An HTMLElement object which will be converted to a menu item</li>
- * <li>A menu item config object that will be created as a new menu item</li>
- * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
- * it will be converted into a {@link Roo.menu.TextItem} and added</li>
- * </ul>
- * Usage:
- * <pre><code>
-// Create the menu
-var menu = new Roo.menu.Menu();
-
-// Create a menu item to add by reference
-var menuItem = new Roo.menu.Item({ text: 'New Item!' });
-
-// Add a bunch of items at once using different methods.
-// Only the last item added will be returned.
-var item = menu.add(
- menuItem, // add existing item by ref
- 'Dynamic Item', // new TextItem
- '-', // new separator
- { text: 'Config Item' } // new item by config
-);
-</code></pre>
- * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
- * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
- */
- add : function(){
- var a = arguments, l = a.length, item;
- for(var i = 0; i < l; i++){
- var el = a[i];
- if ((typeof(el) == "object") && el.xtype && el.xns) {
- el = Roo.factory(el, Roo.menu);
- }
-
- if(el.render){ // some kind of Item
- item = this.addItem(el);
- }else if(typeof el == "string"){ // string
- if(el == "separator" || el == "-"){
- item = this.addSeparator();
- }else{
- item = this.addText(el);
- }
- }else if(el.tagName || el.el){ // element
- item = this.addElement(el);
- }else if(typeof el == "object"){ // must be menu item config?
- item = this.addMenuItem(el);
+ // private
+ render : function(bulkRender){
+ this.ui.render(bulkRender);
+ if(!this.rendered){
+ this.rendered = true;
+ if(this.expanded){
+ this.expanded = false;
+ this.expand(false, false);
}
}
- return item;
},
+ // private
+ renderIndent : function(deep, refresh){
+ if(refresh){
+ this.ui.childIndent = null;
+ }
+ this.ui.renderIndent();
+ if(deep === true && this.childrenRendered){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++){
+ cs[i].renderIndent(true, refresh);
+ }
+ }
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.tree.AsyncTreeNode
+ * @extends Roo.tree.TreeNode
+ * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
+ * @constructor
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ */
+ Roo.tree.AsyncTreeNode = function(config){
+ this.loaded = false;
+ this.loading = false;
+ Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
/**
- * Returns this menu's underlying {@link Roo.Element} object
- * @return {Roo.Element} The element
+ * @event beforeload
+ * Fires before this node is loaded, return false to cancel
+ * @param {Node} this This node
+ */
+ this.addEvents({'beforeload':true, 'load': true});
+ /**
+ * @event load
+ * Fires when this node is loaded
+ * @param {Node} this This node
+ */
+ /**
+ * The loader used by this node (defaults to using the tree's defined loader)
+ * @type TreeLoader
+ * @property loader
*/
- getEl : function(){
- if(!this.el){
- this.render();
+};
+Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
+ expand : function(deep, anim, callback){
+ if(this.loading){ // if an async load is already running, waiting til it's done
+ var timer;
+ var f = function(){
+ if(!this.loading){ // done loading
+ clearInterval(timer);
+ this.expand(deep, anim, callback);
+ }
+ }.createDelegate(this);
+ timer = setInterval(f, 200);
+ return;
}
- return this.el;
+ if(!this.loaded){
+ if(this.fireEvent("beforeload", this) === false){
+ return;
+ }
+ this.loading = true;
+ this.ui.beforeLoad(this);
+ var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
+ if(loader){
+ loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
+ return;
+ }
+ }
+ Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
},
-
+
/**
- * Adds a separator bar to the menu
- * @return {Roo.menu.Item} The menu item that was added
+ * Returns true if this node is currently loading
+ * @return {Boolean}
*/
- addSeparator : function(){
- return this.addItem(new Roo.menu.Separator());
+ isLoading : function(){
+ return this.loading;
},
-
- /**
- * Adds an {@link Roo.Element} object to the menu
- * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
- * @return {Roo.menu.Item} The menu item that was added
- */
- addElement : function(el){
- return this.addItem(new Roo.menu.BaseItem(el));
+
+ loadComplete : function(deep, anim, callback){
+ this.loading = false;
+ this.loaded = true;
+ this.ui.afterLoad(this);
+ this.fireEvent("load", this);
+ this.expand(deep, anim, callback);
},
-
+
/**
- * Adds an existing object based on {@link Roo.menu.Item} to the menu
- * @param {Roo.menu.Item} item The menu item to add
- * @return {Roo.menu.Item} The menu item that was added
+ * Returns true if this node has been loaded
+ * @return {Boolean}
*/
- addItem : function(item){
- this.items.add(item);
- if(this.ul){
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- this.ul.dom.appendChild(li);
- item.render(li, this);
- this.delayAutoWidth();
+ isLoaded : function(){
+ return this.loaded;
+ },
+
+ hasChildNodes : function(){
+ if(!this.isLeaf() && !this.loaded){
+ return true;
+ }else{
+ return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
}
- return item;
},
/**
- * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
- * @param {Object} config A MenuItem config object
- * @return {Roo.menu.Item} The menu item that was added
+ * Trigger a reload for this node
+ * @param {Function} callback
*/
- addMenuItem : function(config){
- if(!(config instanceof Roo.menu.Item)){
- if(typeof config.checked == "boolean"){ // must be check menu item config?
- config = new Roo.menu.CheckItem(config);
- }else{
- config = new Roo.menu.Item(config);
- }
+ reload : function(callback){
+ this.collapse(false, false);
+ while(this.firstChild){
+ this.removeChild(this.firstChild);
}
- return this.addItem(config);
- },
+ this.childrenRendered = false;
+ this.loaded = false;
+ if(this.isHiddenRoot()){
+ this.expanded = false;
+ }
+ this.expand(false, false, callback);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.tree.TreeNodeUI
+ * @constructor
+ * @param {Object} node The node to render
+ * The TreeNode UI implementation is separate from the
+ * tree implementation. Unless you are customizing the tree UI,
+ * you should never have to use this directly.
+ */
+Roo.tree.TreeNodeUI = function(node){
+ this.node = node;
+ this.rendered = false;
+ this.animating = false;
+ this.emptyIcon = Roo.BLANK_IMAGE_URL;
+};
- /**
- * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
- * @param {String} text The text to display in the menu item
- * @return {Roo.menu.Item} The menu item that was added
- */
- addText : function(text){
- return this.addItem(new Roo.menu.TextItem({ text : text }));
+Roo.tree.TreeNodeUI.prototype = {
+ removeChild : function(node){
+ if(this.rendered){
+ this.ctNode.removeChild(node.ui.getEl());
+ }
},
- /**
- * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
- * @param {Number} index The index in the menu's list of current items where the new item should be inserted
- * @param {Roo.menu.Item} item The menu item to add
- * @return {Roo.menu.Item} The menu item that was added
- */
- insert : function(index, item){
- this.items.insert(index, item);
- if(this.ul){
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
- item.render(li, this);
- this.delayAutoWidth();
- }
- return item;
+ beforeLoad : function(){
+ this.addClass("x-tree-node-loading");
},
- /**
- * Removes an {@link Roo.menu.Item} from the menu and destroys the object
- * @param {Roo.menu.Item} item The menu item to remove
- */
- remove : function(item){
- this.items.removeKey(item.id);
- item.destroy();
+ afterLoad : function(){
+ this.removeClass("x-tree-node-loading");
},
- /**
- * Removes and destroys all items in the menu
- */
- removeAll : function(){
- var f;
- while(f = this.items.first()){
- this.remove(f);
+ onTextChange : function(node, text, oldText){
+ if(this.rendered){
+ this.textNode.innerHTML = text;
}
- }
-});
-
-// MenuNav is a private utility class used internally by the Menu
-Roo.menu.MenuNav = function(menu){
- Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
- this.scope = this.menu = menu;
-};
+ },
-Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
- doRelay : function(e, h){
- var k = e.getKey();
- if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
- this.menu.tryActivate(0, 1);
- return false;
+ onDisableChange : function(node, state){
+ this.disabled = state;
+ if(state){
+ this.addClass("x-tree-node-disabled");
+ }else{
+ this.removeClass("x-tree-node-disabled");
}
- return h.call(this.scope || this, e, this.menu);
},
- up : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
- m.tryActivate(m.items.length-1, -1);
+ onSelectedChange : function(state){
+ if(state){
+ this.focus();
+ this.addClass("x-tree-selected");
+ }else{
+ //this.blur();
+ this.removeClass("x-tree-selected");
}
},
- down : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
- m.tryActivate(0, 1);
+ onMove : function(tree, node, oldParent, newParent, index, refNode){
+ this.childIndent = null;
+ if(this.rendered){
+ var targetNode = newParent.ui.getContainer();
+ if(!targetNode){//target not rendered
+ this.holder = document.createElement("div");
+ this.holder.appendChild(this.wrap);
+ return;
+ }
+ var insertBefore = refNode ? refNode.ui.getEl() : null;
+ if(insertBefore){
+ targetNode.insertBefore(this.wrap, insertBefore);
+ }else{
+ targetNode.appendChild(this.wrap);
+ }
+ this.node.renderIndent(true);
}
},
- right : function(e, m){
- if(m.activeItem){
- m.activeItem.expandMenu(true);
+ addClass : function(cls){
+ if(this.elNode){
+ Roo.fly(this.elNode).addClass(cls);
}
},
- left : function(e, m){
- m.hide();
- if(m.parentMenu && m.parentMenu.activeItem){
- m.parentMenu.activeItem.activate();
+ removeClass : function(cls){
+ if(this.elNode){
+ Roo.fly(this.elNode).removeClass(cls);
}
},
- enter : function(e, m){
- if(m.activeItem){
- e.stopPropagation();
- m.activeItem.onClick(e);
- m.fireEvent("click", this, m.activeItem);
- return true;
+ remove : function(){
+ if(this.rendered){
+ this.holder = document.createElement("div");
+ this.holder.appendChild(this.wrap);
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.MenuMgr
- * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
- * @static
- */
-Roo.menu.MenuMgr = function(){
- var menus, active, groups = {}, attached = false, lastShow = new Date();
+ },
- // private - called when first menu is created
- function init(){
- menus = {};
- active = new Roo.util.MixedCollection();
- Roo.get(document).addKeyListener(27, function(){
- if(active.length > 0){
- hideAll();
- }
- });
- }
+ fireEvent : function(){
+ return this.node.fireEvent.apply(this.node, arguments);
+ },
- // private
- function hideAll(){
- if(active && active.length > 0){
- var c = active.clone();
- c.each(function(m){
- m.hide();
- });
- }
- }
+ initEvents : function(){
+ this.node.on("move", this.onMove, this);
+ var E = Roo.EventManager;
+ var a = this.anchor;
- // private
- function onHide(m){
- active.remove(m);
- if(active.length < 1){
- Roo.get(document).un("mousedown", onMouseDown);
- attached = false;
- }
- }
+ var el = Roo.fly(a, '_treeui');
- // private
- function onShow(m){
- var last = active.last();
- lastShow = new Date();
- active.add(m);
- if(!attached){
- Roo.get(document).on("mousedown", onMouseDown);
- attached = true;
- }
- if(m.parentMenu){
- m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
- m.parentMenu.activeChild = m;
- }else if(last && last.isVisible()){
- m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
- }
- }
+ if(Roo.isOpera){ // opera render bug ignores the CSS
+ el.setStyle("text-decoration", "none");
+ }
- // private
- function onBeforeHide(m){
- if(m.activeChild){
- m.activeChild.hide();
- }
- if(m.autoHideTimer){
- clearTimeout(m.autoHideTimer);
- delete m.autoHideTimer;
- }
- }
+ el.on("click", this.onClick, this);
+ el.on("dblclick", this.onDblClick, this);
- // private
- function onBeforeShow(m){
- var pm = m.parentMenu;
- if(!pm && !m.allowOtherMenus){
- hideAll();
- }else if(pm && pm.activeChild && active != m){
- pm.activeChild.hide();
- }
- }
+ if(this.checkbox){
+ Roo.EventManager.on(this.checkbox,
+ Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
+ }
- // private
- function onMouseDown(e){
- if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
- hideAll();
- }
- }
+ el.on("contextmenu", this.onContextMenu, this);
- // private
- function onBeforeCheck(mi, state){
- if(state){
- var g = groups[mi.group];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != mi){
- g[i].setChecked(false);
- }
- }
- }
- }
+ var icon = Roo.fly(this.iconNode);
+ icon.on("click", this.onClick, this);
+ icon.on("dblclick", this.onDblClick, this);
+ icon.on("contextmenu", this.onContextMenu, this);
+ E.on(this.ecNode, "click", this.ecClick, this, true);
- return {
+ if(this.node.disabled){
+ this.addClass("x-tree-node-disabled");
+ }
+ if(this.node.hidden){
+ this.addClass("x-tree-node-disabled");
+ }
+ var ot = this.node.getOwnerTree();
+ var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
+ if(dd && (!this.node.isRoot || ot.rootVisible)){
+ Roo.dd.Registry.register(this.elNode, {
+ node: this.node,
+ handles: this.getDDHandles(),
+ isHandle: false
+ });
+ }
+ },
- /**
- * Hides all menus that are currently visible
- */
- hideAll : function(){
- hideAll();
- },
+ getDDHandles : function(){
+ return [this.iconNode, this.textNode];
+ },
- // private
- register : function(menu){
- if(!menus){
- init();
- }
- menus[menu.id] = menu;
- menu.on("beforehide", onBeforeHide);
- menu.on("hide", onHide);
- menu.on("beforeshow", onBeforeShow);
- menu.on("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menu);
- menu.on("checkchange", onCheck);
- }
- },
-
- /**
- * Returns a {@link Roo.menu.Menu} object
- * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
- * be used to generate and return a new Menu instance.
- */
- get : function(menu){
- if(typeof menu == "string"){ // menu id
- return menus[menu];
- }else if(menu.events){ // menu instance
- return menu;
- }else if(typeof menu.length == 'number'){ // array of menu items?
- return new Roo.menu.Menu({items:menu});
- }else{ // otherwise, must be a config
- return new Roo.menu.Menu(menu);
- }
- },
+ hide : function(){
+ if(this.rendered){
+ this.wrap.style.display = "none";
+ }
+ },
- // private
- unregister : function(menu){
- delete menus[menu.id];
- menu.un("beforehide", onBeforeHide);
- menu.un("hide", onHide);
- menu.un("beforeshow", onBeforeShow);
- menu.un("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- groups[g].remove(menu);
- menu.un("checkchange", onCheck);
- }
- },
+ show : function(){
+ if(this.rendered){
+ this.wrap.style.display = "";
+ }
+ },
- // private
- registerCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menuItem);
- menuItem.on("beforecheckchange", onBeforeCheck);
- }
- },
+ onContextMenu : function(e){
+ if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
+ e.preventDefault();
+ this.focus();
+ this.fireEvent("contextmenu", this.node, e);
+ }
+ },
- // private
- unregisterCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- groups[g].remove(menuItem);
- menuItem.un("beforecheckchange", onBeforeCheck);
- }
- }
- };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+ onClick : function(e){
+ if(this.dropping){
+ e.stopEvent();
+ return;
+ }
+ if(this.fireEvent("beforeclick", this.node, e) !== false){
+ if(!this.disabled && this.node.attributes.href){
+ this.fireEvent("click", this.node, e);
+ return;
+ }
+ e.preventDefault();
+ if(this.disabled){
+ return;
+ }
-/**
- * @class Roo.menu.BaseItem
- * @extends Roo.Component
- * @abstract
- * The base class for all items that render into menus. BaseItem provides default rendering, activated state
- * management and base configuration options shared by all menu components.
- * @constructor
- * Creates a new BaseItem
- * @param {Object} config Configuration options
- */
-Roo.menu.BaseItem = function(config){
- Roo.menu.BaseItem.superclass.constructor.call(this, config);
+ if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
+ this.node.toggle();
+ }
- this.addEvents({
- /**
- * @event click
- * Fires when this item is clicked
- * @param {Roo.menu.BaseItem} this
- * @param {Roo.EventObject} e
- */
- click: true,
- /**
- * @event activate
- * Fires when this item is activated
- * @param {Roo.menu.BaseItem} this
- */
- activate : true,
- /**
- * @event deactivate
- * Fires when this item is deactivated
- * @param {Roo.menu.BaseItem} this
- */
- deactivate : true
- });
+ this.fireEvent("click", this.node, e);
+ }else{
+ e.stopEvent();
+ }
+ },
- if(this.handler){
- this.on("click", this.handler, this.scope, true);
- }
-};
+ onDblClick : function(e){
+ e.preventDefault();
+ if(this.disabled){
+ return;
+ }
+ if(this.checkbox){
+ this.toggleCheck();
+ }
+ if(!this.animating && this.node.hasChildNodes()){
+ this.node.toggle();
+ }
+ this.fireEvent("dblclick", this.node, e);
+ },
-Roo.extend(Roo.menu.BaseItem, Roo.Component, {
- /**
- * @cfg {Function} handler
- * A function that will handle the click event of this menu item (defaults to undefined)
- */
- /**
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
- */
- canActivate : false,
-
- /**
- * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
- */
- hidden: false,
-
- /**
- * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
- */
- activeClass : "x-menu-item-active",
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
- */
- hideOnClick : true,
- /**
- * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
- */
- hideDelay : 100,
+ onCheckChange : function(){
+ var checked = this.checkbox.checked;
+ this.node.attributes.checked = checked;
+ this.fireEvent('checkchange', this.node, checked);
+ },
- // private
- ctype: "Roo.menu.BaseItem",
+ ecClick : function(e){
+ if(!this.animating && this.node.hasChildNodes()){
+ this.node.toggle();
+ }
+ },
- // private
- actionMode : "container",
+ startDrop : function(){
+ this.dropping = true;
+ },
- // private
- render : function(container, parentMenu){
- this.parentMenu = parentMenu;
- Roo.menu.BaseItem.superclass.render.call(this, container);
- this.container.menuItemId = this.id;
+ // delayed drop so the click event doesn't get fired on a drop
+ endDrop : function(){
+ setTimeout(function(){
+ this.dropping = false;
+ }.createDelegate(this), 50);
},
- // private
- onRender : function(container, position){
- this.el = Roo.get(this.el);
- container.dom.appendChild(this.el.dom);
+ expand : function(){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "";
},
- // private
- onClick : function(e){
- if(!this.disabled && this.fireEvent("click", this, e) !== false
- && this.parentMenu.fireEvent("itemclick", this, e) !== false){
- this.handleClick(e);
- }else{
- e.stopEvent();
+ focus : function(){
+ if(!this.node.preventHScroll){
+ try{this.anchor.focus();
+ }catch(e){}
+ }else if(!Roo.isIE){
+ try{
+ var noscroll = this.node.getOwnerTree().getTreeEl().dom;
+ var l = noscroll.scrollLeft;
+ this.anchor.focus();
+ noscroll.scrollLeft = l;
+ }catch(e){}
}
},
- // private
- activate : function(){
- if(this.disabled){
- return false;
+ toggleCheck : function(value){
+ var cb = this.checkbox;
+ if(cb){
+ cb.checked = (value === undefined ? !cb.checked : value);
}
- var li = this.container;
- li.addClass(this.activeClass);
- this.region = li.getRegion().adjust(2, 2, -2, -2);
- this.fireEvent("activate", this);
- return true;
},
- // private
- deactivate : function(){
- this.container.removeClass(this.activeClass);
- this.fireEvent("deactivate", this);
+ blur : function(){
+ try{
+ this.anchor.blur();
+ }catch(e){}
},
- // private
- shouldDeactivate : function(e){
- return !this.region || !this.region.contains(e.getPoint());
+ animExpand : function(callback){
+ var ct = Roo.get(this.ctNode);
+ ct.stopFx();
+ if(!this.node.hasChildNodes()){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "";
+ Roo.callback(callback);
+ return;
+ }
+ this.animating = true;
+ this.updateExpandIcon();
+
+ ct.slideIn('t', {
+ callback : function(){
+ this.animating = false;
+ Roo.callback(callback);
+ },
+ scope: this,
+ duration: this.node.ownerTree.duration || .25
+ });
},
- // private
- handleClick : function(e){
- if(this.hideOnClick){
- this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
- }
+ highlight : function(){
+ var tree = this.node.getOwnerTree();
+ Roo.fly(this.wrap).highlight(
+ tree.hlColor || "C3DAF9",
+ {endColor: tree.hlBaseColor}
+ );
},
- // private
- expandMenu : function(autoActivate){
- // do nothing
+ collapse : function(){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "none";
},
- // private
- hideMenu : function(){
- // do nothing
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.Adapter
- * @extends Roo.menu.BaseItem
- * @abstract
- * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
- * It provides basic rendering, activation management and enable/disable logic required to work in menus.
- * @constructor
- * Creates a new Adapter
- * @param {Object} config Configuration options
- */
-Roo.menu.Adapter = function(component, config){
- Roo.menu.Adapter.superclass.constructor.call(this, config);
- this.component = component;
-};
-Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
- // private
- canActivate : true,
+ animCollapse : function(callback){
+ var ct = Roo.get(this.ctNode);
+ ct.enableDisplayMode('block');
+ ct.stopFx();
- // private
- onRender : function(container, position){
- this.component.render(container);
- this.el = this.component.getEl();
+ this.animating = true;
+ this.updateExpandIcon();
+
+ ct.slideOut('t', {
+ callback : function(){
+ this.animating = false;
+ Roo.callback(callback);
+ },
+ scope: this,
+ duration: this.node.ownerTree.duration || .25
+ });
},
- // private
- activate : function(){
- if(this.disabled){
- return false;
- }
- this.component.focus();
- this.fireEvent("activate", this);
- return true;
+ getContainer : function(){
+ return this.ctNode;
},
- // private
- deactivate : function(){
- this.fireEvent("deactivate", this);
+ getEl : function(){
+ return this.wrap;
},
- // private
- disable : function(){
- this.component.disable();
- Roo.menu.Adapter.superclass.disable.call(this);
+ appendDDGhost : function(ghostNode){
+ ghostNode.appendChild(this.elNode.cloneNode(true));
},
- // private
- enable : function(){
- this.component.enable();
- Roo.menu.Adapter.superclass.enable.call(this);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ getDDRepairXY : function(){
+ return Roo.lib.Dom.getXY(this.iconNode);
+ },
-/**
- * @class Roo.menu.TextItem
- * @extends Roo.menu.BaseItem
- * Adds a static text string to a menu, usually used as either a heading or group separator.
- * Note: old style constructor with text is still supported.
- *
- * @constructor
- * Creates a new TextItem
- * @param {Object} cfg Configuration
- */
-Roo.menu.TextItem = function(cfg){
- if (typeof(cfg) == 'string') {
- this.text = cfg;
- } else {
- Roo.apply(this,cfg);
- }
-
- Roo.menu.TextItem.superclass.constructor.call(this);
-};
+ onRender : function(){
+ this.render();
+ },
-Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
- /**
- * @cfg {String} text Text to show on item.
- */
- text : '',
-
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
- */
- hideOnClick : false,
- /**
- * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
- */
- itemCls : "x-menu-text",
+ render : function(bulkRender){
+ var n = this.node, a = n.attributes;
+ var targetNode = n.parentNode ?
+ n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
- // private
- onRender : function(){
- var s = document.createElement("span");
- s.className = this.itemCls;
- s.innerHTML = this.text;
- this.el = s;
- Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ if(!this.rendered){
+ this.rendered = true;
-/**
- * @class Roo.menu.Separator
- * @extends Roo.menu.BaseItem
- * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
- * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.menu.Separator = function(config){
- Roo.menu.Separator.superclass.constructor.call(this, config);
-};
+ this.renderElements(n, a, targetNode, bulkRender);
-Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
- /**
- * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
- */
- itemCls : "x-menu-sep",
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
- */
- hideOnClick : false,
+ if(a.qtip){
+ if(this.textNode.setAttributeNS){
+ this.textNode.setAttributeNS("ext", "qtip", a.qtip);
+ if(a.qtipTitle){
+ this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
+ }
+ }else{
+ this.textNode.setAttribute("ext:qtip", a.qtip);
+ if(a.qtipTitle){
+ this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
+ }
+ }
+ }else if(a.qtipCfg){
+ a.qtipCfg.target = Roo.id(this.textNode);
+ Roo.QuickTips.register(a.qtipCfg);
+ }
+ this.initEvents();
+ if(!this.node.expanded){
+ this.updateExpandIcon();
+ }
+ }else{
+ if(bulkRender === true) {
+ targetNode.appendChild(this.wrap);
+ }
+ }
+ },
- // private
- onRender : function(li){
- var s = document.createElement("span");
- s.className = this.itemCls;
- s.innerHTML = " ";
- this.el = s;
- li.addClass("x-menu-sep-li");
- Roo.menu.Separator.superclass.onRender.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.menu.Item
- * @extends Roo.menu.BaseItem
- * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
- * display items. Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
- * activation and click handling.
- * @constructor
- * Creates a new Item
- * @param {Object} config Configuration options
- */
-Roo.menu.Item = function(config){
- Roo.menu.Item.superclass.constructor.call(this, config);
- if(this.menu){
- this.menu = Roo.menu.MenuMgr.get(this.menu);
- }
-};
-Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
- /**
- * @cfg {Roo.menu.Menu} menu
- * A Sub menu
- */
- /**
- * @cfg {String} text
- * The text to show on the menu item.
- */
- text: '',
- /**
- * @cfg {String} html to render in menu
- * The text to show on the menu item (HTML version).
- */
- html: '',
- /**
- * @cfg {String} icon
- * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
- */
- icon: undefined,
- /**
- * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
- */
- itemCls : "x-menu-item",
- /**
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
- */
- canActivate : true,
- /**
- * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
- */
- showDelay: 200,
- // doc'd in BaseItem
- hideDelay: 200,
-
- // private
- ctype: "Roo.menu.Item",
-
- // private
- onRender : function(container, position){
- var el = document.createElement("a");
- el.hideFocus = true;
- el.unselectable = "on";
- el.href = this.href || "#";
- if(this.hrefTarget){
- el.target = this.hrefTarget;
+ renderElements : function(n, a, targetNode, bulkRender)
+ {
+ // add some indent caching, this helps performance when rendering a large tree
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+ var t = n.getOwnerTree();
+ var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
+ if (typeof(n.attributes.html) != 'undefined') {
+ txt = n.attributes.html;
}
- el.className = this.itemCls + (this.menu ? " x-menu-item-arrow" : "") + (this.cls ? " " + this.cls : "");
-
- var html = this.html.length ? this.html : String.format('{0}',this.text);
-
- el.innerHTML = String.format(
- '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
- this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
- this.el = el;
- Roo.menu.Item.superclass.onRender.call(this, container, position);
- },
+ var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
+ var cb = typeof a.checked == 'boolean';
+ var href = a.href ? a.href : Roo.isGecko ? "" : "#";
+ var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
+ '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
+ '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
+ '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
+ cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
+ '<a hidefocus="on" href="',href,'" tabIndex="1" ',
+ a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "",
+ '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
+ '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+ "</li>"];
- /**
- * Sets the text to display in this menu item
- * @param {String} text The text to display
- * @param {Boolean} isHTML true to indicate text is pure html.
- */
- setText : function(text, isHTML){
- if (isHTML) {
- this.html = text;
- } else {
- this.text = text;
- this.html = '';
+ if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+ this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
+ n.nextSibling.ui.getEl(), buf.join(""));
+ }else{
+ this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
- if(this.rendered){
- var html = this.html.length ? this.html : String.format('{0}',this.text);
-
- this.el.update(String.format(
- '<img src="{0}" class="x-menu-item-icon {2}">' + html,
- this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
- this.parentMenu.autoWidth();
+
+ this.elNode = this.wrap.childNodes[0];
+ this.ctNode = this.wrap.childNodes[1];
+ var cs = this.elNode.childNodes;
+ this.indentNode = cs[0];
+ this.ecNode = cs[1];
+ this.iconNode = cs[2];
+ var index = 3;
+ if(cb){
+ this.checkbox = cs[3];
+ index++;
}
+ this.anchor = cs[index];
+ this.textNode = cs[index].firstChild;
},
- // private
- handleClick : function(e){
- if(!this.href){ // if no link defined, stop the event automatically
- e.stopEvent();
- }
- Roo.menu.Item.superclass.handleClick.apply(this, arguments);
+ getAnchor : function(){
+ return this.anchor;
},
- // private
- activate : function(autoExpand){
- if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
- this.focus();
- if(autoExpand){
- this.expandMenu();
- }
- }
- return true;
+ getTextEl : function(){
+ return this.textNode;
},
- // private
- shouldDeactivate : function(e){
- if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
- if(this.menu && this.menu.isVisible()){
- return !this.menu.getEl().getRegion().contains(e.getPoint());
- }
- return true;
- }
- return false;
+ getIconEl : function(){
+ return this.iconNode;
},
- // private
- deactivate : function(){
- Roo.menu.Item.superclass.deactivate.apply(this, arguments);
- this.hideMenu();
+ isChecked : function(){
+ return this.checkbox ? this.checkbox.checked : false;
},
- // private
- expandMenu : function(autoActivate){
- if(!this.disabled && this.menu){
- clearTimeout(this.hideTimer);
- delete this.hideTimer;
- if(!this.menu.isVisible() && !this.showTimer){
- this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
- }else if (this.menu.isVisible() && autoActivate){
- this.menu.tryActivate(0, 1);
+ updateExpandIcon : function(){
+ if(this.rendered){
+ var n = this.node, c1, c2;
+ var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
+ var hasChild = n.hasChildNodes();
+ if(hasChild){
+ if(n.expanded){
+ cls += "-minus";
+ c1 = "x-tree-node-collapsed";
+ c2 = "x-tree-node-expanded";
+ }else{
+ cls += "-plus";
+ c1 = "x-tree-node-expanded";
+ c2 = "x-tree-node-collapsed";
+ }
+ if(this.wasLeaf){
+ this.removeClass("x-tree-node-leaf");
+ this.wasLeaf = false;
+ }
+ if(this.c1 != c1 || this.c2 != c2){
+ Roo.fly(this.elNode).replaceClass(c1, c2);
+ this.c1 = c1; this.c2 = c2;
+ }
+ }else{
+ // this changes non-leafs into leafs if they have no children.
+ // it's not very rational behaviour..
+
+ if(!this.wasLeaf && this.node.leaf){
+ Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
+ delete this.c1;
+ delete this.c2;
+ this.wasLeaf = true;
+ }
+ }
+ var ecc = "x-tree-ec-icon "+cls;
+ if(this.ecc != ecc){
+ this.ecNode.className = ecc;
+ this.ecc = ecc;
}
}
},
- // private
- deferExpand : function(autoActivate){
- delete this.showTimer;
- this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
- if(autoActivate){
- this.menu.tryActivate(0, 1);
+ getChildIndent : function(){
+ if(!this.childIndent){
+ var buf = [];
+ var p = this.node;
+ while(p){
+ if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
+ if(!p.isLast()) {
+ buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
+ } else {
+ buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
+ }
+ }
+ p = p.parentNode;
+ }
+ this.childIndent = buf.join("");
}
+ return this.childIndent;
},
- // private
- hideMenu : function(){
- clearTimeout(this.showTimer);
- delete this.showTimer;
- if(!this.hideTimer && this.menu && this.menu.isVisible()){
- this.hideTimer = this.deferHide.defer(this.hideDelay, this);
+ renderIndent : function(){
+ if(this.rendered){
+ var indent = "";
+ var p = this.node.parentNode;
+ if(p){
+ indent = p.ui.getChildIndent();
+ }
+ if(this.indentMarkup != indent){ // don't rerender if not required
+ this.indentNode.innerHTML = indent;
+ this.indentMarkup = indent;
+ }
+ this.updateExpandIcon();
}
- },
+ }
+};
- // private
- deferHide : function(){
- delete this.hideTimer;
- this.menu.hide();
+Roo.tree.RootTreeNodeUI = function(){
+ Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
+ render : function(){
+ if(!this.rendered){
+ var targetNode = this.node.ownerTree.innerCt.dom;
+ this.node.expanded = true;
+ targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
+ this.wrap = this.ctNode = targetNode.firstChild;
+ }
+ },
+ collapse : function(){
+ },
+ expand : function(){
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
/**
- * @class Roo.menu.CheckItem
- * @extends Roo.menu.Item
- * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
+ * @class Roo.tree.TreeLoader
+ * @extends Roo.util.Observable
+ * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
+ * nodes from a specified URL. The response must be a javascript Array definition
+ * who's elements are node definition objects. eg:
+ * <pre><code>
+{ success : true,
+ data : [
+
+ { 'id': 1, 'text': 'A folder Node', 'leaf': false },
+ { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
+ ]
+}
+
+
+</code></pre>
+ * <br><br>
+ * The old style respose with just an array is still supported, but not recommended.
+ * <br><br>
+ *
+ * A server request is sent, and child nodes are loaded only when a node is expanded.
+ * The loading node's id is passed to the server under the parameter name "node" to
+ * enable the server to produce the correct child nodes.
+ * <br><br>
+ * To pass extra parameters, an event handler may be attached to the "beforeload"
+ * event, and the parameters specified in the TreeLoader's baseParams property:
+ * <pre><code>
+ myTreeLoader.on("beforeload", function(treeLoader, node) {
+ this.baseParams.category = node.attributes.category;
+ }, this);
+
+</code></pre>
+ *
+ * This would pass an HTTP parameter called "category" to the server containing
+ * the value of the Node's "category" attribute.
* @constructor
- * Creates a new CheckItem
- * @param {Object} config Configuration options
+ * Creates a new Treeloader.
+ * @param {Object} config A config object containing config properties.
*/
-Roo.menu.CheckItem = function(config){
- Roo.menu.CheckItem.superclass.constructor.call(this, config);
+Roo.tree.TreeLoader = function(config){
+ this.baseParams = {};
+ this.requestMethod = "POST";
+ Roo.apply(this, config);
+
this.addEvents({
+
/**
- * @event beforecheckchange
- * Fires before the checked value is set, providing an opportunity to cancel if needed
- * @param {Roo.menu.CheckItem} this
- * @param {Boolean} checked The new checked value that will be set
+ * @event beforeload
+ * Fires before a network request is made to retrieve the Json text which specifies a node's children.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+ * @param {Object} callback The callback function specified in the {@link #load} call.
*/
- "beforecheckchange" : true,
+ beforeload : true,
/**
- * @event checkchange
- * Fires after the checked value has been set
- * @param {Roo.menu.CheckItem} this
- * @param {Boolean} checked The checked value that was set
+ * @event load
+ * Fires when the node has been successfuly loaded.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+ * @param {Object} response The response object containing the data from the server.
*/
- "checkchange" : true
+ load : true,
+ /**
+ * @event loadexception
+ * Fires if the network request failed.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+ * @param {Object} response The response object containing the data from the server.
+ */
+ loadexception : true,
+ /**
+ * @event create
+ * Fires before a node is created, enabling you to return custom Node types
+ * @param {Object} This TreeLoader object.
+ * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
+ */
+ create : true
});
- if(this.checkHandler){
- this.on('checkchange', this.checkHandler, this.scope);
- }
+
+ Roo.tree.TreeLoader.superclass.constructor.call(this);
};
-Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
+
+Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
/**
- * @cfg {String} group
- * All check items with the same group name will automatically be grouped into a single-select
- * radio button group (defaults to '')
- */
+ * @cfg {String} dataUrl The URL from which to request a Json string which
+ * specifies an array of node definition object representing the child nodes
+ * to be loaded.
+ */
/**
- * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
- */
- itemCls : "x-menu-item x-menu-check-item",
+ * @cfg {String} requestMethod either GET or POST
+ * defaults to POST (due to BC)
+ * to be loaded.
+ */
/**
- * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
- */
- groupClass : "x-menu-group-item",
-
+ * @cfg {Object} baseParams (optional) An object containing properties which
+ * specify HTTP parameters to be passed to each request for child nodes.
+ */
/**
- * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false). Note that
- * if this checkbox is part of a radio group (group = true) only the last item in the group that is
- * initialized with checked = true will be rendered as checked.
- */
- checked: false,
+ * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
+ * created by this loader. If the attributes sent by the server have an attribute in this object,
+ * they take priority.
+ */
+ /**
+ * @cfg {Object} uiProviders (optional) An object containing properties which
+ *
+ * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
+ * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
+ * <i>uiProvider</i> attribute of a returned child node is a string rather
+ * than a reference to a TreeNodeUI implementation, this that string value
+ * is used as a property name in the uiProviders object. You can define the provider named
+ * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
+ */
+ uiProviders : {},
- // private
- ctype: "Roo.menu.CheckItem",
+ /**
+ * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
+ * child nodes before loading.
+ */
+ clearOnLoad : true,
- // private
- onRender : function(c){
- Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
- if(this.group){
- this.el.addClass(this.groupClass);
- }
- Roo.menu.MenuMgr.registerCheckable(this);
- if(this.checked){
- this.checked = false;
- this.setChecked(true, true);
+ /**
+ * @cfg {String} root (optional) Default to false. Use this to read data from an object
+ * property on loading, rather than expecting an array. (eg. more compatible to a standard
+ * Grid query { data : [ .....] }
+ */
+
+ root : false,
+ /**
+ * @cfg {String} queryParam (optional)
+ * Name of the query as it will be passed on the querystring (defaults to 'node')
+ * eg. the request will be ?node=[id]
+ */
+
+
+ queryParam: false,
+
+ /**
+ * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
+ * This is called automatically when a node is expanded, but may be used to reload
+ * a node (or append new children if the {@link #clearOnLoad} option is false.)
+ * @param {Roo.tree.TreeNode} node
+ * @param {Function} callback
+ */
+ load : function(node, callback){
+ if(this.clearOnLoad){
+ while(node.firstChild){
+ node.removeChild(node.firstChild);
+ }
}
- },
-
- // private
- destroy : function(){
- if(this.rendered){
- Roo.menu.MenuMgr.unregisterCheckable(this);
+ if(node.attributes.children){ // preloaded json children
+ var cs = node.attributes.children;
+ for(var i = 0, len = cs.length; i < len; i++){
+ node.appendChild(this.createNode(cs[i]));
+ }
+ if(typeof callback == "function"){
+ callback();
+ }
+ }else if(this.dataUrl){
+ this.requestData(node, callback);
}
- Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
},
- /**
- * Set the checked state of this item
- * @param {Boolean} checked The new checked value
- * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
- */
- setChecked : function(state, suppressEvent){
- if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
- if(this.container){
- this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
- }
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent("checkchange", this, state);
+ getParams: function(node){
+ var buf = [], bp = this.baseParams;
+ for(var key in bp){
+ if(typeof bp[key] != "function"){
+ buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
}
}
+ var n = this.queryParam === false ? 'node' : this.queryParam;
+ buf.push(n + "=", encodeURIComponent(node.id));
+ return buf.join("");
},
- // private
- handleClick : function(e){
- if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
- this.setChecked(!this.checked);
- }
- Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.DateItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.DatPicker} component.
- * @constructor
- * Creates a new DateItem
- * @param {Object} config Configuration options
- */
-Roo.menu.DateItem = function(config){
- Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
- /** The Roo.DatePicker object @type Roo.DatePicker */
- this.picker = this.component;
- this.addEvents({select: true});
-
- this.picker.on("render", function(picker){
- picker.getEl().swallowEvent("click");
- picker.container.addClass("x-menu-date-item");
- });
+ requestData : function(node, callback){
+ if(this.fireEvent("beforeload", this, node, callback) !== false){
+ this.transId = Roo.Ajax.request({
+ method:this.requestMethod,
+ url: this.dataUrl||this.url,
+ success: this.handleResponse,
+ failure: this.handleFailure,
+ scope: this,
+ argument: {callback: callback, node: node},
+ params: this.getParams(node)
+ });
+ }else{
+ // if the load is cancelled, make sure we notify
+ // the node that we are done
+ if(typeof callback == "function"){
+ callback();
+ }
+ }
+ },
- this.picker.on("select", this.onSelect, this);
-};
+ isLoading : function(){
+ return this.transId ? true : false;
+ },
+
+ abort : function(){
+ if(this.isLoading()){
+ Roo.Ajax.abort(this.transId);
+ }
+ },
-Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
// private
- onSelect : function(picker, date){
- this.fireEvent("select", this, date, picker);
- Roo.menu.DateItem.superclass.handleClick.call(this);
+ createNode : function(attr)
+ {
+ // apply baseAttrs, nice idea Corey!
+ if(this.baseAttrs){
+ Roo.applyIf(attr, this.baseAttrs);
+ }
+ if(this.applyLoader !== false){
+ attr.loader = this;
+ }
+ // uiProvider = depreciated..
+
+ if(typeof(attr.uiProvider) == 'string'){
+ attr.uiProvider = this.uiProviders[attr.uiProvider] ||
+ /** eval:var:attr */ eval(attr.uiProvider);
+ }
+ if(typeof(this.uiProviders['default']) != 'undefined') {
+ attr.uiProvider = this.uiProviders['default'];
+ }
+
+ this.fireEvent('create', this, attr);
+
+ attr.leaf = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
+ return(attr.leaf ?
+ new Roo.tree.TreeNode(attr) :
+ new Roo.tree.AsyncTreeNode(attr));
+ },
+
+ processResponse : function(response, node, callback)
+ {
+ var json = response.responseText;
+ try {
+
+ var o = Roo.decode(json);
+
+ if (this.root === false && typeof(o.success) != undefined) {
+ this.root = 'data'; // the default behaviour for list like data..
+ }
+
+ if (this.root !== false && !o.success) {
+ // it's a failure condition.
+ var a = response.argument;
+ this.fireEvent("loadexception", this, a.node, response);
+ Roo.log("Load failed - should have a handler really");
+ return;
+ }
+
+
+
+ if (this.root !== false) {
+ o = o[this.root];
+ }
+
+ for(var i = 0, len = o.length; i < len; i++){
+ var n = this.createNode(o[i]);
+ if(n){
+ node.appendChild(n);
+ }
+ }
+ if(typeof callback == "function"){
+ callback(this, node);
+ }
+ }catch(e){
+ this.handleFailure(response);
+ }
+ },
+
+ handleResponse : function(response){
+ this.transId = false;
+ var a = response.argument;
+ this.processResponse(response, a.node, a.callback);
+ this.fireEvent("load", this, a.node, response);
+ },
+
+ handleFailure : function(response)
+ {
+ // should handle failure better..
+ this.transId = false;
+ var a = response.argument;
+ this.fireEvent("loadexception", this, a.node, response);
+ if(typeof a.callback == "function"){
+ a.callback(this, a.node);
+ }
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
- * @class Roo.menu.ColorItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.ColorPalette} component.
- * @constructor
- * Creates a new ColorItem
- * @param {Object} config Configuration options
+* @class Roo.tree.TreeFilter
+* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
+* @param {TreePanel} tree
+* @param {Object} config (optional)
*/
-Roo.menu.ColorItem = function(config){
- Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
- /** The Roo.ColorPalette object @type Roo.ColorPalette */
- this.palette = this.component;
- this.relayEvents(this.palette, ["select"]);
- if(this.selectHandler){
- this.on('select', this.selectHandler, this.scope);
- }
+Roo.tree.TreeFilter = function(tree, config){
+ this.tree = tree;
+ this.filtered = {};
+ Roo.apply(this, config);
};
-Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.DateMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
- * @constructor
- * Creates a new DateMenu
- * @param {Object} config Configuration options
- */
-Roo.menu.DateMenu = function(config){
- Roo.menu.DateMenu.superclass.constructor.call(this, config);
- this.plain = true;
- var di = new Roo.menu.DateItem(config);
- this.add(di);
+Roo.tree.TreeFilter.prototype = {
+ clearBlank:false,
+ reverse:false,
+ autoClear:false,
+ remove:false,
+
+ /**
+ * Filter the data by a specific attribute.
+ * @param {String/RegExp} value Either string that the attribute value
+ * should start with or a RegExp to test against the attribute
+ * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
+ * @param {TreeNode} startNode (optional) The node to start the filter at.
+ */
+ filter : function(value, attr, startNode){
+ attr = attr || "text";
+ var f;
+ if(typeof value == "string"){
+ var vlen = value.length;
+ // auto clear empty filter
+ if(vlen == 0 && this.clearBlank){
+ this.clear();
+ return;
+ }
+ value = value.toLowerCase();
+ f = function(n){
+ return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
+ };
+ }else if(value.exec){ // regex?
+ f = function(n){
+ return value.test(n.attributes[attr]);
+ };
+ }else{
+ throw 'Illegal filter type, must be string or regex';
+ }
+ this.filterBy(f, null, startNode);
+ },
+
/**
- * The {@link Roo.DatePicker} instance for this DateMenu
- * @type DatePicker
+ * Filter by a function. The passed function will be called with each
+ * node in the tree (or from the startNode). If the function returns true, the node is kept
+ * otherwise it is filtered. If a node is filtered, its children are also filtered.
+ * @param {Function} fn The filter function
+ * @param {Object} scope (optional) The scope of the function (defaults to the current node)
*/
- this.picker = di.picker;
+ filterBy : function(fn, scope, startNode){
+ startNode = startNode || this.tree.root;
+ if(this.autoClear){
+ this.clear();
+ }
+ var af = this.filtered, rv = this.reverse;
+ var f = function(n){
+ if(n == startNode){
+ return true;
+ }
+ if(af[n.id]){
+ return false;
+ }
+ var m = fn.call(scope || n, n);
+ if(!m || rv){
+ af[n.id] = n;
+ n.ui.hide();
+ return false;
+ }
+ return true;
+ };
+ startNode.cascade(f);
+ if(this.remove){
+ for(var id in af){
+ if(typeof id != "function"){
+ var n = af[id];
+ if(n && n.parentNode){
+ n.parentNode.removeChild(n);
+ }
+ }
+ }
+ }
+ },
+
/**
- * @event select
- * @param {DatePicker} picker
- * @param {Date} date
+ * Clears the current filter. Note: with the "remove" option
+ * set a filter cannot be cleared.
*/
- this.relayEvents(di, ["select"]);
- this.on('beforeshow', function(){
- if(this.picker){
- this.picker.hideMonthPicker(false);
+ clear : function(){
+ var t = this.tree;
+ var af = this.filtered;
+ for(var id in af){
+ if(typeof id != "function"){
+ var n = af[id];
+ if(n){
+ n.ui.show();
+ }
+ }
}
- }, this);
+ this.filtered = {};
+ }
};
-Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
- cls:'x-date-menu'
-});/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.menu.ColorMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
+ * @class Roo.tree.TreeSorter
+ * Provides sorting of nodes in a TreePanel
+ *
+ * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
+ * @cfg {String} property The named attribute on the node to sort by (defaults to text)
+ * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
+ * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
+ * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
+ * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
* @constructor
- * Creates a new ColorMenu
- * @param {Object} config Configuration options
+ * @param {TreePanel} tree
+ * @param {Object} config
*/
-Roo.menu.ColorMenu = function(config){
- Roo.menu.ColorMenu.superclass.constructor.call(this, config);
- this.plain = true;
- var ci = new Roo.menu.ColorItem(config);
- this.add(ci);
- /**
- * The {@link Roo.ColorPalette} instance for this ColorMenu
- * @type ColorPalette
- */
- this.palette = ci.palette;
- /**
- * @event select
- * @param {ColorPalette} palette
- * @param {String} color
- */
- this.relayEvents(ci, ["select"]);
+Roo.tree.TreeSorter = function(tree, config){
+ Roo.apply(this, config);
+ tree.on("beforechildrenrendered", this.doSort, this);
+ tree.on("append", this.updateSort, this);
+ tree.on("insert", this.updateSort, this);
+
+ var dsc = this.dir && this.dir.toLowerCase() == "desc";
+ var p = this.property || "text";
+ var sortType = this.sortType;
+ var fs = this.folderSort;
+ var cs = this.caseSensitive === true;
+ var leafAttr = this.leafAttr || 'leaf';
+
+ this.sortFn = function(n1, n2){
+ if(fs){
+ if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
+ return 1;
+ }
+ if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
+ return -1;
+ }
+ }
+ var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
+ var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
+ if(v1 < v2){
+ return dsc ? +1 : -1;
+ }else if(v1 > v2){
+ return dsc ? -1 : +1;
+ }else{
+ return 0;
+ }
+ };
};
-Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
+
+Roo.tree.TreeSorter.prototype = {
+ doSort : function(node){
+ node.sort(this.sortFn);
+ },
+
+ compareNodes : function(n1, n2){
+ return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
+ },
+
+ updateSort : function(tree, node){
+ if(node.childrenRendered){
+ this.doSort.defer(1, this, [node]);
+ }
+ }
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
-/**
- * @class Roo.form.TextItem
- * @extends Roo.BoxComponent
- * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
- * @constructor
- * Creates a new TextItem
- * @param {Object} config Configuration options
- */
-Roo.form.TextItem = function(config){
- Roo.form.TextItem.superclass.constructor.call(this, config);
+
+if(Roo.dd.DropZone){
+
+Roo.tree.TreeDropZone = function(tree, config){
+ this.allowParentInsert = false;
+ this.allowContainerDrop = false;
+ this.appendOnly = false;
+ Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
+ this.tree = tree;
+ this.lastInsertClass = "x-tree-no-status";
+ this.dragOverData = {};
};
-Roo.extend(Roo.form.TextItem, Roo.BoxComponent, {
+Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
+ ddGroup : "TreeDD",
+ scroll: true,
- /**
- * @cfg {String} tag the tag for this item (default div)
- */
- tag : 'div',
- /**
- * @cfg {String} html the content for this item
- */
- html : '',
+ expandDelay : 1000,
- getAutoCreate : function()
- {
- var cfg = {
- id: this.id,
- tag: this.tag,
- html: this.html,
- cls: 'x-form-item'
- };
-
- return cfg;
-
+ expandNode : function(node){
+ if(node.hasChildNodes() && !node.isExpanded()){
+ node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
+ }
},
- onRender : function(ct, position)
+ queueExpand : function(node){
+ this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+ },
+
+ cancelExpand : function(){
+ if(this.expandProcId){
+ clearTimeout(this.expandProcId);
+ this.expandProcId = false;
+ }
+ },
+
+ isValidDropPoint : function(n, pt, dd, e, data){
+ if(!n || !data){ return false; }
+ var targetNode = n.node;
+ var dropNode = data.node;
+ // default drop rules
+ if(!(targetNode && targetNode.isTarget && pt)){
+ return false;
+ }
+ if(pt == "append" && targetNode.allowChildren === false){
+ return false;
+ }
+ if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
+ return false;
+ }
+ if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
+ return false;
+ }
+ // reuse the object
+ var overEvent = this.dragOverData;
+ overEvent.tree = this.tree;
+ overEvent.target = targetNode;
+ overEvent.data = data;
+ overEvent.point = pt;
+ overEvent.source = dd;
+ overEvent.rawEvent = e;
+ overEvent.dropNode = dropNode;
+ overEvent.cancel = false;
+ var result = this.tree.fireEvent("nodedragover", overEvent);
+ return overEvent.cancel === false && result !== false;
+ },
+
+ getDropPoint : function(e, n, dd)
{
- Roo.form.TextItem.superclass.onRender.call(this, ct, position);
+ var tn = n.node;
+ if(tn.isRoot){
+ return tn.allowChildren !== false ? "append" : false; // always append for root
+ }
+ var dragEl = n.ddel;
+ var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
+ var y = Roo.lib.Event.getPageY(e);
+ //var noAppend = tn.allowChildren === false || tn.isLeaf();
- if(!this.el){
- var cfg = this.getAutoCreate();
- if(!cfg.name){
- cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
- }
- if (!cfg.name.length) {
- delete cfg.name;
- }
- this.el = ct.createChild(cfg, position);
+ // we may drop nodes anywhere, as long as allowChildren has not been set to false..
+ var noAppend = tn.allowChildren === false;
+ if(this.appendOnly || tn.parentNode.allowChildren === false){
+ return noAppend ? false : "append";
+ }
+ var noBelow = false;
+ if(!this.allowParentInsert){
+ noBelow = tn.hasChildNodes() && tn.isExpanded();
+ }
+ var q = (b - t) / (noAppend ? 2 : 3);
+ if(y >= t && y < (t + q)){
+ return "above";
+ }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
+ return "below";
+ }else{
+ return "append";
}
},
- /*
- * setHTML
- * @param {String} html update the Contents of the element.
- */
- setHTML : function(html)
+
+ onNodeEnter : function(n, dd, e, data)
{
- this.fieldEl.dom.innerHTML = html;
- }
+ this.cancelExpand();
+ },
-});/*
+ onNodeOver : function(n, dd, e, data)
+ {
+
+ var pt = this.getDropPoint(e, n, dd);
+ var node = n.node;
+
+ // auto node expand check
+ if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
+ this.queueExpand(node);
+ }else if(pt != "append"){
+ this.cancelExpand();
+ }
+
+ // set the insert point style on the target node
+ var returnCls = this.dropNotAllowed;
+ if(this.isValidDropPoint(n, pt, dd, e, data)){
+ if(pt){
+ var el = n.ddel;
+ var cls;
+ if(pt == "above"){
+ returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
+ cls = "x-tree-drag-insert-above";
+ }else if(pt == "below"){
+ returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
+ cls = "x-tree-drag-insert-below";
+ }else{
+ returnCls = "x-tree-drop-ok-append";
+ cls = "x-tree-drag-append";
+ }
+ if(this.lastInsertClass != cls){
+ Roo.fly(el).replaceClass(this.lastInsertClass, cls);
+ this.lastInsertClass = cls;
+ }
+ }
+ }
+ return returnCls;
+ },
+
+ onNodeOut : function(n, dd, e, data){
+
+ this.cancelExpand();
+ this.removeDropIndicators(n);
+ },
+
+ onNodeDrop : function(n, dd, e, data){
+ var point = this.getDropPoint(e, n, dd);
+ var targetNode = n.node;
+ targetNode.ui.startDrop();
+ if(!this.isValidDropPoint(n, point, dd, e, data)){
+ targetNode.ui.endDrop();
+ return false;
+ }
+ // first try to find the drop node
+ var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
+ var dropEvent = {
+ tree : this.tree,
+ target: targetNode,
+ data: data,
+ point: point,
+ source: dd,
+ rawEvent: e,
+ dropNode: dropNode,
+ cancel: !dropNode
+ };
+ var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
+ if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
+ targetNode.ui.endDrop();
+ return false;
+ }
+ // allow target changing
+ targetNode = dropEvent.target;
+ if(point == "append" && !targetNode.isExpanded()){
+ targetNode.expand(false, null, function(){
+ this.completeDrop(dropEvent);
+ }.createDelegate(this));
+ }else{
+ this.completeDrop(dropEvent);
+ }
+ return true;
+ },
+
+ completeDrop : function(de){
+ var ns = de.dropNode, p = de.point, t = de.target;
+ if(!(ns instanceof Array)){
+ ns = [ns];
+ }
+ var n;
+ for(var i = 0, len = ns.length; i < len; i++){
+ n = ns[i];
+ if(p == "above"){
+ t.parentNode.insertBefore(n, t);
+ }else if(p == "below"){
+ t.parentNode.insertBefore(n, t.nextSibling);
+ }else{
+ t.appendChild(n);
+ }
+ }
+ n.ui.focus();
+ if(this.tree.hlDrop){
+ n.ui.highlight();
+ }
+ t.ui.endDrop();
+ this.tree.fireEvent("nodedrop", de);
+ },
+
+ afterNodeMoved : function(dd, data, e, targetNode, dropNode){
+ if(this.tree.hlDrop){
+ dropNode.ui.focus();
+ dropNode.ui.highlight();
+ }
+ this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
+ },
+
+ getTree : function(){
+ return this.tree;
+ },
+
+ removeDropIndicators : function(n){
+ if(n && n.ddel){
+ var el = n.ddel;
+ Roo.fly(el).removeClass([
+ "x-tree-drag-insert-above",
+ "x-tree-drag-insert-below",
+ "x-tree-drag-append"]);
+ this.lastInsertClass = "_noclass";
+ }
+ },
+
+ beforeDragDrop : function(target, e, id){
+ this.cancelExpand();
+ return true;
+ },
+
+ afterRepair : function(data){
+ if(data && Roo.enableFx){
+ data.node.ui.highlight();
+ }
+ this.hideProxy();
+ }
+
+});
+
+}
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
+
+if(Roo.dd.DragZone){
+Roo.tree.TreeDragZone = function(tree, config){
+ Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
+ this.tree = tree;
+};
+
+Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
+ ddGroup : "TreeDD",
+
+ onBeforeDrag : function(data, e){
+ var n = data.node;
+ return n && n.draggable && !n.disabled;
+ },
+
+
+ onInitDrag : function(e){
+ var data = this.dragData;
+ this.tree.getSelectionModel().select(data.node);
+ this.proxy.update("");
+ data.node.ui.appendDDGhost(this.proxy.ghost.dom);
+ this.tree.fireEvent("startdrag", this.tree, data.node, e);
+ },
+
+ getRepairXY : function(e, data){
+ return data.node.ui.getDDRepairXY();
+ },
+
+ onEndDrag : function(data, e){
+ this.tree.fireEvent("enddrag", this.tree, data.node, e);
+
+
+ },
+
+ onValidDrop : function(dd, e, id){
+ this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
+ this.hideProxy();
+ },
+
+ beforeInvalidDrop : function(e, id){
+ // this scrolls the original position back into view
+ var sm = this.tree.getSelectionModel();
+ sm.clearSelections();
+ sm.select(this.dragData.node);
+ }
+});
+}/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
/**
- * @class Roo.form.Field
- * @extends Roo.BoxComponent
- * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
+ * @class Roo.tree.TreeEditor
+ * @extends Roo.Editor
+ * Provides editor functionality for inline tree node editing. Any valid {@link Roo.form.Field} can be used
+ * as the editor field.
* @constructor
- * Creates a new Field
- * @param {Object} config Configuration options
+ * @param {Object} config (used to be the tree panel.)
+ * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
+ *
+ * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
+ * @cfg {Roo.form.TextField} field [required] The field configuration
+ *
+ *
*/
-Roo.form.Field = function(config){
- Roo.form.Field.superclass.constructor.call(this, config);
+Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
+ var tree = config;
+ var field;
+ if (oldconfig) { // old style..
+ field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
+ } else {
+ // new style..
+ tree = config.tree;
+ config.field = config.field || {};
+ config.field.xtype = 'TextField';
+ field = Roo.factory(config.field, Roo.form);
+ }
+ config = config || {};
+
+
+ this.addEvents({
+ /**
+ * @event beforenodeedit
+ * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
+ * false from the handler of this event.
+ * @param {Editor} this
+ * @param {Roo.tree.Node} node
+ */
+ "beforenodeedit" : true
+ });
+
+ //Roo.log(config);
+ Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
+
+ this.tree = tree;
+
+ tree.on('beforeclick', this.beforeNodeClick, this);
+ tree.getTreeEl().on('mousedown', this.hide, this);
+ this.on('complete', this.updateNode, this);
+ this.on('beforestartedit', this.fitToTree, this);
+ this.on('startedit', this.bindScroll, this, {delay:10});
+ this.on('specialkey', this.onSpecialKey, this);
};
-Roo.extend(Roo.form.Field, Roo.BoxComponent, {
- /**
- * @cfg {String} fieldLabel Label to use when rendering a form.
- */
- /**
- * @cfg {String} labelSeparator the ':' after a field label (default :) = set it to empty string to hide the field label.
- */
- /**
- * @cfg {String} qtip Mouse over tip
- */
-
- /**
- * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
- */
- invalidClass : "x-form-invalid",
- /**
- * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
- */
- invalidText : "The value in this field is invalid",
- /**
- * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
- */
- focusClass : "x-form-focus",
- /**
- * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
- automatic validation (defaults to "keyup").
- */
- validationEvent : "keyup",
- /**
- * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
- */
- validateOnBlur : true,
- /**
- * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
- */
- validationDelay : 250,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "20", autocomplete: "off"})
- */
- defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
+Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
/**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
+ * @cfg {String} alignment
+ * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
*/
- fieldClass : "x-form-field",
+ alignment: "l-l",
+ // inherit
+ autoSize: false,
/**
- * @cfg {String} msgTarget The location where error text should display. Should be one of the following values (defaults to 'qtip'):
- *<pre>
-Value Description
------------ ----------------------------------------------------------------------
-qtip Display a quick tip when the user hovers over the field
-title Display a default browser title attribute popup
-under Add a block div beneath the field containing the error text
-side Add an error icon to the right of the field with a popup on hover
-[element id] Add the error text directly to the innerHTML of the specified element
-</pre>
+ * @cfg {Boolean} hideEl
+ * True to hide the bound element while the editor is displayed (defaults to false)
*/
- msgTarget : 'qtip',
+ hideEl : false,
/**
- * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
+ * @cfg {String} cls
+ * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
*/
- msgFx : 'normal',
-
+ cls: "x-small-editor x-tree-editor",
/**
- * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
+ * @cfg {Boolean} shim
+ * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
*/
- readOnly : false,
-
+ shim:false,
+ // inherit
+ shadow:"frame",
/**
- * @cfg {Boolean} disabled True to disable the field (defaults to false).
+ * @cfg {Number} maxWidth
+ * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
+ * the containing tree element's size, it will be automatically limited for you to the container width, taking
+ * scroll and client offsets into account prior to each edit.
*/
- disabled : false,
+ maxWidth: 250,
- /**
- * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
- */
- inputType : undefined,
-
- /**
- * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
- */
- tabIndex : undefined,
-
- // private
- isFormField : true,
+ editDelay : 350,
// private
- hasFocus : false,
- /**
- * @property {Roo.Element} fieldEl
- * Element Containing the rendered Field (with label etc.)
- */
- /**
- * @cfg {Mixed} value A value to initialize this field with.
- */
- value : undefined,
+ fitToTree : function(ed, el){
+ var td = this.tree.getTreeEl().dom, nd = el.dom;
+ if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
+ td.scrollLeft = nd.offsetLeft;
+ }
+ var w = Math.min(
+ this.maxWidth,
+ (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
+ this.setSize(w, '');
+
+ return this.fireEvent('beforenodeedit', this, this.editNode);
+
+ },
- /**
- * @cfg {String} name The field's HTML name attribute.
- */
- /**
- * @cfg {String} cls A CSS class to apply to the field's underlying element.
- */
// private
- loadedValue : false,
-
-
- // private ??
- initComponent : function(){
- Roo.form.Field.superclass.initComponent.call(this);
- this.addEvents({
- /**
- * @event focus
- * Fires when this field receives input focus.
- * @param {Roo.form.Field} this
- */
- focus : true,
- /**
- * @event blur
- * Fires when this field loses input focus.
- * @param {Roo.form.Field} this
- */
- blur : true,
- /**
- * @event specialkey
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
- * {@link Roo.EventObject#getKey} to determine which key was pressed.
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event object
- */
- specialkey : true,
- /**
- * @event change
- * Fires just before the field blurs if the field value has changed.
- * @param {Roo.form.Field} this
- * @param {Mixed} newValue The new value
- * @param {Mixed} oldValue The original value
- */
- change : true,
- /**
- * @event invalid
- * Fires after the field has been marked as invalid.
- * @param {Roo.form.Field} this
- * @param {String} msg The validation message
- */
- invalid : true,
- /**
- * @event valid
- * Fires after the field has been validated with no errors.
- * @param {Roo.form.Field} this
- */
- valid : true,
- /**
- * @event keyup
- * Fires after the key up
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event Object
- */
- keyup : true
- });
+ triggerEdit : function(node){
+ this.completeEdit();
+ this.editNode = node;
+ this.startEdit(node.ui.textNode, node.text);
},
- /**
- * Returns the name attribute of the field if available
- * @return {String} name The field name
- */
- getName: function(){
- return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+ // private
+ bindScroll : function(){
+ this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
},
// private
- onRender : function(ct, position){
- Roo.form.Field.superclass.onRender.call(this, ct, position);
- if(!this.el){
- var cfg = this.getAutoCreate();
- if(!cfg.name){
- cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
- }
- if (!cfg.name.length) {
- delete cfg.name;
- }
- if(this.inputType){
- cfg.type = this.inputType;
- }
- this.el = ct.createChild(cfg, position);
- }
- var type = this.el.dom.type;
- if(type){
- if(type == 'password'){
- type = 'text';
- }
- this.el.addClass('x-form-'+type);
- }
- if(this.readOnly){
- this.el.dom.readOnly = true;
- }
- if(this.tabIndex !== undefined){
- this.el.dom.setAttribute('tabIndex', this.tabIndex);
+ beforeNodeClick : function(node, e){
+ var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
+ this.lastClick = new Date();
+ if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
+ e.stopEvent();
+ this.triggerEdit(node);
+ return false;
}
-
- this.el.addClass([this.fieldClass, this.cls]);
- this.initValue();
+ return true;
},
- /**
- * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
- * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
- * @return {Roo.form.Field} this
- */
- applyTo : function(target){
- this.allowDomMove = false;
- this.el = Roo.get(target);
- this.render(this.el.dom.parentNode);
- return this;
+ // private
+ updateNode : function(ed, value){
+ this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
+ this.editNode.setText(value);
},
// private
- initValue : function(){
- if(this.value !== undefined){
- this.setValue(this.value);
- }else if(this.el.dom.value.length > 0){
- this.setValue(this.el.dom.value);
- }
- },
-
- /**
- * Returns true if this field has been changed since it was originally loaded and is not disabled.
- * DEPRICATED - it never worked well - use hasChanged/resetHasChanged.
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
- return String(this.getValue()) !== String(this.originalValue);
- },
-
- /**
- * stores the current value in loadedValue
- */
- resetHasChanged : function()
- {
- this.loadedValue = String(this.getValue());
- },
- /**
- * checks the current value against the 'loaded' value.
- * Note - will return false if 'resetHasChanged' has not been called first.
- */
- hasChanged : function()
- {
- if(this.disabled || this.readOnly) {
- return false;
- }
- return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
- },
-
-
-
- // private
- afterRender : function(){
- Roo.form.Field.superclass.afterRender.call(this);
- this.initEvents();
- },
-
- // private
- fireKey : function(e){
- //Roo.log('field ' + e.getKey());
- if(e.isNavKeyPress()){
- this.fireEvent("specialkey", this, e);
- }
- },
-
- /**
- * Resets the current field value to the originally loaded value and clears any validation messages
- */
- reset : function(){
- this.setValue(this.resetValue);
- this.originalValue = this.getValue();
- this.clearInvalid();
- },
-
- // private
- initEvents : function(){
- // safari killled keypress - so keydown is now used..
- this.el.on("keydown" , this.fireKey, this);
- this.el.on("focus", this.onFocus, this);
- this.el.on("blur", this.onBlur, this);
- this.el.relayEvent('keyup', this);
-
- // reference to original value for reset
- this.originalValue = this.getValue();
- this.resetValue = this.getValue();
- },
-
- // private
- onFocus : function(){
- if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
- this.el.addClass(this.focusClass);
- }
- if(!this.hasFocus){
- this.hasFocus = true;
- this.startValue = this.getValue();
- this.fireEvent("focus", this);
+ onHide : function(){
+ Roo.tree.TreeEditor.superclass.onHide.call(this);
+ if(this.editNode){
+ this.editNode.ui.focus();
}
},
- beforeBlur : Roo.emptyFn,
-
// private
- onBlur : function(){
- this.beforeBlur();
- if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
- this.el.removeClass(this.focusClass);
- }
- this.hasFocus = false;
- if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
- this.validate();
- }
- var v = this.getValue();
- if(String(v) !== String(this.startValue)){
- this.fireEvent('change', this, v, this.startValue);
- }
- this.fireEvent("blur", this);
- },
-
- /**
- * Returns whether or not the field value is currently valid
- * @param {Boolean} preventMark True to disable marking the field invalid
- * @return {Boolean} True if the value is valid, else false
- */
- isValid : function(preventMark){
- if(this.disabled){
- return true;
- }
- var restore = this.preventMark;
- this.preventMark = preventMark === true;
- var v = this.validateValue(this.processValue(this.getRawValue()));
- this.preventMark = restore;
- return v;
- },
-
- /**
- * Validates the field value
- * @return {Boolean} True if the value is valid, else false
- */
- validate : function(){
- if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
- this.clearInvalid();
- return true;
+ onSpecialKey : function(field, e){
+ var k = e.getKey();
+ if(k == e.ESC){
+ e.stopEvent();
+ this.cancelEdit();
+ }else if(k == e.ENTER && !e.hasModifier()){
+ e.stopEvent();
+ this.completeEdit();
}
- return false;
- },
-
- processValue : function(value){
- return value;
- },
+ }
+});//<Script type="text/javascript">
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * Not documented??? - probably should be...
+ */
- // private
- // Subclasses should provide the validation implementation by overriding this
- validateValue : function(value){
- return true;
- },
+Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
+ //focus: Roo.emptyFn, // prevent odd scrolling behavior
+
+ renderElements : function(n, a, targetNode, bulkRender){
+ //consel.log("renderElements?");
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
- /**
- * Mark this field as invalid
- * @param {String} msg The validation message
- */
- markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
+ var t = n.getOwnerTree();
+ var tid = Pman.Tab.Document_TypesTree.tree.el.id;
- var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+ var cols = t.columns;
+ var bw = t.borderWidth;
+ var c = cols[0];
+ var href = a.href ? a.href : Roo.isGecko ? "" : "#";
+ var cb = typeof a.checked == "boolean";
+ var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
+ var colcls = 'x-t-' + tid + '-c0';
+ var buf = [
+ '<li class="x-tree-node">',
+
+
+ '<div class="x-tree-node-el ', a.cls,'">',
+ // extran...
+ '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
+
+
+ '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
+ '<img src="', this.emptyIcon, '" class="x-tree-ec-icon " />',
+ '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
+ (a.icon ? ' x-tree-node-inline-icon' : ''),
+ (a.iconCls ? ' '+a.iconCls : ''),
+ '" unselectable="on" />',
+ (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' +
+ (a.checked ? 'checked="checked" />' : ' />')) : ''),
+
+ '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
+ (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
+ '<span unselectable="on" qtip="' + tx + '">',
+ tx,
+ '</span></a>' ,
+ '</div>',
+ '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
+ (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
+ ];
+ for(var i = 1, len = cols.length; i < len; i++){
+ c = cols[i];
+ colcls = 'x-t-' + tid + '-c' +i;
+ tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
+ buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
+ '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
+ "</div>");
+ }
+
+ buf.push(
+ '</a>',
+ '<div class="x-clear"></div></div>',
+ '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+ "</li>");
- obj.el.addClass(this.invalidClass);
- msg = msg || this.invalidText;
- switch(this.msgTarget){
- case 'qtip':
- obj.el.dom.qtip = msg;
- obj.el.dom.qclass = 'x-form-invalid-tip';
- if(Roo.QuickTips){ // fix for floating editors interacting with DND
- Roo.QuickTips.enable();
- }
- break;
- case 'title':
- this.el.dom.title = msg;
- break;
- case 'under':
- if(!this.errorEl){
- var elp = this.el.findParent('.x-form-element', 5, true);
- this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
- this.errorEl.setWidth(elp.getWidth(true)-20);
- }
- this.errorEl.update(msg);
- Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
- break;
- case 'side':
- if(!this.errorIcon){
- var elp = this.el.findParent('.x-form-element', 5, true);
- this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
- }
- this.alignErrorIcon();
- this.errorIcon.dom.qtip = msg;
- this.errorIcon.dom.qclass = 'x-form-invalid-tip';
- this.errorIcon.show();
- this.on('resize', this.alignErrorIcon, this);
- break;
- default:
- var t = Roo.getDom(this.msgTarget);
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
- break;
+ if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+ this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
+ n.nextSibling.ui.getEl(), buf.join(""));
+ }else{
+ this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
- this.fireEvent('invalid', this, msg);
- },
-
- // private
- alignErrorIcon : function(){
- this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
- },
-
- /**
- * Clear any invalid styles/messages for this field
- */
- clearInvalid : function(){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
+ var el = this.wrap.firstChild;
+ this.elRow = el;
+ this.elNode = el.firstChild;
+ this.ranchor = el.childNodes[1];
+ this.ctNode = this.wrap.childNodes[1];
+ var cs = el.firstChild.childNodes;
+ this.indentNode = cs[0];
+ this.ecNode = cs[1];
+ this.iconNode = cs[2];
+ var index = 3;
+ if(cb){
+ this.checkbox = cs[3];
+ index++;
}
- var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+ this.anchor = cs[index];
- obj.el.removeClass(this.invalidClass);
- switch(this.msgTarget){
- case 'qtip':
- obj.el.dom.qtip = '';
- break;
- case 'title':
- this.el.dom.title = '';
- break;
- case 'under':
- if(this.errorEl){
- Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
- }
- break;
- case 'side':
- if(this.errorIcon){
- this.errorIcon.dom.qtip = '';
- this.errorIcon.hide();
- this.un('resize', this.alignErrorIcon, this);
- }
- break;
- default:
- var t = Roo.getDom(this.msgTarget);
- t.innerHTML = '';
- t.style.display = 'none';
- break;
- }
- this.fireEvent('valid', this);
- },
-
- /**
- * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
- * @return {Mixed} value The field value
- */
- getRawValue : function(){
- var v = this.el.getValue();
+ this.textNode = cs[index].firstChild;
- return v;
- },
-
- /**
- * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
- * @return {Mixed} value The field value
- */
- getValue : function(){
- var v = this.el.getValue();
-
- return v;
+ //el.on("click", this.onClick, this);
+ //el.on("dblclick", this.onDblClick, this);
+
+
+ // console.log(this);
},
+ initEvents : function(){
+ Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
+
+
+ var a = this.ranchor;
- /**
- * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}.
- * @param {Mixed} value The value to set
- */
- setRawValue : function(v){
- return this.el.dom.value = (v === null || v === undefined ? '' : v);
- },
+ var el = Roo.get(a);
- /**
- * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
- * @param {Mixed} value The value to set
- */
- setValue : function(v){
- this.value = v;
- if(this.rendered){
- this.el.dom.value = (v === null || v === undefined ? '' : v);
- this.validate();
+ if(Roo.isOpera){ // opera render bug ignores the CSS
+ el.setStyle("text-decoration", "none");
}
- },
- adjustSize : function(w, h){
- var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
- s.width = this.adjustWidth(this.el.dom.tagName, s.width);
- return s;
+ el.on("click", this.onClick, this);
+ el.on("dblclick", this.onDblClick, this);
+ el.on("contextmenu", this.onContextMenu, this);
+
},
-
- adjustWidth : function(tag, w){
- tag = tag.toLowerCase();
- if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
- if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
- if(tag == 'input'){
- return w + 2;
- }
- if(tag == 'textarea'){
- return w-2;
- }
- }else if(Roo.isOpera){
- if(tag == 'input'){
- return w + 2;
- }
- if(tag == 'textarea'){
- return w-2;
- }
- }
+
+ /*onSelectedChange : function(state){
+ if(state){
+ this.focus();
+ this.addClass("x-tree-selected");
+ }else{
+ //this.blur();
+ this.removeClass("x-tree-selected");
}
- return w;
- }
-});
-
-
-// anything other than normal should be considered experimental
-Roo.form.Field.msgFx = {
- normal : {
- show: function(msgEl, f){
- msgEl.setDisplayed('block');
- },
-
- hide : function(msgEl, f){
- msgEl.setDisplayed(false).update('');
+ },*/
+ addClass : function(cls){
+ if(this.elRow){
+ Roo.fly(this.elRow).addClass(cls);
}
+
},
-
- slide : {
- show: function(msgEl, f){
- msgEl.slideIn('t', {stopFx:true});
- },
-
- hide : function(msgEl, f){
- msgEl.slideOut('t', {stopFx:true,useDisplay:true});
+
+
+ removeClass : function(cls){
+ if(this.elRow){
+ Roo.fly(this.elRow).removeClass(cls);
}
- },
+ }
- slideRight : {
- show: function(msgEl, f){
- msgEl.fixDisplay();
- msgEl.alignTo(f.el, 'tl-tr');
- msgEl.slideIn('l', {stopFx:true});
- },
+
+
+});//<Script type="text/javascript">
- hide : function(msgEl, f){
- msgEl.slideOut('l', {stopFx:true,useDisplay:true});
- }
- }
-};/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.form.TextField
- * @extends Roo.form.Field
- * Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base
- * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
+ * @class Roo.tree.ColumnTree
+ * @extends Roo.tree.TreePanel
+ * @cfg {Object} columns Including width, header, renderer, cls, dataIndex
+ * @cfg {int} borderWidth compined right/left border allowance
* @constructor
- * Creates a new TextField
- * @param {Object} config Configuration options
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
*/
-Roo.form.TextField = function(config){
- Roo.form.TextField.superclass.constructor.call(this, config);
- this.addEvents({
+Roo.tree.ColumnTree = function(el, config)
+{
+ Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
+ this.addEvents({
/**
- * @event autosize
- * Fires when the autosize function is triggered. The field may or may not have actually changed size
- * according to the default logic, but this event provides a hook for the developer to apply additional
- * logic at runtime to resize the field if needed.
- * @param {Roo.form.Field} this This text field
- * @param {Number} width The new field width
- */
- autosize : true
+ * @event resize
+ * Fire this event on a container when it resizes
+ * @param {int} w Width
+ * @param {int} h Height
+ */
+ "resize" : true
});
+ this.on('resize', this.onResize, this);
};
-Roo.extend(Roo.form.TextField, Roo.form.Field, {
- /**
- * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
- */
- grow : false,
- /**
- * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
- */
- growMin : 30,
- /**
- * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
- */
- growMax : 800,
- /**
- * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
- */
- vtype : null,
- /**
- * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
- */
- maskRe : null,
- /**
- * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
- */
- disableKeyFilter : false,
- /**
- * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
- */
- allowBlank : true,
- /**
- * @cfg {Number} minLength Minimum input field length required (defaults to 0)
- */
- minLength : 0,
- /**
- * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
- */
- maxLength : Number.MAX_VALUE,
- /**
- * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
- */
- minLengthText : "The minimum length for this field is {0}",
- /**
- * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
- */
- maxLengthText : "The maximum length for this field is {0}",
+Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
+ //lines:false,
+
+
+ borderWidth: Roo.isBorderBox ? 0 : 2,
+ headEls : false,
+
+ render : function(){
+ // add the header.....
+
+ Roo.tree.ColumnTree.superclass.render.apply(this);
+
+ this.el.addClass('x-column-tree');
+
+ this.headers = this.el.createChild(
+ {cls:'x-tree-headers'},this.innerCt.dom);
+
+ var cols = this.columns, c;
+ var totalWidth = 0;
+ this.headEls = [];
+ var len = cols.length;
+ for(var i = 0; i < len; i++){
+ c = cols[i];
+ totalWidth += c.width;
+ this.headEls.push(this.headers.createChild({
+ cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
+ cn: {
+ cls:'x-tree-hd-text',
+ html: c.header
+ },
+ style:'width:'+(c.width-this.borderWidth)+'px;'
+ }));
+ }
+ this.headers.createChild({cls:'x-clear'});
+ // prevent floats from wrapping when clipped
+ this.headers.setWidth(totalWidth);
+ //this.innerCt.setWidth(totalWidth);
+ this.innerCt.setStyle({ overflow: 'auto' });
+ this.onResize(this.width, this.height);
+
+
+ },
+ onResize : function(w,h)
+ {
+ this.height = h;
+ this.width = w;
+ // resize cols..
+ this.innerCt.setWidth(this.width);
+ this.innerCt.setHeight(this.height-20);
+
+ // headers...
+ var cols = this.columns, c;
+ var totalWidth = 0;
+ var expEl = false;
+ var len = cols.length;
+ for(var i = 0; i < len; i++){
+ c = cols[i];
+ if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
+ // it's the expander..
+ expEl = this.headEls[i];
+ continue;
+ }
+ totalWidth += c.width;
+
+ }
+ if (expEl) {
+ expEl.setWidth( ((w - totalWidth)-this.borderWidth - 20));
+ }
+ this.headers.setWidth(w-20);
+
+
+
+
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.Menu
+ * @extends Roo.util.Observable
+ * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
+ * A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class
+ * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
+ * @constructor
+ * Creates a new Menu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Menu = function(config){
+
+ Roo.menu.Menu.superclass.constructor.call(this, config);
+
+ this.id = this.id || Roo.id();
+ this.addEvents({
+ /**
+ * @event beforeshow
+ * Fires before this menu is displayed
+ * @param {Roo.menu.Menu} this
+ */
+ beforeshow : true,
+ /**
+ * @event beforehide
+ * Fires before this menu is hidden
+ * @param {Roo.menu.Menu} this
+ */
+ beforehide : true,
+ /**
+ * @event show
+ * Fires after this menu is displayed
+ * @param {Roo.menu.Menu} this
+ */
+ show : true,
+ /**
+ * @event hide
+ * Fires after this menu is hidden
+ * @param {Roo.menu.Menu} this
+ */
+ hide : true,
+ /**
+ * @event click
+ * Fires when this menu is clicked (or when the enter key is pressed while it is active)
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ * @param {Roo.EventObject} e
+ */
+ click : true,
+ /**
+ * @event mouseover
+ * Fires when the mouse is hovering over this menu
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.EventObject} e
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ */
+ mouseover : true,
+ /**
+ * @event mouseout
+ * Fires when the mouse exits this menu
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.EventObject} e
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ */
+ mouseout : true,
+ /**
+ * @event itemclick
+ * Fires when a menu item contained in this menu is clicked
+ * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
+ * @param {Roo.EventObject} e
+ */
+ itemclick: true
+ });
+ if (this.registerMenu) {
+ Roo.menu.MenuMgr.register(this);
+ }
+
+ var mis = this.items;
+ this.items = new Roo.util.MixedCollection();
+ if(mis){
+ this.add.apply(this, mis);
+ }
+};
+
+Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
/**
- * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
+ * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
*/
- selectOnFocus : false,
- /**
- * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space
- */
- allowLeadingSpace : false,
+ minWidth : 120,
/**
- * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
+ * for bottom-right shadow (defaults to "sides")
*/
- blankText : "This field is required",
+ shadow : "sides",
/**
- * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
- * If available, this function will be called only after the basic validators all return true, and will be passed the
- * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
+ * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
+ * this menu (defaults to "tl-tr?")
*/
- validator : null,
+ subMenuAlign : "tl-tr?",
/**
- * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
- * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
- * current field value. If the test fails, the field will be marked invalid using {@link #regexText}.
+ * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
+ * relative to its element of origin (defaults to "tl-bl?")
*/
- regex : null,
+ defaultAlign : "tl-bl?",
/**
- * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
+ * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
*/
- regexText : "",
+ allowOtherMenus : false,
/**
- * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
+ * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
*/
- emptyText : null,
-
+ registerMenu : true,
+
+ hidden:true,
// private
- initEvents : function()
- {
- if (this.emptyText) {
- this.el.attr('placeholder', this.emptyText);
+ render : function(){
+ if(this.el){
+ return;
}
-
- Roo.form.TextField.superclass.initEvents.call(this);
- if(this.validationEvent == 'keyup'){
- this.validationTask = new Roo.util.DelayedTask(this.validate, this);
- this.el.on('keyup', this.filterValidation, this);
+ var el = this.el = new Roo.Layer({
+ cls: "x-menu",
+ shadow:this.shadow,
+ constrain: false,
+ parentEl: this.parentEl || document.body,
+ zindex:15000
+ });
+
+ this.keyNav = new Roo.menu.MenuNav(this);
+
+ if(this.plain){
+ el.addClass("x-menu-plain");
}
- else if(this.validationEvent !== false){
- this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
+ if(this.cls){
+ el.addClass(this.cls);
}
+ // generic focus element
+ this.focusEl = el.createChild({
+ tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
+ });
+ var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
+ //disabling touch- as it's causing issues ..
+ //ul.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
+ ul.on('click' , this.onClick, this);
- if(this.selectOnFocus){
- this.on("focus", this.preFocus, this);
- }
- if (!this.allowLeadingSpace) {
- this.on('blur', this.cleanLeadingSpace, this);
- }
-
- if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
- this.el.on("keypress", this.filterKeys, this);
- }
- if(this.grow){
- this.el.on("keyup", this.onKeyUp, this, {buffer:50});
- this.el.on("click", this.autoSize, this);
+
+ ul.on("mouseover", this.onMouseOver, this);
+ ul.on("mouseout", this.onMouseOut, this);
+ this.items.each(function(item){
+ if (item.hidden) {
+ return;
+ }
+
+ var li = document.createElement("li");
+ li.className = "x-menu-list-item";
+ ul.dom.appendChild(li);
+ item.render(li, this);
+ }, this);
+ this.ul = ul;
+ this.autoWidth();
+ },
+
+ // private
+ autoWidth : function(){
+ var el = this.el, ul = this.ul;
+ if(!el){
+ return;
}
- if(this.el.is('input[type=password]') && Roo.isSafari){
- this.el.on('keydown', this.SafariOnKeyDown, this);
+ var w = this.width;
+ if(w){
+ el.setWidth(w);
+ }else if(Roo.isIE){
+ el.setWidth(this.minWidth);
+ var t = el.dom.offsetWidth; // force recalc
+ el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
}
},
- processValue : function(value){
- if(this.stripCharsRe){
- var newValue = value.replace(this.stripCharsRe, '');
- if(newValue !== value){
- this.setRawValue(newValue);
- return newValue;
+ // private
+ delayAutoWidth : function(){
+ if(this.rendered){
+ if(!this.awTask){
+ this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
}
+ this.awTask.delay(20);
}
- return value;
},
- filterValidation : function(e){
- if(!e.isNavKeyPress()){
- this.validationTask.delay(this.validationDelay);
+ // private
+ findTargetItem : function(e){
+ var t = e.getTarget(".x-menu-list-item", this.ul, true);
+ if(t && t.menuItemId){
+ return this.items.get(t.menuItemId);
}
},
// private
- onKeyUp : function(e){
- if(!e.isNavKeyPress()){
- this.autoSize();
+ onClick : function(e){
+ Roo.log("menu.onClick");
+ var t = this.findTargetItem(e);
+ if(!t){
+ return;
}
- },
- // private - clean the leading white space
- cleanLeadingSpace : function(e)
- {
- if ( this.inputType == 'file') {
+ Roo.log(e);
+ if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
+ if(t == this.activeItem && t.shouldDeactivate(e)){
+ this.activeItem.deactivate();
+ delete this.activeItem;
+ return;
+ }
+ if(t.canActivate){
+ this.setActiveItem(t, true);
+ }
return;
+
+
}
- this.setValue((this.getValue() + '').replace(/^\s+/,''));
+ t.onClick(e);
+ this.fireEvent("click", this, t, e);
},
- /**
- * Resets the current field value to the originally-loaded value and clears any validation messages.
- *
- */
- reset : function(){
- Roo.form.TextField.superclass.reset.call(this);
-
- },
+
// private
- preFocus : function(){
-
- if(this.selectOnFocus){
- this.el.dom.select();
+ setActiveItem : function(item, autoExpand){
+ if(item != this.activeItem){
+ if(this.activeItem){
+ this.activeItem.deactivate();
+ }
+ this.activeItem = item;
+ item.activate(autoExpand);
+ }else if(autoExpand){
+ item.expandMenu();
}
},
-
// private
- filterKeys : function(e){
- var k = e.getKey();
- if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
- return;
- }
- var c = e.getCharCode(), cc = String.fromCharCode(c);
- if(Roo.isIE && (e.isSpecialKey() || !cc)){
- return;
- }
- if(!this.maskRe.test(cc)){
- e.stopEvent();
+ tryActivate : function(start, step){
+ var items = this.items;
+ for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
+ var item = items.get(i);
+ if(!item.disabled && item.canActivate){
+ this.setActiveItem(item, false);
+ return item;
+ }
}
+ return false;
},
- setValue : function(v){
-
- Roo.form.TextField.superclass.setValue.apply(this, arguments);
-
- this.autoSize();
- },
-
- /**
- * Validates a value according to the field's validation rules and marks the field as invalid
- * if the validation fails
- * @param {Mixed} value The value to validate
- * @return {Boolean} True if the value is valid, else false
- */
- validateValue : function(value){
- if(value.length < 1) { // if it's blank
- if(this.allowBlank){
- this.clearInvalid();
- return true;
- }else{
- this.markInvalid(this.blankText);
- return false;
- }
- }
- if(value.length < this.minLength){
- this.markInvalid(String.format(this.minLengthText, this.minLength));
- return false;
- }
- if(value.length > this.maxLength){
- this.markInvalid(String.format(this.maxLengthText, this.maxLength));
- return false;
- }
- if(this.vtype){
- var vt = Roo.form.VTypes;
- if (value.trim() != value) { // trim before checking email (and other stuf??)
- value = value.trim();
- this.el.dom.value = value;
- }
-
- if(!vt[this.vtype](value, this)){
- this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
- return false;
+ // private
+ onMouseOver : function(e){
+ var t;
+ if(t = this.findTargetItem(e)){
+ if(t.canActivate && !t.disabled){
+ this.setActiveItem(t, true);
}
}
- if(typeof this.validator == "function"){
- var msg = this.validator(value);
- if(msg !== true){
- this.markInvalid(msg);
- return false;
+ this.fireEvent("mouseover", this, e, t);
+ },
+
+ // private
+ onMouseOut : function(e){
+ var t;
+ if(t = this.findTargetItem(e)){
+ if(t == this.activeItem && t.shouldDeactivate(e)){
+ this.activeItem.deactivate();
+ delete this.activeItem;
}
}
- if(this.regex && !this.regex.test(value)){
- this.markInvalid(this.regexText);
- return false;
- }
- return true;
+ this.fireEvent("mouseout", this, e, t);
},
/**
- * Selects text in this field
- * @param {Number} start (optional) The index where the selection should start (defaults to 0)
- * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
+ * Read-only. Returns true if the menu is currently displayed, else false.
+ * @type Boolean
*/
- selectText : function(start, end){
- var v = this.getRawValue();
- if(v.length > 0){
- start = start === undefined ? 0 : start;
- end = end === undefined ? v.length : end;
- var d = this.el.dom;
- if(d.setSelectionRange){
- d.setSelectionRange(start, end);
- }else if(d.createTextRange){
- var range = d.createTextRange();
- range.moveStart("character", start);
- range.moveEnd("character", v.length-end);
- range.select();
- }
- }
+ isVisible : function(){
+ return this.el && !this.hidden;
},
/**
- * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
- * This only takes effect if grow = true, and fires the autosize event.
+ * Displays this menu relative to another element
+ * @param {String/HTMLElement/Roo.Element} element The element to align to
+ * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
+ * the element (defaults to this.defaultAlign)
+ * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
*/
- autoSize : function(){
- if(!this.grow || !this.rendered){
- return;
+ show : function(el, pos, parentMenu){
+ this.parentMenu = parentMenu;
+ if(!this.el){
+ this.render();
}
- if(!this.metrics){
- this.metrics = Roo.util.TextMetrics.createInstance(this.el);
- }
- var el = this.el;
- var v = el.dom.value;
- var d = document.createElement('div');
- d.appendChild(document.createTextNode(v));
- v = d.innerHTML;
- d = null;
- v += " ";
- var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
- this.el.setWidth(w);
- this.fireEvent("autosize", this, w);
+ this.fireEvent("beforeshow", this);
+ this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
},
-
- // private
- SafariOnKeyDown : function(event)
- {
- // this is a workaround for a password hang bug on chrome/ webkit.
-
- var isSelectAll = false;
-
- if(this.el.dom.selectionEnd > 0){
- isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
- }
- if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
- event.preventDefault();
- this.setValue('');
- return;
+
+ /**
+ * Displays this menu at a specific xy position
+ * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
+ * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ */
+ showAt : function(xy, parentMenu, /* private: */_e){
+ this.parentMenu = parentMenu;
+ if(!this.el){
+ this.render();
}
-
- // skip handling paste
- if(isSelectAll && event.getCharCode() > 31 && !(event.ctrlKey && event.getCharCode() == 86)){ // backspace and delete key
-
- event.preventDefault();
- // this is very hacky as keydown always get's upper case.
-
- var cc = String.fromCharCode(event.getCharCode());
-
-
- this.setValue( event.shiftKey ? cc : cc.toLowerCase());
-
+ if(_e !== false){
+ this.fireEvent("beforeshow", this);
+ xy = this.el.adjustForConstraints(xy);
}
-
-
- }
-});Roo.form.Password = function(config){
- Roo.form.Password.superclass.constructor.call(this, config);
-
- this.inputType = 'password';
-};
-
-Roo.extend(Roo.form.Password, Roo.form.TextField, {
- onRender : function(ct, position)
- {
- Roo.form.Password.superclass.onRender.call(this, ct, position);
-
- this.parentEl().addClass('form-password');
-
- this.wrap = this.el.wrap({
- cls : 'password-wrap'
- });
-
- this.toggle = this.wrap.createChild({
- tag : 'Button',
- cls : 'password-toggle'
- });
-
-
- this.toggleEl().addClass('password-hidden');
-
- this.toggleEl().on('click', this.onToggleClick, this);;
- },
-
- parentEl : function()
- {
- return this.el.findParent('.x-form-element', 5, true);
+ this.el.setXY(xy);
+ this.el.show();
+ this.hidden = false;
+ this.focus();
+ this.fireEvent("show", this);
},
- toggleEl: function()
- {
- return this.parentEl().select('button.password-toggle',true).first();
+ focus : function(){
+ if(!this.hidden){
+ this.doFocus.defer(50, this);
+ }
},
- onToggleClick : function(e)
- {
- var input = this.el;
- var toggle = this.toggleEl();
-
- toggle.removeClass(['password-visible', 'password-hidden']);
+ doFocus : function(){
+ if(!this.hidden){
+ this.focusEl.focus();
+ }
+ },
- if(input.attr('type') == 'password') {
- input.attr('type', 'text');
- toggle.addClass('password-visible');
+ /**
+ * Hides this menu and optionally all parent menus
+ * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
+ */
+ hide : function(deep){
+ if(this.el && this.isVisible()){
+ this.fireEvent("beforehide", this);
+ if(this.activeItem){
+ this.activeItem.deactivate();
+ this.activeItem = null;
+ }
+ this.el.hide();
+ this.hidden = true;
+ this.fireEvent("hide", this);
}
- else {
- input.attr('type', 'password');
- toggle.addClass('password-hidden');
+ if(deep === true && this.parentMenu){
+ this.parentMenu.hide(true);
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Hidden
- * @extends Roo.form.TextField
- * Simple Hidden element used on forms
- *
- * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
- *
- * @constructor
- * Creates a new Hidden form element.
- * @param {Object} config Configuration options
- */
-
-
-
-// easy hidden field...
-Roo.form.Hidden = function(config){
- Roo.form.Hidden.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
- fieldLabel: '',
- inputType: 'hidden',
- width: 50,
- allowBlank: true,
- labelSeparator: '',
- hidden: true,
- itemCls : 'x-form-item-display-none'
-
+ },
-});
+ /**
+ * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
+ * Any of the following are valid:
+ * <ul>
+ * <li>Any menu item object based on {@link Roo.menu.Item}</li>
+ * <li>An HTMLElement object which will be converted to a menu item</li>
+ * <li>A menu item config object that will be created as a new menu item</li>
+ * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
+ * it will be converted into a {@link Roo.menu.TextItem} and added</li>
+ * </ul>
+ * Usage:
+ * <pre><code>
+// Create the menu
+var menu = new Roo.menu.Menu();
+// Create a menu item to add by reference
+var menuItem = new Roo.menu.Item({ text: 'New Item!' });
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.TriggerField
- * @extends Roo.form.TextField
- * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
- * The trigger has no default action, so you must assign a function to implement the trigger click handler by
- * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
- * for which you can provide a custom implementation. For example:
- * <pre><code>
-var trigger = new Roo.form.TriggerField();
-trigger.onTriggerClick = myTriggerFn;
-trigger.applyTo('my-field');
+// Add a bunch of items at once using different methods.
+// Only the last item added will be returned.
+var item = menu.add(
+ menuItem, // add existing item by ref
+ 'Dynamic Item', // new TextItem
+ '-', // new separator
+ { text: 'Config Item' } // new item by config
+);
</code></pre>
- *
- * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
- * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
- * @constructor
- * Create a new TriggerField.
- * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
- * to the base TextField)
- */
-Roo.form.TriggerField = function(config){
- this.mimicing = false;
- Roo.form.TriggerField.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
- /**
- * @cfg {String} triggerClass A CSS class to apply to the trigger
- */
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "16", autocomplete: "off"})
- */
- defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
- /**
- * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
+ * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
+ * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
*/
- hideTrigger:false,
-
- /** @cfg {Boolean} grow @hide */
- /** @cfg {Number} growMin @hide */
- /** @cfg {Number} growMax @hide */
+ add : function(){
+ var a = arguments, l = a.length, item;
+ for(var i = 0; i < l; i++){
+ var el = a[i];
+ if ((typeof(el) == "object") && el.xtype && el.xns) {
+ el = Roo.factory(el, Roo.menu);
+ }
+
+ if(el.render){ // some kind of Item
+ item = this.addItem(el);
+ }else if(typeof el == "string"){ // string
+ if(el == "separator" || el == "-"){
+ item = this.addSeparator();
+ }else{
+ item = this.addText(el);
+ }
+ }else if(el.tagName || el.el){ // element
+ item = this.addElement(el);
+ }else if(typeof el == "object"){ // must be menu item config?
+ item = this.addMenuItem(el);
+ }
+ }
+ return item;
+ },
/**
- * @hide
- * @method
+ * Returns this menu's underlying {@link Roo.Element} object
+ * @return {Roo.Element} The element
*/
- autoSize: Roo.emptyFn,
- // private
- monitorTab : true,
- // private
- deferHeight : true,
-
-
- actionMode : 'wrap',
- // private
- onResize : function(w, h){
- Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
- if(typeof w == 'number'){
- var x = w - this.trigger.getWidth();
- this.el.setWidth(this.adjustWidth('input', x));
- this.trigger.setStyle('left', x+'px');
+ getEl : function(){
+ if(!this.el){
+ this.render();
}
+ return this.el;
},
- // private
- adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
- // private
- getResizeEl : function(){
- return this.wrap;
+ /**
+ * Adds a separator bar to the menu
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addSeparator : function(){
+ return this.addItem(new Roo.menu.Separator());
},
- // private
- getPositionEl : function(){
- return this.wrap;
+ /**
+ * Adds an {@link Roo.Element} object to the menu
+ * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addElement : function(el){
+ return this.addItem(new Roo.menu.BaseItem(el));
},
- // private
- alignErrorIcon : function(){
- this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+ /**
+ * Adds an existing object based on {@link Roo.menu.Item} to the menu
+ * @param {Roo.menu.Item} item The menu item to add
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addItem : function(item){
+ this.items.add(item);
+ if(this.ul){
+ var li = document.createElement("li");
+ li.className = "x-menu-list-item";
+ this.ul.dom.appendChild(li);
+ item.render(li, this);
+ this.delayAutoWidth();
+ }
+ return item;
},
- // private
- onRender : function(ct, position){
- Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
- this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
- this.trigger = this.wrap.createChild(this.triggerConfig ||
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
- if(this.hideTrigger){
- this.trigger.setDisplayed(false);
- }
- this.initTrigger();
- if(!this.width){
- this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
+ /**
+ * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
+ * @param {Object} config A MenuItem config object
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addMenuItem : function(config){
+ if(!(config instanceof Roo.menu.Item)){
+ if(typeof config.checked == "boolean"){ // must be check menu item config?
+ config = new Roo.menu.CheckItem(config);
+ }else{
+ config = new Roo.menu.Item(config);
+ }
}
+ return this.addItem(config);
},
- // private
- initTrigger : function(){
- this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
- this.trigger.addClassOnOver('x-form-trigger-over');
- this.trigger.addClassOnClick('x-form-trigger-click');
+ /**
+ * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
+ * @param {String} text The text to display in the menu item
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ addText : function(text){
+ return this.addItem(new Roo.menu.TextItem({ text : text }));
},
- // private
- onDestroy : function(){
- if(this.trigger){
- this.trigger.removeAllListeners();
- this.trigger.remove();
- }
- if(this.wrap){
- this.wrap.remove();
+ /**
+ * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
+ * @param {Number} index The index in the menu's list of current items where the new item should be inserted
+ * @param {Roo.menu.Item} item The menu item to add
+ * @return {Roo.menu.Item} The menu item that was added
+ */
+ insert : function(index, item){
+ this.items.insert(index, item);
+ if(this.ul){
+ var li = document.createElement("li");
+ li.className = "x-menu-list-item";
+ this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
+ item.render(li, this);
+ this.delayAutoWidth();
}
- Roo.form.TriggerField.superclass.onDestroy.call(this);
+ return item;
},
- // private
- onFocus : function(){
- Roo.form.TriggerField.superclass.onFocus.call(this);
- if(!this.mimicing){
- this.wrap.addClass('x-trigger-wrap-focus');
- this.mimicing = true;
- Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
- if(this.monitorTab){
- this.el.on("keydown", this.checkTab, this);
- }
- }
+ /**
+ * Removes an {@link Roo.menu.Item} from the menu and destroys the object
+ * @param {Roo.menu.Item} item The menu item to remove
+ */
+ remove : function(item){
+ this.items.removeKey(item.id);
+ item.destroy();
},
- // private
- checkTab : function(e){
- if(e.getKey() == e.TAB){
- this.triggerBlur();
+ /**
+ * Removes and destroys all items in the menu
+ */
+ removeAll : function(){
+ var f;
+ while(f = this.items.first()){
+ this.remove(f);
}
- },
+ }
+});
- // private
- onBlur : function(){
- // do nothing
- },
+// MenuNav is a private utility class used internally by the Menu
+Roo.menu.MenuNav = function(menu){
+ Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
+ this.scope = this.menu = menu;
+};
- // private
- mimicBlur : function(e, t){
- if(!this.wrap.contains(t) && this.validateBlur()){
- this.triggerBlur();
+Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
+ doRelay : function(e, h){
+ var k = e.getKey();
+ if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
+ this.menu.tryActivate(0, 1);
+ return false;
}
+ return h.call(this.scope || this, e, this.menu);
},
- // private
- triggerBlur : function(){
- this.mimicing = false;
- Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
- if(this.monitorTab){
- this.el.un("keydown", this.checkTab, this);
+ up : function(e, m){
+ if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
+ m.tryActivate(m.items.length-1, -1);
}
- this.wrap.removeClass('x-trigger-wrap-focus');
- Roo.form.TriggerField.superclass.onBlur.call(this);
- },
-
- // private
- // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
- validateBlur : function(e, t){
- return true;
},
- // private
- onDisable : function(){
- Roo.form.TriggerField.superclass.onDisable.call(this);
- if(this.wrap){
- this.wrap.addClass('x-item-disabled');
+ down : function(e, m){
+ if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
+ m.tryActivate(0, 1);
}
},
- // private
- onEnable : function(){
- Roo.form.TriggerField.superclass.onEnable.call(this);
- if(this.wrap){
- this.wrap.removeClass('x-item-disabled');
+ right : function(e, m){
+ if(m.activeItem){
+ m.activeItem.expandMenu(true);
}
},
- // private
- onShow : function(){
- var ae = this.getActionEl();
-
- if(ae){
- ae.dom.style.display = '';
- ae.dom.style.visibility = 'visible';
+ left : function(e, m){
+ m.hide();
+ if(m.parentMenu && m.parentMenu.activeItem){
+ m.parentMenu.activeItem.activate();
}
},
- // private
-
- onHide : function(){
- var ae = this.getActionEl();
- ae.dom.style.display = 'none';
- },
-
- /**
- * The function that should handle the trigger's click event. This method does nothing by default until overridden
- * by an implementing function.
- * @method
- * @param {EventObject} e
- */
- onTriggerClick : Roo.emptyFn
-});
-
-// TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
-// to be extended by an implementing class. For an example of implementing this class, see the custom
-// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
-Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
- initComponent : function(){
- Roo.form.TwinTriggerField.superclass.initComponent.call(this);
-
- this.triggerConfig = {
- tag:'span', cls:'x-form-twin-triggers', cn:[
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
- ]};
- },
-
- getTrigger : function(index){
- return this.triggers[index];
- },
-
- initTrigger : function(){
- var ts = this.trigger.select('.x-form-trigger', true);
- this.wrap.setStyle('overflow', 'hidden');
- var triggerField = this;
- ts.each(function(t, all, index){
- t.hide = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = 'none';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- t.show = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = '';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- var triggerIndex = 'Trigger'+(index+1);
-
- if(this['hide'+triggerIndex]){
- t.dom.style.display = 'none';
- }
- t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
- t.addClassOnOver('x-form-trigger-over');
- t.addClassOnClick('x-form-trigger-click');
- }, this);
- this.triggers = ts.elements;
- },
-
- onTrigger1Click : Roo.emptyFn,
- onTrigger2Click : Roo.emptyFn
+ enter : function(e, m){
+ if(m.activeItem){
+ e.stopPropagation();
+ m.activeItem.onClick(e);
+ m.fireEvent("click", this, m.activeItem);
+ return true;
+ }
+ }
});/*
* Based on:
* Ext JS Library 1.1.1
*/
/**
- * @class Roo.form.TextArea
- * @extends Roo.form.TextField
- * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
- * support for auto-sizing.
- * @constructor
- * Creates a new TextArea
- * @param {Object} config Configuration options
+ * @class Roo.menu.MenuMgr
+ * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
+ * @static
*/
-Roo.form.TextArea = function(config){
- Roo.form.TextArea.superclass.constructor.call(this, config);
- // these are provided exchanges for backwards compat
- // minHeight/maxHeight were replaced by growMin/growMax to be
- // compatible with TextField growing config values
- if(this.minHeight !== undefined){
- this.growMin = this.minHeight;
- }
- if(this.maxHeight !== undefined){
- this.growMax = this.maxHeight;
- }
-};
+Roo.menu.MenuMgr = function(){
+ var menus, active, groups = {}, attached = false, lastShow = new Date();
-Roo.extend(Roo.form.TextArea, Roo.form.TextField, {
- /**
- * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
- */
- growMin : 60,
- /**
- * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
- */
- growMax: 1000,
- /**
- * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
- * in the field (equivalent to setting overflow: hidden, defaults to false)
- */
- preventScrollbars: false,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
- */
+ // private - called when first menu is created
+ function init(){
+ menus = {};
+ active = new Roo.util.MixedCollection();
+ Roo.get(document).addKeyListener(27, function(){
+ if(active.length > 0){
+ hideAll();
+ }
+ });
+ }
- // private
- onRender : function(ct, position){
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:300px;height:60px;",
- autocomplete: "new-password"
- };
- }
- Roo.form.TextArea.superclass.onRender.call(this, ct, position);
- if(this.grow){
- this.textSizeEl = Roo.DomHelper.append(document.body, {
- tag: "pre", cls: "x-form-grow-sizer"
- });
- if(this.preventScrollbars){
- this.el.setStyle("overflow", "hidden");
- }
- this.el.setHeight(this.growMin);
- }
- },
+ // private
+ function hideAll(){
+ if(active && active.length > 0){
+ var c = active.clone();
+ c.each(function(m){
+ m.hide();
+ });
+ }
+ }
- onDestroy : function(){
- if(this.textSizeEl){
- this.textSizeEl.parentNode.removeChild(this.textSizeEl);
- }
- Roo.form.TextArea.superclass.onDestroy.call(this);
- },
+ // private
+ function onHide(m){
+ active.remove(m);
+ if(active.length < 1){
+ Roo.get(document).un("mousedown", onMouseDown);
+ attached = false;
+ }
+ }
- // private
- onKeyUp : function(e){
- if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
- this.autoSize();
- }
- },
+ // private
+ function onShow(m){
+ var last = active.last();
+ lastShow = new Date();
+ active.add(m);
+ if(!attached){
+ Roo.get(document).on("mousedown", onMouseDown);
+ attached = true;
+ }
+ if(m.parentMenu){
+ m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
+ m.parentMenu.activeChild = m;
+ }else if(last && last.isVisible()){
+ m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
+ }
+ }
- /**
- * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
- * This only takes effect if grow = true, and fires the autosize event if the height changes.
- */
- autoSize : function(){
- if(!this.grow || !this.textSizeEl){
- return;
- }
- var el = this.el;
- var v = el.dom.value;
- var ts = this.textSizeEl;
+ // private
+ function onBeforeHide(m){
+ if(m.activeChild){
+ m.activeChild.hide();
+ }
+ if(m.autoHideTimer){
+ clearTimeout(m.autoHideTimer);
+ delete m.autoHideTimer;
+ }
+ }
- ts.innerHTML = '';
- ts.appendChild(document.createTextNode(v));
- v = ts.innerHTML;
+ // private
+ function onBeforeShow(m){
+ var pm = m.parentMenu;
+ if(!pm && !m.allowOtherMenus){
+ hideAll();
+ }else if(pm && pm.activeChild && active != m){
+ pm.activeChild.hide();
+ }
+ }
- Roo.fly(ts).setWidth(this.el.getWidth());
- if(v.length < 1){
- v = "  ";
- }else{
- if(Roo.isIE){
- v = v.replace(/\n/g, '<p> </p>');
- }
- v += " \n ";
- }
- ts.innerHTML = v;
- var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
- if(h != this.lastHeight){
- this.lastHeight = h;
- this.el.setHeight(h);
- this.fireEvent("autosize", this, h);
- }
- }
-});/*
+ // private
+ function onMouseDown(e){
+ if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
+ hideAll();
+ }
+ }
+
+ // private
+ function onBeforeCheck(mi, state){
+ if(state){
+ var g = groups[mi.group];
+ for(var i = 0, l = g.length; i < l; i++){
+ if(g[i] != mi){
+ g[i].setChecked(false);
+ }
+ }
+ }
+ }
+
+ return {
+
+ /**
+ * Hides all menus that are currently visible
+ */
+ hideAll : function(){
+ hideAll();
+ },
+
+ // private
+ register : function(menu){
+ if(!menus){
+ init();
+ }
+ menus[menu.id] = menu;
+ menu.on("beforehide", onBeforeHide);
+ menu.on("hide", onHide);
+ menu.on("beforeshow", onBeforeShow);
+ menu.on("show", onShow);
+ var g = menu.group;
+ if(g && menu.events["checkchange"]){
+ if(!groups[g]){
+ groups[g] = [];
+ }
+ groups[g].push(menu);
+ menu.on("checkchange", onCheck);
+ }
+ },
+
+ /**
+ * Returns a {@link Roo.menu.Menu} object
+ * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
+ * be used to generate and return a new Menu instance.
+ */
+ get : function(menu){
+ if(typeof menu == "string"){ // menu id
+ return menus[menu];
+ }else if(menu.events){ // menu instance
+ return menu;
+ }else if(typeof menu.length == 'number'){ // array of menu items?
+ return new Roo.menu.Menu({items:menu});
+ }else{ // otherwise, must be a config
+ return new Roo.menu.Menu(menu);
+ }
+ },
+
+ // private
+ unregister : function(menu){
+ delete menus[menu.id];
+ menu.un("beforehide", onBeforeHide);
+ menu.un("hide", onHide);
+ menu.un("beforeshow", onBeforeShow);
+ menu.un("show", onShow);
+ var g = menu.group;
+ if(g && menu.events["checkchange"]){
+ groups[g].remove(menu);
+ menu.un("checkchange", onCheck);
+ }
+ },
+
+ // private
+ registerCheckable : function(menuItem){
+ var g = menuItem.group;
+ if(g){
+ if(!groups[g]){
+ groups[g] = [];
+ }
+ groups[g].push(menuItem);
+ menuItem.on("beforecheckchange", onBeforeCheck);
+ }
+ },
+
+ // private
+ unregisterCheckable : function(menuItem){
+ var g = menuItem.group;
+ if(g){
+ groups[g].remove(menuItem);
+ menuItem.un("beforecheckchange", onBeforeCheck);
+ }
+ }
+ };
+}();/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.form.NumberField
- * @extends Roo.form.TextField
- * Numeric text field that provides automatic keystroke filtering and numeric validation.
+ * @class Roo.menu.BaseItem
+ * @extends Roo.Component
+ * @abstract
+ * The base class for all items that render into menus. BaseItem provides default rendering, activated state
+ * management and base configuration options shared by all menu components.
* @constructor
- * Creates a new NumberField
+ * Creates a new BaseItem
* @param {Object} config Configuration options
*/
-Roo.form.NumberField = function(config){
- Roo.form.NumberField.superclass.constructor.call(this, config);
+Roo.menu.BaseItem = function(config){
+ Roo.menu.BaseItem.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event click
+ * Fires when this item is clicked
+ * @param {Roo.menu.BaseItem} this
+ * @param {Roo.EventObject} e
+ */
+ click: true,
+ /**
+ * @event activate
+ * Fires when this item is activated
+ * @param {Roo.menu.BaseItem} this
+ */
+ activate : true,
+ /**
+ * @event deactivate
+ * Fires when this item is deactivated
+ * @param {Roo.menu.BaseItem} this
+ */
+ deactivate : true
+ });
+
+ if(this.handler){
+ this.on("click", this.handler, this.scope, true);
+ }
};
-Roo.extend(Roo.form.NumberField, Roo.form.TextField, {
- /**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
- */
- fieldClass: "x-form-field x-form-num-field",
- /**
- * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
- */
- allowDecimals : true,
- /**
- * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
- */
- decimalSeparator : ".",
- /**
- * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
- */
- decimalPrecision : 2,
+Roo.extend(Roo.menu.BaseItem, Roo.Component, {
/**
- * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
+ * @cfg {Function} handler
+ * A function that will handle the click event of this menu item (defaults to undefined)
*/
- allowNegative : true,
/**
- * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
+ * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
*/
- minValue : Number.NEGATIVE_INFINITY,
- /**
- * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
+ canActivate : false,
+
+ /**
+ * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
*/
- maxValue : Number.MAX_VALUE,
+ hidden: false,
+
/**
- * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
+ * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
*/
- minText : "The minimum value for this field is {0}",
+ activeClass : "x-menu-item-active",
/**
- * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
+ * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
*/
- maxText : "The maximum value for this field is {0}",
+ hideOnClick : true,
/**
- * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
- * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
+ * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
*/
- nanText : "{0} is not a valid number",
+ hideDelay : 100,
// private
- initEvents : function(){
- Roo.form.NumberField.superclass.initEvents.call(this);
- var allowed = "0123456789";
- if(this.allowDecimals){
- allowed += this.decimalSeparator;
- }
- if(this.allowNegative){
- allowed += "-";
- }
- this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
- var keyPress = function(e){
- var k = e.getKey();
- if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
- return;
- }
- var c = e.getCharCode();
- if(allowed.indexOf(String.fromCharCode(c)) === -1){
- e.stopEvent();
- }
- };
- this.el.on("keypress", keyPress, this);
+ ctype: "Roo.menu.BaseItem",
+
+ // private
+ actionMode : "container",
+
+ // private
+ render : function(container, parentMenu){
+ this.parentMenu = parentMenu;
+ Roo.menu.BaseItem.superclass.render.call(this, container);
+ this.container.menuItemId = this.id;
},
// private
- validateValue : function(value){
- if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
- }
- var num = this.parseValue(value);
- if(isNaN(num)){
- this.markInvalid(String.format(this.nanText, value));
- return false;
- }
- if(num < this.minValue){
- this.markInvalid(String.format(this.minText, this.minValue));
- return false;
+ onRender : function(container, position){
+ this.el = Roo.get(this.el);
+ container.dom.appendChild(this.el.dom);
+ },
+
+ // private
+ onClick : function(e){
+ if(!this.disabled && this.fireEvent("click", this, e) !== false
+ && this.parentMenu.fireEvent("itemclick", this, e) !== false){
+ this.handleClick(e);
+ }else{
+ e.stopEvent();
}
- if(num > this.maxValue){
- this.markInvalid(String.format(this.maxText, this.maxValue));
+ },
+
+ // private
+ activate : function(){
+ if(this.disabled){
return false;
}
+ var li = this.container;
+ li.addClass(this.activeClass);
+ this.region = li.getRegion().adjust(2, 2, -2, -2);
+ this.fireEvent("activate", this);
return true;
},
- getValue : function(){
- return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
+ // private
+ deactivate : function(){
+ this.container.removeClass(this.activeClass);
+ this.fireEvent("deactivate", this);
},
// private
- parseValue : function(value){
- value = parseFloat(String(value).replace(this.decimalSeparator, "."));
- return isNaN(value) ? '' : value;
+ shouldDeactivate : function(e){
+ return !this.region || !this.region.contains(e.getPoint());
},
// private
- fixPrecision : function(value){
- var nan = isNaN(value);
- if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
- return nan ? '' : value;
+ handleClick : function(e){
+ if(this.hideOnClick){
+ this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
}
- return parseFloat(value).toFixed(this.decimalPrecision);
- },
-
- setValue : function(v){
- v = this.fixPrecision(v);
- Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
},
// private
- decimalPrecisionFcn : function(v){
- return Math.floor(v);
+ expandMenu : function(autoActivate){
+ // do nothing
},
- beforeBlur : function(){
- var v = this.parseValue(this.getRawValue());
- if(v){
- this.setValue(v);
- }
+ // private
+ hideMenu : function(){
+ // do nothing
}
});/*
* Based on:
*/
/**
- * @class Roo.form.DateField
- * @extends Roo.form.TriggerField
- * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
-* @constructor
-* Create a new DateField
-* @param {Object} config
+ * @class Roo.menu.Adapter
+ * @extends Roo.menu.BaseItem
+ * @abstract
+ * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
+ * It provides basic rendering, activation management and enable/disable logic required to work in menus.
+ * @constructor
+ * Creates a new Adapter
+ * @param {Object} config Configuration options
*/
-Roo.form.DateField = function(config)
-{
- Roo.form.DateField.superclass.constructor.call(this, config);
-
- this.addEvents({
-
- /**
- * @event select
- * Fires when a date is selected
- * @param {Roo.form.DateField} combo This combo box
- * @param {Date} date The date selected
- */
- 'select' : true
-
- });
-
-
- if(typeof this.minValue == "string") {
- this.minValue = this.parseDate(this.minValue);
- }
- if(typeof this.maxValue == "string") {
- this.maxValue = this.parseDate(this.maxValue);
- }
- this.ddMatch = null;
- if(this.disabledDates){
- var dd = this.disabledDates;
- var re = "(?:";
- for(var i = 0; i < dd.length; i++){
- re += dd[i];
- if(i != dd.length-1) {
- re += "|";
- }
+Roo.menu.Adapter = function(component, config){
+ Roo.menu.Adapter.superclass.constructor.call(this, config);
+ this.component = component;
+};
+Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
+ // private
+ canActivate : true,
+
+ // private
+ onRender : function(container, position){
+ this.component.render(container);
+ this.el = this.component.getEl();
+ },
+
+ // private
+ activate : function(){
+ if(this.disabled){
+ return false;
}
- this.ddMatch = new RegExp(re + ")");
+ this.component.focus();
+ this.fireEvent("activate", this);
+ return true;
+ },
+
+ // private
+ deactivate : function(){
+ this.fireEvent("deactivate", this);
+ },
+
+ // private
+ disable : function(){
+ this.component.disable();
+ Roo.menu.Adapter.superclass.disable.call(this);
+ },
+
+ // private
+ enable : function(){
+ this.component.enable();
+ Roo.menu.Adapter.superclass.enable.call(this);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.TextItem
+ * @extends Roo.menu.BaseItem
+ * Adds a static text string to a menu, usually used as either a heading or group separator.
+ * Note: old style constructor with text is still supported.
+ *
+ * @constructor
+ * Creates a new TextItem
+ * @param {Object} cfg Configuration
+ */
+Roo.menu.TextItem = function(cfg){
+ if (typeof(cfg) == 'string') {
+ this.text = cfg;
+ } else {
+ Roo.apply(this,cfg);
}
+
+ Roo.menu.TextItem.superclass.constructor.call(this);
};
-Roo.extend(Roo.form.DateField, Roo.form.TriggerField, {
+Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
/**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+ * @cfg {String} text Text to show on item.
*/
- format : "m/d/y",
+ text : '',
+
/**
- * @cfg {String} altFormats
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
- * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+ * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
*/
- altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
+ hideOnClick : false,
/**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+ * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
*/
- disabledDays : null,
+ itemCls : "x-menu-text",
+
+ // private
+ onRender : function(){
+ var s = document.createElement("span");
+ s.className = this.itemCls;
+ s.innerHTML = this.text;
+ this.el = s;
+ Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.Separator
+ * @extends Roo.menu.BaseItem
+ * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
+ * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Separator = function(config){
+ Roo.menu.Separator.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
/**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+ * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
*/
- disabledDaysText : "Disabled",
+ itemCls : "x-menu-sep",
/**
- * @cfg {Array} disabledDates
- * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
- * expression so they are very powerful. Some examples:
- * <ul>
- * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
- * <li>["03/08", "09/16"] would disable those days for every year</li>
- * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
- * <li>["03/../2006"] would disable every day in March 2006</li>
- * <li>["^03"] would disable every day in every March</li>
- * </ul>
- * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
- * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
*/
- disabledDates : null,
+ hideOnClick : false,
+
+ // private
+ onRender : function(li){
+ var s = document.createElement("span");
+ s.className = this.itemCls;
+ s.innerHTML = " ";
+ this.el = s;
+ li.addClass("x-menu-sep-li");
+ Roo.menu.Separator.superclass.onRender.apply(this, arguments);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.menu.Item
+ * @extends Roo.menu.BaseItem
+ * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
+ * display items. Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
+ * activation and click handling.
+ * @constructor
+ * Creates a new Item
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Item = function(config){
+ Roo.menu.Item.superclass.constructor.call(this, config);
+ if(this.menu){
+ this.menu = Roo.menu.MenuMgr.get(this.menu);
+ }
+};
+Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
/**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
- */
- disabledDatesText : "Disabled",
-
-
- /**
- * @cfg {Date/String} zeroValue
- * if the date is less that this number, then the field is rendered as empty
- * default is 1800
+ * @cfg {Roo.menu.Menu} menu
+ * A Sub menu
*/
- zeroValue : '1800-01-01',
-
-
/**
- * @cfg {Date/String} minValue
- * The minimum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ * @cfg {String} text
+ * The text to show on the menu item.
*/
- minValue : null,
- /**
- * @cfg {Date/String} maxValue
- * The maximum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ text: '',
+ /**
+ * @cfg {String} html to render in menu
+ * The text to show on the menu item (HTML version).
*/
- maxValue : null,
+ html: '',
/**
- * @cfg {String} minText
- * The error text to display when the date in the cell is before minValue (defaults to
- * 'The date in this field must be after {minValue}').
+ * @cfg {String} icon
+ * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
*/
- minText : "The date in this field must be equal to or after {0}",
+ icon: undefined,
/**
- * @cfg {String} maxText
- * The error text to display when the date in the cell is after maxValue (defaults to
- * 'The date in this field must be before {maxValue}').
+ * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
*/
- maxText : "The date in this field must be equal to or before {0}",
+ itemCls : "x-menu-item",
/**
- * @cfg {String} invalidText
- * The error text to display when the date in the field is invalid (defaults to
- * '{value} is not a valid date - it must be in the format {format}').
+ * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
*/
- invalidText : "{0} is not a valid date - it must be in the format {1}",
+ canActivate : true,
/**
- * @cfg {String} triggerClass
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
- * which displays a calendar icon).
+ * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
*/
- triggerClass : 'x-form-date-trigger',
-
+ showDelay: 200,
+ // doc'd in BaseItem
+ hideDelay: 200,
- /**
- * @cfg {Boolean} useIso
- * if enabled, then the date field will use a hidden field to store the
- * real value as iso formated date. default (false)
- */
- useIso : false,
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "10", autocomplete: "off"})
- */
// private
- defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+ ctype: "Roo.menu.Item",
// private
- hiddenField: false,
-
- onRender : function(ct, position)
- {
- Roo.form.DateField.superclass.onRender.call(this, ct, position);
- if (this.useIso) {
- //this.el.dom.removeAttribute('name');
- Roo.log("Changing name?");
- this.el.dom.setAttribute('name', this.name + '____hidden___' );
- this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
- 'before', true);
- this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
- // prevent input submission
- this.hiddenName = this.name;
+ onRender : function(container, position){
+ var el = document.createElement("a");
+ el.hideFocus = true;
+ el.unselectable = "on";
+ el.href = this.href || "#";
+ if(this.hrefTarget){
+ el.target = this.hrefTarget;
}
-
-
+ el.className = this.itemCls + (this.menu ? " x-menu-item-arrow" : "") + (this.cls ? " " + this.cls : "");
+
+ var html = this.html.length ? this.html : String.format('{0}',this.text);
+
+ el.innerHTML = String.format(
+ '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
+ this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
+ this.el = el;
+ Roo.menu.Item.superclass.onRender.call(this, container, position);
},
-
- // private
- validateValue : function(value)
- {
- value = this.formatDate(value);
- if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
- Roo.log('super failed');
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
- }
- var svalue = value;
- value = this.parseDate(value);
- if(!value){
- Roo.log('parse date failed' + svalue);
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
+
+ /**
+ * Sets the text to display in this menu item
+ * @param {String} text The text to display
+ * @param {Boolean} isHTML true to indicate text is pure html.
+ */
+ setText : function(text, isHTML){
+ if (isHTML) {
+ this.html = text;
+ } else {
+ this.text = text;
+ this.html = '';
}
- var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
+ if(this.rendered){
+ var html = this.html.length ? this.html : String.format('{0}',this.text);
+
+ this.el.update(String.format(
+ '<img src="{0}" class="x-menu-item-icon {2}">' + html,
+ this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
+ this.parentMenu.autoWidth();
}
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
+ },
+
+ // private
+ handleClick : function(e){
+ if(!this.href){ // if no link defined, stop the event automatically
+ e.stopEvent();
}
- if(this.disabledDays){
- var day = value.getDay();
- for(var i = 0; i < this.disabledDays.length; i++) {
- if(day === this.disabledDays[i]){
- this.markInvalid(this.disabledDaysText);
- return false;
- }
+ Roo.menu.Item.superclass.handleClick.apply(this, arguments);
+ },
+
+ // private
+ activate : function(autoExpand){
+ if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
+ this.focus();
+ if(autoExpand){
+ this.expandMenu();
}
}
- var fvalue = this.formatDate(value);
- if(this.ddMatch && this.ddMatch.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
- return false;
- }
return true;
},
// private
- // Provides logic to override the default TriggerField.validateBlur which just returns true
- validateBlur : function(){
- return !this.menu || !this.menu.isVisible();
- },
-
- getName: function()
- {
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
-
+ shouldDeactivate : function(e){
+ if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
+ if(this.menu && this.menu.isVisible()){
+ return !this.menu.getEl().getRegion().contains(e.getPoint());
+ }
+ return true;
+ }
+ return false;
},
- /**
- * Returns the current date value of the date field.
- * @return {Date} The date value
- */
- getValue : function(){
-
- return this.hiddenField ?
- this.hiddenField.value :
- this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
+ // private
+ deactivate : function(){
+ Roo.menu.Item.superclass.deactivate.apply(this, arguments);
+ this.hideMenu();
},
- /**
- * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
- * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
- * (the default format used is "m/d/y").
- * <br />Usage:
- * <pre><code>
-//All of these calls set the same date value (May 4, 2006)
-
-//Pass a date object:
-var dt = new Date('5/4/06');
-dateField.setValue(dt);
-
-//Pass a date string (default format):
-dateField.setValue('5/4/06');
-
-//Pass a date string (custom format):
-dateField.format = 'Y-m-d';
-dateField.setValue('2006-5-4');
-</code></pre>
- * @param {String/Date} date The date or valid date string
- */
- setValue : function(date){
- if (this.hiddenField) {
- this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+ // private
+ expandMenu : function(autoActivate){
+ if(!this.disabled && this.menu){
+ clearTimeout(this.hideTimer);
+ delete this.hideTimer;
+ if(!this.menu.isVisible() && !this.showTimer){
+ this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
+ }else if (this.menu.isVisible() && autoActivate){
+ this.menu.tryActivate(0, 1);
+ }
}
- Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
- // make sure the value field is always stored as a date..
- this.value = this.parseDate(date);
-
-
},
// private
- parseDate : function(value){
-
- if (value instanceof Date) {
- if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
- return '';
- }
- return value;
- }
-
-
- if(!value || value instanceof Date){
- return value;
- }
- var v = Date.parseDate(value, this.format);
- if (!v && this.useIso) {
- v = Date.parseDate(value, 'Y-m-d');
- }
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
- }
+ deferExpand : function(autoActivate){
+ delete this.showTimer;
+ this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
+ if(autoActivate){
+ this.menu.tryActivate(0, 1);
}
- if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
- v = '';
- }
- return v;
},
// private
- formatDate : function(date, fmt){
- return (!date || !(date instanceof Date)) ?
- date : date.dateFormat(fmt || this.format);
+ hideMenu : function(){
+ clearTimeout(this.showTimer);
+ delete this.showTimer;
+ if(!this.hideTimer && this.menu && this.menu.isVisible()){
+ this.hideTimer = this.deferHide.defer(this.hideDelay, this);
+ }
},
// private
- menuListeners : {
- select: function(m, d){
-
- this.setValue(d);
- this.fireEvent('select', this, d);
- },
- show : function(){ // retain focus styling
- this.onFocus();
- },
- hide : function(){
- this.focus.defer(10, this);
- var ml = this.menuListeners;
- this.menu.un("select", ml.select, this);
- this.menu.un("show", ml.show, this);
- this.menu.un("hide", ml.hide, this);
- }
- },
+ deferHide : function(){
+ delete this.hideTimer;
+ this.menu.hide();
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.CheckItem
+ * @extends Roo.menu.Item
+ * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
+ * @constructor
+ * Creates a new CheckItem
+ * @param {Object} config Configuration options
+ */
+Roo.menu.CheckItem = function(config){
+ Roo.menu.CheckItem.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event beforecheckchange
+ * Fires before the checked value is set, providing an opportunity to cancel if needed
+ * @param {Roo.menu.CheckItem} this
+ * @param {Boolean} checked The new checked value that will be set
+ */
+ "beforecheckchange" : true,
+ /**
+ * @event checkchange
+ * Fires after the checked value has been set
+ * @param {Roo.menu.CheckItem} this
+ * @param {Boolean} checked The checked value that was set
+ */
+ "checkchange" : true
+ });
+ if(this.checkHandler){
+ this.on('checkchange', this.checkHandler, this.scope);
+ }
+};
+Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
+ /**
+ * @cfg {String} group
+ * All check items with the same group name will automatically be grouped into a single-select
+ * radio button group (defaults to '')
+ */
+ /**
+ * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
+ */
+ itemCls : "x-menu-item x-menu-check-item",
+ /**
+ * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
+ */
+ groupClass : "x-menu-group-item",
+
+ /**
+ * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false). Note that
+ * if this checkbox is part of a radio group (group = true) only the last item in the group that is
+ * initialized with checked = true will be rendered as checked.
+ */
+ checked: false,
// private
- // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
- onTriggerClick : function(){
- if(this.disabled){
- return;
+ ctype: "Roo.menu.CheckItem",
+
+ // private
+ onRender : function(c){
+ Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
+ if(this.group){
+ this.el.addClass(this.groupClass);
}
- if(this.menu == null){
- this.menu = new Roo.menu.DateMenu();
+ Roo.menu.MenuMgr.registerCheckable(this);
+ if(this.checked){
+ this.checked = false;
+ this.setChecked(true, true);
}
- Roo.apply(this.menu.picker, {
- showClear: this.allowBlank,
- minDate : this.minValue,
- maxDate : this.maxValue,
- disabledDatesRE : this.ddMatch,
- disabledDatesText : this.disabledDatesText,
- disabledDays : this.disabledDays,
- disabledDaysText : this.disabledDaysText,
- format : this.useIso ? 'Y-m-d' : this.format,
- minText : String.format(this.minText, this.formatDate(this.minValue)),
- maxText : String.format(this.maxText, this.formatDate(this.maxValue))
- });
- this.menu.on(Roo.apply({}, this.menuListeners, {
- scope:this
- }));
- this.menu.picker.setValue(this.getValue() || new Date());
- this.menu.show(this.el, "tl-bl?");
},
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(v);
+ // private
+ destroy : function(){
+ if(this.rendered){
+ Roo.menu.MenuMgr.unregisterCheckable(this);
}
+ Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
},
- /*@
- * overide
- *
+ /**
+ * Set the checked state of this item
+ * @param {Boolean} checked The new checked value
+ * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
*/
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
-
- if(typeof(this.startValue) === 'undefined'){
- return false;
+ setChecked : function(state, suppressEvent){
+ if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
+ if(this.container){
+ this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
+ }
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent("checkchange", this, state);
+ }
}
-
- return String(this.getValue()) !== String(this.startValue);
-
},
- // @overide
- cleanLeadingSpace : function(e)
- {
- return;
+
+ // private
+ handleClick : function(e){
+ if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
+ this.setChecked(!this.checked);
+ }
+ Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
}
-
});/*
* Based on:
* Ext JS Library 1.1.1
*/
/**
- * @class Roo.form.MonthField
- * @extends Roo.form.TriggerField
- * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
-* @constructor
-* Create a new MonthField
-* @param {Object} config
+ * @class Roo.menu.DateItem
+ * @extends Roo.menu.Adapter
+ * A menu item that wraps the {@link Roo.DatPicker} component.
+ * @constructor
+ * Creates a new DateItem
+ * @param {Object} config Configuration options
*/
-Roo.form.MonthField = function(config){
-
- Roo.form.MonthField.superclass.constructor.call(this, config);
+Roo.menu.DateItem = function(config){
+ Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
+ /** The Roo.DatePicker object @type Roo.DatePicker */
+ this.picker = this.component;
+ this.addEvents({select: true});
- this.addEvents({
-
- /**
- * @event select
- * Fires when a date is selected
- * @param {Roo.form.MonthFieeld} combo This combo box
- * @param {Date} date The date selected
- */
- 'select' : true
-
+ this.picker.on("render", function(picker){
+ picker.getEl().swallowEvent("click");
+ picker.container.addClass("x-menu-date-item");
});
-
-
- if(typeof this.minValue == "string") {
- this.minValue = this.parseDate(this.minValue);
+
+ this.picker.on("select", this.onSelect, this);
+};
+
+Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
+ // private
+ onSelect : function(picker, date){
+ this.fireEvent("select", this, date, picker);
+ Roo.menu.DateItem.superclass.handleClick.call(this);
}
- if(typeof this.maxValue == "string") {
- this.maxValue = this.parseDate(this.maxValue);
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.menu.ColorItem
+ * @extends Roo.menu.Adapter
+ * A menu item that wraps the {@link Roo.ColorPalette} component.
+ * @constructor
+ * Creates a new ColorItem
+ * @param {Object} config Configuration options
+ */
+Roo.menu.ColorItem = function(config){
+ Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
+ /** The Roo.ColorPalette object @type Roo.ColorPalette */
+ this.palette = this.component;
+ this.relayEvents(this.palette, ["select"]);
+ if(this.selectHandler){
+ this.on('select', this.selectHandler, this.scope);
}
- this.ddMatch = null;
- if(this.disabledDates){
- var dd = this.disabledDates;
- var re = "(?:";
- for(var i = 0; i < dd.length; i++){
- re += dd[i];
- if(i != dd.length-1) {
- re += "|";
- }
+};
+Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/**
+ * @class Roo.menu.DateMenu
+ * @extends Roo.menu.Menu
+ * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
+ * @constructor
+ * Creates a new DateMenu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.DateMenu = function(config){
+ Roo.menu.DateMenu.superclass.constructor.call(this, config);
+ this.plain = true;
+ var di = new Roo.menu.DateItem(config);
+ this.add(di);
+ /**
+ * The {@link Roo.DatePicker} instance for this DateMenu
+ * @type DatePicker
+ */
+ this.picker = di.picker;
+ /**
+ * @event select
+ * @param {DatePicker} picker
+ * @param {Date} date
+ */
+ this.relayEvents(di, ["select"]);
+ this.on('beforeshow', function(){
+ if(this.picker){
+ this.picker.hideMonthPicker(false);
}
- this.ddMatch = new RegExp(re + ")");
- }
+ }, this);
};
+Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
+ cls:'x-date-menu'
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
-Roo.extend(Roo.form.MonthField, Roo.form.TriggerField, {
+/**
+ * @class Roo.menu.ColorMenu
+ * @extends Roo.menu.Menu
+ * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
+ * @constructor
+ * Creates a new ColorMenu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.ColorMenu = function(config){
+ Roo.menu.ColorMenu.superclass.constructor.call(this, config);
+ this.plain = true;
+ var ci = new Roo.menu.ColorItem(config);
+ this.add(ci);
/**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+ * The {@link Roo.ColorPalette} instance for this ColorMenu
+ * @type ColorPalette
*/
- format : "M Y",
+ this.palette = ci.palette;
/**
- * @cfg {String} altFormats
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
- * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+ * @event select
+ * @param {ColorPalette} palette
+ * @param {String} color
*/
- altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
+ this.relayEvents(ci, ["select"]);
+};
+Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.TextItem
+ * @extends Roo.BoxComponent
+ * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
+ * @constructor
+ * Creates a new TextItem
+ * @param {Object} config Configuration options
+ */
+Roo.form.TextItem = function(config){
+ Roo.form.TextItem.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.TextItem, Roo.BoxComponent, {
+
/**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+ * @cfg {String} tag the tag for this item (default div)
*/
- disabledDays : [0,1,2,3,4,5,6],
+ tag : 'div',
/**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+ * @cfg {String} html the content for this item
*/
- disabledDaysText : "Disabled",
+ html : '',
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ id: this.id,
+ tag: this.tag,
+ html: this.html,
+ cls: 'x-form-item'
+ };
+
+ return cfg;
+
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.form.TextItem.superclass.onRender.call(this, ct, position);
+
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ if(!cfg.name){
+ cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
+ }
+ if (!cfg.name.length) {
+ delete cfg.name;
+ }
+ this.el = ct.createChild(cfg, position);
+ }
+ },
+ /*
+ * setHTML
+ * @param {String} html update the Contents of the element.
+ */
+ setHTML : function(html)
+ {
+ this.fieldEl.dom.innerHTML = html;
+ }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Field
+ * @extends Roo.BoxComponent
+ * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
+ * @constructor
+ * Creates a new Field
+ * @param {Object} config Configuration options
+ */
+Roo.form.Field = function(config){
+ Roo.form.Field.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Field, Roo.BoxComponent, {
/**
- * @cfg {Array} disabledDates
- * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
- * expression so they are very powerful. Some examples:
- * <ul>
- * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
- * <li>["03/08", "09/16"] would disable those days for every year</li>
- * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
- * <li>["03/../2006"] would disable every day in March 2006</li>
- * <li>["^03"] would disable every day in every March</li>
- * </ul>
- * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
- * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ * @cfg {String} fieldLabel Label to use when rendering a form.
*/
- disabledDates : null,
+ /**
+ * @cfg {String} labelSeparator the ':' after a field label (default :) = set it to empty string to hide the field label.
+ */
+ /**
+ * @cfg {String} qtip Mouse over tip
+ */
+
/**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+ * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
*/
- disabledDatesText : "Disabled",
+ invalidClass : "x-form-invalid",
/**
- * @cfg {Date/String} minValue
- * The minimum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
*/
- minValue : null,
+ invalidText : "The value in this field is invalid",
/**
- * @cfg {Date/String} maxValue
- * The maximum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
+ * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
*/
- maxValue : null,
+ focusClass : "x-form-focus",
/**
- * @cfg {String} minText
- * The error text to display when the date in the cell is before minValue (defaults to
- * 'The date in this field must be after {minValue}').
+ * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
+ automatic validation (defaults to "keyup").
*/
- minText : "The date in this field must be equal to or after {0}",
+ validationEvent : "keyup",
/**
- * @cfg {String} maxTextf
- * The error text to display when the date in the cell is after maxValue (defaults to
- * 'The date in this field must be before {maxValue}').
+ * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
*/
- maxText : "The date in this field must be equal to or before {0}",
+ validateOnBlur : true,
/**
- * @cfg {String} invalidText
- * The error text to display when the date in the field is invalid (defaults to
- * '{value} is not a valid date - it must be in the format {format}').
+ * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
*/
- invalidText : "{0} is not a valid date - it must be in the format {1}",
+ validationDelay : 250,
/**
- * @cfg {String} triggerClass
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
- * which displays a calendar icon).
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "20", autocomplete: "off"})
*/
- triggerClass : 'x-form-date-trigger',
-
-
+ defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
/**
- * @cfg {Boolean} useIso
- * if enabled, then the date field will use a hidden field to store the
- * real value as iso formated date. default (true)
- */
- useIso : true,
+ * @cfg {String} fieldClass The default CSS class for the field (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: "text", size: "10", autocomplete: "off"})
- */
- // private
- defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
+ * @cfg {String} msgTarget The location where error text should display. Should be one of the following values (defaults to 'qtip'):
+ *<pre>
+Value Description
+----------- ----------------------------------------------------------------------
+qtip Display a quick tip when the user hovers over the field
+title Display a default browser title attribute popup
+under Add a block div beneath the field containing the error text
+side Add an error icon to the right of the field with a popup on hover
+[element id] Add the error text directly to the innerHTML of the specified element
+</pre>
+ */
+ msgTarget : 'qtip',
+ /**
+ * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
+ */
+ msgFx : 'normal',
+
+ /**
+ * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
+ */
+ readOnly : false,
+
+ /**
+ * @cfg {Boolean} disabled True to disable the field (defaults to false).
+ */
+ disabled : false,
+
+ /**
+ * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
+ */
+ inputType : undefined,
+ /**
+ * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
+ */
+ tabIndex : undefined,
+
// private
- hiddenField: false,
-
- hideMonthPicker : false,
-
- onRender : function(ct, position)
- {
- Roo.form.MonthField.superclass.onRender.call(this, ct, position);
- if (this.useIso) {
- this.el.dom.removeAttribute('name');
- this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
- 'before', true);
- this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
- // prevent input submission
- this.hiddenName = this.name;
- }
-
-
+ isFormField : true,
+
+ // private
+ hasFocus : false,
+ /**
+ * @property {Roo.Element} fieldEl
+ * Element Containing the rendered Field (with label etc.)
+ */
+ /**
+ * @cfg {Mixed} value A value to initialize this field with.
+ */
+ value : undefined,
+
+ /**
+ * @cfg {String} name The field's HTML name attribute.
+ */
+ /**
+ * @cfg {String} cls A CSS class to apply to the field's underlying element.
+ */
+ // private
+ loadedValue : false,
+
+
+ // private ??
+ initComponent : function(){
+ Roo.form.Field.superclass.initComponent.call(this);
+ this.addEvents({
+ /**
+ * @event focus
+ * Fires when this field receives input focus.
+ * @param {Roo.form.Field} this
+ */
+ focus : true,
+ /**
+ * @event blur
+ * Fires when this field loses input focus.
+ * @param {Roo.form.Field} this
+ */
+ blur : true,
+ /**
+ * @event specialkey
+ * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
+ * {@link Roo.EventObject#getKey} to determine which key was pressed.
+ * @param {Roo.form.Field} this
+ * @param {Roo.EventObject} e The event object
+ */
+ specialkey : true,
+ /**
+ * @event change
+ * Fires just before the field blurs if the field value has changed.
+ * @param {Roo.form.Field} this
+ * @param {Mixed} newValue The new value
+ * @param {Mixed} oldValue The original value
+ */
+ change : true,
+ /**
+ * @event invalid
+ * Fires after the field has been marked as invalid.
+ * @param {Roo.form.Field} this
+ * @param {String} msg The validation message
+ */
+ invalid : true,
+ /**
+ * @event valid
+ * Fires after the field has been validated with no errors.
+ * @param {Roo.form.Field} this
+ */
+ valid : true,
+ /**
+ * @event keyup
+ * Fires after the key up
+ * @param {Roo.form.Field} this
+ * @param {Roo.EventObject} e The event Object
+ */
+ keyup : true
+ });
},
-
+
+ /**
+ * Returns the name attribute of the field if available
+ * @return {String} name The field name
+ */
+ getName: function(){
+ return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+ },
+
// private
- validateValue : function(value)
- {
- value = this.formatDate(value);
- if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
- return false;
+ onRender : function(ct, position){
+ Roo.form.Field.superclass.onRender.call(this, ct, position);
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ if(!cfg.name){
+ cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
+ }
+ if (!cfg.name.length) {
+ delete cfg.name;
+ }
+ if(this.inputType){
+ cfg.type = this.inputType;
+ }
+ this.el = ct.createChild(cfg, position);
}
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
+ var type = this.el.dom.type;
+ if(type){
+ if(type == 'password'){
+ type = 'text';
+ }
+ this.el.addClass('x-form-'+type);
}
- var svalue = value;
- value = this.parseDate(value);
- if(!value){
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
+ if(this.readOnly){
+ this.el.dom.readOnly = true;
}
- var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
+ if(this.tabIndex !== undefined){
+ this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
+
+ this.el.addClass([this.fieldClass, this.cls]);
+ this.initValue();
+ },
+
+ /**
+ * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
+ * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
+ * @return {Roo.form.Field} this
+ */
+ applyTo : function(target){
+ this.allowDomMove = false;
+ this.el = Roo.get(target);
+ this.render(this.el.dom.parentNode);
+ return this;
+ },
+
+ // private
+ initValue : function(){
+ if(this.value !== undefined){
+ this.setValue(this.value);
+ }else if(this.el.dom.value.length > 0){
+ this.setValue(this.el.dom.value);
}
- /*if(this.disabledDays){
- var day = value.getDay();
- for(var i = 0; i < this.disabledDays.length; i++) {
- if(day === this.disabledDays[i]){
- this.markInvalid(this.disabledDaysText);
- return false;
- }
- }
+ },
+
+ /**
+ * Returns true if this field has been changed since it was originally loaded and is not disabled.
+ * DEPRICATED - it never worked well - use hasChanged/resetHasChanged.
+ */
+ isDirty : function() {
+ if(this.disabled) {
+ return false;
}
- */
- var fvalue = this.formatDate(value);
- /*if(this.ddMatch && this.ddMatch.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
+ return String(this.getValue()) !== String(this.originalValue);
+ },
+
+ /**
+ * stores the current value in loadedValue
+ */
+ resetHasChanged : function()
+ {
+ this.loadedValue = String(this.getValue());
+ },
+ /**
+ * checks the current value against the 'loaded' value.
+ * Note - will return false if 'resetHasChanged' has not been called first.
+ */
+ hasChanged : function()
+ {
+ if(this.disabled || this.readOnly) {
return false;
}
- */
- return true;
+ return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
+ },
+
+
+
+ // private
+ afterRender : function(){
+ Roo.form.Field.superclass.afterRender.call(this);
+ this.initEvents();
},
// private
- // Provides logic to override the default TriggerField.validateBlur which just returns true
- validateBlur : function(){
- return !this.menu || !this.menu.isVisible();
+ fireKey : function(e){
+ //Roo.log('field ' + e.getKey());
+ if(e.isNavKeyPress()){
+ this.fireEvent("specialkey", this, e);
+ }
},
/**
- * Returns the current date value of the date field.
- * @return {Date} The date value
+ * Resets the current field value to the originally loaded value and clears any validation messages
*/
- getValue : function(){
-
-
-
- return this.hiddenField ?
- this.hiddenField.value :
- this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
+ reset : function(){
+ this.setValue(this.resetValue);
+ this.originalValue = this.getValue();
+ this.clearInvalid();
},
- /**
- * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
- * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
- * (the default format used is "m/d/y").
- * <br />Usage:
- * <pre><code>
-//All of these calls set the same date value (May 4, 2006)
-
-//Pass a date object:
-var dt = new Date('5/4/06');
-monthField.setValue(dt);
+ // private
+ initEvents : function(){
+ // safari killled keypress - so keydown is now used..
+ this.el.on("keydown" , this.fireKey, this);
+ this.el.on("focus", this.onFocus, this);
+ this.el.on("blur", this.onBlur, this);
+ this.el.relayEvent('keyup', this);
-//Pass a date string (default format):
-monthField.setValue('5/4/06');
+ // reference to original value for reset
+ this.originalValue = this.getValue();
+ this.resetValue = this.getValue();
+ },
-//Pass a date string (custom format):
-monthField.format = 'Y-m-d';
-monthField.setValue('2006-5-4');
-</code></pre>
- * @param {String/Date} date The date or valid date string
- */
- setValue : function(date){
- Roo.log('month setValue' + date);
- // can only be first of month..
-
- var val = this.parseDate(date);
-
- if (this.hiddenField) {
- this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+ // private
+ onFocus : function(){
+ if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+ this.el.addClass(this.focusClass);
+ }
+ if(!this.hasFocus){
+ this.hasFocus = true;
+ this.startValue = this.getValue();
+ this.fireEvent("focus", this);
}
- Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
- this.value = this.parseDate(date);
},
+ beforeBlur : Roo.emptyFn,
+
// private
- parseDate : function(value){
- if(!value || value instanceof Date){
- value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
- return value;
+ onBlur : function(){
+ this.beforeBlur();
+ if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+ this.el.removeClass(this.focusClass);
}
- var v = Date.parseDate(value, this.format);
- if (!v && this.useIso) {
- v = Date.parseDate(value, 'Y-m-d');
+ this.hasFocus = false;
+ if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
+ this.validate();
}
- if (v) {
- //
- v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
+ var v = this.getValue();
+ if(String(v) !== String(this.startValue)){
+ this.fireEvent('change', this, v, this.startValue);
}
-
-
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
- }
+ this.fireEvent("blur", this);
+ },
+
+ /**
+ * Returns whether or not the field value is currently valid
+ * @param {Boolean} preventMark True to disable marking the field invalid
+ * @return {Boolean} True if the value is valid, else false
+ */
+ isValid : function(preventMark){
+ if(this.disabled){
+ return true;
}
+ var restore = this.preventMark;
+ this.preventMark = preventMark === true;
+ var v = this.validateValue(this.processValue(this.getRawValue()));
+ this.preventMark = restore;
return v;
},
- // private
- formatDate : function(date, fmt){
- return (!date || !(date instanceof Date)) ?
- date : date.dateFormat(fmt || this.format);
+ /**
+ * Validates the field value
+ * @return {Boolean} True if the value is valid, else false
+ */
+ validate : function(){
+ if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
+ this.clearInvalid();
+ return true;
+ }
+ return false;
},
- // private
- menuListeners : {
- select: function(m, d){
- this.setValue(d);
- this.fireEvent('select', this, d);
- },
- show : function(){ // retain focus styling
- this.onFocus();
- },
- hide : function(){
- this.focus.defer(10, this);
- var ml = this.menuListeners;
- this.menu.un("select", ml.select, this);
- this.menu.un("show", ml.show, this);
- this.menu.un("hide", ml.hide, this);
- }
+ processValue : function(value){
+ return value;
},
+
// private
- // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
- onTriggerClick : function(){
- if(this.disabled){
+ // Subclasses should provide the validation implementation by overriding this
+ validateValue : function(value){
+ return true;
+ },
+
+ /**
+ * Mark this field as invalid
+ * @param {String} msg The validation message
+ */
+ markInvalid : function(msg){
+ if(!this.rendered || this.preventMark){ // not rendered
return;
}
- if(this.menu == null){
- this.menu = new Roo.menu.DateMenu();
-
- }
-
- Roo.apply(this.menu.picker, {
-
- showClear: this.allowBlank,
- minDate : this.minValue,
- maxDate : this.maxValue,
- disabledDatesRE : this.ddMatch,
- disabledDatesText : this.disabledDatesText,
-
- format : this.useIso ? 'Y-m-d' : this.format,
- minText : String.format(this.minText, this.formatDate(this.minValue)),
- maxText : String.format(this.maxText, this.formatDate(this.maxValue))
-
- });
- this.menu.on(Roo.apply({}, this.menuListeners, {
- scope:this
- }));
-
-
- var m = this.menu;
- var p = m.picker;
- // hide month picker get's called when we called by 'before hide';
+ var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
- var ignorehide = true;
- p.hideMonthPicker = function(disableAnim){
- if (ignorehide) {
- return;
- }
- if(this.monthPicker){
- Roo.log("hideMonthPicker called");
- if(disableAnim === true){
- this.monthPicker.hide();
- }else{
- this.monthPicker.slideOut('t', {duration:.2});
- p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
- p.fireEvent("select", this, this.value);
- m.hide();
+ obj.el.addClass(this.invalidClass);
+ msg = msg || this.invalidText;
+ switch(this.msgTarget){
+ case 'qtip':
+ obj.el.dom.qtip = msg;
+ obj.el.dom.qclass = 'x-form-invalid-tip';
+ if(Roo.QuickTips){ // fix for floating editors interacting with DND
+ Roo.QuickTips.enable();
}
- }
+ break;
+ case 'title':
+ this.el.dom.title = msg;
+ break;
+ case 'under':
+ if(!this.errorEl){
+ var elp = this.el.findParent('.x-form-element', 5, true);
+ this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
+ this.errorEl.setWidth(elp.getWidth(true)-20);
+ }
+ this.errorEl.update(msg);
+ Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
+ break;
+ case 'side':
+ if(!this.errorIcon){
+ var elp = this.el.findParent('.x-form-element', 5, true);
+ this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+ }
+ this.alignErrorIcon();
+ this.errorIcon.dom.qtip = msg;
+ this.errorIcon.dom.qclass = 'x-form-invalid-tip';
+ this.errorIcon.show();
+ this.on('resize', this.alignErrorIcon, this);
+ break;
+ default:
+ var t = Roo.getDom(this.msgTarget);
+ t.innerHTML = msg;
+ t.style.display = this.msgDisplay;
+ break;
}
+ this.fireEvent('invalid', this, msg);
+ },
+
+ // private
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
+ },
+
+ /**
+ * Clear any invalid styles/messages for this field
+ */
+ clearInvalid : function(){
+ if(!this.rendered || this.preventMark){ // not rendered
+ return;
+ }
+ var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
- Roo.log('picker set value');
- Roo.log(this.getValue());
- p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
- m.show(this.el, 'tl-bl?');
- ignorehide = false;
- // this will trigger hideMonthPicker..
-
-
- // hidden the day picker
- Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
-
-
-
-
-
- p.showMonthPicker.defer(100, p);
-
+ obj.el.removeClass(this.invalidClass);
+ switch(this.msgTarget){
+ case 'qtip':
+ obj.el.dom.qtip = '';
+ break;
+ case 'title':
+ this.el.dom.title = '';
+ break;
+ case 'under':
+ if(this.errorEl){
+ Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
+ }
+ break;
+ case 'side':
+ if(this.errorIcon){
+ this.errorIcon.dom.qtip = '';
+ this.errorIcon.hide();
+ this.un('resize', this.alignErrorIcon, this);
+ }
+ break;
+ default:
+ var t = Roo.getDom(this.msgTarget);
+ t.innerHTML = '';
+ t.style.display = 'none';
+ break;
+ }
+ this.fireEvent('valid', this);
+ },
+
+ /**
+ * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
+ * @return {Mixed} value The field value
+ */
+ getRawValue : function(){
+ var v = this.el.getValue();
-
+ return v;
},
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(v);
- }
- }
+ /**
+ * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
+ * @return {Mixed} value The field value
+ */
+ getValue : function(){
+ var v = this.el.getValue();
+
+ return v;
+ },
- /** @cfg {Boolean} grow @hide */
- /** @cfg {Number} growMin @hide */
- /** @cfg {Number} growMax @hide */
/**
- * @hide
- * @method autoSize
+ * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}.
+ * @param {Mixed} value The value to set
*/
-});/*
+ setRawValue : function(v){
+ return this.el.dom.value = (v === null || v === undefined ? '' : v);
+ },
+
+ /**
+ * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
+ * @param {Mixed} value The value to set
+ */
+ setValue : function(v){
+ this.value = v;
+ if(this.rendered){
+ this.el.dom.value = (v === null || v === undefined ? '' : v);
+ this.validate();
+ }
+ },
+
+ adjustSize : function(w, h){
+ var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
+ s.width = this.adjustWidth(this.el.dom.tagName, s.width);
+ return s;
+ },
+
+ adjustWidth : function(tag, w){
+ tag = tag.toLowerCase();
+ if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
+ if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
+ if(tag == 'input'){
+ return w + 2;
+ }
+ if(tag == 'textarea'){
+ return w-2;
+ }
+ }else if(Roo.isOpera){
+ if(tag == 'input'){
+ return w + 2;
+ }
+ if(tag == 'textarea'){
+ return w-2;
+ }
+ }
+ }
+ return w;
+ }
+});
+
+
+// anything other than normal should be considered experimental
+Roo.form.Field.msgFx = {
+ normal : {
+ show: function(msgEl, f){
+ msgEl.setDisplayed('block');
+ },
+
+ hide : function(msgEl, f){
+ msgEl.setDisplayed(false).update('');
+ }
+ },
+
+ slide : {
+ show: function(msgEl, f){
+ msgEl.slideIn('t', {stopFx:true});
+ },
+
+ hide : function(msgEl, f){
+ msgEl.slideOut('t', {stopFx:true,useDisplay:true});
+ }
+ },
+
+ slideRight : {
+ show: function(msgEl, f){
+ msgEl.fixDisplay();
+ msgEl.alignTo(f.el, 'tl-tr');
+ msgEl.slideIn('l', {stopFx:true});
+ },
+
+ hide : function(msgEl, f){
+ msgEl.slideOut('l', {stopFx:true,useDisplay:true});
+ }
+ }
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
- * @class Roo.form.ComboBox
- * @extends Roo.form.TriggerField
- * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @class Roo.form.TextField
+ * @extends Roo.form.Field
+ * Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base
+ * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
* @constructor
- * Create a new ComboBox.
+ * Creates a new TextField
* @param {Object} config Configuration options
*/
-Roo.form.ComboBox = function(config){
- Roo.form.ComboBox.superclass.constructor.call(this, config);
+Roo.form.TextField = function(config){
+ Roo.form.TextField.superclass.constructor.call(this, config);
this.addEvents({
/**
- * @event expand
- * Fires when the dropdown list is expanded
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'expand' : true,
- /**
- * @event collapse
- * Fires when the dropdown list is collapsed
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'collapse' : true,
- /**
- * @event beforeselect
- * Fires before a list item is selected. Return false to cancel the selection.
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record} record The data record returned from the underlying store
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'beforeselect' : true,
- /**
- * @event select
- * Fires when a list item is selected
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'select' : true,
- /**
- * @event beforequery
- * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
- * The event object passed has these properties:
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {String} query The query
- * @param {Boolean} forceAll true to force "all" query
- * @param {Boolean} cancel true to cancel the query
- * @param {Object} e The query event object
- */
- 'beforequery': true,
- /**
- * @event add
- * Fires when the 'add' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'add' : true,
- /**
- * @event edit
- * Fires when the 'edit' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+ * @event autosize
+ * Fires when the autosize function is triggered. The field may or may not have actually changed size
+ * according to the default logic, but this event provides a hook for the developer to apply additional
+ * logic at runtime to resize the field if needed.
+ * @param {Roo.form.Field} this This text field
+ * @param {Number} width The new field width
*/
- 'edit' : true
-
-
+ autosize : true
});
- if(this.transform){
- this.allowDomMove = false;
- var s = Roo.getDom(this.transform);
- if(!this.hiddenName){
- this.hiddenName = s.name;
- }
- if(!this.store){
- this.mode = 'local';
- var d = [], opts = s.options;
- for(var i = 0, len = opts.length;i < len; i++){
- var o = opts[i];
- var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
- if(o.selected) {
- this.value = value;
- }
- d.push([value, o.text]);
- }
- this.store = new Roo.data.SimpleStore({
- 'id': 0,
- fields: ['value', 'text'],
- data : d
- });
- this.valueField = 'value';
- this.displayField = 'text';
- }
- s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
- if(!this.lazyRender){
- this.target = true;
- this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
- s.parentNode.removeChild(s); // remove it
- this.render(this.el.parentNode);
- }else{
- s.parentNode.removeChild(s); // remove it
- }
-
- }
- if (this.store) {
- this.store = Roo.factory(this.store, Roo.data);
- }
-
- this.selectedIndex = -1;
- if(this.mode == 'local'){
- if(config.queryDelay === undefined){
- this.queryDelay = 10;
- }
- if(config.minChars === undefined){
- this.minChars = 0;
- }
- }
};
-Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
- /**
- * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
- */
- /**
- * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
- * rendering into an Roo.Editor, defaults to false)
- */
- /**
- * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
- * {tag: "input", type: "text", size: "24", autocomplete: "off"})
- */
- /**
- * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
- */
- /**
- * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
- * the dropdown list (defaults to undefined, with no header element)
- */
-
- /**
- * @cfg {String/Roo.Template} tpl The template to use to render the output
- */
-
- // private
- defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
- /**
- * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
- */
- listWidth: undefined,
- /**
- * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'text' if mode = 'local')
- */
- displayField: undefined,
- /**
- * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'value' if mode = 'local').
- * Note: use of a valueField requires the user make a selection
- * in order for a value to be mapped.
- */
- valueField: undefined,
-
-
- /**
- * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
- * field's data value (defaults to the underlying DOM element's name)
- */
- hiddenName: undefined,
- /**
- * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
- */
- listClass: '',
- /**
- * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
- */
- selectedClass: 'x-combo-selected',
- /**
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
- * which displays a downward arrow icon).
- */
- triggerClass : 'x-form-arrow-trigger',
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- */
- shadow:'sides',
- /**
- * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
- * anchor positions (defaults to 'tl-bl')
- */
- listAlign: 'tl-bl?',
- /**
- * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
- */
- maxHeight: 300,
- /**
- * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
- * query specified by the allQuery config option (defaults to 'query')
- */
- triggerAction: 'query',
- /**
- * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
- * (defaults to 4, does not apply if editable = false)
- */
- minChars : 4,
+Roo.extend(Roo.form.TextField, Roo.form.Field, {
/**
- * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
- * delay (typeAheadDelay) if it matches a known value (defaults to false)
+ * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
*/
- typeAhead: false,
+ grow : false,
/**
- * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
- * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+ * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
*/
- queryDelay: 500,
+ growMin : 30,
/**
- * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
- * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
+ * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
*/
- pageSize: 0,
+ growMax : 800,
/**
- * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
- * when editable = true (defaults to false)
+ * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
*/
- selectOnFocus:false,
+ vtype : null,
/**
- * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+ * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
*/
- queryParam: 'query',
+ maskRe : null,
/**
- * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
- * when mode = 'remote' (defaults to 'Loading...')
+ * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
*/
- loadingText: 'Loading...',
+ disableKeyFilter : false,
/**
- * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+ * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
*/
- resizable: false,
+ allowBlank : true,
/**
- * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+ * @cfg {Number} minLength Minimum input field length required (defaults to 0)
*/
- handleHeight : 8,
+ minLength : 0,
/**
- * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
- * traditional select (defaults to true)
+ * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
*/
- editable: true,
+ maxLength : Number.MAX_VALUE,
/**
- * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+ * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
*/
- allQuery: '',
+ minLengthText : "The minimum length for this field is {0}",
/**
- * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+ * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
*/
- mode: 'remote',
+ maxLengthText : "The maximum length for this field is {0}",
/**
- * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
- * listWidth has a higher value)
+ * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
*/
- minListWidth : 70,
+ selectOnFocus : false,
/**
- * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
- * allow the user to set arbitrary text into the field (defaults to false)
- */
- forceSelection:false,
+ * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space
+ */
+ allowLeadingSpace : false,
/**
- * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
- * if typeAhead = true (defaults to 250)
+ * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
*/
- typeAheadDelay : 250,
+ blankText : "This field is required",
/**
- * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
- * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+ * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
+ * If available, this function will be called only after the basic validators all return true, and will be passed the
+ * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
*/
- valueNotFoundText : undefined,
+ validator : null,
/**
- * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+ * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
+ * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
+ * current field value. If the test fails, the field will be marked invalid using {@link #regexText}.
*/
- blockFocus : false,
-
+ regex : null,
/**
- * @cfg {Boolean} disableClear Disable showing of clear button.
+ * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
*/
- disableClear : false,
+ regexText : "",
/**
- * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
*/
- alwaysQuery : false,
-
- //private
- addicon : false,
- editicon: false,
-
- // element that contains real text value.. (when hidden is used..)
-
+ emptyText : null,
+
+
// private
- onRender : function(ct, position)
+ initEvents : function()
{
- Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
+ if (this.emptyText) {
+ this.el.attr('placeholder', this.emptyText);
+ }
- if(this.hiddenName){
- this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
- 'before', true);
- this.hiddenField.value =
- this.hiddenValue !== undefined ? this.hiddenValue :
- this.value !== undefined ? this.value : '';
-
- // prevent input submission
- this.el.dom.removeAttribute('name');
-
-
+ Roo.form.TextField.superclass.initEvents.call(this);
+ if(this.validationEvent == 'keyup'){
+ this.validationTask = new Roo.util.DelayedTask(this.validate, this);
+ this.el.on('keyup', this.filterValidation, this);
+ }
+ else if(this.validationEvent !== false){
+ this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
+ }
+
+ if(this.selectOnFocus){
+ this.on("focus", this.preFocus, this);
}
+ if (!this.allowLeadingSpace) {
+ this.on('blur', this.cleanLeadingSpace, this);
+ }
- if(Roo.isGecko){
- this.el.dom.setAttribute('autocomplete', 'off');
+ if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
+ this.el.on("keypress", this.filterKeys, this);
}
-
- var cls = 'x-combo-list';
-
- this.list = new Roo.Layer({
- shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
- });
-
- var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.list.swallowEvent('mousewheel');
- this.assetHeight = 0;
-
- if(this.title){
- this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
- this.assetHeight += this.header.getHeight();
- }
-
- this.innerList = this.list.createChild({cls:cls+'-inner'});
- this.innerList.on('mouseover', this.onViewOver, this);
- this.innerList.on('mousemove', this.onViewMove, this);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
-
- if(this.allowBlank && !this.pageSize && !this.disableClear){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.Toolbar(this.footer);
-
- }
- if(this.pageSize){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
- {pageSize: this.pageSize});
-
- }
-
- if (this.pageTb && this.allowBlank && !this.disableClear) {
- var _this = this;
- this.pageTb.add(new Roo.Toolbar.Fill(), {
- cls: 'x-btn-icon x-btn-clear',
- text: ' ',
- handler: function()
- {
- _this.collapse();
- _this.clearValue();
- _this.onSelect(false, -1);
- }
- });
- }
- if (this.footer) {
- this.assetHeight += this.footer.getHeight();
- }
-
-
- if(!this.tpl){
- this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
- }
-
- this.view = new Roo.View(this.innerList, this.tpl, {
- singleSelect:true,
- store: this.store,
- selectedClass: this.selectedClass
- });
-
- this.view.on('click', this.onViewClick, this);
-
- this.store.on('beforeload', this.onBeforeLoad, this);
- this.store.on('load', this.onLoad, this);
- this.store.on('loadexception', this.onLoadException, this);
-
- if(this.resizable){
- this.resizer = new Roo.Resizable(this.list, {
- pinned:true, handles:'se'
- });
- this.resizer.on('resize', function(r, w, h){
- this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
- this.listWidth = w;
- this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
- this.restrictHeight();
- }, this);
- this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
- }
- if(!this.editable){
- this.editable = true;
- this.setEditable(false);
- }
-
-
- if (typeof(this.events.add.listeners) != 'undefined') {
-
- this.addicon = this.wrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
-
- this.addicon.on('click', function(e) {
- this.fireEvent('add', this);
- }, this);
+ if(this.grow){
+ this.el.on("keyup", this.onKeyUp, this, {buffer:50});
+ this.el.on("click", this.autoSize, this);
}
- if (typeof(this.events.edit.listeners) != 'undefined') {
-
- this.editicon = this.wrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
- if (this.addicon) {
- this.editicon.setStyle('margin-left', '40px');
- }
- this.editicon.on('click', function(e) {
-
- // we fire even if inothing is selected..
- this.fireEvent('edit', this, this.lastData );
-
- }, this);
+ if(this.el.is('input[type=password]') && Roo.isSafari){
+ this.el.on('keydown', this.SafariOnKeyDown, this);
}
-
-
-
},
- // private
- initEvents : function(){
- Roo.form.ComboBox.superclass.initEvents.call(this);
-
- this.keyNav = new Roo.KeyNav(this.el, {
- "up" : function(e){
- this.inKeyMode = true;
- this.selectPrev();
- },
-
- "down" : function(e){
- if(!this.isExpanded()){
- this.onTriggerClick();
- }else{
- this.inKeyMode = true;
- this.selectNext();
- }
- },
-
- "enter" : function(e){
- this.onViewClick();
- //return true;
- },
-
- "esc" : function(e){
- this.collapse();
- },
-
- "tab" : function(e){
- this.onViewClick(false);
- this.fireEvent("specialkey", this, e);
- return true;
- },
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- if(hname == 'down' || this.scope.isExpanded()){
- return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
- }
- return true;
- },
-
- forceKeyDown: true
- });
- this.queryDelay = Math.max(this.queryDelay || 10,
- this.mode == 'local' ? 10 : 250);
- this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
- if(this.typeAhead){
- this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
- }
- if(this.editable !== false){
- this.el.on("keyup", this.onKeyUp, this);
- }
- if(this.forceSelection){
- this.on('blur', this.doForce, this);
+ processValue : function(value){
+ if(this.stripCharsRe){
+ var newValue = value.replace(this.stripCharsRe, '');
+ if(newValue !== value){
+ this.setRawValue(newValue);
+ return newValue;
+ }
}
+ return value;
},
- onDestroy : function(){
- if(this.view){
- this.view.setStore(null);
- this.view.el.removeAllListeners();
- this.view.el.remove();
- this.view.purgeListeners();
- }
- if(this.list){
- this.list.destroy();
- }
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
+ filterValidation : function(e){
+ if(!e.isNavKeyPress()){
+ this.validationTask.delay(this.validationDelay);
}
- Roo.form.ComboBox.superclass.onDestroy.call(this);
},
// private
- fireKey : function(e){
- if(e.isNavKeyPress() && !this.list.isVisible()){
- this.fireEvent("specialkey", this, e);
+ onKeyUp : function(e){
+ if(!e.isNavKeyPress()){
+ this.autoSize();
}
},
-
- // private
- onResize: function(w, h){
- Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
-
- if(typeof w != 'number'){
- // we do not handle it!?!?
+ // private - clean the leading white space
+ cleanLeadingSpace : function(e)
+ {
+ if ( this.inputType == 'file') {
return;
}
- var tw = this.trigger.getWidth();
- tw += this.addicon ? this.addicon.getWidth() : 0;
- tw += this.editicon ? this.editicon.getWidth() : 0;
- var x = w - tw;
- this.el.setWidth( this.adjustWidth('input', x));
-
- this.trigger.setStyle('left', x+'px');
-
- if(this.list && this.listWidth === undefined){
- var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
- }
-
-
+ this.setValue((this.getValue() + '').replace(/^\s+/,''));
},
-
/**
- * Allow or prevent the user from directly editing the field text. If false is passed,
- * the user will only be able to select from the items defined in the dropdown list. This method
- * is the runtime equivalent of setting the 'editable' config option at config time.
- * @param {Boolean} value True to allow the user to directly edit the field text
+ * Resets the current field value to the originally-loaded value and clears any validation messages.
+ *
*/
- setEditable : function(value){
- if(value == this.editable){
- return;
- }
- this.editable = value;
- if(!value){
- this.el.dom.setAttribute('readOnly', true);
- this.el.on('mousedown', this.onTriggerClick, this);
- this.el.addClass('x-combo-noedit');
- }else{
- this.el.dom.setAttribute('readOnly', false);
- this.el.un('mousedown', this.onTriggerClick, this);
- this.el.removeClass('x-combo-noedit');
+ reset : function(){
+ Roo.form.TextField.superclass.reset.call(this);
+
+ },
+ // private
+ preFocus : function(){
+
+ if(this.selectOnFocus){
+ this.el.dom.select();
}
},
+
// private
- onBeforeLoad : function(){
- if(!this.hasFocus){
+ filterKeys : function(e){
+ var k = e.getKey();
+ if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
return;
}
- this.innerList.update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- this.restrictHeight();
- this.selectedIndex = -1;
- },
-
- // private
- onLoad : function(){
- if(!this.hasFocus){
+ var c = e.getCharCode(), cc = String.fromCharCode(c);
+ if(Roo.isIE && (e.isSpecialKey() || !cc)){
return;
}
- if(this.store.getCount() > 0){
- this.expand();
- this.restrictHeight();
- if(this.lastQuery == this.allQuery){
- if(this.editable){
- this.el.dom.select();
- }
- if(!this.selectByValue(this.value, true)){
- this.select(0, true);
- }
- }else{
- this.selectNext();
- if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
- this.taTask.delay(this.typeAheadDelay);
- }
- }
- }else{
- this.onEmptyResults();
+ if(!this.maskRe.test(cc)){
+ e.stopEvent();
}
- //this.el.focus();
},
- // private
- onLoadException : function()
- {
- this.collapse();
- Roo.log(this.store.reader.jsonData);
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
- }
+
+ setValue : function(v){
+ Roo.form.TextField.superclass.setValue.apply(this, arguments);
- },
- // private
- onTypeAhead : function(){
- if(this.store.getCount() > 0){
- var r = this.store.getAt(0);
- var newValue = r.data[this.displayField];
- var len = newValue.length;
- var selStart = this.getRawValue().length;
- if(selStart != len){
- this.setRawValue(newValue);
- this.selectText(selStart, newValue.length);
- }
- }
- },
-
- // private
- onSelect : function(record, index){
- if(this.fireEvent('beforeselect', this, record, index) !== false){
- this.setFromData(index > -1 ? record.data : false);
- this.collapse();
- this.fireEvent('select', this, record, index);
- }
+ this.autoSize();
},
/**
- * Returns the currently selected field value or empty string if no value is set.
- * @return {String} value The selected value
+ * Validates a value according to the field's validation rules and marks the field as invalid
+ * if the validation fails
+ * @param {Mixed} value The value to validate
+ * @return {Boolean} True if the value is valid, else false
*/
- getValue : function(){
- if(this.valueField){
- return typeof this.value != 'undefined' ? this.value : '';
+ validateValue : function(value){
+ if(value.length < 1) { // if it's blank
+ if(this.allowBlank){
+ this.clearInvalid();
+ return true;
+ }else{
+ this.markInvalid(this.blankText);
+ return false;
+ }
}
- return Roo.form.ComboBox.superclass.getValue.call(this);
+ if(value.length < this.minLength){
+ this.markInvalid(String.format(this.minLengthText, this.minLength));
+ return false;
+ }
+ if(value.length > this.maxLength){
+ this.markInvalid(String.format(this.maxLengthText, this.maxLength));
+ return false;
+ }
+ if(this.vtype){
+ var vt = Roo.form.VTypes;
+ if (value.trim() != value) { // trim before checking email (and other stuf??)
+ value = value.trim();
+ this.el.dom.value = value;
+ }
+
+ if(!vt[this.vtype](value, this)){
+ this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
+ return false;
+ }
+ }
+ if(typeof this.validator == "function"){
+ var msg = this.validator(value);
+ if(msg !== true){
+ this.markInvalid(msg);
+ return false;
+ }
+ }
+ if(this.regex && !this.regex.test(value)){
+ this.markInvalid(this.regexText);
+ return false;
+ }
+ return true;
},
/**
- * Clears any text/value currently set in the field
+ * Selects text in this field
+ * @param {Number} start (optional) The index where the selection should start (defaults to 0)
+ * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
*/
- clearValue : function(){
- if(this.hiddenField){
- this.hiddenField.value = '';
+ selectText : function(start, end){
+ var v = this.getRawValue();
+ if(v.length > 0){
+ start = start === undefined ? 0 : start;
+ end = end === undefined ? v.length : end;
+ var d = this.el.dom;
+ if(d.setSelectionRange){
+ d.setSelectionRange(start, end);
+ }else if(d.createTextRange){
+ var range = d.createTextRange();
+ range.moveStart("character", start);
+ range.moveEnd("character", v.length-end);
+ range.select();
+ }
}
- this.value = '';
- this.setRawValue('');
- this.lastSelectionText = '';
-
},
/**
- * Sets the specified value into the field. If the value finds a match, the corresponding record text
- * will be displayed in the field. If the value does not match the data value of an existing item,
- * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
- * Otherwise the field will be blank (although the value will still be set).
- * @param {String} value The value to match
+ * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
+ * This only takes effect if grow = true, and fires the autosize event.
*/
- setValue : function(v){
- var text = v;
- if(this.valueField){
- var r = this.findRecord(this.valueField, v);
- if(r){
- text = r.data[this.displayField];
- }else if(this.valueNotFoundText !== undefined){
- text = this.valueNotFoundText;
- }
+ autoSize : function(){
+ if(!this.grow || !this.rendered){
+ return;
}
- this.lastSelectionText = text;
- if(this.hiddenField){
- this.hiddenField.value = v;
+ if(!this.metrics){
+ this.metrics = Roo.util.TextMetrics.createInstance(this.el);
}
- Roo.form.ComboBox.superclass.setValue.call(this, text);
- this.value = v;
+ var el = this.el;
+ var v = el.dom.value;
+ var d = document.createElement('div');
+ d.appendChild(document.createTextNode(v));
+ v = d.innerHTML;
+ d = null;
+ v += " ";
+ var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
+ this.el.setWidth(w);
+ this.fireEvent("autosize", this, w);
},
- /**
- * @property {Object} the last set data for the element
- */
- lastData : false,
- /**
- * Sets the value of the field based on a object which is related to the record format for the store.
- * @param {Object} value the value to set as. or false on reset?
- */
- setFromData : function(o){
- var dv = ''; // display value
- var vv = ''; // value value..
- this.lastData = o;
- if (this.displayField) {
- dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
- } else {
- // this is an error condition!!!
- Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
- }
+ // private
+ SafariOnKeyDown : function(event)
+ {
+ // this is a workaround for a password hang bug on chrome/ webkit.
- if(this.valueField){
- vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
+ var isSelectAll = false;
+
+ if(this.el.dom.selectionEnd > 0){
+ isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
}
- if(this.hiddenField){
- this.hiddenField.value = vv;
-
- this.lastSelectionText = dv;
- Roo.form.ComboBox.superclass.setValue.call(this, dv);
- this.value = vv;
+ if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
+ event.preventDefault();
+ this.setValue('');
return;
}
- // no hidden field.. - we store the value in 'value', but still display
- // display field!!!!
- this.lastSelectionText = dv;
- Roo.form.ComboBox.superclass.setValue.call(this, dv);
- this.value = vv;
-
- },
- // private
- reset : function(){
- // overridden so that last data is reset..
- this.setValue(this.resetValue);
- this.originalValue = this.getValue();
- this.clearInvalid();
- this.lastData = false;
- if (this.view) {
- this.view.clearSelections();
+ // skip handling paste
+ if(isSelectAll && event.getCharCode() > 31 && !(event.ctrlKey && event.getCharCode() == 86)){ // backspace and delete key
+
+ event.preventDefault();
+ // this is very hacky as keydown always get's upper case.
+
+ var cc = String.fromCharCode(event.getCharCode());
+
+
+ this.setValue( event.shiftKey ? cc : cc.toLowerCase());
+
}
- },
- // private
- findRecord : function(prop, value){
- var record;
- if(this.store.getCount() > 0){
- this.store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- return false;
- }
- return true;
- });
- }
- return record;
+
+
+ }
+});Roo.form.Password = function(config){
+ Roo.form.Password.superclass.constructor.call(this, config);
+
+ this.inputType = 'password';
+};
+
+Roo.extend(Roo.form.Password, Roo.form.TextField, {
+ onRender : function(ct, position)
+ {
+ Roo.form.Password.superclass.onRender.call(this, ct, position);
+
+ this.parentEl().addClass('form-password');
+
+ this.wrap = this.el.wrap({
+ cls : 'password-wrap'
+ });
+
+ this.toggle = this.wrap.createChild({
+ tag : 'Button',
+ cls : 'password-toggle'
+ });
+
+
+ this.toggleEl().addClass('password-hidden');
+
+ this.toggleEl().on('click', this.onToggleClick, this);;
},
- getName: function()
+ parentEl : function()
{
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
-
+ return this.el.findParent('.x-form-element', 5, true);
},
- // private
- onViewMove : function(e, t){
- this.inKeyMode = false;
+
+ toggleEl: function()
+ {
+ return this.parentEl().select('button.password-toggle',true).first();
},
- // private
- onViewOver : function(e, t){
- if(this.inKeyMode){ // prevent key nav and mouse over conflicts
- return;
+ onToggleClick : function(e)
+ {
+ var input = this.el;
+ var toggle = this.toggleEl();
+
+ toggle.removeClass(['password-visible', 'password-hidden']);
+
+ if(input.attr('type') == 'password') {
+ input.attr('type', 'text');
+ toggle.addClass('password-visible');
}
- var item = this.view.findItemFromChild(t);
- if(item){
- var index = this.view.indexOf(item);
- this.select(index, false);
+ else {
+ input.attr('type', 'password');
+ toggle.addClass('password-hidden');
}
- },
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Hidden
+ * @extends Roo.form.TextField
+ * Simple Hidden element used on forms
+ *
+ * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
+ *
+ * @constructor
+ * Creates a new Hidden form element.
+ * @param {Object} config Configuration options
+ */
+
+
+
+// easy hidden field...
+Roo.form.Hidden = function(config){
+ Roo.form.Hidden.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
+ fieldLabel: '',
+ inputType: 'hidden',
+ width: 50,
+ allowBlank: true,
+ labelSeparator: '',
+ hidden: true,
+ itemCls : 'x-form-item-display-none'
+
+
+});
+
+
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.TriggerField
+ * @extends Roo.form.TextField
+ * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
+ * The trigger has no default action, so you must assign a function to implement the trigger click handler by
+ * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
+ * for which you can provide a custom implementation. For example:
+ * <pre><code>
+var trigger = new Roo.form.TriggerField();
+trigger.onTriggerClick = myTriggerFn;
+trigger.applyTo('my-field');
+</code></pre>
+ *
+ * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
+ * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
+ * @constructor
+ * Create a new TriggerField.
+ * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
+ * to the base TextField)
+ */
+Roo.form.TriggerField = function(config){
+ this.mimicing = false;
+ Roo.form.TriggerField.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
+ /**
+ * @cfg {String} triggerClass A CSS class to apply to the trigger
+ */
+ /**
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "16", autocomplete: "off"})
+ */
+ defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
+ /**
+ * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
+ */
+ hideTrigger:false,
+
+ /** @cfg {Boolean} grow @hide */
+ /** @cfg {Number} growMin @hide */
+ /** @cfg {Number} growMax @hide */
+ /**
+ * @hide
+ * @method
+ */
+ autoSize: Roo.emptyFn,
// private
- onViewClick : function(doFocus)
- {
- var index = this.view.getSelectedIndexes()[0];
- var r = this.store.getAt(index);
- if(r){
- this.onSelect(r, index);
- }
- if(doFocus !== false && !this.blockFocus){
- this.el.focus();
+ monitorTab : true,
+ // private
+ deferHeight : true,
+
+
+ actionMode : 'wrap',
+ // private
+ onResize : function(w, h){
+ Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
+ if(typeof w == 'number'){
+ var x = w - this.trigger.getWidth();
+ this.el.setWidth(this.adjustWidth('input', x));
+ this.trigger.setStyle('left', x+'px');
}
},
// private
- restrictHeight : function(){
- this.innerList.dom.style.height = '';
- var inner = this.innerList.dom;
- var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
- this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
- this.list.beginUpdate();
- this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
- this.list.alignTo(this.el, this.listAlign);
- this.list.endUpdate();
+ adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+ // private
+ getResizeEl : function(){
+ return this.wrap;
},
// private
- onEmptyResults : function(){
- this.collapse();
+ getPositionEl : function(){
+ return this.wrap;
},
- /**
- * Returns true if the dropdown list is expanded, else false.
- */
- isExpanded : function(){
- return this.list.isVisible();
+ // private
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
},
- /**
- * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {String} value The data value of the item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- * @return {Boolean} True if the value matched an item in the list, else false
- */
- selectByValue : function(v, scrollIntoView){
- if(v !== undefined && v !== null){
- var r = this.findRecord(this.valueField || this.displayField, v);
- if(r){
- this.select(this.store.indexOf(r), scrollIntoView);
- return true;
- }
+ // private
+ onRender : function(ct, position){
+ Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
+ this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
+ this.trigger = this.wrap.createChild(this.triggerConfig ||
+ {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
+ if(this.hideTrigger){
+ this.trigger.setDisplayed(false);
+ }
+ this.initTrigger();
+ if(!this.width){
+ this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
}
- return false;
},
- /**
- * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {Number} index The zero-based index of the list item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- */
- select : function(index, scrollIntoView){
- this.selectedIndex = index;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.innerList.scrollChildIntoView(el, false);
- }
- }
+ // private
+ initTrigger : function(){
+ this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
+ this.trigger.addClassOnOver('x-form-trigger-over');
+ this.trigger.addClassOnClick('x-form-trigger-click');
},
// private
- selectNext : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex < ct-1){
- this.select(this.selectedIndex+1);
- }
+ onDestroy : function(){
+ if(this.trigger){
+ this.trigger.removeAllListeners();
+ this.trigger.remove();
}
+ if(this.wrap){
+ this.wrap.remove();
+ }
+ Roo.form.TriggerField.superclass.onDestroy.call(this);
},
// private
- selectPrev : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex != 0){
- this.select(this.selectedIndex-1);
+ onFocus : function(){
+ Roo.form.TriggerField.superclass.onFocus.call(this);
+ if(!this.mimicing){
+ this.wrap.addClass('x-trigger-wrap-focus');
+ this.mimicing = true;
+ Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
+ if(this.monitorTab){
+ this.el.on("keydown", this.checkTab, this);
}
}
},
// private
- onKeyUp : function(e){
- if(this.editable !== false && !e.isSpecialKey()){
- this.lastKey = e.getKey();
- this.dqTask.delay(this.queryDelay);
+ checkTab : function(e){
+ if(e.getKey() == e.TAB){
+ this.triggerBlur();
}
},
// private
- validateBlur : function(){
- return !this.list || !this.list.isVisible();
+ onBlur : function(){
+ // do nothing
},
// private
- initQuery : function(){
- this.doQuery(this.getRawValue());
+ mimicBlur : function(e, t){
+ if(!this.wrap.contains(t) && this.validateBlur()){
+ this.triggerBlur();
+ }
},
// private
- doForce : function(){
- if(this.el.dom.value.length > 0){
- this.el.dom.value =
- this.lastSelectionText === undefined ? '' : this.lastSelectionText;
-
+ triggerBlur : function(){
+ this.mimicing = false;
+ Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
+ if(this.monitorTab){
+ this.el.un("keydown", this.checkTab, this);
}
+ this.wrap.removeClass('x-trigger-wrap-focus');
+ Roo.form.TriggerField.superclass.onBlur.call(this);
},
- /**
- * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
- * query allowing the query action to be canceled if needed.
- * @param {String} query The SQL query to execute
- * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
- * in the field than the minimum specified by the minChars config option. It also clears any filter previously
- * saved in the current store (defaults to false)
- */
- doQuery : function(q, forceAll){
- if(q === undefined || q === null){
- q = '';
- }
- var qe = {
- query: q,
- forceAll: forceAll,
- combo: this,
- cancel:false
- };
- if(this.fireEvent('beforequery', qe)===false || qe.cancel){
- return false;
- }
- q = qe.query;
- forceAll = qe.forceAll;
- if(forceAll === true || (q.length >= this.minChars)){
- if(this.lastQuery != q || this.alwaysQuery){
- this.lastQuery = q;
- if(this.mode == 'local'){
- this.selectedIndex = -1;
- if(forceAll){
- this.store.clearFilter();
- }else{
- this.store.filter(this.displayField, q);
- }
- this.onLoad();
- }else{
- this.store.baseParams[this.queryParam] = q;
- this.store.load({
- params: this.getParams(q)
- });
- this.expand();
- }
- }else{
- this.selectedIndex = -1;
- this.onLoad();
- }
- }
+ // private
+ // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
+ validateBlur : function(e, t){
+ return true;
},
// private
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
+ onDisable : function(){
+ Roo.form.TriggerField.superclass.onDisable.call(this);
+ if(this.wrap){
+ this.wrap.addClass('x-item-disabled');
}
- return p;
},
- /**
- * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
- */
- collapse : function(){
- if(!this.isExpanded()){
- return;
- }
- this.list.hide();
- Roo.get(document).un('mousedown', this.collapseIf, this);
- Roo.get(document).un('mousewheel', this.collapseIf, this);
- if (!this.editable) {
- Roo.get(document).un('keydown', this.listKeyPress, this);
+ // private
+ onEnable : function(){
+ Roo.form.TriggerField.superclass.onEnable.call(this);
+ if(this.wrap){
+ this.wrap.removeClass('x-item-disabled');
}
- this.fireEvent('collapse', this);
},
// private
- collapseIf : function(e){
- if(!e.within(this.wrap) && !e.within(this.list)){
- this.collapse();
+ onShow : function(){
+ var ae = this.getActionEl();
+
+ if(ae){
+ ae.dom.style.display = '';
+ ae.dom.style.visibility = 'visible';
}
},
+ // private
+
+ onHide : function(){
+ var ae = this.getActionEl();
+ ae.dom.style.display = 'none';
+ },
+
/**
- * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+ * The function that should handle the trigger's click event. This method does nothing by default until overridden
+ * by an implementing function.
+ * @method
+ * @param {EventObject} e
*/
- expand : function(){
- if(this.isExpanded() || !this.hasFocus){
- return;
- }
- this.list.alignTo(this.el, this.listAlign);
- this.list.show();
- Roo.get(document).on('mousedown', this.collapseIf, this);
- Roo.get(document).on('mousewheel', this.collapseIf, this);
- if (!this.editable) {
- Roo.get(document).on('keydown', this.listKeyPress, this);
- }
-
- this.fireEvent('expand', this);
+ onTriggerClick : Roo.emptyFn
+});
+
+// TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
+// to be extended by an implementing class. For an example of implementing this class, see the custom
+// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
+Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
+ initComponent : function(){
+ Roo.form.TwinTriggerField.superclass.initComponent.call(this);
+
+ this.triggerConfig = {
+ tag:'span', cls:'x-form-twin-triggers', cn:[
+ {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
+ {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
+ ]};
},
- // private
- // Implements the default empty TriggerField.onTriggerClick function
- onTriggerClick : function(){
- if(this.disabled){
- return;
- }
- if(this.isExpanded()){
- this.collapse();
- if (!this.blockFocus) {
- this.el.focus();
- }
-
- }else {
- this.hasFocus = true;
- if(this.triggerAction == 'all') {
- this.doQuery(this.allQuery, true);
- } else {
- this.doQuery(this.getRawValue());
- }
- if (!this.blockFocus) {
- this.el.focus();
+ getTrigger : function(index){
+ return this.triggers[index];
+ },
+
+ initTrigger : function(){
+ var ts = this.trigger.select('.x-form-trigger', true);
+ this.wrap.setStyle('overflow', 'hidden');
+ var triggerField = this;
+ ts.each(function(t, all, index){
+ t.hide = function(){
+ var w = triggerField.wrap.getWidth();
+ this.dom.style.display = 'none';
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ };
+ t.show = function(){
+ var w = triggerField.wrap.getWidth();
+ this.dom.style.display = '';
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ };
+ var triggerIndex = 'Trigger'+(index+1);
+
+ if(this['hide'+triggerIndex]){
+ t.dom.style.display = 'none';
}
- }
+ t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
+ t.addClassOnOver('x-form-trigger-over');
+ t.addClassOnClick('x-form-trigger-click');
+ }, this);
+ this.triggers = ts.elements;
},
- listKeyPress : function(e)
- {
- //Roo.log('listkeypress');
- // scroll to first matching element based on key pres..
- if (e.isSpecialKey()) {
- return false;
+
+ onTrigger1Click : Roo.emptyFn,
+ onTrigger2Click : Roo.emptyFn
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.TextArea
+ * @extends Roo.form.TextField
+ * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
+ * support for auto-sizing.
+ * @constructor
+ * Creates a new TextArea
+ * @param {Object} config Configuration options
+ */
+Roo.form.TextArea = function(config){
+ Roo.form.TextArea.superclass.constructor.call(this, config);
+ // these are provided exchanges for backwards compat
+ // minHeight/maxHeight were replaced by growMin/growMax to be
+ // compatible with TextField growing config values
+ if(this.minHeight !== undefined){
+ this.growMin = this.minHeight;
+ }
+ if(this.maxHeight !== undefined){
+ this.growMax = this.maxHeight;
+ }
+};
+
+Roo.extend(Roo.form.TextArea, Roo.form.TextField, {
+ /**
+ * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
+ */
+ growMin : 60,
+ /**
+ * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
+ */
+ growMax: 1000,
+ /**
+ * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
+ * in the field (equivalent to setting overflow: hidden, defaults to false)
+ */
+ preventScrollbars: false,
+ /**
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
+ */
+
+ // private
+ onRender : function(ct, position){
+ if(!this.el){
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:"width:300px;height:60px;",
+ autocomplete: "new-password"
+ };
}
- var k = String.fromCharCode(e.getKey()).toUpperCase();
- //Roo.log(k);
- var match = false;
- var csel = this.view.getSelectedNodes();
- var cselitem = false;
- if (csel.length) {
- var ix = this.view.indexOf(csel[0]);
- cselitem = this.store.getAt(ix);
- if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
- cselitem = false;
+ Roo.form.TextArea.superclass.onRender.call(this, ct, position);
+ if(this.grow){
+ this.textSizeEl = Roo.DomHelper.append(document.body, {
+ tag: "pre", cls: "x-form-grow-sizer"
+ });
+ if(this.preventScrollbars){
+ this.el.setStyle("overflow", "hidden");
}
-
+ this.el.setHeight(this.growMin);
}
-
- this.store.each(function(v) {
- if (cselitem) {
- // start at existing selection.
- if (cselitem.id == v.id) {
- cselitem = false;
- }
- return;
- }
-
- if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
- match = this.store.indexOf(v);
- return false;
- }
- }, this);
-
- if (match === false) {
- return true; // no more action?
+ },
+
+ onDestroy : function(){
+ if(this.textSizeEl){
+ this.textSizeEl.parentNode.removeChild(this.textSizeEl);
+ }
+ Roo.form.TextArea.superclass.onDestroy.call(this);
+ },
+
+ // private
+ onKeyUp : function(e){
+ if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
+ this.autoSize();
}
- // scroll to?
- this.view.select(match);
- var sn = Roo.get(this.view.getSelectedNodes()[0]);
- sn.scrollIntoView(sn.dom.parentNode, false);
},
- cleanLeadingSpace : function()
- {
- // override textfield strip white space (trigers set on blur)
- }
- /**
- * @cfg {Boolean} grow
- * @hide
- */
- /**
- * @cfg {Number} growMin
- * @hide
- */
- /**
- * @cfg {Number} growMax
- * @hide
- */
/**
- * @hide
- * @method autoSize
+ * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
+ * This only takes effect if grow = true, and fires the autosize event if the height changes.
*/
+ autoSize : function(){
+ if(!this.grow || !this.textSizeEl){
+ return;
+ }
+ var el = this.el;
+ var v = el.dom.value;
+ var ts = this.textSizeEl;
+
+ ts.innerHTML = '';
+ ts.appendChild(document.createTextNode(v));
+ v = ts.innerHTML;
+
+ Roo.fly(ts).setWidth(this.el.getWidth());
+ if(v.length < 1){
+ v = "  ";
+ }else{
+ if(Roo.isIE){
+ v = v.replace(/\n/g, '<p> </p>');
+ }
+ v += " \n ";
+ }
+ ts.innerHTML = v;
+ var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
+ if(h != this.lastHeight){
+ this.lastHeight = h;
+ this.el.setHeight(h);
+ this.fireEvent("autosize", this, h);
+ }
+ }
});/*
- * Copyright(c) 2010-2012, Roo J Solutions Limited
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
*
- * Licence LGPL
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
*
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
+
/**
- * @class Roo.form.ComboBoxArray
+ * @class Roo.form.NumberField
* @extends Roo.form.TextField
- * A facebook style adder... for lists of email / people / countries etc...
- * pick multiple items from a combo box, and shows each one.
- *
- * Fred [x] Brian [x] [Pick another |v]
- *
- *
- * For this to work: it needs various extra information
- * - normal combo problay has
- * name, hiddenName
- * + displayField, valueField
- *
- * For our purpose...
- *
- *
- * If we change from 'extends' to wrapping...
- *
- *
- *
-
-
+ * Numeric text field that provides automatic keystroke filtering and numeric validation.
* @constructor
- * Create a new ComboBoxArray.
+ * Creates a new NumberField
* @param {Object} config Configuration options
*/
-
-
-Roo.form.ComboBoxArray = function(config)
-{
- this.addEvents({
- /**
- * @event beforeremove
- * Fires before remove the value from the list
- * @param {Roo.form.ComboBoxArray} _self This combo box array
- * @param {Roo.form.ComboBoxArray.Item} item removed item
- */
- 'beforeremove' : true,
- /**
- * @event remove
- * Fires when remove the value from the list
- * @param {Roo.form.ComboBoxArray} _self This combo box array
- * @param {Roo.form.ComboBoxArray.Item} item removed item
- */
- 'remove' : true
-
-
- });
-
- Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
-
- this.items = new Roo.util.MixedCollection(false);
-
- // construct the child combo...
-
-
-
-
-
-
-}
+Roo.form.NumberField = function(config){
+ Roo.form.NumberField.superclass.constructor.call(this, config);
+};
-
-Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
-{
+Roo.extend(Roo.form.NumberField, Roo.form.TextField, {
/**
- * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
+ * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
*/
-
- lastData : false,
-
- // behavies liek a hiddne field
- inputType: 'hidden',
+ fieldClass: "x-form-field x-form-num-field",
/**
- * @cfg {Number} width The width of the box that displays the selected element
- */
- width: 300,
-
-
-
+ * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
+ */
+ allowDecimals : true,
/**
- * @cfg {String} name The name of the visable items on this form (eg. titles not ids)
+ * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
*/
- name : false,
+ decimalSeparator : ".",
/**
- * @cfg {String} hiddenName The hidden name of the field, often contains an comma seperated list of names
+ * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
*/
- hiddenName : false,
- /**
- * @cfg {String} seperator The value seperator normally ','
+ decimalPrecision : 2,
+ /**
+ * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
*/
- seperator : ',',
-
-
- // private the array of items that are displayed..
- items : false,
- // private - the hidden field el.
- hiddenEl : false,
- // private - the filed el..
- el : false,
-
- //validateValue : function() { return true; }, // all values are ok!
- //onAddClick: function() { },
-
- onRender : function(ct, position)
- {
-
- // create the standard hidden element
- //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
-
-
- // give fake names to child combo;
- this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
- this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
-
- this.combo = Roo.factory(this.combo, Roo.form);
- this.combo.onRender(ct, position);
- if (typeof(this.combo.width) != 'undefined') {
- this.combo.onResize(this.combo.width,0);
+ allowNegative : true,
+ /**
+ * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
+ */
+ minValue : Number.NEGATIVE_INFINITY,
+ /**
+ * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
+ */
+ maxValue : Number.MAX_VALUE,
+ /**
+ * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
+ */
+ minText : "The minimum value for this field is {0}",
+ /**
+ * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
+ */
+ maxText : "The maximum value for this field is {0}",
+ /**
+ * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
+ * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
+ */
+ nanText : "{0} is not a valid number",
+
+ // private
+ initEvents : function(){
+ Roo.form.NumberField.superclass.initEvents.call(this);
+ var allowed = "0123456789";
+ if(this.allowDecimals){
+ allowed += this.decimalSeparator;
}
-
- this.combo.initEvents();
-
- // assigned so form know we need to do this..
- this.store = this.combo.store;
- this.valueField = this.combo.valueField;
- this.displayField = this.combo.displayField ;
-
-
- this.combo.wrap.addClass('x-cbarray-grp');
-
- var cbwrap = this.combo.wrap.createChild(
- {tag: 'div', cls: 'x-cbarray-cb'},
- this.combo.el.dom
- );
-
-
- this.hiddenEl = this.combo.wrap.createChild({
- tag: 'input', type:'hidden' , name: this.hiddenName, value : ''
- });
- this.el = this.combo.wrap.createChild({
- tag: 'input', type:'hidden' , name: this.name, value : ''
- });
- // this.el.dom.removeAttribute("name");
-
-
- this.outerWrap = this.combo.wrap;
- this.wrap = cbwrap;
-
- this.outerWrap.setWidth(this.width);
- this.outerWrap.dom.removeChild(this.el.dom);
-
- this.wrap.dom.appendChild(this.el.dom);
- this.outerWrap.dom.removeChild(this.combo.trigger.dom);
- this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
-
- this.combo.trigger.setStyle('position','relative');
- this.combo.trigger.setStyle('left', '0px');
- this.combo.trigger.setStyle('top', '2px');
-
- this.combo.el.setStyle('vertical-align', 'text-bottom');
-
- //this.trigger.setStyle('vertical-align', 'top');
-
- // this should use the code from combo really... on('add' ....)
- if (this.adder) {
-
-
- this.adder = this.outerWrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});
- var _t = this;
- this.adder.on('click', function(e) {
- _t.fireEvent('adderclick', this, e);
- }, _t);
+ if(this.allowNegative){
+ allowed += "-";
}
- //var _t = this;
- //this.adder.on('click', this.onAddClick, _t);
-
-
- this.combo.on('select', function(cb, rec, ix) {
- this.addItem(rec.data);
-
- cb.setValue('');
- cb.el.dom.value = '';
- //cb.lastData = rec.data;
- // add to list
-
- }, this);
-
-
-
-
- },
-
-
- getName: function()
- {
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return this.hiddenName ? this.hiddenName : this.name;
-
+ this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
+ var keyPress = function(e){
+ var k = e.getKey();
+ if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+ return;
+ }
+ var c = e.getCharCode();
+ if(allowed.indexOf(String.fromCharCode(c)) === -1){
+ e.stopEvent();
+ }
+ };
+ this.el.on("keypress", keyPress, this);
},
-
-
- onResize: function(w, h){
-
- return;
- // not sure if this is needed..
- //this.combo.onResize(w,h);
-
- if(typeof w != 'number'){
- // we do not handle it!?!?
- return;
+
+ // private
+ validateValue : function(value){
+ if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
+ return false;
}
- var tw = this.combo.trigger.getWidth();
- tw += this.addicon ? this.addicon.getWidth() : 0;
- tw += this.editicon ? this.editicon.getWidth() : 0;
- var x = w - tw;
- this.combo.el.setWidth( this.combo.adjustWidth('input', x));
-
- this.combo.trigger.setStyle('left', '0px');
-
- if(this.list && this.listWidth === undefined){
- var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
- this.list.setWidth(lw);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+ if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+ return true;
}
-
-
-
- },
-
- addItem: function(rec)
- {
- var valueField = this.combo.valueField;
- var displayField = this.combo.displayField;
-
- if (this.items.indexOfKey(rec[valueField]) > -1) {
- //console.log("GOT " + rec.data.id);
- return;
+ var num = this.parseValue(value);
+ if(isNaN(num)){
+ this.markInvalid(String.format(this.nanText, value));
+ return false;
}
-
- var x = new Roo.form.ComboBoxArray.Item({
- //id : rec[this.idField],
- data : rec,
- displayField : displayField ,
- tipField : displayField ,
- cb : this
- });
- // use the
- this.items.add(rec[valueField],x);
- // add it before the element..
- this.updateHiddenEl();
- x.render(this.outerWrap, this.wrap.dom);
- // add the image handler..
- },
-
- updateHiddenEl : function()
- {
- this.validate();
- if (!this.hiddenEl) {
- return;
+ if(num < this.minValue){
+ this.markInvalid(String.format(this.minText, this.minValue));
+ return false;
}
- var ar = [];
- var idField = this.combo.valueField;
-
- this.items.each(function(f) {
- ar.push(f.data[idField]);
- });
- this.hiddenEl.dom.value = ar.join(this.seperator);
- this.validate();
+ if(num > this.maxValue){
+ this.markInvalid(String.format(this.maxText, this.maxValue));
+ return false;
+ }
+ return true;
},
-
- reset : function()
- {
- this.items.clear();
-
- Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
- el.remove();
- });
-
- this.el.dom.value = '';
- if (this.hiddenEl) {
- this.hiddenEl.dom.value = '';
- }
-
- },
- getValue: function()
- {
- return this.hiddenEl ? this.hiddenEl.dom.value : '';
- },
- setValue: function(v) // not a valid action - must use addItems..
- {
-
- this.reset();
-
- if (this.store.isLocal && (typeof(v) == 'string')) {
- // then we can use the store to find the values..
- // comma seperated at present.. this needs to allow JSON based encoding..
- this.hiddenEl.value = v;
- var v_ar = [];
- Roo.each(v.split(this.seperator), function(k) {
- Roo.log("CHECK " + this.valueField + ',' + k);
- var li = this.store.query(this.valueField, k);
- if (!li.length) {
- return;
- }
- var add = {};
- add[this.valueField] = k;
- add[this.displayField] = li.item(0).data[this.displayField];
-
- this.addItem(add);
- }, this)
-
- }
- if (typeof(v) == 'object' ) {
- // then let's assume it's an array of objects..
- Roo.each(v, function(l) {
- var add = l;
- if (typeof(l) == 'string') {
- add = {};
- add[this.valueField] = l;
- add[this.displayField] = l
- }
- this.addItem(add);
- }, this);
-
- }
-
-
+
+ getValue : function(){
+ return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
},
- setFromData: function(v)
- {
- // this recieves an object, if setValues is called.
- this.reset();
- this.el.dom.value = v[this.displayField];
- this.hiddenEl.dom.value = v[this.valueField];
- if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
- return;
- }
- var kv = v[this.valueField];
- var dv = v[this.displayField];
- kv = typeof(kv) != 'string' ? '' : kv;
- dv = typeof(dv) != 'string' ? '' : dv;
-
-
- var keys = kv.split(this.seperator);
- var display = dv.split(this.seperator);
- for (var i = 0 ; i < keys.length; i++) {
- add = {};
- add[this.valueField] = keys[i];
- add[this.displayField] = display[i];
- this.addItem(add);
- }
-
-
+
+ // private
+ parseValue : function(value){
+ value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+ return isNaN(value) ? '' : value;
},
-
- /**
- * Validates the combox array value
- * @return {Boolean} True if the value is valid, else false
- */
- validate : function(){
- if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
- this.clearInvalid();
- return true;
+
+ // private
+ fixPrecision : function(value){
+ var nan = isNaN(value);
+ if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
+ return nan ? '' : value;
}
- return false;
- },
-
- validateValue : function(value){
- return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
-
+ return parseFloat(value).toFixed(this.decimalPrecision);
},
-
- /*@
- * overide
- *
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
-
- try {
- var d = Roo.decode(String(this.originalValue));
- } catch (e) {
- return String(this.getValue()) !== String(this.originalValue);
- }
-
- var originalValue = [];
-
- for (var i = 0; i < d.length; i++){
- originalValue.push(d[i][this.valueField]);
- }
-
- return String(this.getValue()) !== String(originalValue.join(this.seperator));
-
- }
-
-});
-
-
-
-/**
- * @class Roo.form.ComboBoxArray.Item
- * @extends Roo.BoxComponent
- * A selected item in the list
- * Fred [x] Brian [x] [Pick another |v]
- *
- * @constructor
- * Create a new item.
- * @param {Object} config Configuration options
- */
-
-Roo.form.ComboBoxArray.Item = function(config) {
- config.id = Roo.id();
- Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
-}
-Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
- data : {},
- cb: false,
- displayField : false,
- tipField : false,
-
-
- defaultAutoCreate : {
- tag: 'div',
- cls: 'x-cbarray-item',
- cn : [
- { tag: 'div' },
- {
- tag: 'img',
- width:16,
- height : 16,
- src : Roo.BLANK_IMAGE_URL ,
- align: 'center'
- }
- ]
-
+ setValue : function(v){
+ v = this.fixPrecision(v);
+ Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
},
-
-
- onRender : function(ct, position)
- {
- Roo.form.Field.superclass.onRender.call(this, ct, position);
-
- if(!this.el){
- var cfg = this.getAutoCreate();
- this.el = ct.createChild(cfg, position);
- }
-
- this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
-
- this.el.child('div').dom.innerHTML = this.cb.renderer ?
- this.cb.renderer(this.data) :
- String.format('{0}',this.data[this.displayField]);
-
-
- this.el.child('div').dom.setAttribute('qtip',
- String.format('{0}',this.data[this.tipField])
- );
-
- this.el.child('img').on('click', this.remove, this);
-
+
+ // private
+ decimalPrecisionFcn : function(v){
+ return Math.floor(v);
},
-
- remove : function()
- {
- if(this.cb.disabled){
- return;
- }
-
- if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
- this.cb.items.remove(this);
- this.el.child('img').un('click', this.remove, this);
- this.el.remove();
- this.cb.updateHiddenEl();
- this.cb.fireEvent('remove', this.cb, this);
+ beforeBlur : function(){
+ var v = this.parseValue(this.getRawValue());
+ if(v){
+ this.setValue(v);
}
-
}
});/*
- * RooJS Library 1.1.1
- * Copyright(c) 2008-2011 Alan Knowles
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
*
- * License - LGPL
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
-
/**
- * @class Roo.form.ComboNested
- * @extends Roo.form.ComboBox
- * A combobox for that allows selection of nested items in a list,
- * eg.
- *
- * Book
- * -> red
- * -> green
- * Table
- * -> square
- * ->red
- * ->green
- * -> rectangle
- * ->green
- *
- *
- * @constructor
- * Create a new ComboNested
- * @param {Object} config Configuration options
+ * @class Roo.form.DateField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new DateField
+* @param {Object} config
*/
-Roo.form.ComboNested = function(config){
- Roo.form.ComboCheck.superclass.constructor.call(this, config);
- // should verify some data...
- // like
- // hiddenName = required..
- // displayField = required
- // valudField == required
- var req= [ 'hiddenName', 'displayField', 'valueField' ];
- var _t = this;
- Roo.each(req, function(e) {
- if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
- throw "Roo.form.ComboNested : missing value for: " + e;
- }
+Roo.form.DateField = function(config)
+{
+ Roo.form.DateField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+
+ /**
+ * @event select
+ * Fires when a date is selected
+ * @param {Roo.form.DateField} combo This combo box
+ * @param {Date} date The date selected
+ */
+ 'select' : true
+
});
-
+
+ if(typeof this.minValue == "string") {
+ this.minValue = this.parseDate(this.minValue);
+ }
+ if(typeof this.maxValue == "string") {
+ this.maxValue = this.parseDate(this.maxValue);
+ }
+ this.ddMatch = null;
+ if(this.disabledDates){
+ var dd = this.disabledDates;
+ var re = "(?:";
+ for(var i = 0; i < dd.length; i++){
+ re += dd[i];
+ if(i != dd.length-1) {
+ re += "|";
+ }
+ }
+ this.ddMatch = new RegExp(re + ")");
+ }
};
-Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
-
- /*
- * @config {Number} max Number of columns to show
+Roo.extend(Roo.form.DateField, Roo.form.TriggerField, {
+ /**
+ * @cfg {String} format
+ * The default date format string which can be overriden for localization support. The format must be
+ * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+ */
+ format : "m/d/y",
+ /**
+ * @cfg {String} altFormats
+ * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+ * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+ */
+ altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
+ /**
+ * @cfg {Array} disabledDays
+ * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+ */
+ disabledDays : null,
+ /**
+ * @cfg {String} disabledDaysText
+ * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+ */
+ disabledDaysText : "Disabled",
+ /**
+ * @cfg {Array} disabledDates
+ * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
+ * expression so they are very powerful. Some examples:
+ * <ul>
+ * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
+ * <li>["03/08", "09/16"] would disable those days for every year</li>
+ * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
+ * <li>["03/../2006"] would disable every day in March 2006</li>
+ * <li>["^03"] would disable every day in every March</li>
+ * </ul>
+ * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
+ * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ */
+ disabledDates : null,
+ /**
+ * @cfg {String} disabledDatesText
+ * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+ */
+ disabledDatesText : "Disabled",
+
+
+ /**
+ * @cfg {Date/String} zeroValue
+ * if the date is less that this number, then the field is rendered as empty
+ * default is 1800
+ */
+ zeroValue : '1800-01-01',
+
+
+ /**
+ * @cfg {Date/String} minValue
+ * The minimum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ minValue : null,
+ /**
+ * @cfg {Date/String} maxValue
+ * The maximum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ maxValue : null,
+ /**
+ * @cfg {String} minText
+ * The error text to display when the date in the cell is before minValue (defaults to
+ * 'The date in this field must be after {minValue}').
+ */
+ minText : "The date in this field must be equal to or after {0}",
+ /**
+ * @cfg {String} maxText
+ * The error text to display when the date in the cell is after maxValue (defaults to
+ * 'The date in this field must be before {maxValue}').
*/
+ maxText : "The date in this field must be equal to or before {0}",
+ /**
+ * @cfg {String} invalidText
+ * The error text to display when the date in the field is invalid (defaults to
+ * '{value} is not a valid date - it must be in the format {format}').
+ */
+ invalidText : "{0} is not a valid date - it must be in the format {1}",
+ /**
+ * @cfg {String} triggerClass
+ * An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
+ * which displays a calendar icon).
+ */
+ triggerClass : 'x-form-date-trigger',
- maxColumns : 3,
-
- list : null, // the outermost div..
- innerLists : null, // the
- views : null,
- stores : null,
+
+ /**
+ * @cfg {Boolean} useIso
+ * if enabled, then the date field will use a hidden field to store the
+ * real value as iso formated date. default (false)
+ */
+ useIso : false,
+ /**
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "10", autocomplete: "off"})
+ */
// private
- loadingChildren : false,
+ defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+
+ // private
+ hiddenField: false,
onRender : function(ct, position)
{
- Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
-
- if(this.hiddenName){
- this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
+ Roo.form.DateField.superclass.onRender.call(this, ct, position);
+ if (this.useIso) {
+ //this.el.dom.removeAttribute('name');
+ Roo.log("Changing name?");
+ this.el.dom.setAttribute('name', this.name + '____hidden___' );
+ this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
'before', true);
- this.hiddenField.value =
- this.hiddenValue !== undefined ? this.hiddenValue :
- this.value !== undefined ? this.value : '';
-
+ this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
// prevent input submission
- this.el.dom.removeAttribute('name');
-
-
- }
-
- if(Roo.isGecko){
- this.el.dom.setAttribute('autocomplete', 'off');
- }
-
- var cls = 'x-combo-list';
-
- this.list = new Roo.Layer({
- shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
- });
-
- var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.list.swallowEvent('mousewheel');
- this.assetHeight = 0;
-
- if(this.title){
- this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
- this.assetHeight += this.header.getHeight();
- }
- this.innerLists = [];
- this.views = [];
- this.stores = [];
- for (var i =0 ; i < this.maxColumns; i++) {
- this.onRenderList( cls, i);
+ this.hiddenName = this.name;
}
-
- // 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.allowBlank && !this.disableClear) {
- this.pageTb.add(new Roo.Toolbar.Fill(), {
- cls: 'x-btn-icon x-btn-clear',
- text: ' ',
- handler: function()
- {
- _this.collapse();
- _this.clearValue();
- _this.onSelect(false, -1);
- }
- });
- }
- if (this.footer) {
- this.assetHeight += this.footer.getHeight();
- }
-
},
- onRenderList : function ( cls, i)
+
+ // private
+ validateValue : function(value)
{
-
- var lw = Math.floor(
- ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
- );
-
- 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.setWidth(lw);
- il.setStyle({ 'overflow-x' : 'hidden'});
-
- if(!this.tpl){
- 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'
- }
- });
+ value = this.formatDate(value);
+ if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
+ Roo.log('super failed');
+ return false;
}
-
- var store = this.store;
- if (i > 0) {
- store = new Roo.data.SimpleStore({
- //fields : this.store.reader.meta.fields,
- reader : this.store.reader,
- data : [ ]
- });
+ if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+ return true;
}
- this.stores[i] = store;
-
- var view = this.views[i] = new Roo.View(
- il,
- this.tpl,
- {
- singleSelect:true,
- store: store,
- selectedClass: this.selectedClass
+ var svalue = value;
+ value = this.parseDate(value);
+ if(!value){
+ Roo.log('parse date failed' + svalue);
+ this.markInvalid(String.format(this.invalidText, svalue, this.format));
+ return false;
+ }
+ var time = value.getTime();
+ if(this.minValue && time < this.minValue.getTime()){
+ this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
+ return false;
+ }
+ if(this.maxValue && time > this.maxValue.getTime()){
+ this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
+ return false;
+ }
+ if(this.disabledDays){
+ var day = value.getDay();
+ for(var i = 0; i < this.disabledDays.length; i++) {
+ if(day === this.disabledDays[i]){
+ this.markInvalid(this.disabledDaysText);
+ return false;
+ }
}
- );
- 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.createDelegate(this, {list : i }, true));
- view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
- //view.on('click', this.onViewClick, this, { list : i });
-
- store.on('beforeload', this.onBeforeLoad, this);
- store.on('load', this.onLoad, this, { list : i});
- store.on('loadexception', this.onLoadException, this);
-
- // hide the other vies..
-
-
-
+ }
+ var fvalue = this.formatDate(value);
+ if(this.ddMatch && this.ddMatch.test(fvalue)){
+ this.markInvalid(String.format(this.disabledDatesText, fvalue));
+ return false;
+ }
+ return true;
},
-
- restrictHeight : function()
- {
- var mh = 0;
- Roo.each(this.innerLists, function(il,i) {
- var el = this.views[i].getEl();
- el.dom.style.height = '';
- var inner = el.dom;
- var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
- // only adjust heights on other ones..
- mh = Math.max(h, mh);
- if (i < 1) {
-
- el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
- il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
-
- }
-
-
- }, this);
-
- this.list.beginUpdate();
- this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
- this.list.alignTo(this.el, this.listAlign);
- this.list.endUpdate();
-
+
+ // private
+ // Provides logic to override the default TriggerField.validateBlur which just returns true
+ validateBlur : function(){
+ return !this.menu || !this.menu.isVisible();
},
-
- // -- store handlers..
- // private
- onBeforeLoad : function()
+ getName: function()
{
- if(!this.hasFocus){
- return;
- }
- this.innerLists[0].update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- this.restrictHeight();
- this.selectedIndex = -1;
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+
},
- // private
- onLoad : function(a,b,c,d)
- {
- if (!this.loadingChildren) {
- // then we are loading the top level. - hide the children
- for (var i = 1;i < this.views.length; i++) {
- this.views[i].getEl().setStyle({ display : 'none' });
- }
- var lw = Math.floor(
- ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
- );
+
+ /**
+ * Returns the current date value of the date field.
+ * @return {Date} The date value
+ */
+ getValue : function(){
- this.list.setWidth(lw); // default to '1'
+ return this.hiddenField ?
+ this.hiddenField.value :
+ this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
+ },
-
- }
- if(!this.hasFocus){
- return;
+ /**
+ * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
+ * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
+ * (the default format used is "m/d/y").
+ * <br />Usage:
+ * <pre><code>
+//All of these calls set the same date value (May 4, 2006)
+
+//Pass a date object:
+var dt = new Date('5/4/06');
+dateField.setValue(dt);
+
+//Pass a date string (default format):
+dateField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+dateField.format = 'Y-m-d';
+dateField.setValue('2006-5-4');
+</code></pre>
+ * @param {String/Date} date The date or valid date string
+ */
+ setValue : function(date){
+ if (this.hiddenField) {
+ this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
}
+ Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+ // make sure the value field is always stored as a date..
+ this.value = this.parseDate(date);
- if(this.store.getCount() > 0) {
- this.expand();
- this.restrictHeight();
- } else {
- this.onEmptyResults();
- }
- if (!this.loadingChildren) {
- this.selectActive();
- }
- /*
- this.stores[1].loadData([]);
- this.stores[2].loadData([]);
- this.views
- */
-
- //this.el.focus();
},
-
-
+
// private
- onLoadException : function()
- {
- this.collapse();
- Roo.log(this.store.reader.jsonData);
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ parseDate : function(value){
+
+ if (value instanceof Date) {
+ if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ return '';
+ }
+ return value;
+ }
+
+
+ if(!value || value instanceof Date){
+ return value;
}
-
-
+ var v = Date.parseDate(value, this.format);
+ if (!v && this.useIso) {
+ v = Date.parseDate(value, 'Y-m-d');
+ }
+ if(!v && this.altFormats){
+ if(!this.altFormatsArray){
+ this.altFormatsArray = this.altFormats.split("|");
+ }
+ for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
+ v = Date.parseDate(value, this.altFormatsArray[i]);
+ }
+ }
+ if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ v = '';
+ }
+ return v;
},
- // no cleaning of leading spaces on blur here.
- cleanLeadingSpace : function(e) { },
-
- onSelectChange : function (view, sels, opts )
- {
- var ix = view.getSelectedIndexes();
-
- if (opts.list > this.maxColumns - 2) {
- if (view.store.getCount()< 1) {
- this.views[opts.list ].getEl().setStyle({ display : 'none' });
+ // private
+ formatDate : function(date, fmt){
+ return (!date || !(date instanceof Date)) ?
+ date : date.dateFormat(fmt || this.format);
+ },
- } else {
- if (ix.length) {
- // used to clear ?? but if we are loading unselected
- this.setFromData(view.store.getAt(ix[0]).data);
- }
-
- }
+ // private
+ menuListeners : {
+ select: function(m, d){
- return;
+ this.setValue(d);
+ this.fireEvent('select', this, d);
+ },
+ show : function(){ // retain focus styling
+ this.onFocus();
+ },
+ hide : function(){
+ this.focus.defer(10, this);
+ var ml = this.menuListeners;
+ this.menu.un("select", ml.select, this);
+ this.menu.un("show", ml.show, this);
+ this.menu.un("hide", ml.hide, this);
}
-
- if (!ix.length) {
- // this get's fired when trigger opens..
- // this.setFromData({});
- var str = this.stores[opts.list+1];
- str.data.clear(); // removeall wihtout the fire events..
+ },
+
+ // private
+ // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+ onTriggerClick : function(){
+ if(this.disabled){
return;
}
-
- var rec = view.store.getAt(ix[0]);
-
- this.setFromData(rec.data);
- this.fireEvent('select', this, rec, ix[0]);
-
- var lw = Math.floor(
- (
- (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
- ) / this.maxColumns
- );
- this.loadingChildren = true;
- this.stores[opts.list+1].loadDataFromChildren( rec );
- this.loadingChildren = false;
- var dl = this.stores[opts.list+1]. getTotalCount();
-
- this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
-
- this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
- for (var i = opts.list+2; i < this.views.length;i++) {
- this.views[i].getEl().setStyle({ display : 'none' });
- }
-
- this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
- this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
-
- if (this.isLoading) {
- // this.selectActive(opts.list);
+ if(this.menu == null){
+ this.menu = new Roo.menu.DateMenu();
}
-
+ Roo.apply(this.menu.picker, {
+ showClear: this.allowBlank,
+ minDate : this.minValue,
+ maxDate : this.maxValue,
+ disabledDatesRE : this.ddMatch,
+ disabledDatesText : this.disabledDatesText,
+ disabledDays : this.disabledDays,
+ disabledDaysText : this.disabledDaysText,
+ format : this.useIso ? 'Y-m-d' : this.format,
+ minText : String.format(this.minText, this.formatDate(this.minValue)),
+ maxText : String.format(this.maxText, this.formatDate(this.maxValue))
+ });
+ this.menu.on(Roo.apply({}, this.menuListeners, {
+ scope:this
+ }));
+ this.menu.picker.setValue(this.getValue() || new Date());
+ this.menu.show(this.el, "tl-bl?");
},
-
-
-
-
- onDoubleClick : function()
- {
- this.collapse(); //??
+
+ beforeBlur : function(){
+ var v = this.parseDate(this.getRawValue());
+ if(v){
+ this.setValue(v);
+ }
},
-
-
-
-
-
- // private
- recordToStack : function(store, prop, value, stack)
- {
- 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;
- var srec = false;
- if(store.getCount() < 1){
+
+ /*@
+ * overide
+ *
+ */
+ isDirty : function() {
+ if(this.disabled) {
return false;
}
- store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- srec = r;
- return false;
- }
- if (r.data.cn && r.data.cn.length) {
- cstore.loadDataFromChildren( r);
- var cret = _this.recordToStack(cstore, prop, value, stack);
- if (cret !== false) {
- record = cret;
- srec = r;
- return false;
- }
- }
-
- return true;
- });
- if (record == false) {
- return false
+
+ if(typeof(this.startValue) === 'undefined'){
+ return false;
}
- stack.unshift(srec);
- return record;
+
+ return String(this.getValue()) !== String(this.startValue);
+
},
-
- /*
- * find the stack of stores that match our value.
- *
- *
- */
-
- selectActive : function ()
+ // @overide
+ cleanLeadingSpace : function(e)
{
- // if store is not loaded, then we will need to wait for that to happen first.
- var stack = [];
- this.recordToStack(this.store, this.valueField, this.getValue(), stack);
- for (var i = 0; i < stack.length; i++ ) {
- this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
- }
-
+ return;
}
-
-
-
-
-
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.Checkbox
- * @extends Roo.form.Field
- * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
- * @constructor
- * Creates a new Checkbox
- * @param {Object} config Configuration options
+ * @class Roo.form.MonthField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new MonthField
+* @param {Object} config
*/
-Roo.form.Checkbox = function(config){
- Roo.form.Checkbox.superclass.constructor.call(this, config);
- this.addEvents({
+Roo.form.MonthField = function(config){
+
+ Roo.form.MonthField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+
/**
- * @event check
- * Fires when the checkbox is checked or unchecked.
- * @param {Roo.form.Checkbox} this This checkbox
- * @param {Boolean} checked The new checked value
+ * @event select
+ * Fires when a date is selected
+ * @param {Roo.form.MonthFieeld} combo This combo box
+ * @param {Date} date The date selected
*/
- check : true
+ 'select' : true
+
});
+
+
+ if(typeof this.minValue == "string") {
+ this.minValue = this.parseDate(this.minValue);
+ }
+ if(typeof this.maxValue == "string") {
+ this.maxValue = this.parseDate(this.maxValue);
+ }
+ this.ddMatch = null;
+ if(this.disabledDates){
+ var dd = this.disabledDates;
+ var re = "(?:";
+ for(var i = 0; i < dd.length; i++){
+ re += dd[i];
+ if(i != dd.length-1) {
+ re += "|";
+ }
+ }
+ this.ddMatch = new RegExp(re + ")");
+ }
};
-Roo.extend(Roo.form.Checkbox, Roo.form.Field, {
- /**
- * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
- */
- focusClass : undefined,
+Roo.extend(Roo.form.MonthField, Roo.form.TriggerField, {
/**
- * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+ * @cfg {String} format
+ * The default date format string which can be overriden for localization support. The format must be
+ * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
*/
- fieldClass: "x-form-field",
+ format : "M Y",
/**
- * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
+ * @cfg {String} altFormats
+ * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+ * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
*/
- checked: false,
+ altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
/**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "checkbox", autocomplete: "off"})
+ * @cfg {Array} disabledDays
+ * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
*/
- defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
+ disabledDays : [0,1,2,3,4,5,6],
/**
- * @cfg {String} boxLabel The text that appears beside the checkbox
+ * @cfg {String} disabledDaysText
+ * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
*/
- boxLabel : "",
- /**
- * @cfg {String} inputValue The value that should go into the generated input element's value attribute
- */
- inputValue : '1',
+ disabledDaysText : "Disabled",
/**
- * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
- */
- valueOff: '0', // value when not checked..
+ * @cfg {Array} disabledDates
+ * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
+ * expression so they are very powerful. Some examples:
+ * <ul>
+ * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
+ * <li>["03/08", "09/16"] would disable those days for every year</li>
+ * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
+ * <li>["03/../2006"] would disable every day in March 2006</li>
+ * <li>["^03"] would disable every day in every March</li>
+ * </ul>
+ * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
+ * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+ */
+ disabledDates : null,
+ /**
+ * @cfg {String} disabledDatesText
+ * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+ */
+ disabledDatesText : "Disabled",
+ /**
+ * @cfg {Date/String} minValue
+ * The minimum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ minValue : null,
+ /**
+ * @cfg {Date/String} maxValue
+ * The maximum allowed date. Can be either a Javascript date object or a string date in a
+ * valid format (defaults to null).
+ */
+ maxValue : null,
+ /**
+ * @cfg {String} minText
+ * The error text to display when the date in the cell is before minValue (defaults to
+ * 'The date in this field must be after {minValue}').
+ */
+ minText : "The date in this field must be equal to or after {0}",
+ /**
+ * @cfg {String} maxTextf
+ * The error text to display when the date in the cell is after maxValue (defaults to
+ * 'The date in this field must be before {maxValue}').
+ */
+ maxText : "The date in this field must be equal to or before {0}",
+ /**
+ * @cfg {String} invalidText
+ * The error text to display when the date in the field is invalid (defaults to
+ * '{value} is not a valid date - it must be in the format {format}').
+ */
+ invalidText : "{0} is not a valid date - it must be in the format {1}",
+ /**
+ * @cfg {String} triggerClass
+ * An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
+ * which displays a calendar icon).
+ */
+ triggerClass : 'x-form-date-trigger',
+
- actionMode : 'viewEl',
- //
+ /**
+ * @cfg {Boolean} useIso
+ * if enabled, then the date field will use a hidden field to store the
+ * real value as iso formated date. default (true)
+ */
+ useIso : true,
+ /**
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "text", size: "10", autocomplete: "off"})
+ */
// private
- itemCls : 'x-menu-check-item x-form-item',
- groupClass : 'x-menu-group-item',
- inputType : 'hidden',
-
+ defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
- inSetChecked: false, // check that we are not calling self...
+ // private
+ hiddenField: false,
- inputElement: false, // real input element?
- basedOn: false, // ????
+ hideMonthPicker : 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');
+ onRender : function(ct, position)
+ {
+ Roo.form.MonthField.superclass.onRender.call(this, ct, position);
+ if (this.useIso) {
+ this.el.dom.removeAttribute('name');
+ this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
+ 'before', true);
+ this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
+ // prevent input submission
+ this.hiddenName = this.name;
}
+
+
},
-
- 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);
- /*
- if(this.inputValue !== undefined){
- this.el.dom.value = this.inputValue;
+ validateValue : function(value)
+ {
+ value = this.formatDate(value);
+ if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
+ return false;
+ }
+ if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+ return true;
+ }
+ var svalue = value;
+ value = this.parseDate(value);
+ if(!value){
+ this.markInvalid(String.format(this.invalidText, svalue, this.format));
+ return false;
+ }
+ var time = value.getTime();
+ if(this.minValue && time < this.minValue.getTime()){
+ this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
+ return false;
+ }
+ if(this.maxValue && time > this.maxValue.getTime()){
+ this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
+ return false;
+ }
+ /*if(this.disabledDays){
+ var day = value.getDay();
+ for(var i = 0; i < this.disabledDays.length; i++) {
+ if(day === this.disabledDays[i]){
+ this.markInvalid(this.disabledDaysText);
+ return false;
+ }
+ }
}
*/
- //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
- this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
- var viewEl = this.wrap.createChild({
- tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
- this.viewEl = viewEl;
- this.wrap.on('click', this.onClick, this);
-
- this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
- this.el.on('propertychange', this.setFromHidden, this); //ie
-
-
-
- if(this.boxLabel){
- this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
- // viewEl.on('click', this.onClick, this);
+ var fvalue = this.formatDate(value);
+ /*if(this.ddMatch && this.ddMatch.test(fvalue)){
+ this.markInvalid(String.format(this.disabledDatesText, fvalue));
+ return false;
}
- //if(this.checked){
- this.setChecked(this.checked);
- //}else{
- //this.checked = this.el.dom;
- //}
-
+ */
+ return true;
},
// private
- initValue : Roo.emptyFn,
+ // Provides logic to override the default TriggerField.validateBlur which just returns true
+ validateBlur : function(){
+ return !this.menu || !this.menu.isVisible();
+ },
/**
- * Returns the checked state of the checkbox.
- * @return {Boolean} True if checked, else false
+ * Returns the current date value of the date field.
+ * @return {Date} The date value
*/
getValue : function(){
- if(this.el){
- return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
- }
- return this.valueOff;
+
+
+ return this.hiddenField ?
+ this.hiddenField.value :
+ this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
},
- // private
- onClick : function(){
- if (this.disabled) {
- return;
- }
- this.setChecked(!this.checked);
+ /**
+ * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
+ * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
+ * (the default format used is "m/d/y").
+ * <br />Usage:
+ * <pre><code>
+//All of these calls set the same date value (May 4, 2006)
- //if(this.el.dom.checked != this.checked){
- // this.setValue(this.el.dom.checked);
- // }
- },
+//Pass a date object:
+var dt = new Date('5/4/06');
+monthField.setValue(dt);
- /**
- * 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.
+//Pass a date string (default format):
+monthField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+monthField.format = 'Y-m-d';
+monthField.setValue('2006-5-4');
+</code></pre>
+ * @param {String/Date} date The date or valid date string
*/
- setValue : function(v,suppressEvent){
+ setValue : function(date){
+ Roo.log('month setValue' + date);
+ // can only be first of month..
+ var val = this.parseDate(date);
- //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
- //if(this.el && this.el.dom){
- // this.el.dom.checked = this.checked;
- // this.el.dom.defaultChecked = this.checked;
- //}
- this.setChecked(String(v) === String(this.inputValue), suppressEvent);
- //this.fireEvent("check", this, this.checked);
+ if (this.hiddenField) {
+ this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+ }
+ Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+ this.value = this.parseDate(date);
},
- // private..
- setChecked : function(state,suppressEvent)
- {
- if (this.inSetChecked) {
- this.checked = state;
- return;
+
+ // private
+ parseDate : function(value){
+ if(!value || value instanceof Date){
+ value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
+ return value;
}
-
-
- if(this.wrap){
- this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+ var v = Date.parseDate(value, this.format);
+ if (!v && this.useIso) {
+ v = Date.parseDate(value, 'Y-m-d');
}
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent('check', this, state);
+ if (v) {
+ //
+ v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
}
- this.inSetChecked = true;
-
- this.el.dom.value = state ? this.inputValue : this.valueOff;
-
- this.inSetChecked = false;
- },
- // handle setting of hidden value by some other method!!?!?
- setFromHidden: function()
- {
- if(!this.el){
- return;
+
+ if(!v && this.altFormats){
+ if(!this.altFormatsArray){
+ this.altFormatsArray = this.altFormats.split("|");
+ }
+ for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
+ v = Date.parseDate(value, this.altFormatsArray[i]);
+ }
}
- //console.log("SET FROM HIDDEN");
- //alert('setFrom hidden');
- this.setValue(this.el.dom.value);
+ return v;
},
-
- onDestroy : function()
- {
- if(this.viewEl){
- Roo.get(this.viewEl).remove();
+
+ // private
+ formatDate : function(date, fmt){
+ return (!date || !(date instanceof Date)) ?
+ date : date.dateFormat(fmt || this.format);
+ },
+
+ // private
+ menuListeners : {
+ select: function(m, d){
+ this.setValue(d);
+ this.fireEvent('select', this, d);
+ },
+ show : function(){ // retain focus styling
+ this.onFocus();
+ },
+ hide : function(){
+ this.focus.defer(10, this);
+ var ml = this.menuListeners;
+ this.menu.un("select", ml.select, this);
+ this.menu.un("show", ml.show, this);
+ this.menu.un("hide", ml.hide, this);
}
-
- Roo.form.Checkbox.superclass.onDestroy.call(this);
},
+ // private
+ // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+ onTriggerClick : function(){
+ if(this.disabled){
+ return;
+ }
+ if(this.menu == null){
+ this.menu = new Roo.menu.DateMenu();
+
+ }
+
+ Roo.apply(this.menu.picker, {
+
+ showClear: this.allowBlank,
+ minDate : this.minValue,
+ maxDate : this.maxValue,
+ disabledDatesRE : this.ddMatch,
+ disabledDatesText : this.disabledDatesText,
+
+ format : this.useIso ? 'Y-m-d' : this.format,
+ minText : String.format(this.minText, this.formatDate(this.minValue)),
+ maxText : String.format(this.maxText, this.formatDate(this.maxValue))
+
+ });
+ this.menu.on(Roo.apply({}, this.menuListeners, {
+ scope:this
+ }));
+
+
+ var m = this.menu;
+ var p = m.picker;
+
+ // hide month picker get's called when we called by 'before hide';
+
+ var ignorehide = true;
+ p.hideMonthPicker = function(disableAnim){
+ if (ignorehide) {
+ return;
+ }
+ if(this.monthPicker){
+ Roo.log("hideMonthPicker called");
+ if(disableAnim === true){
+ this.monthPicker.hide();
+ }else{
+ this.monthPicker.slideOut('t', {duration:.2});
+ p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
+ p.fireEvent("select", this, this.value);
+ m.hide();
+ }
+ }
+ }
+
+ Roo.log('picker set value');
+ Roo.log(this.getValue());
+ p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
+ m.show(this.el, 'tl-bl?');
+ ignorehide = false;
+ // this will trigger hideMonthPicker..
+
+
+ // hidden the day picker
+ Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
+
+
+
+
+
+ p.showMonthPicker.defer(100, p);
- setBoxLabel : function(str)
- {
- this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
+
+
+ },
+
+ beforeBlur : function(){
+ var v = this.parseDate(this.getRawValue());
+ if(v){
+ this.setValue(v);
+ }
}
+ /** @cfg {Boolean} grow @hide */
+ /** @cfg {Number} growMin @hide */
+ /** @cfg {Number} growMax @hide */
+ /**
+ * @hide
+ * @method autoSize
+ */
});/*
* Based on:
* Ext JS Library 1.1.1
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.Radio
- * @extends Roo.form.Checkbox
- * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
- * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
* @constructor
- * Creates a new Radio
+ * Create a new ComboBox.
* @param {Object} config Configuration options
*/
-Roo.form.Radio = function(){
- Roo.form.Radio.superclass.constructor.apply(this, arguments);
-};
-Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
- inputType: 'radio',
-
- /**
- * If this radio is part of a group, it will return the selected value
- * @return {String}
- */
- getGroupValue : function(){
- return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
- },
-
-
- onRender : function(ct, position){
- Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
-
- if(this.inputValue !== undefined){
- this.el.dom.value = this.inputValue;
- }
-
- this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
- //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
- //var viewEl = this.wrap.createChild({
- // tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
- //this.viewEl = viewEl;
- //this.wrap.on('click', this.onClick, this);
-
- //this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
- //this.el.on('propertychange', this.setFromHidden, this); //ie
-
+Roo.form.ComboBox = function(config){
+ Roo.form.ComboBox.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event expand
+ * Fires when the dropdown list is expanded
+ * @param {Roo.form.ComboBox} combo This combo box
+ */
+ 'expand' : true,
+ /**
+ * @event collapse
+ * Fires when the dropdown list is collapsed
+ * @param {Roo.form.ComboBox} combo This combo box
+ */
+ 'collapse' : true,
+ /**
+ * @event beforeselect
+ * Fires before a list item is selected. Return false to cancel the selection.
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record} record The data record returned from the underlying store
+ * @param {Number} index The index of the selected item in the dropdown list
+ */
+ 'beforeselect' : true,
+ /**
+ * @event select
+ * Fires when a list item is selected
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
+ * @param {Number} index The index of the selected item in the dropdown list
+ */
+ 'select' : true,
+ /**
+ * @event beforequery
+ * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
+ * The event object passed has these properties:
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {String} query The query
+ * @param {Boolean} forceAll true to force "all" query
+ * @param {Boolean} cancel true to cancel the query
+ * @param {Object} e The query event object
+ */
+ 'beforequery': true,
+ /**
+ * @event add
+ * Fires when the 'add' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.ComboBox} combo This combo box
+ */
+ 'add' : true,
+ /**
+ * @event edit
+ * Fires when the 'edit' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+ */
+ 'edit' : true
- if(this.boxLabel){
- this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
- // viewEl.on('click', this.onClick, this);
- }
- if(this.checked){
- this.el.dom.checked = 'checked' ;
+ });
+ if(this.transform){
+ this.allowDomMove = false;
+ var s = Roo.getDom(this.transform);
+ if(!this.hiddenName){
+ this.hiddenName = s.name;
}
-
- },
- /**
- * 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){
-
-
- //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
- //if(this.el && this.el.dom){
- // this.el.dom.checked = this.checked;
- // this.el.dom.defaultChecked = this.checked;
- //}
- this.setChecked(String(v) === String(this.inputValue), suppressEvent);
-
- this.el.dom.form[this.name].value = v;
-
- //this.fireEvent("check", this, this.checked);
- },
- // private..
- setChecked : function(state,suppressEvent)
- {
-
- if(this.wrap){
- this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+ if(!this.store){
+ this.mode = 'local';
+ var d = [], opts = s.options;
+ for(var i = 0, len = opts.length;i < len; i++){
+ var o = opts[i];
+ var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
+ if(o.selected) {
+ this.value = value;
+ }
+ d.push([value, o.text]);
+ }
+ this.store = new Roo.data.SimpleStore({
+ 'id': 0,
+ fields: ['value', 'text'],
+ data : d
+ });
+ this.valueField = 'value';
+ this.displayField = 'text';
}
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent('check', this, state);
+ s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
+ if(!this.lazyRender){
+ this.target = true;
+ this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
+ s.parentNode.removeChild(s); // remove it
+ this.render(this.el.parentNode);
+ }else{
+ s.parentNode.removeChild(s); // remove it
}
-
-
-
-
- },
- reset : function(){
- // this.setValue(this.resetValue);
- //this.originalValue = this.getValue();
- this.clearInvalid();
- }
-
-});Roo.rtf = {}; // namespace
-Roo.rtf.Hex = function(hex)
-{
- this.hexstr = hex;
-};
-Roo.rtf.Paragraph = function(opts)
-{
- this.content = []; ///??? is that used?
-};Roo.rtf.Span = function(opts)
-{
- this.value = opts.value;
-};
-
-Roo.rtf.Group = function(parent)
-{
- // we dont want to acutally store parent - it will make debug a nightmare..
- this.content = [];
- this.cn = [];
-
-
-
-};
-Roo.rtf.Group.prototype = {
- ignorable : false,
- content: false,
- cn: false,
- addContent : function(node) {
- // could set styles...
- this.content.push(node);
- },
- addChild : function(cn)
- {
- this.cn.push(cn);
- },
- // only for images really...
- toDataURL : function()
- {
- var mimetype = false;
- switch(true) {
- case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0:
- mimetype = "image/png";
- break;
- case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
- mimetype = "image/jpeg";
- break;
- default :
- return 'about:blank'; // ?? error?
- }
-
-
- var hexstring = this.content[this.content.length-1].value;
-
- return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
- return String.fromCharCode(parseInt(a, 16));
- }).join(""));
+ }
+ if (this.store) {
+ this.store = Roo.factory(this.store, Roo.data);
}
-};
-// this looks like it's normally the {rtf{ .... }}
-Roo.rtf.Document = function()
-{
- // we dont want to acutally store parent - it will make debug a nightmare..
- this.rtlch = [];
- this.content = [];
- this.cn = [];
-
-};
-Roo.extend(Roo.rtf.Document, Roo.rtf.Group, {
- addChild : function(cn)
- {
- this.cn.push(cn);
- switch(cn.type) {
- case 'rtlch': // most content seems to be inside this??
- case 'listtext':
- case 'shpinst':
- this.rtlch.push(cn);
- return;
- default:
- this[cn.type] = cn;
+ this.selectedIndex = -1;
+ if(this.mode == 'local'){
+ if(config.queryDelay === undefined){
+ this.queryDelay = 10;
+ }
+ if(config.minChars === undefined){
+ this.minChars = 0;
}
-
- },
-
- getElementsByType : function(type)
- {
- var ret = [];
- this._getElementsByType(type, ret, this.cn, 'rtf');
- return ret;
- },
- _getElementsByType : function (type, ret, search_array, path)
- {
- search_array.forEach(function(n,i) {
- if (n.type == type) {
- n.path = path + '/' + n.type + ':' + i;
- ret.push(n);
- }
- if (n.cn.length > 0) {
- this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
- }
- },this);
}
-
-});
-
-Roo.rtf.Ctrl = function(opts)
-{
- this.value = opts.value;
- this.param = opts.param;
};
-/**
- *
- *
- * based on this https://github.com/iarna/rtf-parser
- * it's really only designed to extract pict from pasted RTF
- *
- * usage:
- *
- * var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
- *
- *
- */
-
-
-
+Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
+ /**
+ * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+ */
+ /**
+ * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
+ * rendering into an Roo.Editor, defaults to false)
+ */
+ /**
+ * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
+ * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+ */
+ /**
+ * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+ */
+ /**
+ * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
+ * the dropdown list (defaults to undefined, with no header element)
+ */
-Roo.rtf.Parser = function(text) {
- //super({objectMode: true})
- this.text = '';
- this.parserState = this.parseText;
-
- // these are for interpeter...
- this.doc = {};
- ///this.parserState = this.parseTop
- this.groupStack = [];
- this.hexStore = [];
- this.doc = false;
-
- this.groups = []; // where we put the return.
-
- for (var ii = 0; ii < text.length; ++ii) {
- ++this.cpos;
-
- if (text[ii] === '\n') {
- ++this.row;
- this.col = 1;
- } else {
- ++this.col;
- }
- this.parserState(text[ii]);
- }
+ /**
+ * @cfg {String/Roo.Template} tpl The template to use to render the output
+ */
+
+ // private
+ defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
+ /**
+ * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+ */
+ listWidth: undefined,
+ /**
+ * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'text' if mode = 'local')
+ */
+ displayField: undefined,
+ /**
+ * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'value' if mode = 'local').
+ * Note: use of a valueField requires the user make a selection
+ * in order for a value to be mapped.
+ */
+ valueField: undefined,
+ /**
+ * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
+ * field's data value (defaults to the underlying DOM element's name)
+ */
+ hiddenName: undefined,
+ /**
+ * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
+ */
+ listClass: '',
+ /**
+ * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
+ */
+ selectedClass: 'x-combo-selected',
+ /**
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
+ * which displays a downward arrow icon).
+ */
+ triggerClass : 'x-form-arrow-trigger',
+ /**
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+ */
+ shadow:'sides',
+ /**
+ * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+ * anchor positions (defaults to 'tl-bl')
+ */
+ listAlign: 'tl-bl?',
+ /**
+ * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
+ */
+ maxHeight: 300,
+ /**
+ * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
+ * query specified by the allQuery config option (defaults to 'query')
+ */
+ triggerAction: 'query',
+ /**
+ * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
+ * (defaults to 4, does not apply if editable = false)
+ */
+ minChars : 4,
+ /**
+ * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
+ * delay (typeAheadDelay) if it matches a known value (defaults to false)
+ */
+ typeAhead: false,
+ /**
+ * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
+ * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+ */
+ queryDelay: 500,
+ /**
+ * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
+ * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
+ */
+ pageSize: 0,
+ /**
+ * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
+ * when editable = true (defaults to false)
+ */
+ selectOnFocus:false,
+ /**
+ * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+ */
+ queryParam: 'query',
+ /**
+ * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
+ * when mode = 'remote' (defaults to 'Loading...')
+ */
+ loadingText: 'Loading...',
+ /**
+ * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+ */
+ resizable: false,
+ /**
+ * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+ */
+ handleHeight : 8,
+ /**
+ * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+ * traditional select (defaults to true)
+ */
+ editable: true,
+ /**
+ * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+ */
+ allQuery: '',
+ /**
+ * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+ */
+ mode: 'remote',
+ /**
+ * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+ * listWidth has a higher value)
+ */
+ minListWidth : 70,
+ /**
+ * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
+ * allow the user to set arbitrary text into the field (defaults to false)
+ */
+ forceSelection:false,
+ /**
+ * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+ * if typeAhead = true (defaults to 250)
+ */
+ typeAheadDelay : 250,
+ /**
+ * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
+ * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+ */
+ valueNotFoundText : undefined,
+ /**
+ * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+ */
+ blockFocus : false,
-};
-Roo.rtf.Parser.prototype = {
- text : '', // string being parsed..
- controlWord : '',
- controlWordParam : '',
- hexChar : '',
- doc : false,
- group: false,
- groupStack : false,
- hexStore : false,
+ /**
+ * @cfg {Boolean} disableClear Disable showing of clear button.
+ */
+ disableClear : false,
+ /**
+ * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ */
+ alwaysQuery : false,
+ //private
+ addicon : false,
+ editicon: false,
- cpos : 0,
- row : 1, // reportin?
- col : 1, //
-
+ // element that contains real text value.. (when hidden is used..)
- push : function (el)
+ // private
+ onRender : function(ct, position)
{
- var m = 'cmd'+ el.type;
- if (typeof(this[m]) == 'undefined') {
- Roo.log('invalid cmd:' + el.type);
- return;
+ Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
+
+ if(this.hiddenName){
+ this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
+ 'before', true);
+ this.hiddenField.value =
+ this.hiddenValue !== undefined ? this.hiddenValue :
+ this.value !== undefined ? this.value : '';
+
+ // prevent input submission
+ this.el.dom.removeAttribute('name');
+
+
}
- this[m](el);
- //Roo.log(el);
- },
- flushHexStore : function()
- {
- if (this.hexStore.length < 1) {
- return;
+
+ if(Roo.isGecko){
+ this.el.dom.setAttribute('autocomplete', 'off');
}
- var hexstr = this.hexStore.map(
- function(cmd) {
- return cmd.value;
- }).join('');
-
- this.group.addContent( new Roo.rtf.Hex( hexstr ));
-
-
- this.hexStore.splice(0)
+
+ var cls = 'x-combo-list';
+
+ this.list = new Roo.Layer({
+ shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+ });
+
+ var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+ this.list.swallowEvent('mousewheel');
+ this.assetHeight = 0;
+
+ if(this.title){
+ this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+ this.assetHeight += this.header.getHeight();
+ }
+
+ this.innerList = this.list.createChild({cls:cls+'-inner'});
+ this.innerList.on('mouseover', this.onViewOver, this);
+ this.innerList.on('mousemove', this.onViewMove, this);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
- },
-
- cmdgroupstart : function()
- {
- this.flushHexStore();
- if (this.group) {
- this.groupStack.push(this.group);
+ if(this.allowBlank && !this.pageSize && !this.disableClear){
+ this.footer = this.list.createChild({cls:cls+'-ft'});
+ this.pageTb = new Roo.Toolbar(this.footer);
+
}
- // parent..
- if (this.doc === false) {
- this.group = this.doc = new Roo.rtf.Document();
- return;
+ if(this.pageSize){
+ this.footer = this.list.createChild({cls:cls+'-ft'});
+ this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
+ {pageSize: this.pageSize});
}
- this.group = new Roo.rtf.Group(this.group);
- },
- cmdignorable : function()
- {
- this.flushHexStore();
- this.group.ignorable = true;
- },
- cmdendparagraph : function()
- {
- this.flushHexStore();
- this.group.addContent(new Roo.rtf.Paragraph());
- },
- cmdgroupend : function ()
- {
- this.flushHexStore();
- var endingGroup = this.group;
-
- this.group = this.groupStack.pop();
- if (this.group) {
- this.group.addChild(endingGroup);
+ if (this.pageTb && this.allowBlank && !this.disableClear) {
+ var _this = this;
+ this.pageTb.add(new Roo.Toolbar.Fill(), {
+ cls: 'x-btn-icon x-btn-clear',
+ text: ' ',
+ handler: function()
+ {
+ _this.collapse();
+ _this.clearValue();
+ _this.onSelect(false, -1);
+ }
+ });
+ }
+ if (this.footer) {
+ this.assetHeight += this.footer.getHeight();
}
+
+ if(!this.tpl){
+ this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+ }
+
+ this.view = new Roo.View(this.innerList, this.tpl, {
+ singleSelect:true,
+ store: this.store,
+ selectedClass: this.selectedClass
+ });
+
+ this.view.on('click', this.onViewClick, this);
+
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
+
+ if(this.resizable){
+ this.resizer = new Roo.Resizable(this.list, {
+ pinned:true, handles:'se'
+ });
+ this.resizer.on('resize', function(r, w, h){
+ this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
+ this.listWidth = w;
+ this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
+ this.restrictHeight();
+ }, this);
+ this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
+ }
+ if(!this.editable){
+ this.editable = true;
+ this.setEditable(false);
+ }
- var doc = this.group || this.doc;
- //if (endingGroup instanceof FontTable) {
- // doc.fonts = endingGroup.table
- //} else if (endingGroup instanceof ColorTable) {
- // doc.colors = endingGroup.table
- //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
- if (endingGroup.ignorable === false) {
- //code
- this.groups.push(endingGroup);
- // Roo.log( endingGroup );
+ if (typeof(this.events.add.listeners) != 'undefined') {
+
+ this.addicon = this.wrap.createChild(
+ {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
+
+ this.addicon.on('click', function(e) {
+ this.fireEvent('add', this);
+ }, this);
}
- //Roo.each(endingGroup.content, function(item)) {
- // doc.addContent(item);
- //}
- //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
- //}
- },
- cmdtext : function (cmd)
- {
- this.flushHexStore();
- if (!this.group) { // an RTF fragment, missing the {\rtf1 header
- //this.group = this.doc
- return; // we really don't care about stray text...
+ if (typeof(this.events.edit.listeners) != 'undefined') {
+
+ this.editicon = this.wrap.createChild(
+ {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
+ if (this.addicon) {
+ this.editicon.setStyle('margin-left', '40px');
+ }
+ this.editicon.on('click', function(e) {
+
+ // we fire even if inothing is selected..
+ this.fireEvent('edit', this, this.lastData );
+
+ }, this);
}
- this.group.addContent(new Roo.rtf.Span(cmd));
+
+
+
},
- cmdcontrolword : function (cmd)
- {
- this.flushHexStore();
- if (!this.group.type) {
- this.group.type = cmd.value;
- return;
+
+ // private
+ initEvents : function(){
+ Roo.form.ComboBox.superclass.initEvents.call(this);
+
+ this.keyNav = new Roo.KeyNav(this.el, {
+ "up" : function(e){
+ this.inKeyMode = true;
+ this.selectPrev();
+ },
+
+ "down" : function(e){
+ if(!this.isExpanded()){
+ this.onTriggerClick();
+ }else{
+ this.inKeyMode = true;
+ this.selectNext();
+ }
+ },
+
+ "enter" : function(e){
+ this.onViewClick();
+ //return true;
+ },
+
+ "esc" : function(e){
+ this.collapse();
+ },
+
+ "tab" : function(e){
+ this.onViewClick(false);
+ this.fireEvent("specialkey", this, e);
+ return true;
+ },
+
+ scope : this,
+
+ doRelay : function(foo, bar, hname){
+ if(hname == 'down' || this.scope.isExpanded()){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ }
+ return true;
+ },
+
+ forceKeyDown: true
+ });
+ this.queryDelay = Math.max(this.queryDelay || 10,
+ this.mode == 'local' ? 10 : 250);
+ this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
+ if(this.typeAhead){
+ this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
}
- this.group.addContent(new Roo.rtf.Ctrl(cmd));
- // we actually don't care about ctrl words...
- return ;
- /*
- var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
- if (this[method]) {
- this[method](cmd.param)
- } else {
- if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
+ if(this.editable !== false){
+ this.el.on("keyup", this.onKeyUp, this);
}
- */
- },
- cmdhexchar : function(cmd) {
- this.hexStore.push(cmd);
- },
- cmderror : function(cmd) {
- throw cmd.value;
- },
-
- /*
- _flush (done) {
- if (this.text !== '\u0000') this.emitText()
- done()
- }
- */
-
-
- parseText : function(c)
- {
- if (c === '\\') {
- this.parserState = this.parseEscapes;
- } else if (c === '{') {
- this.emitStartGroup();
- } else if (c === '}') {
- this.emitEndGroup();
- } else if (c === '\x0A' || c === '\x0D') {
- // cr/lf are noise chars
- } else {
- this.text += c;
+ if(this.forceSelection){
+ this.on('blur', this.doForce, this);
}
},
-
- parseEscapes: function (c)
- {
- if (c === '\\' || c === '{' || c === '}') {
- this.text += c;
- this.parserState = this.parseText;
- } else {
- this.parserState = this.parseControlSymbol;
- this.parseControlSymbol(c);
+
+ onDestroy : function(){
+ if(this.view){
+ this.view.setStore(null);
+ this.view.el.removeAllListeners();
+ this.view.el.remove();
+ this.view.purgeListeners();
+ }
+ if(this.list){
+ this.list.destroy();
+ }
+ if(this.store){
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('loadexception', this.onLoadException, this);
}
+ Roo.form.ComboBox.superclass.onDestroy.call(this);
},
- parseControlSymbol: function(c)
- {
- if (c === '~') {
- this.text += '\u00a0'; // nbsp
- this.parserState = this.parseText
- } else if (c === '-') {
- this.text += '\u00ad'; // soft hyphen
- } else if (c === '_') {
- this.text += '\u2011'; // non-breaking hyphen
- } else if (c === '*') {
- this.emitIgnorable();
- this.parserState = this.parseText;
- } else if (c === "'") {
- this.parserState = this.parseHexChar;
- } else if (c === '|') { // formula cacter
- this.emitFormula();
- this.parserState = this.parseText;
- } else if (c === ':') { // subentry in an index entry
- this.emitIndexSubEntry();
- this.parserState = this.parseText;
- } else if (c === '\x0a') {
- this.emitEndParagraph();
- this.parserState = this.parseText;
- } else if (c === '\x0d') {
- this.emitEndParagraph();
- this.parserState = this.parseText;
- } else {
- this.parserState = this.parseControlWord;
- this.parseControlWord(c);
+
+ // private
+ fireKey : function(e){
+ if(e.isNavKeyPress() && !this.list.isVisible()){
+ this.fireEvent("specialkey", this, e);
}
},
- parseHexChar: function (c)
- {
- if (/^[A-Fa-f0-9]$/.test(c)) {
- this.hexChar += c;
- if (this.hexChar.length >= 2) {
- this.emitHexChar();
- this.parserState = this.parseText;
- }
+
+ // private
+ onResize: function(w, h){
+ Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
+
+ if(typeof w != 'number'){
+ // we do not handle it!?!?
return;
}
- this.emitError("Invalid character \"" + c + "\" in hex literal.");
- this.parserState = this.parseText;
+ var tw = this.trigger.getWidth();
+ tw += this.addicon ? this.addicon.getWidth() : 0;
+ tw += this.editicon ? this.editicon.getWidth() : 0;
+ var x = w - tw;
+ this.el.setWidth( this.adjustWidth('input', x));
+
+ this.trigger.setStyle('left', x+'px');
- },
- parseControlWord : function(c)
- {
- if (c === ' ') {
- this.emitControlWord();
- this.parserState = this.parseText;
- } else if (/^[-\d]$/.test(c)) {
- this.parserState = this.parseControlWordParam;
- this.controlWordParam += c;
- } else if (/^[A-Za-z]$/.test(c)) {
- this.controlWord += c;
- } else {
- this.emitControlWord();
- this.parserState = this.parseText;
- this.parseText(c);
+ if(this.list && this.listWidth === undefined){
+ var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
}
+
+
+
},
- parseControlWordParam : function (c) {
- if (/^\d$/.test(c)) {
- this.controlWordParam += c;
- } else if (c === ' ') {
- this.emitControlWord();
- this.parserState = this.parseText;
- } else {
- this.emitControlWord();
- this.parserState = this.parseText;
- this.parseText(c);
+
+ /**
+ * Allow or prevent the user from directly editing the field text. If false is passed,
+ * the user will only be able to select from the items defined in the dropdown list. This method
+ * is the runtime equivalent of setting the 'editable' config option at config time.
+ * @param {Boolean} value True to allow the user to directly edit the field text
+ */
+ setEditable : function(value){
+ if(value == this.editable){
+ return;
+ }
+ this.editable = value;
+ if(!value){
+ this.el.dom.setAttribute('readOnly', true);
+ this.el.on('mousedown', this.onTriggerClick, this);
+ this.el.addClass('x-combo-noedit');
+ }else{
+ this.el.dom.setAttribute('readOnly', false);
+ this.el.un('mousedown', this.onTriggerClick, this);
+ this.el.removeClass('x-combo-noedit');
}
},
-
-
-
-
- emitText : function () {
- if (this.text === '') {
+
+ // private
+ onBeforeLoad : function(){
+ if(!this.hasFocus){
return;
}
- this.push({
- type: 'text',
- value: this.text,
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- this.text = ''
+ this.innerList.update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ this.restrictHeight();
+ this.selectedIndex = -1;
},
- emitControlWord : function ()
- {
- this.emitText();
- if (this.controlWord === '') {
- // do we want to track this - it seems just to cause problems.
- //this.emitError('empty control word');
- } else {
- this.push({
- type: 'controlword',
- value: this.controlWord,
- param: this.controlWordParam !== '' && Number(this.controlWordParam),
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
+
+ // private
+ onLoad : function(){
+ if(!this.hasFocus){
+ return;
}
- this.controlWord = '';
- this.controlWordParam = '';
- },
- emitStartGroup : function ()
- {
- this.emitText();
- this.push({
- type: 'groupstart',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- },
- emitEndGroup : function ()
- {
- this.emitText();
- this.push({
- type: 'groupend',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- },
- emitIgnorable : function ()
- {
- this.emitText();
- this.push({
- type: 'ignorable',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
+ if(this.store.getCount() > 0){
+ this.expand();
+ this.restrictHeight();
+ if(this.lastQuery == this.allQuery){
+ if(this.editable){
+ this.el.dom.select();
+ }
+ if(!this.selectByValue(this.value, true)){
+ this.select(0, true);
+ }
+ }else{
+ this.selectNext();
+ if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
+ this.taTask.delay(this.typeAheadDelay);
+ }
+ }
+ }else{
+ this.onEmptyResults();
+ }
+ //this.el.focus();
},
- emitHexChar : function ()
+ // private
+ onLoadException : function()
{
- this.emitText();
- this.push({
- type: 'hexchar',
- value: this.hexChar,
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- this.hexChar = ''
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+
+
},
- emitError : function (message)
- {
- this.emitText();
- this.push({
- type: 'error',
- value: message,
- row: this.row,
- col: this.col,
- char: this.cpos //,
- //stack: new Error().stack
- });
+ // private
+ onTypeAhead : function(){
+ if(this.store.getCount() > 0){
+ var r = this.store.getAt(0);
+ var newValue = r.data[this.displayField];
+ var len = newValue.length;
+ var selStart = this.getRawValue().length;
+ if(selStart != len){
+ this.setRawValue(newValue);
+ this.selectText(selStart, newValue.length);
+ }
+ }
},
- emitEndParagraph : function () {
- this.emitText();
- this.push({
- type: 'endparagraph',
- pos: this.cpos,
- row: this.row,
- col: this.col
- });
- }
-
-} ;
-Roo.htmleditor = {};
-
-/**
- * @class Roo.htmleditor.Filter
- * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
- * @cfg {DomElement} node The node to iterate and filter
- * @cfg {boolean|String|Array} tag Tags to replace
- * @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
- */
+ // private
+ onSelect : function(record, index){
+ if(this.fireEvent('beforeselect', this, record, index) !== false){
+ this.setFromData(index > -1 ? record.data : false);
+ this.collapse();
+ this.fireEvent('select', this, record, index);
+ }
+ },
+ /**
+ * Returns the currently selected field value or empty string if no value is set.
+ * @return {String} value The selected value
+ */
+ getValue : function(){
+ if(this.valueField){
+ return typeof this.value != 'undefined' ? this.value : '';
+ }
+ return Roo.form.ComboBox.superclass.getValue.call(this);
+ },
-Roo.htmleditor.Filter = function(cfg) {
- Roo.apply(this.cfg);
- // this does not actually call walk as it's really just a abstract class
-}
-
-
-Roo.htmleditor.Filter.prototype = {
-
- node: false,
-
- tag: false,
+ /**
+ * Clears any text/value currently set in the field
+ */
+ clearValue : function(){
+ if(this.hiddenField){
+ this.hiddenField.value = '';
+ }
+ this.value = '';
+ this.setRawValue('');
+ this.lastSelectionText = '';
+
+ },
- // overrride to do replace comments.
- replaceComment : false,
-
- // overrride to do replace or do stuff with tags..
- replaceTag : false,
-
- walk : function(dom)
- {
- Roo.each( Array.from(dom.childNodes), function( e ) {
- switch(true) {
-
- case e.nodeType == 8 && this.replaceComment !== false: // comment
- this.replaceComment(e);
- return;
-
- case e.nodeType != 1: //not a node.
- return;
-
- case this.tag === true: // everything
- case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
- case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
- case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
- case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
- if (this.replaceTag && false === this.replaceTag(e)) {
- return;
- }
- if (e.hasChildNodes()) {
- this.walk(e);
- }
- return;
-
- default: // tags .. that do not match.
- if (e.hasChildNodes()) {
- this.walk(e);
- }
+ /**
+ * Sets the specified value into the field. If the value finds a match, the corresponding record text
+ * will be displayed in the field. If the value does not match the data value of an existing item,
+ * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+ * Otherwise the field will be blank (although the value will still be set).
+ * @param {String} value The value to match
+ */
+ setValue : function(v){
+ var text = v;
+ if(this.valueField){
+ var r = this.findRecord(this.valueField, v);
+ if(r){
+ text = r.data[this.displayField];
+ }else if(this.valueNotFoundText !== undefined){
+ text = this.valueNotFoundText;
}
+ }
+ this.lastSelectionText = text;
+ if(this.hiddenField){
+ this.hiddenField.value = v;
+ }
+ Roo.form.ComboBox.superclass.setValue.call(this, text);
+ this.value = v;
+ },
+ /**
+ * @property {Object} the last set data for the element
+ */
+
+ lastData : false,
+ /**
+ * Sets the value of the field based on a object which is related to the record format for the store.
+ * @param {Object} value the value to set as. or false on reset?
+ */
+ setFromData : function(o){
+ var dv = ''; // display value
+ var vv = ''; // value value..
+ this.lastData = o;
+ if (this.displayField) {
+ dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
+ } else {
+ // this is an error condition!!!
+ Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
+ }
+
+ if(this.valueField){
+ vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
+ }
+ if(this.hiddenField){
+ this.hiddenField.value = vv;
- }, this);
+ this.lastSelectionText = dv;
+ Roo.form.ComboBox.superclass.setValue.call(this, dv);
+ this.value = vv;
+ return;
+ }
+ // no hidden field.. - we store the value in 'value', but still display
+ // display field!!!!
+ this.lastSelectionText = dv;
+ Roo.form.ComboBox.superclass.setValue.call(this, dv);
+ this.value = vv;
+
},
+ // private
+ reset : function(){
+ // overridden so that last data is reset..
+ this.setValue(this.resetValue);
+ this.originalValue = this.getValue();
+ this.clearInvalid();
+ this.lastData = false;
+ if (this.view) {
+ this.view.clearSelections();
+ }
+ },
+ // private
+ findRecord : function(prop, value){
+ var record;
+ if(this.store.getCount() > 0){
+ this.store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ return false;
+ }
+ return true;
+ });
+ }
+ return record;
+ },
-
- removeNodeKeepChildren : function( node)
+ getName: function()
{
-
- ar = Array.from(node.childNodes);
- for (var i = 0; i < ar.length; i++) {
-
- node.removeChild(ar[i]);
- // what if we need to walk these???
- node.parentNode.insertBefore(ar[i], node);
-
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+
+ },
+ // private
+ onViewMove : function(e, t){
+ this.inKeyMode = false;
+ },
+
+ // private
+ onViewOver : function(e, t){
+ if(this.inKeyMode){ // prevent key nav and mouse over conflicts
+ return;
+ }
+ var item = this.view.findItemFromChild(t);
+ if(item){
+ var index = this.view.indexOf(item);
+ this.select(index, false);
}
- node.parentNode.removeChild(node);
},
- searchTag : function(dom)
+ // private
+ onViewClick : function(doFocus)
{
- if(this.tag === false) {
- return;
+ var index = this.view.getSelectedIndexes()[0];
+ var r = this.store.getAt(index);
+ if(r){
+ this.onSelect(r, index);
+ }
+ if(doFocus !== false && !this.blockFocus){
+ this.el.focus();
}
+ },
- var els = dom.getElementsByTagName(this.tag);
+ // private
+ restrictHeight : function(){
+ this.innerList.dom.style.height = '';
+ var inner = this.innerList.dom;
+ var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
+ this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+ this.list.beginUpdate();
+ this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
+ this.list.alignTo(this.el, this.listAlign);
+ this.list.endUpdate();
+ },
- Roo.each(Array.from(els), function(e){
- if(e.parentNode == null) {
- return;
+ // private
+ onEmptyResults : function(){
+ this.collapse();
+ },
+
+ /**
+ * Returns true if the dropdown list is expanded, else false.
+ */
+ isExpanded : function(){
+ return this.list.isVisible();
+ },
+
+ /**
+ * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {String} value The data value of the item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
+ * @return {Boolean} True if the value matched an item in the list, else false
+ */
+ selectByValue : function(v, scrollIntoView){
+ if(v !== undefined && v !== null){
+ var r = this.findRecord(this.valueField || this.displayField, v);
+ if(r){
+ this.select(this.store.indexOf(r), scrollIntoView);
+ return true;
}
- if(this.replaceTag) {
- this.replaceTag(e);
+ }
+ return false;
+ },
+
+ /**
+ * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {Number} index The zero-based index of the list item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
+ */
+ select : function(index, scrollIntoView){
+ this.selectedIndex = index;
+ this.view.select(index);
+ if(scrollIntoView !== false){
+ var el = this.view.getNode(index);
+ if(el){
+ this.innerList.scrollChildIntoView(el, false);
}
- }, this);
- }
-};
+ }
+ },
-/**
- * @class Roo.htmleditor.FilterAttributes
- * clean attributes and styles including http:// etc.. in attribute
- * @constructor
-* Run a new Attribute Filter
-* @param {Object} config Configuration options
- */
-Roo.htmleditor.FilterAttributes = function(cfg)
-{
- Roo.apply(this, cfg);
- this.attrib_black = this.attrib_black || [];
- this.attrib_white = this.attrib_white || [];
+ // private
+ selectNext : function(){
+ var ct = this.store.getCount();
+ if(ct > 0){
+ if(this.selectedIndex == -1){
+ this.select(0);
+ }else if(this.selectedIndex < ct-1){
+ this.select(this.selectedIndex+1);
+ }
+ }
+ },
- this.attrib_clean = this.attrib_clean || [];
- this.style_white = this.style_white || [];
- this.style_black = this.style_black || [];
- this.walk(cfg.node);
-}
+ // private
+ selectPrev : function(){
+ var ct = this.store.getCount();
+ if(ct > 0){
+ if(this.selectedIndex == -1){
+ this.select(0);
+ }else if(this.selectedIndex != 0){
+ this.select(this.selectedIndex-1);
+ }
+ }
+ },
-Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
-{
- tag: true, // all tags
-
- attrib_black : false, // array
- attrib_clean : false,
- attrib_white : false,
+ // private
+ onKeyUp : function(e){
+ if(this.editable !== false && !e.isSpecialKey()){
+ this.lastKey = e.getKey();
+ this.dqTask.delay(this.queryDelay);
+ }
+ },
- style_white : false,
- style_black : false,
-
-
- replaceTag : function(node)
- {
- if (!node.attributes || !node.attributes.length) {
- return true;
+ // private
+ validateBlur : function(){
+ return !this.list || !this.list.isVisible();
+ },
+
+ // private
+ initQuery : function(){
+ this.doQuery(this.getRawValue());
+ },
+
+ // private
+ doForce : function(){
+ if(this.el.dom.value.length > 0){
+ this.el.dom.value =
+ this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+
}
-
- for (var i = node.attributes.length-1; i > -1 ; i--) {
- var a = node.attributes[i];
- //console.log(a);
- if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
- node.removeAttribute(a.name);
- continue;
- }
-
-
-
- if (a.name.toLowerCase().substr(0,2)=='on') {
- node.removeAttribute(a.name);
- continue;
- }
-
-
- if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
- node.removeAttribute(a.name);
- continue;
- }
- if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
- this.cleanAttr(node,a.name,a.value); // fixme..
- continue;
- }
- if (a.name == 'style') {
- this.cleanStyle(node,a.name,a.value);
- continue;
- }
- /// clean up MS crap..
- // tecnically this should be a list of valid class'es..
-
-
- if (a.name == 'class') {
- if (a.value.match(/^Mso/)) {
- node.removeAttribute('class');
- }
-
- if (a.value.match(/^body$/)) {
- node.removeAttribute('class');
+ },
+
+ /**
+ * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
+ * query allowing the query action to be canceled if needed.
+ * @param {String} query The SQL query to execute
+ * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+ * in the field than the minimum specified by the minChars config option. It also clears any filter previously
+ * saved in the current store (defaults to false)
+ */
+ doQuery : function(q, forceAll){
+ if(q === undefined || q === null){
+ q = '';
+ }
+ var qe = {
+ query: q,
+ forceAll: forceAll,
+ combo: this,
+ cancel:false
+ };
+ if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+ return false;
+ }
+ q = qe.query;
+ forceAll = qe.forceAll;
+ if(forceAll === true || (q.length >= this.minChars)){
+ if(this.lastQuery != q || this.alwaysQuery){
+ this.lastQuery = q;
+ if(this.mode == 'local'){
+ this.selectedIndex = -1;
+ if(forceAll){
+ this.store.clearFilter();
+ }else{
+ this.store.filter(this.displayField, q);
+ }
+ this.onLoad();
+ }else{
+ this.store.baseParams[this.queryParam] = q;
+ this.store.load({
+ params: this.getParams(q)
+ });
+ this.expand();
}
- continue;
+ }else{
+ this.selectedIndex = -1;
+ this.onLoad();
}
-
-
- // style cleanup!?
- // class cleanup?
-
}
- return true; // clean children
},
-
- cleanAttr: function(node, n,v)
- {
-
- if (v.match(/^\./) || v.match(/^\//)) {
- return;
+
+ // private
+ getParams : function(q){
+ var p = {};
+ //p[this.queryParam] = q;
+ if(this.pageSize){
+ p.start = 0;
+ p.limit = this.pageSize;
}
- if (v.match(/^(http|https):\/\//)
- || v.match(/^mailto:/)
- || v.match(/^ftp:/)
- || v.match(/^data:/)
- ) {
+ return p;
+ },
+
+ /**
+ * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+ */
+ collapse : function(){
+ if(!this.isExpanded()){
return;
}
- if (v.match(/^#/)) {
- return;
+ this.list.hide();
+ Roo.get(document).un('mousedown', this.collapseIf, this);
+ Roo.get(document).un('mousewheel', this.collapseIf, this);
+ if (!this.editable) {
+ Roo.get(document).un('keydown', this.listKeyPress, this);
}
- if (v.match(/^\{/)) { // allow template editing.
+ this.fireEvent('collapse', this);
+ },
+
+ // private
+ collapseIf : function(e){
+ if(!e.within(this.wrap) && !e.within(this.list)){
+ this.collapse();
+ }
+ },
+
+ /**
+ * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+ */
+ expand : function(){
+ if(this.isExpanded() || !this.hasFocus){
return;
}
-// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
- node.removeAttribute(n);
+ this.list.alignTo(this.el, this.listAlign);
+ this.list.show();
+ Roo.get(document).on('mousedown', this.collapseIf, this);
+ Roo.get(document).on('mousewheel', this.collapseIf, this);
+ if (!this.editable) {
+ Roo.get(document).on('keydown', this.listKeyPress, this);
+ }
+ this.fireEvent('expand', this);
},
- cleanStyle : function(node, n,v)
- {
- if (v.match(/expression/)) { //XSS?? should we even bother..
- node.removeAttribute(n);
+
+ // private
+ // Implements the default empty TriggerField.onTriggerClick function
+ onTriggerClick : function(){
+ if(this.disabled){
return;
}
-
- var parts = v.split(/;/);
- var clean = [];
-
- Roo.each(parts, function(p) {
- p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if (!p.length) {
- return true;
+ if(this.isExpanded()){
+ this.collapse();
+ if (!this.blockFocus) {
+ this.el.focus();
}
- var l = p.split(':').shift().replace(/\s+/g,'');
- l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
- return true;
- }
- //Roo.log()
- // only allow 'c whitelisted system attributes'
- if ( this.style_white.length && style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
- return true;
+ }else {
+ this.hasFocus = true;
+ if(this.triggerAction == 'all') {
+ this.doQuery(this.allQuery, true);
+ } else {
+ this.doQuery(this.getRawValue());
+ }
+ if (!this.blockFocus) {
+ this.el.focus();
}
-
-
- clean.push(p);
- return true;
- },this);
- if (clean.length) {
- node.setAttribute(n, clean.join(';'));
- } else {
- node.removeAttribute(n);
}
-
- }
-
-
-
-
-});/**
- * @class Roo.htmleditor.FilterBlack
- * remove blacklisted elements.
- * @constructor
- * Run a new Blacklisted Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterBlack = function(cfg)
-{
- Roo.apply(this, cfg);
- this.walk(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
-{
- tag : true, // all elements.
-
- replaceTag : function(n)
- {
- n.parentNode.removeChild(n);
- }
-});
-/**
- * @class Roo.htmleditor.FilterComment
- * remove comments.
- * @constructor
-* Run a new Comments Filter
-* @param {Object} config Configuration options
- */
-Roo.htmleditor.FilterComment = function(cfg)
-{
- this.walk(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
-{
-
- replaceComment : function(n)
- {
- n.parentNode.removeChild(n);
- }
-});/**
- * @class Roo.htmleditor.FilterKeepChildren
- * remove tags but keep children
- * @constructor
- * Run a new Keep Children Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterKeepChildren = function(cfg)
-{
- Roo.apply(this, cfg);
- if (this.tag === false) {
- return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
- }
- // hacky?
- if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
- this.cleanNamespace = true;
- }
-
- this.walk(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
-{
- cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
-
- replaceTag : function(node)
+ },
+ listKeyPress : function(e)
{
- // walk children...
- //Roo.log(node.tagName);
- var ar = Array.from(node.childNodes);
- //remove first..
+ //Roo.log('listkeypress');
+ // scroll to first matching element based on key pres..
+ if (e.isSpecialKey()) {
+ return false;
+ }
+ var k = String.fromCharCode(e.getKey()).toUpperCase();
+ //Roo.log(k);
+ var match = false;
+ var csel = this.view.getSelectedNodes();
+ var cselitem = false;
+ if (csel.length) {
+ var ix = this.view.indexOf(csel[0]);
+ cselitem = this.store.getAt(ix);
+ if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
+ cselitem = false;
+ }
+
+ }
- for (var i = 0; i < ar.length; i++) {
- var e = ar[i];
- if (e.nodeType == 1) {
- if (
- (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
- || // array and it matches
- (typeof(this.tag) == 'string' && this.tag == e.tagName)
- ||
- (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
- ||
- (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
- ) {
- this.replaceTag(ar[i]); // child is blacklisted as well...
- continue;
+ this.store.each(function(v) {
+ if (cselitem) {
+ // start at existing selection.
+ if (cselitem.id == v.id) {
+ cselitem = false;
}
+ return;
}
- }
- ar = Array.from(node.childNodes);
- for (var i = 0; i < ar.length; i++) {
-
- node.removeChild(ar[i]);
- // what if we need to walk these???
- node.parentNode.insertBefore(ar[i], node);
- if (this.tag !== false) {
- this.walk(ar[i]);
+ if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
+ match = this.store.indexOf(v);
+ return false;
}
- }
- //Roo.log("REMOVE:" + node.tagName);
- node.parentNode.removeChild(node);
- return false; // don't walk children
-
-
- }
-});/**
- * @class Roo.htmleditor.FilterParagraph
- * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
- * like on 'push' to remove the <p> tags and replace them with line breaks.
- * @constructor
- * Run a new Paragraph Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterParagraph = function(cfg)
-{
- // no need to apply config.
- this.searchTag(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
-{
-
-
- tag : 'P',
-
-
- replaceTag : function(node)
- {
+ }, this);
- if (node.childNodes.length == 1 &&
- node.childNodes[0].nodeType == 3 &&
- node.childNodes[0].textContent.trim().length < 1
- ) {
- // remove and replace with '<BR>';
- node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
- return false; // no need to walk..
- }
-
- var ar = Array.from(node.childNodes);
- for (var i = 0; i < ar.length; i++) {
- node.removeChild(ar[i]);
- // what if we need to walk these???
- node.parentNode.insertBefore(ar[i], node);
+ if (match === false) {
+ return true; // no more action?
}
- // now what about this?
- // <p> </p>
-
- // double BR.
- node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
- node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
- node.parentNode.removeChild(node);
-
- return false;
+ // scroll to?
+ this.view.select(match);
+ var sn = Roo.get(this.view.getSelectedNodes()[0]);
+ sn.scrollIntoView(sn.dom.parentNode, false);
+ },
+ cleanLeadingSpace : function()
+ {
+ // override textfield strip white space (trigers set on blur)
+ }
- }
-
-});/**
- * @class Roo.htmleditor.FilterHashLink
- * remove hash link
- * @constructor
- * Run a new Hash Link Filter
- * @param {Object} config Configuration options
+ /**
+ * @cfg {Boolean} grow
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMin
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMax
+ * @hide
+ */
+ /**
+ * @hide
+ * @method autoSize
+ */
+});/*
+ * Copyright(c) 2010-2012, Roo J Solutions Limited
+ *
+ * Licence LGPL
+ *
*/
- Roo.htmleditor.FilterHashLink = function(cfg)
- {
- // no need to apply config.
- // this.walk(cfg.node);
- this.searchTag(cfg.node);
- }
+/**
+ * @class Roo.form.ComboBoxArray
+ * @extends Roo.form.TextField
+ * A facebook style adder... for lists of email / people / countries etc...
+ * pick multiple items from a combo box, and shows each one.
+ *
+ * Fred [x] Brian [x] [Pick another |v]
+ *
+ *
+ * For this to work: it needs various extra information
+ * - normal combo problay has
+ * name, hiddenName
+ * + displayField, valueField
+ *
+ * For our purpose...
+ *
+ *
+ * If we change from 'extends' to wrapping...
+ *
+ *
+ *
- Roo.extend(Roo.htmleditor.FilterHashLink, Roo.htmleditor.Filter,
- {
-
- tag : 'A',
-
-
- replaceTag : function(node)
- {
- for(var i = 0; i < node.attributes.length; i ++) {
- var a = node.attributes[i];
-
- if(a.name.toLowerCase() == 'href' && a.value.startsWith('#')) {
- this.removeNodeKeepChildren(node);
- }
- }
-
- return false;
- }
-
- });/**
- * @class Roo.htmleditor.FilterSpan
- * filter span's with no attributes out..
* @constructor
- * Run a new Span Filter
+ * Create a new ComboBoxArray.
* @param {Object} config Configuration options
*/
-
-Roo.htmleditor.FilterSpan = function(cfg)
-{
- // no need to apply config.
- this.searchTag(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
-{
-
- tag : 'SPAN',
-
- replaceTag : function(node)
- {
- if (node.attributes && node.attributes.length > 0) {
- return true; // walk if there are any.
- }
- Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
- return false;
-
- }
-
-});/**
- * @class Roo.htmleditor.FilterTableWidth
- try and remove table width data - as that frequently messes up other stuff.
- *
- * was cleanTableWidths.
- *
- * Quite often pasting from word etc.. results in tables with column and widths.
- * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
- *
- * @constructor
- * Run a new Table Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterTableWidth = function(cfg)
-{
- // no need to apply config.
- this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
- this.walk(cfg.node);
-}
-Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+Roo.form.ComboBoxArray = function(config)
{
-
-
-
- replaceTag: function(node) {
-
-
-
- if (node.hasAttribute('width')) {
- node.removeAttribute('width');
- }
+ this.addEvents({
+ /**
+ * @event beforeremove
+ * Fires before remove the value from the list
+ * @param {Roo.form.ComboBoxArray} _self This combo box array
+ * @param {Roo.form.ComboBoxArray.Item} item removed item
+ */
+ 'beforeremove' : true,
+ /**
+ * @event remove
+ * Fires when remove the value from the list
+ * @param {Roo.form.ComboBoxArray} _self This combo box array
+ * @param {Roo.form.ComboBoxArray.Item} item removed item
+ */
+ 'remove' : true
-
- if (node.hasAttribute("style")) {
- // pretty basic...
-
- var styles = node.getAttribute("style").split(";");
- var nstyle = [];
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
- return;
- }
- // what ever is left... we allow.
- nstyle.push(s);
- });
- node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
- if (!nstyle.length) {
- node.removeAttribute('style');
- }
- }
- return true; // continue doing children..
- }
-});/**
- * @class Roo.htmleditor.FilterWord
- * try and clean up all the mess that Word generates.
- *
- * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters
-
- * @constructor
- * Run a new Span Filter
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.FilterWord = function(cfg)
-{
- // no need to apply config.
- this.replaceDocBullets(cfg.node);
+ });
+
+ Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
+
+ this.items = new Roo.util.MixedCollection(false);
+
+ // construct the child combo...
- this.replaceAname(cfg.node);
- // this is disabled as the removal is done by other filters;
- // this.walk(cfg.node);
- this.replaceImageTable(cfg.node);
+
+
+
+
}
-Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
-{
- tag: true,
-
+
+Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
+{
+ /**
+ * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
+ */
+
+ lastData : false,
+ // behavies liek a hiddne field
+ inputType: 'hidden',
/**
- * Clean up MS wordisms...
+ * @cfg {Number} width The width of the box that displays the selected element
+ */
+ width: 300,
+
+
+
+ /**
+ * @cfg {String} name The name of the visable items on this form (eg. titles not ids)
*/
- replaceTag : function(node)
+ name : false,
+ /**
+ * @cfg {String} hiddenName The hidden name of the field, often contains an comma seperated list of names
+ */
+ hiddenName : false,
+ /**
+ * @cfg {String} seperator The value seperator normally ','
+ */
+ seperator : ',',
+
+
+ // private the array of items that are displayed..
+ items : false,
+ // private - the hidden field el.
+ hiddenEl : false,
+ // private - the filed el..
+ el : false,
+
+ //validateValue : function() { return true; }, // all values are ok!
+ //onAddClick: function() { },
+
+ onRender : function(ct, position)
{
-
- // no idea what this does - span with text, replaceds with just text.
- if(
- node.nodeName == 'SPAN' &&
- !node.hasAttributes() &&
- node.childNodes.length == 1 &&
- node.firstChild.nodeName == "#text"
- ) {
- var textNode = node.firstChild;
- node.removeChild(textNode);
- if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
- node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
- }
- node.parentNode.insertBefore(textNode, node);
- if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
- node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
- }
-
- node.parentNode.removeChild(node);
- return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
- }
-
+ // create the standard hidden element
+ //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
- if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
- node.parentNode.removeChild(node);
- return false; // dont do chidlren
- }
- //Roo.log(node.tagName);
- // remove - but keep children..
- if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
- //Roo.log('-- removed');
- while (node.childNodes.length) {
- var cn = node.childNodes[0];
- node.removeChild(cn);
- node.parentNode.insertBefore(cn, node);
- // move node to parent - and clean it..
- if (cn.nodeType == 1) {
- this.replaceTag(cn);
- }
-
- }
- node.parentNode.removeChild(node);
- /// no need to iterate chidlren = it's got none..
- //this.iterateChildren(node, this.cleanWord);
- return false; // no need to iterate children.
- }
- // clean styles
- if (node.className.length) {
-
- var cn = node.className.split(/\W+/);
- var cna = [];
- Roo.each(cn, function(cls) {
- if (cls.match(/Mso[a-zA-Z]+/)) {
- return;
- }
- cna.push(cls);
- });
- node.className = cna.length ? cna.join(' ') : '';
- if (!cna.length) {
- node.removeAttribute("class");
- }
+
+ // give fake names to child combo;
+ this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
+ this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
+
+ this.combo = Roo.factory(this.combo, Roo.form);
+ this.combo.onRender(ct, position);
+ if (typeof(this.combo.width) != 'undefined') {
+ this.combo.onResize(this.combo.width,0);
}
- if (node.hasAttribute("lang")) {
- node.removeAttribute("lang");
- }
+ this.combo.initEvents();
- if (node.hasAttribute("style")) {
-
- var styles = node.getAttribute("style").split(";");
- var nstyle = [];
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
- return;
- }
- // what ever is left... we allow.
- nstyle.push(s);
- });
- node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
- if (!nstyle.length) {
- node.removeAttribute('style');
- }
- }
- return true; // do children
+ // assigned so form know we need to do this..
+ this.store = this.combo.store;
+ this.valueField = this.combo.valueField;
+ this.displayField = this.combo.displayField ;
+ this.combo.wrap.addClass('x-cbarray-grp');
+
+ var cbwrap = this.combo.wrap.createChild(
+ {tag: 'div', cls: 'x-cbarray-cb'},
+ this.combo.el.dom
+ );
- },
-
- styleToObject: function(node)
- {
- var styles = (node.getAttribute("style") || '').split(";");
- var ret = {};
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- // what ever is left... we allow.
- ret[kv[0].trim()] = kv[1];
+ this.hiddenEl = this.combo.wrap.createChild({
+ tag: 'input', type:'hidden' , name: this.hiddenName, value : ''
});
- return ret;
- },
-
-
- replaceAname : function (doc)
- {
- // replace all the a/name without..
- var aa = Array.from(doc.getElementsByTagName('a'));
- for (var i = 0; i < aa.length; i++) {
- var a = aa[i];
- if (a.hasAttribute("name")) {
- a.removeAttribute("name");
- }
- if (a.hasAttribute("href")) {
- continue;
- }
- // reparent children.
- this.removeNodeKeepChildren(a);
+ this.el = this.combo.wrap.createChild({
+ tag: 'input', type:'hidden' , name: this.name, value : ''
+ });
+ // this.el.dom.removeAttribute("name");
+
+
+ this.outerWrap = this.combo.wrap;
+ this.wrap = cbwrap;
+
+ this.outerWrap.setWidth(this.width);
+ this.outerWrap.dom.removeChild(this.el.dom);
+
+ this.wrap.dom.appendChild(this.el.dom);
+ this.outerWrap.dom.removeChild(this.combo.trigger.dom);
+ this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
+
+ this.combo.trigger.setStyle('position','relative');
+ this.combo.trigger.setStyle('left', '0px');
+ this.combo.trigger.setStyle('top', '2px');
+
+ this.combo.el.setStyle('vertical-align', 'text-bottom');
+
+ //this.trigger.setStyle('vertical-align', 'top');
+
+ // this should use the code from combo really... on('add' ....)
+ if (this.adder) {
- }
+ this.adder = this.outerWrap.createChild(
+ {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});
+ var _t = this;
+ this.adder.on('click', function(e) {
+ _t.fireEvent('adderclick', this, e);
+ }, _t);
+ }
+ //var _t = this;
+ //this.adder.on('click', this.onAddClick, _t);
+ this.combo.on('select', function(cb, rec, ix) {
+ this.addItem(rec.data);
+
+ cb.setValue('');
+ cb.el.dom.value = '';
+ //cb.lastData = rec.data;
+ // add to list
+
+ }, this);
+
+
+
+
},
-
- replaceDocBullets : function(doc)
+ getName: function()
{
- // this is a bit odd - but it appears some indents use ql-indent-1
- //Roo.log(doc.innerHTML);
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return this.hiddenName ? this.hiddenName : this.name;
- var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
- }
+ },
+
+
+ onResize: function(w, h){
- listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
- }
- listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
+ return;
+ // not sure if this is needed..
+ //this.combo.onResize(w,h);
+
+ if(typeof w != 'number'){
+ // we do not handle it!?!?
+ return;
}
- listpara = Array.from(doc.getElementsByClassName('ql-indent-1'));
- for( var i = 0; i < listpara.length; i ++) {
- listpara[i].className = "MsoListParagraph";
+ var tw = this.combo.trigger.getWidth();
+ tw += this.addicon ? this.addicon.getWidth() : 0;
+ tw += this.editicon ? this.editicon.getWidth() : 0;
+ var x = w - tw;
+ this.combo.el.setWidth( this.combo.adjustWidth('input', x));
+
+ this.combo.trigger.setStyle('left', '0px');
+
+ if(this.list && this.listWidth === undefined){
+ var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
+ this.list.setWidth(lw);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
}
- // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
- var htwo = Array.from(doc.getElementsByTagName('h2'));
- for( var i = 0; i < htwo.length; i ++) {
- if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
- htwo[i].className = "MsoListParagraph";
- }
+
+
+ },
+
+ addItem: function(rec)
+ {
+ var valueField = this.combo.valueField;
+ var displayField = this.combo.displayField;
+
+ if (this.items.indexOfKey(rec[valueField]) > -1) {
+ //console.log("GOT " + rec.data.id);
+ return;
}
- listpara = Array.from(doc.getElementsByClassName('MsoNormal'));
- for( var i = 0; i < listpara.length; i ++) {
- if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
- listpara[i].className = "MsoListParagraph";
- } else {
- listpara[i].className = "MsoNormalx";
- }
+
+ var x = new Roo.form.ComboBoxArray.Item({
+ //id : rec[this.idField],
+ data : rec,
+ displayField : displayField ,
+ tipField : displayField ,
+ cb : this
+ });
+ // use the
+ this.items.add(rec[valueField],x);
+ // add it before the element..
+ this.updateHiddenEl();
+ x.render(this.outerWrap, this.wrap.dom);
+ // add the image handler..
+ },
+
+ updateHiddenEl : function()
+ {
+ this.validate();
+ if (!this.hiddenEl) {
+ return;
}
-
- listpara = doc.getElementsByClassName('MsoListParagraph');
- // Roo.log(doc.innerHTML);
+ var ar = [];
+ var idField = this.combo.valueField;
+ this.items.each(function(f) {
+ ar.push(f.data[idField]);
+ });
+ this.hiddenEl.dom.value = ar.join(this.seperator);
+ this.validate();
+ },
+
+ reset : function()
+ {
+ this.items.clear();
+ Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
+ el.remove();
+ });
- while(listpara.length) {
-
- this.replaceDocBullet(listpara.item(0));
+ this.el.dom.value = '';
+ if (this.hiddenEl) {
+ this.hiddenEl.dom.value = '';
}
-
+
},
-
-
-
- replaceDocBullet : function(p)
+ getValue: function()
{
- // gather all the siblings.
- var ns = p,
- parent = p.parentNode,
- doc = parent.ownerDocument,
- items = [];
+ return this.hiddenEl ? this.hiddenEl.dom.value : '';
+ },
+ setValue: function(v) // not a valid action - must use addItems..
+ {
+
+ this.reset();
- //Roo.log("Parsing: " + p.innerText) ;
- var listtype = 'ul';
- while (ns) {
- if (ns.nodeType != 1) {
- ns = ns.nextSibling;
- continue;
- }
- if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
- //Roo.log("Missing para r q1indent - got:" + ns.className);
- break;
- }
- var spans = ns.getElementsByTagName('span');
-
- if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
- items.push(ns);
- ns = ns.nextSibling;
- has_list = true;
- if (!spans.length) {
- continue;
- }
- var ff = '';
- var se = spans[0];
- for (var i = 0; i < spans.length;i++) {
- se = spans[i];
- if (se.hasAttribute('style') && se.hasAttribute('style') && se.style.fontFamily != '') {
- ff = se.style.fontFamily;
- break;
- }
- }
-
-
- //Roo.log("got font family: " + ff);
- if (typeof(ff) != 'undefined' && !ff.match(/(Symbol|Wingdings)/) && "·o".indexOf(se.innerText.trim()) < 0) {
- listtype = 'ol';
+ if (this.store.isLocal && (typeof(v) == 'string')) {
+ // then we can use the store to find the values..
+ // comma seperated at present.. this needs to allow JSON based encoding..
+ this.hiddenEl.value = v;
+ var v_ar = [];
+ Roo.each(v.split(this.seperator), function(k) {
+ Roo.log("CHECK " + this.valueField + ',' + k);
+ var li = this.store.query(this.valueField, k);
+ if (!li.length) {
+ return;
}
+ var add = {};
+ add[this.valueField] = k;
+ add[this.displayField] = li.item(0).data[this.displayField];
- continue;
- }
- //Roo.log("no mso-list?");
-
- var spans = ns.getElementsByTagName('span');
- if (!spans.length) {
- break;
- }
- var has_list = false;
- for(var i = 0; i < spans.length; i++) {
- if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
- has_list = true;
- break;
+ this.addItem(add);
+ }, this)
+
+ }
+ if (typeof(v) == 'object' ) {
+ // then let's assume it's an array of objects..
+ Roo.each(v, function(l) {
+ var add = l;
+ if (typeof(l) == 'string') {
+ add = {};
+ add[this.valueField] = l;
+ add[this.displayField] = l
}
- }
- if (!has_list) {
- break;
- }
- items.push(ns);
- ns = ns.nextSibling;
-
-
+ this.addItem(add);
+ }, this);
+
}
- if (!items.length) {
- ns.className = "";
+
+
+ },
+ setFromData: function(v)
+ {
+ // this recieves an object, if setValues is called.
+ this.reset();
+ this.el.dom.value = v[this.displayField];
+ this.hiddenEl.dom.value = v[this.valueField];
+ if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
return;
}
+ var kv = v[this.valueField];
+ var dv = v[this.displayField];
+ kv = typeof(kv) != 'string' ? '' : kv;
+ dv = typeof(dv) != 'string' ? '' : dv;
- var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
- parent.insertBefore(ul, p);
- var lvl = 0;
- var stack = [ ul ];
- var last_li = false;
- var margin_to_depth = {};
- max_margins = -1;
+ var keys = kv.split(this.seperator);
+ var display = dv.split(this.seperator);
+ for (var i = 0 ; i < keys.length; i++) {
+ add = {};
+ add[this.valueField] = keys[i];
+ add[this.displayField] = display[i];
+ this.addItem(add);
+ }
+
- items.forEach(function(n, ipos) {
- //Roo.log("got innertHMLT=" + n.innerHTML);
-
- var spans = n.getElementsByTagName('span');
- if (!spans.length) {
- //Roo.log("No spans found");
-
- parent.removeChild(n);
-
-
- return; // skip it...
- }
-
-
- var num = 1;
- var style = {};
- for(var i = 0; i < spans.length; i++) {
-
- style = this.styleToObject(spans[i]);
- if (typeof(style['mso-list']) == 'undefined') {
- continue;
- }
- if (listtype == 'ol') {
- num = spans[i].innerText.replace(/[^0-9]+]/g,'') * 1;
- }
- spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
- break;
- }
- //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
- style = this.styleToObject(n); // mo-list is from the parent node.
- if (typeof(style['mso-list']) == 'undefined') {
- //Roo.log("parent is missing level");
-
- parent.removeChild(n);
-
- return;
- }
-
- var margin = style['margin-left'];
- if (typeof(margin_to_depth[margin]) == 'undefined') {
- max_margins++;
- margin_to_depth[margin] = max_margins;
- }
- nlvl = margin_to_depth[margin] ;
-
- if (nlvl > lvl) {
- //new indent
- var nul = doc.createElement(listtype); // what about number lists...
- if (!last_li) {
- last_li = doc.createElement('li');
- stack[lvl].appendChild(last_li);
- }
- last_li.appendChild(nul);
- stack[nlvl] = nul;
-
- }
- lvl = nlvl;
-
- // not starting at 1..
- if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
- stack[nlvl].setAttribute("start", num);
- }
-
- var nli = stack[nlvl].appendChild(doc.createElement('li'));
- last_li = nli;
- nli.innerHTML = n.innerHTML;
- //Roo.log("innerHTML = " + n.innerHTML);
- parent.removeChild(n);
-
-
-
-
- },this);
+ },
+
+ /**
+ * Validates the combox array value
+ * @return {Boolean} True if the value is valid, else false
+ */
+ validate : function(){
+ if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
+ this.clearInvalid();
+ return true;
+ }
+ return false;
+ },
+
+ validateValue : function(value){
+ return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
+
+ },
+
+ /*@
+ * overide
+ *
+ */
+ isDirty : function() {
+ if(this.disabled) {
+ return false;
+ }
+
+ try {
+ var d = Roo.decode(String(this.originalValue));
+ } catch (e) {
+ return String(this.getValue()) !== String(this.originalValue);
+ }
+ var originalValue = [];
+ for (var i = 0; i < d.length; i++){
+ originalValue.push(d[i][this.valueField]);
+ }
+ return String(this.getValue()) !== String(originalValue.join(this.seperator));
- },
-
- replaceImageTable : function(doc)
- {
- /*
- <table cellpadding=0 cellspacing=0 align=left>
- <tr>
- <td width=423 height=0></td>
- </tr>
- <tr>
- <td></td>
- <td><img width=601 height=401
- src="file:///C:/Users/Alan/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg"
- v:shapes="Picture_x0020_2"></td>
- </tr>
- </table>
- */
- var imgs = Array.from(doc.getElementsByTagName('img'));
- Roo.each(imgs, function(img) {
- var td = img.parentNode;
- if (td.nodeName != 'TD') {
- return;
- }
- var tr = td.parentNode;
- if (tr.nodeName != 'TR') {
- return;
- }
- var tbody = tr.parentNode;
- if (tbody.nodeName != 'TBODY') {
- return;
- }
- var table = tbody.parentNode;
- if (table.nodeName != 'TABLE') {
- return;
- }
- // first row..
-
- if (table.getElementsByTagName('tr').length != 2) {
- return;
- }
- if (table.getElementsByTagName('td').length != 3) {
- return;
- }
- if (table.innerText.trim() != '') {
- return;
- }
- var p = table.parentNode;
- img.parentNode.removeChild(img);
- p.insertBefore(img, table);
- p.removeChild(table);
-
-
-
- });
-
-
- }
+ }
});
+
+
+
/**
- * @class Roo.htmleditor.FilterStyleToTag
- * part of the word stuff... - certain 'styles' should be converted to tags.
- * eg.
- * font-weight: bold -> bold
- * ?? super / subscrit etc..
+ * @class Roo.form.ComboBoxArray.Item
+ * @extends Roo.BoxComponent
+ * A selected item in the list
+ * Fred [x] Brian [x] [Pick another |v]
*
* @constructor
-* Run a new style to tag filter.
-* @param {Object} config Configuration options
+ * Create a new item.
+ * @param {Object} config Configuration options
*/
-Roo.htmleditor.FilterStyleToTag = function(cfg)
-{
-
- this.tags = {
- B : [ 'fontWeight' , 'bold'],
- I : [ 'fontStyle' , 'italic'],
- //pre : [ 'font-style' , 'italic'],
- // h1.. h6 ?? font-size?
- SUP : [ 'verticalAlign' , 'super' ],
- SUB : [ 'verticalAlign' , 'sub' ]
-
-
- };
-
- Roo.apply(this, cfg);
-
-
- this.walk(cfg.node);
-
-
-
+
+Roo.form.ComboBoxArray.Item = function(config) {
+ config.id = Roo.id();
+ Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
}
-
-Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
-{
- tag: true, // all tags
-
- tags : false,
+Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
+ data : {},
+ cb: false,
+ displayField : false,
+ tipField : false,
+
+ defaultAutoCreate : {
+ tag: 'div',
+ cls: 'x-cbarray-item',
+ cn : [
+ { tag: 'div' },
+ {
+ tag: 'img',
+ width:16,
+ height : 16,
+ src : Roo.BLANK_IMAGE_URL ,
+ align: 'center'
+ }
+ ]
+
+ },
- replaceTag : function(node)
+
+ onRender : function(ct, position)
{
+ Roo.form.Field.superclass.onRender.call(this, ct, position);
-
- if (node.getAttribute("style") === null) {
- return true;
- }
- var inject = [];
- for (var k in this.tags) {
- if (node.style[this.tags[k][0]] == this.tags[k][1]) {
- inject.push(k);
- node.style.removeProperty(this.tags[k][0]);
- }
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ this.el = ct.createChild(cfg, position);
}
- if (!inject.length) {
- return true;
+
+ this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
+
+ this.el.child('div').dom.innerHTML = this.cb.renderer ?
+ this.cb.renderer(this.data) :
+ String.format('{0}',this.data[this.displayField]);
+
+
+ this.el.child('div').dom.setAttribute('qtip',
+ String.format('{0}',this.data[this.tipField])
+ );
+
+ this.el.child('img').on('click', this.remove, this);
+
+ },
+
+ remove : function()
+ {
+ if(this.cb.disabled){
+ return;
}
- var cn = Array.from(node.childNodes);
- var nn = node;
- Roo.each(inject, function(t) {
- var nc = node.ownerDocument.createElement(t);
- nn.appendChild(nc);
- nn = nc;
- });
- for(var i = 0;i < cn.length;cn++) {
- node.removeChild(cn[i]);
- nn.appendChild(cn[i]);
+
+ if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
+ this.cb.items.remove(this);
+ this.el.child('img').un('click', this.remove, this);
+ this.el.remove();
+ this.cb.updateHiddenEl();
+
+ this.cb.fireEvent('remove', this.cb, this);
}
- return true /// iterate thru
+
}
-
-})/**
- * @class Roo.htmleditor.FilterLongBr
- * BR/BR/BR - keep a maximum of 2...
+});/*
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011 Alan Knowles
+ *
+ * License - LGPL
+ */
+
+
+/**
+ * @class Roo.form.ComboNested
+ * @extends Roo.form.ComboBox
+ * A combobox for that allows selection of nested items in a list,
+ * eg.
+ *
+ * Book
+ * -> red
+ * -> green
+ * Table
+ * -> square
+ * ->red
+ * ->green
+ * -> rectangle
+ * ->green
+ *
+ *
* @constructor
- * Run a new Long BR Filter
+ * Create a new ComboNested
* @param {Object} config Configuration options
*/
+Roo.form.ComboNested = function(config){
+ Roo.form.ComboCheck.superclass.constructor.call(this, config);
+ // should verify some data...
+ // like
+ // hiddenName = required..
+ // displayField = required
+ // valudField == required
+ var req= [ 'hiddenName', 'displayField', 'valueField' ];
+ var _t = this;
+ Roo.each(req, function(e) {
+ if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
+ throw "Roo.form.ComboNested : missing value for: " + e;
+ }
+ });
+
+
+};
-Roo.htmleditor.FilterLongBr = function(cfg)
-{
- // no need to apply config.
- this.searchTag(cfg.node);
-}
-
-Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
-{
+Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
+
+ /*
+ * @config {Number} max Number of columns to show
+ */
-
- tag : 'BR',
+ maxColumns : 3,
+
+ list : null, // the outermost div..
+ innerLists : null, // the
+ views : null,
+ stores : null,
+ // private
+ loadingChildren : false,
-
- replaceTag : function(node)
+ onRender : function(ct, position)
{
+ Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
- var ps = node.nextSibling;
- while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
- ps = ps.nextSibling;
+ if(this.hiddenName){
+ this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
+ 'before', true);
+ this.hiddenField.value =
+ this.hiddenValue !== undefined ? this.hiddenValue :
+ this.value !== undefined ? this.value : '';
+
+ // prevent input submission
+ this.el.dom.removeAttribute('name');
+
+
+ }
+
+ if(Roo.isGecko){
+ this.el.dom.setAttribute('autocomplete', 'off');
+ }
+
+ var cls = 'x-combo-list';
+
+ this.list = new Roo.Layer({
+ shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+ });
+
+ var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+ this.list.swallowEvent('mousewheel');
+ this.assetHeight = 0;
+
+ if(this.title){
+ this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+ this.assetHeight += this.header.getHeight();
+ }
+ this.innerLists = [];
+ this.views = [];
+ this.stores = [];
+ for (var i =0 ; i < this.maxColumns; i++) {
+ this.onRenderList( cls, i);
}
- if (!ps && [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) {
- node.parentNode.removeChild(node); // remove last BR inside one fo these tags
- return false;
+ // 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.allowBlank && !this.disableClear) {
+
+ this.pageTb.add(new Roo.Toolbar.Fill(), {
+ cls: 'x-btn-icon x-btn-clear',
+ text: ' ',
+ handler: function()
+ {
+ _this.collapse();
+ _this.clearValue();
+ _this.onSelect(false, -1);
+ }
+ });
+ }
+ if (this.footer) {
+ this.assetHeight += this.footer.getHeight();
}
- if (!ps || ps.nodeType != 1) {
- return false;
+ },
+ onRenderList : function ( cls, i)
+ {
+
+ var lw = Math.floor(
+ ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+ );
+
+ 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.setWidth(lw);
+ il.setStyle({ 'overflow-x' : 'hidden'});
+
+ if(!this.tpl){
+ 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'
+ }
+ });
}
- if (!ps || ps.tagName != 'BR') {
-
- return false;
+ var store = this.store;
+ if (i > 0) {
+ store = new Roo.data.SimpleStore({
+ //fields : this.store.reader.meta.fields,
+ reader : this.store.reader,
+ data : [ ]
+ });
}
+ this.stores[i] = store;
+
+ 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.createDelegate(this, {list : i }, true));
+ view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
+ //view.on('click', this.onViewClick, this, { list : i });
+
+ store.on('beforeload', this.onBeforeLoad, this);
+ store.on('load', this.onLoad, this, { list : i});
+ store.on('loadexception', this.onLoadException, this);
+
+ // hide the other vies..
- if (!node.previousSibling) {
- return false;
- }
- var ps = node.previousSibling;
+ },
+
+ restrictHeight : function()
+ {
+ var mh = 0;
+ Roo.each(this.innerLists, function(il,i) {
+ var el = this.views[i].getEl();
+ el.dom.style.height = '';
+ var inner = el.dom;
+ var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
+ // only adjust heights on other ones..
+ mh = Math.max(h, mh);
+ if (i < 1) {
+
+ el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+ il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+
+ }
+
+
+ }, this);
- while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
- ps = ps.previousSibling;
+ this.list.beginUpdate();
+ this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
+ this.list.alignTo(this.el, this.listAlign);
+ this.list.endUpdate();
+
+ },
+
+
+ // -- store handlers..
+ // private
+ onBeforeLoad : function()
+ {
+ if(!this.hasFocus){
+ return;
}
- if (!ps || ps.nodeType != 1) {
- return false;
+ this.innerLists[0].update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ this.restrictHeight();
+ this.selectedIndex = -1;
+ },
+ // private
+ onLoad : function(a,b,c,d)
+ {
+ if (!this.loadingChildren) {
+ // then we are loading the top level. - hide the children
+ for (var i = 1;i < this.views.length; i++) {
+ this.views[i].getEl().setStyle({ display : 'none' });
+ }
+ var lw = Math.floor(
+ ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+ );
+
+ this.list.setWidth(lw); // default to '1'
+
+
}
- // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
- if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
- return false;
+ if(!this.hasFocus){
+ return;
}
- node.parentNode.removeChild(node); // remove me...
+ if(this.store.getCount() > 0) {
+ this.expand();
+ this.restrictHeight();
+ } else {
+ this.onEmptyResults();
+ }
- return false; // no need to do children
-
- }
+ if (!this.loadingChildren) {
+ this.selectActive();
+ }
+ /*
+ this.stores[1].loadData([]);
+ this.stores[2].loadData([]);
+ this.views
+ */
-});
-
-/**
- * @class Roo.htmleditor.FilterBlock
- * removes id / data-block and contenteditable that are associated with blocks
- * usage should be done on a cloned copy of the dom
- * @constructor
-* Run a new Attribute Filter { node : xxxx }}
-* @param {Object} config Configuration options
- */
-Roo.htmleditor.FilterBlock = function(cfg)
-{
- Roo.apply(this, cfg);
- var qa = cfg.node.querySelectorAll;
- this.removeAttributes('data-block');
- this.removeAttributes('contenteditable');
- this.removeAttributes('id');
+ //this.el.focus();
+ },
-}
-
-Roo.apply(Roo.htmleditor.FilterBlock.prototype,
-{
- node: true, // all tags
-
-
- removeAttributes : function(attr)
+
+ // private
+ onLoadException : function()
{
- var ar = this.node.querySelectorAll('*[' + attr + ']');
- for (var i =0;i<ar.length;i++) {
- ar[i].removeAttribute(attr);
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
}
- }
-
+ },
+ // no cleaning of leading spaces on blur here.
+ cleanLeadingSpace : function(e) { },
-});
-/***
- * This is based loosely on tinymce
- * @class Roo.htmleditor.TidySerializer
- * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
- * @constructor
- * @method Serializer
- * @param {Object} settings Name/value settings object.
- */
-
-Roo.htmleditor.TidySerializer = function(settings)
-{
- Roo.apply(this, settings);
-
- this.writer = new Roo.htmleditor.TidyWriter(settings);
-
-
+ onSelectChange : function (view, sels, opts )
+ {
+ var ix = view.getSelectedIndexes();
+
+ if (opts.list > this.maxColumns - 2) {
+ if (view.store.getCount()< 1) {
+ this.views[opts.list ].getEl().setStyle({ display : 'none' });
-};
-Roo.htmleditor.TidySerializer.prototype = {
-
- /**
- * @param {boolean} inner do the inner of the node.
- */
- inner : false,
-
- writer : false,
-
- /**
- * Serializes the specified node into a string.
- *
- * @example
- * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
- * @method serialize
- * @param {DomElement} node Node instance to serialize.
- * @return {String} String with HTML based on DOM tree.
- */
- serialize : function(node) {
-
- // = settings.validate;
- var writer = this.writer;
- var self = this;
- this.handlers = {
- // #text
- 3: function(node) {
-
- writer.text(node.nodeValue, node);
- },
- // #comment
- 8: function(node) {
- writer.comment(node.nodeValue);
- },
- // Processing instruction
- 7: function(node) {
- writer.pi(node.name, node.nodeValue);
- },
- // Doctype
- 10: function(node) {
- writer.doctype(node.nodeValue);
- },
- // CDATA
- 4: function(node) {
- writer.cdata(node.nodeValue);
- },
- // Document fragment
- 11: function(node) {
- node = node.firstChild;
- if (!node) {
- return;
- }
- while(node) {
- self.walk(node);
- node = node.nextSibling
+ } else {
+ if (ix.length) {
+ // used to clear ?? but if we are loading unselected
+ this.setFromData(view.store.getAt(ix[0]).data);
}
+
}
- };
- writer.reset();
- 1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
- return writer.getContent();
- },
-
- walk: function(node)
- {
- var attrName, attrValue, sortedAttrs, i, l, elementRule,
- handler = this.handlers[node.nodeType];
- if (handler) {
- handler(node);
return;
}
-
- var name = node.nodeName;
- var isEmpty = node.childNodes.length < 1;
-
- var writer = this.writer;
- var attrs = node.attributes;
- // Sort attributes
- writer.start(node.nodeName, attrs, isEmpty, node);
- if (isEmpty) {
- return;
- }
- node = node.firstChild;
- if (!node) {
- writer.end(name);
+ if (!ix.length) {
+ // this get's fired when trigger opens..
+ // this.setFromData({});
+ var str = this.stores[opts.list+1];
+ str.data.clear(); // removeall wihtout the fire events..
return;
}
- while (node) {
- this.walk(node);
- node = node.nextSibling;
+
+ var rec = view.store.getAt(ix[0]);
+
+ this.setFromData(rec.data);
+ this.fireEvent('select', this, rec, ix[0]);
+
+ var lw = Math.floor(
+ (
+ (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
+ ) / this.maxColumns
+ );
+ this.loadingChildren = true;
+ this.stores[opts.list+1].loadDataFromChildren( rec );
+ this.loadingChildren = false;
+ var dl = this.stores[opts.list+1]. getTotalCount();
+
+ this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
+
+ this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
+ for (var i = opts.list+2; i < this.views.length;i++) {
+ this.views[i].getEl().setStyle({ display : 'none' });
}
- writer.end(name);
+ this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
+ this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
+
+ if (this.isLoading) {
+ // this.selectActive(opts.list);
+ }
+
+ },
- }
- // Serialize element and treat all non elements as fragments
-
-};
-
-/***
- * This is based loosely on tinymce
- * @class Roo.htmleditor.TidyWriter
- * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
- *
- * Known issues?
- * - not tested much with 'PRE' formated elements.
- *
- *
- *
- */
-
-Roo.htmleditor.TidyWriter = function(settings)
-{
- // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
- Roo.apply(this, settings);
- this.html = [];
- this.state = [];
-
- this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
-
-}
-Roo.htmleditor.TidyWriter.prototype = {
-
-
- state : false,
- indent : ' ',
- // part of state...
- indentstr : '',
- in_pre: false,
- in_inline : false,
- last_inline : false,
- encode : false,
+ onDoubleClick : function()
+ {
+ this.collapse(); //??
+ },
+
- /**
- * Writes the a start element such as <p id="a">.
- *
- * @method start
- * @param {String} name Name of the element.
- * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
- * @param {Boolean} empty Optional empty state if the tag should end like <br />.
- */
- start: function(name, attrs, empty, node)
+
+
+ // private
+ recordToStack : function(store, prop, value, stack)
{
- var i, l, attr, value;
-
- // there are some situations where adding line break && indentation will not work. will not work.
- // <span / b / i ... formating?
-
- var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
- var in_pre = this.in_pre || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
-
- var is_short = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
-
- var add_lb = name == 'BR' ? false : in_inline;
-
- if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
- i_inline = false;
+ 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;
+ var srec = false;
+ if(store.getCount() < 1){
+ return false;
}
-
- var indentstr = this.indentstr;
-
- // e_inline = elements that can be inline, but still allow \n before and after?
- // only 'BR' ??? any others?
-
- // ADD LINE BEFORE tage
- if (!this.in_pre) {
- if (in_inline) {
- //code
- if (name == 'BR') {
- this.addLine();
- } else if (this.lastElementEndsWS()) {
- this.addLine();
- } else{
- // otherwise - no new line. (and dont indent.)
- indentstr = '';
+ store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ srec = r;
+ return false;
+ }
+ if (r.data.cn && r.data.cn.length) {
+ cstore.loadDataFromChildren( r);
+ var cret = _this.recordToStack(cstore, prop, value, stack);
+ if (cret !== false) {
+ record = cret;
+ srec = r;
+ return false;
}
-
- } else {
- this.addLine();
}
- } else {
- indentstr = '';
+
+ return true;
+ });
+ if (record == false) {
+ return false
}
-
- this.html.push(indentstr + '<', name.toLowerCase());
-
- if (attrs) {
- for (i = 0, l = attrs.length; i < l; i++) {
- attr = attrs[i];
- this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
- }
+ stack.unshift(srec);
+ return record;
+ },
+
+ /*
+ * find the stack of stores that match our value.
+ *
+ *
+ */
+
+ selectActive : function ()
+ {
+ // if store is not loaded, then we will need to wait for that to happen first.
+ var stack = [];
+ this.recordToStack(this.store, this.valueField, this.getValue(), stack);
+ for (var i = 0; i < stack.length; i++ ) {
+ this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
}
-
- if (empty) {
- if (is_short) {
- this.html[this.html.length] = '/>';
- } else {
- this.html[this.html.length] = '></' + name.toLowerCase() + '>';
- }
- var e_inline = name == 'BR' ? false : this.in_inline;
-
- if (!e_inline && !this.in_pre) {
- this.addLine();
- }
- return;
-
+
+ }
+
+
+
+
+
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.Checkbox
+ * @extends Roo.form.Field
+ * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
+ * @constructor
+ * Creates a new Checkbox
+ * @param {Object} config Configuration options
+ */
+Roo.form.Checkbox = function(config){
+ Roo.form.Checkbox.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event check
+ * Fires when the checkbox is checked or unchecked.
+ * @param {Roo.form.Checkbox} this This checkbox
+ * @param {Boolean} checked The new checked value
+ */
+ check : true
+ });
+};
+
+Roo.extend(Roo.form.Checkbox, 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 {Boolean} checked True if the the checkbox should render already checked (defaults to false)
+ */
+ checked: false,
+ /**
+ * @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"},
+ /**
+ * @cfg {String} boxLabel The text that appears beside the checkbox
+ */
+ boxLabel : "",
+ /**
+ * @cfg {String} inputValue The value that should go into the generated input element's value attribute
+ */
+ inputValue : '1',
+ /**
+ * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
+ */
+ valueOff: '0', // value when not checked..
+
+ actionMode : 'viewEl',
+ //
+ // private
+ itemCls : 'x-menu-check-item x-form-item',
+ groupClass : 'x-menu-group-item',
+ inputType : 'hidden',
+
+
+ inSetChecked: false, // check that we are not calling self...
+
+ 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');
}
- // not empty..
- this.html[this.html.length] = '>';
-
- // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+ },
+
+ 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);
/*
- if (!in_inline && !in_pre) {
- var cn = node.firstChild;
- while(cn) {
- if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
- in_inline = true
- break;
- }
- cn = cn.nextSibling;
- }
-
+ if(this.inputValue !== undefined){
+ this.el.dom.value = this.inputValue;
}
*/
+ //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+ this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+ var viewEl = this.wrap.createChild({
+ tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+ this.viewEl = viewEl;
+ this.wrap.on('click', this.onClick, this);
+ this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
+ this.el.on('propertychange', this.setFromHidden, this); //ie
- this.pushState({
- indentstr : in_pre ? '' : (this.indentstr + this.indent),
- in_pre : in_pre,
- in_inline : in_inline
- });
- // add a line after if we are not in a
-
- if (!in_inline && !in_pre) {
- this.addLine();
- }
-
-
- },
-
- lastElementEndsWS : function()
- {
- var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
- if (value === false) {
- return true;
+ if(this.boxLabel){
+ this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+ // viewEl.on('click', this.onClick, this);
}
- return value.match(/\s+$/);
-
+ //if(this.checked){
+ this.setChecked(this.checked);
+ //}else{
+ //this.checked = this.el.dom;
+ //}
+
},
-
+
+ // private
+ initValue : Roo.emptyFn,
+
/**
- * Writes the a end element such as </p>.
- *
- * @method end
- * @param {String} name Name of the element.
+ * Returns the checked state of the checkbox.
+ * @return {Boolean} True if checked, else false
*/
- end: function(name) {
- var value;
- this.popState();
- var indentstr = '';
- var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
-
- if (!this.in_pre && !in_inline) {
- this.addLine();
- indentstr = this.indentstr;
+ getValue : function(){
+ if(this.el){
+ return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
}
- this.html.push(indentstr + '</', name.toLowerCase(), '>');
- this.last_inline = in_inline;
+ return this.valueOff;
- // pop the indent state..
},
- /**
- * Writes a text node.
- *
- * In pre - we should not mess with the contents.
- *
- *
- * @method text
- * @param {String} text String to write out.
- * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
- */
- text: function(in_text, node)
- {
- // if not in whitespace critical
- if (in_text.length < 1) {
+
+ // private
+ onClick : function(){
+ if (this.disabled) {
return;
}
- var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
-
- if (this.in_pre) {
- this.html[this.html.length] = text;
- return;
- }
+ this.setChecked(!this.checked);
+
+ //if(this.el.dom.checked != this.checked){
+ // this.setValue(this.el.dom.checked);
+ // }
+ },
+
+ /**
+ * 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.in_inline) {
- text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
- if (text != ' ') {
- text = text.replace(/\s+/,' '); // all white space to single white space
-
-
- // if next tag is '<BR>', then we can trim right..
- if (node.nextSibling &&
- node.nextSibling.nodeType == 1 &&
- node.nextSibling.nodeName == 'BR' )
- {
- text = text.replace(/\s+$/g,'');
- }
- // if previous tag was a BR, we can also trim..
- if (node.previousSibling &&
- node.previousSibling.nodeType == 1 &&
- node.previousSibling.nodeName == 'BR' )
- {
- text = this.indentstr + text.replace(/^\s+/g,'');
- }
- if (text.match(/\n/)) {
- text = text.replace(
- /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
- );
- // remoeve the last whitespace / line break.
- text = text.replace(/\n\s+$/,'');
- }
- // repace long lines
-
- }
-
- this.html[this.html.length] = text;
- return;
+
+ //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ //if(this.el && this.el.dom){
+ // this.el.dom.checked = this.checked;
+ // this.el.dom.defaultChecked = this.checked;
+ //}
+ this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+ //this.fireEvent("check", this, this.checked);
+ },
+ // private..
+ setChecked : function(state,suppressEvent)
+ {
+ if (this.inSetChecked) {
+ this.checked = state;
+ return;
}
- // see if previous element was a inline element.
- var indentstr = this.indentstr;
-
- text = text.replace(/\s+/g," "); // all whitespace into single white space.
- // should trim left?
- if (node.previousSibling &&
- node.previousSibling.nodeType == 1 &&
- Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
- {
- indentstr = '';
-
- } else {
- this.addLine();
- text = text.replace(/^\s+/,''); // trim left
-
+
+ if(this.wrap){
+ this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
}
- // should trim right?
- if (node.nextSibling &&
- node.nextSibling.nodeType == 1 &&
- Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
- {
- // noop
-
- } else {
- text = text.replace(/\s+$/,''); // trim right
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent('check', this, state);
}
-
-
-
-
+ this.inSetChecked = true;
+
+ this.el.dom.value = state ? this.inputValue : this.valueOff;
+
+ this.inSetChecked = false;
- if (text.length < 1) {
+ },
+ // handle setting of hidden value by some other method!!?!?
+ setFromHidden: function()
+ {
+ if(!this.el){
return;
}
- if (!text.match(/\n/)) {
- this.html.push(indentstr + text);
- 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.Checkbox.superclass.onDestroy.call(this);
+ },
+
+ setBoxLabel : function(str)
+ {
+ this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
+ }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Radio
+ * @extends Roo.form.Checkbox
+ * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
+ * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @constructor
+ * Creates a new Radio
+ * @param {Object} config Configuration options
+ */
+Roo.form.Radio = function(){
+ Roo.form.Radio.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
+ inputType: 'radio',
+
+ /**
+ * If this radio is part of a group, it will return the selected value
+ * @return {String}
+ */
+ getGroupValue : function(){
+ return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
+ },
+
+
+ onRender : function(ct, position){
+ Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
- text = this.indentstr + text.replace(
- /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
- );
- // remoeve the last whitespace / line break.
- text = text.replace(/\s+$/,'');
+ if(this.inputValue !== undefined){
+ this.el.dom.value = this.inputValue;
+ }
+
+ this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+ //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+ //var viewEl = this.wrap.createChild({
+ // tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+ //this.viewEl = viewEl;
+ //this.wrap.on('click', this.onClick, this);
- this.html.push(text);
+ //this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
+ //this.el.on('propertychange', this.setFromHidden, this); //ie
- // split and indent..
+ if(this.boxLabel){
+ this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+ // viewEl.on('click', this.onClick, this);
+ }
+ if(this.checked){
+ this.el.dom.checked = 'checked' ;
+ }
+
},
/**
- * Writes a cdata node such as <![CDATA[data]]>.
- *
- * @method cdata
- * @param {String} text String to write out inside the cdata.
- */
- cdata: function(text) {
- this.html.push('<![CDATA[', text, ']]>');
- },
- /**
- * Writes a comment node such as <!-- Comment -->.
- *
- * @method cdata
- * @param {String} text String to write out inside the comment.
- */
- comment: function(text) {
- this.html.push('<!--', text, '-->');
- },
- /**
- * Writes a PI node such as <?xml attr="value" ?>.
- *
- * @method pi
- * @param {String} name Name of the pi.
- * @param {String} text String to write out inside the pi.
- */
- pi: function(name, text) {
- text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
- this.indent != '' && this.html.push('\n');
- },
- /**
- * Writes a doctype node such as <!DOCTYPE data>.
- *
- * @method doctype
- * @param {String} text String to write out inside the doctype.
- */
- doctype: function(text) {
- this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
- },
- /**
- * Resets the internal buffer if one wants to reuse the writer.
- *
- * @method reset
- */
- reset: function() {
- this.html.length = 0;
- this.state = [];
- this.pushState({
- indentstr : '',
- in_pre : false,
- in_inline : false
- })
- },
- /**
- * Returns the contents that got serialized.
- *
- * @method getContent
- * @return {String} HTML contents that got written down.
+ * 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.
*/
- getContent: function() {
- return this.html.join('').replace(/\n$/, '');
- },
-
- pushState : function(cfg)
- {
- this.state.push(cfg);
- Roo.apply(this, cfg);
+ setValue : function(v,suppressEvent){
+
+
+ //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ //if(this.el && this.el.dom){
+ // this.el.dom.checked = this.checked;
+ // this.el.dom.defaultChecked = this.checked;
+ //}
+ this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+
+ this.el.dom.form[this.name].value = v;
+
+ //this.fireEvent("check", this, this.checked);
},
-
- popState : function()
+ // private..
+ setChecked : function(state,suppressEvent)
{
- if (this.state.length < 1) {
- return; // nothing to push
+
+ if(this.wrap){
+ this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
}
- var cfg = {
- in_pre: false,
- indentstr : ''
- };
- this.state.pop();
- if (this.state.length > 0) {
- cfg = this.state[this.state.length-1];
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent('check', this, state);
}
- Roo.apply(this, cfg);
+
+
+
+
},
+ reset : function(){
+ // this.setValue(this.resetValue);
+ //this.originalValue = this.getValue();
+ this.clearInvalid();
+ }
- addLine: function()
+});Roo.rtf = {}; // namespace
+Roo.rtf.Hex = function(hex)
+{
+ this.hexstr = hex;
+};
+Roo.rtf.Paragraph = function(opts)
+{
+ this.content = []; ///??? is that used?
+};Roo.rtf.Span = function(opts)
+{
+ this.value = opts.value;
+};
+
+Roo.rtf.Group = function(parent)
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.content = [];
+ this.cn = [];
+
+
+
+};
+
+Roo.rtf.Group.prototype = {
+ ignorable : false,
+ content: false,
+ cn: false,
+ addContent : function(node) {
+ // could set styles...
+ this.content.push(node);
+ },
+ addChild : function(cn)
{
- if (this.html.length < 1) {
- return;
+ this.cn.push(cn);
+ },
+ // only for images really...
+ toDataURL : function()
+ {
+ var mimetype = false;
+ switch(true) {
+ case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0:
+ mimetype = "image/png";
+ break;
+ case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
+ mimetype = "image/jpeg";
+ break;
+ default :
+ return 'about:blank'; // ?? error?
}
- var value = this.html[this.html.length - 1];
- if (value.length > 0 && '\n' !== value) {
- this.html.push('\n');
- }
+ var hexstring = this.content[this.content.length-1].value;
+
+ return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
+ return String.fromCharCode(parseInt(a, 16));
+ }).join(""));
}
+};
+// this looks like it's normally the {rtf{ .... }}
+Roo.rtf.Document = function()
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.rtlch = [];
+ this.content = [];
+ this.cn = [];
-//'pre script noscript style textarea video audio iframe object code'
-// shortended... 'area base basefont br col frame hr img input isindex link meta param embed source wbr track');
-// inline
};
-
-Roo.htmleditor.TidyWriter.inline_elements = [
- 'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
- 'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
-];
-Roo.htmleditor.TidyWriter.shortend_elements = [
- 'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
- 'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
-];
-
-Roo.htmleditor.TidyWriter.whitespace_elements = [
- 'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
-];/***
- * This is based loosely on tinymce
- * @class Roo.htmleditor.TidyEntities
- * @static
- * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+Roo.extend(Roo.rtf.Document, Roo.rtf.Group, {
+ addChild : function(cn)
+ {
+ this.cn.push(cn);
+ switch(cn.type) {
+ case 'rtlch': // most content seems to be inside this??
+ case 'listtext':
+ case 'shpinst':
+ this.rtlch.push(cn);
+ return;
+ default:
+ this[cn.type] = cn;
+ }
+
+ },
+
+ getElementsByType : function(type)
+ {
+ var ret = [];
+ this._getElementsByType(type, ret, this.cn, 'rtf');
+ return ret;
+ },
+ _getElementsByType : function (type, ret, search_array, path)
+ {
+ search_array.forEach(function(n,i) {
+ if (n.type == type) {
+ n.path = path + '/' + n.type + ':' + i;
+ ret.push(n);
+ }
+ if (n.cn.length > 0) {
+ this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
+ }
+ },this);
+ }
+
+});
+
+Roo.rtf.Ctrl = function(opts)
+{
+ this.value = opts.value;
+ this.param = opts.param;
+};
+/**
+ *
+ *
+ * based on this https://github.com/iarna/rtf-parser
+ * it's really only designed to extract pict from pasted RTF
+ *
+ * usage:
+ *
+ * var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
+ *
*
- * Not 100% sure this is actually used or needed.
*/
-Roo.htmleditor.TidyEntities = {
-
- /**
- * initialize data..
- */
- init : function (){
-
- this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
-
- },
+
- buildEntitiesLookup: function(items, radix) {
- var i, chr, entity, lookup = {};
- if (!items) {
- return {};
- }
- items = typeof(items) == 'string' ? items.split(',') : items;
- radix = radix || 10;
- // Build entities lookup table
- for (i = 0; i < items.length; i += 2) {
- chr = String.fromCharCode(parseInt(items[i], radix));
- // Only add non base entities
- if (!this.baseEntities[chr]) {
- entity = '&' + items[i + 1] + ';';
- lookup[chr] = entity;
- lookup[entity] = chr;
- }
- }
- return lookup;
+
+Roo.rtf.Parser = function(text) {
+ //super({objectMode: true})
+ this.text = '';
+ this.parserState = this.parseText;
+
+ // these are for interpeter...
+ this.doc = {};
+ ///this.parserState = this.parseTop
+ this.groupStack = [];
+ this.hexStore = [];
+ this.doc = false;
+
+ this.groups = []; // where we put the return.
+
+ for (var ii = 0; ii < text.length; ++ii) {
+ ++this.cpos;
- },
+ if (text[ii] === '\n') {
+ ++this.row;
+ this.col = 1;
+ } else {
+ ++this.col;
+ }
+ this.parserState(text[ii]);
+ }
- asciiMap : {
- 128: '€',
- 130: '‚',
- 131: 'ƒ',
- 132: '„',
- 133: '…',
- 134: '†',
- 135: '‡',
- 136: 'ˆ',
- 137: '‰',
- 138: 'Š',
- 139: '‹',
- 140: 'Œ',
- 142: 'Ž',
- 145: '‘',
- 146: '’',
- 147: '“',
- 148: '”',
- 149: '•',
- 150: '–',
- 151: '—',
- 152: '˜',
- 153: '™',
- 154: 'š',
- 155: '›',
- 156: 'œ',
- 158: 'ž',
- 159: 'Ÿ'
+
+
+};
+Roo.rtf.Parser.prototype = {
+ text : '', // string being parsed..
+ controlWord : '',
+ controlWordParam : '',
+ hexChar : '',
+ doc : false,
+ group: false,
+ groupStack : false,
+ hexStore : false,
+
+
+ cpos : 0,
+ row : 1, // reportin?
+ col : 1, //
+
+
+ push : function (el)
+ {
+ var m = 'cmd'+ el.type;
+ if (typeof(this[m]) == 'undefined') {
+ Roo.log('invalid cmd:' + el.type);
+ return;
+ }
+ this[m](el);
+ //Roo.log(el);
},
- // Raw entities
- baseEntities : {
- '"': '"',
- // Needs to be escaped since the YUI compressor would otherwise break the code
- '\'': ''',
- '<': '<',
- '>': '>',
- '&': '&',
- '`': '`'
+ flushHexStore : function()
+ {
+ if (this.hexStore.length < 1) {
+ return;
+ }
+ var hexstr = this.hexStore.map(
+ function(cmd) {
+ return cmd.value;
+ }).join('');
+
+ this.group.addContent( new Roo.rtf.Hex( hexstr ));
+
+
+ this.hexStore.splice(0)
+
},
- // Reverse lookup table for raw entities
- reverseEntities : {
- '<': '<',
- '>': '>',
- '&': '&',
- '"': '"',
- ''': '\''
+
+ cmdgroupstart : function()
+ {
+ this.flushHexStore();
+ if (this.group) {
+ this.groupStack.push(this.group);
+ }
+ // parent..
+ if (this.doc === false) {
+ this.group = this.doc = new Roo.rtf.Document();
+ return;
+
+ }
+ this.group = new Roo.rtf.Group(this.group);
+ },
+ cmdignorable : function()
+ {
+ this.flushHexStore();
+ this.group.ignorable = true;
+ },
+ cmdendparagraph : function()
+ {
+ this.flushHexStore();
+ this.group.addContent(new Roo.rtf.Paragraph());
+ },
+ cmdgroupend : function ()
+ {
+ this.flushHexStore();
+ var endingGroup = this.group;
+
+
+ this.group = this.groupStack.pop();
+ if (this.group) {
+ this.group.addChild(endingGroup);
+ }
+
+
+
+ var doc = this.group || this.doc;
+ //if (endingGroup instanceof FontTable) {
+ // doc.fonts = endingGroup.table
+ //} else if (endingGroup instanceof ColorTable) {
+ // doc.colors = endingGroup.table
+ //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
+ if (endingGroup.ignorable === false) {
+ //code
+ this.groups.push(endingGroup);
+ // Roo.log( endingGroup );
+ }
+ //Roo.each(endingGroup.content, function(item)) {
+ // doc.addContent(item);
+ //}
+ //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
+ //}
+ },
+ cmdtext : function (cmd)
+ {
+ this.flushHexStore();
+ if (!this.group) { // an RTF fragment, missing the {\rtf1 header
+ //this.group = this.doc
+ return; // we really don't care about stray text...
+ }
+ this.group.addContent(new Roo.rtf.Span(cmd));
+ },
+ cmdcontrolword : function (cmd)
+ {
+ this.flushHexStore();
+ if (!this.group.type) {
+ this.group.type = cmd.value;
+ return;
+ }
+ this.group.addContent(new Roo.rtf.Ctrl(cmd));
+ // we actually don't care about ctrl words...
+ return ;
+ /*
+ var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
+ if (this[method]) {
+ this[method](cmd.param)
+ } else {
+ if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
+ }
+ */
+ },
+ cmdhexchar : function(cmd) {
+ this.hexStore.push(cmd);
+ },
+ cmderror : function(cmd) {
+ throw cmd.value;
},
- attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
- textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
- rawCharsRegExp : /[<>&\"\']/g,
- entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
- namedEntities : false,
- namedEntitiesData : [
- '50',
- 'nbsp',
- '51',
- 'iexcl',
- '52',
- 'cent',
- '53',
- 'pound',
- '54',
- 'curren',
- '55',
- 'yen',
- '56',
- 'brvbar',
- '57',
- 'sect',
- '58',
- 'uml',
- '59',
- 'copy',
- '5a',
- 'ordf',
- '5b',
- 'laquo',
- '5c',
- 'not',
- '5d',
- 'shy',
- '5e',
- 'reg',
- '5f',
- 'macr',
- '5g',
- 'deg',
- '5h',
- 'plusmn',
- '5i',
- 'sup2',
- '5j',
- 'sup3',
- '5k',
- 'acute',
- '5l',
- 'micro',
- '5m',
- 'para',
- '5n',
- 'middot',
- '5o',
- 'cedil',
- '5p',
- 'sup1',
- '5q',
- 'ordm',
- '5r',
- 'raquo',
- '5s',
- 'frac14',
- '5t',
- 'frac12',
- '5u',
- 'frac34',
- '5v',
- 'iquest',
- '60',
- 'Agrave',
- '61',
- 'Aacute',
- '62',
- 'Acirc',
- '63',
- 'Atilde',
- '64',
- 'Auml',
- '65',
- 'Aring',
- '66',
- 'AElig',
- '67',
- 'Ccedil',
- '68',
- 'Egrave',
- '69',
- 'Eacute',
- '6a',
- 'Ecirc',
- '6b',
- 'Euml',
- '6c',
- 'Igrave',
- '6d',
- 'Iacute',
- '6e',
- 'Icirc',
- '6f',
- 'Iuml',
- '6g',
- 'ETH',
- '6h',
- 'Ntilde',
- '6i',
- 'Ograve',
- '6j',
- 'Oacute',
- '6k',
- 'Ocirc',
- '6l',
- 'Otilde',
- '6m',
- 'Ouml',
- '6n',
- 'times',
- '6o',
- 'Oslash',
- '6p',
- 'Ugrave',
- '6q',
- 'Uacute',
- '6r',
- 'Ucirc',
- '6s',
- 'Uuml',
- '6t',
- 'Yacute',
- '6u',
- 'THORN',
- '6v',
- 'szlig',
- '70',
- 'agrave',
- '71',
- 'aacute',
- '72',
- 'acirc',
- '73',
- 'atilde',
- '74',
- 'auml',
- '75',
- 'aring',
- '76',
- 'aelig',
- '77',
- 'ccedil',
- '78',
- 'egrave',
- '79',
- 'eacute',
- '7a',
- 'ecirc',
- '7b',
- 'euml',
- '7c',
- 'igrave',
- '7d',
- 'iacute',
- '7e',
- 'icirc',
- '7f',
- 'iuml',
- '7g',
- 'eth',
- '7h',
- 'ntilde',
- '7i',
- 'ograve',
- '7j',
- 'oacute',
- '7k',
- 'ocirc',
- '7l',
- 'otilde',
- '7m',
- 'ouml',
- '7n',
- 'divide',
- '7o',
- 'oslash',
- '7p',
- 'ugrave',
- '7q',
- 'uacute',
- '7r',
- 'ucirc',
- '7s',
- 'uuml',
- '7t',
- 'yacute',
- '7u',
- 'thorn',
- '7v',
- 'yuml',
- 'ci',
- 'fnof',
- 'sh',
- 'Alpha',
- 'si',
- 'Beta',
- 'sj',
- 'Gamma',
- 'sk',
- 'Delta',
- 'sl',
- 'Epsilon',
- 'sm',
- 'Zeta',
- 'sn',
- 'Eta',
- 'so',
- 'Theta',
- 'sp',
- 'Iota',
- 'sq',
- 'Kappa',
- 'sr',
- 'Lambda',
- 'ss',
- 'Mu',
- 'st',
- 'Nu',
- 'su',
- 'Xi',
- 'sv',
- 'Omicron',
- 't0',
- 'Pi',
- 't1',
- 'Rho',
- 't3',
- 'Sigma',
- 't4',
- 'Tau',
- 't5',
- 'Upsilon',
- 't6',
- 'Phi',
- 't7',
- 'Chi',
- 't8',
- 'Psi',
- 't9',
- 'Omega',
- 'th',
- 'alpha',
- 'ti',
- 'beta',
- 'tj',
- 'gamma',
- 'tk',
- 'delta',
- 'tl',
- 'epsilon',
- 'tm',
- 'zeta',
- 'tn',
- 'eta',
- 'to',
- 'theta',
- 'tp',
- 'iota',
- 'tq',
- 'kappa',
- 'tr',
- 'lambda',
- 'ts',
- 'mu',
- 'tt',
- 'nu',
- 'tu',
- 'xi',
- 'tv',
- 'omicron',
- 'u0',
- 'pi',
- 'u1',
- 'rho',
- 'u2',
- 'sigmaf',
- 'u3',
- 'sigma',
- 'u4',
- 'tau',
- 'u5',
- 'upsilon',
- 'u6',
- 'phi',
- 'u7',
- 'chi',
- 'u8',
- 'psi',
- 'u9',
- 'omega',
- 'uh',
- 'thetasym',
- 'ui',
- 'upsih',
- 'um',
- 'piv',
- '812',
- 'bull',
- '816',
- 'hellip',
- '81i',
- 'prime',
- '81j',
- 'Prime',
- '81u',
- 'oline',
- '824',
- 'frasl',
- '88o',
- 'weierp',
- '88h',
- 'image',
- '88s',
- 'real',
- '892',
- 'trade',
- '89l',
- 'alefsym',
- '8cg',
- 'larr',
- '8ch',
- 'uarr',
- '8ci',
- 'rarr',
- '8cj',
- 'darr',
- '8ck',
- 'harr',
- '8dl',
- 'crarr',
- '8eg',
- 'lArr',
- '8eh',
- 'uArr',
- '8ei',
- 'rArr',
- '8ej',
- 'dArr',
- '8ek',
- 'hArr',
- '8g0',
- 'forall',
- '8g2',
- 'part',
- '8g3',
- 'exist',
- '8g5',
- 'empty',
- '8g7',
- 'nabla',
- '8g8',
- 'isin',
- '8g9',
- 'notin',
- '8gb',
- 'ni',
- '8gf',
- 'prod',
- '8gh',
- 'sum',
- '8gi',
- 'minus',
- '8gn',
- 'lowast',
- '8gq',
- 'radic',
- '8gt',
- 'prop',
- '8gu',
- 'infin',
- '8h0',
- 'ang',
- '8h7',
- 'and',
- '8h8',
- 'or',
- '8h9',
- 'cap',
- '8ha',
- 'cup',
- '8hb',
- 'int',
- '8hk',
- 'there4',
- '8hs',
- 'sim',
- '8i5',
- 'cong',
- '8i8',
- 'asymp',
- '8j0',
- 'ne',
- '8j1',
- 'equiv',
- '8j4',
- 'le',
- '8j5',
- 'ge',
- '8k2',
- 'sub',
- '8k3',
- 'sup',
- '8k4',
- 'nsub',
- '8k6',
- 'sube',
- '8k7',
- 'supe',
- '8kl',
- 'oplus',
- '8kn',
- 'otimes',
- '8l5',
- 'perp',
- '8m5',
- 'sdot',
- '8o8',
- 'lceil',
- '8o9',
- 'rceil',
- '8oa',
- 'lfloor',
- '8ob',
- 'rfloor',
- '8p9',
- 'lang',
- '8pa',
- 'rang',
- '9ea',
- 'loz',
- '9j0',
- 'spades',
- '9j3',
- 'clubs',
- '9j5',
- 'hearts',
- '9j6',
- 'diams',
- 'ai',
- 'OElig',
- 'aj',
- 'oelig',
- 'b0',
- 'Scaron',
- 'b1',
- 'scaron',
- 'bo',
- 'Yuml',
- 'm6',
- 'circ',
- 'ms',
- 'tilde',
- '802',
- 'ensp',
- '803',
- 'emsp',
- '809',
- 'thinsp',
- '80c',
- 'zwnj',
- '80d',
- 'zwj',
- '80e',
- 'lrm',
- '80f',
- 'rlm',
- '80j',
- 'ndash',
- '80k',
- 'mdash',
- '80o',
- 'lsquo',
- '80p',
- 'rsquo',
- '80q',
- 'sbquo',
- '80s',
- 'ldquo',
- '80t',
- 'rdquo',
- '80u',
- 'bdquo',
- '810',
- 'dagger',
- '811',
- 'Dagger',
- '81g',
- 'permil',
- '81p',
- 'lsaquo',
- '81q',
- 'rsaquo',
- '85c',
- 'euro'
- ],
-
-
- /**
- * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
- *
- * @method encodeRaw
- * @param {String} text Text to encode.
- * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
- * @return {String} Entity encoded text.
- */
- encodeRaw: function(text, attr)
+ /*
+ _flush (done) {
+ if (this.text !== '\u0000') this.emitText()
+ done()
+ }
+ */
+
+
+ parseText : function(c)
{
- var t = this;
- return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
- return t.baseEntities[chr] || chr;
- });
- },
- /**
- * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
- * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
- * and is exposed as the DOMUtils.encode function.
- *
- * @method encodeAllRaw
- * @param {String} text Text to encode.
- * @return {String} Entity encoded text.
- */
- encodeAllRaw: function(text) {
- var t = this;
- return ('' + text).replace(this.rawCharsRegExp, function(chr) {
- return t.baseEntities[chr] || chr;
- });
+ if (c === '\\') {
+ this.parserState = this.parseEscapes;
+ } else if (c === '{') {
+ this.emitStartGroup();
+ } else if (c === '}') {
+ this.emitEndGroup();
+ } else if (c === '\x0A' || c === '\x0D') {
+ // cr/lf are noise chars
+ } else {
+ this.text += c;
+ }
},
- /**
- * Encodes the specified string using numeric entities. The core entities will be
- * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
- *
- * @method encodeNumeric
- * @param {String} text Text to encode.
- * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
- * @return {String} Entity encoded text.
- */
- encodeNumeric: function(text, attr) {
- var t = this;
- return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
- // Multi byte sequence convert it to a single entity
- if (chr.length > 1) {
- return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
- }
- return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
- });
+
+ parseEscapes: function (c)
+ {
+ if (c === '\\' || c === '{' || c === '}') {
+ this.text += c;
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlSymbol;
+ this.parseControlSymbol(c);
+ }
},
- /**
- * Encodes the specified string using named entities. The core entities will be encoded
- * as named ones but all non lower ascii characters will be encoded into named entities.
- *
- * @method encodeNamed
- * @param {String} text Text to encode.
- * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
- * @param {Object} entities Optional parameter with entities to use.
- * @return {String} Entity encoded text.
- */
- encodeNamed: function(text, attr, entities) {
- var t = this;
- entities = entities || this.namedEntities;
- return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
- return t.baseEntities[chr] || entities[chr] || chr;
- });
+ parseControlSymbol: function(c)
+ {
+ if (c === '~') {
+ this.text += '\u00a0'; // nbsp
+ this.parserState = this.parseText
+ } else if (c === '-') {
+ this.text += '\u00ad'; // soft hyphen
+ } else if (c === '_') {
+ this.text += '\u2011'; // non-breaking hyphen
+ } else if (c === '*') {
+ this.emitIgnorable();
+ this.parserState = this.parseText;
+ } else if (c === "'") {
+ this.parserState = this.parseHexChar;
+ } else if (c === '|') { // formula cacter
+ this.emitFormula();
+ this.parserState = this.parseText;
+ } else if (c === ':') { // subentry in an index entry
+ this.emitIndexSubEntry();
+ this.parserState = this.parseText;
+ } else if (c === '\x0a') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else if (c === '\x0d') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlWord;
+ this.parseControlWord(c);
+ }
},
- /**
- * Returns an encode function based on the name(s) and it's optional entities.
- *
- * @method getEncodeFunc
- * @param {String} name Comma separated list of encoders for example named,numeric.
- * @param {String} entities Optional parameter with entities to use instead of the built in set.
- * @return {function} Encode function to be used.
- */
- getEncodeFunc: function(name, entities) {
- entities = this.buildEntitiesLookup(entities) || this.namedEntities;
- var t = this;
- function encodeNamedAndNumeric(text, attr) {
- return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
- return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
- });
+ parseHexChar: function (c)
+ {
+ if (/^[A-Fa-f0-9]$/.test(c)) {
+ this.hexChar += c;
+ if (this.hexChar.length >= 2) {
+ this.emitHexChar();
+ this.parserState = this.parseText;
+ }
+ return;
}
-
- function encodeCustomNamed(text, attr) {
- return t.encodeNamed(text, attr, entities);
+ this.emitError("Invalid character \"" + c + "\" in hex literal.");
+ this.parserState = this.parseText;
+
+ },
+ parseControlWord : function(c)
+ {
+ if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else if (/^[-\d]$/.test(c)) {
+ this.parserState = this.parseControlWordParam;
+ this.controlWordParam += c;
+ } else if (/^[A-Za-z]$/.test(c)) {
+ this.controlWord += c;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
}
- // Replace + with , to be compatible with previous TinyMCE versions
- name = this.makeMap(name.replace(/\+/g, ','));
- // Named and numeric encoder
- if (name.named && name.numeric) {
- return this.encodeNamedAndNumeric;
+ },
+ parseControlWordParam : function (c) {
+ if (/^\d$/.test(c)) {
+ this.controlWordParam += c;
+ } else if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
}
- // Named encoder
- if (name.named) {
- // Custom names
- if (entities) {
- return encodeCustomNamed;
- }
- return this.encodeNamed;
+ },
+
+
+
+
+ emitText : function () {
+ if (this.text === '') {
+ return;
}
- // Numeric
- if (name.numeric) {
- return this.encodeNumeric;
+ this.push({
+ type: 'text',
+ value: this.text,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.text = ''
+ },
+ emitControlWord : function ()
+ {
+ this.emitText();
+ if (this.controlWord === '') {
+ // do we want to track this - it seems just to cause problems.
+ //this.emitError('empty control word');
+ } else {
+ this.push({
+ type: 'controlword',
+ value: this.controlWord,
+ param: this.controlWordParam !== '' && Number(this.controlWordParam),
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
}
- // Raw encoder
- return this.encodeRaw;
+ this.controlWord = '';
+ this.controlWordParam = '';
},
- /**
- * Decodes the specified string, this will replace entities with raw UTF characters.
- *
- * @method decode
- * @param {String} text Text to entity decode.
- * @return {String} Entity decoded string.
- */
- decode: function(text)
+ emitStartGroup : function ()
{
- var t = this;
- return text.replace(this.entityRegExp, function(all, numeric) {
- if (numeric) {
- numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
- // Support upper UTF
- if (numeric > 65535) {
- numeric -= 65536;
- return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
- }
- return t.asciiMap[numeric] || String.fromCharCode(numeric);
- }
- return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+ this.emitText();
+ this.push({
+ type: 'groupstart',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
});
},
- nativeDecode : function (text) {
- return text;
+ emitEndGroup : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'groupend',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
},
- makeMap : function (items, delim, map) {
- var i;
- items = items || [];
- delim = delim || ',';
- if (typeof items == "string") {
- items = items.split(delim);
- }
- map = map || {};
- i = items.length;
- while (i--) {
- map[items[i]] = {};
- }
- return map;
- }
-};
-
-
-
-Roo.htmleditor.TidyEntities.init();
+ emitIgnorable : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'ignorable',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitHexChar : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'hexchar',
+ value: this.hexChar,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.hexChar = ''
+ },
+ emitError : function (message)
+ {
+ this.emitText();
+ this.push({
+ type: 'error',
+ value: message,
+ row: this.row,
+ col: this.col,
+ char: this.cpos //,
+ //stack: new Error().stack
+ });
+ },
+ emitEndParagraph : function () {
+ this.emitText();
+ this.push({
+ type: 'endparagraph',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ }
+
+} ;
+Roo.htmleditor = {};
+
/**
- * @class Roo.htmleditor.KeyEnter
- * Handle Enter press..
- * @cfg {Roo.HtmlEditorCore} core the editor.
+ * @class Roo.htmleditor.Filter
+ * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
+ * @cfg {DomElement} node The node to iterate and filter
+ * @cfg {boolean|String|Array} tag Tags to replace
* @constructor
* Create a new Filter.
* @param {Object} config Configuration options
-
-
-Roo.htmleditor.KeyEnter = function(cfg) {
- Roo.apply(this, cfg);
+Roo.htmleditor.Filter = function(cfg) {
+ Roo.apply(this.cfg);
// this does not actually call walk as it's really just a abstract class
-
- Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
}
-//Roo.htmleditor.KeyEnter.i = 0;
-
-Roo.htmleditor.KeyEnter.prototype = {
+Roo.htmleditor.Filter.prototype = {
- core : false,
+ node: false,
- keypress : function(e)
- {
- if (e.charCode != 13 && e.charCode != 10) {
- Roo.log([e.charCode,e]);
- return true;
- }
- e.preventDefault();
- // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
- var doc = this.core.doc;
- //add a new line
-
+ tag: false,
+
+ // overrride to do replace comments.
+ replaceComment : false,
- var sel = this.core.getSelection();
- var range = sel.getRangeAt(0);
- var n = range.commonAncestorContainer;
- var pc = range.closest([ 'ol', 'ul']);
- var pli = range.closest('li');
- if (!pc || e.ctrlKey) {
- // on it list, or ctrl pressed.
- if (!e.ctrlKey) {
- sel.insertNode('br', 'after');
- } else {
- // only do this if we have ctrl key..
- var br = doc.createElement('br');
- br.className = 'clear';
- br.setAttribute('style', 'clear: both');
- sel.insertNode(br, 'after');
+ // overrride to do replace or do stuff with tags..
+ replaceTag : false,
+
+ walk : function(dom)
+ {
+ Roo.each( Array.from(dom.childNodes), function( e ) {
+ switch(true) {
+
+ case e.nodeType == 8 && this.replaceComment !== false: // comment
+ this.replaceComment(e);
+ return;
+
+ case e.nodeType != 1: //not a node.
+ return;
+
+ case this.tag === true: // everything
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
+ case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
+ case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
+ if (this.replaceTag && false === this.replaceTag(e)) {
+ return;
+ }
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
+ return;
+
+ default: // tags .. that do not match.
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
}
-
- this.core.undoManager.addEvent();
- this.core.fireEditorEvent(e);
- return false;
- }
+ }, this);
- // deal with <li> insetion
- if (pli.innerText.trim() == '' &&
- pli.previousSibling &&
- pli.previousSibling.nodeName == 'LI' &&
- pli.previousSibling.innerText.trim() == '') {
- pli.parentNode.removeChild(pli.previousSibling);
- sel.cursorAfter(pc);
- this.core.undoManager.addEvent();
- this.core.fireEditorEvent(e);
- return false;
- }
+ },
- var li = doc.createElement('LI');
- li.innerHTML = ' ';
- if (!pli || !pli.firstSibling) {
- pc.appendChild(li);
- } else {
- pli.parentNode.insertBefore(li, pli.firstSibling);
- }
- sel.cursorText (li.firstChild);
-
- this.core.undoManager.addEvent();
- this.core.fireEditorEvent(e);
-
- return false;
-
-
-
+ removeNodeKeepChildren : function( node)
+ {
+
+ ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+
+ }
+ node.parentNode.removeChild(node);
+ },
+
+ searchTag : function(dom)
+ {
+ if(this.tag === false) {
+ return;
+ }
+
+ var els = dom.getElementsByTagName(this.tag);
+
+ Roo.each(Array.from(els), function(e){
+ if(e.parentNode == null) {
+ return;
+ }
+ if(this.replaceTag) {
+ this.replaceTag(e);
+ }
+ }, this);
}
-};
-
+};
+
/**
- * @class Roo.htmleditor.Block
- * Base class for html editor blocks - do not use it directly .. extend it..
- * @cfg {DomElement} node The node to apply stuff to.
- * @cfg {String} friendly_name the name that appears in the context bar about this block
- * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
-
+ * @class Roo.htmleditor.FilterAttributes
+ * clean attributes and styles including http:// etc.. in attribute
* @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
+* Run a new Attribute Filter
+* @param {Object} config Configuration options
*/
-
-Roo.htmleditor.Block = function(cfg)
+Roo.htmleditor.FilterAttributes = function(cfg)
{
- // do nothing .. should not be called really.
+ Roo.apply(this, cfg);
+ this.attrib_black = this.attrib_black || [];
+ this.attrib_white = this.attrib_white || [];
+
+ this.attrib_clean = this.attrib_clean || [];
+ this.style_white = this.style_white || [];
+ this.style_black = this.style_black || [];
+ this.walk(cfg.node);
}
-/**
- * factory method to get the block from an element (using cache if necessary)
- * @static
- * @param {HtmlElement} the dom element
- */
-Roo.htmleditor.Block.factory = function(node)
-{
- var cc = Roo.htmleditor.Block.cache;
- var id = Roo.get(node).id;
- if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
- Roo.htmleditor.Block.cache[id].readElement(node);
- return Roo.htmleditor.Block.cache[id];
- }
- var db = node.getAttribute('data-block');
- if (!db) {
- db = node.nodeName.toLowerCase().toUpperCaseFirst();
- }
- var cls = Roo.htmleditor['Block' + db];
- if (typeof(cls) == 'undefined') {
- //Roo.log(node.getAttribute('data-block'));
- Roo.log("OOps missing block : " + 'Block' + db);
- return false;
- }
- Roo.htmleditor.Block.cache[id] = new cls({ node: node });
- return Roo.htmleditor.Block.cache[id]; /// should trigger update element
-};
-/**
- * initalize all Elements from content that are 'blockable'
- * @static
- * @param the body element
- */
-Roo.htmleditor.Block.initAll = function(body, type)
+Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
{
- if (typeof(type) == 'undefined') {
- var ia = Roo.htmleditor.Block.initAll;
- ia(body,'table');
- ia(body,'td');
- ia(body,'figure');
- return;
- }
- Roo.each(Roo.get(body).query(type), function(e) {
- Roo.htmleditor.Block.factory(e);
- },this);
-};
-// question goes here... do we need to clear out this cache sometimes?
-// or show we make it relivant to the htmleditor.
-Roo.htmleditor.Block.cache = {};
-
-Roo.htmleditor.Block.prototype = {
-
- node : false,
-
- // used by context menu
- friendly_name : 'Based Block',
-
- // text for button to delete this element
- deleteTitle : false,
+ tag: true, // all tags
- context : false,
- /**
- * Update a node with values from this object
- * @param {DomElement} node
- */
- updateElement : function(node)
- {
- Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
- },
- /**
- * convert to plain HTML for calling insertAtCursor..
- */
- toHTML : function()
- {
- return Roo.DomHelper.markup(this.toObject());
- },
- /**
- * used by readEleemnt to extract data from a node
- * may need improving as it's pretty basic
+ attrib_black : false, // array
+ attrib_clean : false,
+ attrib_white : false,
+
+ style_white : false,
+ style_black : false,
- * @param {DomElement} node
- * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
- * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
- * @param {String} style the style property - eg. text-align
- */
- getVal : function(node, tag, attr, style)
+
+ replaceTag : function(node)
{
- var n = node;
- if (tag !== true && n.tagName != tag.toUpperCase()) {
- // in theory we could do figure[3] << 3rd figure? or some more complex search..?
- // but kiss for now.
- n = node.getElementsByTagName(tag).item(0);
+ if (!node.attributes || !node.attributes.length) {
+ return true;
}
- if (!n) {
- return '';
+
+ for (var i = node.attributes.length-1; i > -1 ; i--) {
+ var a = node.attributes[i];
+ //console.log(a);
+ if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
+ node.removeAttribute(a.name);
+ continue;
+ }
+
+
+
+ if (a.name.toLowerCase().substr(0,2)=='on') {
+ node.removeAttribute(a.name);
+ continue;
+ }
+
+
+ if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
+ node.removeAttribute(a.name);
+ continue;
+ }
+ if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
+ this.cleanAttr(node,a.name,a.value); // fixme..
+ continue;
+ }
+ if (a.name == 'style') {
+ this.cleanStyle(node,a.name,a.value);
+ continue;
+ }
+ /// clean up MS crap..
+ // tecnically this should be a list of valid class'es..
+
+
+ if (a.name == 'class') {
+ if (a.value.match(/^Mso/)) {
+ node.removeAttribute('class');
+ }
+
+ if (a.value.match(/^body$/)) {
+ node.removeAttribute('class');
+ }
+ continue;
+ }
+
+
+ // style cleanup!?
+ // class cleanup?
+
}
- if (attr === false) {
- return n;
+ return true; // clean children
+ },
+
+ cleanAttr: function(node, n,v)
+ {
+
+ if (v.match(/^\./) || v.match(/^\//)) {
+ return;
}
- if (attr == 'html') {
- return n.innerHTML;
+ if (v.match(/^(http|https):\/\//)
+ || v.match(/^mailto:/)
+ || v.match(/^ftp:/)
+ || v.match(/^data:/)
+ ) {
+ return;
}
- if (attr == 'style') {
- return n.style[style];
+ if (v.match(/^#/)) {
+ return;
+ }
+ if (v.match(/^\{/)) { // allow template editing.
+ return;
}
+// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
+ node.removeAttribute(n);
- return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
-
- },
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * (override this)
- */
- toObject : function()
- {
- return {};
},
- /**
- * Read a node that has a 'data-block' property - and extract the values from it.
- * @param {DomElement} node - the node
- */
- readElement : function(node)
+ cleanStyle : function(node, n,v)
{
+ if (v.match(/expression/)) { //XSS?? should we even bother..
+ node.removeAttribute(n);
+ return;
+ }
+
+ var parts = v.split(/;/);
+ var clean = [];
+
+ Roo.each(parts, function(p) {
+ p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (!p.length) {
+ return true;
+ }
+ var l = p.split(':').shift().replace(/\s+/g,'');
+ l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
+
+ if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
+ return true;
+ }
+ //Roo.log()
+ // only allow 'c whitelisted system attributes'
+ if ( this.style_white.length && style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
+ return true;
+ }
+
+
+ clean.push(p);
+ return true;
+ },this);
+ if (clean.length) {
+ node.setAttribute(n, clean.join(';'));
+ } else {
+ node.removeAttribute(n);
+ }
+
+ }
+
+
- }
-
-};
+});/**
+ * @class Roo.htmleditor.FilterBlack
+ * remove blacklisted elements.
+ * @constructor
+ * Run a new Blacklisted Filter
+ * @param {Object} config Configuration options
+ */
-
+Roo.htmleditor.FilterBlack = function(cfg)
+{
+ Roo.apply(this, cfg);
+ this.walk(cfg.node);
+}
+Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
+{
+ tag : true, // all elements.
+
+ replaceTag : function(n)
+ {
+ n.parentNode.removeChild(n);
+ }
+});
/**
- * @class Roo.htmleditor.BlockFigure
- * Block that has an image and a figcaption
- * @cfg {String} image_src the url for the image
- * @cfg {String} align (left|right) alignment for the block default left
- * @cfg {String} caption the text to appear below (and in the alt tag)
- * @cfg {String} caption_display (block|none) display or not the caption
- * @cfg {String|number} image_width the width of the image number or %?
- * @cfg {String|number} image_height the height of the image number or %?
- *
+ * @class Roo.htmleditor.FilterComment
+ * remove comments.
* @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
+* Run a new Comments Filter
+* @param {Object} config Configuration options
*/
+Roo.htmleditor.FilterComment = function(cfg)
+{
+ this.walk(cfg.node);
+}
-Roo.htmleditor.BlockFigure = function(cfg)
+Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
{
- if (cfg.node) {
- this.readElement(cfg.node);
- this.updateElement(cfg.node);
+
+ replaceComment : function(n)
+ {
+ n.parentNode.removeChild(n);
}
+});/**
+ * @class Roo.htmleditor.FilterKeepChildren
+ * remove tags but keep children
+ * @constructor
+ * Run a new Keep Children Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterKeepChildren = function(cfg)
+{
Roo.apply(this, cfg);
+ if (this.tag === false) {
+ return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
+ }
+ // hacky?
+ if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
+ this.cleanNamespace = true;
+ }
+
+ this.walk(cfg.node);
}
-Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
-
-
- // setable values.
- image_src: '',
- align: 'center',
- caption : '',
- caption_display : 'block',
- width : '100%',
- cls : '',
- href: '',
- video_url : '',
-
- // margin: '2%', not used
-
- text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
-
- // used by context menu
- friendly_name : 'Image with caption',
- deleteTitle : "Delete Image and Caption",
-
- contextMenu : function(toolbar)
+Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
+{
+ cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
+
+ replaceTag : function(node)
{
+ // walk children...
+ //Roo.log(node.tagName);
+ var ar = Array.from(node.childNodes);
+ //remove first..
- var block = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
- };
-
-
- var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
-
- var syncValue = toolbar.editorcore.syncValue;
-
- var fields = {};
-
- return [
- {
- xtype : 'TextItem',
- text : "Source: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'Button',
- text: 'Change Image URL',
-
- listeners : {
- click: function (btn, state)
- {
- var b = block();
-
- Roo.MessageBox.show({
- title : "Image Source URL",
- msg : "Enter the url for the image",
- buttons: Roo.MessageBox.OKCANCEL,
- fn: function(btn, val){
- if (btn != 'ok') {
- return;
- }
- b.image_src = val;
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- },
- minWidth:250,
- prompt:true,
- //multiline: multiline,
- modal : true,
- value : b.image_src
- });
- }
- },
- xns : rooui.Toolbar
- },
-
- {
- xtype : 'Button',
- text: 'Change Link URL',
-
- listeners : {
- click: function (btn, state)
- {
- var b = block();
-
- Roo.MessageBox.show({
- title : "Link URL",
- msg : "Enter the url for the link - leave blank to have no link",
- buttons: Roo.MessageBox.OKCANCEL,
- fn: function(btn, val){
- if (btn != 'ok') {
- return;
- }
- b.href = val;
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- },
- minWidth:250,
- prompt:true,
- //multiline: multiline,
- modal : true,
- value : b.href
- });
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: 'Show Video URL',
-
- listeners : {
- click: function (btn, state)
- {
- Roo.MessageBox.alert("Video URL",
- block().video_url == '' ? 'This image is not linked ot a video' :
- 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
- }
- },
- xns : rooui.Toolbar
- },
-
-
- {
- xtype : 'TextItem',
- text : "Width: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 70,
- name : 'width',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = block();
- b.width = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['100%'],
- ['80%'],
- ['50%'],
- ['20%'],
- ['10%']
- ],
- fields : [ 'val'],
- xns : Roo.data
- }
- },
- {
- xtype : 'TextItem',
- text : "Align: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 70,
- name : 'align',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = block();
- b.align = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['left'],
- ['right'],
- ['center']
- ],
- fields : [ 'val'],
- xns : Roo.data
+ for (var i = 0; i < ar.length; i++) {
+ var e = ar[i];
+ if (e.nodeType == 1) {
+ if (
+ (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
+ || // array and it matches
+ (typeof(this.tag) == 'string' && this.tag == e.tagName)
+ ||
+ (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
+ ||
+ (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
+ ) {
+ this.replaceTag(ar[i]); // child is blacklisted as well...
+ continue;
}
- },
-
-
- {
- xtype : 'Button',
- text: 'Hide Caption',
- name : 'caption_display',
- pressed : false,
- enableToggle : true,
- setValue : function(v) {
- // this trigger toggle.
-
- this.setText(v ? "Hide Caption" : "Show Caption");
- this.setPressed(v != 'block');
- },
- listeners : {
- toggle: function (btn, state)
- {
- var b = block();
- b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
- this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
- b.updateElement();
- syncValue();
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
}
- ];
-
- },
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- */
- toObject : function()
- {
- var d = document.createElement('div');
- d.innerHTML = this.caption;
-
- var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0;
-
- var iw = this.align == 'center' ? this.width : '100%';
- var img = {
- tag : 'img',
- contenteditable : 'false',
- src : this.image_src,
- alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
- style: {
- width : iw,
- maxWidth : iw + ' !important', // this is not getting rendered?
- margin : m
+ }
+ ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+ if (this.tag !== false) {
+ this.walk(ar[i]);
}
- };
- /*
- '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
- '<a href="{2}">' +
- '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
- '</a>' +
- '</div>',
- */
-
- if (this.href.length > 0) {
- img = {
- tag : 'a',
- href: this.href,
- contenteditable : 'true',
- cn : [
- img
- ]
- };
}
+ //Roo.log("REMOVE:" + node.tagName);
+ node.parentNode.removeChild(node);
+ return false; // don't walk children
- if (this.video_url.length > 0) {
- img = {
- tag : 'div',
- cls : this.cls,
- frameborder : 0,
- allowfullscreen : true,
- width : 420, // these are for video tricks - that we replace the outer
- height : 315,
- src : this.video_url,
- cn : [
- img
- ]
- };
- }
-
+ }
+});/**
+ * @class Roo.htmleditor.FilterParagraph
+ * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
+ * like on 'push' to remove the <p> tags and replace them with line breaks.
+ * @constructor
+ * Run a new Paragraph Filter
+ * @param {Object} config Configuration options
+ */
-
- var ret = {
- tag: 'figure',
- 'data-block' : 'Figure',
- 'data-width' : this.width,
- 'data-caption' : this.caption,
- 'data-caption-display' : this.caption_display,
- contenteditable : 'false',
-
- style : {
- display: 'block',
- float : this.align ,
- maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'),
- width : this.align == 'center' ? '100%' : this.width,
- margin: '0px',
- padding: this.align == 'center' ? '0' : '0 10px' ,
- textAlign : this.align // seems to work for email..
-
- },
-
- align : this.align,
- cn : [
- img
- ]
- };
+Roo.htmleditor.FilterParagraph = function(cfg)
+{
+ // no need to apply config.
+ this.searchTag(cfg.node);
+}
- // show figcaption only if caption_display is 'block'
- if(this.caption_display == 'block') {
- ret['cn'].push({
- tag: 'figcaption',
- style : {
- textAlign : 'left',
- fontSize : '16px',
- lineHeight : '24px',
- display : this.caption_display,
- maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important',
- margin: m,
- width: this.align == 'center' ? this.width : '100%'
-
-
- },
- cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
- cn : [
- {
- tag: 'div',
- style : {
- marginTop : '16px',
- textAlign : 'start'
- },
- align: 'left',
- cn : [
- {
- // we can not rely on yahoo syndication to use CSS elements - so have to use '<i>' to encase stuff.
- tag : 'i',
- contenteditable : Roo.htmleditor.BlockFigure.caption_edit,
- html : this.caption.length ? this.caption : "Caption" // fake caption
- }
-
- ]
- }
-
- ]
-
- });
- }
- return ret;
-
- },
+Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
+{
- readElement : function(node)
+
+ tag : 'P',
+
+
+ replaceTag : function(node)
{
- // this should not really come from the link...
- this.video_url = this.getVal(node, 'div', 'src');
- this.cls = this.getVal(node, 'div', 'class');
- this.href = this.getVal(node, 'a', 'href');
-
- this.image_src = this.getVal(node, 'img', 'src');
-
- this.align = this.getVal(node, 'figure', 'align');
-
- // caption display is stored in figure
- this.caption_display = this.getVal(node, true, 'data-caption-display');
-
- // backward compatible
- // it was stored in figcaption
- if(this.caption_display == '') {
- this.caption_display = this.getVal(node, 'figcaption', 'data-display');
- }
-
- // read caption from figcaption
- var figcaption = this.getVal(node, 'figcaption', false);
-
- if (figcaption !== '') {
- this.caption = this.getVal(figcaption, 'i', 'html');
+ if (node.childNodes.length == 1 &&
+ node.childNodes[0].nodeType == 3 &&
+ node.childNodes[0].textContent.trim().length < 1
+ ) {
+ // remove and replace with '<BR>';
+ node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
+ return false; // no need to walk..
}
-
-
- // read caption from data-caption in figure if no caption from figcaption
- var dc = this.getVal(node, true, 'data-caption');
- if(this.caption_display == 'none' && dc && dc.length){
- this.caption = dc;
+ var ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
}
-
- //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
- this.width = this.getVal(node, true, 'data-width');
- //this.margin = this.getVal(node, 'figure', 'style', 'margin');
+ // now what about this?
+ // <p> </p>
- },
- removeNode : function()
- {
- return this.node;
+ // double BR.
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.removeChild(node);
+
+ return false;
+
}
-
-
-
-
-
-
-
-});
-
-Roo.apply(Roo.htmleditor.BlockFigure, {
- caption_edit : true
-});
+});/**
+ * @class Roo.htmleditor.FilterHashLink
+ * remove hash link
+ * @constructor
+ * Run a new Hash Link Filter
+ * @param {Object} config Configuration options
+ */
+ Roo.htmleditor.FilterHashLink = function(cfg)
+ {
+ // no need to apply config.
+ // this.walk(cfg.node);
+ this.searchTag(cfg.node);
+ }
+ Roo.extend(Roo.htmleditor.FilterHashLink, Roo.htmleditor.Filter,
+ {
+
+ tag : 'A',
+
+
+ replaceTag : function(node)
+ {
+ for(var i = 0; i < node.attributes.length; i ++) {
+ var a = node.attributes[i];
-/**
- * @class Roo.htmleditor.BlockTable
- * Block that manages a table
- *
+ if(a.name.toLowerCase() == 'href' && a.value.startsWith('#')) {
+ this.removeNodeKeepChildren(node);
+ }
+ }
+
+ return false;
+
+ }
+
+ });/**
+ * @class Roo.htmleditor.FilterSpan
+ * filter span's with no attributes out..
* @constructor
- * Create a new Filter.
+ * Run a new Span Filter
* @param {Object} config Configuration options
*/
-Roo.htmleditor.BlockTable = function(cfg)
+Roo.htmleditor.FilterSpan = function(cfg)
{
- if (cfg.node) {
- this.readElement(cfg.node);
- this.updateElement(cfg.node);
- }
- Roo.apply(this, cfg);
- if (!cfg.node) {
- this.rows = [];
- for(var r = 0; r < this.no_row; r++) {
- this.rows[r] = [];
- for(var c = 0; c < this.no_col; c++) {
- this.rows[r][c] = this.emptyCell();
- }
+ // no need to apply config.
+ this.searchTag(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
+{
+
+ tag : 'SPAN',
+
+
+ replaceTag : function(node)
+ {
+ if (node.attributes && node.attributes.length > 0) {
+ return true; // walk if there are any.
}
+ Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
+ return false;
+
}
-
+});/**
+ * @class Roo.htmleditor.FilterTableWidth
+ try and remove table width data - as that frequently messes up other stuff.
+ *
+ * was cleanTableWidths.
+ *
+ * Quite often pasting from word etc.. results in tables with column and widths.
+ * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
+ *
+ * @constructor
+ * Run a new Table Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterTableWidth = function(cfg)
+{
+ // no need to apply config.
+ this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
+ this.walk(cfg.node);
}
-Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
-
- rows : false,
- no_col : 1,
- no_row : 1,
-
-
- width: '100%',
-
- // used by context menu
- friendly_name : 'Table',
- deleteTitle : 'Delete Table',
- // context menu is drawn once..
+
+Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+{
+
+
- contextMenu : function(toolbar)
- {
-
- var block = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
- };
-
-
- var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+ replaceTag: function(node) {
- var syncValue = toolbar.editorcore.syncValue;
- var fields = {};
+
+ if (node.hasAttribute('width')) {
+ node.removeAttribute('width');
+ }
- return [
- {
- xtype : 'TextItem',
- text : "Width: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 100,
- name : 'width',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = block();
- b.width = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['100%'],
- ['auto']
- ],
- fields : [ 'val'],
- xns : Roo.data
- }
- },
- // -------- Cols
-
- {
- xtype : 'TextItem',
- text : "Columns: ",
- xns : rooui.Toolbar //Boostrap?
- },
-
- {
- xtype : 'Button',
- text: '-',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- block().removeColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: '+',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- block().addColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- // -------- ROWS
- {
- xtype : 'TextItem',
- text : "Rows: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'Button',
- text: '-',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- block().removeRow();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: '+',
- listeners : {
- click : function (_self, e)
- {
- block().addRow();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- // -------- ROWS
- {
- xtype : 'Button',
- text: 'Reset Column Widths',
- listeners : {
-
- click : function (_self, e)
- {
- block().resetWidths();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- }
-
-
+ if (node.hasAttribute("style")) {
+ // pretty basic...
- ];
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
+ return;
+ }
+ var kv = s.split(":");
+ if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
+ return;
+ }
+ // what ever is left... we allow.
+ nstyle.push(s);
+ });
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
+ }
+ }
- },
+ return true; // continue doing children..
+ }
+});/**
+ * @class Roo.htmleditor.FilterWord
+ * try and clean up all the mess that Word generates.
+ *
+ * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters
+
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterWord = function(cfg)
+{
+ // no need to apply config.
+ this.replaceDocBullets(cfg.node);
+ this.replaceAname(cfg.node);
+ // this is disabled as the removal is done by other filters;
+ // this.walk(cfg.node);
+ this.replaceImageTable(cfg.node);
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * ?? should it be called with option to hide all editing features?
+}
+
+Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
+{
+ tag: true,
+
+
+ /**
+ * Clean up MS wordisms...
*/
- toObject : function()
+ replaceTag : function(node)
{
+
+ // no idea what this does - span with text, replaceds with just text.
+ if(
+ node.nodeName == 'SPAN' &&
+ !node.hasAttributes() &&
+ node.childNodes.length == 1 &&
+ node.firstChild.nodeName == "#text"
+ ) {
+ var textNode = node.firstChild;
+ node.removeChild(textNode);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
+ }
+ node.parentNode.insertBefore(textNode, node);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
+ }
+
+ node.parentNode.removeChild(node);
+ return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
+ }
- var ret = {
- tag : 'table',
- contenteditable : 'false', // this stops cell selection from picking the table.
- 'data-block' : 'Table',
- style : {
- width: this.width,
- border : 'solid 1px #000', // ??? hard coded?
- 'border-collapse' : 'collapse'
- },
- cn : [
- { tag : 'tbody' , cn : [] }
- ]
- };
+
- // do we have a head = not really
- var ncols = 0;
- Roo.each(this.rows, function( row ) {
- var tr = {
- tag: 'tr',
- style : {
- margin: '6px',
- border : 'solid 1px #000',
- textAlign : 'left'
- },
- cn : [ ]
- };
-
- ret.cn[0].cn.push(tr);
- // does the row have any properties? ?? height?
- var nc = 0;
- Roo.each(row, function( cell ) {
-
- var td = {
- tag : 'td',
- contenteditable : 'true',
- 'data-block' : 'Td',
- html : cell.html,
- style : cell.style
- };
- if (cell.colspan > 1) {
- td.colspan = cell.colspan ;
- nc += cell.colspan;
- } else {
- nc++;
- }
- if (cell.rowspan > 1) {
- td.rowspan = cell.rowspan ;
+ if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
+ node.parentNode.removeChild(node);
+ return false; // dont do chidlren
+ }
+ //Roo.log(node.tagName);
+ // remove - but keep children..
+ if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
+ //Roo.log('-- removed');
+ while (node.childNodes.length) {
+ var cn = node.childNodes[0];
+ node.removeChild(cn);
+ node.parentNode.insertBefore(cn, node);
+ // move node to parent - and clean it..
+ if (cn.nodeType == 1) {
+ this.replaceTag(cn);
}
-
- // widths ?
- tr.cn.push(td);
-
-
- }, this);
- ncols = Math.max(nc, ncols);
-
+ }
+ node.parentNode.removeChild(node);
+ /// no need to iterate chidlren = it's got none..
+ //this.iterateChildren(node, this.cleanWord);
+ return false; // no need to iterate children.
+ }
+ // clean styles
+ if (node.className.length) {
- }, this);
- // add the header row..
-
- ncols++;
-
+ var cn = node.className.split(/\W+/);
+ var cna = [];
+ Roo.each(cn, function(cls) {
+ if (cls.match(/Mso[a-zA-Z]+/)) {
+ return;
+ }
+ cna.push(cls);
+ });
+ node.className = cna.length ? cna.join(' ') : '';
+ if (!cna.length) {
+ node.removeAttribute("class");
+ }
+ }
- return ret;
-
- },
-
- readElement : function(node)
- {
- node = node ? node : this.node ;
- this.width = this.getVal(node, true, 'style', 'width') || '100%';
+ if (node.hasAttribute("lang")) {
+ node.removeAttribute("lang");
+ }
- this.rows = [];
- this.no_row = 0;
- var trs = Array.from(node.rows);
- trs.forEach(function(tr) {
- var row = [];
- this.rows.push(row);
-
- this.no_row++;
- var no_column = 0;
- Array.from(tr.cells).forEach(function(td) {
-
- var add = {
- colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
- rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
- style : td.hasAttribute('style') ? td.getAttribute('style') : '',
- html : td.innerHTML
- };
- no_column += add.colspan;
-
-
- row.push(add);
-
-
- },this);
- this.no_col = Math.max(this.no_col, no_column);
-
+ if (node.hasAttribute("style")) {
- },this);
-
-
- },
- normalizeRows: function()
- {
- var ret= [];
- var rid = -1;
- this.rows.forEach(function(row) {
- rid++;
- ret[rid] = [];
- row = this.normalizeRow(row);
- var cid = 0;
- row.forEach(function(c) {
- while (typeof(ret[rid][cid]) != 'undefined') {
- cid++;
- }
- if (typeof(ret[rid]) == 'undefined') {
- ret[rid] = [];
- }
- ret[rid][cid] = c;
- c.row = rid;
- c.col = cid;
- if (c.rowspan < 2) {
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
return;
}
-
- for(var i = 1 ;i < c.rowspan; i++) {
- if (typeof(ret[rid+i]) == 'undefined') {
- ret[rid+i] = [];
- }
- ret[rid+i][cid] = c;
+ var kv = s.split(":");
+ if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
+ return;
}
+ // what ever is left... we allow.
+ nstyle.push(s);
});
- }, this);
- return ret;
-
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
+ }
+ }
+ return true; // do children
+
+
+
},
- normalizeRow: function(row)
+ styleToObject: function(node)
{
- var ret= [];
- row.forEach(function(c) {
- if (c.colspan < 2) {
- ret.push(c);
+ var styles = (node.getAttribute("style") || '').split(";");
+ var ret = {};
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
return;
}
- for(var i =0 ;i < c.colspan; i++) {
- ret.push(c);
- }
+ var kv = s.split(":");
+
+ // what ever is left... we allow.
+ ret[kv[0].trim()] = kv[1];
});
return ret;
-
},
- deleteColumn : function(sel)
+
+ replaceAname : function (doc)
{
- if (!sel || sel.type != 'col') {
- return;
- }
- if (this.no_col < 2) {
- return;
- }
-
- this.rows.forEach(function(row) {
- var cols = this.normalizeRow(row);
- var col = cols[sel.col];
- if (col.colspan > 1) {
- col.colspan --;
- } else {
- row.remove(col);
+ // replace all the a/name without..
+ var aa = Array.from(doc.getElementsByTagName('a'));
+ for (var i = 0; i < aa.length; i++) {
+ var a = aa[i];
+ if (a.hasAttribute("name")) {
+ a.removeAttribute("name");
}
+ if (a.hasAttribute("href")) {
+ continue;
+ }
+ // reparent children.
+ this.removeNodeKeepChildren(a);
- }, this);
- this.no_col--;
+ }
+
- },
- removeColumn : function()
- {
- this.deleteColumn({
- type: 'col',
- col : this.no_col-1
- });
- this.updateElement();
- },
-
-
- addColumn : function()
- {
- this.rows.forEach(function(row) {
- row.push(this.emptyCell());
-
- }, this);
- this.updateElement();
},
+
- deleteRow : function(sel)
+
+ replaceDocBullets : function(doc)
{
- if (!sel || sel.type != 'row') {
- return;
+ // this is a bit odd - but it appears some indents use ql-indent-1
+ //Roo.log(doc.innerHTML);
+
+ var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
- if (this.no_row < 2) {
- return;
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
+ }
+ listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
+ }
+ listpara = Array.from(doc.getElementsByClassName('ql-indent-1'));
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara[i].className = "MsoListParagraph";
}
- var rows = this.normalizeRows();
-
-
- rows[sel.row].forEach(function(col) {
- if (col.rowspan > 1) {
- col.rowspan--;
- } else {
- col.remove = 1; // flage it as removed.
+ // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
+ var htwo = Array.from(doc.getElementsByTagName('h2'));
+ for( var i = 0; i < htwo.length; i ++) {
+ if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
+ htwo[i].className = "MsoListParagraph";
}
-
- }, this);
- var newrows = [];
- this.rows.forEach(function(row) {
- newrow = [];
- row.forEach(function(c) {
- if (typeof(c.remove) == 'undefined') {
- newrow.push(c);
- }
-
- });
- if (newrow.length > 0) {
- newrows.push(row);
+ }
+ listpara = Array.from(doc.getElementsByClassName('MsoNormal'));
+ for( var i = 0; i < listpara.length; i ++) {
+ if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
+ listpara[i].className = "MsoListParagraph";
+ } else {
+ listpara[i].className = "MsoNormalx";
}
- });
- this.rows = newrows;
-
-
+ }
+
+ listpara = doc.getElementsByClassName('MsoListParagraph');
+ // Roo.log(doc.innerHTML);
- this.no_row--;
- this.updateElement();
- },
- removeRow : function()
- {
- this.deleteRow({
- type: 'row',
- row : this.no_row-1
- });
+ while(listpara.length) {
+
+ this.replaceDocBullet(listpara.item(0));
+ }
+
},
- addRow : function()
+
+ replaceDocBullet : function(p)
{
+ // gather all the siblings.
+ var ns = p,
+ parent = p.parentNode,
+ doc = parent.ownerDocument,
+ items = [];
+
+ //Roo.log("Parsing: " + p.innerText) ;
+ var listtype = 'ul';
+ while (ns) {
+ if (ns.nodeType != 1) {
+ ns = ns.nextSibling;
+ continue;
+ }
+ if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
+ //Roo.log("Missing para r q1indent - got:" + ns.className);
+ break;
+ }
+ var spans = ns.getElementsByTagName('span');
+
+ if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
+ items.push(ns);
+ ns = ns.nextSibling;
+ has_list = true;
+ if (!spans.length) {
+ continue;
+ }
+ var ff = '';
+ var se = spans[0];
+ for (var i = 0; i < spans.length;i++) {
+ se = spans[i];
+ if (se.hasAttribute('style') && se.hasAttribute('style') && se.style.fontFamily != '') {
+ ff = se.style.fontFamily;
+ break;
+ }
+ }
+
+
+ //Roo.log("got font family: " + ff);
+ if (typeof(ff) != 'undefined' && !ff.match(/(Symbol|Wingdings)/) && "·o".indexOf(se.innerText.trim()) < 0) {
+ listtype = 'ol';
+ }
+
+ continue;
+ }
+ //Roo.log("no mso-list?");
+
+ var spans = ns.getElementsByTagName('span');
+ if (!spans.length) {
+ break;
+ }
+ var has_list = false;
+ for(var i = 0; i < spans.length; i++) {
+ if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
+ has_list = true;
+ break;
+ }
+ }
+ if (!has_list) {
+ break;
+ }
+ items.push(ns);
+ ns = ns.nextSibling;
+
+
+ }
+ if (!items.length) {
+ ns.className = "";
+ return;
+ }
- var row = [];
- for (var i = 0; i < this.no_col; i++ ) {
+ var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
+ parent.insertBefore(ul, p);
+ var lvl = 0;
+ var stack = [ ul ];
+ var last_li = false;
+
+ var margin_to_depth = {};
+ max_margins = -1;
+
+ items.forEach(function(n, ipos) {
+ //Roo.log("got innertHMLT=" + n.innerHTML);
- row.push(this.emptyCell());
+ var spans = n.getElementsByTagName('span');
+ if (!spans.length) {
+ //Roo.log("No spans found");
+
+ parent.removeChild(n);
+
+
+ return; // skip it...
+ }
- }
- this.rows.push(row);
- this.updateElement();
+
+ var num = 1;
+ var style = {};
+ for(var i = 0; i < spans.length; i++) {
+
+ style = this.styleToObject(spans[i]);
+ if (typeof(style['mso-list']) == 'undefined') {
+ continue;
+ }
+ if (listtype == 'ol') {
+ num = spans[i].innerText.replace(/[^0-9]+]/g,'') * 1;
+ }
+ spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
+ break;
+ }
+ //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
+ style = this.styleToObject(n); // mo-list is from the parent node.
+ if (typeof(style['mso-list']) == 'undefined') {
+ //Roo.log("parent is missing level");
+
+ parent.removeChild(n);
+
+ return;
+ }
+
+ var margin = style['margin-left'];
+ if (typeof(margin_to_depth[margin]) == 'undefined') {
+ max_margins++;
+ margin_to_depth[margin] = max_margins;
+ }
+ nlvl = margin_to_depth[margin] ;
+
+ if (nlvl > lvl) {
+ //new indent
+ var nul = doc.createElement(listtype); // what about number lists...
+ if (!last_li) {
+ last_li = doc.createElement('li');
+ stack[lvl].appendChild(last_li);
+ }
+ last_li.appendChild(nul);
+ stack[nlvl] = nul;
+
+ }
+ lvl = nlvl;
+
+ // not starting at 1..
+ if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
+ stack[nlvl].setAttribute("start", num);
+ }
+
+ var nli = stack[nlvl].appendChild(doc.createElement('li'));
+ last_li = nli;
+ nli.innerHTML = n.innerHTML;
+ //Roo.log("innerHTML = " + n.innerHTML);
+ parent.removeChild(n);
+
+
+
+
+ },this);
+
+
- },
-
- // the default cell object... at present...
- emptyCell : function() {
- return (new Roo.htmleditor.BlockTd({})).toObject();
-
- },
-
- removeNode : function()
- {
- return this.node;
},
-
-
- resetWidths : function()
+ replaceImageTable : function(doc)
{
- Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
- var nn = Roo.htmleditor.Block.factory(n);
- nn.width = '';
- nn.updateElement(n);
+ /*
+ <table cellpadding=0 cellspacing=0 align=left>
+ <tr>
+ <td width=423 height=0></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><img width=601 height=401
+ src="file:///C:/Users/Alan/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg"
+ v:shapes="Picture_x0020_2"></td>
+ </tr>
+ </table>
+ */
+ var imgs = Array.from(doc.getElementsByTagName('img'));
+ Roo.each(imgs, function(img) {
+ var td = img.parentNode;
+ if (td.nodeName != 'TD') {
+ return;
+ }
+ var tr = td.parentNode;
+ if (tr.nodeName != 'TR') {
+ return;
+ }
+ var tbody = tr.parentNode;
+ if (tbody.nodeName != 'TBODY') {
+ return;
+ }
+ var table = tbody.parentNode;
+ if (table.nodeName != 'TABLE') {
+ return;
+ }
+ // first row..
+
+ if (table.getElementsByTagName('tr').length != 2) {
+ return;
+ }
+ if (table.getElementsByTagName('td').length != 3) {
+ return;
+ }
+ if (table.innerText.trim() != '') {
+ return;
+ }
+ var p = table.parentNode;
+ img.parentNode.removeChild(img);
+ p.insertBefore(img, table);
+ p.removeChild(table);
+
+
+
});
+
+
}
-
-
-
-})
-
-/**
- *
- * editing a TD?
- *
- * since selections really work on the table cell, then editing really should work from there
- *
- * The original plan was to support merging etc... - but that may not be needed yet..
- *
- * So this simple version will support:
- * add/remove cols
- * adjust the width +/-
- * reset the width...
- *
- *
- */
-
-
-
-
+});
/**
- * @class Roo.htmleditor.BlockTable
- * Block that manages a table
+ * @class Roo.htmleditor.FilterStyleToTag
+ * part of the word stuff... - certain 'styles' should be converted to tags.
+ * eg.
+ * font-weight: bold -> bold
+ * ?? super / subscrit etc..
*
* @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
+* Run a new style to tag filter.
+* @param {Object} config Configuration options
*/
-
-Roo.htmleditor.BlockTd = function(cfg)
+Roo.htmleditor.FilterStyleToTag = function(cfg)
{
- if (cfg.node) {
- this.readElement(cfg.node);
- this.updateElement(cfg.node);
- }
+
+ this.tags = {
+ B : [ 'fontWeight' , 'bold'],
+ I : [ 'fontStyle' , 'italic'],
+ //pre : [ 'font-style' , 'italic'],
+ // h1.. h6 ?? font-size?
+ SUP : [ 'verticalAlign' , 'super' ],
+ SUB : [ 'verticalAlign' , 'sub' ]
+
+
+ };
+
Roo.apply(this, cfg);
+ this.walk(cfg.node);
+
+
}
-Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
-
- node : false,
+
+
+Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
+{
+ tag: true, // all tags
- width: '',
- textAlign : 'left',
- valign : 'top',
+ tags : false,
- colspan : 1,
- rowspan : 1,
+ replaceTag : function(node)
+ {
+
+
+ if (node.getAttribute("style") === null) {
+ return true;
+ }
+ var inject = [];
+ for (var k in this.tags) {
+ if (node.style[this.tags[k][0]] == this.tags[k][1]) {
+ inject.push(k);
+ node.style.removeProperty(this.tags[k][0]);
+ }
+ }
+ if (!inject.length) {
+ return true;
+ }
+ var cn = Array.from(node.childNodes);
+ var nn = node;
+ Roo.each(inject, function(t) {
+ var nc = node.ownerDocument.createElement(t);
+ nn.appendChild(nc);
+ nn = nc;
+ });
+ for(var i = 0;i < cn.length;cn++) {
+ node.removeChild(cn[i]);
+ nn.appendChild(cn[i]);
+ }
+ return true /// iterate thru
+ }
- // used by context menu
- friendly_name : 'Table Cell',
- deleteTitle : false, // use our customer delete
+})/**
+ * @class Roo.htmleditor.FilterLongBr
+ * BR/BR/BR - keep a maximum of 2...
+ * @constructor
+ * Run a new Long BR Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterLongBr = function(cfg)
+{
+ // no need to apply config.
+ this.searchTag(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
+{
- // context menu is drawn once..
+
+ tag : 'BR',
- contextMenu : function(toolbar)
+
+ replaceTag : function(node)
{
- var cell = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
- };
+ var ps = node.nextSibling;
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.nextSibling;
+ }
- var table = function() {
- return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
- };
+ if (!ps && [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) {
+ node.parentNode.removeChild(node); // remove last BR inside one fo these tags
+ return false;
+ }
- var lr = false;
- var saveSel = function()
- {
- lr = toolbar.editorcore.getSelection().getRangeAt(0);
+ if (!ps || ps.nodeType != 1) {
+ return false;
}
- var restoreSel = function()
- {
- if (lr) {
- (function() {
- toolbar.editorcore.focus();
- var cr = toolbar.editorcore.getSelection();
- cr.removeAllRanges();
- cr.addRange(lr);
- toolbar.editorcore.onEditorEvent();
- }).defer(10, this);
-
-
- }
+
+ if (!ps || ps.tagName != 'BR') {
+
+ return false;
}
- var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- var syncValue = toolbar.editorcore.syncValue;
- var fields = {};
+ if (!node.previousSibling) {
+ return false;
+ }
+ var ps = node.previousSibling;
- return [
- {
- xtype : 'Button',
- text : 'Edit Table',
- listeners : {
- click : function() {
- var t = toolbar.tb.selectedNode.closest('table');
- toolbar.editorcore.selectNode(t);
- toolbar.editorcore.onEditorEvent();
- }
- }
-
- },
-
-
-
- {
- xtype : 'TextItem',
- text : "Column Width: ",
- xns : rooui.Toolbar
-
- },
- {
- xtype : 'Button',
- text: '-',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().shrinkColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Button',
- text: '+',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().growColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
-
- {
- xtype : 'TextItem',
- text : "Vertical Align: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'ComboBox',
- allowBlank : false,
- displayField : 'val',
- editable : true,
- listWidth : 100,
- triggerAction : 'all',
- typeAhead : true,
- valueField : 'val',
- width : 100,
- name : 'valign',
- listeners : {
- select : function (combo, r, index)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = cell();
- b.valign = r.get('val');
- b.updateElement();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.form,
- store : {
- xtype : 'SimpleStore',
- data : [
- ['top'],
- ['middle'],
- ['bottom'] // there are afew more...
- ],
- fields : [ 'val'],
- xns : Roo.data
- }
- },
-
- {
- xtype : 'TextItem',
- text : "Merge Cells: ",
- xns : rooui.Toolbar
-
- },
-
-
- {
- xtype : 'Button',
- text: 'Right',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().mergeRight();
- //block().growColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
-
- {
- xtype : 'Button',
- text: 'Below',
- listeners : {
- click : function (_self, e)
- {
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().mergeBelow();
- //block().growColumn();
- syncValue();
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'TextItem',
- text : "| ",
- xns : rooui.Toolbar
-
- },
-
- {
- xtype : 'Button',
- text: 'Split',
- listeners : {
- click : function (_self, e)
- {
- //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- cell().split();
- syncValue();
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- toolbar.editorcore.onEditorEvent();
-
- }
- },
- xns : rooui.Toolbar
- },
- {
- xtype : 'Fill',
- xns : rooui.Toolbar
-
- },
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.previousSibling;
+ }
+ if (!ps || ps.nodeType != 1) {
+ return false;
+ }
+ // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
+ if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
+ return false;
+ }
-
- {
- xtype : 'Button',
- text: 'Delete',
-
- xns : rooui.Toolbar,
- menu : {
- xtype : 'Menu',
- xns : rooui.menu,
- items : [
- {
- xtype : 'Item',
- html: 'Column',
- listeners : {
- click : function (_self, e)
- {
- var t = table();
-
- cell().deleteColumn();
- syncValue();
- toolbar.editorcore.selectNode(t.node);
- toolbar.editorcore.onEditorEvent();
- }
- },
- xns : rooui.menu
- },
- {
- xtype : 'Item',
- html: 'Row',
- listeners : {
- click : function (_self, e)
- {
- var t = table();
- cell().deleteRow();
- syncValue();
-
- toolbar.editorcore.selectNode(t.node);
- toolbar.editorcore.onEditorEvent();
-
- }
- },
- xns : rooui.menu
- },
- {
- xtype : 'Separator',
- xns : rooui.menu
- },
- {
- xtype : 'Item',
- html: 'Table',
- listeners : {
- click : function (_self, e)
- {
- var t = table();
- var nn = t.node.nextSibling || t.node.previousSibling;
- t.node.parentNode.removeChild(t.node);
- if (nn) {
- toolbar.editorcore.selectNode(nn, true);
- }
- toolbar.editorcore.onEditorEvent();
-
- }
- },
- xns : rooui.menu
- }
- ]
- }
- }
-
- // align... << fixme
-
- ];
+ node.parentNode.removeChild(node); // remove me...
- },
+ return false; // no need to do children
+
+ }
+});
+
+/**
+ * @class Roo.htmleditor.FilterBlock
+ * removes id / data-block and contenteditable that are associated with blocks
+ * usage should be done on a cloned copy of the dom
+ * @constructor
+* Run a new Attribute Filter { node : xxxx }}
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterBlock = function(cfg)
+{
+ Roo.apply(this, cfg);
+ var qa = cfg.node.querySelectorAll;
+ this.removeAttributes('data-block');
+ this.removeAttributes('contenteditable');
+ this.removeAttributes('id');
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * ?? should it be called with option to hide all editing features?
- */
- /**
- * create a DomHelper friendly object - for use with
- * Roo.DomHelper.markup / overwrite / etc..
- * ?? should it be called with option to hide all editing features?
- */
- toObject : function()
+}
+
+Roo.apply(Roo.htmleditor.FilterBlock.prototype,
+{
+ node: true, // all tags
+
+
+ removeAttributes : function(attr)
{
- var ret = {
- tag : 'td',
- contenteditable : 'true', // this stops cell selection from picking the table.
- 'data-block' : 'Td',
- valign : this.valign,
- style : {
- 'text-align' : this.textAlign,
- border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
- 'border-collapse' : 'collapse',
- padding : '6px', // 8 for desktop / 4 for mobile
- 'vertical-align': this.valign
- },
- html : this.html
- };
- if (this.width != '') {
- ret.width = this.width;
- ret.style.width = this.width;
+ var ar = this.node.querySelectorAll('*[' + attr + ']');
+ for (var i =0;i<ar.length;i++) {
+ ar[i].removeAttribute(attr);
}
+ }
- if (this.colspan > 1) {
- ret.colspan = this.colspan ;
- }
- if (this.rowspan > 1) {
- ret.rowspan = this.rowspan ;
- }
-
-
- return ret;
-
- },
- readElement : function(node)
- {
- node = node ? node : this.node ;
- this.width = node.style.width;
- this.colspan = Math.max(1,1*node.getAttribute('colspan'));
- this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
- this.html = node.innerHTML;
- if (node.style.textAlign != '') {
- this.textAlign = node.style.textAlign;
- }
-
-
- },
-
- // the default cell object... at present...
- emptyCell : function() {
- return {
- colspan : 1,
- rowspan : 1,
- textAlign : 'left',
- html : " " // is this going to be editable now?
- };
-
- },
+});
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidySerializer
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ * @constructor
+ * @method Serializer
+ * @param {Object} settings Name/value settings object.
+ */
+
+
+Roo.htmleditor.TidySerializer = function(settings)
+{
+ Roo.apply(this, settings);
- removeNode : function()
- {
- return this.node.closest('table');
-
- },
+ this.writer = new Roo.htmleditor.TidyWriter(settings);
- cellData : false,
- colWidths : false,
+
+};
+Roo.htmleditor.TidySerializer.prototype = {
- toTableArray : function()
- {
- var ret = [];
- var tab = this.node.closest('tr').closest('table');
- Array.from(tab.rows).forEach(function(r, ri){
- ret[ri] = [];
- });
- var rn = 0;
- this.colWidths = [];
- var all_auto = true;
- Array.from(tab.rows).forEach(function(r, ri){
-
- var cn = 0;
- Array.from(r.cells).forEach(function(ce, ci){
- var c = {
- cell : ce,
- row : rn,
- col: cn,
- colspan : ce.colSpan,
- rowspan : ce.rowSpan
- };
- if (ce.isEqualNode(this.node)) {
- this.cellData = c;
- }
- // if we have been filled up by a row?
- if (typeof(ret[rn][cn]) != 'undefined') {
- while(typeof(ret[rn][cn]) != 'undefined') {
- cn++;
- }
- c.col = cn;
- }
-
- if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
- this.colWidths[cn] = ce.style.width;
- if (this.colWidths[cn] != '') {
- all_auto = false;
- }
- }
-
+ /**
+ * @param {boolean} inner do the inner of the node.
+ */
+ inner : false,
+
+ writer : false,
+
+ /**
+ * Serializes the specified node into a string.
+ *
+ * @example
+ * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
+ * @method serialize
+ * @param {DomElement} node Node instance to serialize.
+ * @return {String} String with HTML based on DOM tree.
+ */
+ serialize : function(node) {
+
+ // = settings.validate;
+ var writer = this.writer;
+ var self = this;
+ this.handlers = {
+ // #text
+ 3: function(node) {
- if (c.colspan < 2 && c.rowspan < 2 ) {
- ret[rn][cn] = c;
- cn++;
+ writer.text(node.nodeValue, node);
+ },
+ // #comment
+ 8: function(node) {
+ writer.comment(node.nodeValue);
+ },
+ // Processing instruction
+ 7: function(node) {
+ writer.pi(node.name, node.nodeValue);
+ },
+ // Doctype
+ 10: function(node) {
+ writer.doctype(node.nodeValue);
+ },
+ // CDATA
+ 4: function(node) {
+ writer.cdata(node.nodeValue);
+ },
+ // Document fragment
+ 11: function(node) {
+ node = node.firstChild;
+ if (!node) {
return;
}
- for(var j = 0; j < c.rowspan; j++) {
- if (typeof(ret[rn+j]) == 'undefined') {
- continue; // we have a problem..
- }
- ret[rn+j][cn] = c;
- for(var i = 0; i < c.colspan; i++) {
- ret[rn+j][cn+i] = c;
- }
+ while(node) {
+ self.walk(node);
+ node = node.nextSibling
}
-
- cn += c.colspan;
- }, this);
- rn++;
- }, this);
-
- // initalize widths.?
- // either all widths or no widths..
- if (all_auto) {
- this.colWidths[0] = false; // no widths flag.
- }
-
-
- return ret;
-
+ }
+ };
+ writer.reset();
+ 1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
+ return writer.getContent();
},
-
-
-
-
- mergeRight: function()
+
+ walk: function(node)
{
-
- // get the contents of the next cell along..
- var tr = this.node.closest('tr');
- var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
- if (i >= tr.childNodes.length - 1) {
- return; // no cells on right to merge with.
+ var attrName, attrValue, sortedAttrs, i, l, elementRule,
+ handler = this.handlers[node.nodeType];
+
+ if (handler) {
+ handler(node);
+ return;
}
- var table = this.toTableArray();
+
+ var name = node.nodeName;
+ var isEmpty = node.childNodes.length < 1;
+
+ var writer = this.writer;
+ var attrs = node.attributes;
+ // Sort attributes
- if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
- return; // nothing right?
+ writer.start(node.nodeName, attrs, isEmpty, node);
+ if (isEmpty) {
+ return;
}
- var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
- // right cell - must be same rowspan and on the same row.
- if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
- return; // right hand side is not same rowspan.
+ node = node.firstChild;
+ if (!node) {
+ writer.end(name);
+ return;
}
+ while (node) {
+ this.walk(node);
+ node = node.nextSibling;
+ }
+ writer.end(name);
-
-
- this.node.innerHTML += ' ' + rc.cell.innerHTML;
- tr.removeChild(rc.cell);
- this.colspan += rc.colspan;
- this.node.setAttribute('colspan', this.colspan);
+
+ }
+ // Serialize element and treat all non elements as fragments
+
+};
- var table = this.toTableArray();
- this.normalizeWidths(table);
- this.updateWidths(table);
- },
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyWriter
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Known issues?
+ * - not tested much with 'PRE' formated elements.
+ *
+ *
+ *
+ */
+
+Roo.htmleditor.TidyWriter = function(settings)
+{
+ // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
+ Roo.apply(this, settings);
+ this.html = [];
+ this.state = [];
+
+ this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
+
+}
+Roo.htmleditor.TidyWriter.prototype = {
+
+
+ state : false,
- mergeBelow : function()
+ indent : ' ',
+
+ // part of state...
+ indentstr : '',
+ in_pre: false,
+ in_inline : false,
+ last_inline : false,
+ encode : false,
+
+
+ /**
+ * Writes the a start element such as <p id="a">.
+ *
+ * @method start
+ * @param {String} name Name of the element.
+ * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
+ * @param {Boolean} empty Optional empty state if the tag should end like <br />.
+ */
+ start: function(name, attrs, empty, node)
{
- var table = this.toTableArray();
- if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
- return; // no row below
+ var i, l, attr, value;
+
+ // there are some situations where adding line break && indentation will not work. will not work.
+ // <span / b / i ... formating?
+
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+ var in_pre = this.in_pre || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
+
+ var is_short = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
+
+ var add_lb = name == 'BR' ? false : in_inline;
+
+ if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
+ i_inline = false;
}
- if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
- return; // nothing right?
+
+ var indentstr = this.indentstr;
+
+ // e_inline = elements that can be inline, but still allow \n before and after?
+ // only 'BR' ??? any others?
+
+ // ADD LINE BEFORE tage
+ if (!this.in_pre) {
+ if (in_inline) {
+ //code
+ if (name == 'BR') {
+ this.addLine();
+ } else if (this.lastElementEndsWS()) {
+ this.addLine();
+ } else{
+ // otherwise - no new line. (and dont indent.)
+ indentstr = '';
+ }
+
+ } else {
+ this.addLine();
+ }
+ } else {
+ indentstr = '';
}
- var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
- if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
- return; // right hand side is not same rowspan.
+ this.html.push(indentstr + '<', name.toLowerCase());
+
+ if (attrs) {
+ for (i = 0, l = attrs.length; i < l; i++) {
+ attr = attrs[i];
+ this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
+ }
}
- this.node.innerHTML = this.node.innerHTML + rc.cell.innerHTML ;
- rc.cell.parentNode.removeChild(rc.cell);
- this.rowspan += rc.rowspan;
- this.node.setAttribute('rowspan', this.rowspan);
- },
-
- split: function()
- {
- if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+
+ if (empty) {
+ if (is_short) {
+ this.html[this.html.length] = '/>';
+ } else {
+ this.html[this.html.length] = '></' + name.toLowerCase() + '>';
+ }
+ var e_inline = name == 'BR' ? false : this.in_inline;
+
+ if (!e_inline && !this.in_pre) {
+ this.addLine();
+ }
return;
+
}
- var table = this.toTableArray();
- var cd = this.cellData;
- this.rowspan = 1;
- this.colspan = 1;
+ // not empty..
+ this.html[this.html.length] = '>';
- for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
-
-
- for(var c = cd.col; c < cd.col + cd.colspan; c++) {
- if (r == cd.row && c == cd.col) {
- this.node.removeAttribute('rowspan');
- this.node.removeAttribute('colspan');
+ // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+ /*
+ if (!in_inline && !in_pre) {
+ var cn = node.firstChild;
+ while(cn) {
+ if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
+ in_inline = true
+ break;
}
-
- var ntd = this.node.cloneNode(); // which col/row should be 0..
- ntd.removeAttribute('id');
- ntd.style.width = this.colWidths[c];
- ntd.innerHTML = '';
- table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 };
+ cn = cn.nextSibling;
}
-
+
}
- this.redrawAllCells(table);
+ */
+
+
+ this.pushState({
+ indentstr : in_pre ? '' : (this.indentstr + this.indent),
+ in_pre : in_pre,
+ in_inline : in_inline
+ });
+ // add a line after if we are not in a
+
+ if (!in_inline && !in_pre) {
+ this.addLine();
+ }
+
+
+
},
-
-
- redrawAllCells: function(table)
+ lastElementEndsWS : function()
{
+ var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
+ if (value === false) {
+ return true;
+ }
+ return value.match(/\s+$/);
-
- var tab = this.node.closest('tr').closest('table');
- var ctr = tab.rows[0].parentNode;
- Array.from(tab.rows).forEach(function(r, ri){
-
- Array.from(r.cells).forEach(function(ce, ci){
- ce.parentNode.removeChild(ce);
- });
- r.parentNode.removeChild(r);
- });
- for(var r = 0 ; r < table.length; r++) {
- var re = tab.rows[r];
-
- var re = tab.ownerDocument.createElement('tr');
- ctr.appendChild(re);
- for(var c = 0 ; c < table[r].length; c++) {
- if (table[r][c].cell === false) {
- continue;
- }
-
- re.appendChild(table[r][c].cell);
-
- table[r][c].cell = false;
- }
+ },
+
+ /**
+ * Writes the a end element such as </p>.
+ *
+ * @method end
+ * @param {String} name Name of the element.
+ */
+ end: function(name) {
+ var value;
+ this.popState();
+ var indentstr = '';
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+
+ if (!this.in_pre && !in_inline) {
+ this.addLine();
+ indentstr = this.indentstr;
}
+ this.html.push(indentstr + '</', name.toLowerCase(), '>');
+ this.last_inline = in_inline;
+ // pop the indent state..
},
- updateWidths : function(table)
+ /**
+ * Writes a text node.
+ *
+ * In pre - we should not mess with the contents.
+ *
+ *
+ * @method text
+ * @param {String} text String to write out.
+ * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
+ */
+ text: function(in_text, node)
{
- for(var r = 0 ; r < table.length; r++) {
-
- for(var c = 0 ; c < table[r].length; c++) {
- if (table[r][c].cell === false) {
- continue;
- }
+ // if not in whitespace critical
+ if (in_text.length < 1) {
+ return;
+ }
+ var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
+
+ if (this.in_pre) {
+ this.html[this.html.length] = text;
+ return;
+ }
+
+ if (this.in_inline) {
+ text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
+ if (text != ' ') {
+ text = text.replace(/\s+/,' '); // all white space to single white space
- if (this.colWidths[0] != false && table[r][c].colspan < 2) {
- var el = Roo.htmleditor.Block.factory(table[r][c].cell);
- el.width = Math.floor(this.colWidths[c]) +'%';
- el.updateElement(el.node);
+
+ // if next tag is '<BR>', then we can trim right..
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ node.nextSibling.nodeName == 'BR' )
+ {
+ text = text.replace(/\s+$/g,'');
}
- if (this.colWidths[0] != false && table[r][c].colspan > 1) {
- var el = Roo.htmleditor.Block.factory(table[r][c].cell);
- var width = 0;
- for(var i = 0; i < table[r][c].colspan; i ++) {
- width += Math.floor(this.colWidths[c + i]);
- }
- el.width = width +'%';
- el.updateElement(el.node);
+ // if previous tag was a BR, we can also trim..
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ node.previousSibling.nodeName == 'BR' )
+ {
+ text = this.indentstr + text.replace(/^\s+/g,'');
}
- table[r][c].cell = false; // done
+ if (text.match(/\n/)) {
+ text = text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\n\s+$/,'');
+ }
+ // repace long lines
+
}
+
+ this.html[this.html.length] = text;
+ return;
}
- },
- normalizeWidths : function(table)
- {
- if (this.colWidths[0] === false) {
- var nw = 100.0 / this.colWidths.length;
- this.colWidths.forEach(function(w,i) {
- this.colWidths[i] = nw;
- },this);
- return;
- }
-
- var t = 0, missing = [];
+ // see if previous element was a inline element.
+ var indentstr = this.indentstr;
+
+ text = text.replace(/\s+/g," "); // all whitespace into single white space.
- this.colWidths.forEach(function(w,i) {
- //if you mix % and
- this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
- var add = this.colWidths[i];
- if (add > 0) {
- t+=add;
- return;
- }
- missing.push(i);
+ // should trim left?
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
+ {
+ indentstr = '';
+ } else {
+ this.addLine();
+ text = text.replace(/^\s+/,''); // trim left
+
+ }
+ // should trim right?
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
+ {
+ // noop
- },this);
- var nc = this.colWidths.length;
- if (missing.length) {
- var mult = (nc - missing.length) / (1.0 * nc);
- var t = mult * t;
- var ew = (100 -t) / (1.0 * missing.length);
- this.colWidths.forEach(function(w,i) {
- if (w > 0) {
- this.colWidths[i] = w * mult;
- return;
- }
-
- this.colWidths[i] = ew;
- }, this);
- // have to make up numbers..
-
+ } else {
+ text = text.replace(/\s+$/,''); // trim right
}
- // now we should have all the widths..
+
+
-
+
+
+ if (text.length < 1) {
+ return;
+ }
+ if (!text.match(/\n/)) {
+ this.html.push(indentstr + text);
+ return;
+ }
+
+ text = this.indentstr + text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\s+$/,'');
+
+ this.html.push(text);
+
+ // split and indent..
+
+
+ },
+ /**
+ * Writes a cdata node such as <![CDATA[data]]>.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the cdata.
+ */
+ cdata: function(text) {
+ this.html.push('<![CDATA[', text, ']]>');
+ },
+ /**
+ * Writes a comment node such as <!-- Comment -->.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the comment.
+ */
+ comment: function(text) {
+ this.html.push('<!--', text, '-->');
+ },
+ /**
+ * Writes a PI node such as <?xml attr="value" ?>.
+ *
+ * @method pi
+ * @param {String} name Name of the pi.
+ * @param {String} text String to write out inside the pi.
+ */
+ pi: function(name, text) {
+ text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
+ this.indent != '' && this.html.push('\n');
+ },
+ /**
+ * Writes a doctype node such as <!DOCTYPE data>.
+ *
+ * @method doctype
+ * @param {String} text String to write out inside the doctype.
+ */
+ doctype: function(text) {
+ this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
+ },
+ /**
+ * Resets the internal buffer if one wants to reuse the writer.
+ *
+ * @method reset
+ */
+ reset: function() {
+ this.html.length = 0;
+ this.state = [];
+ this.pushState({
+ indentstr : '',
+ in_pre : false,
+ in_inline : false
+ })
+ },
+ /**
+ * Returns the contents that got serialized.
+ *
+ * @method getContent
+ * @return {String} HTML contents that got written down.
+ */
+ getContent: function() {
+ return this.html.join('').replace(/\n$/, '');
},
- shrinkColumn : function()
+ pushState : function(cfg)
{
- var table = this.toTableArray();
- this.normalizeWidths(table);
- var col = this.cellData.col;
- var nw = this.colWidths[col] * 0.8;
- if (nw < 5) {
- return;
- }
- var otherAdd = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
- this.colWidths.forEach(function(w,i) {
- if (i == col) {
- this.colWidths[i] = nw;
- return;
- }
- this.colWidths[i] += otherAdd
- }, this);
- this.updateWidths(table);
-
+ this.state.push(cfg);
+ Roo.apply(this, cfg);
},
- growColumn : function()
+
+ popState : function()
{
- var table = this.toTableArray();
- this.normalizeWidths(table);
- var col = this.cellData.col;
- var nw = this.colWidths[col] * 1.2;
- if (nw > 90) {
- return;
+ if (this.state.length < 1) {
+ return; // nothing to push
}
- var otherSub = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
- this.colWidths.forEach(function(w,i) {
- if (i == col) {
- this.colWidths[i] = nw;
- return;
- }
- this.colWidths[i] -= otherSub
- }, this);
- this.updateWidths(table);
-
+ var cfg = {
+ in_pre: false,
+ indentstr : ''
+ };
+ this.state.pop();
+ if (this.state.length > 0) {
+ cfg = this.state[this.state.length-1];
+ }
+ Roo.apply(this, cfg);
},
- deleteRow : function()
+
+ addLine: function()
{
- // delete this rows 'tr'
- // if any of the cells in this row have a rowspan > 1 && row!= this row..
- // then reduce the rowspan.
- var table = this.toTableArray();
- // this.cellData.row;
- for (var i =0;i< table[this.cellData.row].length ; i++) {
- var c = table[this.cellData.row][i];
- if (c.row != this.cellData.row) {
-
- c.rowspan--;
- c.cell.setAttribute('rowspan', c.rowspan);
- continue;
- }
- if (c.rowspan > 1) {
- c.rowspan--;
- c.cell.setAttribute('rowspan', c.rowspan);
- }
+ if (this.html.length < 1) {
+ return;
}
- table.splice(this.cellData.row,1);
- this.redrawAllCells(table);
- },
- deleteColumn : function()
- {
- var table = this.toTableArray();
- for (var i =0;i< table.length ; i++) {
- var c = table[i][this.cellData.col];
- if (c.col != this.cellData.col) {
- table[i][this.cellData.col].colspan--;
- } else if (c.colspan > 1) {
- c.colspan--;
- c.cell.setAttribute('colspan', c.colspan);
- }
- table[i].splice(this.cellData.col,1);
+ var value = this.html[this.html.length - 1];
+ if (value.length > 0 && '\n' !== value) {
+ this.html.push('\n');
}
-
- this.redrawAllCells(table);
}
-
-
-})
+//'pre script noscript style textarea video audio iframe object code'
+// shortended... 'area base basefont br col frame hr img input isindex link meta param embed source wbr track');
+// inline
+};
-//<script type="text/javascript">
+Roo.htmleditor.TidyWriter.inline_elements = [
+ 'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
+ 'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
+];
+Roo.htmleditor.TidyWriter.shortend_elements = [
+ 'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
+ 'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
+];
-/*
- * Based Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * LGPL
- *
- */
-
-/**
- * @class Roo.HtmlEditorCore
- * @extends Roo.Component
- * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
+Roo.htmleditor.TidyWriter.whitespace_elements = [
+ 'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
+];/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyEntities
+ * @static
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
*
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ * Not 100% sure this is actually used or needed.
*/
-Roo.HtmlEditorCore = function(config){
-
-
- Roo.HtmlEditorCore.superclass.constructor.call(this, config);
-
-
- this.addEvents({
- /**
- * @event initialize
- * Fires when the editor is fully initialized (including the iframe)
- * @param {Roo.HtmlEditorCore} this
- */
- initialize: true,
- /**
- * @event activate
- * Fires when the editor is first receives the focus. Any insertion must wait
- * until after this event.
- * @param {Roo.HtmlEditorCore} this
- */
- activate: true,
- /**
- * @event beforesync
- * Fires before the textarea is updated with content from the editor iframe. Return false
- * to cancel the sync.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- beforesync: true,
- /**
- * @event beforepush
- * Fires before the iframe editor is updated with content from the textarea. Return false
- * to cancel the push.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- beforepush: true,
- /**
- * @event sync
- * Fires when the textarea is updated with content from the editor iframe.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- sync: true,
- /**
- * @event push
- * Fires when the iframe editor is updated with content from the textarea.
- * @param {Roo.HtmlEditorCore} this
- * @param {String} html
- */
- push: true,
-
- /**
- * @event editorevent
- * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
- * @param {Roo.HtmlEditorCore} this
- */
- editorevent: true
-
-
- });
-
- // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
-
- // defaults : white / black...
- this.applyBlacklists();
-
-
+Roo.htmleditor.TidyEntities = {
-};
-
-
-Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
+ /**
+ * initialize data..
+ */
+ init : function (){
+
+ this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
+
+ },
- /**
- * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
- */
-
- owner : false,
+ buildEntitiesLookup: function(items, radix) {
+ var i, chr, entity, lookup = {};
+ if (!items) {
+ return {};
+ }
+ items = typeof(items) == 'string' ? items.split(',') : items;
+ radix = radix || 10;
+ // Build entities lookup table
+ for (i = 0; i < items.length; i += 2) {
+ chr = String.fromCharCode(parseInt(items[i], radix));
+ // Only add non base entities
+ if (!this.baseEntities[chr]) {
+ entity = '&' + items[i + 1] + ';';
+ lookup[chr] = entity;
+ lookup[entity] = chr;
+ }
+ }
+ return lookup;
+
+ },
- /**
- * @cfg {String} css styling for resizing. (used on bootstrap only)
- */
- resize : false,
- /**
- * @cfg {Number} height (in pixels)
- */
- height: 300,
- /**
- * @cfg {Number} width (in pixels)
- */
- width: 500,
- /**
- * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
- * if you are doing an email editor, this probably needs disabling, it's designed
- */
- autoClean: true,
+ asciiMap : {
+ 128: '€',
+ 130: '‚',
+ 131: 'ƒ',
+ 132: '„',
+ 133: '…',
+ 134: '†',
+ 135: '‡',
+ 136: 'ˆ',
+ 137: '‰',
+ 138: 'Š',
+ 139: '‹',
+ 140: 'Œ',
+ 142: 'Ž',
+ 145: '‘',
+ 146: '’',
+ 147: '“',
+ 148: '”',
+ 149: '•',
+ 150: '–',
+ 151: '—',
+ 152: '˜',
+ 153: '™',
+ 154: 'š',
+ 155: '›',
+ 156: 'œ',
+ 158: 'ž',
+ 159: 'Ÿ'
+ },
+ // Raw entities
+ baseEntities : {
+ '"': '"',
+ // Needs to be escaped since the YUI compressor would otherwise break the code
+ '\'': ''',
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '`': '`'
+ },
+ // Reverse lookup table for raw entities
+ reverseEntities : {
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '"': '"',
+ ''': '\''
+ },
+ attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ rawCharsRegExp : /[<>&\"\']/g,
+ entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
+ namedEntities : false,
+ namedEntitiesData : [
+ '50',
+ 'nbsp',
+ '51',
+ 'iexcl',
+ '52',
+ 'cent',
+ '53',
+ 'pound',
+ '54',
+ 'curren',
+ '55',
+ 'yen',
+ '56',
+ 'brvbar',
+ '57',
+ 'sect',
+ '58',
+ 'uml',
+ '59',
+ 'copy',
+ '5a',
+ 'ordf',
+ '5b',
+ 'laquo',
+ '5c',
+ 'not',
+ '5d',
+ 'shy',
+ '5e',
+ 'reg',
+ '5f',
+ 'macr',
+ '5g',
+ 'deg',
+ '5h',
+ 'plusmn',
+ '5i',
+ 'sup2',
+ '5j',
+ 'sup3',
+ '5k',
+ 'acute',
+ '5l',
+ 'micro',
+ '5m',
+ 'para',
+ '5n',
+ 'middot',
+ '5o',
+ 'cedil',
+ '5p',
+ 'sup1',
+ '5q',
+ 'ordm',
+ '5r',
+ 'raquo',
+ '5s',
+ 'frac14',
+ '5t',
+ 'frac12',
+ '5u',
+ 'frac34',
+ '5v',
+ 'iquest',
+ '60',
+ 'Agrave',
+ '61',
+ 'Aacute',
+ '62',
+ 'Acirc',
+ '63',
+ 'Atilde',
+ '64',
+ 'Auml',
+ '65',
+ 'Aring',
+ '66',
+ 'AElig',
+ '67',
+ 'Ccedil',
+ '68',
+ 'Egrave',
+ '69',
+ 'Eacute',
+ '6a',
+ 'Ecirc',
+ '6b',
+ 'Euml',
+ '6c',
+ 'Igrave',
+ '6d',
+ 'Iacute',
+ '6e',
+ 'Icirc',
+ '6f',
+ 'Iuml',
+ '6g',
+ 'ETH',
+ '6h',
+ 'Ntilde',
+ '6i',
+ 'Ograve',
+ '6j',
+ 'Oacute',
+ '6k',
+ 'Ocirc',
+ '6l',
+ 'Otilde',
+ '6m',
+ 'Ouml',
+ '6n',
+ 'times',
+ '6o',
+ 'Oslash',
+ '6p',
+ 'Ugrave',
+ '6q',
+ 'Uacute',
+ '6r',
+ 'Ucirc',
+ '6s',
+ 'Uuml',
+ '6t',
+ 'Yacute',
+ '6u',
+ 'THORN',
+ '6v',
+ 'szlig',
+ '70',
+ 'agrave',
+ '71',
+ 'aacute',
+ '72',
+ 'acirc',
+ '73',
+ 'atilde',
+ '74',
+ 'auml',
+ '75',
+ 'aring',
+ '76',
+ 'aelig',
+ '77',
+ 'ccedil',
+ '78',
+ 'egrave',
+ '79',
+ 'eacute',
+ '7a',
+ 'ecirc',
+ '7b',
+ 'euml',
+ '7c',
+ 'igrave',
+ '7d',
+ 'iacute',
+ '7e',
+ 'icirc',
+ '7f',
+ 'iuml',
+ '7g',
+ 'eth',
+ '7h',
+ 'ntilde',
+ '7i',
+ 'ograve',
+ '7j',
+ 'oacute',
+ '7k',
+ 'ocirc',
+ '7l',
+ 'otilde',
+ '7m',
+ 'ouml',
+ '7n',
+ 'divide',
+ '7o',
+ 'oslash',
+ '7p',
+ 'ugrave',
+ '7q',
+ 'uacute',
+ '7r',
+ 'ucirc',
+ '7s',
+ 'uuml',
+ '7t',
+ 'yacute',
+ '7u',
+ 'thorn',
+ '7v',
+ 'yuml',
+ 'ci',
+ 'fnof',
+ 'sh',
+ 'Alpha',
+ 'si',
+ 'Beta',
+ 'sj',
+ 'Gamma',
+ 'sk',
+ 'Delta',
+ 'sl',
+ 'Epsilon',
+ 'sm',
+ 'Zeta',
+ 'sn',
+ 'Eta',
+ 'so',
+ 'Theta',
+ 'sp',
+ 'Iota',
+ 'sq',
+ 'Kappa',
+ 'sr',
+ 'Lambda',
+ 'ss',
+ 'Mu',
+ 'st',
+ 'Nu',
+ 'su',
+ 'Xi',
+ 'sv',
+ 'Omicron',
+ 't0',
+ 'Pi',
+ 't1',
+ 'Rho',
+ 't3',
+ 'Sigma',
+ 't4',
+ 'Tau',
+ 't5',
+ 'Upsilon',
+ 't6',
+ 'Phi',
+ 't7',
+ 'Chi',
+ 't8',
+ 'Psi',
+ 't9',
+ 'Omega',
+ 'th',
+ 'alpha',
+ 'ti',
+ 'beta',
+ 'tj',
+ 'gamma',
+ 'tk',
+ 'delta',
+ 'tl',
+ 'epsilon',
+ 'tm',
+ 'zeta',
+ 'tn',
+ 'eta',
+ 'to',
+ 'theta',
+ 'tp',
+ 'iota',
+ 'tq',
+ 'kappa',
+ 'tr',
+ 'lambda',
+ 'ts',
+ 'mu',
+ 'tt',
+ 'nu',
+ 'tu',
+ 'xi',
+ 'tv',
+ 'omicron',
+ 'u0',
+ 'pi',
+ 'u1',
+ 'rho',
+ 'u2',
+ 'sigmaf',
+ 'u3',
+ 'sigma',
+ 'u4',
+ 'tau',
+ 'u5',
+ 'upsilon',
+ 'u6',
+ 'phi',
+ 'u7',
+ 'chi',
+ 'u8',
+ 'psi',
+ 'u9',
+ 'omega',
+ 'uh',
+ 'thetasym',
+ 'ui',
+ 'upsih',
+ 'um',
+ 'piv',
+ '812',
+ 'bull',
+ '816',
+ 'hellip',
+ '81i',
+ 'prime',
+ '81j',
+ 'Prime',
+ '81u',
+ 'oline',
+ '824',
+ 'frasl',
+ '88o',
+ 'weierp',
+ '88h',
+ 'image',
+ '88s',
+ 'real',
+ '892',
+ 'trade',
+ '89l',
+ 'alefsym',
+ '8cg',
+ 'larr',
+ '8ch',
+ 'uarr',
+ '8ci',
+ 'rarr',
+ '8cj',
+ 'darr',
+ '8ck',
+ 'harr',
+ '8dl',
+ 'crarr',
+ '8eg',
+ 'lArr',
+ '8eh',
+ 'uArr',
+ '8ei',
+ 'rArr',
+ '8ej',
+ 'dArr',
+ '8ek',
+ 'hArr',
+ '8g0',
+ 'forall',
+ '8g2',
+ 'part',
+ '8g3',
+ 'exist',
+ '8g5',
+ 'empty',
+ '8g7',
+ 'nabla',
+ '8g8',
+ 'isin',
+ '8g9',
+ 'notin',
+ '8gb',
+ 'ni',
+ '8gf',
+ 'prod',
+ '8gh',
+ 'sum',
+ '8gi',
+ 'minus',
+ '8gn',
+ 'lowast',
+ '8gq',
+ 'radic',
+ '8gt',
+ 'prop',
+ '8gu',
+ 'infin',
+ '8h0',
+ 'ang',
+ '8h7',
+ 'and',
+ '8h8',
+ 'or',
+ '8h9',
+ 'cap',
+ '8ha',
+ 'cup',
+ '8hb',
+ 'int',
+ '8hk',
+ 'there4',
+ '8hs',
+ 'sim',
+ '8i5',
+ 'cong',
+ '8i8',
+ 'asymp',
+ '8j0',
+ 'ne',
+ '8j1',
+ 'equiv',
+ '8j4',
+ 'le',
+ '8j5',
+ 'ge',
+ '8k2',
+ 'sub',
+ '8k3',
+ 'sup',
+ '8k4',
+ 'nsub',
+ '8k6',
+ 'sube',
+ '8k7',
+ 'supe',
+ '8kl',
+ 'oplus',
+ '8kn',
+ 'otimes',
+ '8l5',
+ 'perp',
+ '8m5',
+ 'sdot',
+ '8o8',
+ 'lceil',
+ '8o9',
+ 'rceil',
+ '8oa',
+ 'lfloor',
+ '8ob',
+ 'rfloor',
+ '8p9',
+ 'lang',
+ '8pa',
+ 'rang',
+ '9ea',
+ 'loz',
+ '9j0',
+ 'spades',
+ '9j3',
+ 'clubs',
+ '9j5',
+ 'hearts',
+ '9j6',
+ 'diams',
+ 'ai',
+ 'OElig',
+ 'aj',
+ 'oelig',
+ 'b0',
+ 'Scaron',
+ 'b1',
+ 'scaron',
+ 'bo',
+ 'Yuml',
+ 'm6',
+ 'circ',
+ 'ms',
+ 'tilde',
+ '802',
+ 'ensp',
+ '803',
+ 'emsp',
+ '809',
+ 'thinsp',
+ '80c',
+ 'zwnj',
+ '80d',
+ 'zwj',
+ '80e',
+ 'lrm',
+ '80f',
+ 'rlm',
+ '80j',
+ 'ndash',
+ '80k',
+ 'mdash',
+ '80o',
+ 'lsquo',
+ '80p',
+ 'rsquo',
+ '80q',
+ 'sbquo',
+ '80s',
+ 'ldquo',
+ '80t',
+ 'rdquo',
+ '80u',
+ 'bdquo',
+ '810',
+ 'dagger',
+ '811',
+ 'Dagger',
+ '81g',
+ 'permil',
+ '81p',
+ 'lsaquo',
+ '81q',
+ 'rsaquo',
+ '85c',
+ 'euro'
+ ],
+
+
/**
- * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+ * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
+ *
+ * @method encodeRaw
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
*/
- enableBlocks : true,
+ encodeRaw: function(text, attr)
+ {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
+ },
/**
- * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
- *
+ * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
+ * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
+ * and is exposed as the DOMUtils.encode function.
+ *
+ * @method encodeAllRaw
+ * @param {String} text Text to encode.
+ * @return {String} Entity encoded text.
*/
- stylesheets: false,
- /**
- * @cfg {String} language default en - language of text (usefull for rtl languages)
- *
+ encodeAllRaw: function(text) {
+ var t = this;
+ return ('' + text).replace(this.rawCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
+ },
+ /**
+ * Encodes the specified string using numeric entities. The core entities will be
+ * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
+ *
+ * @method encodeNumeric
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
*/
- language: 'en',
-
+ encodeNumeric: function(text, attr) {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ // Multi byte sequence convert it to a single entity
+ if (chr.length > 1) {
+ return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
+ }
+ return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
+ });
+ },
/**
- * @cfg {boolean} allowComments - default false - allow comments in HTML source
- * - by default they are stripped - if you are editing email you may need this.
+ * Encodes the specified string using named entities. The core entities will be encoded
+ * as named ones but all non lower ascii characters will be encoded into named entities.
+ *
+ * @method encodeNamed
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @param {Object} entities Optional parameter with entities to use.
+ * @return {String} Entity encoded text.
*/
- allowComments: false,
- // id of frame..
- frameId: false,
-
- // private properties
- validationEvent : false,
- deferHeight: true,
- initialized : false,
- activated : false,
- sourceEditMode : false,
- onFocus : Roo.emptyFn,
- iframePad:3,
- hideMode:'offsets',
-
- clearUp: true,
-
- // blacklist + whitelisted elements..
- black: false,
- white: false,
-
- bodyCls : '',
-
-
- undoManager : false,
+ encodeNamed: function(text, attr, entities) {
+ var t = this;
+ entities = entities || this.namedEntities;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || chr;
+ });
+ },
/**
- * Protected method that will not generally be called directly. It
- * is called when the editor initializes the iframe with HTML contents. Override this method if you
- * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+ * Returns an encode function based on the name(s) and it's optional entities.
+ *
+ * @method getEncodeFunc
+ * @param {String} name Comma separated list of encoders for example named,numeric.
+ * @param {String} entities Optional parameter with entities to use instead of the built in set.
+ * @return {function} Encode function to be used.
*/
- getDocMarkup : function(){
- // body styles..
- var st = '';
-
- // inherit styels from page...??
- if (this.stylesheets === false) {
-
- Roo.get(document.head).select('style').each(function(node) {
- st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
- });
-
- Roo.get(document.head).select('link').each(function(node) {
- st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ getEncodeFunc: function(name, entities) {
+ entities = this.buildEntitiesLookup(entities) || this.namedEntities;
+ var t = this;
+ function encodeNamedAndNumeric(text, attr) {
+ return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
});
-
- } else if (!this.stylesheets.length) {
- // simple..
- st = '<style type="text/css">' +
- 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
- '</style>';
- } else {
- for (var i in this.stylesheets) {
- if (typeof(this.stylesheets[i]) != 'string') {
- continue;
- }
- st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
- }
-
- }
-
- st += '<style type="text/css">' +
- 'IMG { cursor: pointer } ' +
- '</style>';
-
- st += '<meta name="google" content="notranslate">';
-
- var cls = 'notranslate roo-htmleditor-body';
-
- if(this.bodyCls.length){
- cls += ' ' + this.bodyCls;
- }
-
- return '<html class="notranslate" translate="no"><head>' + st +
- //<style type="text/css">' +
- //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
- //'</style>' +
- ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
- },
-
- // private
- onRender : function(ct, position)
- {
- var _t = this;
- //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
- this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
-
-
- this.el.dom.style.border = '0 none';
- this.el.dom.setAttribute('tabIndex', -1);
- this.el.addClass('x-hidden hide');
-
-
-
- if(Roo.isIE){ // fix IE 1px bogus margin
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
- }
-
-
- this.frameId = Roo.id();
-
- var ifcfg = {
- tag: 'iframe',
- cls: 'form-control', // bootstrap..
- id: this.frameId,
- name: this.frameId,
- frameBorder : 'no',
- 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
- };
- if (this.resize) {
- ifcfg.style = { resize : this.resize };
}
-
- var iframe = this.owner.wrap.createChild(ifcfg, this.el);
-
-
- this.iframe = iframe.dom;
-
- this.assignDocWin();
-
- this.doc.designMode = 'on';
-
- this.doc.open();
- this.doc.write(this.getDocMarkup());
- this.doc.close();
-
-
- var task = { // must defer to wait for browser to be ready
- run : function(){
- //console.log("run task?" + this.doc.readyState);
- this.assignDocWin();
- if(this.doc.body || this.doc.readyState == 'complete'){
- try {
- this.doc.designMode="on";
-
- } catch (e) {
- return;
- }
- Roo.TaskMgr.stop(task);
- this.initEditor.defer(10, this);
- }
- },
- interval : 10,
- duration: 10000,
- scope: this
- };
- Roo.TaskMgr.start(task);
- },
-
- // private
- onResize : function(w, h)
- {
- Roo.log('resize: ' +w + ',' + h );
- //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
- if(!this.iframe){
- return;
+ function encodeCustomNamed(text, attr) {
+ return t.encodeNamed(text, attr, entities);
}
- if(typeof w == 'number'){
-
- this.iframe.style.width = w + 'px';
+ // Replace + with , to be compatible with previous TinyMCE versions
+ name = this.makeMap(name.replace(/\+/g, ','));
+ // Named and numeric encoder
+ if (name.named && name.numeric) {
+ return this.encodeNamedAndNumeric;
}
- if(typeof h == 'number'){
-
- this.iframe.style.height = h + 'px';
- if(this.doc){
- (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
+ // Named encoder
+ if (name.named) {
+ // Custom names
+ if (entities) {
+ return encodeCustomNamed;
}
+ return this.encodeNamed;
}
-
- },
-
- /**
- * Toggles the editor between standard and source edit mode.
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
- */
- toggleSourceEdit : function(sourceEditMode){
-
- this.sourceEditMode = sourceEditMode === true;
-
- if(this.sourceEditMode){
-
- Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']); //FIXME - what's the BS styles for these
-
- }else{
- Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
- //this.iframe.className = '';
- this.deferFocus();
+ // Numeric
+ if (name.numeric) {
+ return this.encodeNumeric;
}
- //this.setSize(this.owner.wrap.getSize());
- //this.fireEvent('editmodechange', this, this.sourceEditMode);
+ // Raw encoder
+ return this.encodeRaw;
},
-
-
-
-
/**
- * Protected method that will not generally be called directly. If you need/want
- * custom HTML cleanup, this is the method you should override.
- * @param {String} html The HTML to be cleaned
- * return {String} The cleaned HTML
+ * Decodes the specified string, this will replace entities with raw UTF characters.
+ *
+ * @method decode
+ * @param {String} text Text to entity decode.
+ * @return {String} Entity decoded string.
*/
- cleanHtml : function(html)
+ decode: function(text)
{
- html = String(html);
- if(html.length > 5){
- if(Roo.isSafari){ // strip safari nonsense
- html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+ var t = this;
+ return text.replace(this.entityRegExp, function(all, numeric) {
+ if (numeric) {
+ numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
+ // Support upper UTF
+ if (numeric > 65535) {
+ numeric -= 65536;
+ return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
+ }
+ return t.asciiMap[numeric] || String.fromCharCode(numeric);
}
- }
- if(html == ' '){
- html = '';
- }
- return html;
+ return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+ });
},
+ nativeDecode : function (text) {
+ return text;
+ },
+ makeMap : function (items, delim, map) {
+ var i;
+ items = items || [];
+ delim = delim || ',';
+ if (typeof items == "string") {
+ items = items.split(delim);
+ }
+ map = map || {};
+ i = items.length;
+ while (i--) {
+ map[items[i]] = {};
+ }
+ return map;
+ }
+};
+
+
+
+Roo.htmleditor.TidyEntities.init();
+/**
+ * @class Roo.htmleditor.KeyEnter
+ * Handle Enter press..
+ * @cfg {Roo.HtmlEditorCore} core the editor.
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
- /**
- * HTML Editor -> Textarea
- * Protected method that will not generally be called directly. Syncs the contents
- * of the editor iframe with the textarea.
- */
- syncValue : function()
- {
- //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
- if(this.initialized){
-
- if (this.undoManager) {
- this.undoManager.addEvent();
- }
-
- var bd = (this.doc.body || this.doc.documentElement);
-
-
- var sel = this.win.getSelection();
-
- var div = document.createElement('div');
- div.innerHTML = bd.innerHTML;
- var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
- if (gtx.length > 0) {
- var rm = gtx.item(0).parentNode;
- rm.parentNode.removeChild(rm);
- }
-
-
- if (this.enableBlocks) {
- new Roo.htmleditor.FilterBlock({ node : div });
- }
-
- var html = div.innerHTML;
-
- //?? tidy?
- if (this.autoClean) {
-
- new Roo.htmleditor.FilterAttributes({
- node : div,
- attrib_white : [
- 'href',
- 'src',
- 'name',
- 'align',
- 'colspan',
- 'rowspan',
- 'data-display',
- 'data-caption-display',
- 'data-width',
- 'data-caption',
- 'start' ,
- 'style',
- // youtube embed.
- 'class',
- 'allowfullscreen',
- 'frameborder',
- 'width',
- 'height',
- 'alt'
- ],
- attrib_clean : ['href', 'src' ]
- });
-
- var tidy = new Roo.htmleditor.TidySerializer({
- inner: true
- });
- html = tidy.serialize(div);
-
- }
-
-
- if(Roo.isSafari){
- var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
- var m = bs ? bs.match(/text-align:(.*?);/i) : false;
- if(m && m[1]){
- html = '<div style="'+m[0]+'">' + html + '</div>';
- }
- }
- html = this.cleanHtml(html);
- // fix up the special chars.. normaly like back quotes in word...
- // however we do not want to do this with chinese..
- html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
-
- var cc = match.charCodeAt();
- // Get the character value, handling surrogate pairs
- if (match.length == 2) {
- // It's a surrogate pair, calculate the Unicode code point
- var high = match.charCodeAt(0) - 0xD800;
- var low = match.charCodeAt(1) - 0xDC00;
- cc = (high * 0x400) + low + 0x10000;
- } else if (
- (cc >= 0x4E00 && cc < 0xA000 ) ||
- (cc >= 0x3400 && cc < 0x4E00 ) ||
- (cc >= 0xf900 && cc < 0xfb00 )
- ) {
- return match;
- }
-
- // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
- return "&#" + cc + ";";
-
-
- });
-
-
-
- if(this.owner.fireEvent('beforesync', this, html) !== false){
- this.el.dom.value = html;
- this.owner.fireEvent('sync', this, html);
- }
- }
- },
- /**
- * TEXTAREA -> EDITABLE
- * Protected method that will not generally be called directly. Pushes the value of the textarea
- * into the iframe editor.
- */
- pushValue : function()
- {
- //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
- if(this.initialized){
- var v = this.el.dom.value.trim();
-
-
- if(this.owner.fireEvent('beforepush', this, v) !== false){
- var d = (this.doc.body || this.doc.documentElement);
- d.innerHTML = v;
-
- this.el.dom.value = d.innerHTML;
- this.owner.fireEvent('push', this, v);
- }
- if (this.autoClean) {
- new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
- new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
- }
- if (this.enableBlocks) {
- Roo.htmleditor.Block.initAll(this.doc.body);
- }
-
- this.updateLanguage();
-
- var lc = this.doc.body.lastChild;
- if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
- // add an extra line at the end.
- this.doc.body.appendChild(this.doc.createElement('br'));
- }
-
-
- }
- },
- // private
- deferFocus : function(){
- this.focus.defer(10, this);
- },
+Roo.htmleditor.KeyEnter = function(cfg) {
+ Roo.apply(this, cfg);
+ // this does not actually call walk as it's really just a abstract class
+
+ Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
+}
+
+//Roo.htmleditor.KeyEnter.i = 0;
- // doc'ed in Field
- focus : function(){
- if(this.win && !this.sourceEditMode){
- this.win.focus();
- }else{
- this.el.focus();
- }
- },
+
+Roo.htmleditor.KeyEnter.prototype = {
- assignDocWin: function()
+ core : false,
+
+ keypress : function(e)
{
- var iframe = this.iframe;
-
- if(Roo.isIE){
- this.doc = iframe.contentWindow.document;
- this.win = iframe.contentWindow;
- } else {
-// if (!Roo.get(this.frameId)) {
-// return;
-// }
-// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
-// this.win = Roo.get(this.frameId).dom.contentWindow;
-
- if (!Roo.get(this.frameId) && !iframe.contentDocument) {
- return;
- }
-
- this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
- this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
+ if (e.charCode != 13 && e.charCode != 10) {
+ Roo.log([e.charCode,e]);
+ return true;
}
- },
+ e.preventDefault();
+ // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
+ var doc = this.core.doc;
+ //add a new line
+
- // private
- initEditor : function(){
- //console.log("INIT EDITOR");
- this.assignDocWin();
-
-
-
- this.doc.designMode="on";
- this.doc.open();
- this.doc.write(this.getDocMarkup());
- this.doc.close();
-
- var dbody = (this.doc.body || this.doc.documentElement);
- //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
- // this copies styles from the containing element into thsi one..
- // not sure why we need all of this..
- //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
-
- //var ss = this.el.getStyles( 'background-image', 'background-repeat');
- //ss['background-attachment'] = 'fixed'; // w3c
- dbody.bgProperties = 'fixed'; // ie
- dbody.setAttribute("translate", "no");
-
- //Roo.DomHelper.applyStyles(dbody, ss);
- Roo.EventManager.on(this.doc, {
-
- 'mouseup': this.onEditorEvent,
- 'dblclick': this.onEditorEvent,
- 'click': this.onEditorEvent,
- 'keyup': this.onEditorEvent,
+ var sel = this.core.getSelection();
+ var range = sel.getRangeAt(0);
+ var n = range.commonAncestorContainer;
+ var pc = range.closest([ 'ol', 'ul']);
+ var pli = range.closest('li');
+ if (!pc || e.ctrlKey) {
+ // on it list, or ctrl pressed.
+ if (!e.ctrlKey) {
+ sel.insertNode('br', 'after');
+ } else {
+ // only do this if we have ctrl key..
+ var br = doc.createElement('br');
+ br.className = 'clear';
+ br.setAttribute('style', 'clear: both');
+ sel.insertNode(br, 'after');
+ }
- buffer:100,
- scope: this
- });
- Roo.EventManager.on(this.doc, {
- 'paste': this.onPasteEvent,
- scope : this
- });
- if(Roo.isGecko){
- Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
- }
- //??? needed???
- if(Roo.isIE || Roo.isSafari || Roo.isOpera){
- Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
- }
- this.initialized = true;
-
-
- // initialize special key events - enter
- new Roo.htmleditor.KeyEnter({core : this});
-
-
- this.owner.fireEvent('initialize', this);
- this.pushValue();
- },
- // this is to prevent a href clicks resulting in a redirect?
-
- onPasteEvent : function(e,v)
- {
- // I think we better assume paste is going to be a dirty load of rubish from word..
-
- // even pasting into a 'email version' of this widget will have to clean up that mess.
- var cd = (e.browserEvent.clipboardData || window.clipboardData);
-
- // check what type of paste - if it's an image, then handle it differently.
- if (cd.files && cd.files.length > 0 && cd.types.indexOf('text/html') < 0) {
- // pasting images?
- var urlAPI = (window.createObjectURL && window) ||
- (window.URL && URL.revokeObjectURL && URL) ||
- (window.webkitURL && webkitURL);
-
- var r = new FileReader();
- var t = this;
- r.addEventListener('load',function()
- {
-
- var d = (new DOMParser().parseFromString('<img src="' + r.result+ '">', 'text/html')).body;
- // is insert asycn?
- if (t.enableBlocks) {
-
- Array.from(d.getElementsByTagName('img')).forEach(function(img) {
- if (img.closest('figure')) { // assume!! that it's aready
- return;
- }
- var fig = new Roo.htmleditor.BlockFigure({
- image_src : img.src
- });
- fig.updateElement(img); // replace it..
-
- });
- }
- t.insertAtCursor(d.innerHTML.replace(/ /g,' '));
- t.owner.fireEvent('paste', this);
- });
- r.readAsDataURL(cd.files[0]);
-
- e.preventDefault();
-
- return false;
- }
- if (cd.types.indexOf('text/html') < 0 ) {
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
return false;
}
- var images = [];
- var html = cd.getData('text/html'); // clipboard event
- if (cd.types.indexOf('text/rtf') > -1) {
- var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
- images = parser.doc ? parser.doc.getElementsByType('pict') : [];
- }
- // Roo.log(images);
- // Roo.log(imgs);
- // fixme..
- images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
- .map(function(g) { return g.toDataURL(); })
- .filter(function(g) { return g != 'about:blank'; });
-
- //Roo.log(html);
- html = this.cleanWordChars(html);
-
- var d = (new DOMParser().parseFromString(html, 'text/html')).body;
-
- var sn = this.getParentElement();
- // check if d contains a table, and prevent nesting??
- //Roo.log(d.getElementsByTagName('table'));
- //Roo.log(sn);
- //Roo.log(sn.closest('table'));
- if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
- e.preventDefault();
- this.insertAtCursor("You can not nest tables");
- //Roo.log("prevent?"); // fixme -
+ // deal with <li> insetion
+ if (pli.innerText.trim() == '' &&
+ pli.previousSibling &&
+ pli.previousSibling.nodeName == 'LI' &&
+ pli.previousSibling.innerText.trim() == '') {
+ pli.parentNode.removeChild(pli.previousSibling);
+ sel.cursorAfter(pc);
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
return false;
}
-
-
-
- if (images.length > 0) {
- // replace all v:imagedata - with img.
- var ar = Array.from(d.getElementsByTagName('v:imagedata'));
- Roo.each(ar, function(node) {
- node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
- node.parentNode.removeChild(node);
- });
-
-
- Roo.each(d.getElementsByTagName('img'), function(img, i) {
- img.setAttribute('src', images[i]);
- });
- }
- if (this.autoClean) {
- new Roo.htmleditor.FilterWord({ node : d });
-
- new Roo.htmleditor.FilterStyleToTag({ node : d });
- new Roo.htmleditor.FilterAttributes({
- node : d,
- attrib_white : [
- 'href',
- 'src',
- 'name',
- 'align',
- 'colspan',
- 'rowspan'
- /* THESE ARE NOT ALLWOED FOR PASTE
- * 'data-display',
- 'data-caption-display',
- 'data-width',
- 'data-caption',
- 'start' ,
- 'style',
- // youtube embed.
- 'class',
- 'allowfullscreen',
- 'frameborder',
- 'width',
- 'height',
- 'alt'
- */
- ],
- attrib_clean : ['href', 'src' ]
- });
- new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
- // should be fonts..
- new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
- new Roo.htmleditor.FilterParagraph({ node : d });
- new Roo.htmleditor.FilterHashLink({node : d});
- new Roo.htmleditor.FilterSpan({ node : d });
- new Roo.htmleditor.FilterLongBr({ node : d });
- new Roo.htmleditor.FilterComment({ node : d });
-
-
- }
- if (this.enableBlocks) {
-
- Array.from(d.getElementsByTagName('img')).forEach(function(img) {
- if (img.closest('figure')) { // assume!! that it's aready
- return;
- }
- var fig = new Roo.htmleditor.BlockFigure({
- image_src : img.src
- });
- fig.updateElement(img); // replace it..
-
- });
- }
-
-
- this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
- if (this.enableBlocks) {
- Roo.htmleditor.Block.initAll(this.doc.body);
+
+ var li = doc.createElement('LI');
+ li.innerHTML = ' ';
+ if (!pli || !pli.firstSibling) {
+ pc.appendChild(li);
+ } else {
+ pli.parentNode.insertBefore(li, pli.firstSibling);
}
-
-
- e.preventDefault();
- this.owner.fireEvent('paste', this);
+ sel.cursorText (li.firstChild);
+
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+
return false;
- // default behaveiour should be our local cleanup paste? (optional?)
- // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
- //this.owner.fireEvent('paste', e, v);
- },
- // private
- onDestroy : function(){
-
+
- if(this.rendered){
-
- //for (var i =0; i < this.toolbars.length;i++) {
- // // fixme - ask toolbars for heights?
- // this.toolbars[i].onDestroy();
- // }
-
- //this.wrap.dom.innerHTML = '';
- //this.wrap.remove();
- }
- },
-
- // private
- onFirstFocus : function(){
-
- this.assignDocWin();
- this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
- this.activated = true;
-
- if(Roo.isGecko){ // prevent silly gecko errors
- this.win.focus();
- var s = this.win.getSelection();
- if(!s.focusNode || s.focusNode.nodeType != 3){
- var r = s.getRangeAt(0);
- r.selectNodeContents((this.doc.body || this.doc.documentElement));
- r.collapse(true);
- this.deferFocus();
- }
- try{
- this.execCmd('useCSS', true);
- this.execCmd('styleWithCSS', false);
- }catch(e){}
- }
- this.owner.fireEvent('activate', this);
- },
+ }
+};
+
+/**
+ * @class Roo.htmleditor.Block
+ * Base class for html editor blocks - do not use it directly .. extend it..
+ * @cfg {DomElement} node The node to apply stuff to.
+ * @cfg {String} friendly_name the name that appears in the context bar about this block
+ * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
+
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
- // private
- adjustFont: function(btn){
- var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
- //if(Roo.isSafari){ // safari
- // adjust *= 2;
- // }
- var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
- if(Roo.isSafari){ // safari
- var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
- v = (v < 10) ? 10 : v;
- v = (v > 48) ? 48 : v;
- v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
-
- }
-
-
- v = Math.max(1, v+adjust);
-
- this.execCmd('FontSize', v );
- },
+Roo.htmleditor.Block = function(cfg)
+{
+ // do nothing .. should not be called really.
+}
+/**
+ * factory method to get the block from an element (using cache if necessary)
+ * @static
+ * @param {HtmlElement} the dom element
+ */
+Roo.htmleditor.Block.factory = function(node)
+{
+ var cc = Roo.htmleditor.Block.cache;
+ var id = Roo.get(node).id;
+ if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
+ Roo.htmleditor.Block.cache[id].readElement(node);
+ return Roo.htmleditor.Block.cache[id];
+ }
+ var db = node.getAttribute('data-block');
+ if (!db) {
+ db = node.nodeName.toLowerCase().toUpperCaseFirst();
+ }
+ var cls = Roo.htmleditor['Block' + db];
+ if (typeof(cls) == 'undefined') {
+ //Roo.log(node.getAttribute('data-block'));
+ Roo.log("OOps missing block : " + 'Block' + db);
+ return false;
+ }
+ Roo.htmleditor.Block.cache[id] = new cls({ node: node });
+ return Roo.htmleditor.Block.cache[id]; /// should trigger update element
+};
- onEditorEvent : function(e)
- {
-
-
- if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
- return; // we do not handle this.. (undo manager does..)
- }
- // clicking a 'block'?
-
- // in theory this detects if the last element is not a br, then we try and do that.
- // its so clicking in space at bottom triggers adding a br and moving the cursor.
- if (e &&
- e.target.nodeName == 'BODY' &&
- e.type == "mouseup" &&
- this.doc.body.lastChild
- ) {
- var lc = this.doc.body.lastChild;
- // gtx-trans is google translate plugin adding crap.
- while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
- lc = lc.previousSibling;
- }
- if (lc.nodeType == 1 && lc.nodeName != 'BR') {
- // if last element is <BR> - then dont do anything.
-
- var ns = this.doc.createElement('br');
- this.doc.body.appendChild(ns);
- range = this.doc.createRange();
- range.setStartAfter(ns);
- range.collapse(true);
- var sel = this.win.getSelection();
- sel.removeAllRanges();
- sel.addRange(range);
- }
- }
-
-
-
- this.fireEditorEvent(e);
- // this.updateToolbar();
- this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
- },
-
- fireEditorEvent: function(e)
- {
- this.owner.fireEvent('editorevent', this, e);
- },
+/**
+ * initalize all Elements from content that are 'blockable'
+ * @static
+ * @param the body element
+ */
+Roo.htmleditor.Block.initAll = function(body, type)
+{
+ if (typeof(type) == 'undefined') {
+ var ia = Roo.htmleditor.Block.initAll;
+ ia(body,'table');
+ ia(body,'td');
+ ia(body,'figure');
+ return;
+ }
+ Roo.each(Roo.get(body).query(type), function(e) {
+ Roo.htmleditor.Block.factory(e);
+ },this);
+};
+// question goes here... do we need to clear out this cache sometimes?
+// or show we make it relivant to the htmleditor.
+Roo.htmleditor.Block.cache = {};
- insertTag : function(tg)
+Roo.htmleditor.Block.prototype = {
+
+ node : false,
+
+ // used by context menu
+ friendly_name : 'Based Block',
+
+ // text for button to delete this element
+ deleteTitle : false,
+
+ context : false,
+ /**
+ * Update a node with values from this object
+ * @param {DomElement} node
+ */
+ updateElement : function(node)
{
- // could be a bit smarter... -> wrap the current selected tRoo..
- if (tg.toLowerCase() == 'span' ||
- tg.toLowerCase() == 'code' ||
- tg.toLowerCase() == 'sup' ||
- tg.toLowerCase() == 'sub'
- ) {
-
- range = this.createRange(this.getSelection());
- var wrappingNode = this.doc.createElement(tg.toLowerCase());
- wrappingNode.appendChild(range.extractContents());
- range.insertNode(wrappingNode);
-
- return;
-
-
-
- }
- this.execCmd("formatblock", tg);
- this.undoManager.addEvent();
+ Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
},
-
- insertText : function(txt)
+ /**
+ * convert to plain HTML for calling insertAtCursor..
+ */
+ toHTML : function()
{
-
-
- var range = this.createRange();
- range.deleteContents();
- //alert(Sender.getAttribute('label'));
-
- range.insertNode(this.doc.createTextNode(txt));
- this.undoManager.addEvent();
- } ,
-
-
-
+ return Roo.DomHelper.markup(this.toObject());
+ },
/**
- * Executes a Midas editor command on the editor document and performs necessary focus and
- * toolbar updates. <b>This should only be called after the editor is initialized.</b>
- * @param {String} cmd The Midas command
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ * used by readEleemnt to extract data from a node
+ * may need improving as it's pretty basic
+
+ * @param {DomElement} node
+ * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
+ * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
+ * @param {String} style the style property - eg. text-align
*/
- relayCmd : function(cmd, value)
+ getVal : function(node, tag, attr, style)
{
-
- switch (cmd) {
- case 'justifyleft':
- case 'justifyright':
- case 'justifycenter':
- // if we are in a cell, then we will adjust the
- var n = this.getParentElement();
- var td = n.closest('td');
- if (td) {
- var bl = Roo.htmleditor.Block.factory(td);
- bl.textAlign = cmd.replace('justify','');
- bl.updateElement();
- this.owner.fireEvent('editorevent', this);
- return;
- }
- this.execCmd('styleWithCSS', true); //
- break;
- case 'bold':
- case 'italic':
- case 'underline':
- // if there is no selection, then we insert, and set the curson inside it..
- this.execCmd('styleWithCSS', false);
- break;
-
-
- default:
- break;
+ var n = node;
+ if (tag !== true && n.tagName != tag.toUpperCase()) {
+ // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+ // but kiss for now.
+ n = node.getElementsByTagName(tag).item(0);
+ }
+ if (!n) {
+ return '';
+ }
+ if (attr === false) {
+ return n;
+ }
+ if (attr == 'html') {
+ return n.innerHTML;
+ }
+ if (attr == 'style') {
+ return n.style[style];
}
-
- this.win.focus();
- this.execCmd(cmd, value);
- this.owner.fireEvent('editorevent', this);
- //this.updateToolbar();
- this.owner.deferFocus();
+ return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
+
},
-
/**
- * Executes a Midas editor command directly on the editor document.
- * For visual commands, you should use {@link #relayCmd} instead.
- * <b>This should only be called after the editor is initialized.</b>
- * @param {String} cmd The Midas command
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * (override this)
*/
- execCmd : function(cmd, value){
- this.doc.execCommand(cmd, false, value === undefined ? null : value);
- this.syncValue();
+ toObject : function()
+ {
+ return {};
},
+ /**
+ * Read a node that has a 'data-block' property - and extract the values from it.
+ * @param {DomElement} node - the node
+ */
+ readElement : function(node)
+ {
+
+ }
+
+
+};
+
+
+/**
+ * @class Roo.htmleditor.BlockFigure
+ * Block that has an image and a figcaption
+ * @cfg {String} image_src the url for the image
+ * @cfg {String} align (left|right) alignment for the block default left
+ * @cfg {String} caption the text to appear below (and in the alt tag)
+ * @cfg {String} caption_display (block|none) display or not the caption
+ * @cfg {String|number} image_width the width of the image number or %?
+ * @cfg {String|number} image_height the height of the image number or %?
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+}
+Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
-
- /**
- * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
- * to insert tRoo.
- * @param {String} text | dom node..
- */
- insertAtCursor : function(text)
+
+ // setable values.
+ image_src: '',
+ align: 'center',
+ caption : '',
+ caption_display : 'block',
+ width : '100%',
+ cls : '',
+ href: '',
+ video_url : '',
+
+ // margin: '2%', not used
+
+ text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
+
+
+ // used by context menu
+ friendly_name : 'Image with caption',
+ deleteTitle : "Delete Image and Caption",
+
+ contextMenu : function(toolbar)
{
- if(!this.activated){
- return;
- }
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Source: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'Button',
+ text: 'Change Image URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Image Source URL",
+ msg : "Enter the url for the image",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.image_src = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.image_src
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
- if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
- this.win.focus();
-
-
- // from jquery ui (MIT licenced)
- var range, node;
- var win = this.win;
-
- if (win.getSelection && win.getSelection().getRangeAt) {
-
- // delete the existing?
-
- this.createRange(this.getSelection()).deleteContents();
- range = win.getSelection().getRangeAt(0);
- node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
- range.insertNode(node);
- range = range.cloneRange();
- range.collapse(false);
+ {
+ xtype : 'Button',
+ text: 'Change Link URL',
- win.getSelection().removeAllRanges();
- win.getSelection().addRange(range);
-
-
-
- } else if (win.document.selection && win.document.selection.createRange) {
- // no firefox support
- var txt = typeof(text) == 'string' ? text : text.outerHTML;
- win.document.selection.createRange().pasteHTML(txt);
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Link URL",
+ msg : "Enter the url for the link - leave blank to have no link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.href = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.href
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: 'Show Video URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ Roo.MessageBox.alert("Video URL",
+ block().video_url == '' ? 'This image is not linked ot a video' :
+ 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
+ }
+ },
+ xns : rooui.Toolbar
+ },
- } else {
- // no firefox support
- var txt = typeof(text) == 'string' ? text : text.outerHTML;
- this.execCmd('InsertHTML', txt);
- }
- this.syncValue();
- this.deferFocus();
- }
- },
- // private
- mozKeyPress : function(e){
- if(e.ctrlKey){
- var c = e.getCharCode(), cmd;
-
- if(c > 0){
- c = String.fromCharCode(c).toLowerCase();
- switch(c){
- case 'b':
- cmd = 'bold';
- break;
- case 'i':
- cmd = 'italic';
- break;
-
- case 'u':
- cmd = 'underline';
- break;
-
- //case 'v':
- // this.cleanUpPaste.defer(100, this);
- // return;
-
- }
- if(cmd){
-
- this.relayCmd(cmd);
- //this.win.focus();
- //this.execCmd(cmd);
- //this.deferFocus();
- e.preventDefault();
- }
-
- }
- }
- },
-
- // private
- fixKeys : function(){ // load time branching for fastest keydown performance
-
-
- if(Roo.isIE){
- return function(e){
- var k = e.getKey(), r;
- if(k == e.TAB){
- e.stopEvent();
- r = this.doc.selection.createRange();
- if(r){
- r.collapse(true);
- r.pasteHTML('    ');
- this.deferFocus();
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
}
- return;
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['80%'],
+ ['50%'],
+ ['20%'],
+ ['10%']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
}
- /// this is handled by Roo.htmleditor.KeyEnter
- /*
- if(k == e.ENTER){
- r = this.doc.selection.createRange();
- if(r){
- var target = r.parentElement();
- if(!target || target.tagName.toLowerCase() != 'li'){
- e.stopEvent();
- r.pasteHTML('<br/>');
- r.collapse(false);
- r.select();
- }
+ },
+ {
+ xtype : 'TextItem',
+ text : "Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'align',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.align = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
}
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['left'],
+ ['right'],
+ ['center']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
}
- */
- //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- // this.cleanUpPaste.defer(100, this);
- // return;
- //}
-
-
- };
- }else if(Roo.isOpera){
- return function(e){
- var k = e.getKey();
- if(k == e.TAB){
- e.stopEvent();
- this.win.focus();
- this.execCmd('InsertHTML','    ');
- this.deferFocus();
- }
-
- //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- // this.cleanUpPaste.defer(100, this);
- // return;
- //}
-
- };
- }else if(Roo.isSafari){
- return function(e){
- var k = e.getKey();
-
- if(k == e.TAB){
- e.stopEvent();
- this.execCmd('InsertText','\t');
- this.deferFocus();
- return;
- }
- this.mozKeyPress(e);
-
- //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- // this.cleanUpPaste.defer(100, this);
- // return;
- // }
-
- };
- }
- }(),
-
- getAllAncestors: function()
- {
- var p = this.getSelectedNode();
- var a = [];
- if (!p) {
- a.push(p); // push blank onto stack..
- p = this.getParentElement();
- }
-
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Hide Caption',
+ name : 'caption_display',
+ pressed : false,
+ enableToggle : true,
+ setValue : function(v) {
+ // this trigger toggle.
+
+ this.setText(v ? "Hide Caption" : "Show Caption");
+ this.setPressed(v != 'block');
+ },
+ listeners : {
+ toggle: function (btn, state)
+ {
+ var b = block();
+ b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
+ this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+ ];
- while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
- a.push(p);
- p = p.parentNode;
- }
- a.push(this.doc.body);
- return a;
- },
- lastSel : false,
- lastSelNode : false,
-
-
- getSelection : function()
- {
- this.assignDocWin();
- return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
},
/**
- * Select a dom node
- * @param {DomElement} node the node to select
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
*/
- selectNode : function(node, collapse)
- {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
- }
- if (collapse === true) {
- nodeRange.collapse(true);
- }
- //
- var s = this.win.getSelection();
- s.removeAllRanges();
- s.addRange(nodeRange);
- },
-
- getSelectedNode: function()
+ toObject : function()
{
- // this may only work on Gecko!!!
-
- // should we cache this!!!!
+ var d = document.createElement('div');
+ d.innerHTML = this.caption;
-
-
- var range = this.createRange(this.getSelection()).cloneRange();
+ var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0;
- if (Roo.isIE) {
- var parent = range.parentElement();
- while (true) {
- var testRange = range.duplicate();
- testRange.moveToElementText(parent);
- if (testRange.inRange(range)) {
- break;
- }
- if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
- break;
- }
- parent = parent.parentElement;
+ var iw = this.align == 'center' ? this.width : '100%';
+ var img = {
+ tag : 'img',
+ contenteditable : 'false',
+ src : this.image_src,
+ alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
+ style: {
+ width : iw,
+ maxWidth : iw + ' !important', // this is not getting rendered?
+ margin : m
+
}
- return parent;
+ };
+ /*
+ '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
+ '<a href="{2}">' +
+ '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
+ '</a>' +
+ '</div>',
+ */
+
+ if (this.href.length > 0) {
+ img = {
+ tag : 'a',
+ href: this.href,
+ contenteditable : 'true',
+ cn : [
+ img
+ ]
+ };
}
- // is ancestor a text element.
- var ac = range.commonAncestorContainer;
- if (ac.nodeType == 3) {
- ac = ac.parentNode;
- }
- var ar = ac.childNodes;
-
- var nodes = [];
- var other_nodes = [];
- var has_other_nodes = false;
- for (var i=0;i<ar.length;i++) {
- if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
- continue;
- }
- // fullly contained node.
-
- if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
- nodes.push(ar[i]);
- continue;
- }
-
- // probably selected..
- if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
- other_nodes.push(ar[i]);
- continue;
- }
- // outer..
- if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
- continue;
- }
+ if (this.video_url.length > 0) {
+ img = {
+ tag : 'div',
+ cls : this.cls,
+ frameborder : 0,
+ allowfullscreen : true,
+ width : 420, // these are for video tricks - that we replace the outer
+ height : 315,
+ src : this.video_url,
+ cn : [
+ img
+ ]
+ };
+ }
+
+
+
+ var ret = {
+ tag: 'figure',
+ 'data-block' : 'Figure',
+ 'data-width' : this.width,
+ 'data-caption' : this.caption,
+ 'data-caption-display' : this.caption_display,
+ contenteditable : 'false',
+ style : {
+ display: 'block',
+ float : this.align ,
+ maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'),
+ width : this.align == 'center' ? '100%' : this.width,
+ margin: '0px',
+ padding: this.align == 'center' ? '0' : '0 10px' ,
+ textAlign : this.align // seems to work for email..
+
+ },
- has_other_nodes = true;
- }
- if (!nodes.length && other_nodes.length) {
- nodes= other_nodes;
- }
- if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
- return false;
+ align : this.align,
+ cn : [
+ img
+ ]
+ };
+
+ // show figcaption only if caption_display is 'block'
+ if(this.caption_display == 'block') {
+ ret['cn'].push({
+ tag: 'figcaption',
+ style : {
+ textAlign : 'left',
+ fontSize : '16px',
+ lineHeight : '24px',
+ display : this.caption_display,
+ maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important',
+ margin: m,
+ width: this.align == 'center' ? this.width : '100%'
+
+
+ },
+ cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
+ cn : [
+ {
+ tag: 'div',
+ style : {
+ marginTop : '16px',
+ textAlign : 'start'
+ },
+ align: 'left',
+ cn : [
+ {
+ // we can not rely on yahoo syndication to use CSS elements - so have to use '<i>' to encase stuff.
+ tag : 'i',
+ contenteditable : Roo.htmleditor.BlockFigure.caption_edit,
+ html : this.caption.length ? this.caption : "Caption" // fake caption
+ }
+
+ ]
+ }
+
+ ]
+
+ });
}
-
- return nodes[0];
+ return ret;
+
},
-
- createRange: function(sel)
- {
- // this has strange effects when using with
- // top toolbar - not sure if it's a great idea.
- //this.editor.contentWindow.focus();
- if (typeof sel != "undefined") {
- try {
- return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
- } catch(e) {
- return this.doc.createRange();
- }
- } else {
- return this.doc.createRange();
- }
- },
- getParentElement: function()
+ readElement : function(node)
{
+ // this should not really come from the link...
+ this.video_url = this.getVal(node, 'div', 'src');
+ this.cls = this.getVal(node, 'div', 'class');
+ this.href = this.getVal(node, 'a', 'href');
- this.assignDocWin();
- var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
- var range = this.createRange(sel);
+ this.image_src = this.getVal(node, 'img', 'src');
- try {
- var p = range.commonAncestorContainer;
- while (p.nodeType == 3) { // text node
- p = p.parentNode;
- }
- return p;
- } catch (e) {
- return null;
+ this.align = this.getVal(node, 'figure', 'align');
+
+ // caption display is stored in figure
+ this.caption_display = this.getVal(node, true, 'data-caption-display');
+
+ // backward compatible
+ // it was stored in figcaption
+ if(this.caption_display == '') {
+ this.caption_display = this.getVal(node, 'figcaption', 'data-display');
}
-
+
+ // read caption from figcaption
+ var figcaption = this.getVal(node, 'figcaption', false);
+
+ if (figcaption !== '') {
+ this.caption = this.getVal(figcaption, 'i', 'html');
+ }
+
+
+ // read caption from data-caption in figure if no caption from figcaption
+ var dc = this.getVal(node, true, 'data-caption');
+
+ if(this.caption_display == 'none' && dc && dc.length){
+ this.caption = dc;
+ }
+
+ //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+ this.width = this.getVal(node, true, 'data-width');
+ //this.margin = this.getVal(node, 'figure', 'style', 'margin');
+
},
- /***
- *
- * Range intersection.. the hard stuff...
- * '-1' = before
- * '0' = hits..
- * '1' = after.
- * [ -- selected range --- ]
- * [fail] [fail]
- *
- * basically..
- * if end is before start or hits it. fail.
- * if start is after end or hits it fail.
- *
- * if either hits (but other is outside. - then it's not
- *
- *
- **/
+ removeNode : function()
+ {
+ return this.node;
+ }
+
+
+
- // @see http://www.thismuchiknow.co.uk/?p=64.
- rangeIntersectsNode : function(range, node)
- {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
+
+
+
+});
+
+Roo.apply(Roo.htmleditor.BlockFigure, {
+ caption_edit : true
+});
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+ if (!cfg.node) {
+ this.rows = [];
+ for(var r = 0; r < this.no_row; r++) {
+ this.rows[r] = [];
+ for(var c = 0; c < this.no_col; c++) {
+ this.rows[r][c] = this.emptyCell();
+ }
}
+ }
- var rangeStartRange = range.cloneRange();
- rangeStartRange.collapse(true);
- var rangeEndRange = range.cloneRange();
- rangeEndRange.collapse(false);
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+
+ rows : false,
+ no_col : 1,
+ no_row : 1,
- var nodeStartRange = nodeRange.cloneRange();
- nodeStartRange.collapse(true);
- var nodeEndRange = nodeRange.cloneRange();
- nodeEndRange.collapse(false);
+ width: '100%',
- return rangeStartRange.compareBoundaryPoints(
- Range.START_TO_START, nodeEndRange) == -1 &&
- rangeEndRange.compareBoundaryPoints(
- Range.START_TO_START, nodeStartRange) == 1;
-
-
- },
- rangeCompareNode : function(range, node)
+ // used by context menu
+ friendly_name : 'Table',
+ deleteTitle : 'Delete Table',
+ // context menu is drawn once..
+
+ contextMenu : function(toolbar)
{
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
- }
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
- range.collapse(true);
-
- nodeRange.collapse(true);
-
- var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
- var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
-
- //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
- var nodeIsBefore = ss == 1;
- var nodeIsAfter = ee == -1;
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- if (nodeIsBefore && nodeIsAfter) {
- return 0; // outer
- }
- if (!nodeIsBefore && nodeIsAfter) {
- return 1; //right trailed.
- }
+ var syncValue = toolbar.editorcore.syncValue;
- if (nodeIsBefore && !nodeIsAfter) {
- return 2; // left trailed.
- }
- // fully contined.
- return 3;
- },
-
- cleanWordChars : function(input) {// change the chars to hex code
+ var fields = {};
- var swapCodes = [
- [ 8211, "–" ],
- [ 8212, "—" ],
- [ 8216, "'" ],
- [ 8217, "'" ],
- [ 8220, '"' ],
- [ 8221, '"' ],
- [ 8226, "*" ],
- [ 8230, "..." ]
- ];
- var output = input;
- Roo.each(swapCodes, function(sw) {
- var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['auto']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+ // -------- Cols
- output = output.replace(swapper, sw[1]);
- });
-
- return output;
- },
-
-
-
-
-
- cleanUpChild : function (node)
- {
-
- new Roo.htmleditor.FilterComment({node : node});
- new Roo.htmleditor.FilterAttributes({
- node : node,
- attrib_black : this.ablack,
- attrib_clean : this.aclean,
- style_white : this.cwhite,
- style_black : this.cblack
- });
- new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
- new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+ {
+ xtype : 'TextItem',
+ text : "Columns: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().addColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'TextItem',
+ text : "Rows: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ block().addRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'Button',
+ text: 'Reset Column Widths',
+ listeners : {
+
+ click : function (_self, e)
+ {
+ block().resetWidths();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+
+
+
+ ];
},
- /**
- * Clean up MS wordisms...
- * @deprecated - use filter directly
- */
- cleanWord : function(node)
- {
- new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
- new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
-
- },
-
- /**
-
- * @deprecated - use filters
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
*/
- cleanTableWidths : function(node)
- {
- new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
-
-
- },
-
-
-
- applyBlacklists : function()
+ toObject : function()
{
- var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
- var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
- this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean : Roo.HtmlEditorCore.aclean;
- this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack : Roo.HtmlEditorCore.ablack;
- this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove : Roo.HtmlEditorCore.tag_remove;
-
- this.white = [];
- this.black = [];
- Roo.each(Roo.HtmlEditorCore.white, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- this.white.push(tag);
-
- }, this);
+ var ret = {
+ tag : 'table',
+ contenteditable : 'false', // this stops cell selection from picking the table.
+ 'data-block' : 'Table',
+ style : {
+ width: this.width,
+ border : 'solid 1px #000', // ??? hard coded?
+ 'border-collapse' : 'collapse'
+ },
+ cn : [
+ { tag : 'tbody' , cn : [] }
+ ]
+ };
- Roo.each(w, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- if (this.white.indexOf(tag) > -1) {
- return;
- }
- this.white.push(tag);
+ // do we have a head = not really
+ var ncols = 0;
+ Roo.each(this.rows, function( row ) {
+ var tr = {
+ tag: 'tr',
+ style : {
+ margin: '6px',
+ border : 'solid 1px #000',
+ textAlign : 'left'
+ },
+ cn : [ ]
+ };
- }, this);
-
-
- Roo.each(Roo.HtmlEditorCore.black, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- this.black.push(tag);
+ ret.cn[0].cn.push(tr);
+ // does the row have any properties? ?? height?
+ var nc = 0;
+ Roo.each(row, function( cell ) {
+
+ var td = {
+ tag : 'td',
+ contenteditable : 'true',
+ 'data-block' : 'Td',
+ html : cell.html,
+ style : cell.style
+ };
+ if (cell.colspan > 1) {
+ td.colspan = cell.colspan ;
+ nc += cell.colspan;
+ } else {
+ nc++;
+ }
+ if (cell.rowspan > 1) {
+ td.rowspan = cell.rowspan ;
+ }
+
+
+ // widths ?
+ tr.cn.push(td);
+
+
+ }, this);
+ ncols = Math.max(nc, ncols);
- }, this);
-
- Roo.each(b, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- if (this.black.indexOf(tag) > -1) {
- return;
- }
- this.black.push(tag);
}, this);
+ // add the header row..
+ ncols++;
+
- w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
- b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
+ return ret;
+
+ },
+
+ readElement : function(node)
+ {
+ node = node ? node : this.node ;
+ this.width = this.getVal(node, true, 'style', 'width') || '100%';
- this.cwhite = [];
- this.cblack = [];
- Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- this.cwhite.push(tag);
+ this.rows = [];
+ this.no_row = 0;
+ var trs = Array.from(node.rows);
+ trs.forEach(function(tr) {
+ var row = [];
+ this.rows.push(row);
- }, this);
-
- Roo.each(w, function(tag) {
- if (b.indexOf(tag) > -1) {
- return;
- }
- if (this.cwhite.indexOf(tag) > -1) {
- return;
- }
- this.cwhite.push(tag);
+ this.no_row++;
+ var no_column = 0;
+ Array.from(tr.cells).forEach(function(td) {
+
+ var add = {
+ colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+ rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
+ style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+ html : td.innerHTML
+ };
+ no_column += add.colspan;
+
+
+ row.push(add);
+
+
+ },this);
+ this.no_col = Math.max(this.no_col, no_column);
- }, this);
+
+ },this);
- Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
- if (w.indexOf(tag) > -1) {
- return;
- }
- this.cblack.push(tag);
-
+ },
+ normalizeRows: function()
+ {
+ var ret= [];
+ var rid = -1;
+ this.rows.forEach(function(row) {
+ rid++;
+ ret[rid] = [];
+ row = this.normalizeRow(row);
+ var cid = 0;
+ row.forEach(function(c) {
+ while (typeof(ret[rid][cid]) != 'undefined') {
+ cid++;
+ }
+ if (typeof(ret[rid]) == 'undefined') {
+ ret[rid] = [];
+ }
+ ret[rid][cid] = c;
+ c.row = rid;
+ c.col = cid;
+ if (c.rowspan < 2) {
+ return;
+ }
+
+ for(var i = 1 ;i < c.rowspan; i++) {
+ if (typeof(ret[rid+i]) == 'undefined') {
+ ret[rid+i] = [];
+ }
+ ret[rid+i][cid] = c;
+ }
+ });
}, this);
-
- Roo.each(b, function(tag) {
- if (w.indexOf(tag) > -1) {
+ return ret;
+
+ },
+
+ normalizeRow: function(row)
+ {
+ var ret= [];
+ row.forEach(function(c) {
+ if (c.colspan < 2) {
+ ret.push(c);
return;
}
- if (this.cblack.indexOf(tag) > -1) {
- return;
+ for(var i =0 ;i < c.colspan; i++) {
+ ret.push(c);
}
- this.cblack.push(tag);
-
- }, this);
+ });
+ return ret;
+
},
- setStylesheets : function(stylesheets)
+ deleteColumn : function(sel)
{
- if(typeof(stylesheets) == 'string'){
- Roo.get(this.iframe.contentDocument.head).createChild({
- tag : 'link',
- rel : 'stylesheet',
- type : 'text/css',
- href : stylesheets
- });
-
+ if (!sel || sel.type != 'col') {
return;
}
- var _this = this;
-
- Roo.each(stylesheets, function(s) {
- if(!s.length){
- return;
+ if (this.no_col < 2) {
+ return;
+ }
+
+ this.rows.forEach(function(row) {
+ var cols = this.normalizeRow(row);
+ var col = cols[sel.col];
+ if (col.colspan > 1) {
+ col.colspan --;
+ } else {
+ row.remove(col);
}
- Roo.get(_this.iframe.contentDocument.head).createChild({
- tag : 'link',
- rel : 'stylesheet',
- type : 'text/css',
- href : s
- });
- });
-
+ }, this);
+ this.no_col--;
},
-
-
- updateLanguage : function()
+ removeColumn : function()
{
- if (!this.iframe || !this.iframe.contentDocument) {
- return;
- }
- Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
+ this.deleteColumn({
+ type: 'col',
+ col : this.no_col-1
+ });
+ this.updateElement();
},
-
- removeStylesheets : function()
+
+ addColumn : function()
{
- var _this = this;
- Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
- s.remove();
- });
+ this.rows.forEach(function(row) {
+ row.push(this.emptyCell());
+
+ }, this);
+ this.updateElement();
},
- setStyle : function(style)
+ deleteRow : function(sel)
{
- Roo.get(this.iframe.contentDocument.head).createChild({
- tag : 'style',
- type : 'text/css',
- html : style
- });
-
- return;
- }
-
- // hide stuff that is not compatible
- /**
- * @event blur
- * @hide
- */
- /**
- * @event change
- * @hide
- */
- /**
- * @event focus
- * @hide
- */
- /**
- * @event specialkey
- * @hide
- */
- /**
- * @cfg {String} fieldClass @hide
- */
- /**
- * @cfg {String} focusClass @hide
- */
- /**
- * @cfg {String} autoCreate @hide
- */
- /**
- * @cfg {String} inputType @hide
- */
- /**
- * @cfg {String} invalidClass @hide
- */
- /**
- * @cfg {String} invalidText @hide
- */
- /**
- * @cfg {String} msgFx @hide
- */
- /**
- * @cfg {String} validateOnBlur @hide
- */
-});
-
-Roo.HtmlEditorCore.white = [
- 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
+ if (!sel || sel.type != 'row') {
+ return;
+ }
- 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV',
- 'DL', 'DT', 'H1', 'H2', 'H3', 'H4',
- 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE',
- 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE',
- 'TABLE', 'UL', 'XMP',
-
- 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH',
- 'THEAD', 'TR',
-
- 'DIR', 'MENU', 'OL', 'UL', 'DL',
-
- 'EMBED', 'OBJECT'
-];
-
-
-Roo.HtmlEditorCore.black = [
- // 'embed', 'object', // enable - backend responsiblity to clean thiese
- 'APPLET', //
- 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY',
- 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER',
- 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT',
- 'SCRIPT', 'STYLE' ,'TITLE', 'XML',
- //'FONT' // CLEAN LATER..
- 'COLGROUP', 'COL' // messy tables.
+ if (this.no_row < 2) {
+ return;
+ }
+
+ var rows = this.normalizeRows();
-];
-Roo.HtmlEditorCore.clean = [ // ?? needed???
- 'SCRIPT', 'STYLE', 'TITLE', 'XML'
-];
-Roo.HtmlEditorCore.tag_remove = [
- 'FONT', 'TBODY'
-];
-// attributes..
-
-Roo.HtmlEditorCore.ablack = [
- 'on'
-];
-
-Roo.HtmlEditorCore.aclean = [
- 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
-];
-
-// protocols..
-Roo.HtmlEditorCore.pwhite= [
- 'http', 'https', 'mailto'
-];
-
-// white listed style attributes.
-Roo.HtmlEditorCore.cwhite= [
- // 'text-align', /// default is to allow most things..
-
-
-// 'font-size'//??
-];
-
-// black listed style attributes.
-Roo.HtmlEditorCore.cblack= [
- // 'font-size' -- this can be set by the project
-];
-
-
-
-
- //<script type="text/javascript">
-
-/*
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * Licence LGPL
- *
- */
-
-
-Roo.form.HtmlEditor = function(config){
+ rows[sel.row].forEach(function(col) {
+ if (col.rowspan > 1) {
+ col.rowspan--;
+ } else {
+ col.remove = 1; // flage it as removed.
+ }
+
+ }, this);
+ var newrows = [];
+ this.rows.forEach(function(row) {
+ newrow = [];
+ row.forEach(function(c) {
+ if (typeof(c.remove) == 'undefined') {
+ newrow.push(c);
+ }
+
+ });
+ if (newrow.length > 0) {
+ newrows.push(row);
+ }
+ });
+ this.rows = newrows;
+
+
+
+ this.no_row--;
+ this.updateElement();
+
+ },
+ removeRow : function()
+ {
+ this.deleteRow({
+ type: 'row',
+ row : this.no_row-1
+ });
+
+ },
+
+
+ addRow : function()
+ {
+
+ var row = [];
+ for (var i = 0; i < this.no_col; i++ ) {
+
+ row.push(this.emptyCell());
+
+ }
+ this.rows.push(row);
+ this.updateElement();
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return (new Roo.htmleditor.BlockTd({})).toObject();
+
+
+ },
+ removeNode : function()
+ {
+ return this.node;
+ },
- Roo.form.HtmlEditor.superclass.constructor.call(this, config);
- if (!this.toolbars) {
- this.toolbars = [];
+ resetWidths : function()
+ {
+ Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+ var nn = Roo.htmleditor.Block.factory(n);
+ nn.width = '';
+ nn.updateElement(n);
+ });
}
- this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
-};
+
+
+})
/**
- * @class Roo.form.HtmlEditor
- * @extends Roo.form.Field
- * Provides a lightweight HTML Editor component.
*
- * This has been tested on Fireforx / Chrome.. IE may not be so great..
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ * add/remove cols
+ * adjust the width +/-
+ * reset the width...
+ *
+ *
+ */
+
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
*
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
- * supported by this editor.</b><br/><br/>
- * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
*/
-Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
- /**
- * @cfg {Boolean} clearUp
- */
- clearUp : true,
- /**
- * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
- */
- toolbars : false,
-
- /**
- * @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,
-
- /**
- * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea rootURL + '/roojs1/css/undoreset.css', .
- *
- */
- stylesheets: false,
-
+
+Roo.htmleditor.BlockTd = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+
- /**
- * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
- *
- */
- cblack: false,
- /**
- * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
- *
- */
- cwhite: false,
- /**
- * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
- *
- */
- black: false,
- /**
- * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
- *
- */
- white: false,
- /**
- * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
- */
- allowComments: false,
- /**
- * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
- */
- enableBlocks : true,
+}
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
+
+ node : false,
- /**
- * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
- * if you are doing an email editor, this probably needs disabling, it's designed
- */
- autoClean: true,
- /**
- * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
- */
- bodyCls : '',
- /**
- * @cfg {String} language default en - language of text (usefull for rtl languages)
- *
- */
- language: 'en',
+ width: '',
+ textAlign : 'left',
+ valign : 'top',
-
- // id of frame..
- frameId: false,
+ colspan : 1,
+ rowspan : 1,
- // private properties
- validationEvent : false,
- deferHeight: true,
- initialized : false,
- activated : false,
- onFocus : Roo.emptyFn,
- iframePad:3,
- hideMode:'offsets',
+ // used by context menu
+ friendly_name : 'Table Cell',
+ deleteTitle : false, // use our customer delete
- actionMode : 'container', // defaults to hiding it...
+ // context menu is drawn once..
- defaultAutoCreate : { // modified by initCompnoent..
- tag: "textarea",
- style:"width:500px;height:300px;",
- autocomplete: "new-password"
- },
-
- // private
- initComponent : function(){
- this.addEvents({
- /**
- * @event initialize
- * Fires when the editor is fully initialized (including the iframe)
- * @param {HtmlEditor} this
- */
- initialize: true,
- /**
- * @event activate
- * Fires when the editor is first receives the focus. Any insertion must wait
- * until after this event.
- * @param {HtmlEditor} this
- */
- activate: true,
- /**
- * @event beforesync
- * Fires before the textarea is updated with content from the editor iframe. Return false
- * to cancel the sync.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- beforesync: true,
- /**
- * @event beforepush
- * Fires before the iframe editor is updated with content from the textarea. Return false
- * to cancel the push.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- beforepush: true,
- /**
- * @event sync
- * Fires when the textarea is updated with content from the editor iframe.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- sync: true,
- /**
- * @event push
- * Fires when the iframe editor is updated with content from the textarea.
- * @param {HtmlEditor} this
- * @param {String} html
- */
- push: true,
- /**
- * @event editmodechange
- * Fires when the editor switches edit modes
- * @param {HtmlEditor} this
- * @param {Boolean} sourceEdit True if source edit, false if standard editing.
- */
- editmodechange: true,
- /**
- * @event editorevent
- * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
- * @param {HtmlEditor} this
- */
- editorevent: true,
- /**
- * @event firstfocus
- * Fires when on first focus - needed by toolbars..
- * @param {HtmlEditor} this
- */
- firstfocus: true,
- /**
- * @event autosave
- * Auto save the htmlEditor value as a file into Events
- * @param {HtmlEditor} this
- */
- autosave: true,
- /**
- * @event savedpreview
- * preview the saved version of htmlEditor
- * @param {HtmlEditor} this
- */
- savedpreview: true,
+ contextMenu : function(toolbar)
+ {
+
+ var cell = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+ var table = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+ };
+
+ var lr = false;
+ var saveSel = function()
+ {
+ lr = toolbar.editorcore.getSelection().getRangeAt(0);
+ }
+ var restoreSel = function()
+ {
+ if (lr) {
+ (function() {
+ toolbar.editorcore.focus();
+ var cr = toolbar.editorcore.getSelection();
+ cr.removeAllRanges();
+ cr.addRange(lr);
+ toolbar.editorcore.onEditorEvent();
+ }).defer(10, this);
+
+
+ }
+ }
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'Button',
+ text : 'Edit Table',
+ listeners : {
+ click : function() {
+ var t = toolbar.tb.selectedNode.closest('table');
+ toolbar.editorcore.selectNode(t);
+ toolbar.editorcore.onEditorEvent();
+ }
+ }
+
+ },
+
+
+
+ {
+ xtype : 'TextItem',
+ text : "Column Width: ",
+ xns : rooui.Toolbar
+
+ },
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().shrinkColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Vertical Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'valign',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = cell();
+ b.valign = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['top'],
+ ['middle'],
+ ['bottom'] // there are afew more...
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Merge Cells: ",
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Right',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeRight();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Below',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeBelow();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'TextItem',
+ text : "| ",
+ xns : rooui.Toolbar
+
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Split',
+ listeners : {
+ click : function (_self, e)
+ {
+ //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().split();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Fill',
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Delete',
+
+ xns : rooui.Toolbar,
+ menu : {
+ xtype : 'Menu',
+ xns : rooui.menu,
+ items : [
+ {
+ xtype : 'Item',
+ html: 'Column',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+
+ cell().deleteColumn();
+ syncValue();
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Row',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ cell().deleteRow();
+ syncValue();
+
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Separator',
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Table',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ var nn = t.node.nextSibling || t.node.previousSibling;
+ t.node.parentNode.removeChild(t.node);
+ if (nn) {
+ toolbar.editorcore.selectNode(nn, true);
+ }
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ }
+ ]
+ }
+ }
- /**
- * @event stylesheetsclick
- * Fires when press the Sytlesheets button
- * @param {Roo.HtmlEditorCore} this
- */
- stylesheetsclick: true,
- /**
- * @event paste
- * Fires when press user pastes into the editor
- * @param {Roo.HtmlEditorCore} this
- */
- paste: true
+ // align... << fixme
- });
- this.defaultAutoCreate = {
- tag: "textarea",
- style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
- autocomplete: "new-password"
- };
+ ];
+
},
-
- /**
- * Protected method that will not generally be called directly. It
- * is called when the editor creates its toolbar. Override this method if you need to
- * add custom toolbar buttons.
- * @param {HtmlEditor} editor
+
+
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
*/
- createToolbar : function(editor){
- Roo.log("create toolbars");
- if (!editor.toolbars || !editor.toolbars.length) {
- editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ toObject : function()
+ {
+ var ret = {
+ tag : 'td',
+ contenteditable : 'true', // this stops cell selection from picking the table.
+ 'data-block' : 'Td',
+ valign : this.valign,
+ style : {
+ 'text-align' : this.textAlign,
+ border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+ 'border-collapse' : 'collapse',
+ padding : '6px', // 8 for desktop / 4 for mobile
+ 'vertical-align': this.valign
+ },
+ html : this.html
+ };
+ if (this.width != '') {
+ ret.width = this.width;
+ ret.style.width = this.width;
}
- for (var i =0 ; i < editor.toolbars.length;i++) {
- editor.toolbars[i] = Roo.factory(
- typeof(editor.toolbars[i]) == 'string' ?
- { xtype: editor.toolbars[i]} : editor.toolbars[i],
- Roo.form.HtmlEditor);
- editor.toolbars[i].init(editor);
+
+ if (this.colspan > 1) {
+ ret.colspan = this.colspan ;
+ }
+ if (this.rowspan > 1) {
+ ret.rowspan = this.rowspan ;
}
-
+
+
+ return ret;
+
},
- /**
- * get the Context selected node
- * @returns {DomElement|boolean} selected node if active or false if none
- *
- */
- getSelectedNode : function()
+
+ readElement : function(node)
{
- if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
- return false;
+ node = node ? node : this.node ;
+ this.width = node.style.width;
+ this.colspan = Math.max(1,1*node.getAttribute('colspan'));
+ this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
+ this.html = node.innerHTML;
+ if (node.style.textAlign != '') {
+ this.textAlign = node.style.textAlign;
}
- return this.toolbars[1].tb.selectedNode;
+
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return {
+ colspan : 1,
+ rowspan : 1,
+ textAlign : 'left',
+ html : " " // is this going to be editable now?
+ };
+
+ },
+ removeNode : function()
+ {
+ return this.node.closest('table');
+
},
- // private
- onRender : function(ct, position)
+
+ cellData : false,
+
+ colWidths : false,
+
+ toTableArray : function()
{
- var _t = this;
- Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
-
- this.wrap = this.el.wrap({
- cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+ var ret = [];
+ var tab = this.node.closest('tr').closest('table');
+ Array.from(tab.rows).forEach(function(r, ri){
+ ret[ri] = [];
});
-
- this.editorcore.onRender(ct, position);
-
- 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.createToolbar(this);
-
-
- if(!this.width){
- this.setSize(this.wrap.getSize());
- }
- if (this.resizeEl) {
- this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
- // should trigger onReize..
- }
-
- this.keyNav = new Roo.KeyNav(this.el, {
-
- "tab" : function(e){
- e.preventDefault();
-
- var value = this.getValue();
-
- var start = this.el.dom.selectionStart;
- var end = this.el.dom.selectionEnd;
-
- if(!e.shiftKey){
-
- this.setValue(value.substring(0, start) + "\t" + value.substring(end));
- this.el.dom.setSelectionRange(end + 1, end + 1);
- return;
- }
-
- var f = value.substring(0, start).split("\t");
-
- if(f.pop().length != 0){
- return;
- }
-
- this.setValue(f.join("\t") + value.substring(end));
- this.el.dom.setSelectionRange(start - 1, start - 1);
-
- },
+ var rn = 0;
+ this.colWidths = [];
+ var all_auto = true;
+ Array.from(tab.rows).forEach(function(r, ri){
- "home" : function(e){
- e.preventDefault();
-
- var curr = this.el.dom.selectionStart;
- var lines = this.getValue().split("\n");
-
- if(!lines.length){
- return;
- }
-
- if(e.ctrlKey){
- this.el.dom.setSelectionRange(0, 0);
- return;
+ var cn = 0;
+ Array.from(r.cells).forEach(function(ce, ci){
+ var c = {
+ cell : ce,
+ row : rn,
+ col: cn,
+ colspan : ce.colSpan,
+ rowspan : ce.rowSpan
+ };
+ if (ce.isEqualNode(this.node)) {
+ this.cellData = c;
}
-
- var pos = 0;
-
- for (var i = 0; i < lines.length;i++) {
- pos += lines[i].length;
-
- if(i != 0){
- pos += 1;
- }
-
- if(pos < curr){
- continue;
+ // if we have been filled up by a row?
+ if (typeof(ret[rn][cn]) != 'undefined') {
+ while(typeof(ret[rn][cn]) != 'undefined') {
+ cn++;
}
-
- pos -= lines[i].length;
-
- break;
+ c.col = cn;
}
- if(!e.shiftKey){
- this.el.dom.setSelectionRange(pos, pos);
- return;
+ if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
+ this.colWidths[cn] = ce.style.width;
+ if (this.colWidths[cn] != '') {
+ all_auto = false;
+ }
}
- this.el.dom.selectionStart = pos;
- this.el.dom.selectionEnd = curr;
- },
-
- "end" : function(e){
- e.preventDefault();
-
- var curr = this.el.dom.selectionStart;
- var lines = this.getValue().split("\n");
-
- if(!lines.length){
- return;
- }
- if(e.ctrlKey){
- this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
+ if (c.colspan < 2 && c.rowspan < 2 ) {
+ ret[rn][cn] = c;
+ cn++;
return;
}
-
- var pos = 0;
-
- for (var i = 0; i < lines.length;i++) {
-
- pos += lines[i].length;
-
- if(i != 0){
- pos += 1;
+ for(var j = 0; j < c.rowspan; j++) {
+ if (typeof(ret[rn+j]) == 'undefined') {
+ continue; // we have a problem..
}
-
- if(pos < curr){
- continue;
+ ret[rn+j][cn] = c;
+ for(var i = 0; i < c.colspan; i++) {
+ ret[rn+j][cn+i] = c;
}
-
- break;
}
- if(!e.shiftKey){
- this.el.dom.setSelectionRange(pos, pos);
- return;
- }
-
- this.el.dom.selectionStart = curr;
- this.el.dom.selectionEnd = pos;
- },
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
- },
-
- forceKeyDown: true
- });
+ cn += c.colspan;
+ }, this);
+ rn++;
+ }, this);
+
+ // initalize widths.?
+ // either all widths or no widths..
+ if (all_auto) {
+ this.colWidths[0] = false; // no widths flag.
+ }
+
+
+ return ret;
-// if(this.autosave && this.w){
-// this.autoSaveFn = setInterval(this.autosave, 1000);
-// }
},
-
- // private
- onResize : function(w, h)
+
+
+
+
+ mergeRight: function()
{
- Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
- var ew = false;
- var eh = false;
+
+ // get the contents of the next cell along..
+ var tr = this.node.closest('tr');
+ var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+ if (i >= tr.childNodes.length - 1) {
+ return; // no cells on right to merge with.
+ }
+ var table = this.toTableArray();
- if(this.el ){
- if(typeof w == 'number'){
- var aw = w - this.wrap.getFrameWidth('lr');
- this.el.setWidth(this.adjustWidth('textarea', aw));
- ew = aw;
- }
- if(typeof h == 'number'){
- var tbh = 0;
- for (var i =0; i < this.toolbars.length;i++) {
- // fixme - ask toolbars for heights?
- tbh += this.toolbars[i].tb.el.getHeight();
- if (this.toolbars[i].footer) {
- tbh += this.toolbars[i].footer.el.getHeight();
- }
- }
-
-
-
-
- var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
- ah -= 5; // knock a few pixes off for look..
-// Roo.log(ah);
- this.el.setHeight(this.adjustWidth('textarea', ah));
- var eh = ah;
- }
+ if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+ // right cell - must be same rowspan and on the same row.
+ if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+ return; // right hand side is not same rowspan.
}
- Roo.log('onResize:' + [w,h,ew,eh].join(',') );
- this.editorcore.onResize(ew,eh);
- },
+
+
+ this.node.innerHTML += ' ' + rc.cell.innerHTML;
+ tr.removeChild(rc.cell);
+ this.colspan += rc.colspan;
+ this.node.setAttribute('colspan', this.colspan);
- /**
- * Toggles the editor between standard and source edit mode.
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
- */
- toggleSourceEdit : function(sourceEditMode)
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ this.updateWidths(table);
+ },
+
+
+ mergeBelow : function()
{
- this.editorcore.toggleSourceEdit(sourceEditMode);
+ var table = this.toTableArray();
+ if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+ return; // no row below
+ }
+ if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
- if(this.editorcore.sourceEditMode){
- Roo.log('editor - showing textarea');
-
-// Roo.log('in');
-// Roo.log(this.syncValue());
- this.editorcore.syncValue();
- this.el.removeClass('x-hidden');
- this.el.dom.removeAttribute('tabIndex');
- this.el.focus();
- this.el.dom.scrollTop = 0;
-
+ if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+ return; // right hand side is not same rowspan.
+ }
+ this.node.innerHTML = this.node.innerHTML + rc.cell.innerHTML ;
+ rc.cell.parentNode.removeChild(rc.cell);
+ this.rowspan += rc.rowspan;
+ this.node.setAttribute('rowspan', this.rowspan);
+ },
+
+ split: function()
+ {
+ if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+ return;
+ }
+ var table = this.toTableArray();
+ var cd = this.cellData;
+ this.rowspan = 1;
+ this.colspan = 1;
+
+ for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+
- for (var i = 0; i < this.toolbars.length; i++) {
- if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
- this.toolbars[i].tb.hide();
- this.toolbars[i].footer.hide();
+ for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+ if (r == cd.row && c == cd.col) {
+ this.node.removeAttribute('rowspan');
+ this.node.removeAttribute('colspan');
}
+
+ var ntd = this.node.cloneNode(); // which col/row should be 0..
+ ntd.removeAttribute('id');
+ ntd.style.width = this.colWidths[c];
+ ntd.innerHTML = '';
+ table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 };
}
- }else{
- Roo.log('editor - hiding textarea');
-// Roo.log('out')
-// Roo.log(this.pushValue());
- this.editorcore.pushValue();
+ }
+ this.redrawAllCells(table);
+
+ },
+
+
+
+ redrawAllCells: function(table)
+ {
+
+
+ var tab = this.node.closest('tr').closest('table');
+ var ctr = tab.rows[0].parentNode;
+ Array.from(tab.rows).forEach(function(r, ri){
- this.el.addClass('x-hidden');
- this.el.dom.setAttribute('tabIndex', -1);
+ Array.from(r.cells).forEach(function(ce, ci){
+ ce.parentNode.removeChild(ce);
+ });
+ r.parentNode.removeChild(r);
+ });
+ for(var r = 0 ; r < table.length; r++) {
+ var re = tab.rows[r];
- for (var i = 0; i < this.toolbars.length; i++) {
- if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
- this.toolbars[i].tb.show();
- this.toolbars[i].footer.show();
+ var re = tab.ownerDocument.createElement('tr');
+ ctr.appendChild(re);
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
}
+
+ re.appendChild(table[r][c].cell);
+
+ table[r][c].cell = false;
}
-
- //this.deferFocus();
}
- this.setSize(this.wrap.getSize());
- this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
-
- this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
- },
-
- // private (for BoxComponent)
- adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
- // private (for BoxComponent)
- getResizeEl : function(){
- return this.wrap;
- },
-
- // private (for BoxComponent)
- getPositionEl : function(){
- return this.wrap;
- },
-
- // private
- initEvents : function(){
- this.originalValue = this.getValue();
- },
-
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
- */
- markInvalid : Roo.emptyFn,
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
- */
- clearInvalid : Roo.emptyFn,
-
- setValue : function(v){
- Roo.form.HtmlEditor.superclass.setValue.call(this, v);
- this.editorcore.pushValue();
},
-
- /**
- * update the language in the body - really done by core
- * @param {String} language - eg. en / ar / zh-CN etc..
- */
- updateLanguage : function(lang)
+ updateWidths : function(table)
{
- this.language = lang;
- this.editorcore.language = lang;
- this.editorcore.updateLanguage();
-
- },
- // private
- deferFocus : function(){
- this.focus.defer(10, this);
- },
-
- // doc'ed in Field
- focus : function(){
- this.editorcore.focus();
-
+ for(var r = 0 ; r < table.length; r++) {
+
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
+
+ if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ el.width = Math.floor(this.colWidths[c]) +'%';
+ el.updateElement(el.node);
+ }
+ if (this.colWidths[0] != false && table[r][c].colspan > 1) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ var width = 0;
+ for(var i = 0; i < table[r][c].colspan; i ++) {
+ width += Math.floor(this.colWidths[c + i]);
+ }
+ el.width = width +'%';
+ el.updateElement(el.node);
+ }
+ table[r][c].cell = false; // done
+ }
+ }
},
-
-
- // private
- onDestroy : function(){
-
-
+ normalizeWidths : function(table)
+ {
+ if (this.colWidths[0] === false) {
+ var nw = 100.0 / this.colWidths.length;
+ this.colWidths.forEach(function(w,i) {
+ this.colWidths[i] = nw;
+ },this);
+ return;
+ }
+
+ var t = 0, missing = [];
- if(this.rendered){
-
- for (var i =0; i < this.toolbars.length;i++) {
- // fixme - ask toolbars for heights?
- this.toolbars[i].onDestroy();
+ this.colWidths.forEach(function(w,i) {
+ //if you mix % and
+ this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+ var add = this.colWidths[i];
+ if (add > 0) {
+ t+=add;
+ return;
}
+ missing.push(i);
- this.wrap.dom.innerHTML = '';
- this.wrap.remove();
- }
- },
-
- // private
- onFirstFocus : function(){
- //Roo.log("onFirstFocus");
- this.editorcore.onFirstFocus();
- for (var i =0; i < this.toolbars.length;i++) {
- this.toolbars[i].onFirstFocus();
+
+ },this);
+ var nc = this.colWidths.length;
+ if (missing.length) {
+ var mult = (nc - missing.length) / (1.0 * nc);
+ var t = mult * t;
+ var ew = (100 -t) / (1.0 * missing.length);
+ this.colWidths.forEach(function(w,i) {
+ if (w > 0) {
+ this.colWidths[i] = w * mult;
+ return;
+ }
+
+ this.colWidths[i] = ew;
+ }, this);
+ // have to make up numbers..
+
}
+ // now we should have all the widths..
+
},
- // private
- syncValue : function()
+ shrinkColumn : function()
{
- this.editorcore.syncValue();
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 0.8;
+ if (nw < 5) {
+ return;
+ }
+ var otherAdd = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] += otherAdd
+ }, this);
+ this.updateWidths(table);
+
},
-
- pushValue : function()
+ growColumn : function()
{
- this.editorcore.pushValue();
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 1.2;
+ if (nw > 90) {
+ return;
+ }
+ var otherSub = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] -= otherSub
+ }, this);
+ this.updateWidths(table);
+
},
-
- setStylesheets : function(stylesheets)
+ deleteRow : function()
{
- this.editorcore.setStylesheets(stylesheets);
+ // delete this rows 'tr'
+ // if any of the cells in this row have a rowspan > 1 && row!= this row..
+ // then reduce the rowspan.
+ var table = this.toTableArray();
+ // this.cellData.row;
+ for (var i =0;i< table[this.cellData.row].length ; i++) {
+ var c = table[this.cellData.row][i];
+ if (c.row != this.cellData.row) {
+
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ continue;
+ }
+ if (c.rowspan > 1) {
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ }
+ }
+ table.splice(this.cellData.row,1);
+ this.redrawAllCells(table);
+
},
-
- removeStylesheets : function()
+ deleteColumn : function()
{
- this.editorcore.removeStylesheets();
+ var table = this.toTableArray();
+
+ for (var i =0;i< table.length ; i++) {
+ var c = table[i][this.cellData.col];
+ if (c.col != this.cellData.col) {
+ table[i][this.cellData.col].colspan--;
+ } else if (c.colspan > 1) {
+ c.colspan--;
+ c.cell.setAttribute('colspan', c.colspan);
+ }
+ table[i].splice(this.cellData.col,1);
+ }
+
+ this.redrawAllCells(table);
}
-
- // hide stuff that is not compatible
- /**
- * @event blur
- * @hide
- */
- /**
- * @event change
- * @hide
- */
- /**
- * @event focus
- * @hide
- */
- /**
- * @event specialkey
- * @hide
- */
- /**
- * @cfg {String} fieldClass @hide
- */
- /**
- * @cfg {String} focusClass @hide
- */
- /**
- * @cfg {String} autoCreate @hide
- */
- /**
- * @cfg {String} inputType @hide
- */
- /**
- * @cfg {String} invalidClass @hide
- */
- /**
- * @cfg {String} invalidText @hide
- */
- /**
- * @cfg {String} msgFx @hide
- */
- /**
- * @cfg {String} validateOnBlur @hide
- */
-});
-
- /*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
-
- */
+
+
+
+})
-/**
- * @class Roo.form.HtmlEditor.ToolbarStandard
- * Basic Toolbar
+//<script type="text/javascript">
- * Usage:
+/*
+ * Based Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * LGPL
*
- new Roo.form.HtmlEditor({
- ....
- toolbars : [
- new Roo.form.HtmlEditorToolbar1({
- disable : { fonts: 1 , format: 1, ..., ... , ...],
- btns : [ .... ]
- })
- }
-
- *
- * @cfg {Object} disable List of elements to disable..
- * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
- *
- *
- * NEEDS Extra CSS?
- * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
*/
-Roo.form.HtmlEditor.ToolbarStandard = function(config)
-{
+/**
+ * @class Roo.HtmlEditorCore
+ * @extends Roo.Component
+ * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
+ *
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+
+Roo.HtmlEditorCore = function(config){
- Roo.apply(this, config);
- // default disabled, based on 'good practice'..
- this.disable = this.disable || {};
- Roo.applyIf(this.disable, {
- fontSize : true,
- colors : true,
- specialElements : true
+ Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+
+
+ this.addEvents({
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {Roo.HtmlEditorCore} this
+ */
+ initialize: true,
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {Roo.HtmlEditorCore} this
+ */
+ activate: true,
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ beforesync: true,
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ beforepush: true,
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ sync: true,
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {Roo.HtmlEditorCore} this
+ * @param {String} html
+ */
+ push: true,
+
+ /**
+ * @event editorevent
+ * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+ * @param {Roo.HtmlEditorCore} this
+ */
+ editorevent: true
+
+
});
+ // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
- //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
- // dont call parent... till later.
-}
-
-Roo.form.HtmlEditor.ToolbarStandard.prototype = {
+ // defaults : white / black...
+ this.applyBlacklists();
- tb: false,
- rendered: false,
- editor : false,
- editorcore : false,
- /**
- * @cfg {Object} disable List of toolbar elements to disable
-
+};
+
+
+Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
+
+
+ /**
+ * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
*/
- disable : false,
+ owner : false,
/**
- * @cfg {String} createLinkText The default text for the create link prompt
+ * @cfg {String} css styling for resizing. (used on bootstrap only)
*/
- createLinkText : 'Please enter the URL for the link:',
- /**
- * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ resize : false,
+ /**
+ * @cfg {Number} height (in pixels)
+ */
+ height: 300,
+ /**
+ * @cfg {Number} width (in pixels)
+ */
+ width: 500,
+ /**
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
*/
- defaultLinkValue : 'http:/'+'/',
-
+ autoClean: true,
- /**
- * @cfg {Array} fontFamilies An array of available font families
+ /**
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
*/
- fontFamilies : [
- 'Arial',
- 'Courier New',
- 'Tahoma',
- 'Times New Roman',
- 'Verdana'
- ],
-
- specialChars : [
- "©",
- "®",
- "™",
- "£" ,
- // "—",
- "…",
- "÷" ,
- // "á" , ?? a acute?
- "€" , //Euro
- // "“" ,
- // "”" ,
- // "•" ,
- "°" // , // degrees
-
- // "é" , // e ecute
- // "ú" , // u ecute?
- ],
-
- specialElements : [
- {
- text: "Insert Table",
- xtype: 'MenuItem',
- xns : Roo.Menu,
- ihtml : '<table><tr><td>Cell</td></tr></table>'
-
- },
- {
- text: "Insert Image",
- xtype: 'MenuItem',
- xns : Roo.Menu,
- ihtml : '<img src="about:blank"/>'
-
- }
-
-
- ],
-
-
- inputElements : [
- "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
- "input:submit", "input:button", "select", "textarea", "label" ],
- formats : [
- ["p"] ,
- ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
- ["pre"],[ "code"],
- ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
- ['div'],['span'],
- ['sup'],['sub']
- ],
-
- cleanStyles : [
- "font-size"
- ],
+ enableBlocks : true,
+ /**
+ * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+ *
+ */
+ stylesheets: false,
/**
- * @cfg {String} defaultFont default font to use.
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
*/
- defaultFont: 'tahoma',
-
- fontSelect : false,
+ language: 'en',
+ /**
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source
+ * - by default they are stripped - if you are editing email you may need this.
+ */
+ allowComments: false,
+ // id of frame..
+ frameId: false,
- formatCombo : false,
+ // private properties
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
+ sourceEditMode : false,
+ onFocus : Roo.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
- init : function(editor)
- {
- this.editor = editor;
- this.editorcore = editor.editorcore ? editor.editorcore : editor;
- var editorcore = this.editorcore;
+ clearUp: true,
+
+ // blacklist + whitelisted elements..
+ black: false,
+ white: false,
+
+ bodyCls : '',
+
+
+ undoManager : false,
+ /**
+ * Protected method that will not generally be called directly. It
+ * is called when the editor initializes the iframe with HTML contents. Override this method if you
+ * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+ */
+ getDocMarkup : function(){
+ // body styles..
+ var st = '';
+
+ // inherit styels from page...??
+ if (this.stylesheets === false) {
+
+ Roo.get(document.head).select('style').each(function(node) {
+ st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ });
+
+ Roo.get(document.head).select('link').each(function(node) {
+ st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+ });
+
+ } else if (!this.stylesheets.length) {
+ // simple..
+ st = '<style type="text/css">' +
+ 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+ '</style>';
+ } else {
+ for (var i in this.stylesheets) {
+ if (typeof(this.stylesheets[i]) != 'string') {
+ continue;
+ }
+ st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
+ }
+
+ }
+
+ st += '<style type="text/css">' +
+ 'IMG { cursor: pointer } ' +
+ '</style>';
+
+ st += '<meta name="google" content="notranslate">';
+
+ var cls = 'notranslate roo-htmleditor-body';
+
+ if(this.bodyCls.length){
+ cls += ' ' + this.bodyCls;
+ }
+ return '<html class="notranslate" translate="no"><head>' + st +
+ //<style type="text/css">' +
+ //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+ //'</style>' +
+ ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
+ },
+
+ // private
+ onRender : function(ct, position)
+ {
var _t = this;
+ //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
+ this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
- var fid = editorcore.frameId;
- var etb = this;
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: _t, // was editor...
- handler:handler||_t.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
+
+ this.el.dom.style.border = '0 none';
+ this.el.dom.setAttribute('tabIndex', -1);
+ this.el.addClass('x-hidden hide');
+
+
+
+ if(Roo.isIE){ // fix IE 1px bogus margin
+ this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
+ }
+
+
+ this.frameId = Roo.id();
+
+ var ifcfg = {
+ tag: 'iframe',
+ cls: 'form-control', // bootstrap..
+ id: this.frameId,
+ name: this.frameId,
+ frameBorder : 'no',
+ 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
+ };
+ if (this.resize) {
+ ifcfg.style = { resize : this.resize };
}
+ var iframe = this.owner.wrap.createChild(ifcfg, this.el);
- var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
- this.tb = tb;
- // stop form submits
- tb.el.on('click', function(e){
- e.preventDefault(); // what does this do?
- });
+ this.iframe = iframe.dom;
- if(!this.disable.font) { // && !Roo.isSafari){
- /* why no safari for fonts
- editor.fontSelect = tb.el.createChild({
- tag:'select',
- tabIndex: -1,
- cls:'x-font-select',
- html: this.createFontOptions()
- });
-
- editor.fontSelect.on('change', function(){
- var font = editor.fontSelect.dom.value;
- editor.relayCmd('fontname', font);
- editor.deferFocus();
- }, editor);
-
- tb.add(
- editor.fontSelect.dom,
- '-'
- );
- */
-
- };
- if(!this.disable.formats){
- this.formatCombo = new Roo.form.ComboBox({
- store: new Roo.data.SimpleStore({
- id : 'tag',
- fields: ['tag'],
- data : this.formats // from states.js
- }),
- blockFocus : true,
- name : '',
- //autoCreate : {tag: "div", size: "20"},
- displayField:'tag',
- typeAhead: false,
- mode: 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Add tag',
- selectOnFocus:true,
- width:135,
- listeners : {
- 'select': function(c, r, i) {
- editorcore.insertTag(r.get('tag'));
- editor.focus();
+ this.assignDocWin();
+
+ this.doc.designMode = 'on';
+
+ this.doc.open();
+ this.doc.write(this.getDocMarkup());
+ this.doc.close();
+
+
+ var task = { // must defer to wait for browser to be ready
+ run : function(){
+ //console.log("run task?" + this.doc.readyState);
+ this.assignDocWin();
+ if(this.doc.body || this.doc.readyState == 'complete'){
+ try {
+ this.doc.designMode="on";
+
+ } catch (e) {
+ return;
}
+ Roo.TaskMgr.stop(task);
+ this.initEditor.defer(10, this);
}
+ },
+ interval : 10,
+ duration: 10000,
+ scope: this
+ };
+ Roo.TaskMgr.start(task);
- });
- tb.addField(this.formatCombo);
+ },
+
+ // private
+ onResize : function(w, h)
+ {
+ Roo.log('resize: ' +w + ',' + h );
+ //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
+ if(!this.iframe){
+ return;
+ }
+ if(typeof w == 'number'){
+ this.iframe.style.width = w + 'px';
+ }
+ if(typeof h == 'number'){
+
+ this.iframe.style.height = h + 'px';
+ if(this.doc){
+ (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
+ }
}
- if(!this.disable.format){
- tb.add(
- btn('bold'),
- btn('italic'),
- btn('underline'),
- btn('strikethrough')
- );
- };
- if(!this.disable.fontSize){
- tb.add(
- '-',
-
-
- btn('increasefontsize', false, editorcore.adjustFont),
- btn('decreasefontsize', false, editorcore.adjustFont)
- );
- };
-
+ },
+
+ /**
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+ */
+ toggleSourceEdit : function(sourceEditMode){
- if(!this.disable.colors){
- tb.add(
- '-', {
- id:editorcore.frameId +'-forecolor',
- cls:'x-btn-icon x-edit-forecolor',
- clickEvent:'mousedown',
- tooltip: this.buttonTips['forecolor'] || undefined,
- tabIndex:-1,
- menu : new Roo.menu.ColorMenu({
- allowReselect: true,
- focus: Roo.emptyFn,
- value:'000000',
- plain:true,
- selectHandler: function(cp, color){
- editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- },
- scope: editorcore,
- clickEvent:'mousedown'
- })
- }, {
- id:editorcore.frameId +'backcolor',
- cls:'x-btn-icon x-edit-backcolor',
- clickEvent:'mousedown',
- tooltip: this.buttonTips['backcolor'] || undefined,
- tabIndex:-1,
- menu : new Roo.menu.ColorMenu({
- focus: Roo.emptyFn,
- value:'FFFFFF',
- plain:true,
- allowReselect: true,
- selectHandler: function(cp, color){
- if(Roo.isGecko){
- editorcore.execCmd('useCSS', false);
- editorcore.execCmd('hilitecolor', color);
- editorcore.execCmd('useCSS', true);
- editor.deferFocus();
- }else{
- editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
- Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- }
- },
- scope:editorcore,
- clickEvent:'mousedown'
- })
- }
- );
- };
- // now add all the items...
+ this.sourceEditMode = sourceEditMode === true;
+ if(this.sourceEditMode){
+
+ Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']); //FIXME - what's the BS styles for these
+
+ }else{
+ Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
+ //this.iframe.className = '';
+ this.deferFocus();
+ }
+ //this.setSize(this.owner.wrap.getSize());
+ //this.fireEvent('editmodechange', this, this.sourceEditMode);
+ },
- if(!this.disable.alignments){
- tb.add(
- '-',
- btn('justifyleft'),
- btn('justifycenter'),
- btn('justifyright')
- );
- };
+
+
- //if(!Roo.isSafari){
- if(!this.disable.links){
- tb.add(
- '-',
- btn('createlink', false, this.createLink) /// MOVE TO HERE?!!?!?!?!
- );
- };
+ /**
+ * Protected method that will not generally be called directly. If you need/want
+ * custom HTML cleanup, this is the method you should override.
+ * @param {String} html The HTML to be cleaned
+ * return {String} The cleaned HTML
+ */
+ cleanHtml : function(html)
+ {
+ html = String(html);
+ if(html.length > 5){
+ if(Roo.isSafari){ // strip safari nonsense
+ html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+ }
+ }
+ if(html == ' '){
+ html = '';
+ }
+ return html;
+ },
- if(!this.disable.lists){
- tb.add(
- '-',
- btn('insertorderedlist'),
- btn('insertunorderedlist')
- );
+ /**
+ * HTML Editor -> Textarea
+ * Protected method that will not generally be called directly. Syncs the contents
+ * of the editor iframe with the textarea.
+ */
+ syncValue : function()
+ {
+ //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
+ if(this.initialized){
+
+ if (this.undoManager) {
+ this.undoManager.addEvent();
}
- if(!this.disable.sourceEdit){
- tb.add(
- '-',
- btn('sourceedit', true, function(btn){
- this.toggleSourceEdit(btn.pressed);
- })
- );
+
+
+ var bd = (this.doc.body || this.doc.documentElement);
+
+
+ var sel = this.win.getSelection();
+
+ var div = document.createElement('div');
+ div.innerHTML = bd.innerHTML;
+ var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
+ if (gtx.length > 0) {
+ var rm = gtx.item(0).parentNode;
+ rm.parentNode.removeChild(rm);
}
- //}
-
- var smenu = { };
- // special menu.. - needs to be tidied up..
- if (!this.disable.special) {
- smenu = {
- text: "©",
- cls: 'x-edit-none',
+
+
+ if (this.enableBlocks) {
+ new Roo.htmleditor.FilterBlock({ node : div });
+ }
+
+ var html = div.innerHTML;
+
+ //?? tidy?
+ if (this.autoClean) {
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.specialChars.length; i++) {
- smenu.menu.items.push({
-
- html: this.specialChars[i],
- handler: function(a,b) {
- editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
- //editor.insertAtCursor(a.html);
-
- },
- tabIndex:-1
+ new Roo.htmleditor.FilterAttributes({
+ node : div,
+ attrib_white : [
+ 'href',
+ 'src',
+ 'name',
+ 'align',
+ 'colspan',
+ 'rowspan',
+ 'data-display',
+ 'data-caption-display',
+ 'data-width',
+ 'data-caption',
+ 'start' ,
+ 'style',
+ // youtube embed.
+ 'class',
+ 'allowfullscreen',
+ 'frameborder',
+ 'width',
+ 'height',
+ 'alt'
+ ],
+ attrib_clean : ['href', 'src' ]
+ });
+
+ var tidy = new Roo.htmleditor.TidySerializer({
+ inner: true
});
+ html = tidy.serialize(div);
+
+ }
+
+
+ if(Roo.isSafari){
+ var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+ var m = bs ? bs.match(/text-align:(.*?);/i) : false;
+ if(m && m[1]){
+ html = '<div style="'+m[0]+'">' + html + '</div>';
+ }
+ }
+ html = this.cleanHtml(html);
+ // fix up the special chars.. normaly like back quotes in word...
+ // however we do not want to do this with chinese..
+ html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+
+ var cc = match.charCodeAt();
+
+ // Get the character value, handling surrogate pairs
+ if (match.length == 2) {
+ // It's a surrogate pair, calculate the Unicode code point
+ var high = match.charCodeAt(0) - 0xD800;
+ var low = match.charCodeAt(1) - 0xDC00;
+ cc = (high * 0x400) + low + 0x10000;
+ } else if (
+ (cc >= 0x4E00 && cc < 0xA000 ) ||
+ (cc >= 0x3400 && cc < 0x4E00 ) ||
+ (cc >= 0xf900 && cc < 0xfb00 )
+ ) {
+ return match;
+ }
+
+ // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+ return "&#" + cc + ";";
+
+
+ });
+
+
+
+ if(this.owner.fireEvent('beforesync', this, html) !== false){
+ this.el.dom.value = html;
+ this.owner.fireEvent('sync', this, html);
+ }
+ }
+ },
+
+ /**
+ * TEXTAREA -> EDITABLE
+ * Protected method that will not generally be called directly. Pushes the value of the textarea
+ * into the iframe editor.
+ */
+ pushValue : function()
+ {
+ //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
+ if(this.initialized){
+ var v = this.el.dom.value.trim();
+
+
+ if(this.owner.fireEvent('beforepush', this, v) !== false){
+ var d = (this.doc.body || this.doc.documentElement);
+ d.innerHTML = v;
+
+ this.el.dom.value = d.innerHTML;
+ this.owner.fireEvent('push', this, v);
+ }
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
+ new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
+ }
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
}
+ this.updateLanguage();
- tb.add(smenu);
+ var lc = this.doc.body.lastChild;
+ if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
+ // add an extra line at the end.
+ this.doc.body.appendChild(this.doc.createElement('br'));
+ }
}
+ },
+
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
+ },
+
+ // doc'ed in Field
+ focus : function(){
+ if(this.win && !this.sourceEditMode){
+ this.win.focus();
+ }else{
+ this.el.focus();
+ }
+ },
+
+ assignDocWin: function()
+ {
+ var iframe = this.iframe;
- var cmenu = { };
- if (!this.disable.cleanStyles) {
- cmenu = {
- cls: 'x-btn-icon x-btn-clear',
-
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.cleanStyles.length; i++) {
- cmenu.menu.items.push({
- actiontype : this.cleanStyles[i],
- html: 'Remove ' + this.cleanStyles[i],
- handler: function(a,b) {
-// Roo.log(a);
-// Roo.log(b);
- var c = Roo.get(editorcore.doc.body);
- c.select('[style]').each(function(s) {
- s.dom.style.removeProperty(a.actiontype);
- });
- editorcore.syncValue();
- },
- tabIndex:-1
- });
+ if(Roo.isIE){
+ this.doc = iframe.contentWindow.document;
+ this.win = iframe.contentWindow;
+ } else {
+// if (!Roo.get(this.frameId)) {
+// return;
+// }
+// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+// this.win = Roo.get(this.frameId).dom.contentWindow;
+
+ if (!Roo.get(this.frameId) && !iframe.contentDocument) {
+ return;
}
- cmenu.menu.items.push({
- actiontype : 'tablewidths',
- html: 'Remove Table Widths',
- handler: function(a,b) {
- editorcore.cleanTableWidths();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
- cmenu.menu.items.push({
- actiontype : 'word',
- html: 'Remove MS Word Formating',
- handler: function(a,b) {
- editorcore.cleanWord();
- editorcore.syncValue();
- },
- tabIndex:-1
- });
- cmenu.menu.items.push({
- actiontype : 'all',
- html: 'Remove All Styles',
- handler: function(a,b) {
-
- var c = Roo.get(editorcore.doc.body);
- c.select('[style]').each(function(s) {
- s.dom.removeAttribute('style');
- });
- editorcore.syncValue();
- },
- tabIndex:-1
- });
+ this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+ this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
+ }
+ },
+
+ // private
+ initEditor : function(){
+ //console.log("INIT EDITOR");
+ this.assignDocWin();
+
+
+
+ this.doc.designMode="on";
+ this.doc.open();
+ this.doc.write(this.getDocMarkup());
+ this.doc.close();
+
+ var dbody = (this.doc.body || this.doc.documentElement);
+ //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
+ // this copies styles from the containing element into thsi one..
+ // not sure why we need all of this..
+ //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+
+ //var ss = this.el.getStyles( 'background-image', 'background-repeat');
+ //ss['background-attachment'] = 'fixed'; // w3c
+ dbody.bgProperties = 'fixed'; // ie
+ dbody.setAttribute("translate", "no");
+
+ //Roo.DomHelper.applyStyles(dbody, ss);
+ Roo.EventManager.on(this.doc, {
+
+ 'mouseup': this.onEditorEvent,
+ 'dblclick': this.onEditorEvent,
+ 'click': this.onEditorEvent,
+ 'keyup': this.onEditorEvent,
- cmenu.menu.items.push({
- actiontype : 'all',
- html: 'Remove All CSS Classes',
- handler: function(a,b) {
+ buffer:100,
+ scope: this
+ });
+ Roo.EventManager.on(this.doc, {
+ 'paste': this.onPasteEvent,
+ scope : this
+ });
+ if(Roo.isGecko){
+ Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
+ }
+ //??? needed???
+ if(Roo.isIE || Roo.isSafari || Roo.isOpera){
+ Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
+ }
+ this.initialized = true;
+
+
+ // initialize special key events - enter
+ new Roo.htmleditor.KeyEnter({core : this});
+
+
+
+ this.owner.fireEvent('initialize', this);
+ this.pushValue();
+ },
+ // this is to prevent a href clicks resulting in a redirect?
+
+ onPasteEvent : function(e,v)
+ {
+ // I think we better assume paste is going to be a dirty load of rubish from word..
+
+ // even pasting into a 'email version' of this widget will have to clean up that mess.
+ var cd = (e.browserEvent.clipboardData || window.clipboardData);
+
+ // check what type of paste - if it's an image, then handle it differently.
+ if (cd.files && cd.files.length > 0 && cd.types.indexOf('text/html') < 0) {
+ // pasting images?
+ var urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+ var r = new FileReader();
+ var t = this;
+ r.addEventListener('load',function()
+ {
+
+ var d = (new DOMParser().parseFromString('<img src="' + r.result+ '">', 'text/html')).body;
+ // is insert asycn?
+ if (t.enableBlocks) {
- var c = Roo.get(editorcore.doc.body);
- c.select('[class]').each(function(s) {
- s.dom.removeAttribute('class');
+ Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+ if (img.closest('figure')) { // assume!! that it's aready
+ return;
+ }
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : img.src
+ });
+ fig.updateElement(img); // replace it..
+
});
- editorcore.cleanWord();
- editorcore.syncValue();
- },
- tabIndex:-1
+ }
+ t.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ t.owner.fireEvent('paste', this);
});
+ r.readAsDataURL(cd.files[0]);
- cmenu.menu.items.push({
- actiontype : 'tidy',
- html: 'Tidy HTML Source',
- handler: function(a,b) {
- new Roo.htmleditor.Tidy(editorcore.doc.body);
- editorcore.syncValue();
- },
- tabIndex:-1
+ e.preventDefault();
+
+ return false;
+ }
+ if (cd.types.indexOf('text/html') < 0 ) {
+ return false;
+ }
+ var images = [];
+ var html = cd.getData('text/html'); // clipboard event
+ if (cd.types.indexOf('text/rtf') > -1) {
+ var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
+ images = parser.doc ? parser.doc.getElementsByType('pict') : [];
+ }
+ // Roo.log(images);
+ // Roo.log(imgs);
+ // fixme..
+ images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
+ .map(function(g) { return g.toDataURL(); })
+ .filter(function(g) { return g != 'about:blank'; });
+
+ //Roo.log(html);
+ html = this.cleanWordChars(html);
+
+ var d = (new DOMParser().parseFromString(html, 'text/html')).body;
+
+
+ var sn = this.getParentElement();
+ // check if d contains a table, and prevent nesting??
+ //Roo.log(d.getElementsByTagName('table'));
+ //Roo.log(sn);
+ //Roo.log(sn.closest('table'));
+ if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
+ e.preventDefault();
+ this.insertAtCursor("You can not nest tables");
+ //Roo.log("prevent?"); // fixme -
+ return false;
+ }
+
+
+
+ if (images.length > 0) {
+ // replace all v:imagedata - with img.
+ var ar = Array.from(d.getElementsByTagName('v:imagedata'));
+ Roo.each(ar, function(node) {
+ node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
+ node.parentNode.removeChild(node);
});
- tb.add(cmenu);
+ Roo.each(d.getElementsByTagName('img'), function(img, i) {
+ img.setAttribute('src', images[i]);
+ });
}
-
- if (!this.disable.specialElements) {
- var semenu = {
- text: "Other;",
- cls: 'x-edit-none',
- menu : {
- items : []
- }
- };
- for (var i =0; i < this.specialElements.length; i++) {
- semenu.menu.items.push(
- Roo.apply({
- handler: function(a,b) {
- editor.insertAtCursor(this.ihtml);
- }
- }, this.specialElements[i])
- );
-
- }
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterWord({ node : d });
- tb.add(semenu);
+ new Roo.htmleditor.FilterStyleToTag({ node : d });
+ new Roo.htmleditor.FilterAttributes({
+ node : d,
+ attrib_white : [
+ 'href',
+ 'src',
+ 'name',
+ 'align',
+ 'colspan',
+ 'rowspan'
+ /* THESE ARE NOT ALLWOED FOR PASTE
+ * 'data-display',
+ 'data-caption-display',
+ 'data-width',
+ 'data-caption',
+ 'start' ,
+ 'style',
+ // youtube embed.
+ 'class',
+ 'allowfullscreen',
+ 'frameborder',
+ 'width',
+ 'height',
+ 'alt'
+ */
+ ],
+ attrib_clean : ['href', 'src' ]
+ });
+ new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
+ // should be fonts..
+ new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
+ new Roo.htmleditor.FilterParagraph({ node : d });
+ new Roo.htmleditor.FilterHashLink({node : d});
+ new Roo.htmleditor.FilterSpan({ node : d });
+ new Roo.htmleditor.FilterLongBr({ node : d });
+ new Roo.htmleditor.FilterComment({ node : d });
}
-
-
- if (this.btns) {
- for(var i =0; i< this.btns.length;i++) {
- var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
- b.cls = 'x-edit-none';
+ if (this.enableBlocks) {
- if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
- b.cls += ' x-init-enable';
+ Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+ if (img.closest('figure')) { // assume!! that it's aready
+ return;
}
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : img.src
+ });
+ fig.updateElement(img); // replace it..
- b.scope = editorcore;
- tb.add(b);
- }
-
+ });
}
+ this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
+ }
+
- // disable everything...
+ e.preventDefault();
+ this.owner.fireEvent('paste', this);
+ return false;
+ // default behaveiour should be our local cleanup paste? (optional?)
+ // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
+ //this.owner.fireEvent('paste', e, v);
+ },
+ // private
+ onDestroy : function(){
- this.tb.items.each(function(item){
-
- if(
- item.id != editorcore.frameId+ '-sourceedit' &&
- (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
- ){
-
- item.disable();
- }
- });
- this.rendered = true;
- // the all the btns;
- editor.on('editorevent', this.updateToolbar, this);
- // other toolbars need to implement this..
- //editor.on('editmodechange', this.updateToolbar, this);
- },
-
-
- relayBtnCmd : function(btn) {
- this.editorcore.relayCmd(btn.cmd);
- },
- // private used internally
- createLink : function(){
- //Roo.log("create link?");
- var ec = this.editorcore;
- var ar = ec.getAllAncestors();
- var n = false;
- for(var i = 0;i< ar.length;i++) {
- if (ar[i] && ar[i].nodeName == 'A') {
- n = ar[i];
- break;
- }
- }
- (function() {
+ if(this.rendered){
- Roo.MessageBox.show({
- title : "Add / Edit Link URL",
- msg : "Enter the url for the link",
- buttons: Roo.MessageBox.OKCANCEL,
- fn: function(btn, url){
- if (btn != 'ok') {
- return;
- }
- if(url && url != 'http:/'+'/'){
- if (n) {
- n.setAttribute('href', url);
- } else {
- ec.relayCmd('createlink', url);
- }
- }
- },
- minWidth:250,
- prompt:true,
- //multiline: multiline,
- modal : true,
- value : n ? n.getAttribute('href') : ''
- });
+ //for (var i =0; i < this.toolbars.length;i++) {
+ // // fixme - ask toolbars for heights?
+ // this.toolbars[i].onDestroy();
+ // }
-
- }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
-
+ //this.wrap.dom.innerHTML = '';
+ //this.wrap.remove();
+ }
},
+ // private
+ onFirstFocus : function(){
+
+ this.assignDocWin();
+ this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
+
+ this.activated = true;
+
- /**
- * Protected method that will not generally be called directly. It triggers
- * a toolbar update by reading the markup state of the current selection in the editor.
- */
- updateToolbar: function(){
-
- if(!this.editorcore.activated){
- this.editor.onFirstFocus();
- return;
- }
-
- var btns = this.tb.items.map,
- doc = this.editorcore.doc,
- frameId = this.editorcore.frameId;
-
- if(!this.disable.font && !Roo.isSafari){
- /*
- var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
- if(name != this.fontSelect.dom.value){
- this.fontSelect.dom.value = name;
+ if(Roo.isGecko){ // prevent silly gecko errors
+ this.win.focus();
+ var s = this.win.getSelection();
+ if(!s.focusNode || s.focusNode.nodeType != 3){
+ var r = s.getRangeAt(0);
+ r.selectNodeContents((this.doc.body || this.doc.documentElement));
+ r.collapse(true);
+ this.deferFocus();
}
- */
- }
- if(!this.disable.format){
- btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
- btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
- btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
- btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
- }
- if(!this.disable.alignments){
- btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
- btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
- btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
- }
- if(!Roo.isSafari && !this.disable.lists){
- btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
- btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
+ try{
+ this.execCmd('useCSS', true);
+ this.execCmd('styleWithCSS', false);
+ }catch(e){}
}
-
- var ans = this.editorcore.getAllAncestors();
- if (this.formatCombo) {
-
+ this.owner.fireEvent('activate', this);
+ },
+
+ // private
+ adjustFont: function(btn){
+ var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
+ //if(Roo.isSafari){ // safari
+ // adjust *= 2;
+ // }
+ var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
+ if(Roo.isSafari){ // safari
+ var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
+ v = (v < 10) ? 10 : v;
+ v = (v > 48) ? 48 : v;
+ v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
- var store = this.formatCombo.store;
- this.formatCombo.setValue("");
- for (var i =0; i < ans.length;i++) {
- if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
- // select it..
- this.formatCombo.setValue(ans[i].tagName.toLowerCase());
- break;
- }
- }
}
+ v = Math.max(1, v+adjust);
- // hides menus... - so this cant be on a menu...
- Roo.menu.MenuMgr.hideAll();
-
- //this.editorsyncValue();
- },
-
-
- createFontOptions : function(){
- var buf = [], fs = this.fontFamilies, ff, lc;
-
-
-
- for(var i = 0, len = fs.length; i< len; i++){
- ff = fs[i];
- lc = ff.toLowerCase();
- buf.push(
- '<option value="',lc,'" style="font-family:',ff,';"',
- (this.defaultFont == lc ? ' selected="true">' : '>'),
- ff,
- '</option>'
- );
- }
- return buf.join('');
+ this.execCmd('FontSize', v );
},
-
- toggleSourceEdit : function(sourceEditMode){
+
+ onEditorEvent : function(e)
+ {
+
- Roo.log("toolbar toogle");
- if(sourceEditMode === undefined){
- sourceEditMode = !this.sourceEditMode;
- }
- this.sourceEditMode = sourceEditMode === true;
- var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
- // just toggle the button?
- if(btn.pressed !== this.sourceEditMode){
- btn.toggle(this.sourceEditMode);
- return;
+ if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ return; // we do not handle this.. (undo manager does..)
}
+ // clicking a 'block'?
- if(sourceEditMode){
- Roo.log("disabling buttons");
- this.tb.items.each(function(item){
- if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
- item.disable();
- }
- });
-
- }else{
- Roo.log("enabling buttons");
- if(this.editorcore.initialized){
- this.tb.items.each(function(item){
- item.enable();
- });
- // initialize 'blocks'
- Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
- Roo.htmleditor.Block.factory(e).updateElement(e);
- },this);
-
+ // in theory this detects if the last element is not a br, then we try and do that.
+ // its so clicking in space at bottom triggers adding a br and moving the cursor.
+ if (e &&
+ e.target.nodeName == 'BODY' &&
+ e.type == "mouseup" &&
+ this.doc.body.lastChild
+ ) {
+ var lc = this.doc.body.lastChild;
+ // gtx-trans is google translate plugin adding crap.
+ while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
+ lc = lc.previousSibling;
}
+ if (lc.nodeType == 1 && lc.nodeName != 'BR') {
+ // if last element is <BR> - then dont do anything.
+ var ns = this.doc.createElement('br');
+ this.doc.body.appendChild(ns);
+ range = this.doc.createRange();
+ range.setStartAfter(ns);
+ range.collapse(true);
+ var sel = this.win.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
}
- Roo.log("calling toggole on editor");
- // tell the editor that it's been pressed..
- this.editor.toggleSourceEdit(sourceEditMode);
-
- },
- /**
- * Object collection of toolbar tooltips for the buttons in the editor. The key
- * is the command id associated with that button and the value is a valid QuickTips object.
- * For example:
-<pre><code>
-{
- bold : {
- title: 'Bold (Ctrl+B)',
- text: 'Make the selected text bold.',
- cls: 'x-html-editor-tip'
- },
- italic : {
- title: 'Italic (Ctrl+I)',
- text: 'Make the selected text italic.',
- cls: 'x-html-editor-tip'
- },
- ...
-</code></pre>
- * @type Object
- */
- buttonTips : {
- bold : {
- title: 'Bold (Ctrl+B)',
- text: 'Make the selected text bold.',
- cls: 'x-html-editor-tip'
- },
- italic : {
- title: 'Italic (Ctrl+I)',
- text: 'Make the selected text italic.',
- cls: 'x-html-editor-tip'
- },
- underline : {
- title: 'Underline (Ctrl+U)',
- text: 'Underline the selected text.',
- cls: 'x-html-editor-tip'
- },
- strikethrough : {
- title: 'Strikethrough',
- text: 'Strikethrough the selected text.',
- cls: 'x-html-editor-tip'
- },
- increasefontsize : {
- title: 'Grow Text',
- text: 'Increase the font size.',
- cls: 'x-html-editor-tip'
- },
- decreasefontsize : {
- title: 'Shrink Text',
- text: 'Decrease the font size.',
- cls: 'x-html-editor-tip'
- },
- backcolor : {
- title: 'Text Highlight Color',
- text: 'Change the background color of the selected text.',
- cls: 'x-html-editor-tip'
- },
- forecolor : {
- title: 'Font Color',
- text: 'Change the color of the selected text.',
- cls: 'x-html-editor-tip'
- },
- justifyleft : {
- title: 'Align Text Left',
- text: 'Align text to the left.',
- cls: 'x-html-editor-tip'
- },
- justifycenter : {
- title: 'Center Text',
- text: 'Center text in the editor.',
- cls: 'x-html-editor-tip'
- },
- justifyright : {
- title: 'Align Text Right',
- text: 'Align text to the right.',
- cls: 'x-html-editor-tip'
- },
- insertunorderedlist : {
- title: 'Bullet List',
- text: 'Start a bulleted list.',
- cls: 'x-html-editor-tip'
- },
- insertorderedlist : {
- title: 'Numbered List',
- text: 'Start a numbered list.',
- cls: 'x-html-editor-tip'
- },
- createlink : {
- title: 'Hyperlink',
- text: 'Make the selected text a hyperlink.',
- cls: 'x-html-editor-tip'
- },
- sourceedit : {
- title: 'Source Edit',
- text: 'Switch to source editing mode.',
- cls: 'x-html-editor-tip'
- }
- },
- // private
- onDestroy : function(){
- if(this.rendered){
-
- this.tb.items.each(function(item){
- if(item.menu){
- item.menu.removeAll();
- if(item.menu.el){
- item.menu.el.destroy();
- }
- }
- item.destroy();
- });
-
- }
+
+
+
+ this.fireEditorEvent(e);
+ // this.updateToolbar();
+ this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
},
- onFirstFocus: function() {
- this.tb.items.each(function(item){
- item.enable();
- });
- }
-};
-
-
-
-
-// <script type="text/javascript">
-/*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
-
- */
-
-
-/**
- * @class Roo.form.HtmlEditor.ToolbarContext
- * Context Toolbar
- *
- * Usage:
- *
- new Roo.form.HtmlEditor({
- ....
- toolbars : [
- { xtype: 'ToolbarStandard', styles : {} }
- { xtype: 'ToolbarContext', disable : {} }
- ]
-})
-
-
- *
- * @config : {Object} disable List of elements to disable.. (not done yet.)
- * @config : {Object} styles Map of styles available.
- *
- */
-
-Roo.form.HtmlEditor.ToolbarContext = function(config)
-{
- Roo.apply(this, config);
- //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
- // dont call parent... till later.
- this.styles = this.styles || {};
-}
+ fireEditorEvent: function(e)
+ {
+ this.owner.fireEvent('editorevent', this, e);
+ },
-
+ insertTag : function(tg)
+ {
+ // could be a bit smarter... -> wrap the current selected tRoo..
+ if (tg.toLowerCase() == 'span' ||
+ tg.toLowerCase() == 'code' ||
+ tg.toLowerCase() == 'sup' ||
+ tg.toLowerCase() == 'sub'
+ ) {
+
+ range = this.createRange(this.getSelection());
+ var wrappingNode = this.doc.createElement(tg.toLowerCase());
+ wrappingNode.appendChild(range.extractContents());
+ range.insertNode(wrappingNode);
-Roo.form.HtmlEditor.ToolbarContext.types = {
- 'IMG' : [
- {
- name : 'width',
- title: "Width",
- width: 40
- },
- {
- name : 'height',
- title: "Height",
- width: 40
- },
- {
- name : 'align',
- title: "Align",
- opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
- width : 80
+ return;
+
+
- },
- {
- name : 'border',
- title: "Border",
- width: 40
- },
- {
- name : 'alt',
- title: "Alt",
- width: 120
- },
- {
- name : 'src',
- title: "Src",
- width: 220
}
-
- ],
+ this.execCmd("formatblock", tg);
+ this.undoManager.addEvent();
+ },
- 'FIGURE' : [
- {
- name : 'align',
- title: "Align",
- opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
- width : 80
- }
- ],
- 'A' : [
- {
- name : 'name',
- title: "Name",
- width: 50
- },
- {
- name : 'target',
- title: "Target",
- width: 120
- },
- {
- name : 'href',
- title: "Href",
- width: 220
- } // border?
+ insertText : function(txt)
+ {
- ],
-
- 'INPUT' : [
- {
- name : 'name',
- title: "name",
- width: 120
- },
- {
- name : 'value',
- title: "Value",
- width: 120
- },
- {
- name : 'width',
- title: "Width",
- width: 40
- }
- ],
- 'LABEL' : [
- {
- name : 'for',
- title: "For",
- width: 120
- }
- ],
- 'TEXTAREA' : [
- {
- name : 'name',
- title: "name",
- width: 120
- },
- {
- name : 'rows',
- title: "Rows",
- width: 20
- },
- {
- name : 'cols',
- title: "Cols",
- width: 20
- }
- ],
- 'SELECT' : [
- {
- name : 'name',
- title: "name",
- width: 120
- },
- {
- name : 'selectoptions',
- title: "Options",
- width: 200
- }
- ],
+
+ var range = this.createRange();
+ range.deleteContents();
+ //alert(Sender.getAttribute('label'));
+
+ range.insertNode(this.doc.createTextNode(txt));
+ this.undoManager.addEvent();
+ } ,
- // should we really allow this??
- // should this just be
- 'BODY' : [
+
+
+ /**
+ * Executes a Midas editor command on the editor document and performs necessary focus and
+ * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ */
+ relayCmd : function(cmd, value)
+ {
- {
- name : 'title',
- title: "Title",
- width: 200,
- disabled : true
+ switch (cmd) {
+ case 'justifyleft':
+ case 'justifyright':
+ case 'justifycenter':
+ // if we are in a cell, then we will adjust the
+ var n = this.getParentElement();
+ var td = n.closest('td');
+ if (td) {
+ var bl = Roo.htmleditor.Block.factory(td);
+ bl.textAlign = cmd.replace('justify','');
+ bl.updateElement();
+ this.owner.fireEvent('editorevent', this);
+ return;
+ }
+ this.execCmd('styleWithCSS', true); //
+ break;
+ case 'bold':
+ case 'italic':
+ case 'underline':
+ // if there is no selection, then we insert, and set the curson inside it..
+ this.execCmd('styleWithCSS', false);
+ break;
+
+
+ default:
+ break;
}
- ],
-
- '*' : [
- // empty.
- ]
-
-};
-
-// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
-Roo.form.HtmlEditor.ToolbarContext.stores = false;
-
-Roo.form.HtmlEditor.ToolbarContext.options = {
- 'font-family' : [
- [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
- [ 'Courier New', 'Courier New'],
- [ 'Tahoma', 'Tahoma'],
- [ 'Times New Roman,serif', 'Times'],
- [ 'Verdana','Verdana' ]
- ]
-};
-
-// fixme - these need to be configurable..
-
-
-//Roo.form.HtmlEditor.ToolbarContext.types
-
+
+
+ this.win.focus();
+ this.execCmd(cmd, value);
+ this.owner.fireEvent('editorevent', this);
+ //this.updateToolbar();
+ this.owner.deferFocus();
+ },
-Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
-
- tb: false,
-
- rendered: false,
-
- editor : false,
- editorcore : false,
/**
- * @cfg {Object} disable List of toolbar elements to disable
-
+ * Executes a Midas editor command directly on the editor document.
+ * For visual commands, you should use {@link #relayCmd} instead.
+ * <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
*/
- disable : false,
+ execCmd : function(cmd, value){
+ this.doc.execCommand(cmd, false, value === undefined ? null : value);
+ this.syncValue();
+ },
+
+
+
/**
- * @cfg {Object} styles List of styles
- * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
- *
- * These must be defined in the page, so they get rendered correctly..
- * .headline { }
- * TD.underline { }
- *
+ * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+ * to insert tRoo.
+ * @param {String} text | dom node..
*/
- styles : false,
-
- options: false,
-
- toolbars : false,
-
- init : function(editor)
+ insertAtCursor : function(text)
{
- this.editor = editor;
- this.editorcore = editor.editorcore ? editor.editorcore : editor;
- var editorcore = this.editorcore;
- var fid = editorcore.frameId;
- var etb = this;
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: editorcore, // was editor...
- handler:handler||editorcore.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
+ if(!this.activated){
+ return;
}
- // create a new element.
- var wdiv = editor.wrap.createChild({
- tag: 'div'
- }, editor.wrap.dom.firstChild.nextSibling, true);
+
+ if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
+ this.win.focus();
+
+
+ // from jquery ui (MIT licenced)
+ var range, node;
+ var win = this.win;
+
+ if (win.getSelection && win.getSelection().getRangeAt) {
+
+ // delete the existing?
+
+ this.createRange(this.getSelection()).deleteContents();
+ range = win.getSelection().getRangeAt(0);
+ node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
+ range.insertNode(node);
+ range = range.cloneRange();
+ range.collapse(false);
+
+ win.getSelection().removeAllRanges();
+ win.getSelection().addRange(range);
+
+
+
+ } else if (win.document.selection && win.document.selection.createRange) {
+ // no firefox support
+ var txt = typeof(text) == 'string' ? text : text.outerHTML;
+ win.document.selection.createRange().pasteHTML(txt);
+
+ } else {
+ // no firefox support
+ var txt = typeof(text) == 'string' ? text : text.outerHTML;
+ this.execCmd('InsertHTML', txt);
+ }
+ this.syncValue();
+
+ this.deferFocus();
+ }
+ },
+ // private
+ mozKeyPress : function(e){
+ if(e.ctrlKey){
+ var c = e.getCharCode(), cmd;
+
+ if(c > 0){
+ c = String.fromCharCode(c).toLowerCase();
+ switch(c){
+ case 'b':
+ cmd = 'bold';
+ break;
+ case 'i':
+ cmd = 'italic';
+ break;
+
+ case 'u':
+ cmd = 'underline';
+ break;
+
+ //case 'v':
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+
+ }
+ if(cmd){
+
+ this.relayCmd(cmd);
+ //this.win.focus();
+ //this.execCmd(cmd);
+ //this.deferFocus();
+ e.preventDefault();
+ }
+
+ }
+ }
+ },
+
+ // private
+ fixKeys : function(){ // load time branching for fastest keydown performance
- // can we do this more than once??
- // stop form submits
-
-
- // disable everything...
- var ty= Roo.form.HtmlEditor.ToolbarContext.types;
- this.toolbars = {};
- // block toolbars are built in updateToolbar when needed.
- for (var i in ty) {
-
- this.toolbars[i] = this.buildToolbar(ty[i],i);
+ if(Roo.isIE){
+ return function(e){
+ var k = e.getKey(), r;
+ if(k == e.TAB){
+ e.stopEvent();
+ r = this.doc.selection.createRange();
+ if(r){
+ r.collapse(true);
+ r.pasteHTML('    ');
+ this.deferFocus();
+ }
+ return;
+ }
+ /// this is handled by Roo.htmleditor.KeyEnter
+ /*
+ if(k == e.ENTER){
+ r = this.doc.selection.createRange();
+ if(r){
+ var target = r.parentElement();
+ if(!target || target.tagName.toLowerCase() != 'li'){
+ e.stopEvent();
+ r.pasteHTML('<br/>');
+ r.collapse(false);
+ r.select();
+ }
+ }
+ }
+ */
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
+
+
+ };
+ }else if(Roo.isOpera){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.win.focus();
+ this.execCmd('InsertHTML','    ');
+ this.deferFocus();
+ }
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
+
+ };
+ }else if(Roo.isSafari){
+ return function(e){
+ var k = e.getKey();
+
+ if(k == e.TAB){
+ e.stopEvent();
+ this.execCmd('InsertText','\t');
+ this.deferFocus();
+ return;
+ }
+ this.mozKeyPress(e);
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ // }
+
+ };
+ }
+ }(),
+
+ getAllAncestors: function()
+ {
+ var p = this.getSelectedNode();
+ var a = [];
+ if (!p) {
+ a.push(p); // push blank onto stack..
+ p = this.getParentElement();
}
- this.tb = this.toolbars.BODY;
- this.tb.el.show();
- this.buildFooter();
- this.footer.show();
- editor.on('hide', function( ) { this.footer.hide() }, this);
- editor.on('show', function( ) { this.footer.show() }, this);
-
- this.rendered = true;
- // the all the btns;
- editor.on('editorevent', this.updateToolbar, this);
- // other toolbars need to implement this..
- //editor.on('editmodechange', this.updateToolbar, this);
+ while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
+ a.push(p);
+ p = p.parentNode;
+ }
+ a.push(this.doc.body);
+ return a;
},
+ lastSel : false,
+ lastSelNode : false,
-
+ getSelection : function()
+ {
+ this.assignDocWin();
+ return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
+ },
/**
- * Protected method that will not generally be called directly. It triggers
- * a toolbar update by reading the markup state of the current selection in the editor.
- *
- * Note you can force an update by calling on('editorevent', scope, false)
+ * Select a dom node
+ * @param {DomElement} node the node to select
*/
- updateToolbar: function(editor ,ev, sel)
+ selectNode : function(node, collapse)
{
-
- if (ev) {
- ev.stopEvent(); // se if we can stop this looping with mutiple events.
- }
-
- //Roo.log(ev);
- // capture mouse up - this is handy for selecting images..
- // perhaps should go somewhere else...
- if(!this.editorcore.activated){
- this.editor.onFirstFocus();
- return;
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
}
- //Roo.log(ev ? ev.target : 'NOTARGET');
-
-
- // http://developer.yahoo.com/yui/docs/simple-editor.js.html
- // selectNode - might want to handle IE?
-
-
-
- if (ev &&
- (ev.type == 'mouseup' || ev.type == 'click' ) &&
- ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
- // they have click on an image...
- // let's see if we can change the selection...
- sel = ev.target;
-
- // this triggers looping?
- //this.editorcore.selectNode(sel);
-
+ if (collapse === true) {
+ nodeRange.collapse(true);
}
+ //
+ var s = this.win.getSelection();
+ s.removeAllRanges();
+ s.addRange(nodeRange);
+ },
+
+ getSelectedNode: function()
+ {
+ // this may only work on Gecko!!!
- // this forces an id..
- Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
- e.classList.remove('roo-ed-selection');
- });
- //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
- //Roo.get(node).addClass('roo-ed-selection');
-
- //var updateFooter = sel ? false : true;
-
-
- var ans = this.editorcore.getAllAncestors();
+ // should we cache this!!!!
- // pick
- var ty = Roo.form.HtmlEditor.ToolbarContext.types;
+
+
+ var range = this.createRange(this.getSelection()).cloneRange();
- if (!sel) {
- sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
- sel = sel ? sel : this.editorcore.doc.body;
- sel = sel.tagName.length ? sel : this.editorcore.doc.body;
-
+ if (Roo.isIE) {
+ var parent = range.parentElement();
+ while (true) {
+ var testRange = range.duplicate();
+ testRange.moveToElementText(parent);
+ if (testRange.inRange(range)) {
+ break;
+ }
+ if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
+ break;
+ }
+ parent = parent.parentElement;
+ }
+ return parent;
}
- var tn = sel.tagName.toUpperCase();
- var lastSel = this.tb.selectedNode;
- this.tb.selectedNode = sel;
- var left_label = tn;
-
- // ok see if we are editing a block?
-
- var db = false;
- // you are not actually selecting the block.
- if (sel && sel.hasAttribute('data-block')) {
- db = sel;
- } else if (sel && sel.closest('[data-block]')) {
-
- db = sel.closest('[data-block]');
- //var cepar = sel.closest('[contenteditable=true]');
- //if (db && cepar && cepar.tagName != 'BODY') {
- // db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
- //}
+ // is ancestor a text element.
+ var ac = range.commonAncestorContainer;
+ if (ac.nodeType == 3) {
+ ac = ac.parentNode;
}
-
- var block = false;
- //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
- if (db && this.editorcore.enableBlocks) {
- block = Roo.htmleditor.Block.factory(db);
+ var ar = ac.childNodes;
+
+ var nodes = [];
+ var other_nodes = [];
+ var has_other_nodes = false;
+ for (var i=0;i<ar.length;i++) {
+ if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
+ continue;
+ }
+ // fullly contained node.
+ if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
+ nodes.push(ar[i]);
+ continue;
+ }
- if (block) {
- db.className = (
- db.classList.length > 0 ? db.className + ' ' : ''
- ) + 'roo-ed-selection';
-
- // since we removed it earlier... its not there..
- tn = 'BLOCK.' + db.getAttribute('data-block');
-
- //this.editorcore.selectNode(db);
- if (typeof(this.toolbars[tn]) == 'undefined') {
- this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
- }
- this.toolbars[tn].selectedNode = db;
- left_label = block.friendly_name;
- ans = this.editorcore.getAllAncestors();
+ // probably selected..
+ if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
+ other_nodes.push(ar[i]);
+ continue;
+ }
+ // outer..
+ if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
+ continue;
}
-
+ has_other_nodes = true;
}
-
-
- if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
- return; // no change?
+ if (!nodes.length && other_nodes.length) {
+ nodes= other_nodes;
+ }
+ if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
+ return false;
}
+ return nodes[0];
+ },
+
+
+ createRange: function(sel)
+ {
+ // this has strange effects when using with
+ // top toolbar - not sure if it's a great idea.
+ //this.editor.contentWindow.focus();
+ if (typeof sel != "undefined") {
+ try {
+ return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
+ } catch(e) {
+ return this.doc.createRange();
+ }
+ } else {
+ return this.doc.createRange();
+ }
+ },
+ getParentElement: function()
+ {
-
- this.tb.el.hide();
- ///console.log("show: " + tn);
- this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
-
- this.tb.el.show();
- // update name
- this.tb.items.first().el.innerHTML = left_label + ': ';
+ this.assignDocWin();
+ var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
+ var range = this.createRange(sel);
+
+ try {
+ var p = range.commonAncestorContainer;
+ while (p.nodeType == 3) { // text node
+ p = p.parentNode;
+ }
+ return p;
+ } catch (e) {
+ return null;
+ }
+
+ },
+ /***
+ *
+ * Range intersection.. the hard stuff...
+ * '-1' = before
+ * '0' = hits..
+ * '1' = after.
+ * [ -- selected range --- ]
+ * [fail] [fail]
+ *
+ * basically..
+ * if end is before start or hits it. fail.
+ * if start is after end or hits it fail.
+ *
+ * if either hits (but other is outside. - then it's not
+ *
+ *
+ **/
+
+
+ // @see http://www.thismuchiknow.co.uk/?p=64.
+ rangeIntersectsNode : function(range, node)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
+ }
+
+ var rangeStartRange = range.cloneRange();
+ rangeStartRange.collapse(true);
+
+ var rangeEndRange = range.cloneRange();
+ rangeEndRange.collapse(false);
+
+ var nodeStartRange = nodeRange.cloneRange();
+ nodeStartRange.collapse(true);
+
+ var nodeEndRange = nodeRange.cloneRange();
+ nodeEndRange.collapse(false);
+
+ return rangeStartRange.compareBoundaryPoints(
+ Range.START_TO_START, nodeEndRange) == -1 &&
+ rangeEndRange.compareBoundaryPoints(
+ Range.START_TO_START, nodeStartRange) == 1;
- // update attributes
- if (block && this.tb.fields) {
-
- this.tb.fields.each(function(e) {
- e.setValue(block[e.name]);
- });
-
-
- } else if (this.tb.fields && this.tb.selectedNode) {
- this.tb.fields.each( function(e) {
- if (e.stylename) {
- e.setValue(this.tb.selectedNode.style[e.stylename]);
- return;
- }
- e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
- }, this);
- this.updateToolbarStyles(this.tb.selectedNode);
+
+ },
+ rangeCompareNode : function(range, node)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
}
-
- Roo.menu.MenuMgr.hideAll();
-
+ range.collapse(true);
+
+ nodeRange.collapse(true);
+
+ var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
+ var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
+
+ //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
+ var nodeIsBefore = ss == 1;
+ var nodeIsAfter = ee == -1;
-
- // update the footer
- //
- this.updateFooter(ans);
-
- },
-
- updateToolbarStyles : function(sel)
- {
- var hasStyles = false;
- for(var i in this.styles) {
- hasStyles = true;
- break;
+ if (nodeIsBefore && nodeIsAfter) {
+ return 0; // outer
+ }
+ if (!nodeIsBefore && nodeIsAfter) {
+ return 1; //right trailed.
}
- // update styles
- if (hasStyles && this.tb.hasStyles) {
- var st = this.tb.fields.item(0);
-
- st.store.removeAll();
- var cn = sel.className.split(/\s+/);
-
- var avs = [];
- if (this.styles['*']) {
-
- Roo.each(this.styles['*'], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
- if (this.styles[tn]) {
- Roo.each(this.styles[tn], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
-
- st.store.loadData(avs);
- st.collapse();
- st.setValue(cn);
+ if (nodeIsBefore && !nodeIsAfter) {
+ return 2; // left trailed.
}
+ // fully contined.
+ return 3;
},
-
-
- updateFooter : function(ans)
- {
- var html = '';
- if (ans === false) {
- this.footDisp.dom.innerHTML = '';
- return;
- }
+
+ cleanWordChars : function(input) {// change the chars to hex code
- this.footerEls = ans.reverse();
- Roo.each(this.footerEls, function(a,i) {
- if (!a) { return; }
- html += html.length ? ' > ' : '';
-
- html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
+ var swapCodes = [
+ [ 8211, "–" ],
+ [ 8212, "—" ],
+ [ 8216, "'" ],
+ [ 8217, "'" ],
+ [ 8220, '"' ],
+ [ 8221, '"' ],
+ [ 8226, "*" ],
+ [ 8230, "..." ]
+ ];
+ var output = input;
+ Roo.each(swapCodes, function(sw) {
+ var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
+ output = output.replace(swapper, sw[1]);
});
-
- //
- var sz = this.footDisp.up('td').getSize();
- this.footDisp.dom.style.width = (sz.width -10) + 'px';
- this.footDisp.dom.style.marginLeft = '5px';
- this.footDisp.dom.style.overflow = 'hidden';
+ return output;
+ },
+
+
+
- this.footDisp.dom.innerHTML = html;
-
+
+ cleanUpChild : function (node)
+ {
- },
-
-
- // private
- onDestroy : function(){
- if(this.rendered){
-
- this.tb.items.each(function(item){
- if(item.menu){
- item.menu.removeAll();
- if(item.menu.el){
- item.menu.el.destroy();
- }
- }
- item.destroy();
- });
-
- }
- },
- onFirstFocus: function() {
- // need to do this for all the toolbars..
- this.tb.items.each(function(item){
- item.enable();
+ new Roo.htmleditor.FilterComment({node : node});
+ new Roo.htmleditor.FilterAttributes({
+ node : node,
+ attrib_black : this.ablack,
+ attrib_clean : this.aclean,
+ style_white : this.cwhite,
+ style_black : this.cblack
});
+ new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
+ new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+
+
},
- buildToolbar: function(tlist, nm, friendly_name, block)
+
+ /**
+ * Clean up MS wordisms...
+ * @deprecated - use filter directly
+ */
+ cleanWord : function(node)
{
- var editor = this.editor;
- var editorcore = this.editorcore;
- // create a new element.
- var wdiv = editor.wrap.createChild({
- tag: 'div'
- }, editor.wrap.dom.firstChild.nextSibling, true);
-
-
- var tb = new Roo.Toolbar(wdiv);
- ///this.tb = tb; // << this sets the active toolbar..
- if (tlist === false && block) {
- tlist = block.contextMenu(this);
- }
-
- tb.hasStyles = false;
- tb.name = nm;
-
- tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
-
- var styles = Array.from(this.styles);
+ new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
+ new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
+ },
+
+
+ /**
+
+ * @deprecated - use filters
+ */
+ cleanTableWidths : function(node)
+ {
+ new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
- // styles...
- if (styles && styles.length) {
- tb.hasStyles = true;
- // this needs a multi-select checkbox...
- tb.addField( new Roo.form.ComboBox({
- store: new Roo.data.SimpleStore({
- id : 'val',
- fields: ['val', 'selected'],
- data : []
- }),
- name : '-roo-edit-className',
- attrname : 'className',
- displayField: 'val',
- typeAhead: false,
- mode: 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Select Style',
- selectOnFocus:true,
- width: 130,
- listeners : {
- 'select': function(c, r, i) {
- // initial support only for on class per el..
- tb.selectedNode.className = r ? r.get('val') : '';
- editorcore.syncValue();
- }
- }
+
+ },
- }));
- }
+
- var tbc = Roo.form.HtmlEditor.ToolbarContext;
+ applyBlacklists : function()
+ {
+ var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
+ var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
+ this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean : Roo.HtmlEditorCore.aclean;
+ this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack : Roo.HtmlEditorCore.ablack;
+ this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove : Roo.HtmlEditorCore.tag_remove;
- for (var i = 0; i < tlist.length; i++) {
-
- // newer versions will use xtype cfg to create menus.
- if (typeof(tlist[i].xtype) != 'undefined') {
-
- tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
-
-
- continue;
+ this.white = [];
+ this.black = [];
+ Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
}
+ this.white.push(tag);
- var item = tlist[i];
- tb.add(item.title + ": ");
-
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.white.indexOf(tag) > -1) {
+ return;
+ }
+ this.white.push(tag);
- //optname == used so you can configure the options available..
- var opts = item.opts ? item.opts : false;
- if (item.optname) { // use the b
- opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
-
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
+ this.black.push(tag);
- if (opts) {
- // opts == pulldown..
- tb.addField( new Roo.form.ComboBox({
- store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
- id : 'val',
- fields: ['val', 'display'],
- data : opts
- }),
- name : '-roo-edit-' + tlist[i].name,
-
- attrname : tlist[i].name,
- stylename : item.style ? item.style : false,
-
- displayField: item.displayField ? item.displayField : 'val',
- valueField : 'val',
- typeAhead: false,
- mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Select',
- selectOnFocus:true,
- width: item.width ? item.width : 130,
- listeners : {
- 'select': function(c, r, i) {
-
-
- if (c.stylename) {
- tb.selectedNode.style[c.stylename] = r.get('val');
- editorcore.syncValue();
- return;
- }
- if (r === false) {
- tb.selectedNode.removeAttribute(c.attrname);
- editorcore.syncValue();
- return;
- }
- tb.selectedNode.setAttribute(c.attrname, r.get('val'));
- editorcore.syncValue();
- }
- }
-
- }));
- continue;
-
-
- /*
- tb.addField( new Roo.form.TextField({
- name: i,
- width: 100,
- //allowBlank:false,
- value: ''
- }));
- continue;
- */
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
- tb.addField( new Roo.form.TextField({
- name: '-roo-edit-' + tlist[i].name,
- attrname : tlist[i].name,
-
- width: item.width,
- //allowBlank:true,
- value: '',
- listeners: {
- 'change' : function(f, nv, ov) {
-
-
- tb.selectedNode.setAttribute(f.attrname, nv);
- editorcore.syncValue();
- }
- }
- }));
-
- }
+ if (this.black.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
+
+ }, this);
- var _this = this;
- var show_delete = !block || block.deleteTitle !== false;
- if(nm == 'BODY'){
- show_delete = false;
- tb.addSeparator();
- tb.addButton( {
- text: 'Stylesheets',
-
- listeners : {
- click : function ()
- {
- _this.editor.fireEvent('stylesheetsclick', _this.editor);
- }
- }
- });
- }
+ w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
+ b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
- tb.addFill();
- if (show_delete) {
- tb.addButton({
- text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+ this.cwhite = [];
+ this.cblack = [];
+ Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
+
+ }, this);
- listeners : {
- click : function ()
- {
- var sn = tb.selectedNode;
- if (block) {
- sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
-
- }
- if (!sn) {
- return;
- }
- var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
- if (sn.hasAttribute('data-block')) {
- stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
- sn.parentNode.removeChild(sn);
-
- } else if (sn && sn.tagName != 'BODY') {
- // remove and keep parents.
- a = new Roo.htmleditor.FilterKeepChildren({tag : false});
- a.replaceTag(sn);
- }
-
-
- var range = editorcore.createRange();
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.cwhite.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
- range.setStart(stn,0);
- range.setEnd(stn,0);
- var selection = editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
-
-
- //_this.updateToolbar(null, null, pn);
- _this.updateToolbar(null, null, null);
- _this.updateFooter(false);
-
- }
- }
-
-
-
-
- });
- }
+ }, this);
- tb.el.on('click', function(e){
- e.preventDefault(); // what does this do?
- });
- tb.el.setVisibilityMode( Roo.Element.DISPLAY);
- tb.el.hide();
- // dont need to disable them... as they will get hidden
- return tb;
-
+ Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
+
+ }, this);
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.cblack.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
+
+ }, this);
},
- buildFooter : function()
+
+ setStylesheets : function(stylesheets)
{
-
- var fel = this.editor.wrap.createChild();
- this.footer = new Roo.Toolbar(fel);
- // toolbar has scrolly on left / right?
- var footDisp= new Roo.Toolbar.Fill();
- var _t = this;
- this.footer.add(
- {
- text : '<',
- xtype: 'Button',
- handler : function() {
- _t.footDisp.scrollTo('left',0,true)
- }
- }
- );
- this.footer.add( footDisp );
- this.footer.add(
- {
- text : '>',
- xtype: 'Button',
- handler : function() {
- // no animation..
- _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
- }
+ if(typeof(stylesheets) == 'string'){
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : stylesheets
+ });
+
+ return;
+ }
+ var _this = this;
+
+ Roo.each(stylesheets, function(s) {
+ if(!s.length){
+ return;
}
- );
- var fel = Roo.get(footDisp.el);
- fel.addClass('x-editor-context');
- this.footDispWrap = fel;
- this.footDispWrap.overflow = 'hidden';
-
- this.footDisp = fel.createChild();
- this.footDispWrap.on('click', this.onContextClick, this)
-
+
+ Roo.get(_this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : s
+ });
+ });
+
},
- // when the footer contect changes
- onContextClick : function (ev,dom)
+
+
+ updateLanguage : function()
{
- ev.preventDefault();
- var cn = dom.className;
- //Roo.log(cn);
- if (!cn.match(/x-ed-loc-/)) {
+ if (!this.iframe || !this.iframe.contentDocument) {
return;
}
- var n = cn.split('-').pop();
- var ans = this.footerEls;
- var sel = ans[n];
-
- this.editorcore.selectNode(sel);
-
-
- this.updateToolbar(null, null, sel);
-
-
- }
-
+ Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
+ },
+ removeStylesheets : function()
+ {
+ var _this = this;
+
+ Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
+ s.remove();
+ });
+ },
+ setStyle : function(style)
+ {
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'style',
+ type : 'text/css',
+ html : style
+ });
+
+ return;
+ }
+ // hide stuff that is not compatible
+ /**
+ * @event blur
+ * @hide
+ */
+ /**
+ * @event change
+ * @hide
+ */
+ /**
+ * @event focus
+ * @hide
+ */
+ /**
+ * @event specialkey
+ * @hide
+ */
+ /**
+ * @cfg {String} fieldClass @hide
+ */
+ /**
+ * @cfg {String} focusClass @hide
+ */
+ /**
+ * @cfg {String} autoCreate @hide
+ */
+ /**
+ * @cfg {String} inputType @hide
+ */
+ /**
+ * @cfg {String} invalidClass @hide
+ */
+ /**
+ * @cfg {String} invalidText @hide
+ */
+ /**
+ * @cfg {String} msgFx @hide
+ */
+ /**
+ * @cfg {String} validateOnBlur @hide
+ */
});
+Roo.HtmlEditorCore.white = [
+ 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
+
+ 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV',
+ 'DL', 'DT', 'H1', 'H2', 'H3', 'H4',
+ 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE',
+ 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE',
+ 'TABLE', 'UL', 'XMP',
+
+ 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH',
+ 'THEAD', 'TR',
+
+ 'DIR', 'MENU', 'OL', 'UL', 'DL',
+
+ 'EMBED', 'OBJECT'
+];
+
+
+Roo.HtmlEditorCore.black = [
+ // 'embed', 'object', // enable - backend responsiblity to clean thiese
+ 'APPLET', //
+ 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY',
+ 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER',
+ 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT',
+ 'SCRIPT', 'STYLE' ,'TITLE', 'XML',
+ //'FONT' // CLEAN LATER..
+ 'COLGROUP', 'COL' // messy tables.
+
+
+];
+Roo.HtmlEditorCore.clean = [ // ?? needed???
+ 'SCRIPT', 'STYLE', 'TITLE', 'XML'
+];
+Roo.HtmlEditorCore.tag_remove = [
+ 'FONT', 'TBODY'
+];
+// attributes..
+
+Roo.HtmlEditorCore.ablack = [
+ 'on'
+];
+
+Roo.HtmlEditorCore.aclean = [
+ 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
+];
+
+// protocols..
+Roo.HtmlEditorCore.pwhite= [
+ 'http', 'https', 'mailto'
+];
+
+// white listed style attributes.
+Roo.HtmlEditorCore.cwhite= [
+ // 'text-align', /// default is to allow most things..
+
+
+// 'font-size'//??
+];
+
+// black listed style attributes.
+Roo.HtmlEditorCore.cblack= [
+ // 'font-size' -- this can be set by the project
+];
+ //<script type="text/javascript">
+
/*
- * Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
+ * Licence LGPL
+ *
*/
-/**
- * @class Roo.form.BasicForm
- * @extends Roo.util.Observable
- * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
- * @constructor
- * @param {String/HTMLElement/Roo.Element} el The form element or its id
- * @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());
- });
- this.addEvents({
- /**
- * @event beforeaction
- * Fires before any action is performed. Return false to cancel the action.
- * @param {Form} this
- * @param {Action} action The action to be performed
- */
- beforeaction: true,
- /**
- * @event actionfailed
- * Fires when an action fails.
- * @param {Form} this
- * @param {Action} action The action that failed
- */
- actionfailed : true,
- /**
- * @event actioncomplete
- * Fires when an action is completed.
- * @param {Form} this
- * @param {Action} action The action that completed
- */
- actioncomplete : true
- });
- if(el){
- this.initEl(el);
+
+Roo.form.HtmlEditor = function(config){
+
+
+
+ Roo.form.HtmlEditor.superclass.constructor.call(this, config);
+
+ if (!this.toolbars) {
+ this.toolbars = [];
}
- Roo.form.BasicForm.superclass.constructor.call(this);
+ this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+
- Roo.form.BasicForm.popover.apply();
};
-Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
- /**
- * @cfg {String} method
- * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
- */
- /**
- * @cfg {DataReader} reader
- * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
- * This is optional as there is built-in support for processing JSON.
- */
- /**
- * @cfg {DataReader} errorReader
- * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
- * This is completely optional as there is built-in support for processing JSON.
- */
- /**
- * @cfg {String} url
- * The URL to use for form actions if one isn't supplied in the action options.
- */
+/**
+ * @class Roo.form.HtmlEditor
+ * @extends Roo.form.Field
+ * Provides a lightweight HTML Editor component.
+ *
+ * This has been tested on Fireforx / Chrome.. IE may not be so great..
+ *
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b><br/><br/>
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
/**
- * @cfg {Boolean} fileUpload
- * Set to true if this form is a file upload.
+ * @cfg {Boolean} clearUp
*/
-
- /**
- * @cfg {Object} baseParams
- * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+ clearUp : true,
+ /**
+ * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
*/
+ toolbars : false,
+
/**
-
- /**
- * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
+ * Roo.resizable.
*/
- timeout: 30,
-
- // private
- activeAction : null,
-
+ resizable : false,
+ /**
+ * @cfg {Number} height (in pixels)
+ */
+ height: 300,
+ /**
+ * @cfg {Number} width (in pixels)
+ */
+ width: 500,
+
/**
- * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
- * or setValues() data instead of when the form was first created.
+ * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea rootURL + '/roojs1/css/undoreset.css', .
+ *
*/
- trackResetOnLoad : false,
+ stylesheets: false,
- /**
- * childForms - used for multi-tab forms
- * @type {Array}
+ /**
+ * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
+ *
*/
- childForms : false,
-
+ cblack: false,
/**
- * allItems - full list of fields.
- * @type {Array}
+ * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
+ *
*/
- allItems : false,
+ cwhite: false,
+ /**
+ * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
+ *
+ */
+ black: 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.
- * @type Mixed
+ * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
+ *
*/
- waitMsgTarget : false,
-
+ white: false,
/**
- * @type Boolean
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
*/
- disableMask : false,
-
+ allowComments: false,
/**
- * @cfg {Boolean} errorMask Should the form be masked (and the active element highlighted on error - default false
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
*/
- errorMask : false,
+ enableBlocks : true,
/**
- * @cfg {Number} maskOffset space around form element to mask if there is an error Default 100
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
*/
- maskOffset : 100,
-
- // private
- initEl : function(el){
- this.el = Roo.get(el);
- this.id = this.el.id || Roo.id();
- this.el.on('submit', this.onSubmit, this);
- this.el.addClass('x-form');
- },
-
- // private
- onSubmit : function(e){
- e.stopEvent();
- },
-
+ autoClean: true,
/**
- * Returns true if client-side validation on the form is successful.
- * @return Boolean
+ * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
*/
- isValid : function(){
- var valid = true;
- var target = false;
- this.items.each(function(f){
- if(f.validate()){
- return;
- }
-
- valid = false;
-
- if(!target && f.el.isVisible(true)){
- target = f;
- }
- });
-
- if(this.errorMask && !valid){
- Roo.form.BasicForm.popover.mask(this, target);
- }
-
- return valid;
- },
+ bodyCls : '',
/**
- * Returns array of invalid form fields.
- * @return Array
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
*/
+ language: 'en',
- invalidFields : function()
- {
- var ret = [];
- this.items.each(function(f){
- if(f.validate()){
- return;
- }
- ret.push(f);
-
- });
-
- return ret;
- },
+
+ // id of frame..
+ frameId: false,
+ // private properties
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
- /**
- * DEPRICATED Returns true if any fields in this form have changed since their original load.
- * @return Boolean
- */
- isDirty : function(){
- var dirty = false;
- this.items.each(function(f){
- if(f.isDirty()){
- dirty = true;
- return false;
- }
- });
- return dirty;
- },
+ onFocus : Roo.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
- /**
- * Returns true if any fields in this form have changed since their original load. (New version)
- * @return Boolean
- */
+ actionMode : 'container', // defaults to hiding it...
- hasChanged : function()
- {
- var dirty = false;
- this.items.each(function(f){
- if(f.hasChanged()){
- dirty = true;
- return false;
- }
- });
- return dirty;
-
+ defaultAutoCreate : { // modified by initCompnoent..
+ tag: "textarea",
+ style:"width:500px;height:300px;",
+ autocomplete: "new-password"
},
- /**
- * Resets all hasChanged to 'false' -
- * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
- * So hasChanged storage is only to be used for this purpose
- * @return Boolean
- */
- resetHasChanged : function()
- {
- this.items.each(function(f){
- f.resetHasChanged();
+
+ // private
+ initComponent : function(){
+ this.addEvents({
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {HtmlEditor} this
+ */
+ initialize: true,
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {HtmlEditor} this
+ */
+ activate: true,
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ beforesync: true,
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ beforepush: true,
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ sync: true,
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ push: true,
+ /**
+ * @event editmodechange
+ * Fires when the editor switches edit modes
+ * @param {HtmlEditor} this
+ * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+ */
+ editmodechange: true,
+ /**
+ * @event editorevent
+ * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+ * @param {HtmlEditor} this
+ */
+ editorevent: true,
+ /**
+ * @event firstfocus
+ * Fires when on first focus - needed by toolbars..
+ * @param {HtmlEditor} this
+ */
+ firstfocus: true,
+ /**
+ * @event autosave
+ * Auto save the htmlEditor value as a file into Events
+ * @param {HtmlEditor} this
+ */
+ autosave: true,
+ /**
+ * @event savedpreview
+ * preview the saved version of htmlEditor
+ * @param {HtmlEditor} this
+ */
+ savedpreview: true,
+
+ /**
+ * @event stylesheetsclick
+ * Fires when press the Sytlesheets button
+ * @param {Roo.HtmlEditorCore} this
+ */
+ stylesheetsclick: true,
+ /**
+ * @event paste
+ * Fires when press user pastes into the editor
+ * @param {Roo.HtmlEditorCore} this
+ */
+ paste: true
+
});
-
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
+ autocomplete: "new-password"
+ };
},
-
-
+
/**
- * Performs a predefined action (submit or load) or custom actions you define on this form.
- * @param {String} actionName The name of the action type
- * @param {Object} options (optional) The options to pass to the action. All of the config options listed
- * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
- * accept other config options):
- * <pre>
-Property Type Description
----------------- --------------- ----------------------------------------------------------------------------------
-url String The url for the action (defaults to the form's url)
-method String The form method to use (defaults to the form's method, or POST if not defined)
-params String/Object The params to pass (defaults to the form's baseParams, or none if not defined)
-clientValidation Boolean Applies to submit only. Pass true to call form.isValid() prior to posting to
- validate the form on the client (defaults to false)
- * </pre>
- * @return {BasicForm} this
+ * Protected method that will not generally be called directly. It
+ * is called when the editor creates its toolbar. Override this method if you need to
+ * add custom toolbar buttons.
+ * @param {HtmlEditor} editor
*/
- doAction : function(action, options){
- if(typeof action == 'string'){
- action = new Roo.form.Action.ACTION_TYPES[action](this, options);
+ createToolbar : function(editor){
+ Roo.log("create toolbars");
+ if (!editor.toolbars || !editor.toolbars.length) {
+ editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
}
- if(this.fireEvent('beforeaction', this, action) !== false){
- this.beforeAction(action);
- action.run.defer(100, action);
+
+ for (var i =0 ; i < editor.toolbars.length;i++) {
+ editor.toolbars[i] = Roo.factory(
+ typeof(editor.toolbars[i]) == 'string' ?
+ { xtype: editor.toolbars[i]} : editor.toolbars[i],
+ Roo.form.HtmlEditor);
+ editor.toolbars[i].init(editor);
}
- return this;
- },
-
- /**
- * Shortcut to do a submit action.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
- * @return {BasicForm} this
- */
- submit : function(options){
- this.doAction('submit', options);
- return this;
- },
-
- /**
- * Shortcut to do a load action.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
- * @return {BasicForm} this
- */
- load : function(options){
- this.doAction('load', options);
- return this;
- },
-
- /**
- * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
- * @param {Record} record The record to edit
- * @return {BasicForm} this
- */
- updateRecord : function(record){
- record.beginEdit();
- var fs = record.fields;
- fs.each(function(f){
- var field = this.findField(f.name);
- if(field){
- record.set(f.name, field.getValue());
- }
- }, this);
- record.endEdit();
- return this;
+
+
},
-
/**
- * Loads an Roo.data.Record into this form.
- * @param {Record} record The record to load
- * @return {BasicForm} this
+ * get the Context selected node
+ * @returns {DomElement|boolean} selected node if active or false if none
+ *
*/
- loadRecord : function(record){
- this.setValues(record.data);
- return this;
+ getSelectedNode : function()
+ {
+ if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
+ return false;
+ }
+ return this.toolbars[1].tb.selectedNode;
+
},
-
// private
- beforeAction : function(action){
- var o = action.options;
+ onRender : function(ct, position)
+ {
+ var _t = this;
+ Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
- if(!this.disableMask) {
- if(this.waitMsgTarget === true){
- this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else if(this.waitMsgTarget){
- this.waitMsgTarget = Roo.get(this.waitMsgTarget);
- this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else {
- Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
- }
- }
+ this.wrap = this.el.wrap({
+ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+ });
+ this.editorcore.onRender(ct, position);
- },
-
- // private
- afterAction : function(action, success){
- this.activeAction = null;
- var o = action.options;
+ 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.createToolbar(this);
+
- if(!this.disableMask) {
- if(this.waitMsgTarget === true){
- this.el.unmask();
- }else if(this.waitMsgTarget){
- this.waitMsgTarget.unmask();
- }else{
- Roo.MessageBox.updateProgress(1);
- Roo.MessageBox.hide();
- }
+ if(!this.width){
+ this.setSize(this.wrap.getSize());
+ }
+ if (this.resizeEl) {
+ this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
+ // should trigger onReize..
}
- if(success){
- if(o.reset){
- this.reset();
- }
- Roo.callback(o.success, o.scope, [this, action]);
- this.fireEvent('actioncomplete', this, action);
-
- }else{
+ this.keyNav = new Roo.KeyNav(this.el, {
- // failure condition..
- // we have a scenario where updates need confirming.
- // eg. if a locking scenario exists..
- // we look for { errors : { needs_confirm : true }} in the response.
- if (
- (typeof(action.result) != 'undefined') &&
- (typeof(action.result.errors) != 'undefined') &&
- (typeof(action.result.errors.needs_confirm) != 'undefined')
- ){
- var _t = this;
- Roo.MessageBox.confirm(
- "Change requires confirmation",
- action.result.errorMsg,
- function(r) {
- if (r != 'yes') {
- return;
- }
- _t.doAction('submit', { params : { _submit_confirmed : 1 } } );
- }
-
- );
+ "tab" : function(e){
+ e.preventDefault();
+ var value = this.getValue();
+ var start = this.el.dom.selectionStart;
+ var end = this.el.dom.selectionEnd;
- return;
- }
-
- Roo.callback(o.failure, o.scope, [this, action]);
- // show an error message if no failed handler is set..
- if (!this.hasListener('actionfailed')) {
- Roo.MessageBox.alert("Error",
- (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
- action.result.errorMsg :
- "Saving Failed, please check your entries or try again"
- );
- }
-
- this.fireEvent('actionfailed', this, action);
- }
-
- },
-
- /**
- * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
- * @param {String} id The value to search for
- * @return Field
- */
- findField : function(id){
- var field = this.items.get(id);
- if(!field){
- this.items.each(function(f){
- if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
- field = f;
- return false;
+ if(!e.shiftKey){
+
+ this.setValue(value.substring(0, start) + "\t" + value.substring(end));
+ this.el.dom.setSelectionRange(end + 1, end + 1);
+ return;
}
- });
- }
- 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)
- {
-
- if (this.childForms.indexOf(form) > -1) {
- // already added..
- return;
- }
- this.childForms.push(form);
- var n = '';
- Roo.each(form.allItems, function (fe) {
-
- n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
- if (this.findField(n)) { // already added..
- return;
- }
- var add = new Roo.form.Hidden({
- name : n
- });
- add.render(this.el);
+
+ var f = value.substring(0, start).split("\t");
+
+ if(f.pop().length != 0){
+ return;
+ }
+
+ this.setValue(f.join("\t") + value.substring(end));
+ this.el.dom.setSelectionRange(start - 1, start - 1);
+
+ },
- this.add( add );
- }, 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}
- * @return {BasicForm} this
- */
- markInvalid : function(errors){
- if(errors instanceof Array){
- for(var i = 0, len = errors.length; i < len; i++){
- var fieldError = errors[i];
- var f = this.findField(fieldError.id);
- if(f){
- f.markInvalid(fieldError.msg);
+ "home" : function(e){
+ e.preventDefault();
+
+ var curr = this.el.dom.selectionStart;
+ var lines = this.getValue().split("\n");
+
+ if(!lines.length){
+ return;
}
- }
- }else{
- var field, id;
- for(id in errors){
- if(typeof errors[id] != 'function' && (field = this.findField(id))){
- field.markInvalid(errors[id]);
+
+ if(e.ctrlKey){
+ this.el.dom.setSelectionRange(0, 0);
+ return;
}
- }
- }
- Roo.each(this.childForms || [], function (f) {
- f.markInvalid(errors);
- });
-
- return this;
- },
-
- /**
- * Set values for fields in this form in bulk.
- * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
- * @return {BasicForm} this
- */
- setValues : function(values){
- if(values instanceof Array){ // array of objects
- for(var i = 0, len = values.length; i < len; i++){
- var v = values[i];
- var f = this.findField(v.id);
- if(f){
- f.setValue(v.value);
- if(this.trackResetOnLoad){
- f.originalValue = f.getValue();
+
+ var pos = 0;
+
+ for (var i = 0; i < lines.length;i++) {
+ pos += lines[i].length;
+
+ if(i != 0){
+ pos += 1;
+ }
+
+ if(pos < curr){
+ continue;
}
- }
- }
- }else{ // object hash
- var field, id;
- for(id in values){
- if(typeof values[id] != 'function' && (field = this.findField(id))){
+ pos -= lines[i].length;
+ break;
+ }
+
+ if(!e.shiftKey){
+ this.el.dom.setSelectionRange(pos, pos);
+ return;
+ }
+
+ this.el.dom.selectionStart = pos;
+ this.el.dom.selectionEnd = curr;
+ },
+
+ "end" : function(e){
+ e.preventDefault();
+
+ var curr = this.el.dom.selectionStart;
+ var lines = this.getValue().split("\n");
+
+ if(!lines.length){
+ return;
+ }
+
+ if(e.ctrlKey){
+ this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
+ return;
+ }
+
+ var pos = 0;
+
+ for (var i = 0; i < lines.length;i++) {
+ pos += lines[i].length;
- if (field.setFromData &&
- field.valueField &&
- field.displayField &&
- // combos' with local stores can
- // be queried via setValue()
- // to set their value..
- (field.store && !field.store.isLocal)
- ) {
- // it's a combo
- var sd = { };
- sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
- sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
- field.setFromData(sd);
-
- } else if (field.inputType && field.inputType == 'radio') {
-
- field.setValue(values[id]);
- } else {
- field.setValue(values[id]);
+ if(i != 0){
+ pos += 1;
}
-
- if(this.trackResetOnLoad){
- field.originalValue = field.getValue();
+ if(pos < curr){
+ continue;
}
+
+ break;
}
- }
- }
- this.resetHasChanged();
-
-
- Roo.each(this.childForms || [], function (f) {
- f.setValues(values);
- f.resetHasChanged();
- });
- return this;
+ if(!e.shiftKey){
+ this.el.dom.setSelectionRange(pos, pos);
+ return;
+ }
+
+ this.el.dom.selectionStart = curr;
+ this.el.dom.selectionEnd = pos;
+ },
+
+ scope : this,
+
+ doRelay : function(foo, bar, hname){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ },
+
+ forceKeyDown: true
+ });
+
+// if(this.autosave && this.w){
+// this.autoSaveFn = setInterval(this.autosave, 1000);
+// }
},
-
- /**
- * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
- * they are returned as an array.
- * @param {Boolean} asString (def)
- * @return {Object}
- */
- getValues : function(asString)
+
+ // private
+ onResize : function(w, h)
{
- if (this.childForms) {
- // copy values from the child forms
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
- }, this);
- }
+ Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+ var ew = false;
+ var eh = false;
- // use formdata
- if (typeof(FormData) != 'undefined' && asString !== true) {
- // this relies on a 'recent' version of chrome apparently...
- try {
- var fd = (new FormData(this.el.dom)).entries();
- var ret = {};
- var ent = fd.next();
- while (!ent.done) {
- ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
- ent = fd.next();
- };
- return ret;
- } catch(e) {
+ if(this.el ){
+ if(typeof w == 'number'){
+ var aw = w - this.wrap.getFrameWidth('lr');
+ this.el.setWidth(this.adjustWidth('textarea', aw));
+ ew = aw;
+ }
+ if(typeof h == 'number'){
+ var tbh = 0;
+ for (var i =0; i < this.toolbars.length;i++) {
+ // fixme - ask toolbars for heights?
+ tbh += this.toolbars[i].tb.el.getHeight();
+ if (this.toolbars[i].footer) {
+ tbh += this.toolbars[i].footer.el.getHeight();
+ }
+ }
+
+
+
+ var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
+ ah -= 5; // knock a few pixes off for look..
+// Roo.log(ah);
+ this.el.setHeight(this.adjustWidth('textarea', ah));
+ var eh = ah;
}
-
}
+ Roo.log('onResize:' + [w,h,ew,eh].join(',') );
+ this.editorcore.onResize(ew,eh);
-
- var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
- if(asString === true){
- return fs;
- }
- return Roo.urlDecode(fs);
},
-
+
/**
- * Returns the fields in this form as an object with key/value pairs.
- * This differs from getValues as it calls getValue on each child item, rather than using dom data.
- * Normally this will not return readOnly data
- * @param {Boolean} with_readonly return readonly field data.
- * @return {Object}
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
*/
- getFieldValues : function(with_readonly)
+ toggleSourceEdit : function(sourceEditMode)
{
- if (this.childForms) {
- // copy values from the child forms
- // should this call getFieldValues - probably not as we do not currently copy
- // hidden fields when we generate..
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getFieldValues());
- }, this);
- }
+ this.editorcore.toggleSourceEdit(sourceEditMode);
- var ret = {};
- this.items.each(function(f){
+ if(this.editorcore.sourceEditMode){
+ Roo.log('editor - showing textarea');
- if (f.readOnly && with_readonly !== true) {
- return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
- // if a subform contains a copy of them.
- // if you have subforms with the same editable data, you will need to copy the data back
- // and forth.
- }
+// Roo.log('in');
+// Roo.log(this.syncValue());
+ this.editorcore.syncValue();
+ this.el.removeClass('x-hidden');
+ this.el.dom.removeAttribute('tabIndex');
+ this.el.focus();
+ this.el.dom.scrollTop = 0;
- if (!f.getName()) {
- return;
- }
- var v = f.getValue();
- if (f.inputType =='radio') {
- if (typeof(ret[f.getName()]) == 'undefined') {
- ret[f.getName()] = ''; // empty..
- }
-
- if (!f.el.dom.checked) {
- return;
-
+
+ for (var i = 0; i < this.toolbars.length; i++) {
+ if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+ this.toolbars[i].tb.hide();
+ this.toolbars[i].footer.hide();
}
- v = f.el.dom.value;
-
}
- // not sure if this supported any more..
- if ((typeof(v) == 'object') && f.getRawValue) {
- v = f.getRawValue() ; // dates..
- }
- // combo boxes where name != hiddenName...
- if (f.name != f.getName()) {
- ret[f.name] = f.getRawValue();
+ }else{
+ Roo.log('editor - hiding textarea');
+// Roo.log('out')
+// Roo.log(this.pushValue());
+ this.editorcore.pushValue();
+
+ this.el.addClass('x-hidden');
+ this.el.dom.setAttribute('tabIndex', -1);
+
+ for (var i = 0; i < this.toolbars.length; i++) {
+ if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+ this.toolbars[i].tb.show();
+ this.toolbars[i].footer.show();
+ }
}
- ret[f.getName()] = v;
- });
+
+ //this.deferFocus();
+ }
- return ret;
+ this.setSize(this.wrap.getSize());
+ this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
+
+ this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
+ },
+
+ // private (for BoxComponent)
+ adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+ // private (for BoxComponent)
+ getResizeEl : function(){
+ return this.wrap;
+ },
+
+ // private (for BoxComponent)
+ getPositionEl : function(){
+ return this.wrap;
+ },
+
+ // private
+ initEvents : function(){
+ this.originalValue = this.getValue();
},
/**
- * Clears all invalid messages in this form.
- * @return {BasicForm} this
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
*/
- clearInvalid : function(){
- this.items.each(function(f){
- f.clearInvalid();
- });
-
- Roo.each(this.childForms || [], function (f) {
- f.clearInvalid();
- });
-
-
- return this;
+ markInvalid : Roo.emptyFn,
+ /**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ clearInvalid : Roo.emptyFn,
+
+ setValue : function(v){
+ Roo.form.HtmlEditor.superclass.setValue.call(this, v);
+ this.editorcore.pushValue();
},
/**
- * Resets this form.
- * @return {BasicForm} this
+ * update the language in the body - really done by core
+ * @param {String} language - eg. en / ar / zh-CN etc..
*/
- reset : function(){
- this.items.each(function(f){
- f.reset();
- });
+ updateLanguage : function(lang)
+ {
+ this.language = lang;
+ this.editorcore.language = lang;
+ this.editorcore.updateLanguage();
+
+ },
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
+ },
+
+ // doc'ed in Field
+ focus : function(){
+ this.editorcore.focus();
- Roo.each(this.childForms || [], function (f) {
- f.reset();
- });
- this.resetHasChanged();
+ },
+
+
+ // private
+ onDestroy : function(){
- return this;
+
+
+ if(this.rendered){
+
+ for (var i =0; i < this.toolbars.length;i++) {
+ // fixme - ask toolbars for heights?
+ this.toolbars[i].onDestroy();
+ }
+
+ this.wrap.dom.innerHTML = '';
+ this.wrap.remove();
+ }
},
+ // private
+ onFirstFocus : function(){
+ //Roo.log("onFirstFocus");
+ this.editorcore.onFirstFocus();
+ for (var i =0; i < this.toolbars.length;i++) {
+ this.toolbars[i].onFirstFocus();
+ }
+
+ },
+
+ // private
+ syncValue : function()
+ {
+ this.editorcore.syncValue();
+ },
+
+ pushValue : function()
+ {
+ this.editorcore.pushValue();
+ },
+
+ setStylesheets : function(stylesheets)
+ {
+ this.editorcore.setStylesheets(stylesheets);
+ },
+
+ removeStylesheets : function()
+ {
+ this.editorcore.removeStylesheets();
+ }
+
+
+ // hide stuff that is not compatible
/**
- * Add Roo.form components to this form.
- * @param {Field} field1
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return {BasicForm} this
+ * @event blur
+ * @hide
*/
- add : function(){
- this.items.addAll(Array.prototype.slice.call(arguments, 0));
- return this;
- },
-
-
/**
- * Removes a field from the items collection (does NOT remove its markup).
- * @param {Field} field
- * @return {BasicForm} this
+ * @event change
+ * @hide
*/
- remove : function(field){
- this.items.remove(field);
- return this;
- },
-
/**
- * Looks at the fields in this form, checks them for an id attribute,
- * and calls applyTo on the existing dom element with that id.
- * @return {BasicForm} this
+ * @event focus
+ * @hide
*/
- render : function(){
- this.items.each(function(f){
- if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
- f.applyTo(f.id);
- }
- });
- return this;
- },
-
/**
- * Calls {@link Ext#apply} for all fields in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
+ * @event specialkey
+ * @hide
*/
- applyToFields : function(o){
- this.items.each(function(f){
- Roo.apply(f, o);
- });
- return this;
- },
+ /**
+ * @cfg {String} fieldClass @hide
+ */
+ /**
+ * @cfg {String} focusClass @hide
+ */
+ /**
+ * @cfg {String} autoCreate @hide
+ */
+ /**
+ * @cfg {String} inputType @hide
+ */
+ /**
+ * @cfg {String} invalidClass @hide
+ */
+ /**
+ * @cfg {String} invalidText @hide
+ */
+ /**
+ * @cfg {String} msgFx @hide
+ */
+ /**
+ * @cfg {String} validateOnBlur @hide
+ */
+});
+
+ /*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+
+ */
+
+/**
+ * @class Roo.form.HtmlEditor.ToolbarStandard
+ * Basic Toolbar
+
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+ ....
+ toolbars : [
+ new Roo.form.HtmlEditorToolbar1({
+ disable : { fonts: 1 , format: 1, ..., ... , ...],
+ btns : [ .... ]
+ })
+ }
+
+ *
+ * @cfg {Object} disable List of elements to disable..
+ * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
+ *
+ *
+ * NEEDS Extra CSS?
+ * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
+ */
+
+Roo.form.HtmlEditor.ToolbarStandard = function(config)
+{
+
+ Roo.apply(this, config);
+
+ // default disabled, based on 'good practice'..
+ this.disable = this.disable || {};
+ Roo.applyIf(this.disable, {
+ fontSize : true,
+ colors : true,
+ specialElements : true
+ });
+
+
+ //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+ // dont call parent... till later.
+}
+Roo.form.HtmlEditor.ToolbarStandard.prototype = {
+
+ tb: false,
+
+ rendered: false,
+
+ editor : false,
+ editorcore : false,
/**
- * Calls {@link Ext#applyIf} for all field in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
+ * @cfg {Object} disable List of toolbar elements to disable
+
*/
- applyIfToFields : function(o){
- this.items.each(function(f){
- Roo.applyIf(f, o);
+ disable : false,
+
+
+ /**
+ * @cfg {String} createLinkText The default text for the create link prompt
+ */
+ createLinkText : 'Please enter the URL for the link:',
+ /**
+ * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ */
+ defaultLinkValue : 'http:/'+'/',
+
+
+ /**
+ * @cfg {Array} fontFamilies An array of available font families
+ */
+ fontFamilies : [
+ 'Arial',
+ 'Courier New',
+ 'Tahoma',
+ 'Times New Roman',
+ 'Verdana'
+ ],
+
+ specialChars : [
+ "©",
+ "®",
+ "™",
+ "£" ,
+ // "—",
+ "…",
+ "÷" ,
+ // "á" , ?? a acute?
+ "€" , //Euro
+ // "“" ,
+ // "”" ,
+ // "•" ,
+ "°" // , // degrees
+
+ // "é" , // e ecute
+ // "ú" , // u ecute?
+ ],
+
+ specialElements : [
+ {
+ text: "Insert Table",
+ xtype: 'MenuItem',
+ xns : Roo.Menu,
+ ihtml : '<table><tr><td>Cell</td></tr></table>'
+
+ },
+ {
+ text: "Insert Image",
+ xtype: 'MenuItem',
+ xns : Roo.Menu,
+ ihtml : '<img src="about:blank"/>'
+
+ }
+
+
+ ],
+
+
+ inputElements : [
+ "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
+ "input:submit", "input:button", "select", "textarea", "label" ],
+ formats : [
+ ["p"] ,
+ ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
+ ["pre"],[ "code"],
+ ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
+ ['div'],['span'],
+ ['sup'],['sub']
+ ],
+
+ cleanStyles : [
+ "font-size"
+ ],
+ /**
+ * @cfg {String} defaultFont default font to use.
+ */
+ defaultFont: 'tahoma',
+
+ fontSelect : false,
+
+
+ formatCombo : false,
+
+ init : function(editor)
+ {
+ this.editor = editor;
+ this.editorcore = editor.editorcore ? editor.editorcore : editor;
+ var editorcore = this.editorcore;
+
+ var _t = this;
+
+ var fid = editorcore.frameId;
+ var etb = this;
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: _t, // was editor...
+ handler:handler||_t.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
+ };
+ }
+
+
+
+ var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+ this.tb = tb;
+ // stop form submits
+ tb.el.on('click', function(e){
+ e.preventDefault(); // what does this do?
});
- return this;
- }
-});
-// back compat
-Roo.BasicForm = Roo.form.BasicForm;
+ if(!this.disable.font) { // && !Roo.isSafari){
+ /* why no safari for fonts
+ editor.fontSelect = tb.el.createChild({
+ tag:'select',
+ tabIndex: -1,
+ cls:'x-font-select',
+ html: this.createFontOptions()
+ });
+
+ editor.fontSelect.on('change', function(){
+ var font = editor.fontSelect.dom.value;
+ editor.relayCmd('fontname', font);
+ editor.deferFocus();
+ }, editor);
+
+ tb.add(
+ editor.fontSelect.dom,
+ '-'
+ );
+ */
+
+ };
+ if(!this.disable.formats){
+ this.formatCombo = new Roo.form.ComboBox({
+ store: new Roo.data.SimpleStore({
+ id : 'tag',
+ fields: ['tag'],
+ data : this.formats // from states.js
+ }),
+ blockFocus : true,
+ name : '',
+ //autoCreate : {tag: "div", size: "20"},
+ displayField:'tag',
+ typeAhead: false,
+ mode: 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Add tag',
+ selectOnFocus:true,
+ width:135,
+ listeners : {
+ 'select': function(c, r, i) {
+ editorcore.insertTag(r.get('tag'));
+ editor.focus();
+ }
+ }
-Roo.apply(Roo.form.BasicForm, {
-
- popover : {
-
- padding : 5,
-
- isApplied : false,
-
- isMasked : false,
-
- form : false,
+ });
+ tb.addField(this.formatCombo);
+
+ }
- target : false,
+ if(!this.disable.format){
+ tb.add(
+ btn('bold'),
+ btn('italic'),
+ btn('underline'),
+ btn('strikethrough')
+ );
+ };
+ if(!this.disable.fontSize){
+ tb.add(
+ '-',
+
+
+ btn('increasefontsize', false, editorcore.adjustFont),
+ btn('decreasefontsize', false, editorcore.adjustFont)
+ );
+ };
- intervalID : false,
- maskEl : false,
+ if(!this.disable.colors){
+ tb.add(
+ '-', {
+ id:editorcore.frameId +'-forecolor',
+ cls:'x-btn-icon x-edit-forecolor',
+ clickEvent:'mousedown',
+ tooltip: this.buttonTips['forecolor'] || undefined,
+ tabIndex:-1,
+ menu : new Roo.menu.ColorMenu({
+ allowReselect: true,
+ focus: Roo.emptyFn,
+ value:'000000',
+ plain:true,
+ selectHandler: function(cp, color){
+ editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
+ editor.deferFocus();
+ },
+ scope: editorcore,
+ clickEvent:'mousedown'
+ })
+ }, {
+ id:editorcore.frameId +'backcolor',
+ cls:'x-btn-icon x-edit-backcolor',
+ clickEvent:'mousedown',
+ tooltip: this.buttonTips['backcolor'] || undefined,
+ tabIndex:-1,
+ menu : new Roo.menu.ColorMenu({
+ focus: Roo.emptyFn,
+ value:'FFFFFF',
+ plain:true,
+ allowReselect: true,
+ selectHandler: function(cp, color){
+ if(Roo.isGecko){
+ editorcore.execCmd('useCSS', false);
+ editorcore.execCmd('hilitecolor', color);
+ editorcore.execCmd('useCSS', true);
+ editor.deferFocus();
+ }else{
+ editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
+ Roo.isSafari || Roo.isIE ? '#'+color : color);
+ editor.deferFocus();
+ }
+ },
+ scope:editorcore,
+ clickEvent:'mousedown'
+ })
+ }
+ );
+ };
+ // now add all the items...
- apply : function()
- {
- if(this.isApplied){
- return;
+
+ if(!this.disable.alignments){
+ tb.add(
+ '-',
+ btn('justifyleft'),
+ btn('justifycenter'),
+ btn('justifyright')
+ );
+ };
+
+ //if(!Roo.isSafari){
+ if(!this.disable.links){
+ tb.add(
+ '-',
+ btn('createlink', false, this.createLink) /// MOVE TO HERE?!!?!?!?!
+ );
+ };
+
+ if(!this.disable.lists){
+ tb.add(
+ '-',
+ btn('insertorderedlist'),
+ btn('insertunorderedlist')
+ );
}
-
- this.maskEl = {
- top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
- left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
- bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
- right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+ if(!this.disable.sourceEdit){
+ tb.add(
+ '-',
+ btn('sourceedit', true, function(btn){
+ this.toggleSourceEdit(btn.pressed);
+ })
+ );
+ }
+ //}
+
+ var smenu = { };
+ // special menu.. - needs to be tidied up..
+ if (!this.disable.special) {
+ smenu = {
+ text: "©",
+ cls: 'x-edit-none',
+
+ menu : {
+ items : []
+ }
};
+ for (var i =0; i < this.specialChars.length; i++) {
+ smenu.menu.items.push({
+
+ html: this.specialChars[i],
+ handler: function(a,b) {
+ editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
+ //editor.insertAtCursor(a.html);
+
+ },
+ tabIndex:-1
+ });
+ }
- this.maskEl.top.enableDisplayMode("block");
- this.maskEl.left.enableDisplayMode("block");
- this.maskEl.bottom.enableDisplayMode("block");
- this.maskEl.right.enableDisplayMode("block");
- Roo.get(document.body).on('click', function(){
- this.unmask();
- }, this);
+ tb.add(smenu);
- Roo.get(document.body).on('touchstart', function(){
- this.unmask();
- }, this);
- this.isApplied = true
- },
+ }
- mask : function(form, target)
- {
- this.form = form;
-
- this.target = target;
-
- if(!this.form.errorMask || !target.el){
- return;
+ var cmenu = { };
+ if (!this.disable.cleanStyles) {
+ cmenu = {
+ cls: 'x-btn-icon x-btn-clear',
+
+ menu : {
+ items : []
+ }
+ };
+ for (var i =0; i < this.cleanStyles.length; i++) {
+ cmenu.menu.items.push({
+ actiontype : this.cleanStyles[i],
+ html: 'Remove ' + this.cleanStyles[i],
+ handler: function(a,b) {
+// Roo.log(a);
+// Roo.log(b);
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[style]').each(function(s) {
+ s.dom.style.removeProperty(a.actiontype);
+ });
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
}
+ cmenu.menu.items.push({
+ actiontype : 'tablewidths',
+ html: 'Remove Table Widths',
+ handler: function(a,b) {
+ editorcore.cleanTableWidths();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
+ cmenu.menu.items.push({
+ actiontype : 'word',
+ html: 'Remove MS Word Formating',
+ handler: function(a,b) {
+ editorcore.cleanWord();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
-
- var ot = this.target.el.calcOffsetsTo(scrollable);
-
- var scrollTo = ot[1] - this.form.maskOffset;
-
- scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
-
- scrollable.scrollTo('top', scrollTo);
-
- var el = this.target.wrap || this.target.el;
-
- var box = el.getBox();
+ cmenu.menu.items.push({
+ actiontype : 'all',
+ html: 'Remove All Styles',
+ handler: function(a,b) {
+
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[style]').each(function(s) {
+ s.dom.removeAttribute('style');
+ });
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- this.maskEl.top.setStyle('position', 'absolute');
- this.maskEl.top.setStyle('z-index', 10000);
- this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
- this.maskEl.top.setLeft(0);
- this.maskEl.top.setTop(0);
- this.maskEl.top.show();
+ cmenu.menu.items.push({
+ actiontype : 'all',
+ html: 'Remove All CSS Classes',
+ handler: function(a,b) {
+
+ var c = Roo.get(editorcore.doc.body);
+ c.select('[class]').each(function(s) {
+ s.dom.removeAttribute('class');
+ });
+ editorcore.cleanWord();
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- this.maskEl.left.setStyle('position', 'absolute');
- this.maskEl.left.setStyle('z-index', 10000);
- this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
- this.maskEl.left.setLeft(0);
- this.maskEl.left.setTop(box.y - this.padding);
- this.maskEl.left.show();
-
- this.maskEl.bottom.setStyle('position', 'absolute');
- this.maskEl.bottom.setStyle('z-index', 10000);
- this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
- this.maskEl.bottom.setLeft(0);
- this.maskEl.bottom.setTop(box.bottom + this.padding);
- this.maskEl.bottom.show();
-
- this.maskEl.right.setStyle('position', 'absolute');
- this.maskEl.right.setStyle('z-index', 10000);
- this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
- this.maskEl.right.setLeft(box.right + this.padding);
- this.maskEl.right.setTop(box.y - this.padding);
- this.maskEl.right.show();
-
- this.intervalID = window.setInterval(function() {
- Roo.form.BasicForm.popover.unmask();
- }, 10000);
-
- window.onwheel = function(){ return false;};
+ cmenu.menu.items.push({
+ actiontype : 'tidy',
+ html: 'Tidy HTML Source',
+ handler: function(a,b) {
+ new Roo.htmleditor.Tidy(editorcore.doc.body);
+ editorcore.syncValue();
+ },
+ tabIndex:-1
+ });
- (function(){ this.isMasked = true; }).defer(500, this);
- },
-
- unmask : function()
- {
- if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
- return;
+ tb.add(cmenu);
+ }
+
+ if (!this.disable.specialElements) {
+ var semenu = {
+ text: "Other;",
+ cls: 'x-edit-none',
+ menu : {
+ items : []
+ }
+ };
+ for (var i =0; i < this.specialElements.length; i++) {
+ semenu.menu.items.push(
+ Roo.apply({
+ handler: function(a,b) {
+ editor.insertAtCursor(this.ihtml);
+ }
+ }, this.specialElements[i])
+ );
+
}
- this.maskEl.top.setStyle('position', 'absolute');
- this.maskEl.top.setSize(0, 0).setXY([0, 0]);
- this.maskEl.top.hide();
-
- this.maskEl.left.setStyle('position', 'absolute');
- this.maskEl.left.setSize(0, 0).setXY([0, 0]);
- this.maskEl.left.hide();
-
- this.maskEl.bottom.setStyle('position', 'absolute');
- this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
- this.maskEl.bottom.hide();
-
- this.maskEl.right.setStyle('position', 'absolute');
- this.maskEl.right.setSize(0, 0).setXY([0, 0]);
- this.maskEl.right.hide();
-
- window.onwheel = function(){ return true;};
-
- if(this.intervalID){
- window.clearInterval(this.intervalID);
- this.intervalID = false;
- }
+ tb.add(semenu);
- this.isMasked = false;
}
-
- }
-
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Form
- * @extends Roo.form.BasicForm
- * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Form = function(config){
- var xitems = [];
- if (config.items) {
- xitems = config.items;
- delete config.items;
- }
-
-
- Roo.form.Form.superclass.constructor.call(this, null, config);
- this.url = this.url || this.action;
- if(!this.root){
- this.root = new Roo.form.Layout(Roo.applyIf({
- id: Roo.id()
- }, config));
- }
- this.active = this.root;
- /**
- * Array of all the buttons that have been added to this form via {@link addButton}
- * @type Array
- */
- this.buttons = [];
- this.allItems = [];
- this.addEvents({
- /**
- * @event clientvalidation
- * If the monitorValid config option is true, this event fires repetitively to notify of valid state
- * @param {Form} this
- * @param {Boolean} valid true if the form has passed client-side validation
- */
- clientvalidation: true,
- /**
- * @event rendered
- * Fires when the form is rendered
- * @param {Roo.form.Form} form
- */
- rendered : true
- });
-
- if (this.progressUrl) {
- // push a hidden field onto the list of fields..
- this.addxtype( {
- xns: Roo.form,
- xtype : 'Hidden',
- name : 'UPLOAD_IDENTIFIER'
- });
- }
-
-
- Roo.each(xitems, this.addxtype, this);
-
-};
-
-Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
- /**
- * @cfg {Roo.Button} buttons[] buttons at bottom of form
- */
-
- /**
- * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
- */
- /**
- * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
- */
- /**
- * @cfg {String} buttonAlign (left|center|right) Valid values are "left," "center" and "right" (defaults to "center")
- */
- buttonAlign:'center',
-
- /**
- * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
- */
- minButtonWidth:75,
-
- /**
- * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
- * This property cascades to child containers if not set.
- */
- labelAlign:'left',
-
- /**
- * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
- * fires a looping event with that state. This is required to bind buttons to the valid
- * state using the config value formBind:true on the button.
- */
- monitorValid : false,
-
- /**
- * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
- */
- monitorPoll : 200,
-
- /**
- * @cfg {String} progressUrl - Url to return progress data
- */
-
- progressUrl : false,
- /**
- * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
- * sending a formdata with extra parameters - eg uploaded elements.
- */
-
- formData : false,
-
- /**
- * 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
- * until end() is called.
- * @param {Object} config The config to pass to the column
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return Column The column container object
- */
- column : function(c){
- var col = new Roo.form.Column(c);
- this.start(col);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
+
+
+ if (this.btns) {
+ for(var i =0; i< this.btns.length;i++) {
+ var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
+ b.cls = 'x-edit-none';
+
+ if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
+ b.cls += ' x-init-enable';
+ }
+
+ b.scope = editorcore;
+ tb.add(b);
+ }
+
}
- return col;
+
+
+
+ // disable everything...
+
+ this.tb.items.each(function(item){
+
+ if(
+ item.id != editorcore.frameId+ '-sourceedit' &&
+ (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
+ ){
+
+ item.disable();
+ }
+ });
+ this.rendered = true;
+
+ // the all the btns;
+ editor.on('editorevent', this.updateToolbar, this);
+ // other toolbars need to implement this..
+ //editor.on('editmodechange', this.updateToolbar, this);
},
-
- /**
- * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
- * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
- * until end() is called.
- * @param {Object} config The config to pass to the fieldset
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return FieldSet The fieldset container object
- */
- fieldset : function(c){
- var fs = new Roo.form.FieldSet(c);
- this.start(fs);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
- }
- return fs;
+
+
+ relayBtnCmd : function(btn) {
+ this.editorcore.relayCmd(btn.cmd);
},
-
- /**
- * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
- * fields are added and the container is closed. If no fields are passed the container remains open
- * until end() is called.
- * @param {Object} config The config to pass to the Layout
- * @param {Field} field1 (optional)
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return Layout The container object
- */
- container : function(c){
- var l = new Roo.form.Layout(c);
- this.start(l);
- if(arguments.length > 1){ // duplicate code required because of Opera
- this.add.apply(this, Array.prototype.slice.call(arguments, 1));
- this.end();
+ // private used internally
+ createLink : function(){
+ //Roo.log("create link?");
+ var ec = this.editorcore;
+ var ar = ec.getAllAncestors();
+ var n = false;
+ for(var i = 0;i< ar.length;i++) {
+ if (ar[i] && ar[i].nodeName == 'A') {
+ n = ar[i];
+ break;
+ }
}
- return l;
+
+ (function() {
+
+ Roo.MessageBox.show({
+ title : "Add / Edit Link URL",
+ msg : "Enter the url for the link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, url){
+ if (btn != 'ok') {
+ return;
+ }
+ if(url && url != 'http:/'+'/'){
+ if (n) {
+ n.setAttribute('href', url);
+ } else {
+ ec.relayCmd('createlink', url);
+ }
+ }
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : n ? n.getAttribute('href') : ''
+ });
+
+
+ }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
+
},
+
/**
- * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
- * @param {Object} container A Roo.form.Layout or subclass of Layout
- * @return {Form} this
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
*/
- start : function(c){
- // cascade label info
- Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
- this.active.stack.push(c);
- c.ownerCt = this.active;
- this.active = c;
- return this;
- },
+ updateToolbar: function(){
- /**
- * Closes the current open container
- * @return {Form} this
- */
- end : function(){
- if(this.active == this.root){
- return this;
+ if(!this.editorcore.activated){
+ this.editor.onFirstFocus();
+ return;
}
- this.active = this.active.ownerCt;
- return this;
- },
- /**
- * Add Roo.form components to the current open container (e.g. column, fieldset, etc.). Fields added via this method
- * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
- * as the label of the field.
- * @param {Field} field1
- * @param {Field} field2 (optional)
- * @param {Field} etc. (optional)
- * @return {Form} this
- */
- add : function(){
- this.active.stack.push.apply(this.active.stack, arguments);
- this.allItems.push.apply(this.allItems,arguments);
- var r = [];
- for(var i = 0, a = arguments, len = a.length; i < len; i++) {
- if(a[i].isFormField){
- r.push(a[i]);
+ var btns = this.tb.items.map,
+ doc = this.editorcore.doc,
+ frameId = this.editorcore.frameId;
+
+ if(!this.disable.font && !Roo.isSafari){
+ /*
+ var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
+ if(name != this.fontSelect.dom.value){
+ this.fontSelect.dom.value = name;
}
+ */
}
- if(r.length > 0){
- Roo.form.Form.superclass.add.apply(this, r);
+ if(!this.disable.format){
+ btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
+ btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
+ btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+ btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
}
- 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..
- * @param {String} id - id or name to find.
-
- * @return {Element} e - or false if nothing found.
- */
- findbyId : function(id)
- {
- var ret = false;
- if (!id) {
- return ret;
+ if(!this.disable.alignments){
+ btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
+ btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
+ btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
+ }
+ if(!Roo.isSafari && !this.disable.lists){
+ btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
+ btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
}
- Roo.each(this.allItems, function(f){
- if (f.id == id || f.name == id ){
- ret = f;
- return false;
- }
- });
- return ret;
- },
-
-
-
- /**
- * Render this form into the passed container. This should only be called once!
- * @param {String/HTMLElement/Element} container The element this component should be rendered into
- * @return {Form} this
- */
- render : function(ct)
- {
+ var ans = this.editorcore.getAllAncestors();
+ if (this.formatCombo) {
+
+
+ var store = this.formatCombo.store;
+ this.formatCombo.setValue("");
+ for (var i =0; i < ans.length;i++) {
+ if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
+ // select it..
+ this.formatCombo.setValue(ans[i].tagName.toLowerCase());
+ break;
+ }
+ }
+ }
- ct = Roo.get(ct);
- var o = this.autoCreate || {
- tag: 'form',
- method : this.method || 'POST',
- id : this.id || Roo.id()
- };
- this.initEl(ct.createChild(o));
-
- this.root.render(this.el);
-
-
- this.items.each(function(f){
- f.render('x-form-el-'+f.id);
- });
+ // hides menus... - so this cant be on a menu...
+ Roo.menu.MenuMgr.hideAll();
- if(this.buttons.length > 0){
- // tables are required to maintain order and for correct IE layout
- var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
- cls:"x-form-btns x-form-btns-"+this.buttonAlign,
- html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
- }}, null, true);
- var tr = tb.getElementsByTagName('tr')[0];
- for(var i = 0, len = this.buttons.length; i < len; i++) {
- var b = this.buttons[i];
- var td = document.createElement('td');
- td.className = 'x-form-btn-td';
- b.render(tr.appendChild(td));
- }
- }
- if(this.monitorValid){ // initialize after render
- this.startMonitoring();
- }
- this.fireEvent('rendered', this);
- return this;
+ //this.editorsyncValue();
},
-
- /**
- * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
- * @param {String/Object} config A string becomes the button text, an object can either be a Button config
- * object or a valid Roo.DomHelper element config
- * @param {Function} handler The function called when the button is clicked
- * @param {Object} scope (optional) The scope of the handler function
- * @return {Roo.Button}
- */
- addButton : function(config, handler, scope){
- var bc = {
- handler: handler,
- scope: scope,
- minWidth: this.minButtonWidth,
- hideParent:true
- };
- if(typeof config == "string"){
- bc.text = config;
- }else{
- Roo.apply(bc, config);
+
+
+ createFontOptions : function(){
+ var buf = [], fs = this.fontFamilies, ff, lc;
+
+
+
+ for(var i = 0, len = fs.length; i< len; i++){
+ ff = fs[i];
+ lc = ff.toLowerCase();
+ buf.push(
+ '<option value="',lc,'" style="font-family:',ff,';"',
+ (this.defaultFont == lc ? ' selected="true">' : '>'),
+ ff,
+ '</option>'
+ );
}
- var btn = new Roo.Button(null, bc);
- this.buttons.push(btn);
- return btn;
+ return buf.join('');
},
-
- /**
- * Adds a series of form elements (using the xtype property as the factory method.
- * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
- * @param {Object} config
- */
- addxtype : function()
- {
- var ar = Array.prototype.slice.call(arguments, 0);
- var ret = false;
- for(var i = 0; i < ar.length; i++) {
- if (!ar[i]) {
- continue; // skip -- if this happends something invalid got sent, we
- // should ignore it, as basically that interface element will not show up
- // and that should be pretty obvious!!
- }
-
- if (Roo.form[ar[i].xtype]) {
- ar[i].form = this;
- var fe = Roo.factory(ar[i], Roo.form);
- if (!ret) {
- ret = fe;
- }
- fe.form = this;
- if (fe.store) {
- fe.store.form = this;
- }
- if (fe.isLayout) {
-
- this.start(fe);
- this.allItems.push(fe);
- if (fe.items && fe.addxtype) {
- fe.addxtype.apply(fe, fe.items);
- delete fe.items;
- }
- this.end();
- continue;
+ toggleSourceEdit : function(sourceEditMode){
+
+ Roo.log("toolbar toogle");
+ if(sourceEditMode === undefined){
+ sourceEditMode = !this.sourceEditMode;
+ }
+ this.sourceEditMode = sourceEditMode === true;
+ var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
+ // just toggle the button?
+ if(btn.pressed !== this.sourceEditMode){
+ btn.toggle(this.sourceEditMode);
+ return;
+ }
+
+ if(sourceEditMode){
+ Roo.log("disabling buttons");
+ this.tb.items.each(function(item){
+ if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
+ item.disable();
}
-
-
-
- this.add(fe);
- // console.log('adding ' + ar[i].xtype);
- }
- if (ar[i].xtype == 'Button') {
- //console.log('adding button');
- //console.log(ar[i]);
- this.addButton(ar[i]);
- this.allItems.push(fe);
- continue;
- }
+ });
+
+ }else{
+ Roo.log("enabling buttons");
+ if(this.editorcore.initialized){
+ this.tb.items.each(function(item){
+ item.enable();
+ });
+ // initialize 'blocks'
+ Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+ Roo.htmleditor.Block.factory(e).updateElement(e);
+ },this);
- if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
- alert('end is not supported on xtype any more, use items');
- // this.end();
- // //console.log('adding end');
}
}
- return ret;
+ Roo.log("calling toggole on editor");
+ // tell the editor that it's been pressed..
+ this.editor.toggleSourceEdit(sourceEditMode);
+
},
-
- /**
- * Starts monitoring of the valid state of this form. Usually this is done by passing the config
- * option "monitorValid"
- */
- startMonitoring : function(){
- if(!this.bound){
- this.bound = true;
- Roo.TaskMgr.start({
- run : this.bindHandler,
- interval : this.monitorPoll || 200,
- scope: this
- });
- }
+ /**
+ * Object collection of toolbar tooltips for the buttons in the editor. The key
+ * is the command id associated with that button and the value is a valid QuickTips object.
+ * For example:
+<pre><code>
+{
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
},
-
- /**
- * Stops monitoring of the valid state of this form
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ ...
+</code></pre>
+ * @type Object
*/
- stopMonitoring : function(){
- this.bound = false;
+ buttonTips : {
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ underline : {
+ title: 'Underline (Ctrl+U)',
+ text: 'Underline the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ strikethrough : {
+ title: 'Strikethrough',
+ text: 'Strikethrough the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ increasefontsize : {
+ title: 'Grow Text',
+ text: 'Increase the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ decreasefontsize : {
+ title: 'Shrink Text',
+ text: 'Decrease the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ backcolor : {
+ title: 'Text Highlight Color',
+ text: 'Change the background color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ forecolor : {
+ title: 'Font Color',
+ text: 'Change the color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyleft : {
+ title: 'Align Text Left',
+ text: 'Align text to the left.',
+ cls: 'x-html-editor-tip'
+ },
+ justifycenter : {
+ title: 'Center Text',
+ text: 'Center text in the editor.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyright : {
+ title: 'Align Text Right',
+ text: 'Align text to the right.',
+ cls: 'x-html-editor-tip'
+ },
+ insertunorderedlist : {
+ title: 'Bullet List',
+ text: 'Start a bulleted list.',
+ cls: 'x-html-editor-tip'
+ },
+ insertorderedlist : {
+ title: 'Numbered List',
+ text: 'Start a numbered list.',
+ cls: 'x-html-editor-tip'
+ },
+ createlink : {
+ title: 'Hyperlink',
+ text: 'Make the selected text a hyperlink.',
+ cls: 'x-html-editor-tip'
+ },
+ sourceedit : {
+ title: 'Source Edit',
+ text: 'Switch to source editing mode.',
+ cls: 'x-html-editor-tip'
+ }
},
-
// private
- bindHandler : function(){
- if(!this.bound){
- return false; // stops binding
+ onDestroy : function(){
+ if(this.rendered){
+
+ this.tb.items.each(function(item){
+ if(item.menu){
+ item.menu.removeAll();
+ if(item.menu.el){
+ item.menu.el.destroy();
+ }
+ }
+ item.destroy();
+ });
+
}
- var valid = true;
- this.items.each(function(f){
- if(!f.isValid(true)){
- valid = false;
- return false;
- }
+ },
+ onFirstFocus: function() {
+ this.tb.items.each(function(item){
+ item.enable();
});
- for(var i = 0, len = this.buttons.length; i < len; i++){
- var btn = this.buttons[i];
- if(btn.formBind === true && btn.disabled === valid){
- btn.setDisabled(!valid);
- }
- }
- this.fireEvent('clientvalidation', this, valid);
}
-
-
-
-
-
-
-
-
-});
+};
-// back compat
-Roo.Form = Roo.form.Form;
+
+
+// <script type="text/javascript">
/*
- * Based on:
+ * Based on
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-// as we use this in bootstrap.
-Roo.namespace('Roo.form');
- /**
- * @class Roo.form.Action
- * Internal Class used to handle form actions
- * @constructor
- * @param {Roo.form.BasicForm} el The form element or its id
- * @param {Object} config Configuration options
+ *
+
*/
-
-// define the action interface
-Roo.form.Action = function(form, options){
- this.form = form;
- this.options = options || {};
-};
-/**
- * Client Validation Failed
- * @const
- */
-Roo.form.Action.CLIENT_INVALID = 'client';
-/**
- * Server Validation Failed
- * @const
- */
-Roo.form.Action.SERVER_INVALID = 'server';
- /**
- * Connect to Server Failed
- * @const
- */
-Roo.form.Action.CONNECT_FAILURE = 'connect';
/**
- * Reading Data from Server Failed
- * @const
- */
-Roo.form.Action.LOAD_FAILURE = 'load';
-
-Roo.form.Action.prototype = {
- type : 'default',
- failureType : undefined,
- response : undefined,
- result : undefined,
-
- // interface method
- run : function(options){
-
- },
-
- // interface method
- success : function(response){
+ * @class Roo.form.HtmlEditor.ToolbarContext
+ * Context Toolbar
+ *
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+ ....
+ toolbars : [
+ { xtype: 'ToolbarStandard', styles : {} }
+ { xtype: 'ToolbarContext', disable : {} }
+ ]
+})
- },
+
+ *
+ * @config : {Object} disable List of elements to disable.. (not done yet.)
+ * @config : {Object} styles Map of styles available.
+ *
+ */
- // interface method
- handleResponse : function(response){
+Roo.form.HtmlEditor.ToolbarContext = function(config)
+{
+
+ Roo.apply(this, config);
+ //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+ // dont call parent... till later.
+ this.styles = this.styles || {};
+}
- },
+
- // default connection failure
- failure : function(response){
+Roo.form.HtmlEditor.ToolbarContext.types = {
+ 'IMG' : [
+ {
+ name : 'width',
+ title: "Width",
+ width: 40
+ },
+ {
+ name : 'height',
+ title: "Height",
+ width: 40
+ },
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
+
+ },
+ {
+ name : 'border',
+ title: "Border",
+ width: 40
+ },
+ {
+ name : 'alt',
+ title: "Alt",
+ width: 120
+ },
+ {
+ name : 'src',
+ title: "Src",
+ width: 220
+ }
- this.response = response;
- this.failureType = Roo.form.Action.CONNECT_FAILURE;
- this.form.afterAction(this, false);
- },
-
- processResponse : function(response){
- this.response = response;
- if(!response.responseText){
- return true;
+ ],
+
+ 'FIGURE' : [
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
}
- this.result = this.handleResponse(response);
- return this.result;
- },
-
- // utility functions used internally
- getUrl : function(appendParams){
- var url = this.options.url || this.form.url || this.form.el.dom.action;
- if(appendParams){
- var p = this.getParams();
- if(p){
- url += (url.indexOf('?') != -1 ? '&' : '?') + p;
- }
+ ],
+ 'A' : [
+ {
+ name : 'name',
+ title: "Name",
+ width: 50
+ },
+ {
+ name : 'target',
+ title: "Target",
+ width: 120
+ },
+ {
+ name : 'href',
+ title: "Href",
+ width: 220
+ } // border?
+
+ ],
+
+ 'INPUT' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'value',
+ title: "Value",
+ width: 120
+ },
+ {
+ name : 'width',
+ title: "Width",
+ width: 40
}
- return url;
- },
-
- getMethod : function(){
- return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
- },
-
- getParams : function(){
- var bp = this.form.baseParams;
- var p = this.options.params;
- if(p){
- if(typeof p == "object"){
- p = Roo.urlEncode(Roo.applyIf(p, bp));
- }else if(typeof p == 'string' && bp){
- p += '&' + Roo.urlEncode(bp);
- }
- }else if(bp){
- p = Roo.urlEncode(bp);
+ ],
+ 'LABEL' : [
+ {
+ name : 'for',
+ title: "For",
+ width: 120
}
- return p;
- },
+ ],
+ 'TEXTAREA' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'rows',
+ title: "Rows",
+ width: 20
+ },
+ {
+ name : 'cols',
+ title: "Cols",
+ width: 20
+ }
+ ],
+ 'SELECT' : [
+ {
+ name : 'name',
+ title: "name",
+ width: 120
+ },
+ {
+ name : 'selectoptions',
+ title: "Options",
+ width: 200
+ }
+ ],
+
+ // should we really allow this??
+ // should this just be
+ 'BODY' : [
+
+ {
+ name : 'title',
+ title: "Title",
+ width: 200,
+ disabled : true
+ }
+ ],
+
+ '*' : [
+ // empty.
+ ]
- createCallback : function(){
- return {
- success: this.success,
- failure: this.failure,
- scope: this,
- timeout: (this.form.timeout*1000),
- upload: this.form.fileUpload ? this.success : undefined
- };
- }
};
-Roo.form.Action.Submit = function(form, options){
- Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
+// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
+Roo.form.HtmlEditor.ToolbarContext.stores = false;
+
+Roo.form.HtmlEditor.ToolbarContext.options = {
+ 'font-family' : [
+ [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
+ [ 'Courier New', 'Courier New'],
+ [ 'Tahoma', 'Tahoma'],
+ [ 'Times New Roman,serif', 'Times'],
+ [ 'Verdana','Verdana' ]
+ ]
};
-Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
- type : 'submit',
+// fixme - these need to be configurable..
+
- haveProgress : false,
- uploadComplete : false,
+//Roo.form.HtmlEditor.ToolbarContext.types
+
+
+Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
- // uploadProgress indicator.
- uploadProgress : function()
+ tb: false,
+
+ rendered: false,
+
+ editor : false,
+ editorcore : false,
+ /**
+ * @cfg {Object} disable List of toolbar elements to disable
+
+ */
+ disable : false,
+ /**
+ * @cfg {Object} styles List of styles
+ * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
+ *
+ * These must be defined in the page, so they get rendered correctly..
+ * .headline { }
+ * TD.underline { }
+ *
+ */
+ styles : false,
+
+ options: false,
+
+ toolbars : false,
+
+ init : function(editor)
{
- if (!this.form.progressUrl) {
+ this.editor = editor;
+ this.editorcore = editor.editorcore ? editor.editorcore : editor;
+ var editorcore = this.editorcore;
+
+ var fid = editorcore.frameId;
+ var etb = this;
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: editorcore, // was editor...
+ handler:handler||editorcore.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
+ };
+ }
+ // create a new element.
+ var wdiv = editor.wrap.createChild({
+ tag: 'div'
+ }, editor.wrap.dom.firstChild.nextSibling, true);
+
+ // can we do this more than once??
+
+ // stop form submits
+
+
+ // disable everything...
+ var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+ this.toolbars = {};
+ // block toolbars are built in updateToolbar when needed.
+ for (var i in ty) {
+
+ this.toolbars[i] = this.buildToolbar(ty[i],i);
+ }
+ this.tb = this.toolbars.BODY;
+ this.tb.el.show();
+ this.buildFooter();
+ this.footer.show();
+ editor.on('hide', function( ) { this.footer.hide() }, this);
+ editor.on('show', function( ) { this.footer.show() }, this);
+
+
+ this.rendered = true;
+
+ // the all the btns;
+ editor.on('editorevent', this.updateToolbar, this);
+ // other toolbars need to implement this..
+ //editor.on('editmodechange', this.updateToolbar, this);
+ },
+
+
+
+ /**
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
+ *
+ * Note you can force an update by calling on('editorevent', scope, false)
+ */
+ updateToolbar: function(editor ,ev, sel)
+ {
+
+ if (ev) {
+ ev.stopEvent(); // se if we can stop this looping with mutiple events.
+ }
+
+ //Roo.log(ev);
+ // capture mouse up - this is handy for selecting images..
+ // perhaps should go somewhere else...
+ if(!this.editorcore.activated){
+ this.editor.onFirstFocus();
return;
}
+ //Roo.log(ev ? ev.target : 'NOTARGET');
- if (!this.haveProgress) {
- Roo.MessageBox.progress("Uploading", "Uploading");
+
+ // http://developer.yahoo.com/yui/docs/simple-editor.js.html
+ // selectNode - might want to handle IE?
+
+
+
+ if (ev &&
+ (ev.type == 'mouseup' || ev.type == 'click' ) &&
+ ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
+ // they have click on an image...
+ // let's see if we can change the selection...
+ sel = ev.target;
+
+ // this triggers looping?
+ //this.editorcore.selectNode(sel);
+
}
- if (this.uploadComplete) {
- Roo.MessageBox.hide();
- return;
+
+ // this forces an id..
+ Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+ e.classList.remove('roo-ed-selection');
+ });
+ //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
+ //Roo.get(node).addClass('roo-ed-selection');
+
+ //var updateFooter = sel ? false : true;
+
+
+ var ans = this.editorcore.getAllAncestors();
+
+ // pick
+ var ty = Roo.form.HtmlEditor.ToolbarContext.types;
+
+ if (!sel) {
+ sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
+ sel = sel ? sel : this.editorcore.doc.body;
+ sel = sel.tagName.length ? sel : this.editorcore.doc.body;
+
+ }
+
+ var tn = sel.tagName.toUpperCase();
+ var lastSel = this.tb.selectedNode;
+ this.tb.selectedNode = sel;
+ var left_label = tn;
+
+ // ok see if we are editing a block?
+
+ var db = false;
+ // you are not actually selecting the block.
+ if (sel && sel.hasAttribute('data-block')) {
+ db = sel;
+ } else if (sel && sel.closest('[data-block]')) {
+
+ db = sel.closest('[data-block]');
+ //var cepar = sel.closest('[contenteditable=true]');
+ //if (db && cepar && cepar.tagName != 'BODY') {
+ // db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+ //}
}
- this.haveProgress = true;
-
- var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
- var c = new Roo.data.Connection();
- c.request({
- url : this.form.progressUrl,
- params: {
- id : uid
- },
- method: 'GET',
- success : function(req){
- //console.log(data);
- var rdata = false;
- var edata;
- try {
- rdata = Roo.decode(req.responseText)
- } catch (e) {
- Roo.log("Invalid data from server..");
- Roo.log(edata);
- return;
- }
- if (!rdata || !rdata.success) {
- Roo.log(rdata);
- Roo.MessageBox.alert(Roo.encode(rdata));
- return;
- }
- var data = rdata.data;
+ var block = false;
+ //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
+ if (db && this.editorcore.enableBlocks) {
+ block = Roo.htmleditor.Block.factory(db);
+
+
+ if (block) {
+ db.className = (
+ db.classList.length > 0 ? db.className + ' ' : ''
+ ) + 'roo-ed-selection';
+
+ // since we removed it earlier... its not there..
+ tn = 'BLOCK.' + db.getAttribute('data-block');
- if (this.uploadComplete) {
- Roo.MessageBox.hide();
- return;
- }
-
- if (data){
- Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
- Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
- );
+ //this.editorcore.selectNode(db);
+ if (typeof(this.toolbars[tn]) == 'undefined') {
+ this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
}
- this.uploadProgress.defer(2000,this);
- },
-
- failure: function(data) {
- Roo.log('progress url failed ');
- Roo.log(data);
- },
- scope : this
- });
-
- },
-
-
- run : function()
- {
- // run get Values on the form, so it syncs any secondary forms.
- this.form.getValues();
-
- var o = this.options;
- var method = this.getMethod();
- var isPost = method == 'POST';
- if(o.clientValidation === false || this.form.isValid()){
+ this.toolbars[tn].selectedNode = db;
+ left_label = block.friendly_name;
+ ans = this.editorcore.getAllAncestors();
+ }
- if (this.form.progressUrl) {
- this.form.findField('UPLOAD_IDENTIFIER').setValue(
- (new Date() * 1) + '' + Math.random());
-
- }
+
+ }
+
+
+ if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
+ return; // no change?
+ }
+
+
+
+ this.tb.el.hide();
+ ///console.log("show: " + tn);
+ this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
+
+ this.tb.el.show();
+ // update name
+ this.tb.items.first().el.innerHTML = left_label + ': ';
+
+
+ // update attributes
+ if (block && this.tb.fields) {
+
+ this.tb.fields.each(function(e) {
+ e.setValue(block[e.name]);
+ });
- Roo.Ajax.request(Roo.apply(this.createCallback(), {
- form:this.form.el.dom,
- url:this.getUrl(!isPost),
- method: method,
- params:isPost ? this.getParams() : null,
- isUpload: this.form.fileUpload,
- formData : this.form.formData
- }));
- this.uploadProgress();
-
- }else if (o.clientValidation !== false){ // client validation failed
- this.failureType = Roo.form.Action.CLIENT_INVALID;
- this.form.afterAction(this, false);
+ } else if (this.tb.fields && this.tb.selectedNode) {
+ this.tb.fields.each( function(e) {
+ if (e.stylename) {
+ e.setValue(this.tb.selectedNode.style[e.stylename]);
+ return;
+ }
+ e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
+ }, this);
+ this.updateToolbarStyles(this.tb.selectedNode);
}
- },
+
+
+
+ Roo.menu.MenuMgr.hideAll();
- success : function(response)
- {
- this.uploadComplete= true;
- if (this.haveProgress) {
- Roo.MessageBox.hide();
- }
- var result = this.processResponse(response);
- if(result === true || result.success){
- this.form.afterAction(this, true);
- return;
- }
- if(result.errors){
- this.form.markInvalid(result.errors);
- this.failureType = Roo.form.Action.SERVER_INVALID;
- }
- this.form.afterAction(this, false);
+
+ // update the footer
+ //
+ this.updateFooter(ans);
+
},
- failure : function(response)
+
+ updateToolbarStyles : function(sel)
{
- this.uploadComplete= true;
- if (this.haveProgress) {
- Roo.MessageBox.hide();
+ var hasStyles = false;
+ for(var i in this.styles) {
+ hasStyles = true;
+ break;
}
- this.response = response;
- this.failureType = Roo.form.Action.CONNECT_FAILURE;
- this.form.afterAction(this, false);
- },
-
- handleResponse : function(response){
- if(this.form.errorReader){
- var rs = this.form.errorReader.read(response);
- var errors = [];
- if(rs.records){
- for(var i = 0, len = rs.records.length; i < len; i++) {
- var r = rs.records[i];
- errors[i] = r.data;
- }
- }
- if(errors.length < 1){
- errors = null;
+ // update styles
+ if (hasStyles && this.tb.hasStyles) {
+ var st = this.tb.fields.item(0);
+
+ st.store.removeAll();
+ var cn = sel.className.split(/\s+/);
+
+ var avs = [];
+ if (this.styles['*']) {
+
+ Roo.each(this.styles['*'], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
}
- return {
- success : rs.success,
- errors : errors
- };
- }
- var ret = false;
- try {
- var rt = response.responseText;
- if (rt.match(/^\<!--\[CDATA\[/)) {
- rt = rt.replace(/^\<!--\[CDATA\[/,'');
- rt = rt.replace(/\]\]--\>$/,'');
+ if (this.styles[tn]) {
+ Roo.each(this.styles[tn], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
}
- ret = Roo.decode(rt);
- } catch (e) {
- ret = {
- success: false,
- errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
- errors : []
- };
+ st.store.loadData(avs);
+ st.collapse();
+ st.setValue(cn);
}
- return ret;
-
- }
-});
-
-
-Roo.form.Action.Load = function(form, options){
- Roo.form.Action.Load.superclass.constructor.call(this, form, options);
- this.reader = this.form.reader;
-};
-
-Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
- type : 'load',
-
- run : function(){
-
- Roo.Ajax.request(Roo.apply(
- this.createCallback(), {
- method:this.getMethod(),
- url:this.getUrl(false),
- params:this.getParams()
- }));
},
-
- success : function(response){
-
- var result = this.processResponse(response);
- if(result === true || !result.success || !result.data){
- this.failureType = Roo.form.Action.LOAD_FAILURE;
- this.form.afterAction(this, false);
+
+
+ updateFooter : function(ans)
+ {
+ var html = '';
+ if (ans === false) {
+ this.footDisp.dom.innerHTML = '';
return;
}
- this.form.clearInvalid();
- this.form.setValues(result.data);
- this.form.afterAction(this, true);
+
+ this.footerEls = ans.reverse();
+ Roo.each(this.footerEls, function(a,i) {
+ if (!a) { return; }
+ html += html.length ? ' > ' : '';
+
+ html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
+
+ });
+
+ //
+ var sz = this.footDisp.up('td').getSize();
+ this.footDisp.dom.style.width = (sz.width -10) + 'px';
+ this.footDisp.dom.style.marginLeft = '5px';
+
+ this.footDisp.dom.style.overflow = 'hidden';
+
+ this.footDisp.dom.innerHTML = html;
+
+
},
-
- handleResponse : function(response){
- if(this.form.reader){
- var rs = this.form.reader.read(response);
- var data = rs.records && rs.records[0] ? rs.records[0].data : null;
- return {
- success : rs.success,
- data : data
- };
- }
- return Roo.decode(response.responseText);
- }
-});
-
-Roo.form.Action.ACTION_TYPES = {
- 'load' : Roo.form.Action.Load,
- 'submit' : Roo.form.Action.Submit
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Layout
- * @extends Roo.Component
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
- * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Layout = function(config){
- var xitems = [];
- if (config.items) {
- xitems = config.items;
- delete config.items;
- }
- Roo.form.Layout.superclass.constructor.call(this, config);
- this.stack = [];
- Roo.each(xitems, this.addxtype, this);
-
-};
-
-Roo.extend(Roo.form.Layout, Roo.Component, {
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
- */
- /**
- * @cfg {String/Object/Function} style
- * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
- * a function which returns such a specification.
- */
- /**
- * @cfg {String} labelAlign (left|top|right)
- * Valid values are "left," "top" and "right" (defaults to "left")
- */
- /**
- * @cfg {Number} labelWidth
- * Fixed width in pixels of all field labels (defaults to undefined)
- */
- /**
- * @cfg {Boolean} clear
- * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
- */
- clear : true,
- /**
- * @cfg {String} labelSeparator
- * The separator to use after field labels (defaults to ':')
- */
- labelSeparator : ':',
- /**
- * @cfg {Boolean} hideLabels
- * True to suppress the display of field labels in this layout (defaults to false)
- */
- hideLabels : false,
-
- // private
- defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
-
- isLayout : true,
-
+
+
// private
- onRender : function(ct, position){
- if(this.el){ // from markup
- this.el = Roo.get(this.el);
- }else { // generate
- var cfg = this.getAutoCreate();
- this.el = ct.createChild(cfg, position);
- }
- if(this.style){
- this.el.applyStyles(this.style);
- }
- if(this.labelAlign){
- this.el.addClass('x-form-label-'+this.labelAlign);
- }
- if(this.hideLabels){
- this.labelStyle = "display:none";
- this.elementStyle = "padding-left:0;";
- }else{
- if(typeof this.labelWidth == 'number'){
- this.labelStyle = "width:"+this.labelWidth+"px;";
- this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
- }
- if(this.labelAlign == 'top'){
- this.labelStyle = "width:auto;";
- this.elementStyle = "padding-left:0;";
- }
- }
- var stack = this.stack;
- var slen = stack.length;
- if(slen > 0){
- if(!this.fieldTpl){
- var t = new Roo.Template(
- '<div class="x-form-item {5}">',
- '<label for="{0}" style="{2}">{1}{4}</label>',
- '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
- '</div>',
- '</div><div class="x-form-clear-left"></div>'
- );
- t.disableFormats = true;
- t.compile();
- Roo.form.Layout.prototype.fieldTpl = t;
- }
- for(var i = 0; i < slen; i++) {
- if(stack[i].isFormField){
- this.renderField(stack[i]);
- }else{
- this.renderComponent(stack[i]);
+ onDestroy : function(){
+ if(this.rendered){
+
+ this.tb.items.each(function(item){
+ if(item.menu){
+ item.menu.removeAll();
+ if(item.menu.el){
+ item.menu.el.destroy();
+ }
}
- }
- }
- if(this.clear){
- this.el.createChild({cls:'x-form-clear'});
+ item.destroy();
+ });
+
}
},
-
- // private
- renderField : function(f){
- f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
- f.id, //0
- f.fieldLabel, //1
- f.labelStyle||this.labelStyle||'', //2
- this.elementStyle||'', //3
- typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
- f.itemCls||this.itemCls||'' //5
- ], true).getPrevSibling());
- },
-
- // private
- renderComponent : function(c){
- c.render(c.isLayout ? this.el : this.el.createChild());
+ onFirstFocus: function() {
+ // need to do this for all the toolbars..
+ this.tb.items.each(function(item){
+ item.enable();
+ });
},
- /**
- * Adds a object form elements (using the xtype property as the factory method.)
- * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column
- * @param {Object} config
- */
- addxtype : function(o)
+ buildToolbar: function(tlist, nm, friendly_name, block)
{
- // create the lement.
- o.form = this.form;
- var fe = Roo.factory(o, Roo.form);
- this.form.allItems.push(fe);
- this.stack.push(fe);
+ var editor = this.editor;
+ var editorcore = this.editorcore;
+ // create a new element.
+ var wdiv = editor.wrap.createChild({
+ tag: 'div'
+ }, editor.wrap.dom.firstChild.nextSibling, true);
- if (fe.isFormField) {
- this.form.items.add(fe);
- }
-
- return fe;
- }
-});
-
-
-/**
- * @class Roo.form.Column
- * @extends Roo.form.Layout
- * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
- * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Column = function(config){
- Roo.form.Column.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Column, Roo.form.Layout, {
- /**
- * @cfg {Number/String} width
- * The fixed width of the column in pixels or CSS value (defaults to "auto")
- */
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
- */
-
- // private
- defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
-
- // private
- onRender : function(ct, position){
- Roo.form.Column.superclass.onRender.call(this, ct, position);
- if(this.width){
- this.el.setWidth(this.width);
+
+ var tb = new Roo.Toolbar(wdiv);
+ ///this.tb = tb; // << this sets the active toolbar..
+ if (tlist === false && block) {
+ tlist = block.contextMenu(this);
}
- }
-});
-
-/**
- * @class Roo.form.Row
- * @extends Roo.form.Layout
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
- * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-
-
-Roo.form.Row = function(config){
- Roo.form.Row.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Row, Roo.form.Layout, {
- /**
- * @cfg {Number/String} width
- * The fixed width of the column in pixels or CSS value (defaults to "auto")
- */
- /**
- * @cfg {Number/String} height
- * The fixed height of the column in pixels or CSS value (defaults to "auto")
- */
- defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+
+ tb.hasStyles = false;
+ tb.name = nm;
+
+ tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
+
+ var styles = Array.from(this.styles);
+
+
+ // styles...
+ if (styles && styles.length) {
+ tb.hasStyles = true;
+ // this needs a multi-select checkbox...
+ tb.addField( new Roo.form.ComboBox({
+ store: new Roo.data.SimpleStore({
+ id : 'val',
+ fields: ['val', 'selected'],
+ data : []
+ }),
+ name : '-roo-edit-className',
+ attrname : 'className',
+ displayField: 'val',
+ typeAhead: false,
+ mode: 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Select Style',
+ selectOnFocus:true,
+ width: 130,
+ listeners : {
+ 'select': function(c, r, i) {
+ // initial support only for on class per el..
+ tb.selectedNode.className = r ? r.get('val') : '';
+ editorcore.syncValue();
+ }
+ }
- padWidth : 20,
- // private
- onRender : function(ct, position){
- //console.log('row render');
- if(!this.rowTpl){
- var t = new Roo.Template(
- '<div class="x-form-item {5}" style="float:left;width:{6}px">',
- '<label for="{0}" style="{2}">{1}{4}</label>',
- '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
- '</div>',
- '</div>'
- );
- t.disableFormats = true;
- t.compile();
- Roo.form.Layout.prototype.rowTpl = t;
+ }));
}
- this.fieldTpl = this.rowTpl;
- //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
- var labelWidth = 100;
+ var tbc = Roo.form.HtmlEditor.ToolbarContext;
- if ((this.labelAlign != 'top')) {
- if (typeof this.labelWidth == 'number') {
- labelWidth = this.labelWidth
+
+ for (var i = 0; i < tlist.length; i++) {
+
+ // newer versions will use xtype cfg to create menus.
+ if (typeof(tlist[i].xtype) != 'undefined') {
+
+ tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
+
+
+ continue;
}
- this.padWidth = 20 + labelWidth;
+ var item = tlist[i];
+ tb.add(item.title + ": ");
+
+
+ //optname == used so you can configure the options available..
+ var opts = item.opts ? item.opts : false;
+ if (item.optname) { // use the b
+ opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
+
+ }
+
+ if (opts) {
+ // opts == pulldown..
+ tb.addField( new Roo.form.ComboBox({
+ store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
+ id : 'val',
+ fields: ['val', 'display'],
+ data : opts
+ }),
+ name : '-roo-edit-' + tlist[i].name,
+
+ attrname : tlist[i].name,
+ stylename : item.style ? item.style : false,
+
+ displayField: item.displayField ? item.displayField : 'val',
+ valueField : 'val',
+ typeAhead: false,
+ mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
+ editable : false,
+ triggerAction: 'all',
+ emptyText:'Select',
+ selectOnFocus:true,
+ width: item.width ? item.width : 130,
+ listeners : {
+ 'select': function(c, r, i) {
+
+
+ if (c.stylename) {
+ tb.selectedNode.style[c.stylename] = r.get('val');
+ editorcore.syncValue();
+ return;
+ }
+ if (r === false) {
+ tb.selectedNode.removeAttribute(c.attrname);
+ editorcore.syncValue();
+ return;
+ }
+ tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+ editorcore.syncValue();
+ }
+ }
+
+ }));
+ continue;
+
+
+ /*
+ tb.addField( new Roo.form.TextField({
+ name: i,
+ width: 100,
+ //allowBlank:false,
+ value: ''
+ }));
+ continue;
+ */
+ }
+ tb.addField( new Roo.form.TextField({
+ name: '-roo-edit-' + tlist[i].name,
+ attrname : tlist[i].name,
+
+ width: item.width,
+ //allowBlank:true,
+ value: '',
+ listeners: {
+ 'change' : function(f, nv, ov) {
+
+
+ tb.selectedNode.setAttribute(f.attrname, nv);
+ editorcore.syncValue();
+ }
+ }
+ }));
+
}
- Roo.form.Column.superclass.onRender.call(this, ct, position);
- if(this.width){
- this.el.setWidth(this.width);
- }
- if(this.height){
- this.el.setHeight(this.height);
+ var _this = this;
+ var show_delete = !block || block.deleteTitle !== false;
+ if(nm == 'BODY'){
+ show_delete = false;
+ tb.addSeparator();
+
+ tb.addButton( {
+ text: 'Stylesheets',
+
+ listeners : {
+ click : function ()
+ {
+ _this.editor.fireEvent('stylesheetsclick', _this.editor);
+ }
+ }
+ });
}
+
+ tb.addFill();
+ if (show_delete) {
+ tb.addButton({
+ text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+
+ listeners : {
+ click : function ()
+ {
+ var sn = tb.selectedNode;
+ if (block) {
+ sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
+
+ }
+ if (!sn) {
+ return;
+ }
+ var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+ if (sn.hasAttribute('data-block')) {
+ stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
+ sn.parentNode.removeChild(sn);
+
+ } else if (sn && sn.tagName != 'BODY') {
+ // remove and keep parents.
+ a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+ a.replaceTag(sn);
+ }
+
+
+ var range = editorcore.createRange();
+
+ range.setStart(stn,0);
+ range.setEnd(stn,0);
+ var selection = editorcore.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+
+ //_this.updateToolbar(null, null, pn);
+ _this.updateToolbar(null, null, null);
+ _this.updateFooter(false);
+
+ }
+ }
+
+
+
+
+ });
+ }
+
+ tb.el.on('click', function(e){
+ e.preventDefault(); // what does this do?
+ });
+ tb.el.setVisibilityMode( Roo.Element.DISPLAY);
+ tb.el.hide();
+
+ // dont need to disable them... as they will get hidden
+ return tb;
+
+
},
-
- // private
- renderField : function(f){
- f.fieldEl = this.fieldTpl.append(this.el, [
- f.id, f.fieldLabel,
- f.labelStyle||this.labelStyle||'',
- this.elementStyle||'',
- typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
- f.itemCls||this.itemCls||'',
- f.width ? f.width + this.padWidth : 160 + this.padWidth
- ],true);
+ buildFooter : function()
+ {
+
+ var fel = this.editor.wrap.createChild();
+ this.footer = new Roo.Toolbar(fel);
+ // toolbar has scrolly on left / right?
+ var footDisp= new Roo.Toolbar.Fill();
+ var _t = this;
+ this.footer.add(
+ {
+ text : '<',
+ xtype: 'Button',
+ handler : function() {
+ _t.footDisp.scrollTo('left',0,true)
+ }
+ }
+ );
+ this.footer.add( footDisp );
+ this.footer.add(
+ {
+ text : '>',
+ xtype: 'Button',
+ handler : function() {
+ // no animation..
+ _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+ }
+ }
+ );
+ var fel = Roo.get(footDisp.el);
+ fel.addClass('x-editor-context');
+ this.footDispWrap = fel;
+ this.footDispWrap.overflow = 'hidden';
+
+ this.footDisp = fel.createChild();
+ this.footDispWrap.on('click', this.onContextClick, this)
+
+
+ },
+ // when the footer contect changes
+ onContextClick : function (ev,dom)
+ {
+ ev.preventDefault();
+ var cn = dom.className;
+ //Roo.log(cn);
+ if (!cn.match(/x-ed-loc-/)) {
+ return;
+ }
+ var n = cn.split('-').pop();
+ var ans = this.footerEls;
+ var sel = ans[n];
+
+ this.editorcore.selectNode(sel);
+
+
+ this.updateToolbar(null, null, sel);
+
+
}
+
+
+
+
+
});
-
-/**
- * @class Roo.form.FieldSet
- * @extends Roo.form.Layout
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.FieldSet = function(config){
- Roo.form.FieldSet.superclass.constructor.call(this, config);
-};
-Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
- /**
- * @cfg {String} legend
- * The text to display as the legend for the FieldSet (defaults to '')
- */
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
- */
- // private
- defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
- // private
- onRender : function(ct, position){
- Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
- if(this.legend){
- this.setLegend(this.legend);
- }
- },
- // private
- setLegend : function(text){
- if(this.rendered){
- this.el.child('legend').update(text);
- }
- }
-});/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.VTypes
- * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
- * @static
+ * @class Roo.form.BasicForm
+ * @extends Roo.util.Observable
+ * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The form element or its id
+ * @param {Object} config Configuration options
*/
-Roo.form.VTypes = function(){
- // closure these in so they are only created once.
- var alpha = /^[a-zA-Z_]+$/;
- var alphanum = /^[a-zA-Z0-9_]+$/;
- var email = /^([\w'-]+)(\.[\w'-]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
- var url = /^(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
- var urlWeb = /^((https?):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
-
- // All these messages and functions are configurable
- return {
- /**
- * The function used to validate email addresses
- * @param {String} value The email address
- */
- email : function(v){
- return email.test(v);
- },
- /**
- * The error text to display when the email validation function returns false
- * @type String
- */
- emailText : 'This field should be an e-mail address in the format "user@domain.com"',
- /**
- * The keystroke filter mask to be applied on email input
- * @type RegExp
- */
- emailMask : /[a-z0-9_\.\-@]/i,
-
- /**
- * The function used to validate URLs
- * @param {String} value The URL
- */
- url : function(v){
- return url.test(v);
- },
- /**
- * The funciton used to validate URLs (only allow schemes 'https' and 'http')
- * @param {String} v The URL
- */
- urlWeb : function(v) {
- return urlWeb.test(v);
- },
- /**
- * The error text to display when the url validation function returns false
- * @type String
- */
- urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
-
- /**
- * The function used to validate alpha values
- * @param {String} value The value
- */
- alpha : function(v){
- return alpha.test(v);
- },
- /**
- * The error text to display when the alpha validation function returns false
- * @type String
- */
- alphaText : 'This field should only contain letters and _',
- /**
- * The keystroke filter mask to be applied on alpha input
- * @type RegExp
- */
- alphaMask : /[a-z_]/i,
-
+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());
+ });
+ this.addEvents({
/**
- * The function used to validate alphanumeric values
- * @param {String} value The value
+ * @event beforeaction
+ * Fires before any action is performed. Return false to cancel the action.
+ * @param {Form} this
+ * @param {Action} action The action to be performed
*/
- alphanum : function(v){
- return alphanum.test(v);
- },
+ beforeaction: true,
/**
- * The error text to display when the alphanumeric validation function returns false
- * @type String
+ * @event actionfailed
+ * Fires when an action fails.
+ * @param {Form} this
+ * @param {Action} action The action that failed
*/
- alphanumText : 'This field should only contain letters, numbers and _',
+ actionfailed : true,
/**
- * The keystroke filter mask to be applied on alphanumeric input
- * @type RegExp
- */
- alphanumMask : /[a-z0-9_]/i
- };
-}();//<script type="text/javascript">
-
-/**
- * @class Roo.form.FCKeditor
- * @extends Roo.form.TextArea
- * Wrapper around the FCKEditor http://www.fckeditor.net
- * @constructor
- * Creates a new FCKeditor
- * @param {Object} config Configuration options
- */
-Roo.form.FCKeditor = function(config){
- Roo.form.FCKeditor.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event editorinit
- * Fired when the editor is initialized - you can add extra handlers here..
- * @param {FCKeditor} this
- * @param {Object} the FCK object.
+ * @event actioncomplete
+ * Fires when an action is completed.
+ * @param {Form} this
+ * @param {Action} action The action that completed
*/
- editorinit : true
+ actioncomplete : true
});
+ if(el){
+ this.initEl(el);
+ }
+ Roo.form.BasicForm.superclass.constructor.call(this);
-
+ Roo.form.BasicForm.popover.apply();
};
-Roo.form.FCKeditor.editors = { };
-Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
-{
- //defaultAutoCreate : {
- // tag : "textarea",style : "width:100px;height:60px;" ,autocomplete : "off"
- //},
+
+Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
+ /**
+ * @cfg {String} method
+ * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
+ */
+ /**
+ * @cfg {DataReader} reader
+ * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
+ * This is optional as there is built-in support for processing JSON.
+ */
+ /**
+ * @cfg {DataReader} errorReader
+ * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
+ * This is completely optional as there is built-in support for processing JSON.
+ */
+ /**
+ * @cfg {String} url
+ * The URL to use for form actions if one isn't supplied in the action options.
+ */
+ /**
+ * @cfg {Boolean} fileUpload
+ * Set to true if this form is a file upload.
+ */
+
+ /**
+ * @cfg {Object} baseParams
+ * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+ */
+ /**
+
+ /**
+ * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ */
+ timeout: 30,
+
// private
+ activeAction : null,
+
/**
- * @cfg {Object} fck options - see fck manual for details.
+ * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
+ * or setValues() data instead of when the form was first created.
*/
- fckconfig : false,
+ trackResetOnLoad : false,
+
/**
- * @cfg {Object} fck toolbar set (Basic or Default)
+ * childForms - used for multi-tab forms
+ * @type {Array}
*/
- toolbarSet : 'Basic',
+ childForms : false,
+
/**
- * @cfg {Object} fck BasePath
- */
- basePath : '/fckeditor/',
+ * 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.
+ * @type Mixed
+ */
+ waitMsgTarget : false,
- frame : false,
+ /**
+ * @type Boolean
+ */
+ disableMask : false,
- value : '',
+ /**
+ * @cfg {Boolean} errorMask Should the form be masked (and the active element highlighted on error - default false
+ */
+ errorMask : false,
-
- onRender : function(ct, position)
- {
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:300px;height:60px;",
- autocomplete: "new-password"
- };
- }
- Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
- /*
- if(this.grow){
- this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
- if(this.preventScrollbars){
- this.el.setStyle("overflow", "hidden");
+ /**
+ * @cfg {Number} maskOffset space around form element to mask if there is an error Default 100
+ */
+ maskOffset : 100,
+
+ // private
+ initEl : function(el){
+ this.el = Roo.get(el);
+ this.id = this.el.id || Roo.id();
+ this.el.on('submit', this.onSubmit, this);
+ this.el.addClass('x-form');
+ },
+
+ // private
+ onSubmit : function(e){
+ e.stopEvent();
+ },
+
+ /**
+ * Returns true if client-side validation on the form is successful.
+ * @return Boolean
+ */
+ isValid : function(){
+ var valid = true;
+ var target = false;
+ this.items.each(function(f){
+ if(f.validate()){
+ return;
}
- this.el.setHeight(this.growMin);
+
+ valid = false;
+
+ if(!target && f.el.isVisible(true)){
+ target = f;
+ }
+ });
+
+ if(this.errorMask && !valid){
+ Roo.form.BasicForm.popover.mask(this, target);
}
- */
- //console.log('onrender' + this.getId() );
- Roo.form.FCKeditor.editors[this.getId()] = this;
-
-
- this.replaceTextarea() ;
+ return valid;
},
+ /**
+ * Returns array of invalid form fields.
+ * @return Array
+ */
- getEditor : function() {
- return this.fckEditor;
+ invalidFields : function()
+ {
+ var ret = [];
+ this.items.each(function(f){
+ if(f.validate()){
+ return;
+ }
+ ret.push(f);
+
+ });
+
+ return ret;
},
+
+
/**
- * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
- * @param {Mixed} value The value to set
+ * DEPRICATED Returns true if any fields in this form have changed since their original load.
+ * @return Boolean
*/
+ isDirty : function(){
+ var dirty = false;
+ this.items.each(function(f){
+ if(f.isDirty()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
+ },
+ /**
+ * Returns true if any fields in this form have changed since their original load. (New version)
+ * @return Boolean
+ */
- setValue : function(value)
+ hasChanged : function()
{
- //console.log('setValue: ' + value);
+ var dirty = false;
+ this.items.each(function(f){
+ if(f.hasChanged()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
- if(typeof(value) == 'undefined') { // not sure why this is happending...
- return;
+ },
+ /**
+ * Resets all hasChanged to 'false' -
+ * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
+ * So hasChanged storage is only to be used for this purpose
+ * @return Boolean
+ */
+ resetHasChanged : function()
+ {
+ this.items.each(function(f){
+ f.resetHasChanged();
+ });
+
+ },
+
+
+ /**
+ * Performs a predefined action (submit or load) or custom actions you define on this form.
+ * @param {String} actionName The name of the action type
+ * @param {Object} options (optional) The options to pass to the action. All of the config options listed
+ * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
+ * accept other config options):
+ * <pre>
+Property Type Description
+---------------- --------------- ----------------------------------------------------------------------------------
+url String The url for the action (defaults to the form's url)
+method String The form method to use (defaults to the form's method, or POST if not defined)
+params String/Object The params to pass (defaults to the form's baseParams, or none if not defined)
+clientValidation Boolean Applies to submit only. Pass true to call form.isValid() prior to posting to
+ validate the form on the client (defaults to false)
+ * </pre>
+ * @return {BasicForm} this
+ */
+ doAction : function(action, options){
+ if(typeof action == 'string'){
+ action = new Roo.form.Action.ACTION_TYPES[action](this, options);
}
- Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+ if(this.fireEvent('beforeaction', this, action) !== false){
+ this.beforeAction(action);
+ action.run.defer(100, action);
+ }
+ return this;
+ },
+
+ /**
+ * Shortcut to do a submit action.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+ * @return {BasicForm} this
+ */
+ submit : function(options){
+ this.doAction('submit', options);
+ return this;
+ },
+
+ /**
+ * Shortcut to do a load action.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+ * @return {BasicForm} this
+ */
+ load : function(options){
+ this.doAction('load', options);
+ return this;
+ },
+
+ /**
+ * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
+ * @param {Record} record The record to edit
+ * @return {BasicForm} this
+ */
+ updateRecord : function(record){
+ record.beginEdit();
+ var fs = record.fields;
+ fs.each(function(f){
+ var field = this.findField(f.name);
+ if(field){
+ record.set(f.name, field.getValue());
+ }
+ }, this);
+ record.endEdit();
+ return this;
+ },
+
+ /**
+ * Loads an Roo.data.Record into this form.
+ * @param {Record} record The record to load
+ * @return {BasicForm} this
+ */
+ loadRecord : function(record){
+ this.setValues(record.data);
+ return this;
+ },
+
+ // private
+ beforeAction : function(action){
+ var o = action.options;
- //if(!this.el || !this.getEditor()) {
- // this.value = value;
- //this.setValue.defer(100,this,[value]);
- // return;
- //}
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget = Roo.get(this.waitMsgTarget);
+ this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else {
+ Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
+ }
+ }
- if(!this.getEditor()) {
- return;
+
+ },
+
+ // private
+ afterAction : function(action, success){
+ this.activeAction = null;
+ var o = action.options;
+
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.unmask();
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget.unmask();
+ }else{
+ Roo.MessageBox.updateProgress(1);
+ Roo.MessageBox.hide();
+ }
}
- this.getEditor().SetData(value);
+ if(success){
+ if(o.reset){
+ this.reset();
+ }
+ Roo.callback(o.success, o.scope, [this, action]);
+ this.fireEvent('actioncomplete', this, action);
+
+ }else{
+
+ // failure condition..
+ // we have a scenario where updates need confirming.
+ // eg. if a locking scenario exists..
+ // we look for { errors : { needs_confirm : true }} in the response.
+ if (
+ (typeof(action.result) != 'undefined') &&
+ (typeof(action.result.errors) != 'undefined') &&
+ (typeof(action.result.errors.needs_confirm) != 'undefined')
+ ){
+ var _t = this;
+ Roo.MessageBox.confirm(
+ "Change requires confirmation",
+ action.result.errorMsg,
+ function(r) {
+ if (r != 'yes') {
+ return;
+ }
+ _t.doAction('submit', { params : { _submit_confirmed : 1 } } );
+ }
+
+ );
+
+
+
+ return;
+ }
+
+ Roo.callback(o.failure, o.scope, [this, action]);
+ // show an error message if no failed handler is set..
+ if (!this.hasListener('actionfailed')) {
+ Roo.MessageBox.alert("Error",
+ (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
+ action.result.errorMsg :
+ "Saving Failed, please check your entries or try again"
+ );
+ }
+
+ this.fireEvent('actionfailed', this, action);
+ }
- //
+ },
+ /**
+ * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
+ * @param {String} id The value to search for
+ * @return Field
+ */
+ findField : function(id){
+ var field = this.items.get(id);
+ if(!field){
+ this.items.each(function(f){
+ if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
+ field = f;
+ return false;
+ }
+ });
+ }
+ return field || null;
},
/**
- * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
- * @return {Mixed} value The field value
+ * 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.
+ *
*/
- getValue : function()
+ addForm : function(form)
{
+
+ if (this.childForms.indexOf(form) > -1) {
+ // already added..
+ return;
+ }
+ this.childForms.push(form);
+ var n = '';
+ Roo.each(form.allItems, function (fe) {
+
+ n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
+ if (this.findField(n)) { // already added..
+ return;
+ }
+ var add = new Roo.form.Hidden({
+ name : n
+ });
+ add.render(this.el);
+
+ this.add( add );
+ }, this);
- if (this.frame && this.frame.dom.style.display == 'none') {
- return Roo.form.FCKeditor.superclass.getValue.call(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}
+ * @return {BasicForm} this
+ */
+ markInvalid : function(errors){
+ if(errors instanceof Array){
+ for(var i = 0, len = errors.length; i < len; i++){
+ var fieldError = errors[i];
+ var f = this.findField(fieldError.id);
+ if(f){
+ f.markInvalid(fieldError.msg);
+ }
+ }
+ }else{
+ var field, id;
+ for(id in errors){
+ if(typeof errors[id] != 'function' && (field = this.findField(id))){
+ field.markInvalid(errors[id]);
+ }
+ }
}
+ Roo.each(this.childForms || [], function (f) {
+ f.markInvalid(errors);
+ });
- if(!this.el || !this.getEditor()) {
-
- // this.getValue.defer(100,this);
- return this.value;
+ return this;
+ },
+
+ /**
+ * Set values for fields in this form in bulk.
+ * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
+ * @return {BasicForm} this
+ */
+ setValues : function(values){
+ if(values instanceof Array){ // array of objects
+ for(var i = 0, len = values.length; i < len; i++){
+ var v = values[i];
+ var f = this.findField(v.id);
+ if(f){
+ f.setValue(v.value);
+ if(this.trackResetOnLoad){
+ f.originalValue = f.getValue();
+ }
+ }
+ }
+ }else{ // object hash
+ var field, id;
+ for(id in values){
+ if(typeof values[id] != 'function' && (field = this.findField(id))){
+
+
+
+
+ if (field.setFromData &&
+ field.valueField &&
+ field.displayField &&
+ // combos' with local stores can
+ // be queried via setValue()
+ // to set their value..
+ (field.store && !field.store.isLocal)
+ ) {
+ // it's a combo
+ var sd = { };
+ sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
+ sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
+ field.setFromData(sd);
+
+ } else if (field.inputType && field.inputType == 'radio') {
+
+ field.setValue(values[id]);
+ } else {
+ field.setValue(values[id]);
+ }
+
+
+ if(this.trackResetOnLoad){
+ field.originalValue = field.getValue();
+ }
+ }
+ }
}
-
+ this.resetHasChanged();
- var value=this.getEditor().GetData();
- Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
- return Roo.form.FCKeditor.superclass.getValue.call(this);
-
+ Roo.each(this.childForms || [], function (f) {
+ f.setValues(values);
+ f.resetHasChanged();
+ });
+
+ return this;
},
-
+
/**
- * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
- * @return {Mixed} value The field value
+ * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
+ * they are returned as an array.
+ * @param {Boolean} asString (def)
+ * @return {Object}
*/
- getRawValue : function()
+ getValues : function(asString)
{
- if (this.frame && this.frame.dom.style.display == 'none') {
- return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+ if (this.childForms) {
+ // copy values from the child forms
+ Roo.each(this.childForms, function (f) {
+ this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
+ }, this);
}
- if(!this.el || !this.getEditor()) {
- //this.getRawValue.defer(100,this);
- return this.value;
- return;
+ // use formdata
+ if (typeof(FormData) != 'undefined' && asString !== true) {
+ // this relies on a 'recent' version of chrome apparently...
+ try {
+ var fd = (new FormData(this.el.dom)).entries();
+ var ret = {};
+ var ent = fd.next();
+ while (!ent.done) {
+ ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
+ ent = fd.next();
+ };
+ return ret;
+ } catch(e) {
+
+ }
+
}
-
- var value=this.getEditor().GetData();
- Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
- return Roo.form.FCKeditor.superclass.getRawValue.call(this);
-
- },
-
- setSize : function(w,h) {
-
-
-
- //if (this.frame && this.frame.dom.style.display == 'none') {
- // Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
- // return;
- //}
- //if(!this.el || !this.getEditor()) {
- // this.setSize.defer(100,this, [w,h]);
- // return;
- //}
-
-
-
- Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
-
- this.frame.dom.setAttribute('width', w);
- this.frame.dom.setAttribute('height', h);
- this.frame.setSize(w,h);
-
- },
-
- toggleSourceEdit : function(value) {
-
-
-
- this.el.dom.style.display = value ? '' : 'none';
- this.frame.dom.style.display = value ? 'none' : '';
-
+ var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
+ if(asString === true){
+ return fs;
+ }
+ return Roo.urlDecode(fs);
},
-
- focus: function(tag)
+ /**
+ * Returns the fields in this form as an object with key/value pairs.
+ * This differs from getValues as it calls getValue on each child item, rather than using dom data.
+ * Normally this will not return readOnly data
+ * @param {Boolean} with_readonly return readonly field data.
+ * @return {Object}
+ */
+ getFieldValues : function(with_readonly)
{
- if (this.frame.dom.style.display == 'none') {
- return Roo.form.FCKeditor.superclass.focus.call(this);
- }
- if(!this.el || !this.getEditor()) {
- this.focus.defer(100,this, [tag]);
- return;
+ if (this.childForms) {
+ // copy values from the child forms
+ // should this call getFieldValues - probably not as we do not currently copy
+ // hidden fields when we generate..
+ Roo.each(this.childForms, function (f) {
+ this.setValues(f.getFieldValues());
+ }, this);
}
-
-
-
- var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
- this.getEditor().Focus();
- if (tgs.length) {
- if (!this.getEditor().Selection.GetSelection()) {
- this.focus.defer(100,this, [tag]);
- return;
+ var ret = {};
+ this.items.each(function(f){
+
+ if (f.readOnly && with_readonly !== true) {
+ return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
+ // if a subform contains a copy of them.
+ // if you have subforms with the same editable data, you will need to copy the data back
+ // and forth.
}
+ if (!f.getName()) {
+ return;
+ }
+ var v = f.getValue();
+ if (f.inputType =='radio') {
+ if (typeof(ret[f.getName()]) == 'undefined') {
+ ret[f.getName()] = ''; // empty..
+ }
+
+ if (!f.el.dom.checked) {
+ return;
+
+ }
+ v = f.el.dom.value;
+
+ }
- var r = this.getEditor().EditorDocument.createRange();
- r.setStart(tgs[0],0);
- r.setEnd(tgs[0],0);
- this.getEditor().Selection.GetSelection().removeAllRanges();
- this.getEditor().Selection.GetSelection().addRange(r);
- this.getEditor().Focus();
- }
+ // not sure if this supported any more..
+ if ((typeof(v) == 'object') && f.getRawValue) {
+ v = f.getRawValue() ; // dates..
+ }
+ // combo boxes where name != hiddenName...
+ if (f.name != f.getName()) {
+ ret[f.name] = f.getRawValue();
+ }
+ ret[f.getName()] = v;
+ });
+ return ret;
},
-
-
-
- replaceTextarea : function()
- {
- if ( document.getElementById( this.getId() + '___Frame' ) ) {
- return ;
- }
- //if ( !this.checkBrowser || this._isCompatibleBrowser() )
- //{
- // We must check the elements firstly using the Id and then the name.
- var oTextarea = document.getElementById( this.getId() );
-
- var colElementsByName = document.getElementsByName( this.getId() ) ;
-
- oTextarea.style.display = 'none' ;
- if ( oTextarea.tabIndex ) {
- this.TabIndex = oTextarea.tabIndex ;
- }
+ /**
+ * Clears all invalid messages in this form.
+ * @return {BasicForm} this
+ */
+ clearInvalid : function(){
+ this.items.each(function(f){
+ f.clearInvalid();
+ });
- this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
- this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
- this.frame = Roo.get(this.getId() + '___Frame')
- },
-
- _getConfigHtml : function()
- {
- var sConfig = '' ;
-
- for ( var o in this.fckconfig ) {
- sConfig += sConfig.length > 0 ? '&' : '';
- sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
- }
-
- return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
+ Roo.each(this.childForms || [], function (f) {
+ f.clearInvalid();
+ });
+
+
+ return this;
},
-
-
- _getIFrameHtml : function()
- {
- var sFile = 'fckeditor.html' ;
- /* no idea what this is about..
- try
- {
- if ( (/fcksource=true/i).test( window.top.location.search ) )
- sFile = 'fckeditor.original.html' ;
- }
- catch (e) {
- */
- var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
- sLink += this.toolbarSet ? ( '&Toolbar=' + this.toolbarSet) : '';
+ /**
+ * Resets this form.
+ * @return {BasicForm} this
+ */
+ reset : function(){
+ this.items.each(function(f){
+ f.reset();
+ });
+ Roo.each(this.childForms || [], function (f) {
+ f.reset();
+ });
+ this.resetHasChanged();
- var html = '<iframe id="' + this.getId() +
- '___Frame" src="' + sLink +
- '" width="' + this.width +
- '" height="' + this.height + '"' +
- (this.tabIndex ? ' tabindex="' + this.tabIndex + '"' :'' ) +
- ' frameborder="0" scrolling="no"></iframe>' ;
-
- return html ;
+ return this;
},
-
- _insertHtmlBefore : function( html, element )
- {
- if ( element.insertAdjacentHTML ) {
- // IE
- element.insertAdjacentHTML( 'beforeBegin', html ) ;
- } else { // Gecko
- var oRange = document.createRange() ;
- oRange.setStartBefore( element ) ;
- var oFragment = oRange.createContextualFragment( html );
- element.parentNode.insertBefore( oFragment, element ) ;
- }
- }
-
-
-
-
-
-
-
-
-});
-
-//Roo.reg('fckeditor', Roo.form.FCKeditor);
-
-function FCKeditor_OnComplete(editorInstance){
- var f = Roo.form.FCKeditor.editors[editorInstance.Name];
- f.fckEditor = editorInstance;
- //console.log("loaded");
- f.fireEvent('editorinit', f, editorInstance);
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ /**
+ * Add Roo.form components to this form.
+ * @param {Field} field1
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return {BasicForm} this
+ */
+ add : function(){
+ this.items.addAll(Array.prototype.slice.call(arguments, 0));
+ return this;
+ },
-//<script type="text/javascript">
-/**
- * @class Roo.form.GridField
- * @extends Roo.form.Field
- * Embed a grid (or editable grid into a form)
- * STATUS ALPHA
- *
- * This embeds a grid in a form, the value of the field should be the json encoded array of rows
- * it needs
- * xgrid.store = Roo.data.Store
- * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
- * xgrid.store.reader = Roo.data.JsonReader
- *
- *
- * @constructor
- * Creates a new GridField
- * @param {Object} config Configuration options
- */
-Roo.form.GridField = function(config){
- Roo.form.GridField.superclass.constructor.call(this, config);
-
-};
-Roo.extend(Roo.form.GridField, Roo.form.Field, {
/**
- * @cfg {Number} width - used to restrict width of grid..
+ * Removes a field from the items collection (does NOT remove its markup).
+ * @param {Field} field
+ * @return {BasicForm} this
*/
- width : 100,
+ remove : function(field){
+ this.items.remove(field);
+ return this;
+ },
+
/**
- * @cfg {Number} height - used to restrict height of grid..
- */
- height : 50,
- /**
- * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
- *
- *}
+ * Looks at the fields in this form, checks them for an id attribute,
+ * and calls applyTo on the existing dom element with that id.
+ * @return {BasicForm} this
*/
- xgrid : false,
+ render : function(){
+ this.items.each(function(f){
+ if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
+ f.applyTo(f.id);
+ }
+ });
+ return this;
+ },
+
/**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "checkbox", autocomplete: "off"})
+ * Calls {@link Ext#apply} for all fields in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
*/
- // defaultAutoCreate : { tag: 'div' },
- defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
+ applyToFields : function(o){
+ this.items.each(function(f){
+ Roo.apply(f, o);
+ });
+ return this;
+ },
+
/**
- * @cfg {String} addTitle Text to include for adding a title.
+ * Calls {@link Ext#applyIf} for all field in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
*/
- addTitle : false,
- //
- onResize : function(){
- Roo.form.Field.superclass.onResize.apply(this, arguments);
- },
+ applyIfToFields : function(o){
+ this.items.each(function(f){
+ Roo.applyIf(f, o);
+ });
+ return this;
+ }
+});
- initEvents : function(){
- // Roo.form.Checkbox.superclass.initEvents.call(this);
- // has no events...
-
- },
+// back compat
+Roo.BasicForm = Roo.form.BasicForm;
+
+Roo.apply(Roo.form.BasicForm, {
+
+ popover : {
+
+ padding : 5,
+
+ isApplied : false,
+
+ isMasked : false,
+
+ form : false,
+
+ target : false,
+
+ intervalID : false,
+
+ maskEl : false,
+
+ apply : function()
+ {
+ if(this.isApplied){
+ return;
+ }
+
+ this.maskEl = {
+ top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+ left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+ bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+ right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+ };
+
+ this.maskEl.top.enableDisplayMode("block");
+ this.maskEl.left.enableDisplayMode("block");
+ this.maskEl.bottom.enableDisplayMode("block");
+ this.maskEl.right.enableDisplayMode("block");
+
+ Roo.get(document.body).on('click', function(){
+ this.unmask();
+ }, this);
+
+ Roo.get(document.body).on('touchstart', function(){
+ this.unmask();
+ }, this);
+
+ this.isApplied = true
+ },
+
+ mask : function(form, target)
+ {
+ this.form = form;
+
+ this.target = target;
+
+ if(!this.form.errorMask || !target.el){
+ return;
+ }
+
+ var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
+
+ var ot = this.target.el.calcOffsetsTo(scrollable);
+
+ var scrollTo = ot[1] - this.form.maskOffset;
+
+ scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
+
+ scrollable.scrollTo('top', scrollTo);
+
+ var el = this.target.wrap || this.target.el;
+
+ var box = el.getBox();
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setStyle('z-index', 10000);
+ this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+ this.maskEl.top.setLeft(0);
+ this.maskEl.top.setTop(0);
+ this.maskEl.top.show();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setStyle('z-index', 10000);
+ this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
+ this.maskEl.left.setLeft(0);
+ this.maskEl.left.setTop(box.y - this.padding);
+ this.maskEl.left.show();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setStyle('z-index', 10000);
+ this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+ this.maskEl.bottom.setLeft(0);
+ this.maskEl.bottom.setTop(box.bottom + this.padding);
+ this.maskEl.bottom.show();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setStyle('z-index', 10000);
+ this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+ this.maskEl.right.setLeft(box.right + this.padding);
+ this.maskEl.right.setTop(box.y - this.padding);
+ this.maskEl.right.show();
+ this.intervalID = window.setInterval(function() {
+ Roo.form.BasicForm.popover.unmask();
+ }, 10000);
+
+ window.onwheel = function(){ return false;};
+
+ (function(){ this.isMasked = true; }).defer(500, this);
+
+ },
+
+ unmask : function()
+ {
+ if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
+ return;
+ }
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.top.hide();
- getResizeEl : function(){
- return this.wrap;
- },
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.left.hide();
- getPositionEl : function(){
- return this.wrap;
- },
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.bottom.hide();
- // private
- onRender : function(ct, position){
-
- this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
- var style = this.style;
- delete this.style;
-
- Roo.form.GridField.superclass.onRender.call(this, ct, position);
- this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
- this.viewEl = this.wrap.createChild({ tag: 'div' });
- if (style) {
- this.viewEl.applyStyles(style);
- }
- if (this.width) {
- this.viewEl.setWidth(this.width);
- }
- if (this.height) {
- this.viewEl.setHeight(this.height);
- }
- //if(this.inputValue !== undefined){
- //this.setValue(this.value);
-
-
- this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
-
-
- this.grid.render();
- this.grid.getDataSource().on('remove', this.refreshValue, this);
- this.grid.getDataSource().on('update', this.refreshValue, this);
- this.grid.on('afteredit', this.refreshValue, this);
-
- },
-
-
- /**
- * Sets the value of the item.
- * @param {String} either an object or a string..
- */
- setValue : function(v){
- //this.value = v;
- v = v || []; // empty set..
- // this does not seem smart - it really only affects memoryproxy grids..
- if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
- var ds = this.grid.getDataSource();
- // assumes a json reader..
- var data = {}
- data[ds.reader.meta.root ] = typeof(v) == 'string' ? Roo.decode(v) : v;
- ds.loadData( data);
- }
- // clear selection so it does not get stale.
- if (this.grid.sm) {
- this.grid.sm.clearSelections();
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.right.hide();
+
+ window.onwheel = function(){ return true;};
+
+ if(this.intervalID){
+ window.clearInterval(this.intervalID);
+ this.intervalID = false;
+ }
+
+ this.isMasked = false;
+
}
- Roo.form.GridField.superclass.setValue.call(this, v);
- this.refreshValue();
- // should load data in the grid really....
- },
-
- // private
- refreshValue: function() {
- var val = [];
- this.grid.getDataSource().each(function(r) {
- val.push(r.data);
- });
- this.el.dom.value = Roo.encode(val);
}
-
-
-
});/*
* Based on:
* Ext JS Library 1.1.1
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.form.DisplayField
- * @extends Roo.form.Field
- * A generic Field to display non-editable data.
- * @cfg {Boolean} closable (true|false) default false
+ * @class Roo.form.Form
+ * @extends Roo.form.BasicForm
+ * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
* @constructor
- * Creates a new Display Field item.
* @param {Object} config Configuration options
*/
-Roo.form.DisplayField = function(config){
- Roo.form.DisplayField.superclass.constructor.call(this, config);
+Roo.form.Form = function(config){
+ var xitems = [];
+ if (config.items) {
+ xitems = config.items;
+ delete config.items;
+ }
+
+ Roo.form.Form.superclass.constructor.call(this, null, config);
+ this.url = this.url || this.action;
+ if(!this.root){
+ this.root = new Roo.form.Layout(Roo.applyIf({
+ id: Roo.id()
+ }, config));
+ }
+ this.active = this.root;
+ /**
+ * Array of all the buttons that have been added to this form via {@link addButton}
+ * @type Array
+ */
+ this.buttons = [];
+ this.allItems = [];
this.addEvents({
/**
- * @event close
- * Fires after the click the close btn
- * @param {Roo.form.DisplayField} this
- */
- close : true
+ * @event clientvalidation
+ * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+ * @param {Form} this
+ * @param {Boolean} valid true if the form has passed client-side validation
+ */
+ clientvalidation: true,
+ /**
+ * @event rendered
+ * Fires when the form is rendered
+ * @param {Roo.form.Form} form
+ */
+ rendered : true
});
+
+ if (this.progressUrl) {
+ // push a hidden field onto the list of fields..
+ this.addxtype( {
+ xns: Roo.form,
+ xtype : 'Hidden',
+ name : 'UPLOAD_IDENTIFIER'
+ });
+ }
+
+
+ Roo.each(xitems, this.addxtype, this);
+
};
-Roo.extend(Roo.form.DisplayField, Roo.form.TextField, {
- inputType: 'hidden',
- allowBlank: true,
- readOnly: true,
+Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+ /**
+ * @cfg {Roo.Button} buttons[] buttons at bottom of form
+ */
-
/**
- * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+ * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
- focusClass : undefined,
/**
- * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+ * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
- fieldClass: 'x-form-field',
+ /**
+ * @cfg {String} buttonAlign (left|center|right) Valid values are "left," "center" and "right" (defaults to "center")
+ */
+ buttonAlign:'center',
+
+ /**
+ * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
+ */
+ minButtonWidth:75,
+
+ /**
+ * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
+ * This property cascades to child containers if not set.
+ */
+ labelAlign:'left',
+
+ /**
+ * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
+ * fires a looping event with that state. This is required to bind buttons to the valid
+ * state using the config value formBind:true on the button.
+ */
+ monitorValid : false,
+
+ /**
+ * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+ */
+ monitorPoll : 200,
- /**
- * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
+ /**
+ * @cfg {String} progressUrl - Url to return progress data
*/
- valueRenderer: undefined,
- width: 100,
+ progressUrl : false,
/**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "checkbox", autocomplete: "off"})
+ * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
+ * sending a formdata with extra parameters - eg uploaded elements.
*/
-
- // defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
-
- closable : false,
- onResize : function(){
- Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
-
+ formData : false,
+
+ /**
+ * 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
+ * until end() is called.
+ * @param {Object} config The config to pass to the column
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return Column The column container object
+ */
+ column : function(c){
+ var col = new Roo.form.Column(c);
+ this.start(col);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
+ }
+ return col;
},
- initEvents : function(){
- // Roo.form.Checkbox.superclass.initEvents.call(this);
- // has no events...
-
- if(this.closable){
- this.closeEl.on('click', this.onClose, this);
+ /**
+ * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
+ * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
+ * until end() is called.
+ * @param {Object} config The config to pass to the fieldset
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return FieldSet The fieldset container object
+ */
+ fieldset : function(c){
+ var fs = new Roo.form.FieldSet(c);
+ this.start(fs);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
}
-
+ return fs;
},
+ /**
+ * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
+ * fields are added and the container is closed. If no fields are passed the container remains open
+ * until end() is called.
+ * @param {Object} config The config to pass to the Layout
+ * @param {Field} field1 (optional)
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return Layout The container object
+ */
+ container : function(c){
+ var l = new Roo.form.Layout(c);
+ this.start(l);
+ if(arguments.length > 1){ // duplicate code required because of Opera
+ this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+ this.end();
+ }
+ return l;
+ },
- getResizeEl : function(){
- return this.wrap;
+ /**
+ * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
+ * @param {Object} container A Roo.form.Layout or subclass of Layout
+ * @return {Form} this
+ */
+ start : function(c){
+ // cascade label info
+ Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
+ this.active.stack.push(c);
+ c.ownerCt = this.active;
+ this.active = c;
+ return this;
},
- getPositionEl : function(){
- return this.wrap;
+ /**
+ * Closes the current open container
+ * @return {Form} this
+ */
+ end : function(){
+ if(this.active == this.root){
+ return this;
+ }
+ this.active = this.active.ownerCt;
+ return this;
},
- // private
- onRender : function(ct, position){
+ /**
+ * Add Roo.form components to the current open container (e.g. column, fieldset, etc.). Fields added via this method
+ * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
+ * as the label of the field.
+ * @param {Field} field1
+ * @param {Field} field2 (optional)
+ * @param {Field} etc. (optional)
+ * @return {Form} this
+ */
+ add : function(){
+ this.active.stack.push.apply(this.active.stack, arguments);
+ this.allItems.push.apply(this.allItems,arguments);
+ var r = [];
+ for(var i = 0, a = arguments, len = a.length; i < len; i++) {
+ if(a[i].isFormField){
+ r.push(a[i]);
+ }
+ }
+ if(r.length > 0){
+ Roo.form.Form.superclass.add.apply(this, r);
+ }
+ 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..
+ * @param {String} id - id or name to find.
+
+ * @return {Element} e - or false if nothing found.
+ */
+ findbyId : function(id)
+ {
+ var ret = false;
+ if (!id) {
+ return ret;
+ }
+ Roo.each(this.allItems, function(f){
+ if (f.id == id || f.name == id ){
+ ret = f;
+ return false;
+ }
+ });
+ return ret;
+ },
+
+
+
+ /**
+ * Render this form into the passed container. This should only be called once!
+ * @param {String/HTMLElement/Element} container The element this component should be rendered into
+ * @return {Form} this
+ */
+ render : function(ct)
+ {
- Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
- //if(this.inputValue !== undefined){
- this.wrap = this.el.wrap();
- this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
- if(this.closable){
- this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
- }
+ ct = Roo.get(ct);
+ var o = this.autoCreate || {
+ tag: 'form',
+ method : this.method || 'POST',
+ id : this.id || Roo.id()
+ };
+ this.initEl(ct.createChild(o));
+
+ this.root.render(this.el);
- if (this.bodyStyle) {
- this.viewEl.applyStyles(this.bodyStyle);
+
+
+ this.items.each(function(f){
+ f.render('x-form-el-'+f.id);
+ });
+
+ if(this.buttons.length > 0){
+ // tables are required to maintain order and for correct IE layout
+ var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
+ cls:"x-form-btns x-form-btns-"+this.buttonAlign,
+ html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+ }}, null, true);
+ var tr = tb.getElementsByTagName('tr')[0];
+ for(var i = 0, len = this.buttons.length; i < len; i++) {
+ var b = this.buttons[i];
+ var td = document.createElement('td');
+ td.className = 'x-form-btn-td';
+ b.render(tr.appendChild(td));
+ }
}
- //this.viewEl.setStyle('padding', '2px');
-
- this.setValue(this.value);
-
+ if(this.monitorValid){ // initialize after render
+ this.startMonitoring();
+ }
+ this.fireEvent('rendered', this);
+ return this;
},
-/*
- // private
- initValue : Roo.emptyFn,
- */
+ /**
+ * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
+ * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+ * object or a valid Roo.DomHelper element config
+ * @param {Function} handler The function called when the button is clicked
+ * @param {Object} scope (optional) The scope of the handler function
+ * @return {Roo.Button}
+ */
+ addButton : function(config, handler, scope){
+ var bc = {
+ handler: handler,
+ scope: scope,
+ minWidth: this.minButtonWidth,
+ hideParent:true
+ };
+ if(typeof config == "string"){
+ bc.text = config;
+ }else{
+ Roo.apply(bc, config);
+ }
+ var btn = new Roo.Button(null, bc);
+ this.buttons.push(btn);
+ return btn;
+ },
- // private
- onClick : function(){
-
+ /**
+ * Adds a series of form elements (using the xtype property as the factory method.
+ * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
+ * @param {Object} config
+ */
+
+ addxtype : function()
+ {
+ var ar = Array.prototype.slice.call(arguments, 0);
+ var ret = false;
+ for(var i = 0; i < ar.length; i++) {
+ if (!ar[i]) {
+ continue; // skip -- if this happends something invalid got sent, we
+ // should ignore it, as basically that interface element will not show up
+ // and that should be pretty obvious!!
+ }
+
+ if (Roo.form[ar[i].xtype]) {
+ ar[i].form = this;
+ var fe = Roo.factory(ar[i], Roo.form);
+ if (!ret) {
+ ret = fe;
+ }
+ fe.form = this;
+ if (fe.store) {
+ fe.store.form = this;
+ }
+ if (fe.isLayout) {
+
+ this.start(fe);
+ this.allItems.push(fe);
+ if (fe.items && fe.addxtype) {
+ fe.addxtype.apply(fe, fe.items);
+ delete fe.items;
+ }
+ this.end();
+ continue;
+ }
+
+
+
+ this.add(fe);
+ // console.log('adding ' + ar[i].xtype);
+ }
+ if (ar[i].xtype == 'Button') {
+ //console.log('adding button');
+ //console.log(ar[i]);
+ this.addButton(ar[i]);
+ this.allItems.push(fe);
+ continue;
+ }
+
+ if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
+ alert('end is not supported on xtype any more, use items');
+ // this.end();
+ // //console.log('adding end');
+ }
+
+ }
+ return ret;
+ },
+
+ /**
+ * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+ * option "monitorValid"
+ */
+ startMonitoring : function(){
+ if(!this.bound){
+ this.bound = true;
+ Roo.TaskMgr.start({
+ run : this.bindHandler,
+ interval : this.monitorPoll || 200,
+ scope: this
+ });
+ }
},
/**
- * Sets the checked state of the checkbox.
- * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
+ * Stops monitoring of the valid state of this form
*/
- setValue : function(v){
- this.value = v;
- var html = this.valueRenderer ? this.valueRenderer(v) : String.format('{0}', v);
- // this might be called before we have a dom element..
- if (!this.viewEl) {
- return;
- }
- this.viewEl.dom.innerHTML = html;
- Roo.form.DisplayField.superclass.setValue.call(this, v);
-
+ stopMonitoring : function(){
+ this.bound = false;
},
-
- onClose : function(e)
- {
- e.preventDefault();
-
- this.fireEvent('close', this);
+
+ // private
+ bindHandler : function(){
+ if(!this.bound){
+ return false; // stops binding
+ }
+ var valid = true;
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ valid = false;
+ return false;
+ }
+ });
+ for(var i = 0, len = this.buttons.length; i < len; i++){
+ var btn = this.buttons[i];
+ if(btn.formBind === true && btn.disabled === valid){
+ btn.setDisabled(!valid);
+ }
+ }
+ this.fireEvent('clientvalidation', this, valid);
}
-});/*
- *
- * Licence- LGPL
- *
+
+
+
+
+
+
+
+
+});
+
+
+// back compat
+Roo.Form = Roo.form.Form;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
-/**
- * @class Roo.form.DayPicker
- * @extends Roo.form.Field
- * A Day picker show [M] [T] [W] ....
+// as we use this in bootstrap.
+Roo.namespace('Roo.form');
+ /**
+ * @class Roo.form.Action
+ * Internal Class used to handle form actions
* @constructor
- * Creates a new Day Picker
+ * @param {Roo.form.BasicForm} el The form element or its id
* @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: "new-password"},
-
-
- actionMode : 'viewEl',
- //
- // private
- inputType : 'hidden',
-
-
- inputElement: false, // real input element?
- basedOn: false, // ????
-
- isFormField: true, // not sure where this is needed!!!!
+
+// define the action interface
+Roo.form.Action = function(form, options){
+ this.form = form;
+ this.options = options || {};
+};
+/**
+ * Client Validation Failed
+ * @const
+ */
+Roo.form.Action.CLIENT_INVALID = 'client';
+/**
+ * Server Validation Failed
+ * @const
+ */
+Roo.form.Action.SERVER_INVALID = 'server';
+ /**
+ * Connect to Server Failed
+ * @const
+ */
+Roo.form.Action.CONNECT_FAILURE = 'connect';
+/**
+ * Reading Data from Server Failed
+ * @const
+ */
+Roo.form.Action.LOAD_FAILURE = 'load';
- onResize : function(){
- Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
- if(!this.boxLabel){
- this.el.alignTo(this.wrap, 'c-c');
- }
- },
+Roo.form.Action.prototype = {
+ type : 'default',
+ failureType : undefined,
+ response : undefined,
+ result : undefined,
+
+ // interface method
+ run : function(options){
- initEvents : function(){
- Roo.form.Checkbox.superclass.initEvents.call(this);
- this.el.on("click", this.onClick, this);
- this.el.on("change", this.onClick, this);
},
+ // interface method
+ success : function(response){
- getResizeEl : function(){
- return this.wrap;
},
- getPositionEl : function(){
- return this.wrap;
+ // interface method
+ handleResponse : function(response){
+
},
-
- // 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
-
+ // default connection failure
+ failure : function(response){
-
-
+ this.response = response;
+ this.failureType = Roo.form.Action.CONNECT_FAILURE;
+ this.form.afterAction(this, false);
},
- // 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;
-
+ processResponse : function(response){
+ this.response = response;
+ if(!response.responseText){
+ return true;
+ }
+ this.result = this.handleResponse(response);
+ return this.result;
},
- // 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);
- // }
+ // utility functions used internally
+ getUrl : function(appendParams){
+ var url = this.options.url || this.form.url || this.form.el.dom.action;
+ if(appendParams){
+ var p = this.getParams();
+ if(p){
+ url += (url.indexOf('?') != -1 ? '&' : '?') + p;
+ }
+ }
+ return url;
},
-
- // 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);
+
+ getMethod : function(){
+ return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
},
- /**
- * 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');
+ getParams : function(){
+ var bp = this.form.baseParams;
+ var p = this.options.params;
+ if(p){
+ if(typeof p == "object"){
+ p = Roo.urlEncode(Roo.applyIf(p, bp));
+ }else if(typeof p == 'string' && bp){
+ p += '&' + Roo.urlEncode(bp);
}
-
- });
-
-
- this.fireEvent('change', this, v, old);
-
-
- },
-
- // handle setting of hidden value by some other method!!?!?
- setFromHidden: function()
- {
- if(!this.el){
- return;
+ }else if(bp){
+ p = Roo.urlEncode(bp);
}
- //console.log("SET FROM HIDDEN");
- //alert('setFrom hidden');
- this.setValue(this.el.dom.value);
+ return p;
},
-
- onDestroy : function()
- {
- if(this.viewEl){
- Roo.get(this.viewEl).remove();
- }
-
- Roo.form.DayPicker.superclass.onDestroy.call(this);
- }
-});/*
- * RooJS Library 1.1.1
- * Copyright(c) 2008-2011 Alan Knowles
- *
- * License - LGPL
- */
-
+ createCallback : function(){
+ return {
+ success: this.success,
+ failure: this.failure,
+ scope: this,
+ timeout: (this.form.timeout*1000),
+ upload: this.form.fileUpload ? this.success : undefined
+ };
+ }
+};
-/**
- * @class Roo.form.ComboCheck
- * @extends Roo.form.ComboBox
- * A combobox for multiple select items.
- *
- * FIXME - could do with a reset button..
- *
- * @constructor
- * Create a new ComboCheck
- * @param {Object} config Configuration options
- */
-Roo.form.ComboCheck = function(config){
- Roo.form.ComboCheck.superclass.constructor.call(this, config);
- // should verify some data...
- // like
- // hiddenName = required..
- // displayField = required
- // valudField == required
- var req= [ 'hiddenName', 'displayField', 'valueField' ];
- var _t = this;
- Roo.each(req, function(e) {
- if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
- throw "Roo.form.ComboCheck : missing value for: " + e;
- }
- });
-
-
+Roo.form.Action.Submit = function(form, options){
+ Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
};
-Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
-
-
- editable : false,
-
- selectedClass: 'x-menu-item-checked',
+Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
+ type : 'submit',
+
+ haveProgress : false,
+ uploadComplete : false,
- // private
- onRender : function(ct, position){
- var _t = this;
+ // uploadProgress indicator.
+ uploadProgress : function()
+ {
+ if (!this.form.progressUrl) {
+ return;
+ }
+ if (!this.haveProgress) {
+ Roo.MessageBox.progress("Uploading", "Uploading");
+ }
+ if (this.uploadComplete) {
+ Roo.MessageBox.hide();
+ return;
+ }
+ this.haveProgress = true;
+
+ var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
- if(!this.tpl){
- var cls = 'x-combo-list';
-
-
- this.tpl = new Roo.Template({
- html : '<div class="'+cls+'-item x-menu-check-item">' +
- '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' +
- '<span>{' + this.displayField + '}</span>' +
- '</div>'
+ var c = new Roo.data.Connection();
+ c.request({
+ url : this.form.progressUrl,
+ params: {
+ id : uid
+ },
+ method: 'GET',
+ success : function(req){
+ //console.log(data);
+ var rdata = false;
+ var edata;
+ try {
+ rdata = Roo.decode(req.responseText)
+ } catch (e) {
+ Roo.log("Invalid data from server..");
+ Roo.log(edata);
+ return;
+ }
+ if (!rdata || !rdata.success) {
+ Roo.log(rdata);
+ Roo.MessageBox.alert(Roo.encode(rdata));
+ return;
+ }
+ var data = rdata.data;
- });
- }
-
-
- Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
- this.view.singleSelect = false;
- this.view.multiSelect = true;
- this.view.toggleSelect = true;
- this.pageTb.add(new Roo.Toolbar.Fill(),{
-
- text: 'Select All',
- handler: function() {
- _t.selectAll();
- }
- },
- {
- text: 'Done',
- handler: function() {
- _t.collapse();
- }
+ if (this.uploadComplete) {
+ Roo.MessageBox.hide();
+ return;
+ }
+
+ if (data){
+ Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
+ Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
+ );
+ }
+ this.uploadProgress.defer(2000,this);
+ },
+
+ failure: function(data) {
+ Roo.log('progress url failed ');
+ Roo.log(data);
+ },
+ scope : this
});
+
},
- cleanLeadingSpace : function(e)
+
+ run : function()
{
- // this is disabled, as it retriggers setvalue on blur
- return;
+ // run get Values on the form, so it syncs any secondary forms.
+ this.form.getValues();
+
+ var o = this.options;
+ var method = this.getMethod();
+ var isPost = method == 'POST';
+ if(o.clientValidation === false || this.form.isValid()){
+
+ if (this.form.progressUrl) {
+ this.form.findField('UPLOAD_IDENTIFIER').setValue(
+ (new Date() * 1) + '' + Math.random());
+
+ }
+
+
+ Roo.Ajax.request(Roo.apply(this.createCallback(), {
+ form:this.form.el.dom,
+ url:this.getUrl(!isPost),
+ method: method,
+ params:isPost ? this.getParams() : null,
+ isUpload: this.form.fileUpload,
+ formData : this.form.formData
+ }));
+
+ this.uploadProgress();
+
+ }else if (o.clientValidation !== false){ // client validation failed
+ this.failureType = Roo.form.Action.CLIENT_INVALID;
+ this.form.afterAction(this, false);
+ }
},
- doForce : function() {
- // no idea what this did, but it blanks out our values.
- return;
+
+ success : function(response)
+ {
+ this.uploadComplete= true;
+ if (this.haveProgress) {
+ Roo.MessageBox.hide();
+ }
+
+
+ var result = this.processResponse(response);
+ if(result === true || result.success){
+ this.form.afterAction(this, true);
+ return;
+ }
+ if(result.errors){
+ this.form.markInvalid(result.errors);
+ this.failureType = Roo.form.Action.SERVER_INVALID;
+ }
+ this.form.afterAction(this, false);
},
- onViewOver : function(e, t){
- // do nothing...
- return;
+ failure : function(response)
+ {
+ this.uploadComplete= true;
+ if (this.haveProgress) {
+ Roo.MessageBox.hide();
+ }
+ this.response = response;
+ this.failureType = Roo.form.Action.CONNECT_FAILURE;
+ this.form.afterAction(this, false);
},
- onViewClick : function(doFocus,index){
- return;
-
- },
- select: function () {
- //Roo.log("SELECT CALLED");
- },
-
- selectByValue : function(xv, scrollIntoView){
- var ar = this.getValueArray();
- var sels = [];
-
- Roo.each(ar, function(v) {
- if(v === undefined || v === null){
- return;
+ handleResponse : function(response){
+ if(this.form.errorReader){
+ var rs = this.form.errorReader.read(response);
+ var errors = [];
+ if(rs.records){
+ for(var i = 0, len = rs.records.length; i < len; i++) {
+ var r = rs.records[i];
+ errors[i] = r.data;
+ }
}
- var r = this.findRecord(this.valueField, v);
- if(r){
- sels.push(this.store.indexOf(r))
-
+ if(errors.length < 1){
+ errors = null;
}
- },this);
- this.view.select(sels);
- return false;
- },
-
- selectAll : function()
- {
- var sels = [];
- this.store.each(function(r,i) {
- sels.push(i);
- });
- this.view.select(sels);
- this.collapse();
- return false;
-
- },
-
- onSelect : function(record, index){
- // Roo.log("onselect Called");
- // this is only called by the clear button now..
- this.view.clearSelections();
- this.setValue('[]');
- if (this.value != this.valueBefore) {
- this.fireEvent('change', this, this.value, this.valueBefore);
- this.valueBefore = this.value;
+ return {
+ success : rs.success,
+ errors : errors
+ };
}
- },
- getValueArray : function()
- {
- var ar = [] ;
-
+ var ret = false;
try {
- //Roo.log(this.value);
- if (typeof(this.value) == 'undefined') {
- return [];
+ var rt = response.responseText;
+ if (rt.match(/^\<!--\[CDATA\[/)) {
+ rt = rt.replace(/^\<!--\[CDATA\[/,'');
+ rt = rt.replace(/\]\]--\>$/,'');
}
- var ar = Roo.decode(this.value);
- return ar instanceof Array ? ar : []; //?? valid?
- } catch(e) {
- Roo.log(e + "\nRoo.form.ComboCheck:getValueArray invalid data:" + this.getValue());
- return [];
+ ret = Roo.decode(rt);
+ } catch (e) {
+ ret = {
+ success: false,
+ errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
+ errors : []
+ };
}
-
- },
- expand : function ()
- {
-
- Roo.form.ComboCheck.superclass.expand.call(this);
- this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
- //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
+ return ret;
+ }
+});
- },
-
- collapse : function(){
- Roo.form.ComboCheck.superclass.collapse.call(this);
- var sl = this.view.getSelectedIndexes();
- var st = this.store;
- var nv = [];
- var tv = [];
- var r;
- Roo.each(sl, function(i) {
- r = st.getAt(i);
- nv.push(r.get(this.valueField));
- },this);
- this.setValue(Roo.encode(nv));
- if (this.value != this.valueBefore) {
- this.fireEvent('change', this, this.value, this.valueBefore);
- this.valueBefore = this.value;
- }
+Roo.form.Action.Load = function(form, options){
+ Roo.form.Action.Load.superclass.constructor.call(this, form, options);
+ this.reader = this.form.reader;
+};
+
+Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
+ type : 'load',
+
+ run : function(){
+ Roo.Ajax.request(Roo.apply(
+ this.createCallback(), {
+ method:this.getMethod(),
+ url:this.getUrl(false),
+ params:this.getParams()
+ }));
},
-
- setValue : function(v){
- // Roo.log(v);
- this.value = v;
-
- var vals = this.getValueArray();
- var tv = [];
- Roo.each(vals, function(k) {
- var r = this.findRecord(this.valueField, k);
- if(r){
- tv.push(r.data[this.displayField]);
- }else if(this.valueNotFoundText !== undefined){
- tv.push( this.valueNotFoundText );
- }
- },this);
- // Roo.log(tv);
+
+ success : function(response){
- Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
- this.hiddenField.value = v;
- this.value = v;
+ var result = this.processResponse(response);
+ if(result === true || !result.success || !result.data){
+ this.failureType = Roo.form.Action.LOAD_FAILURE;
+ this.form.afterAction(this, false);
+ return;
+ }
+ this.form.clearInvalid();
+ this.form.setValues(result.data);
+ this.form.afterAction(this, true);
+ },
+
+ handleResponse : function(response){
+ if(this.form.reader){
+ var rs = this.form.reader.read(response);
+ var data = rs.records && rs.records[0] ? rs.records[0].data : null;
+ return {
+ success : rs.success,
+ data : data
+ };
+ }
+ return Roo.decode(response.responseText);
}
-
-});/*
+});
+
+Roo.form.Action.ACTION_TYPES = {
+ 'load' : Roo.form.Action.Load,
+ 'submit' : Roo.form.Action.Submit
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.form.Signature
- * @extends Roo.form.Field
- * Signature field.
+ * @class Roo.form.Layout
+ * @extends Roo.Component
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
- *
* @param {Object} config Configuration options
*/
-
-Roo.form.Signature = function(config){
- Roo.form.Signature.superclass.constructor.call(this, config);
-
- this.addEvents({// not in used??
- /**
- * @event confirm
- * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.Signature} combo This combo box
- */
- 'confirm' : true,
- /**
- * @event reset
- * Fires when the 'edit' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
- */
- 'reset' : true
- });
+Roo.form.Layout = function(config){
+ var xitems = [];
+ if (config.items) {
+ xitems = config.items;
+ delete config.items;
+ }
+ Roo.form.Layout.superclass.constructor.call(this, config);
+ this.stack = [];
+ Roo.each(xitems, this.addxtype, this);
+
};
-Roo.extend(Roo.form.Signature, Roo.form.Field, {
+Roo.extend(Roo.form.Layout, Roo.Component, {
/**
- * @cfg {Object} labels Label to use when rendering a form.
- * defaults to
- * labels : {
- * clear : "Clear",
- * confirm : "Confirm"
- * }
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
*/
- labels : {
- clear : "Clear",
- confirm : "Confirm"
- },
/**
- * @cfg {Number} width The signature panel width (defaults to 300)
+ * @cfg {String/Object/Function} style
+ * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
+ * a function which returns such a specification.
*/
- width: 300,
/**
- * @cfg {Number} height The signature panel height (defaults to 100)
+ * @cfg {String} labelAlign (left|top|right)
+ * Valid values are "left," "top" and "right" (defaults to "left")
*/
- height : 100,
/**
- * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
+ * @cfg {Number} labelWidth
+ * Fixed width in pixels of all field labels (defaults to undefined)
*/
- allowBlank : false,
-
- //private
- // {Object} signPanel The signature SVG panel element (defaults to {})
- signPanel : {},
- // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
- isMouseDown : false,
- // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
- isConfirmed : false,
- // {String} signatureTmp SVG mapping string (defaults to empty string)
- signatureTmp : '',
+ /**
+ * @cfg {Boolean} clear
+ * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
+ */
+ clear : true,
+ /**
+ * @cfg {String} labelSeparator
+ * The separator to use after field labels (defaults to ':')
+ */
+ labelSeparator : ':',
+ /**
+ * @cfg {Boolean} hideLabels
+ * True to suppress the display of field labels in this layout (defaults to false)
+ */
+ hideLabels : false,
+
+ // private
+ defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
+ isLayout : true,
- defaultAutoCreate : { // modified by initCompnoent..
- tag: "input",
- type:"hidden"
- },
-
// private
onRender : function(ct, position){
-
- Roo.form.Signature.superclass.onRender.call(this, ct, position);
-
- this.wrap = this.el.wrap({
- cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
- });
-
- this.createToolbar(this);
- this.signPanel = this.wrap.createChild({
- tag: 'div',
- style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
- }, this.el
- );
-
- this.svgID = Roo.id();
- this.svgEl = this.signPanel.createChild({
- xmlns : 'http://www.w3.org/2000/svg',
- tag : 'svg',
- id : this.svgID + "-svg",
- width: this.width,
- height: this.height,
- viewBox: '0 0 '+this.width+' '+this.height,
- cn : [
- {
- tag: "rect",
- id: this.svgID + "-svg-r",
- width: this.width,
- height: this.height,
- fill: "#ffa"
- },
- {
- tag: "line",
- id: this.svgID + "-svg-l",
- x1: "0", // start
- y1: (this.height*0.8), // start set the line in 80% of height
- x2: this.width, // end
- y2: (this.height*0.8), // end set the line in 80% of height
- 'stroke': "#666",
- 'stroke-width': "1",
- 'stroke-dasharray': "3",
- 'shape-rendering': "crispEdges",
- 'pointer-events': "none"
- },
- {
- tag: "path",
- id: this.svgID + "-svg-p",
- 'stroke': "navy",
- 'stroke-width': "3",
- 'fill': "none",
- 'pointer-events': 'none'
- }
- ]
- });
- this.createSVG();
- this.svgBox = this.svgEl.dom.getScreenCTM();
- },
- createSVG : function(){
- var svg = this.signPanel;
- var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
- var t = this;
-
- r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
- r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
- r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
- r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
- r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
- r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
- r.addEventListener('touchend', function(e) { return t.up(e); }, false);
-
- },
- isTouchEvent : function(e){
- return e.type.match(/^touch/);
- },
- getCoords : function (e) {
- var pt = this.svgEl.dom.createSVGPoint();
- pt.x = e.clientX;
- pt.y = e.clientY;
- if (this.isTouchEvent(e)) {
- pt.x = e.targetTouches[0].clientX;
- pt.y = e.targetTouches[0].clientY;
+ if(this.el){ // from markup
+ this.el = Roo.get(this.el);
+ }else { // generate
+ var cfg = this.getAutoCreate();
+ this.el = ct.createChild(cfg, position);
}
- var a = this.svgEl.dom.getScreenCTM();
- var b = a.inverse();
- var mx = pt.matrixTransform(b);
- return mx.x + ',' + mx.y;
- },
- //mouse event headler
- down : function (e) {
- this.signatureTmp += 'M' + this.getCoords(e) + ' ';
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
-
- this.isMouseDown = true;
-
- e.preventDefault();
- },
- move : function (e) {
- if (this.isMouseDown) {
- this.signatureTmp += 'L' + this.getCoords(e) + ' ';
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
+ if(this.style){
+ this.el.applyStyles(this.style);
}
-
- e.preventDefault();
- },
- up : function (e) {
- this.isMouseDown = false;
- var sp = this.signatureTmp.split(' ');
-
- if(sp.length > 1){
- if(!sp[sp.length-2].match(/^L/)){
- sp.pop();
- sp.pop();
- sp.push("");
- this.signatureTmp = sp.join(" ");
+ if(this.labelAlign){
+ this.el.addClass('x-form-label-'+this.labelAlign);
+ }
+ if(this.hideLabels){
+ this.labelStyle = "display:none";
+ this.elementStyle = "padding-left:0;";
+ }else{
+ if(typeof this.labelWidth == 'number'){
+ this.labelStyle = "width:"+this.labelWidth+"px;";
+ this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
+ }
+ if(this.labelAlign == 'top'){
+ this.labelStyle = "width:auto;";
+ this.elementStyle = "padding-left:0;";
}
}
- if(this.getValue() != this.signatureTmp){
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
- this.isConfirmed = false;
+ var stack = this.stack;
+ var slen = stack.length;
+ if(slen > 0){
+ if(!this.fieldTpl){
+ var t = new Roo.Template(
+ '<div class="x-form-item {5}">',
+ '<label for="{0}" style="{2}">{1}{4}</label>',
+ '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+ '</div>',
+ '</div><div class="x-form-clear-left"></div>'
+ );
+ t.disableFormats = true;
+ t.compile();
+ Roo.form.Layout.prototype.fieldTpl = t;
+ }
+ for(var i = 0; i < slen; i++) {
+ if(stack[i].isFormField){
+ this.renderField(stack[i]);
+ }else{
+ this.renderComponent(stack[i]);
+ }
+ }
}
- e.preventDefault();
- },
-
- /**
- * Protected method that will not generally be called directly. It
- * is called when the editor creates its toolbar. Override this method if you need to
- * add custom toolbar buttons.
- * @param {HtmlEditor} editor
- */
- createToolbar : function(editor){
- function btn(id, toggle, handler){
- var xid = fid + '-'+ id ;
- return {
- id : xid,
- cmd : id,
- cls : 'x-btn-icon x-edit-'+id,
- enableToggle:toggle !== false,
- scope: editor, // was editor...
- handler:handler||editor.relayBtnCmd,
- clickEvent:'mousedown',
- tooltip: etb.buttonTips[id] || undefined, ///tips ???
- tabIndex:-1
- };
+ if(this.clear){
+ this.el.createChild({cls:'x-form-clear'});
}
-
-
- var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
- this.tb = tb;
- this.tb.add(
- {
- cls : ' x-signature-btn x-signature-'+id,
- scope: editor, // was editor...
- handler: this.reset,
- clickEvent:'mousedown',
- text: this.labels.clear
- },
- {
- xtype : 'Fill',
- xns: Roo.Toolbar
- },
- {
- cls : ' x-signature-btn x-signature-'+id,
- scope: editor, // was editor...
- handler: this.confirmHandler,
- clickEvent:'mousedown',
- text: this.labels.confirm
- }
- );
-
},
- //public
+
+ // private
+ renderField : function(f){
+ f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
+ f.id, //0
+ f.fieldLabel, //1
+ f.labelStyle||this.labelStyle||'', //2
+ this.elementStyle||'', //3
+ typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
+ f.itemCls||this.itemCls||'' //5
+ ], true).getPrevSibling());
+ },
+
+ // private
+ renderComponent : function(c){
+ c.render(c.isLayout ? this.el : this.el.createChild());
+ },
/**
- * when user is clicked confirm then show this image.....
- *
- * @return {String} Image Data URI
+ * Adds a object form elements (using the xtype property as the factory method.)
+ * Valid xtypes are: TextField, TextArea .... Button, Layout, FieldSet, Column
+ * @param {Object} config
*/
- getImageDataURI : function(){
- var svg = this.svgEl.dom.parentNode.innerHTML;
- var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
- return src;
- },
+ addxtype : function(o)
+ {
+ // create the lement.
+ o.form = this.form;
+ var fe = Roo.factory(o, Roo.form);
+ this.form.allItems.push(fe);
+ this.stack.push(fe);
+
+ if (fe.isFormField) {
+ this.form.items.add(fe);
+ }
+
+ return fe;
+ }
+});
+
+
+/**
+ * @class Roo.form.Column
+ * @extends Roo.form.Layout
+ * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Column = function(config){
+ Roo.form.Column.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Column, Roo.form.Layout, {
/**
- *
- * @return {Boolean} this.isConfirmed
+ * @cfg {Number/String} width
+ * The fixed width of the column in pixels or CSS value (defaults to "auto")
*/
- getConfirmed : function(){
- return this.isConfirmed;
- },
/**
- *
- * @return {Number} this.width
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
+ */
+
+ // private
+ defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
+
+ // private
+ onRender : function(ct, position){
+ Roo.form.Column.superclass.onRender.call(this, ct, position);
+ if(this.width){
+ this.el.setWidth(this.width);
+ }
+ }
+});
+
+/**
+ * @class Roo.form.Row
+ * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+
+
+Roo.form.Row = function(config){
+ Roo.form.Row.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Row, Roo.form.Layout, {
+ /**
+ * @cfg {Number/String} width
+ * The fixed width of the column in pixels or CSS value (defaults to "auto")
*/
- getWidth : function(){
- return this.width;
- },
/**
- *
- * @return {Number} this.height
+ * @cfg {Number/String} height
+ * The fixed height of the column in pixels or CSS value (defaults to "auto")
*/
- getHeight : function(){
- return this.height;
- },
- // private
- getSignature : function(){
- return this.signatureTmp;
- },
+ defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+
+ padWidth : 20,
// private
- reset : function(){
- this.signatureTmp = '';
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
- this.isConfirmed = false;
- Roo.form.Signature.superclass.reset.call(this);
- },
- setSignature : function(s){
- this.signatureTmp = s;
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
- this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
- this.setValue(s);
- this.isConfirmed = false;
- Roo.form.Signature.superclass.reset.call(this);
- },
- test : function(){
-// Roo.log(this.signPanel.dom.contentWindow.up())
- },
- //private
- setConfirmed : function(){
+ onRender : function(ct, position){
+ //console.log('row render');
+ if(!this.rowTpl){
+ var t = new Roo.Template(
+ '<div class="x-form-item {5}" style="float:left;width:{6}px">',
+ '<label for="{0}" style="{2}">{1}{4}</label>',
+ '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+ '</div>',
+ '</div>'
+ );
+ t.disableFormats = true;
+ t.compile();
+ Roo.form.Layout.prototype.rowTpl = t;
+ }
+ this.fieldTpl = this.rowTpl;
+ //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
+ var labelWidth = 100;
+ if ((this.labelAlign != 'top')) {
+ if (typeof this.labelWidth == 'number') {
+ labelWidth = this.labelWidth
+ }
+ this.padWidth = 20 + labelWidth;
+
+ }
-// Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+ Roo.form.Column.superclass.onRender.call(this, ct, position);
+ if(this.width){
+ this.el.setWidth(this.width);
+ }
+ if(this.height){
+ this.el.setHeight(this.height);
+ }
},
+
// private
- confirmHandler : function(){
- if(!this.getSignature()){
- return;
+ renderField : function(f){
+ f.fieldEl = this.fieldTpl.append(this.el, [
+ f.id, f.fieldLabel,
+ f.labelStyle||this.labelStyle||'',
+ this.elementStyle||'',
+ typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
+ f.itemCls||this.itemCls||'',
+ f.width ? f.width + this.padWidth : 160 + this.padWidth
+ ],true);
+ }
+});
+
+
+/**
+ * @class Roo.form.FieldSet
+ * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.FieldSet = function(config){
+ Roo.form.FieldSet.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
+ /**
+ * @cfg {String} legend
+ * The text to display as the legend for the FieldSet (defaults to '')
+ */
+ /**
+ * @cfg {String/Object} autoCreate
+ * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
+ */
+
+ // private
+ defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
+
+ // private
+ onRender : function(ct, position){
+ Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
+ if(this.legend){
+ this.setLegend(this.legend);
}
-
- this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
- this.setValue(this.getSignature());
- this.isConfirmed = true;
-
- this.fireEvent('confirm', this);
},
+
// private
- // Subclasses should provide the validation implementation by overriding this
- validateValue : function(value){
- if(this.allowBlank){
- return true;
- }
-
- if(this.isConfirmed){
- return true;
+ setLegend : function(text){
+ if(this.rendered){
+ this.el.child('legend').update(text);
}
- return false;
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+/**
+ * @class Roo.form.VTypes
+ * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
+ * @static
+ */
+Roo.form.VTypes = function(){
+ // closure these in so they are only created once.
+ var alpha = /^[a-zA-Z_]+$/;
+ var alphanum = /^[a-zA-Z0-9_]+$/;
+ var email = /^([\w'-]+)(\.[\w'-]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
+ var url = /^(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+ var urlWeb = /^((https?):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+
+ // All these messages and functions are configurable
+ return {
+ /**
+ * The function used to validate email addresses
+ * @param {String} value The email address
+ */
+ email : function(v){
+ return email.test(v);
+ },
+ /**
+ * The error text to display when the email validation function returns false
+ * @type String
+ */
+ emailText : 'This field should be an e-mail address in the format "user@domain.com"',
+ /**
+ * The keystroke filter mask to be applied on email input
+ * @type RegExp
+ */
+ emailMask : /[a-z0-9_\.\-@]/i,
+
+ /**
+ * The function used to validate URLs
+ * @param {String} value The URL
+ */
+ url : function(v){
+ return url.test(v);
+ },
+ /**
+ * The funciton used to validate URLs (only allow schemes 'https' and 'http')
+ * @param {String} v The URL
+ */
+ urlWeb : function(v) {
+ return urlWeb.test(v);
+ },
+ /**
+ * The error text to display when the url validation function returns false
+ * @type String
+ */
+ urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
+
+ /**
+ * The function used to validate alpha values
+ * @param {String} value The value
+ */
+ alpha : function(v){
+ return alpha.test(v);
+ },
+ /**
+ * The error text to display when the alpha validation function returns false
+ * @type String
+ */
+ alphaText : 'This field should only contain letters and _',
+ /**
+ * The keystroke filter mask to be applied on alpha input
+ * @type RegExp
+ */
+ alphaMask : /[a-z_]/i,
+
+ /**
+ * The function used to validate alphanumeric values
+ * @param {String} value The value
+ */
+ alphanum : function(v){
+ return alphanum.test(v);
+ },
+ /**
+ * The error text to display when the alphanumeric validation function returns false
+ * @type String
+ */
+ alphanumText : 'This field should only contain letters, numbers and _',
+ /**
+ * The keystroke filter mask to be applied on alphanumeric input
+ * @type RegExp
+ */
+ alphanumMask : /[a-z0-9_]/i
+ };
+}();//<script type="text/javascript">
/**
- * @class Roo.form.ComboBox
- * @extends Roo.form.TriggerField
- * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @class Roo.form.FCKeditor
+ * @extends Roo.form.TextArea
+ * Wrapper around the FCKEditor http://www.fckeditor.net
* @constructor
- * Create a new ComboBox.
+ * Creates a new FCKeditor
* @param {Object} config Configuration options
*/
-Roo.form.Select = function(config){
- Roo.form.Select.superclass.constructor.call(this, config);
-
+Roo.form.FCKeditor = function(config){
+ Roo.form.FCKeditor.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event editorinit
+ * Fired when the editor is initialized - you can add extra handlers here..
+ * @param {FCKeditor} this
+ * @param {Object} the FCK object.
+ */
+ editorinit : true
+ });
+
+
};
-
-Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
- /**
- * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
- */
- /**
- * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
- * rendering into an Roo.Editor, defaults to false)
- */
- /**
- * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
- * {tag: "input", type: "text", size: "24", autocomplete: "off"})
- */
- /**
- * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
- */
- /**
- * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
- * the dropdown list (defaults to undefined, with no header element)
- */
-
- /**
- * @cfg {String/Roo.Template} tpl The template to use to render the output
- */
-
+Roo.form.FCKeditor.editors = { };
+Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
+{
+ //defaultAutoCreate : {
+ // tag : "textarea",style : "width:100px;height:60px;" ,autocomplete : "off"
+ //},
// private
- defaultAutoCreate : {tag: "select" },
/**
- * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+ * @cfg {Object} fck options - see fck manual for details.
*/
- listWidth: undefined,
+ fckconfig : false,
+
/**
- * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'text' if mode = 'local')
+ * @cfg {Object} fck toolbar set (Basic or Default)
*/
- displayField: undefined,
+ toolbarSet : 'Basic',
/**
- * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'value' if mode = 'local').
- * Note: use of a valueField requires the user make a selection
- * in order for a value to be mapped.
- */
- valueField: undefined,
+ * @cfg {Object} fck BasePath
+ */
+ basePath : '/fckeditor/',
- /**
- * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
- * field's data value (defaults to the underlying DOM element's name)
- */
- hiddenName: undefined,
- /**
- * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
- */
- listClass: '',
- /**
- * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
- */
- selectedClass: 'x-combo-selected',
- /**
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
- * which displays a downward arrow icon).
- */
- triggerClass : 'x-form-arrow-trigger',
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- */
- shadow:'sides',
- /**
- * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
- * anchor positions (defaults to 'tl-bl')
- */
- listAlign: 'tl-bl?',
- /**
- * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
- */
- maxHeight: 300,
- /**
- * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
- * query specified by the allQuery config option (defaults to 'query')
- */
- triggerAction: 'query',
- /**
- * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
- * (defaults to 4, does not apply if editable = false)
- */
- minChars : 4,
- /**
- * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
- * delay (typeAheadDelay) if it matches a known value (defaults to false)
- */
- typeAhead: false,
- /**
- * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
- * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
- */
- queryDelay: 500,
- /**
- * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
- * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
- */
- pageSize: 0,
- /**
- * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
- * when editable = true (defaults to false)
- */
- selectOnFocus:false,
- /**
- * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
- */
- queryParam: 'query',
- /**
- * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
- * when mode = 'remote' (defaults to 'Loading...')
- */
- loadingText: 'Loading...',
- /**
- * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
- */
- resizable: false,
- /**
- * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
- */
- handleHeight : 8,
- /**
- * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
- * traditional select (defaults to true)
- */
- editable: true,
- /**
- * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
- */
- allQuery: '',
- /**
- * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
- */
- mode: 'remote',
- /**
- * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
- * listWidth has a higher value)
- */
- minListWidth : 70,
- /**
- * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
- * allow the user to set arbitrary text into the field (defaults to false)
- */
- forceSelection:false,
- /**
- * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
- * if typeAhead = true (defaults to 250)
- */
- typeAheadDelay : 250,
- /**
- * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
- * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
- */
- valueNotFoundText : undefined,
+ frame : false,
- /**
- * @cfg {String} defaultValue The value displayed after loading the store.
- */
- defaultValue: '',
+ value : '',
- /**
- * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
- */
- blockFocus : false,
+
+ onRender : function(ct, position)
+ {
+ if(!this.el){
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:"width:300px;height:60px;",
+ autocomplete: "new-password"
+ };
+ }
+ Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
+ /*
+ if(this.grow){
+ this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
+ if(this.preventScrollbars){
+ this.el.setStyle("overflow", "hidden");
+ }
+ this.el.setHeight(this.growMin);
+ }
+ */
+ //console.log('onrender' + this.getId() );
+ Roo.form.FCKeditor.editors[this.getId()] = this;
+
+
+ this.replaceTextarea() ;
+
+ },
+ getEditor : function() {
+ return this.fckEditor;
+ },
/**
- * @cfg {Boolean} disableClear Disable showing of clear button.
- */
- disableClear : false,
- /**
- * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
+ * @param {Mixed} value The value to set
*/
- alwaysQuery : false,
- //private
- addicon : false,
- editicon: false,
- // element that contains real text value.. (when hidden is used..)
-
- // private
- onRender : function(ct, position){
- Roo.form.Field.prototype.onRender.call(this, ct, position);
+ setValue : function(value)
+ {
+ //console.log('setValue: ' + value);
- if(this.store){
- this.store.on('beforeload', this.onBeforeLoad, this);
- this.store.on('load', this.onLoad, this);
- this.store.on('loadexception', this.onLoadException, this);
- this.store.load({});
+ if(typeof(value) == 'undefined') { // not sure why this is happending...
+ return;
}
+ Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+
+ //if(!this.el || !this.getEditor()) {
+ // this.value = value;
+ //this.setValue.defer(100,this,[value]);
+ // return;
+ //}
+ if(!this.getEditor()) {
+ return;
+ }
+ this.getEditor().SetData(value);
- },
+ //
- // private
- initEvents : function(){
- //Roo.form.ComboBox.superclass.initEvents.call(this);
-
},
- onDestroy : function(){
-
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
+ /**
+ * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
+ * @return {Mixed} value The field value
+ */
+ getValue : function()
+ {
+
+ if (this.frame && this.frame.dom.style.display == 'none') {
+ return Roo.form.FCKeditor.superclass.getValue.call(this);
}
- //Roo.form.ComboBox.superclass.onDestroy.call(this);
- },
-
- // private
- fireKey : function(e){
- if(e.isNavKeyPress() && !this.list.isVisible()){
- this.fireEvent("specialkey", this, e);
+
+ if(!this.el || !this.getEditor()) {
+
+ // this.getValue.defer(100,this);
+ return this.value;
}
- },
-
- // private
- onResize: function(w, h){
+
- return;
-
+ var value=this.getEditor().GetData();
+ Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+ return Roo.form.FCKeditor.superclass.getValue.call(this);
+
},
/**
- * Allow or prevent the user from directly editing the field text. If false is passed,
- * the user will only be able to select from the items defined in the dropdown list. This method
- * is the runtime equivalent of setting the 'editable' config option at config time.
- * @param {Boolean} value True to allow the user to directly edit the field text
+ * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
+ * @return {Mixed} value The field value
*/
- setEditable : function(value){
+ getRawValue : function()
+ {
+ if (this.frame && this.frame.dom.style.display == 'none') {
+ return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+ }
+
+ if(!this.el || !this.getEditor()) {
+ //this.getRawValue.defer(100,this);
+ return this.value;
+ return;
+ }
+
+
+
+ var value=this.getEditor().GetData();
+ Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
+ return Roo.form.FCKeditor.superclass.getRawValue.call(this);
},
-
- // private
- onBeforeLoad : function(){
-
- Roo.log("Select before load");
- return;
- this.innerList.update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- //this.restrictHeight();
- this.selectedIndex = -1;
+ setSize : function(w,h) {
+
+
+
+ //if (this.frame && this.frame.dom.style.display == 'none') {
+ // Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+ // return;
+ //}
+ //if(!this.el || !this.getEditor()) {
+ // this.setSize.defer(100,this, [w,h]);
+ // return;
+ //}
+
+
+
+ Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+
+ this.frame.dom.setAttribute('width', w);
+ this.frame.dom.setAttribute('height', h);
+ this.frame.setSize(w,h);
+
},
-
- // private
- onLoad : function(){
-
- var dom = this.el.dom;
- dom.innerHTML = '';
- var od = dom.ownerDocument;
+ toggleSourceEdit : function(value) {
+
+
- if (this.emptyText) {
- var op = od.createElement('option');
- op.setAttribute('value', '');
- op.innerHTML = String.format('{0}', this.emptyText);
- dom.appendChild(op);
+ this.el.dom.style.display = value ? '' : 'none';
+ this.frame.dom.style.display = value ? 'none' : '';
+
+ },
+
+
+ focus: function(tag)
+ {
+ if (this.frame.dom.style.display == 'none') {
+ return Roo.form.FCKeditor.superclass.focus.call(this);
}
- if(this.store.getCount() > 0){
-
- var vf = this.valueField;
- var df = this.displayField;
- this.store.data.each(function(r) {
- // which colmsn to use... testing - cdoe / title..
- var op = od.createElement('option');
- op.setAttribute('value', r.data[vf]);
- op.innerHTML = String.format('{0}', r.data[df]);
- dom.appendChild(op);
- });
- if (typeof(this.defaultValue != 'undefined')) {
- this.setValue(this.defaultValue);
+ if(!this.el || !this.getEditor()) {
+ this.focus.defer(100,this, [tag]);
+ return;
+ }
+
+
+
+
+ var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
+ this.getEditor().Focus();
+ if (tgs.length) {
+ if (!this.getEditor().Selection.GetSelection()) {
+ this.focus.defer(100,this, [tag]);
+ return;
}
-
- }else{
- //this.onEmptyResults();
+
+ var r = this.getEditor().EditorDocument.createRange();
+ r.setStart(tgs[0],0);
+ r.setEnd(tgs[0],0);
+ this.getEditor().Selection.GetSelection().removeAllRanges();
+ this.getEditor().Selection.GetSelection().addRange(r);
+ this.getEditor().Focus();
}
- //this.el.focus();
+
},
- // private
- onLoadException : function()
- {
- dom.innerHTML = '';
-
- Roo.log("Select on load exception");
- return;
- this.collapse();
- Roo.log(this.store.reader.jsonData);
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+
+
+ replaceTextarea : function()
+ {
+ if ( document.getElementById( this.getId() + '___Frame' ) ) {
+ return ;
}
+ //if ( !this.checkBrowser || this._isCompatibleBrowser() )
+ //{
+ // We must check the elements firstly using the Id and then the name.
+ var oTextarea = document.getElementById( this.getId() );
-
- },
- // private
- onTypeAhead : function(){
+ var colElementsByName = document.getElementsByName( this.getId() ) ;
+ oTextarea.style.display = 'none' ;
+
+ if ( oTextarea.tabIndex ) {
+ this.TabIndex = oTextarea.tabIndex ;
+ }
+
+ this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
+ this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
+ this.frame = Roo.get(this.getId() + '___Frame')
},
+
+ _getConfigHtml : function()
+ {
+ var sConfig = '' ;
- // private
- onSelect : function(record, index){
- Roo.log('on select?');
- return;
- if(this.fireEvent('beforeselect', this, record, index) !== false){
- this.setFromData(index > -1 ? record.data : false);
- this.collapse();
- this.fireEvent('select', this, record, index);
+ for ( var o in this.fckconfig ) {
+ sConfig += sConfig.length > 0 ? '&' : '';
+ sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
}
+
+ return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
},
+
+
+ _getIFrameHtml : function()
+ {
+ var sFile = 'fckeditor.html' ;
+ /* no idea what this is about..
+ try
+ {
+ if ( (/fcksource=true/i).test( window.top.location.search ) )
+ sFile = 'fckeditor.original.html' ;
+ }
+ catch (e) {
+ */
- /**
- * Returns the currently selected field value or empty string if no value is set.
- * @return {String} value The selected value
- */
- getValue : function(){
- var dom = this.el.dom;
- this.value = dom.options[dom.selectedIndex].value;
- return this.value;
+ var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
+ sLink += this.toolbarSet ? ( '&Toolbar=' + this.toolbarSet) : '';
+
+ var html = '<iframe id="' + this.getId() +
+ '___Frame" src="' + sLink +
+ '" width="' + this.width +
+ '" height="' + this.height + '"' +
+ (this.tabIndex ? ' tabindex="' + this.tabIndex + '"' :'' ) +
+ ' frameborder="0" scrolling="no"></iframe>' ;
+
+ return html ;
},
+
+ _insertHtmlBefore : function( html, element )
+ {
+ if ( element.insertAdjacentHTML ) {
+ // IE
+ element.insertAdjacentHTML( 'beforeBegin', html ) ;
+ } else { // Gecko
+ var oRange = document.createRange() ;
+ oRange.setStartBefore( element ) ;
+ var oFragment = oRange.createContextualFragment( html );
+ element.parentNode.insertBefore( oFragment, element ) ;
+ }
+ }
+
+
+
+
+
+
+
+
+});
+
+//Roo.reg('fckeditor', Roo.form.FCKeditor);
+
+function FCKeditor_OnComplete(editorInstance){
+ var f = Roo.form.FCKeditor.editors[editorInstance.Name];
+ f.fckEditor = editorInstance;
+ //console.log("loaded");
+ f.fireEvent('editorinit', f, editorInstance);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//<script type="text/javascript">
+/**
+ * @class Roo.form.GridField
+ * @extends Roo.form.Field
+ * Embed a grid (or editable grid into a form)
+ * STATUS ALPHA
+ *
+ * This embeds a grid in a form, the value of the field should be the json encoded array of rows
+ * it needs
+ * xgrid.store = Roo.data.Store
+ * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
+ * xgrid.store.reader = Roo.data.JsonReader
+ *
+ *
+ * @constructor
+ * Creates a new GridField
+ * @param {Object} config Configuration options
+ */
+Roo.form.GridField = function(config){
+ Roo.form.GridField.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.form.GridField, Roo.form.Field, {
/**
- * Clears any text/value currently set in the field
+ * @cfg {Number} width - used to restrict width of grid..
*/
- clearValue : function(){
- this.value = '';
- this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
-
- },
-
+ width : 100,
/**
- * Sets the specified value into the field. If the value finds a match, the corresponding record text
- * will be displayed in the field. If the value does not match the data value of an existing item,
- * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
- * Otherwise the field will be blank (although the value will still be set).
- * @param {String} value The value to match
+ * @cfg {Number} height - used to restrict height of grid..
*/
- setValue : function(v){
- var d = this.el.dom;
- for (var i =0; i < d.options.length;i++) {
- if (v == d.options[i].value) {
- d.selectedIndex = i;
- this.value = v;
- return;
- }
- }
- this.clearValue();
- },
+ height : 50,
+ /**
+ * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
+ *
+ *}
+ */
+ xgrid : false,
/**
- * @property {Object} the last set data for the element
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "checkbox", autocomplete: "off"})
*/
-
- lastData : false,
+ // defaultAutoCreate : { tag: 'div' },
+ defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
/**
- * Sets the value of the field based on a object which is related to the record format for the store.
- * @param {Object} value the value to set as. or false on reset?
+ * @cfg {String} addTitle Text to include for adding a title.
*/
- setFromData : function(o){
- Roo.log('setfrom data?');
-
-
-
+ addTitle : false,
+ //
+ onResize : function(){
+ Roo.form.Field.superclass.onResize.apply(this, arguments);
},
- // private
- reset : function(){
- this.clearValue();
+
+ initEvents : function(){
+ // Roo.form.Checkbox.superclass.initEvents.call(this);
+ // has no events...
+
+ },
+
+
+ getResizeEl : function(){
+ return this.wrap;
+ },
+
+ getPositionEl : function(){
+ return this.wrap;
},
+
// private
- findRecord : function(prop, value){
+ onRender : function(ct, position){
- return false;
+ this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
+ var style = this.style;
+ delete this.style;
+
+ Roo.form.GridField.superclass.onRender.call(this, ct, position);
+ this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
+ this.viewEl = this.wrap.createChild({ tag: 'div' });
+ if (style) {
+ this.viewEl.applyStyles(style);
+ }
+ if (this.width) {
+ this.viewEl.setWidth(this.width);
+ }
+ if (this.height) {
+ this.viewEl.setHeight(this.height);
+ }
+ //if(this.inputValue !== undefined){
+ //this.setValue(this.value);
+
+
+ this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
+
+
+ this.grid.render();
+ this.grid.getDataSource().on('remove', this.refreshValue, this);
+ this.grid.getDataSource().on('update', this.refreshValue, this);
+ this.grid.on('afteredit', this.refreshValue, this);
+
+ },
+
- var record;
- if(this.store.getCount() > 0){
- this.store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- return false;
- }
- return true;
- });
+ /**
+ * Sets the value of the item.
+ * @param {String} either an object or a string..
+ */
+ setValue : function(v){
+ //this.value = v;
+ v = v || []; // empty set..
+ // this does not seem smart - it really only affects memoryproxy grids..
+ if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
+ var ds = this.grid.getDataSource();
+ // assumes a json reader..
+ var data = {}
+ data[ds.reader.meta.root ] = typeof(v) == 'string' ? Roo.decode(v) : v;
+ ds.loadData( data);
+ }
+ // clear selection so it does not get stale.
+ if (this.grid.sm) {
+ this.grid.sm.clearSelections();
}
- return record;
- },
-
- getName: function()
- {
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+ Roo.form.GridField.superclass.setValue.call(this, v);
+ this.refreshValue();
+ // should load data in the grid really....
},
-
-
-
// private
- onEmptyResults : function(){
- Roo.log('empty results');
- //this.collapse();
- },
+ refreshValue: function() {
+ var val = [];
+ this.grid.getDataSource().each(function(r) {
+ val.push(r.data);
+ });
+ this.el.dom.value = Roo.encode(val);
+ }
+
+
+
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.DisplayField
+ * @extends Roo.form.Field
+ * A generic Field to display non-editable data.
+ * @cfg {Boolean} closable (true|false) default false
+ * @constructor
+ * Creates a new Display Field item.
+ * @param {Object} config Configuration options
+ */
+Roo.form.DisplayField = function(config){
+ Roo.form.DisplayField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event close
+ * Fires after the click the close btn
+ * @param {Roo.form.DisplayField} this
+ */
+ close : true
+ });
+};
+Roo.extend(Roo.form.DisplayField, Roo.form.TextField, {
+ inputType: 'hidden',
+ allowBlank: true,
+ readOnly: true,
+
+
/**
- * Returns true if the dropdown list is expanded, else false.
+ * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
*/
- isExpanded : function(){
- return false;
- },
-
+ focusClass : undefined,
/**
- * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {String} value The data value of the item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- * @return {Boolean} True if the value matched an item in the list, else false
+ * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
*/
- selectByValue : function(v, scrollIntoView){
- Roo.log('select By Value');
- return false;
+ fieldClass: 'x-form-field',
- if(v !== undefined && v !== null){
- var r = this.findRecord(this.valueField || this.displayField, v);
- if(r){
- this.select(this.store.indexOf(r), scrollIntoView);
- return true;
- }
- }
- return false;
- },
-
+ /**
+ * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
+ */
+ valueRenderer: undefined,
+
+ width: 100,
/**
- * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {Number} index The zero-based index of the list item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "checkbox", autocomplete: "off"})
*/
- select : function(index, scrollIntoView){
- Roo.log('select ');
- return ;
+
+ // defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+
+ closable : false,
+
+ onResize : function(){
+ Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
- this.selectedIndex = index;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.innerList.scrollChildIntoView(el, false);
- }
- }
},
-
-
- // private
- validateBlur : function(){
-
- return;
+ initEvents : function(){
+ // Roo.form.Checkbox.superclass.initEvents.call(this);
+ // has no events...
+ if(this.closable){
+ this.closeEl.on('click', this.onClose, this);
+ }
+
},
- // private
- initQuery : function(){
- this.doQuery(this.getRawValue());
+
+ getResizeEl : function(){
+ return this.wrap;
},
- // private
- doForce : function(){
- if(this.el.dom.value.length > 0){
- this.el.dom.value =
- this.lastSelectionText === undefined ? '' : this.lastSelectionText;
-
- }
+ getPositionEl : function(){
+ return this.wrap;
},
- /**
- * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
- * query allowing the query action to be canceled if needed.
- * @param {String} query The SQL query to execute
- * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
- * in the field than the minimum specified by the minChars config option. It also clears any filter previously
- * saved in the current store (defaults to false)
- */
- doQuery : function(q, forceAll){
+ // private
+ onRender : function(ct, position){
- Roo.log('doQuery?');
- if(q === undefined || q === null){
- q = '';
- }
- var qe = {
- query: q,
- forceAll: forceAll,
- combo: this,
- cancel:false
- };
- if(this.fireEvent('beforequery', qe)===false || qe.cancel){
- return false;
+ Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
+ //if(this.inputValue !== undefined){
+ this.wrap = this.el.wrap();
+
+ this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
+
+ if(this.closable){
+ this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
}
- q = qe.query;
- forceAll = qe.forceAll;
- if(forceAll === true || (q.length >= this.minChars)){
- if(this.lastQuery != q || this.alwaysQuery){
- this.lastQuery = q;
- if(this.mode == 'local'){
- this.selectedIndex = -1;
- if(forceAll){
- this.store.clearFilter();
- }else{
- this.store.filter(this.displayField, q);
- }
- this.onLoad();
- }else{
- this.store.baseParams[this.queryParam] = q;
- this.store.load({
- params: this.getParams(q)
- });
- this.expand();
- }
- }else{
- this.selectedIndex = -1;
- this.onLoad();
- }
+
+ if (this.bodyStyle) {
+ this.viewEl.applyStyles(this.bodyStyle);
}
+ //this.viewEl.setStyle('padding', '2px');
+
+ this.setValue(this.value);
+
},
-
+/*
// private
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
- }
- return p;
- },
+ initValue : Roo.emptyFn,
- /**
- * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
- */
- collapse : function(){
-
- },
+ */
- // private
- collapseIf : function(e){
+ // private
+ onClick : function(){
},
/**
- * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+ * Sets the checked state of the checkbox.
+ * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
*/
- expand : function(){
-
- } ,
-
- // private
-
+ setValue : function(v){
+ this.value = v;
+ var html = this.valueRenderer ? this.valueRenderer(v) : String.format('{0}', v);
+ // this might be called before we have a dom element..
+ if (!this.viewEl) {
+ return;
+ }
+ this.viewEl.dom.innerHTML = html;
+ Roo.form.DisplayField.superclass.setValue.call(this, v);
- /**
- * @cfg {Boolean} grow
- * @hide
- */
- /**
- * @cfg {Number} growMin
- * @hide
- */
- /**
- * @cfg {Number} growMax
- * @hide
- */
- /**
- * @hide
- * @method autoSize
- */
+ },
- setWidth : function()
+ onClose : function(e)
{
+ e.preventDefault();
- },
- getResizeEl : function(){
- return this.el;
+ this.fireEvent('close', this);
}
-});//<script type="text/javasscript">
-
-
-/**
- * @class Roo.DDView
- * A DnD enabled version of Roo.View.
- * @param {Element/String} container The Element in which to create the View.
- * @param {String} tpl The template string used to create the markup for each element of the View
- * @param {Object} config The configuration properties. These include all the config options of
- * {@link Roo.View} plus some specific to this class.<br>
- * <p>
- * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
- * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
- * <p>
- * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
-.x-view-drag-insert-above {
- border-top:1px dotted #3366cc;
-}
-.x-view-drag-insert-below {
- border-bottom:1px dotted #3366cc;
-}
-</code></pre>
+});/*
+ *
+ * Licence- LGPL
*
*/
-
-Roo.DDView = function(container, tpl, config) {
- Roo.DDView.superclass.constructor.apply(this, arguments);
- this.getEl().setStyle("outline", "0px none");
- this.getEl().unselectable();
- if (this.dragGroup) {
- this.setDraggable(this.dragGroup.split(","));
- }
- if (this.dropGroup) {
- this.setDroppable(this.dropGroup.split(","));
- }
- if (this.deletable) {
- this.setDeletable();
- }
- this.isDirtyFlag = false;
- this.addEvents({
- "drop" : true
- });
-};
-
-Roo.extend(Roo.DDView, Roo.View, {
-/** @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
-/** @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
-/** @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
-/** @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
-
- isFormField: true,
-
- reset: Roo.emptyFn,
-
- clearInvalid: Roo.form.Field.prototype.clearInvalid,
-
- validate: function() {
- return true;
- },
-
- destroy: function() {
- this.purgeListeners();
- this.getEl.removeAllListeners();
- this.getEl().remove();
- if (this.dragZone) {
- if (this.dragZone.destroy) {
- this.dragZone.destroy();
- }
- }
- if (this.dropZone) {
- if (this.dropZone.destroy) {
- this.dropZone.destroy();
- }
- }
- },
-
-/** Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
- getName: function() {
- return this.name;
- },
-
-/** Loads the View from a JSON string representing the Records to put into the Store. */
- setValue: function(v) {
- if (!this.store) {
- throw "DDView.setValue(). DDView must be constructed with a valid Store";
- }
- var data = {};
- data[this.store.reader.meta.root] = v ? [].concat(v) : [];
- this.store.proxy = new Roo.data.MemoryProxy(data);
- this.store.load();
- },
-
-/** @return {String} a parenthesised list of the ids of the Records in the View. */
- getValue: function() {
- var result = '(';
- this.store.each(function(rec) {
- result += rec.id + ',';
- });
- return result.substr(0, result.length - 1) + ')';
- },
-
- getIds: function() {
- var i = 0, result = new Array(this.store.getCount());
- this.store.each(function(rec) {
- result[i++] = rec.id;
- });
- return result;
- },
-
- isDirty: function() {
- return this.isDirtyFlag;
- },
/**
- * Part of the Roo.dd.DropZone interface. If no target node is found, the
- * whole Element becomes the target, and this causes the drop gesture to append.
+ * @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
*/
- getTargetFromEvent : function(e) {
- var target = e.getTarget();
- while ((target !== null) && (target.parentNode != this.el.dom)) {
- target = target.parentNode;
- }
- if (!target) {
- target = this.el.dom.lastChild || this.el.dom;
- }
- return target;
- },
+Roo.form.DayPicker= function(config){
+ Roo.form.DayPicker.superclass.constructor.call(this, config);
+
+};
-/**
- * Create the drag data which consists of an object which has the property "ddel" as
- * the drag proxy element.
- */
- getDragData : function(e) {
- var target = this.findItemFromChild(e.getTarget());
- if(target) {
- this.handleSelection(e);
- var selNodes = this.getSelectedNodes();
- var dragData = {
- source: this,
- copy: this.copy || (this.allowCopy && e.ctrlKey),
- nodes: selNodes,
- records: []
- };
- var selectedIndices = this.getSelectedIndexes();
- for (var i = 0; i < selectedIndices.length; i++) {
- dragData.records.push(this.store.getAt(selectedIndices[i]));
- }
- if (selNodes.length == 1) {
- dragData.ddel = target.cloneNode(true); // the div element
- } else {
- var div = document.createElement('div'); // create the multi element drag "ghost"
- div.className = 'multi-proxy';
- for (var i = 0, len = selNodes.length; i < len; i++) {
- div.appendChild(selNodes[i].cloneNode(true));
- }
- dragData.ddel = div;
- }
- //console.log(dragData)
- //console.log(dragData.ddel.innerHTML)
- return dragData;
- }
- //console.log('nodragData')
- return false;
- },
+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: "new-password"},
-/** Specify to which ddGroup items in this DDView may be dragged. */
- setDraggable: function(ddGroup) {
- if (ddGroup instanceof Array) {
- Roo.each(ddGroup, this.setDraggable, this);
- return;
- }
- if (this.dragZone) {
- this.dragZone.addToGroup(ddGroup);
- } else {
- this.dragZone = new Roo.dd.DragZone(this.getEl(), {
- containerScroll: true,
- ddGroup: ddGroup
-
- });
-// Draggability implies selection. DragZone's mousedown selects the element.
- if (!this.multiSelect) { this.singleSelect = true; }
-
-// Wire the DragZone's handlers up to methods in *this*
- this.dragZone.getDragData = this.getDragData.createDelegate(this);
- }
- },
-
-/** Specify from which ddGroup this DDView accepts drops. */
- setDroppable: function(ddGroup) {
- if (ddGroup instanceof Array) {
- Roo.each(ddGroup, this.setDroppable, this);
- return;
- }
- if (this.dropZone) {
- this.dropZone.addToGroup(ddGroup);
- } else {
- this.dropZone = new Roo.dd.DropZone(this.getEl(), {
- containerScroll: true,
- ddGroup: ddGroup
- });
+
+ actionMode : 'viewEl',
+ //
+ // private
+
+ inputType : 'hidden',
+
+
+ inputElement: false, // real input element?
+ basedOn: false, // ????
+
+ isFormField: true, // not sure where this is needed!!!!
-// Wire the DropZone's handlers up to methods in *this*
- this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
- this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
- this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
- this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
- this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
- }
+ onResize : function(){
+ Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+ if(!this.boxLabel){
+ this.el.alignTo(this.wrap, 'c-c');
+ }
},
-/** Decide whether to drop above or below a View node. */
- getDropPoint : function(e, n, dd){
- if (n == this.el.dom) { return "above"; }
- var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
- var c = t + (b - t) / 2;
- var y = Roo.lib.Event.getPageY(e);
- if(y <= c) {
- return "above";
- }else{
- return "below";
- }
+ initEvents : function(){
+ Roo.form.Checkbox.superclass.initEvents.call(this);
+ this.el.on("click", this.onClick, this);
+ this.el.on("change", this.onClick, this);
},
- onNodeEnter : function(n, dd, e, data){
- return false;
- },
-
- onNodeOver : function(n, dd, e, data){
- var pt = this.getDropPoint(e, n, dd);
- // set the insert point style on the target node
- var dragElClass = this.dropNotAllowed;
- if (pt) {
- var targetElClass;
- if (pt == "above"){
- dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
- targetElClass = "x-view-drag-insert-above";
- } else {
- dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
- targetElClass = "x-view-drag-insert-below";
- }
- if (this.lastInsertClass != targetElClass){
- Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
- this.lastInsertClass = targetElClass;
- }
- }
- return dragElClass;
- },
- onNodeOut : function(n, dd, e, data){
- this.removeDropIndicators(n);
+ getResizeEl : function(){
+ return this.wrap;
},
- onNodeDrop : function(n, dd, e, data){
- if (this.fireEvent("drop", this, n, dd, e, data) === false) {
- return false;
- }
- var pt = this.getDropPoint(e, n, dd);
- var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
- if (pt == "below") { insertAt++; }
- for (var i = 0; i < data.records.length; i++) {
- var r = data.records[i];
- var dup = this.store.getById(r.id);
- if (dup && (dd != this.dragZone)) {
- Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
- } else {
- if (data.copy) {
- this.store.insert(insertAt++, r.copy());
- } else {
- data.source.isDirtyFlag = true;
- r.store.remove(r);
- this.store.insert(insertAt++, r);
- }
- this.isDirtyFlag = true;
- }
- }
- this.dragZone.cachedTarget = null;
- return true;
+ getPositionEl : function(){
+ return this.wrap;
},
- removeDropIndicators : function(n){
- if(n){
- Roo.fly(n).removeClass([
- "x-view-drag-insert-above",
- "x-view-drag-insert-below"]);
- this.lastInsertClass = "_noclass";
- }
+
+ // 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
+
+
+
+
},
-/**
- * Utility method. Add a delete option to the DDView's context menu.
- * @param {String} imageUrl The URL of the "delete" icon image.
- */
- setDeletable: function(imageUrl) {
- if (!this.singleSelect && !this.multiSelect) {
- this.singleSelect = true;
- }
- var c = this.getContextMenu();
- this.contextMenu.on("itemclick", function(item) {
- switch (item.id) {
- case "delete":
- this.remove(this.getSelectedIndexes());
- break;
- }
- }, this);
- this.contextMenu.add({
- icon: imageUrl,
- id: "delete",
- text: 'Delete'
- });
- },
-
-/** Return the context menu for this DDView. */
- getContextMenu: function() {
- if (!this.contextMenu) {
-// Create the View's context menu
- this.contextMenu = new Roo.menu.Menu({
- id: this.id + "-contextmenu"
- });
- this.el.on("contextmenu", this.showContextMenu, this);
- }
- return this.contextMenu;
- },
-
- disableContextMenu: function() {
- if (this.contextMenu) {
- this.el.un("contextmenu", this.showContextMenu, this);
- }
- },
+ // private
+ initValue : Roo.emptyFn,
- showContextMenu: function(e, item) {
- item = this.findItemFromChild(e.getTarget());
- if (item) {
- e.stopEvent();
- this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
- this.contextMenu.showAt(e.getXY());
- }
+ /**
+ * Returns the checked state of the checkbox.
+ * @return {Boolean} True if checked, else false
+ */
+ getValue : function(){
+ return this.el.dom.value;
+
},
-/**
- * Remove {@link Roo.data.Record}s at the specified indices.
- * @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
- */
- remove: function(selectedIndices) {
- selectedIndices = [].concat(selectedIndices);
- for (var i = 0; i < selectedIndices.length; i++) {
- var rec = this.store.getAt(selectedIndices[i]);
- this.store.remove(rec);
- }
+ // 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);
},
-/**
- * Double click fires the event, but also, if this is draggable, and there is only one other
- * related DropZone, it transfers the selected node.
- */
- onDblClick : function(e){
- var item = this.findItemFromChild(e.getTarget());
- if(item){
- if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
- return false;
+ /**
+ * 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');
}
- if (this.dragGroup) {
- var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
- while (targets.indexOf(this.dropZone) > -1) {
- targets.remove(this.dropZone);
- }
- if (targets.length == 1) {
- this.dragZone.cachedTarget = null;
- var el = Roo.get(targets[0].getEl());
- var box = el.getBox(true);
- targets[0].onNodeDrop(el.dom, {
- target: el.dom,
- xy: [box.x, box.y + box.height - 1]
- }, null, this.getDragData(e));
- }
- }
+
+ });
+
+
+ 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);
},
- handleSelection: function(e) {
- this.dragZone.cachedTarget = null;
- var item = this.findItemFromChild(e.getTarget());
- if (!item) {
- this.clearSelections(true);
- return;
+ onDestroy : function()
+ {
+ if(this.viewEl){
+ Roo.get(this.viewEl).remove();
}
- if (item && (this.multiSelect || this.singleSelect)){
- if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
- this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
- }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
- this.unselect(item);
- } else {
- this.select(item, this.multiSelect && e.ctrlKey);
- this.lastSelection = item;
- }
- }
- },
-
- onItemClick : function(item, index, e){
- if(this.fireEvent("beforeclick", this, index, item, e) === false){
- return false;
- }
- return true;
- },
-
- unselect : function(nodeInfo, suppressEvent){
- var node = this.getNode(nodeInfo);
- if(node && this.isSelected(node)){
- if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
- Roo.fly(node).removeClass(this.selectedClass);
- this.selections.remove(node);
- if(!suppressEvent){
- this.fireEvent("selectionchange", this, this.selections);
- }
- }
- }
+
+ Roo.form.DayPicker.superclass.onDestroy.call(this);
}
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
+
+});/*
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011 Alan Knowles
*
- * Fork - LGPL
- * <script type="text/javascript">
+ * License - LGPL
*/
+
/**
- * @class Roo.LayoutManager
- * @extends Roo.util.Observable
- * Base class for layout managers.
+ * @class Roo.form.ComboCheck
+ * @extends Roo.form.ComboBox
+ * A combobox for multiple select items.
+ *
+ * FIXME - could do with a reset button..
+ *
+ * @constructor
+ * Create a new ComboCheck
+ * @param {Object} config Configuration options
*/
-Roo.LayoutManager = function(container, config){
- Roo.LayoutManager.superclass.constructor.call(this);
- this.el = Roo.get(container);
- // ie scrollbar fix
- if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
- document.body.scroll = "no";
- }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
- this.el.position('relative');
- }
- this.id = this.el.id;
- this.el.addClass("x-layout-container");
- /** false to disable window resize monitoring @type Boolean */
- this.monitorWindowResize = true;
- this.regions = {};
- this.addEvents({
- /**
- * @event layout
- * Fires when a layout is performed.
- * @param {Roo.LayoutManager} this
- */
- "layout" : true,
- /**
- * @event regionresized
- * Fires when the user resizes a region.
- * @param {Roo.LayoutRegion} region The resized region
- * @param {Number} newSize The new size (width for east/west, height for north/south)
- */
- "regionresized" : true,
- /**
- * @event regioncollapsed
- * Fires when a region is collapsed.
- * @param {Roo.LayoutRegion} region The collapsed region
- */
- "regioncollapsed" : true,
- /**
- * @event regionexpanded
- * Fires when a region is expanded.
- * @param {Roo.LayoutRegion} region The expanded region
- */
- "regionexpanded" : true
+Roo.form.ComboCheck = function(config){
+ Roo.form.ComboCheck.superclass.constructor.call(this, config);
+ // should verify some data...
+ // like
+ // hiddenName = required..
+ // displayField = required
+ // valudField == required
+ var req= [ 'hiddenName', 'displayField', 'valueField' ];
+ var _t = this;
+ Roo.each(req, function(e) {
+ if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
+ throw "Roo.form.ComboCheck : missing value for: " + e;
+ }
});
- this.updating = false;
- Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+
+
};
-Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
- /**
- * Returns true if this layout is currently being updated
- * @return {Boolean}
- */
- isUpdating : function(){
- return this.updating;
- },
+Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
+
+
+ editable : false,
+
+ selectedClass: 'x-menu-item-checked',
- /**
- * Suspend the LayoutManager from doing auto-layouts while
- * making multiple add or remove calls
- */
- beginUpdate : function(){
- this.updating = true;
+ // private
+ onRender : function(ct, position){
+ var _t = this;
+
+
+
+ if(!this.tpl){
+ var cls = 'x-combo-list';
+
+
+ this.tpl = new Roo.Template({
+ html : '<div class="'+cls+'-item x-menu-check-item">' +
+ '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' +
+ '<span>{' + this.displayField + '}</span>' +
+ '</div>'
+
+ });
+ }
+
+
+ Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
+ this.view.singleSelect = false;
+ this.view.multiSelect = true;
+ this.view.toggleSelect = true;
+ this.pageTb.add(new Roo.Toolbar.Fill(),{
+
+ text: 'Select All',
+ handler: function() {
+ _t.selectAll();
+ }
+ },
+ {
+ text: 'Done',
+ handler: function() {
+ _t.collapse();
+ }
+ });
},
- /**
- * Restore auto-layouts and optionally disable the manager from performing a layout
- * @param {Boolean} noLayout true to disable a layout update
- */
- endUpdate : function(noLayout){
- this.updating = false;
- if(!noLayout){
- this.layout();
- }
+ cleanLeadingSpace : function(e)
+ {
+ // this is disabled, as it retriggers setvalue on blur
+ return;
},
-
- layout: function(){
+ doForce : function() {
+ // no idea what this did, but it blanks out our values.
+ return;
+ },
+ onViewOver : function(e, t){
+ // do nothing...
+ return;
},
- onRegionResized : function(region, newSize){
- this.fireEvent("regionresized", region, newSize);
- this.layout();
+ onViewClick : function(doFocus,index){
+ return;
+
+ },
+ select: function () {
+ //Roo.log("SELECT CALLED");
+ },
+
+ selectByValue : function(xv, scrollIntoView){
+ var ar = this.getValueArray();
+ var sels = [];
+
+ Roo.each(ar, function(v) {
+ if(v === undefined || v === null){
+ return;
+ }
+ var r = this.findRecord(this.valueField, v);
+ if(r){
+ sels.push(this.store.indexOf(r))
+
+ }
+ },this);
+ this.view.select(sels);
+ return false;
},
- onRegionCollapsed : function(region){
- this.fireEvent("regioncollapsed", region);
+ selectAll : function()
+ {
+ var sels = [];
+ this.store.each(function(r,i) {
+ sels.push(i);
+ });
+ this.view.select(sels);
+ this.collapse();
+ return false;
+
},
- onRegionExpanded : function(region){
- this.fireEvent("regionexpanded", region);
+ onSelect : function(record, index){
+ // Roo.log("onselect Called");
+ // this is only called by the clear button now..
+ this.view.clearSelections();
+ this.setValue('[]');
+ if (this.value != this.valueBefore) {
+ this.fireEvent('change', this, this.value, this.valueBefore);
+ this.valueBefore = this.value;
+ }
},
+ getValueArray : function()
+ {
+ var ar = [] ;
- /**
- * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
- * performs box-model adjustments.
- * @return {Object} The size as an object {width: (the width), height: (the height)}
- */
- getViewSize : function(){
- var size;
- if(this.el.dom != document.body){
- size = this.el.getSize();
- }else{
- size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
+ try {
+ //Roo.log(this.value);
+ if (typeof(this.value) == 'undefined') {
+ return [];
+ }
+ var ar = Roo.decode(this.value);
+ return ar instanceof Array ? ar : []; //?? valid?
+
+ } catch(e) {
+ Roo.log(e + "\nRoo.form.ComboCheck:getValueArray invalid data:" + this.getValue());
+ return [];
}
- size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
- size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
- return size;
+
},
-
- /**
- * Returns the Element this layout is bound to.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
+ expand : function ()
+ {
+
+ Roo.form.ComboCheck.superclass.expand.call(this);
+ this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
+ //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
+
+
},
- /**
- * Returns the specified region.
- * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
- * @return {Roo.LayoutRegion}
- */
- getRegion : function(target){
- return this.regions[target.toLowerCase()];
+ collapse : function(){
+ Roo.form.ComboCheck.superclass.collapse.call(this);
+ var sl = this.view.getSelectedIndexes();
+ var st = this.store;
+ var nv = [];
+ var tv = [];
+ var r;
+ Roo.each(sl, function(i) {
+ r = st.getAt(i);
+ nv.push(r.get(this.valueField));
+ },this);
+ this.setValue(Roo.encode(nv));
+ if (this.value != this.valueBefore) {
+
+ this.fireEvent('change', this, this.value, this.valueBefore);
+ this.valueBefore = this.value;
+ }
+
},
- onWindowResize : function(){
- if(this.monitorWindowResize){
- this.layout();
- }
+ setValue : function(v){
+ // Roo.log(v);
+ this.value = v;
+
+ var vals = this.getValueArray();
+ var tv = [];
+ Roo.each(vals, function(k) {
+ var r = this.findRecord(this.valueField, k);
+ if(r){
+ tv.push(r.data[this.displayField]);
+ }else if(this.valueNotFoundText !== undefined){
+ tv.push( this.valueNotFoundText );
+ }
+ },this);
+ // Roo.log(tv);
+
+ Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
+ this.hiddenField.value = v;
+ this.value = v;
}
+
});/*
* Based on:
* Ext JS Library 1.1.1
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.BorderLayout
- * @extends Roo.LayoutManager
- * @children Roo.ContentPanel
- * This class represents a common layout manager used in desktop applications. For screenshots and more details,
- * please see: <br><br>
- * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
- * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
- * Example:
- <pre><code>
- var layout = new Roo.BorderLayout(document.body, {
- north: {
- initialSize: 25,
- titlebar: false
- },
- west: {
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true
- },
- east: {
- split:true,
- initialSize: 202,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true
- },
- south: {
- split:true,
- initialSize: 100,
- minSize: 100,
- maxSize: 200,
- titlebar: true,
- collapsible: true
- },
- center: {
- titlebar: true,
- autoScroll:true,
- resizeTabs: true,
- minTabWidth: 50,
- preferredTabWidth: 150
- }
-});
-
-// shorthand
-var CP = Roo.ContentPanel;
-
-layout.beginUpdate();
-layout.add("north", new CP("north", "North"));
-layout.add("south", new CP("south", {title: "South", closable: true}));
-layout.add("west", new CP("west", {title: "West"}));
-layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
-layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
-layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
-layout.getRegion("center").showPanel("center1");
-layout.endUpdate();
-</code></pre>
-
-<b>The container the layout is rendered into can be either the body element or any other element.
-If it is not the body element, the container needs to either be an absolute positioned element,
-or you will need to add "position:relative" to the css of the container. You will also need to specify
-the container size if it is not the body element.</b>
-
-* @constructor
-* Create a new BorderLayout
-* @param {String/HTMLElement/Element} container The container this layout is bound to
-* @param {Object} config Configuration options
+ * @class Roo.form.Signature
+ * @extends Roo.form.Field
+ * Signature field.
+ * @constructor
+ *
+ * @param {Object} config Configuration options
*/
-Roo.BorderLayout = function(container, config){
- config = config || {};
- Roo.BorderLayout.superclass.constructor.call(this, container, config);
- this.factory = config.factory || Roo.BorderLayout.RegionFactory;
- for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
- var target = this.factory.validRegions[i];
- if(config[target]){
- this.addRegion(target, config[target]);
- }
- }
+
+Roo.form.Signature = function(config){
+ Roo.form.Signature.superclass.constructor.call(this, config);
+
+ this.addEvents({// not in used??
+ /**
+ * @event confirm
+ * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.Signature} combo This combo box
+ */
+ 'confirm' : true,
+ /**
+ * @event reset
+ * Fires when the 'edit' icon is pressed (add a listener to enable add button)
+ * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+ */
+ 'reset' : true
+ });
};
-Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
-
- /**
- * @cfg {Roo.LayoutRegion} east
- */
- /**
- * @cfg {Roo.LayoutRegion} west
- */
- /**
- * @cfg {Roo.LayoutRegion} north
- */
- /**
- * @cfg {Roo.LayoutRegion} south
- */
- /**
- * @cfg {Roo.LayoutRegion} center
- */
+Roo.extend(Roo.form.Signature, Roo.form.Field, {
/**
- * Creates and adds a new region if it doesn't already exist.
- * @param {String} target The target region key (north, south, east, west or center).
- * @param {Object} config The regions config object
- * @return {BorderLayoutRegion} The new region
+ * @cfg {Object} labels Label to use when rendering a form.
+ * defaults to
+ * labels : {
+ * clear : "Clear",
+ * confirm : "Confirm"
+ * }
*/
- addRegion : function(target, config){
- if(!this.regions[target]){
- var r = this.factory.create(target, this, config);
- this.bindRegion(target, r);
- }
- return this.regions[target];
- },
-
- // private (kinda)
- bindRegion : function(name, r){
- this.regions[name] = r;
- r.on("visibilitychange", this.layout, this);
- r.on("paneladded", this.layout, this);
- r.on("panelremoved", this.layout, this);
- r.on("invalidated", this.layout, this);
- r.on("resized", this.onRegionResized, this);
- r.on("collapsed", this.onRegionCollapsed, this);
- r.on("expanded", this.onRegionExpanded, this);
+ labels : {
+ clear : "Clear",
+ confirm : "Confirm"
},
-
/**
- * Performs a layout update.
+ * @cfg {Number} width The signature panel width (defaults to 300)
*/
- layout : function(){
- if(this.updating) {
- return;
- }
- var size = this.getViewSize();
- var w = size.width;
- var h = size.height;
- var centerW = w;
- var centerH = h;
- var centerY = 0;
- var centerX = 0;
- //var x = 0, y = 0;
+ width: 300,
+ /**
+ * @cfg {Number} height The signature panel height (defaults to 100)
+ */
+ height : 100,
+ /**
+ * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
+ */
+ allowBlank : false,
+
+ //private
+ // {Object} signPanel The signature SVG panel element (defaults to {})
+ signPanel : {},
+ // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
+ isMouseDown : false,
+ // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
+ isConfirmed : false,
+ // {String} signatureTmp SVG mapping string (defaults to empty string)
+ signatureTmp : '',
+
+
+ defaultAutoCreate : { // modified by initCompnoent..
+ tag: "input",
+ type:"hidden"
+ },
- var rs = this.regions;
- var north = rs["north"];
- var south = rs["south"];
- var west = rs["west"];
- var east = rs["east"];
- var center = rs["center"];
- //if(this.hideOnLayout){ // not supported anymore
- //c.el.setStyle("display", "none");
- //}
- if(north && north.isVisible()){
- var b = north.getBox();
- var m = north.getMargins();
- b.width = w - (m.left+m.right);
- b.x = m.left;
- b.y = m.top;
- centerY = b.height + b.y + m.bottom;
- centerH -= centerY;
- north.updateBox(this.safeBox(b));
+ // private
+ onRender : function(ct, position){
+
+ Roo.form.Signature.superclass.onRender.call(this, ct, position);
+
+ this.wrap = this.el.wrap({
+ cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
+ });
+
+ this.createToolbar(this);
+ this.signPanel = this.wrap.createChild({
+ tag: 'div',
+ style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
+ }, this.el
+ );
+
+ this.svgID = Roo.id();
+ this.svgEl = this.signPanel.createChild({
+ xmlns : 'http://www.w3.org/2000/svg',
+ tag : 'svg',
+ id : this.svgID + "-svg",
+ width: this.width,
+ height: this.height,
+ viewBox: '0 0 '+this.width+' '+this.height,
+ cn : [
+ {
+ tag: "rect",
+ id: this.svgID + "-svg-r",
+ width: this.width,
+ height: this.height,
+ fill: "#ffa"
+ },
+ {
+ tag: "line",
+ id: this.svgID + "-svg-l",
+ x1: "0", // start
+ y1: (this.height*0.8), // start set the line in 80% of height
+ x2: this.width, // end
+ y2: (this.height*0.8), // end set the line in 80% of height
+ 'stroke': "#666",
+ 'stroke-width': "1",
+ 'stroke-dasharray': "3",
+ 'shape-rendering': "crispEdges",
+ 'pointer-events': "none"
+ },
+ {
+ tag: "path",
+ id: this.svgID + "-svg-p",
+ 'stroke': "navy",
+ 'stroke-width': "3",
+ 'fill': "none",
+ 'pointer-events': 'none'
+ }
+ ]
+ });
+ this.createSVG();
+ this.svgBox = this.svgEl.dom.getScreenCTM();
+ },
+ createSVG : function(){
+ var svg = this.signPanel;
+ var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
+ var t = this;
+
+ r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
+ r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
+ r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
+ r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
+ r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
+ r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
+ r.addEventListener('touchend', function(e) { return t.up(e); }, false);
+
+ },
+ isTouchEvent : function(e){
+ return e.type.match(/^touch/);
+ },
+ getCoords : function (e) {
+ var pt = this.svgEl.dom.createSVGPoint();
+ pt.x = e.clientX;
+ pt.y = e.clientY;
+ if (this.isTouchEvent(e)) {
+ pt.x = e.targetTouches[0].clientX;
+ pt.y = e.targetTouches[0].clientY;
}
- if(south && south.isVisible()){
- var b = south.getBox();
- var m = south.getMargins();
- b.width = w - (m.left+m.right);
- b.x = m.left;
- var totalHeight = (b.height + m.top + m.bottom);
- b.y = h - totalHeight + m.top;
- centerH -= totalHeight;
- south.updateBox(this.safeBox(b));
+ var a = this.svgEl.dom.getScreenCTM();
+ var b = a.inverse();
+ var mx = pt.matrixTransform(b);
+ return mx.x + ',' + mx.y;
+ },
+ //mouse event headler
+ down : function (e) {
+ this.signatureTmp += 'M' + this.getCoords(e) + ' ';
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
+
+ this.isMouseDown = true;
+
+ e.preventDefault();
+ },
+ move : function (e) {
+ if (this.isMouseDown) {
+ this.signatureTmp += 'L' + this.getCoords(e) + ' ';
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
}
- if(west && west.isVisible()){
- var b = west.getBox();
- var m = west.getMargins();
- b.height = centerH - (m.top+m.bottom);
- b.x = m.left;
- b.y = centerY + m.top;
- var totalWidth = (b.width + m.left + m.right);
- centerX += totalWidth;
- centerW -= totalWidth;
- west.updateBox(this.safeBox(b));
+
+ e.preventDefault();
+ },
+ up : function (e) {
+ this.isMouseDown = false;
+ var sp = this.signatureTmp.split(' ');
+
+ if(sp.length > 1){
+ if(!sp[sp.length-2].match(/^L/)){
+ sp.pop();
+ sp.pop();
+ sp.push("");
+ this.signatureTmp = sp.join(" ");
+ }
}
- if(east && east.isVisible()){
- var b = east.getBox();
- var m = east.getMargins();
- b.height = centerH - (m.top+m.bottom);
- var totalWidth = (b.width + m.left + m.right);
- b.x = w - totalWidth + m.left;
- b.y = centerY + m.top;
- centerW -= totalWidth;
- east.updateBox(this.safeBox(b));
+ if(this.getValue() != this.signatureTmp){
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+ this.isConfirmed = false;
}
- if(center){
- var m = center.getMargins();
- var centerBox = {
- x: centerX + m.left,
- y: centerY + m.top,
- width: centerW - (m.left+m.right),
- height: centerH - (m.top+m.bottom)
+ e.preventDefault();
+ },
+
+ /**
+ * Protected method that will not generally be called directly. It
+ * is called when the editor creates its toolbar. Override this method if you need to
+ * add custom toolbar buttons.
+ * @param {HtmlEditor} editor
+ */
+ createToolbar : function(editor){
+ function btn(id, toggle, handler){
+ var xid = fid + '-'+ id ;
+ return {
+ id : xid,
+ cmd : id,
+ cls : 'x-btn-icon x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: editor, // was editor...
+ handler:handler||editor.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: etb.buttonTips[id] || undefined, ///tips ???
+ tabIndex:-1
};
- //if(this.hideOnLayout){
- //center.el.setStyle("display", "block");
- //}
- center.updateBox(this.safeBox(centerBox));
}
- this.el.repaint();
- this.fireEvent("layout", this);
- },
-
- // private
- safeBox : function(box){
- box.width = Math.max(0, box.width);
- box.height = Math.max(0, box.height);
- return box;
+
+
+ var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+ this.tb = tb;
+ this.tb.add(
+ {
+ cls : ' x-signature-btn x-signature-'+id,
+ scope: editor, // was editor...
+ handler: this.reset,
+ clickEvent:'mousedown',
+ text: this.labels.clear
+ },
+ {
+ xtype : 'Fill',
+ xns: Roo.Toolbar
+ },
+ {
+ cls : ' x-signature-btn x-signature-'+id,
+ scope: editor, // was editor...
+ handler: this.confirmHandler,
+ clickEvent:'mousedown',
+ text: this.labels.confirm
+ }
+ );
+
},
-
+ //public
/**
- * Adds a ContentPanel (or subclass) to this layout.
- * @param {String} target The target region key (north, south, east, west or center).
- * @param {Roo.ContentPanel} panel The panel to add
- * @return {Roo.ContentPanel} The added panel
+ * when user is clicked confirm then show this image.....
+ *
+ * @return {String} Image Data URI
*/
- add : function(target, panel){
-
- target = target.toLowerCase();
- return this.regions[target].add(panel);
+ getImageDataURI : function(){
+ var svg = this.svgEl.dom.parentNode.innerHTML;
+ var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
+ return src;
},
-
/**
- * Remove a ContentPanel (or subclass) to this layout.
- * @param {String} target The target region key (north, south, east, west or center).
- * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
- * @return {Roo.ContentPanel} The removed panel
+ *
+ * @return {Boolean} this.isConfirmed
*/
- remove : function(target, panel){
- target = target.toLowerCase();
- return this.regions[target].remove(panel);
+ getConfirmed : function(){
+ return this.isConfirmed;
},
-
/**
- * Searches all regions for a panel with the specified id
- * @param {String} panelId
- * @return {Roo.ContentPanel} The panel or null if it wasn't found
+ *
+ * @return {Number} this.width
*/
- findPanel : function(panelId){
- var rs = this.regions;
- for(var target in rs){
- if(typeof rs[target] != "function"){
- var p = rs[target].getPanel(panelId);
- if(p){
- return p;
- }
- }
- }
- return null;
+ getWidth : function(){
+ return this.width;
},
-
/**
- * Searches all regions for a panel with the specified id and activates (shows) it.
- * @param {String/ContentPanel} panelId The panels id or the panel itself
- * @return {Roo.ContentPanel} The shown panel or null
- */
- showPanel : function(panelId) {
- var rs = this.regions;
- for(var target in rs){
- var r = rs[target];
- if(typeof r != "function"){
- if(r.hasPanel(panelId)){
- return r.showPanel(panelId);
- }
- }
- }
- return null;
- },
-
- /**
- * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
- * @param {Roo.state.Provider} provider (optional) An alternate state provider
+ *
+ * @return {Number} this.height
*/
- restoreState : function(provider){
- if(!provider){
- provider = Roo.state.Manager;
- }
- var sm = new Roo.LayoutStateManager();
- sm.init(this, provider);
- },
-
- /**
- * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
- * object should contain properties for each region to add ContentPanels to, and each property's value should be
- * a valid ContentPanel config object. Example:
- * <pre><code>
-// Create the main layout
-var layout = new Roo.BorderLayout('main-ct', {
- west: {
- split:true,
- minSize: 175,
- titlebar: true
+ getHeight : function(){
+ return this.height;
},
- center: {
- title:'Components'
- }
-}, 'main-ct');
-
-// Create and add multiple ContentPanels at once via configs
-layout.batchAdd({
- west: {
- id: 'source-files',
- autoCreate:true,
- title:'Ext Source Files',
- autoScroll:true,
- fitToFrame:true
- },
- center : {
- el: cview,
- autoScroll:true,
- fitToFrame:true,
- toolbar: tb,
- resizeEl:'cbody'
- }
-});
-</code></pre>
- * @param {Object} regions An object containing ContentPanel configs by region name
- */
- batchAdd : function(regions){
- this.beginUpdate();
- for(var rname in regions){
- var lr = this.regions[rname];
- if(lr){
- this.addTypedPanels(lr, regions[rname]);
- }
- }
- this.endUpdate();
+ // private
+ getSignature : function(){
+ return this.signatureTmp;
},
-
// private
- addTypedPanels : function(lr, ps){
- if(typeof ps == 'string'){
- lr.add(new Roo.ContentPanel(ps));
- }
- else if(ps instanceof Array){
- for(var i =0, len = ps.length; i < len; i++){
- this.addTypedPanels(lr, ps[i]);
- }
- }
- else if(!ps.events){ // raw config?
- var el = ps.el;
- delete ps.el; // prevent conflict
- lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
- }
- else { // panel object assumed!
- lr.add(ps);
- }
+ reset : function(){
+ this.signatureTmp = '';
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
+ this.isConfirmed = false;
+ Roo.form.Signature.superclass.reset.call(this);
},
- /**
- * Adds a xtype elements to the layout.
- * <pre><code>
-
-layout.addxtype({
- xtype : 'ContentPanel',
- region: 'west',
- items: [ .... ]
- }
-);
-
-layout.addxtype({
- xtype : 'NestedLayoutPanel',
- region: 'west',
- layout: {
- center: { },
- west: { }
- },
- items : [ ... list of content panels or nested layout panels.. ]
- }
-);
-</code></pre>
- * @param {Object} cfg Xtype definition of item to add.
- */
- addxtype : function(cfg)
- {
- // basically accepts a pannel...
- // can accept a layout region..!?!?
- //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+ setSignature : function(s){
+ this.signatureTmp = s;
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
+ this.setValue(s);
+ this.isConfirmed = false;
+ Roo.form.Signature.superclass.reset.call(this);
+ },
+ test : function(){
+// Roo.log(this.signPanel.dom.contentWindow.up())
+ },
+ //private
+ setConfirmed : function(){
- if (!cfg.xtype.match(/Panel$/)) {
- return false;
- }
- var ret = false;
- if (typeof(cfg.region) == 'undefined') {
- Roo.log("Failed to add Panel, region was not set");
- Roo.log(cfg);
- return false;
+
+// Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+ },
+ // private
+ confirmHandler : function(){
+ if(!this.getSignature()){
+ return;
}
- var region = cfg.region;
- delete cfg.region;
-
- var xitems = [];
- if (cfg.items) {
- xitems = cfg.items;
- delete cfg.items;
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
+ this.setValue(this.getSignature());
+ this.isConfirmed = true;
+
+ this.fireEvent('confirm', this);
+ },
+ // private
+ // Subclasses should provide the validation implementation by overriding this
+ validateValue : function(value){
+ if(this.allowBlank){
+ return true;
}
- var nb = false;
- switch(cfg.xtype)
- {
- case 'ContentPanel': // ContentPanel (el, cfg)
- case 'ScrollPanel': // ContentPanel (el, cfg)
- case 'ViewPanel':
- if(cfg.autoCreate) {
- ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
- } else {
- var el = this.el.createChild();
- ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
- }
-
- this.add(region, ret);
- break;
-
-
- case 'TreePanel': // our new panel!
- cfg.el = this.el.createChild();
- ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
- this.add(region, ret);
- break;
-
- case 'NestedLayoutPanel':
- // create a new Layout (which is a Border Layout...
- var el = this.el.createChild();
- var clayout = cfg.layout;
- delete cfg.layout;
- clayout.items = clayout.items || [];
- // replace this exitems with the clayout ones..
- xitems = clayout.items;
-
-
- if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
- cfg.background = false;
- }
- var layout = new Roo.BorderLayout(el, clayout);
-
- ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
- //console.log('adding nested layout panel ' + cfg.toSource());
- this.add(region, ret);
- nb = {}; /// find first...
- break;
-
- case 'GridPanel':
-
- // needs grid and region
-
- //var el = this.getRegion(region).el.createChild();
- var el = this.el.createChild();
- // create the grid first...
-
- var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
- delete cfg.grid;
- if (region == 'center' && this.active ) {
- cfg.background = false;
- }
- ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
-
- this.add(region, ret);
- if (cfg.background) {
- ret.on('activate', function(gp) {
- if (!gp.grid.rendered) {
- gp.grid.render();
- }
- });
- } else {
- grid.render();
- }
- break;
-
-
-
-
-
-
- default:
- if (typeof(Roo[cfg.xtype]) != 'undefined') {
-
- ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
- this.add(region, ret);
- } else {
-
- alert("Can not add '" + cfg.xtype + "' to BorderLayout");
- return null;
- }
-
- // GridPanel (grid, cfg)
-
+ if(this.isConfirmed){
+ return true;
}
- this.beginUpdate();
- // add children..
- var region = '';
- var abn = {};
- Roo.each(xitems, function(i) {
- region = nb && i.region ? i.region : false;
-
- var add = ret.addxtype(i);
-
- if (region) {
- nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
- if (!i.background) {
- abn[region] = nb[region] ;
- }
- }
-
- });
- this.endUpdate();
+ return false;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
- // make the last non-background panel active..
- //if (nb) { Roo.log(abn); }
- if (nb) {
-
- for(var r in abn) {
- region = this.getRegion(r);
- if (region) {
- // tried using nb[r], but it does not work..
-
- region.showPanel(abn[r]);
-
- }
- }
+/**
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @constructor
+ * Create a new ComboBox.
+ * @param {Object} config Configuration options
+ */
+Roo.form.Select = function(config){
+ Roo.form.Select.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
+ /**
+ * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+ */
+ /**
+ * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
+ * rendering into an Roo.Editor, defaults to false)
+ */
+ /**
+ * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
+ * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+ */
+ /**
+ * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+ */
+ /**
+ * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
+ * the dropdown list (defaults to undefined, with no header element)
+ */
+
+ /**
+ * @cfg {String/Roo.Template} tpl The template to use to render the output
+ */
+
+ // private
+ defaultAutoCreate : {tag: "select" },
+ /**
+ * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+ */
+ listWidth: undefined,
+ /**
+ * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'text' if mode = 'local')
+ */
+ displayField: undefined,
+ /**
+ * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
+ * mode = 'remote' or 'value' if mode = 'local').
+ * Note: use of a valueField requires the user make a selection
+ * in order for a value to be mapped.
+ */
+ valueField: undefined,
+
+
+ /**
+ * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
+ * field's data value (defaults to the underlying DOM element's name)
+ */
+ hiddenName: undefined,
+ /**
+ * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
+ */
+ listClass: '',
+ /**
+ * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
+ */
+ selectedClass: 'x-combo-selected',
+ /**
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
+ * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
+ * which displays a downward arrow icon).
+ */
+ triggerClass : 'x-form-arrow-trigger',
+ /**
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+ */
+ shadow:'sides',
+ /**
+ * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+ * anchor positions (defaults to 'tl-bl')
+ */
+ listAlign: 'tl-bl?',
+ /**
+ * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
+ */
+ maxHeight: 300,
+ /**
+ * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
+ * query specified by the allQuery config option (defaults to 'query')
+ */
+ triggerAction: 'query',
+ /**
+ * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
+ * (defaults to 4, does not apply if editable = false)
+ */
+ minChars : 4,
+ /**
+ * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
+ * delay (typeAheadDelay) if it matches a known value (defaults to false)
+ */
+ typeAhead: false,
+ /**
+ * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
+ * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+ */
+ queryDelay: 500,
+ /**
+ * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
+ * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
+ */
+ pageSize: 0,
+ /**
+ * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
+ * when editable = true (defaults to false)
+ */
+ selectOnFocus:false,
+ /**
+ * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+ */
+ queryParam: 'query',
+ /**
+ * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
+ * when mode = 'remote' (defaults to 'Loading...')
+ */
+ loadingText: 'Loading...',
+ /**
+ * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+ */
+ resizable: false,
+ /**
+ * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+ */
+ handleHeight : 8,
+ /**
+ * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+ * traditional select (defaults to true)
+ */
+ editable: true,
+ /**
+ * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+ */
+ allQuery: '',
+ /**
+ * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+ */
+ mode: 'remote',
+ /**
+ * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+ * listWidth has a higher value)
+ */
+ minListWidth : 70,
+ /**
+ * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
+ * allow the user to set arbitrary text into the field (defaults to false)
+ */
+ forceSelection:false,
+ /**
+ * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+ * if typeAhead = true (defaults to 250)
+ */
+ typeAheadDelay : 250,
+ /**
+ * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
+ * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+ */
+ valueNotFoundText : undefined,
+
+ /**
+ * @cfg {String} defaultValue The value displayed after loading the store.
+ */
+ defaultValue: '',
+
+ /**
+ * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+ */
+ blockFocus : false,
+
+ /**
+ * @cfg {Boolean} disableClear Disable showing of clear button.
+ */
+ disableClear : false,
+ /**
+ * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ */
+ alwaysQuery : false,
+
+ //private
+ addicon : false,
+ editicon: false,
+
+ // element that contains real text value.. (when hidden is used..)
+
+ // private
+ onRender : function(ct, position){
+ Roo.form.Field.prototype.onRender.call(this, ct, position);
+
+ if(this.store){
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
+ this.store.load({});
}
- return ret;
- }
-});
-
-/**
- * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
- * the beginUpdate and endUpdate calls internally. The key to this method is the <b>panels</b> property that can be
- * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
- * during creation. The following code is equivalent to the constructor-based example at the beginning of this class:
- * <pre><code>
-// shorthand
-var CP = Roo.ContentPanel;
-
-var layout = Roo.BorderLayout.create({
- north: {
- initialSize: 25,
- titlebar: false,
- panels: [new CP("north", "North")]
- },
- west: {
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- panels: [new CP("west", {title: "West"})]
- },
- east: {
- split:true,
- initialSize: 202,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
+
+
},
- south: {
- split:true,
- initialSize: 100,
- minSize: 100,
- maxSize: 200,
- titlebar: true,
- collapsible: true,
- panels: [new CP("south", {title: "South", closable: true})]
+
+ // private
+ initEvents : function(){
+ //Roo.form.ComboBox.superclass.initEvents.call(this);
+
},
- center: {
- titlebar: true,
- autoScroll:true,
- resizeTabs: true,
- minTabWidth: 50,
- preferredTabWidth: 150,
- panels: [
- new CP("center1", {title: "Close Me", closable: true}),
- new CP("center2", {title: "Center Panel", closable: false})
- ]
- }
-}, document.body);
-layout.getRegion("center").showPanel("center1");
-</code></pre>
- * @param config
- * @param targetEl
- */
-Roo.BorderLayout.create = function(config, targetEl){
- var layout = new Roo.BorderLayout(targetEl || document.body, config);
- layout.beginUpdate();
- var regions = Roo.BorderLayout.RegionFactory.validRegions;
- for(var j = 0, jlen = regions.length; j < jlen; j++){
- var lr = regions[j];
- if(layout.regions[lr] && config[lr].panels){
- var r = layout.regions[lr];
- var ps = config[lr].panels;
- layout.addTypedPanels(r, ps);
+ onDestroy : function(){
+
+ if(this.store){
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('loadexception', this.onLoadException, this);
}
- }
- layout.endUpdate();
- return layout;
-};
+ //Roo.form.ComboBox.superclass.onDestroy.call(this);
+ },
-// private
-Roo.BorderLayout.RegionFactory = {
// private
- validRegions : ["north","south","east","west","center"],
+ fireKey : function(e){
+ if(e.isNavKeyPress() && !this.list.isVisible()){
+ this.fireEvent("specialkey", this, e);
+ }
+ },
// private
- create : function(target, mgr, config){
- target = target.toLowerCase();
- if(config.lightweight || config.basic){
- return new Roo.BasicLayoutRegion(mgr, config, target);
- }
- switch(target){
- case "north":
- return new Roo.NorthLayoutRegion(mgr, config);
- case "south":
- return new Roo.SouthLayoutRegion(mgr, config);
- case "east":
- return new Roo.EastLayoutRegion(mgr, config);
- case "west":
- return new Roo.WestLayoutRegion(mgr, config);
- case "center":
- return new Roo.CenterLayoutRegion(mgr, config);
- }
- throw 'Layout region "'+target+'" not supported.';
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.BasicLayoutRegion
- * @extends Roo.util.Observable
- * This class represents a lightweight region in a layout manager. This region does not move dom nodes
- * and does not have a titlebar, tabs or any other features. All it does is size and position
- * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
- */
-Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
- this.mgr = mgr;
- this.position = pos;
- this.events = {
- /**
- * @scope Roo.BasicLayoutRegion
- */
+ onResize: function(w, h){
- /**
- * @event beforeremove
- * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
- * @param {Object} e The cancel event object
- */
- "beforeremove" : true,
- /**
- * @event invalidated
- * Fires when the layout for this region is changed.
- * @param {Roo.LayoutRegion} this
- */
- "invalidated" : true,
- /**
- * @event visibilitychange
- * Fires when this region is shown or hidden
- * @param {Roo.LayoutRegion} this
- * @param {Boolean} visibility true or false
- */
- "visibilitychange" : true,
- /**
- * @event paneladded
- * Fires when a panel is added.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
- */
- "paneladded" : true,
- /**
- * @event panelremoved
- * Fires when a panel is removed.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The panel
- */
- "panelremoved" : true,
- /**
- * @event beforecollapse
- * Fires when this region before collapse.
- * @param {Roo.LayoutRegion} this
- */
- "beforecollapse" : true,
- /**
- * @event collapsed
- * Fires when this region is collapsed.
- * @param {Roo.LayoutRegion} this
- */
- "collapsed" : true,
- /**
- * @event expanded
- * Fires when this region is expanded.
- * @param {Roo.LayoutRegion} this
- */
- "expanded" : true,
- /**
- * @event slideshow
- * Fires when this region is slid into view.
- * @param {Roo.LayoutRegion} this
- */
- "slideshow" : true,
- /**
- * @event slidehide
- * Fires when this region slides out of view.
- * @param {Roo.LayoutRegion} this
- */
- "slidehide" : true,
- /**
- * @event panelactivated
- * Fires when a panel is activated.
- * @param {Roo.LayoutRegion} this
- * @param {Roo.ContentPanel} panel The activated panel
- */
- "panelactivated" : true,
- /**
- * @event resized
- * Fires when the user resizes this region.
- * @param {Roo.LayoutRegion} this
- * @param {Number} newSize The new size (width for east/west, height for north/south)
- */
- "resized" : true
- };
- /** A collection of panels in this region. @type Roo.util.MixedCollection */
- this.panels = new Roo.util.MixedCollection();
- this.panels.getKey = this.getPanelId.createDelegate(this);
- this.box = null;
- this.activePanel = null;
- // ensure listeners are added...
-
- if (config.listeners || config.events) {
- Roo.BasicLayoutRegion.superclass.constructor.call(this, {
- listeners : config.listeners || {},
- events : config.events || {}
- });
- }
+ return;
- if(skipConfig !== true){
- this.applyConfig(config);
- }
-};
+
+ },
-Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
- getPanelId : function(p){
- return p.getId();
+ /**
+ * Allow or prevent the user from directly editing the field text. If false is passed,
+ * the user will only be able to select from the items defined in the dropdown list. This method
+ * is the runtime equivalent of setting the 'editable' config option at config time.
+ * @param {Boolean} value True to allow the user to directly edit the field text
+ */
+ setEditable : function(value){
+
},
-
- applyConfig : function(config){
- this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
- this.config = config;
+
+ // private
+ onBeforeLoad : function(){
+ Roo.log("Select before load");
+ return;
+
+ this.innerList.update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ //this.restrictHeight();
+ this.selectedIndex = -1;
},
+
+ // private
+ onLoad : function(){
+
- /**
- * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
- * the width, for horizontal (north, south) the height.
- * @param {Number} newSize The new width or height
- */
- resizeTo : function(newSize){
- var el = this.el ? this.el :
- (this.activePanel ? this.activePanel.getEl() : null);
- if(el){
- switch(this.position){
- case "east":
- case "west":
- el.setWidth(newSize);
- this.fireEvent("resized", this, newSize);
- break;
- case "north":
- case "south":
- el.setHeight(newSize);
- this.fireEvent("resized", this, newSize);
- break;
+ var dom = this.el.dom;
+ dom.innerHTML = '';
+ var od = dom.ownerDocument;
+
+ if (this.emptyText) {
+ var op = od.createElement('option');
+ op.setAttribute('value', '');
+ op.innerHTML = String.format('{0}', this.emptyText);
+ dom.appendChild(op);
+ }
+ if(this.store.getCount() > 0){
+
+ var vf = this.valueField;
+ var df = this.displayField;
+ this.store.data.each(function(r) {
+ // which colmsn to use... testing - cdoe / title..
+ var op = od.createElement('option');
+ op.setAttribute('value', r.data[vf]);
+ op.innerHTML = String.format('{0}', r.data[df]);
+ dom.appendChild(op);
+ });
+ if (typeof(this.defaultValue != 'undefined')) {
+ this.setValue(this.defaultValue);
}
+
+
+ }else{
+ //this.onEmptyResults();
}
+ //this.el.focus();
},
+ // private
+ onLoadException : function()
+ {
+ dom.innerHTML = '';
+
+ Roo.log("Select on load exception");
+ return;
- getBox : function(){
- return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+
+
},
-
- getMargins : function(){
- return this.margins;
+ // private
+ onTypeAhead : function(){
+
},
-
- updateBox : function(box){
- this.box = box;
- var el = this.activePanel.getEl();
- el.dom.style.left = box.x + "px";
- el.dom.style.top = box.y + "px";
- this.activePanel.setSize(box.width, box.height);
+
+ // private
+ onSelect : function(record, index){
+ Roo.log('on select?');
+ return;
+ if(this.fireEvent('beforeselect', this, record, index) !== false){
+ this.setFromData(index > -1 ? record.data : false);
+ this.collapse();
+ this.fireEvent('select', this, record, index);
+ }
},
-
+
/**
- * Returns the container element for this region.
- * @return {Roo.Element}
+ * Returns the currently selected field value or empty string if no value is set.
+ * @return {String} value The selected value
*/
- getEl : function(){
- return this.activePanel;
+ getValue : function(){
+ var dom = this.el.dom;
+ this.value = dom.options[dom.selectedIndex].value;
+ return this.value;
+
+ },
+
+ /**
+ * Clears any text/value currently set in the field
+ */
+ clearValue : function(){
+ this.value = '';
+ this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
+
+ },
+
+ /**
+ * Sets the specified value into the field. If the value finds a match, the corresponding record text
+ * will be displayed in the field. If the value does not match the data value of an existing item,
+ * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+ * Otherwise the field will be blank (although the value will still be set).
+ * @param {String} value The value to match
+ */
+ setValue : function(v){
+ var d = this.el.dom;
+ for (var i =0; i < d.options.length;i++) {
+ if (v == d.options[i].value) {
+ d.selectedIndex = i;
+ this.value = v;
+ return;
+ }
+ }
+ this.clearValue();
},
+ /**
+ * @property {Object} the last set data for the element
+ */
+ lastData : false,
/**
- * Returns true if this region is currently visible.
- * @return {Boolean}
+ * Sets the value of the field based on a object which is related to the record format for the store.
+ * @param {Object} value the value to set as. or false on reset?
*/
- isVisible : function(){
- return this.activePanel ? true : false;
+ setFromData : function(o){
+ Roo.log('setfrom data?');
+
+
+
+ },
+ // private
+ reset : function(){
+ this.clearValue();
},
+ // private
+ findRecord : function(prop, value){
+
+ return false;
- setActivePanel : function(panel){
- panel = this.getPanel(panel);
- if(this.activePanel && this.activePanel != panel){
- this.activePanel.setActiveState(false);
- this.activePanel.getEl().setLeftTop(-10000,-10000);
- }
- this.activePanel = panel;
- panel.setActiveState(true);
- if(this.box){
- panel.setSize(this.box.width, this.box.height);
+ var record;
+ if(this.store.getCount() > 0){
+ this.store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ return false;
+ }
+ return true;
+ });
}
- this.fireEvent("panelactivated", this, panel);
- this.fireEvent("invalidated");
+ return record;
+ },
+
+ getName: function()
+ {
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+
+ },
+
+
+
+
+ // private
+ onEmptyResults : function(){
+ Roo.log('empty results');
+ //this.collapse();
},
-
+
/**
- * Show the specified panel.
- * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
- * @return {Roo.ContentPanel} The shown panel or null
+ * Returns true if the dropdown list is expanded, else false.
*/
- showPanel : function(panel){
- if(panel = this.getPanel(panel)){
- this.setActivePanel(panel);
- }
- return panel;
+ isExpanded : function(){
+ return false;
},
-
+
/**
- * Get the active panel for this region.
- * @return {Roo.ContentPanel} The active panel or null
+ * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {String} value The data value of the item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
+ * @return {Boolean} True if the value matched an item in the list, else false
*/
- getActivePanel : function(){
- return this.activePanel;
- },
+ selectByValue : function(v, scrollIntoView){
+ Roo.log('select By Value');
+ return false;
+ if(v !== undefined && v !== null){
+ var r = this.findRecord(this.valueField || this.displayField, v);
+ if(r){
+ this.select(this.store.indexOf(r), scrollIntoView);
+ return true;
+ }
+ }
+ return false;
+ },
+
/**
- * Add the passed ContentPanel(s)
- * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
- * @return {Roo.ContentPanel} The panel added (if only one was added)
+ * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+ * @param {Number} index The zero-based index of the list item to select
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+ * selected item if it is not currently in view (defaults to true)
*/
- add : function(panel){
- if(arguments.length > 1){
- for(var i = 0, len = arguments.length; i < len; i++) {
- this.add(arguments[i]);
+ select : function(index, scrollIntoView){
+ Roo.log('select ');
+ return ;
+
+ this.selectedIndex = index;
+ this.view.select(index);
+ if(scrollIntoView !== false){
+ var el = this.view.getNode(index);
+ if(el){
+ this.innerList.scrollChildIntoView(el, false);
}
- return null;
}
- if(this.hasPanel(panel)){
- this.showPanel(panel);
- return panel;
+ },
+
+
+
+ // private
+ validateBlur : function(){
+
+ return;
+
+ },
+
+ // private
+ initQuery : function(){
+ this.doQuery(this.getRawValue());
+ },
+
+ // private
+ doForce : function(){
+ if(this.el.dom.value.length > 0){
+ this.el.dom.value =
+ this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+
}
- var el = panel.getEl();
- if(el.dom.parentNode != this.mgr.el.dom){
- this.mgr.el.dom.appendChild(el.dom);
+ },
+
+ /**
+ * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
+ * query allowing the query action to be canceled if needed.
+ * @param {String} query The SQL query to execute
+ * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+ * in the field than the minimum specified by the minChars config option. It also clears any filter previously
+ * saved in the current store (defaults to false)
+ */
+ doQuery : function(q, forceAll){
+
+ Roo.log('doQuery?');
+ if(q === undefined || q === null){
+ q = '';
}
- if(panel.setRegion){
- panel.setRegion(this);
+ var qe = {
+ query: q,
+ forceAll: forceAll,
+ combo: this,
+ cancel:false
+ };
+ if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+ return false;
}
- this.panels.add(panel);
- el.setStyle("position", "absolute");
- if(!panel.background){
- this.setActivePanel(panel);
- if(this.config.initialSize && this.panels.getCount()==1){
- this.resizeTo(this.config.initialSize);
+ q = qe.query;
+ forceAll = qe.forceAll;
+ if(forceAll === true || (q.length >= this.minChars)){
+ if(this.lastQuery != q || this.alwaysQuery){
+ this.lastQuery = q;
+ if(this.mode == 'local'){
+ this.selectedIndex = -1;
+ if(forceAll){
+ this.store.clearFilter();
+ }else{
+ this.store.filter(this.displayField, q);
+ }
+ this.onLoad();
+ }else{
+ this.store.baseParams[this.queryParam] = q;
+ this.store.load({
+ params: this.getParams(q)
+ });
+ this.expand();
+ }
+ }else{
+ this.selectedIndex = -1;
+ this.onLoad();
}
}
- this.fireEvent("paneladded", this, panel);
- return panel;
},
-
- /**
- * Returns true if the panel is in this region.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
- * @return {Boolean}
- */
- hasPanel : function(panel){
- if(typeof panel == "object"){ // must be panel obj
- panel = panel.getId();
+
+ // private
+ getParams : function(q){
+ var p = {};
+ //p[this.queryParam] = q;
+ if(this.pageSize){
+ p.start = 0;
+ p.limit = this.pageSize;
}
- return this.getPanel(panel) ? true : false;
+ return p;
},
-
+
/**
- * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
- * @param {Boolean} preservePanel Overrides the config preservePanel option
- * @return {Roo.ContentPanel} The panel that was removed
+ * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
*/
- remove : function(panel, preservePanel){
- panel = this.getPanel(panel);
- if(!panel){
- return null;
- }
- var e = {};
- this.fireEvent("beforeremove", this, panel, e);
- if(e.cancel === true){
- return null;
- }
- var panelId = panel.getId();
- this.panels.removeKey(panelId);
- return panel;
+ collapse : function(){
+
},
-
+
+ // private
+ collapseIf : function(e){
+
+ },
+
/**
- * Returns the panel specified or null if it's not in this region.
- * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
- * @return {Roo.ContentPanel}
+ * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
*/
- getPanel : function(id){
- if(typeof id == "object"){ // must be panel obj
- return id;
- }
- return this.panels.get(id);
- },
-
+ expand : function(){
+
+ } ,
+
+ // private
+
+
+ /**
+ * @cfg {Boolean} grow
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMin
+ * @hide
+ */
+ /**
+ * @cfg {Number} growMax
+ * @hide
+ */
/**
- * Returns this regions position (north/south/east/west/center).
- * @return {String}
+ * @hide
+ * @method autoSize
*/
- getPosition: function(){
- return this.position;
+
+ setWidth : function()
+ {
+
+ },
+ getResizeEl : function(){
+ return this.el;
}
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+});//<script type="text/javasscript">
+
/**
- * @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|bottom) "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
+ * @class Roo.DDView
+ * A DnD enabled version of Roo.View.
+ * @param {Element/String} container The Element in which to create the View.
+ * @param {String} tpl The template string used to create the markup for each element of the View
+ * @param {Object} config The configuration properties. These include all the config options of
+ * {@link Roo.View} plus some specific to this class.<br>
+ * <p>
+ * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
+ * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
+ * <p>
+ * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
+.x-view-drag-insert-above {
+ border-top:1px dotted #3366cc;
+}
+.x-view-drag-insert-below {
+ border-bottom:1px dotted #3366cc;
+}
+</code></pre>
+ *
*/
-Roo.LayoutRegion = function(mgr, config, pos){
- Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
- var dh = Roo.DomHelper;
- /** This region's container element
- * @type Roo.Element */
- this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
- /** This region's title element
- * @type Roo.Element */
-
- this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
- {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: " "},
- {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
- ]}, true);
- this.titleEl.enableDisplayMode();
- /** This region's title text element
- * @type HTMLElement */
- this.titleTextEl = this.titleEl.dom.firstChild;
- this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
- this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
- this.closeBtn.enableDisplayMode();
- this.closeBtn.on("click", this.closeClicked, this);
- this.closeBtn.hide();
-
- this.createBody(config);
- this.visible = true;
- this.collapsed = false;
-
- if(config.hideWhenEmpty){
- this.hide();
- this.on("paneladded", this.validateVisibility, this);
- this.on("panelremoved", this.validateVisibility, this);
+
+Roo.DDView = function(container, tpl, config) {
+ Roo.DDView.superclass.constructor.apply(this, arguments);
+ this.getEl().setStyle("outline", "0px none");
+ this.getEl().unselectable();
+ if (this.dragGroup) {
+ this.setDraggable(this.dragGroup.split(","));
}
- this.applyConfig(config);
+ if (this.dropGroup) {
+ this.setDroppable(this.dropGroup.split(","));
+ }
+ if (this.deletable) {
+ this.setDeletable();
+ }
+ this.isDirtyFlag = false;
+ this.addEvents({
+ "drop" : true
+ });
};
-Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
-
- createBody : function(){
- /** This region's body element
- * @type Roo.Element */
- this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
- },
-
- applyConfig : function(c){
- if(c.collapsible && this.position != "center" && !this.collapsedEl){
- var dh = Roo.DomHelper;
- if(c.titlebar !== false){
- this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
- this.collapseBtn.on("click", this.collapse, this);
- this.collapseBtn.enableDisplayMode();
+Roo.extend(Roo.DDView, Roo.View, {
+/** @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
+/** @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
+/** @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
+/** @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
- if(c.showPin === true || this.showPin){
- this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
- this.stickBtn.enableDisplayMode();
- this.stickBtn.on("click", this.expand, this);
- this.stickBtn.hide();
- }
- }
- /** This region's collapsed element
- * @type Roo.Element */
- this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
- {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
- ]}, true);
- if(c.floatable !== false){
- this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
- this.collapsedEl.on("click", this.collapseClick, this);
- }
+ isFormField: true,
- if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
- this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
- id: "message", unselectable: "on", style:{"float":"left"}});
- this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
- }
- this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
- this.expandBtn.on("click", this.expand, this);
- }
- if(this.collapseBtn){
- this.collapseBtn.setVisible(c.collapsible == true);
- }
- this.cmargins = c.cmargins || this.cmargins ||
- (this.position == "west" || this.position == "east" ?
- {top: 0, left: 2, right:2, bottom: 0} :
- {top: 2, left: 0, right:0, bottom: 2});
- this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
- this.bottomTabs = c.tabPosition != "top";
- this.autoScroll = c.autoScroll || false;
- if(this.autoScroll){
- this.bodyEl.setStyle("overflow", "auto");
- }else{
- this.bodyEl.setStyle("overflow", "hidden");
- }
- //if(c.titlebar !== false){
- if((!c.titlebar && !c.title) || c.titlebar === false){
- this.titleEl.hide();
- }else{
- this.titleEl.show();
- if(c.title){
- this.titleTextEl.innerHTML = c.title;
- }
- }
- //}
- this.duration = c.duration || .30;
- this.slideDuration = c.slideDuration || .45;
- this.config = c;
- if(c.collapsed){
- this.collapse(true);
- }
- if(c.hidden){
- this.hide();
- }
- },
- /**
- * Returns true if this region is currently visible.
- * @return {Boolean}
- */
- isVisible : function(){
- return this.visible;
- },
+ reset: Roo.emptyFn,
+
+ clearInvalid: Roo.form.Field.prototype.clearInvalid,
- /**
- * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
- * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&#160;")
- */
- setCollapsedTitle : function(title){
- title = title || " ";
- if(this.collapsedTitleTextEl){
- this.collapsedTitleTextEl.innerHTML = title;
- }
- },
+ validate: function() {
+ return true;
+ },
+
+ destroy: function() {
+ this.purgeListeners();
+ this.getEl.removeAllListeners();
+ this.getEl().remove();
+ if (this.dragZone) {
+ if (this.dragZone.destroy) {
+ this.dragZone.destroy();
+ }
+ }
+ if (this.dropZone) {
+ if (this.dropZone.destroy) {
+ this.dropZone.destroy();
+ }
+ }
+ },
- getBox : function(){
- var b;
- if(!this.collapsed){
- b = this.el.getBox(false, true);
- }else{
- b = this.collapsedEl.getBox(false, true);
- }
- return b;
- },
+/** Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
+ getName: function() {
+ return this.name;
+ },
- getMargins : function(){
- return this.collapsed ? this.cmargins : this.margins;
- },
+/** Loads the View from a JSON string representing the Records to put into the Store. */
+ setValue: function(v) {
+ if (!this.store) {
+ throw "DDView.setValue(). DDView must be constructed with a valid Store";
+ }
+ var data = {};
+ data[this.store.reader.meta.root] = v ? [].concat(v) : [];
+ this.store.proxy = new Roo.data.MemoryProxy(data);
+ this.store.load();
+ },
- highlight : function(){
- this.el.addClass("x-layout-panel-dragover");
- },
+/** @return {String} a parenthesised list of the ids of the Records in the View. */
+ getValue: function() {
+ var result = '(';
+ this.store.each(function(rec) {
+ result += rec.id + ',';
+ });
+ return result.substr(0, result.length - 1) + ')';
+ },
+
+ getIds: function() {
+ var i = 0, result = new Array(this.store.getCount());
+ this.store.each(function(rec) {
+ result[i++] = rec.id;
+ });
+ return result;
+ },
+
+ isDirty: function() {
+ return this.isDirtyFlag;
+ },
- unhighlight : function(){
- this.el.removeClass("x-layout-panel-dragover");
+/**
+ * Part of the Roo.dd.DropZone interface. If no target node is found, the
+ * whole Element becomes the target, and this causes the drop gesture to append.
+ */
+ getTargetFromEvent : function(e) {
+ var target = e.getTarget();
+ while ((target !== null) && (target.parentNode != this.el.dom)) {
+ target = target.parentNode;
+ }
+ if (!target) {
+ target = this.el.dom.lastChild || this.el.dom;
+ }
+ return target;
},
- updateBox : function(box){
- this.box = box;
- if(!this.collapsed){
- this.el.dom.style.left = box.x + "px";
- this.el.dom.style.top = box.y + "px";
- this.updateBody(box.width, box.height);
- }else{
- this.collapsedEl.dom.style.left = box.x + "px";
- this.collapsedEl.dom.style.top = box.y + "px";
- this.collapsedEl.setSize(box.width, box.height);
- }
- if(this.tabs){
- this.tabs.autoSizeTabs();
- }
+/**
+ * Create the drag data which consists of an object which has the property "ddel" as
+ * the drag proxy element.
+ */
+ getDragData : function(e) {
+ var target = this.findItemFromChild(e.getTarget());
+ if(target) {
+ this.handleSelection(e);
+ var selNodes = this.getSelectedNodes();
+ var dragData = {
+ source: this,
+ copy: this.copy || (this.allowCopy && e.ctrlKey),
+ nodes: selNodes,
+ records: []
+ };
+ var selectedIndices = this.getSelectedIndexes();
+ for (var i = 0; i < selectedIndices.length; i++) {
+ dragData.records.push(this.store.getAt(selectedIndices[i]));
+ }
+ if (selNodes.length == 1) {
+ dragData.ddel = target.cloneNode(true); // the div element
+ } else {
+ var div = document.createElement('div'); // create the multi element drag "ghost"
+ div.className = 'multi-proxy';
+ for (var i = 0, len = selNodes.length; i < len; i++) {
+ div.appendChild(selNodes[i].cloneNode(true));
+ }
+ dragData.ddel = div;
+ }
+ //console.log(dragData)
+ //console.log(dragData.ddel.innerHTML)
+ return dragData;
+ }
+ //console.log('nodragData')
+ return false;
},
+
+/** Specify to which ddGroup items in this DDView may be dragged. */
+ setDraggable: function(ddGroup) {
+ if (ddGroup instanceof Array) {
+ Roo.each(ddGroup, this.setDraggable, this);
+ return;
+ }
+ if (this.dragZone) {
+ this.dragZone.addToGroup(ddGroup);
+ } else {
+ this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+ containerScroll: true,
+ ddGroup: ddGroup
- updateBody : function(w, h){
- if(w !== null){
- this.el.setWidth(w);
- w -= this.el.getBorderWidth("rl");
- if(this.config.adjustments){
- w += this.config.adjustments[0];
- }
- }
- if(h !== null){
- this.el.setHeight(h);
- h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
- h -= this.el.getBorderWidth("tb");
- if(this.config.adjustments){
- h += this.config.adjustments[1];
- }
- this.bodyEl.setHeight(h);
- if(this.tabs){
- h = this.tabs.syncHeight(h);
- }
- }
- if(this.panelSize){
- w = w !== null ? w : this.panelSize.width;
- h = h !== null ? h : this.panelSize.height;
- }
- if(this.activePanel){
- var el = this.activePanel.getEl();
- w = w !== null ? w : el.getWidth();
- h = h !== null ? h : el.getHeight();
- this.panelSize = {width: w, height: h};
- this.activePanel.setSize(w, h);
- }
- if(Roo.isIE && this.tabs){
- this.tabs.el.repaint();
- }
- },
+ });
+// Draggability implies selection. DragZone's mousedown selects the element.
+ if (!this.multiSelect) { this.singleSelect = true; }
- /**
- * Returns the container element for this region.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
+// Wire the DragZone's handlers up to methods in *this*
+ this.dragZone.getDragData = this.getDragData.createDelegate(this);
+ }
},
- /**
- * Hides this region.
- */
- hide : function(){
- if(!this.collapsed){
- this.el.dom.style.left = "-2000px";
- this.el.hide();
- }else{
- this.collapsedEl.dom.style.left = "-2000px";
- this.collapsedEl.hide();
- }
- this.visible = false;
- this.fireEvent("visibilitychange", this, false);
- },
+/** Specify from which ddGroup this DDView accepts drops. */
+ setDroppable: function(ddGroup) {
+ if (ddGroup instanceof Array) {
+ Roo.each(ddGroup, this.setDroppable, this);
+ return;
+ }
+ if (this.dropZone) {
+ this.dropZone.addToGroup(ddGroup);
+ } else {
+ this.dropZone = new Roo.dd.DropZone(this.getEl(), {
+ containerScroll: true,
+ ddGroup: ddGroup
+ });
- /**
- * Shows this region if it was previously hidden.
- */
- show : function(){
- if(!this.collapsed){
- this.el.show();
- }else{
- this.collapsedEl.show();
- }
- this.visible = true;
- this.fireEvent("visibilitychange", this, true);
+// Wire the DropZone's handlers up to methods in *this*
+ this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+ this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+ this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+ this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+ this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+ }
},
- closeClicked : function(){
- if(this.activePanel){
- this.remove(this.activePanel);
- }
+/** Decide whether to drop above or below a View node. */
+ getDropPoint : function(e, n, dd){
+ if (n == this.el.dom) { return "above"; }
+ var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
+ var c = t + (b - t) / 2;
+ var y = Roo.lib.Event.getPageY(e);
+ if(y <= c) {
+ return "above";
+ }else{
+ return "below";
+ }
},
- collapseClick : function(e){
- if(this.isSlid){
- e.stopPropagation();
- this.slideIn();
- }else{
- e.stopPropagation();
- this.slideOut();
- }
+ onNodeEnter : function(n, dd, e, data){
+ return false;
},
+
+ onNodeOver : function(n, dd, e, data){
+ var pt = this.getDropPoint(e, n, dd);
+ // set the insert point style on the target node
+ var dragElClass = this.dropNotAllowed;
+ if (pt) {
+ var targetElClass;
+ if (pt == "above"){
+ dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+ targetElClass = "x-view-drag-insert-above";
+ } else {
+ dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+ targetElClass = "x-view-drag-insert-below";
+ }
+ if (this.lastInsertClass != targetElClass){
+ Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+ this.lastInsertClass = targetElClass;
+ }
+ }
+ return dragElClass;
+ },
- /**
- * Collapses this region.
- * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
- */
- collapse : function(skipAnim, skipCheck){
- if(this.collapsed) {
- return;
- }
-
- if(skipCheck || this.fireEvent("beforecollapse", this) != false){
-
- this.collapsed = true;
- if(this.split){
- this.split.el.hide();
- }
- if(this.config.animate && skipAnim !== true){
- this.fireEvent("invalidated", this);
- this.animateCollapse();
- }else{
- this.el.setLocation(-20000,-20000);
- this.el.hide();
- this.collapsedEl.show();
- this.fireEvent("collapsed", this);
- this.fireEvent("invalidated", this);
- }
- }
-
+ onNodeOut : function(n, dd, e, data){
+ this.removeDropIndicators(n);
},
- animateCollapse : function(){
- // overridden
+ onNodeDrop : function(n, dd, e, data){
+ if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+ return false;
+ }
+ var pt = this.getDropPoint(e, n, dd);
+ var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
+ if (pt == "below") { insertAt++; }
+ for (var i = 0; i < data.records.length; i++) {
+ var r = data.records[i];
+ var dup = this.store.getById(r.id);
+ if (dup && (dd != this.dragZone)) {
+ Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
+ } else {
+ if (data.copy) {
+ this.store.insert(insertAt++, r.copy());
+ } else {
+ data.source.isDirtyFlag = true;
+ r.store.remove(r);
+ this.store.insert(insertAt++, r);
+ }
+ this.isDirtyFlag = true;
+ }
+ }
+ this.dragZone.cachedTarget = null;
+ return true;
},
- /**
- * Expands this region if it was previously collapsed.
- * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
- * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
- */
- expand : function(e, skipAnim){
- if(e) {
- e.stopPropagation();
- }
- if(!this.collapsed || this.el.hasActiveFx()) {
- return;
- }
- if(this.isSlid){
- this.afterSlideIn();
- skipAnim = true;
- }
- this.collapsed = false;
- if(this.config.animate && skipAnim !== true){
- this.animateExpand();
- }else{
- this.el.show();
- if(this.split){
- this.split.el.show();
- }
- this.collapsedEl.setLocation(-2000,-2000);
- this.collapsedEl.hide();
- this.fireEvent("invalidated", this);
- this.fireEvent("expanded", this);
- }
+ removeDropIndicators : function(n){
+ if(n){
+ Roo.fly(n).removeClass([
+ "x-view-drag-insert-above",
+ "x-view-drag-insert-below"]);
+ this.lastInsertClass = "_noclass";
+ }
},
- animateExpand : function(){
- // overridden
- },
+/**
+ * Utility method. Add a delete option to the DDView's context menu.
+ * @param {String} imageUrl The URL of the "delete" icon image.
+ */
+ setDeletable: function(imageUrl) {
+ if (!this.singleSelect && !this.multiSelect) {
+ this.singleSelect = true;
+ }
+ var c = this.getContextMenu();
+ this.contextMenu.on("itemclick", function(item) {
+ switch (item.id) {
+ case "delete":
+ this.remove(this.getSelectedIndexes());
+ break;
+ }
+ }, this);
+ this.contextMenu.add({
+ icon: imageUrl,
+ id: "delete",
+ text: 'Delete'
+ });
+ },
+
+/** Return the context menu for this DDView. */
+ getContextMenu: function() {
+ if (!this.contextMenu) {
+// Create the View's context menu
+ this.contextMenu = new Roo.menu.Menu({
+ id: this.id + "-contextmenu"
+ });
+ this.el.on("contextmenu", this.showContextMenu, this);
+ }
+ return this.contextMenu;
+ },
+
+ disableContextMenu: function() {
+ if (this.contextMenu) {
+ this.el.un("contextmenu", this.showContextMenu, this);
+ }
+ },
- initTabs : function()
- {
- this.bodyEl.setStyle("overflow", "hidden");
- 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);
- }
- this.tabs = ts;
- ts.resizeTabs = this.config.resizeTabs === true;
- ts.minTabWidth = this.config.minTabWidth || 40;
- ts.maxTabWidth = this.config.maxTabWidth || 250;
- ts.preferredTabWidth = this.config.preferredTabWidth || 150;
- ts.monitorResize = false;
- ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
- ts.bodyEl.addClass('x-layout-tabs-body');
- this.panels.each(this.initPanelAsTab, this);
+ showContextMenu: function(e, item) {
+ item = this.findItemFromChild(e.getTarget());
+ if (item) {
+ e.stopEvent();
+ this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
+ this.contextMenu.showAt(e.getXY());
+ }
},
- initPanelAsTab : function(panel){
- var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
- this.config.closeOnTab && panel.isClosable());
- if(panel.tabTip !== undefined){
- ti.setTooltip(panel.tabTip);
- }
- ti.on("activate", function(){
- this.setActivePanel(panel);
- }, this);
- if(this.config.closeOnTab){
- ti.on("beforeclose", function(t, e){
- e.cancel = true;
- this.remove(panel);
- }, this);
- }
- return ti;
+/**
+ * Remove {@link Roo.data.Record}s at the specified indices.
+ * @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
+ */
+ remove: function(selectedIndices) {
+ selectedIndices = [].concat(selectedIndices);
+ for (var i = 0; i < selectedIndices.length; i++) {
+ var rec = this.store.getAt(selectedIndices[i]);
+ this.store.remove(rec);
+ }
},
- updatePanelTitle : function(panel, title){
- if(this.activePanel == panel){
- this.updateTitle(title);
- }
- if(this.tabs){
- var ti = this.tabs.getTab(panel.getEl().id);
- ti.setText(title);
- if(panel.tabTip !== undefined){
- ti.setTooltip(panel.tabTip);
+/**
+ * Double click fires the event, but also, if this is draggable, and there is only one other
+ * related DropZone, it transfers the selected node.
+ */
+ onDblClick : function(e){
+ var item = this.findItemFromChild(e.getTarget());
+ if(item){
+ if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
+ return false;
}
+ if (this.dragGroup) {
+ var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
+ while (targets.indexOf(this.dropZone) > -1) {
+ targets.remove(this.dropZone);
+ }
+ if (targets.length == 1) {
+ this.dragZone.cachedTarget = null;
+ var el = Roo.get(targets[0].getEl());
+ var box = el.getBox(true);
+ targets[0].onNodeDrop(el.dom, {
+ target: el.dom,
+ xy: [box.x, box.y + box.height - 1]
+ }, null, this.getDragData(e));
+ }
+ }
}
},
-
- updateTitle : function(title){
- if(this.titleTextEl && !this.config.title){
- this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : " ");
+
+ handleSelection: function(e) {
+ this.dragZone.cachedTarget = null;
+ var item = this.findItemFromChild(e.getTarget());
+ if (!item) {
+ this.clearSelections(true);
+ return;
}
+ if (item && (this.multiSelect || this.singleSelect)){
+ if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
+ this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
+ }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
+ this.unselect(item);
+ } else {
+ this.select(item, this.multiSelect && e.ctrlKey);
+ this.lastSelection = item;
+ }
+ }
},
- setActivePanel : function(panel){
- panel = this.getPanel(panel);
- if(this.activePanel && this.activePanel != panel){
- this.activePanel.setActiveState(false);
- }
- this.activePanel = panel;
- panel.setActiveState(true);
- if(this.panelSize){
- panel.setSize(this.panelSize.width, this.panelSize.height);
- }
- if(this.closeBtn){
- this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
- }
- this.updateTitle(panel.getTitle());
- if(this.tabs){
- this.fireEvent("invalidated", this);
- }
- this.fireEvent("panelactivated", this, panel);
+ onItemClick : function(item, index, e){
+ if(this.fireEvent("beforeclick", this, index, item, e) === false){
+ return false;
+ }
+ return true;
},
+ unselect : function(nodeInfo, suppressEvent){
+ var node = this.getNode(nodeInfo);
+ if(node && this.isSelected(node)){
+ if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
+ Roo.fly(node).removeClass(this.selectedClass);
+ this.selections.remove(node);
+ if(!suppressEvent){
+ this.fireEvent("selectionchange", this, this.selections);
+ }
+ }
+ }
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.LayoutManager
+ * @extends Roo.util.Observable
+ * Base class for layout managers.
+ */
+Roo.LayoutManager = function(container, config){
+ Roo.LayoutManager.superclass.constructor.call(this);
+ this.el = Roo.get(container);
+ // ie scrollbar fix
+ if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
+ document.body.scroll = "no";
+ }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
+ this.el.position('relative');
+ }
+ this.id = this.el.id;
+ this.el.addClass("x-layout-container");
+ /** false to disable window resize monitoring @type Boolean */
+ this.monitorWindowResize = true;
+ this.regions = {};
+ this.addEvents({
+ /**
+ * @event layout
+ * Fires when a layout is performed.
+ * @param {Roo.LayoutManager} this
+ */
+ "layout" : true,
+ /**
+ * @event regionresized
+ * Fires when the user resizes a region.
+ * @param {Roo.LayoutRegion} region The resized region
+ * @param {Number} newSize The new size (width for east/west, height for north/south)
+ */
+ "regionresized" : true,
+ /**
+ * @event regioncollapsed
+ * Fires when a region is collapsed.
+ * @param {Roo.LayoutRegion} region The collapsed region
+ */
+ "regioncollapsed" : true,
+ /**
+ * @event regionexpanded
+ * Fires when a region is expanded.
+ * @param {Roo.LayoutRegion} region The expanded region
+ */
+ "regionexpanded" : true
+ });
+ this.updating = false;
+ Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+};
+
+Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
/**
- * Shows the specified panel.
- * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
- * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
+ * Returns true if this layout is currently being updated
+ * @return {Boolean}
*/
- showPanel : function(panel)
- {
- panel = this.getPanel(panel);
- if(panel){
- if(this.tabs){
- var tab = this.tabs.getTab(panel.getEl().id);
- if(tab.isHidden()){
- this.tabs.unhideTab(tab.id);
- }
- tab.activate();
- }else{
- this.setActivePanel(panel);
- }
- }
- return panel;
+ isUpdating : function(){
+ return this.updating;
},
-
+
/**
- * Get the active panel for this region.
- * @return {Roo.ContentPanel} The active panel or null
+ * Suspend the LayoutManager from doing auto-layouts while
+ * making multiple add or remove calls
*/
- getActivePanel : function(){
- return this.activePanel;
- },
-
- validateVisibility : function(){
- if(this.panels.getCount() < 1){
- this.updateTitle(" ");
- this.closeBtn.hide();
- this.hide();
- }else{
- if(!this.isVisible()){
- this.show();
- }
- }
+ beginUpdate : function(){
+ this.updating = true;
},
-
+
/**
- * Adds the passed ContentPanel(s) to this region.
- * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
- * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
+ * Restore auto-layouts and optionally disable the manager from performing a layout
+ * @param {Boolean} noLayout true to disable a layout update
*/
- add : function(panel){
- if(arguments.length > 1){
- for(var i = 0, len = arguments.length; i < len; i++) {
- this.add(arguments[i]);
- }
- return null;
- }
- if(this.hasPanel(panel)){
- this.showPanel(panel);
- return panel;
- }
- panel.setRegion(this);
- this.panels.add(panel);
- if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
- this.bodyEl.dom.appendChild(panel.getEl().dom);
- if(panel.background !== true){
- this.setActivePanel(panel);
- }
- this.fireEvent("paneladded", this, panel);
- return panel;
- }
- if(!this.tabs){
- this.initTabs();
- }else{
- this.initPanelAsTab(panel);
- }
- if(panel.background !== true){
- this.tabs.activate(panel.getEl().id);
- }
- this.fireEvent("paneladded", this, panel);
- return panel;
+ endUpdate : function(noLayout){
+ this.updating = false;
+ if(!noLayout){
+ this.layout();
+ }
},
-
- /**
- * Hides the tab for the specified panel.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
- */
- hidePanel : function(panel){
- if(this.tabs && (panel = this.getPanel(panel))){
- this.tabs.hideTab(panel.getEl().id);
- }
+
+ layout: function(){
+
},
-
+
+ onRegionResized : function(region, newSize){
+ this.fireEvent("regionresized", region, newSize);
+ this.layout();
+ },
+
+ onRegionCollapsed : function(region){
+ this.fireEvent("regioncollapsed", region);
+ },
+
+ onRegionExpanded : function(region){
+ this.fireEvent("regionexpanded", region);
+ },
+
/**
- * Unhides the tab for a previously hidden panel.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+ * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
+ * performs box-model adjustments.
+ * @return {Object} The size as an object {width: (the width), height: (the height)}
*/
- unhidePanel : function(panel){
- if(this.tabs && (panel = this.getPanel(panel))){
- this.tabs.unhideTab(panel.getEl().id);
- }
- },
-
- clearPanels : function(){
- while(this.panels.getCount() > 0){
- this.remove(this.panels.first());
+ getViewSize : function(){
+ var size;
+ if(this.el.dom != document.body){
+ size = this.el.getSize();
+ }else{
+ size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
}
+ size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
+ size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+ return size;
},
-
+
/**
- * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
- * @param {Boolean} preservePanel Overrides the config preservePanel option
- * @return {Roo.ContentPanel} The panel that was removed
+ * Returns the Element this layout is bound to.
+ * @return {Roo.Element}
*/
- remove : function(panel, preservePanel){
- panel = this.getPanel(panel);
- if(!panel){
- return null;
- }
- var e = {};
- this.fireEvent("beforeremove", this, panel, e);
- if(e.cancel === true){
- return null;
- }
- preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
- var panelId = panel.getId();
- this.panels.removeKey(panelId);
- if(preservePanel){
- document.body.appendChild(panel.getEl().dom);
- }
- if(this.tabs){
- this.tabs.removeTab(panel.getEl().id);
- }else if (!preservePanel){
- this.bodyEl.dom.removeChild(panel.getEl().dom);
- }
- if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
- var p = this.panels.first();
- var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
- tempEl.appendChild(p.getEl().dom);
- this.bodyEl.update("");
- this.bodyEl.dom.appendChild(p.getEl().dom);
- tempEl = null;
- this.updateTitle(p.getTitle());
- this.tabs = null;
- this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
- this.setActivePanel(p);
- }
- panel.setRegion(null);
- if(this.activePanel == panel){
- this.activePanel = null;
- }
- if(this.config.autoDestroy !== false && preservePanel !== true){
- try{panel.destroy();}catch(e){}
- }
- this.fireEvent("panelremoved", this, panel);
- return panel;
+ getEl : function(){
+ return this.el;
},
-
+
/**
- * Returns the TabPanel component used by this region
- * @return {Roo.TabPanel}
+ * Returns the specified region.
+ * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
+ * @return {Roo.LayoutRegion}
*/
- getTabs : function(){
- return this.tabs;
+ getRegion : function(target){
+ return this.regions[target.toLowerCase()];
},
-
- createTool : function(parentEl, className){
- var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
- children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: " "}]}, true);
- btn.addClassOnOver("x-layout-tools-button-over");
- return btn;
+
+ onWindowResize : function(){
+ if(this.monitorWindowResize){
+ this.layout();
+ }
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+/**
+ * @class Roo.BorderLayout
+ * @extends Roo.LayoutManager
+ * @children Roo.panel.Content
+ * This class represents a common layout manager used in desktop applications. For screenshots and more details,
+ * please see: <br><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
+ * Example:
+ <pre><code>
+ var layout = new Roo.BorderLayout(document.body, {
+ north: {
+ initialSize: 25,
+ titlebar: false
+ },
+ west: {
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true
+ },
+ east: {
+ split:true,
+ initialSize: 202,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true
+ },
+ south: {
+ split:true,
+ initialSize: 100,
+ minSize: 100,
+ maxSize: 200,
+ titlebar: true,
+ collapsible: true
+ },
+ center: {
+ titlebar: true,
+ autoScroll:true,
+ resizeTabs: true,
+ minTabWidth: 50,
+ preferredTabWidth: 150
+ }
+});
+// shorthand
+var CP = Roo.panel.Content;
-/**
- * @class Roo.SplitLayoutRegion
- * @extends Roo.LayoutRegion
- * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+layout.beginUpdate();
+layout.add("north", new CP("north", "North"));
+layout.add("south", new CP("south", {title: "South", closable: true}));
+layout.add("west", new CP("west", {title: "West"}));
+layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
+layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
+layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
+layout.getRegion("center").showPanel("center1");
+layout.endUpdate();
+</code></pre>
+
+<b>The container the layout is rendered into can be either the body element or any other element.
+If it is not the body element, the container needs to either be an absolute positioned element,
+or you will need to add "position:relative" to the css of the container. You will also need to specify
+the container size if it is not the body element.</b>
+
+* @constructor
+* Create a new BorderLayout
+* @param {String/HTMLElement/Element} container The container this layout is bound to
+* @param {Object} config Configuration options
*/
-Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
- this.cursor = cursor;
- Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+Roo.BorderLayout = function(container, config){
+ config = config || {};
+ Roo.BorderLayout.superclass.constructor.call(this, container, config);
+ this.factory = config.factory || Roo.BorderLayout.RegionFactory;
+ for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
+ var target = this.factory.validRegions[i];
+ if(config[target]){
+ this.addRegion(target, config[target]);
+ }
+ }
};
-Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
- splitTip : "Drag to resize.",
- collapsibleSplitTip : "Drag to resize. Double click to hide.",
- useSplitTips : false,
-
- applyConfig : function(config){
- Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
- if(config.split){
- if(!this.split){
- var splitEl = Roo.DomHelper.append(this.mgr.el.dom,
- {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: " "});
- /** The SplitBar for this region
- * @type Roo.SplitBar */
- this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
- this.split.on("moved", this.onSplitMove, this);
- this.split.useShim = config.useShim === true;
- this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
- if(this.useSplitTips){
- this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
- }
- if(config.collapsible){
- this.split.el.on("dblclick", this.collapse, this);
- }
- }
- if(typeof config.minSize != "undefined"){
- this.split.minSize = config.minSize;
- }
- if(typeof config.maxSize != "undefined"){
- this.split.maxSize = config.maxSize;
- }
- if(config.hideWhenEmpty || config.hidden || config.collapsed){
- this.hideSplitter();
- }
+Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+
+ /**
+ * @cfg {Roo.LayoutRegion} east
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} west
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} north
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} south
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} center
+ */
+ /**
+ * Creates and adds a new region if it doesn't already exist.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Object} config The regions config object
+ * @return {BorderLayoutRegion} The new region
+ */
+ addRegion : function(target, config){
+ if(!this.regions[target]){
+ var r = this.factory.create(target, this, config);
+ this.bindRegion(target, r);
}
+ return this.regions[target];
},
- getHMaxSize : function(){
- var cmax = this.config.maxSize || 10000;
- var center = this.mgr.getRegion("center");
- return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+ // private (kinda)
+ bindRegion : function(name, r){
+ this.regions[name] = r;
+ r.on("visibilitychange", this.layout, this);
+ r.on("paneladded", this.layout, this);
+ r.on("panelremoved", this.layout, this);
+ r.on("invalidated", this.layout, this);
+ r.on("resized", this.onRegionResized, this);
+ r.on("collapsed", this.onRegionCollapsed, this);
+ r.on("expanded", this.onRegionExpanded, this);
},
- getVMaxSize : function(){
- var cmax = this.config.maxSize || 10000;
- var center = this.mgr.getRegion("center");
- return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
+ /**
+ * Performs a layout update.
+ */
+ layout : function(){
+ if(this.updating) {
+ return;
+ }
+ var size = this.getViewSize();
+ var w = size.width;
+ var h = size.height;
+ var centerW = w;
+ var centerH = h;
+ var centerY = 0;
+ var centerX = 0;
+ //var x = 0, y = 0;
+
+ var rs = this.regions;
+ var north = rs["north"];
+ var south = rs["south"];
+ var west = rs["west"];
+ var east = rs["east"];
+ var center = rs["center"];
+ //if(this.hideOnLayout){ // not supported anymore
+ //c.el.setStyle("display", "none");
+ //}
+ if(north && north.isVisible()){
+ var b = north.getBox();
+ var m = north.getMargins();
+ b.width = w - (m.left+m.right);
+ b.x = m.left;
+ b.y = m.top;
+ centerY = b.height + b.y + m.bottom;
+ centerH -= centerY;
+ north.updateBox(this.safeBox(b));
+ }
+ if(south && south.isVisible()){
+ var b = south.getBox();
+ var m = south.getMargins();
+ b.width = w - (m.left+m.right);
+ b.x = m.left;
+ var totalHeight = (b.height + m.top + m.bottom);
+ b.y = h - totalHeight + m.top;
+ centerH -= totalHeight;
+ south.updateBox(this.safeBox(b));
+ }
+ if(west && west.isVisible()){
+ var b = west.getBox();
+ var m = west.getMargins();
+ b.height = centerH - (m.top+m.bottom);
+ b.x = m.left;
+ b.y = centerY + m.top;
+ var totalWidth = (b.width + m.left + m.right);
+ centerX += totalWidth;
+ centerW -= totalWidth;
+ west.updateBox(this.safeBox(b));
+ }
+ if(east && east.isVisible()){
+ var b = east.getBox();
+ var m = east.getMargins();
+ b.height = centerH - (m.top+m.bottom);
+ var totalWidth = (b.width + m.left + m.right);
+ b.x = w - totalWidth + m.left;
+ b.y = centerY + m.top;
+ centerW -= totalWidth;
+ east.updateBox(this.safeBox(b));
+ }
+ if(center){
+ var m = center.getMargins();
+ var centerBox = {
+ x: centerX + m.left,
+ y: centerY + m.top,
+ width: centerW - (m.left+m.right),
+ height: centerH - (m.top+m.bottom)
+ };
+ //if(this.hideOnLayout){
+ //center.el.setStyle("display", "block");
+ //}
+ center.updateBox(this.safeBox(centerBox));
+ }
+ this.el.repaint();
+ this.fireEvent("layout", this);
},
- onSplitMove : function(split, newSize){
- this.fireEvent("resized", this, newSize);
+ // private
+ safeBox : function(box){
+ box.width = Math.max(0, box.width);
+ box.height = Math.max(0, box.height);
+ return box;
},
-
- /**
- * Returns the {@link Roo.SplitBar} for this region.
- * @return {Roo.SplitBar}
+
+ /**
+ * Adds a ContentPanel (or subclass) to this layout.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Roo.panel.Content} panel The panel to add
+ * @return {Roo.panel.Content} The added panel
*/
- getSplitBar : function(){
- return this.split;
- },
-
- hide : function(){
- this.hideSplitter();
- Roo.SplitLayoutRegion.superclass.hide.call(this);
+ add : function(target, panel){
+
+ target = target.toLowerCase();
+ return this.regions[target].add(panel);
},
- hideSplitter : function(){
- if(this.split){
- this.split.el.setLocation(-2000,-2000);
- this.split.el.hide();
- }
+ /**
+ * Remove a ContentPanel (or subclass) to this layout.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Number/String/Roo.panel.Content} panel The index, id or panel to remove
+ * @return {Roo.panel.Content} The removed panel
+ */
+ remove : function(target, panel){
+ target = target.toLowerCase();
+ return this.regions[target].remove(panel);
},
- show : function(){
- if(this.split){
- this.split.el.show();
- }
- Roo.SplitLayoutRegion.superclass.show.call(this);
- },
-
- beforeSlide: function(){
- if(Roo.isGecko){// firefox overflow auto bug workaround
- this.bodyEl.clip();
- if(this.tabs) {
- this.tabs.bodyEl.clip();
- }
- if(this.activePanel){
- this.activePanel.getEl().clip();
-
- if(this.activePanel.beforeSlide){
- this.activePanel.beforeSlide();
- }
- }
- }
- },
-
- afterSlide : function(){
- if(Roo.isGecko){// firefox overflow auto bug workaround
- this.bodyEl.unclip();
- if(this.tabs) {
- this.tabs.bodyEl.unclip();
- }
- if(this.activePanel){
- this.activePanel.getEl().unclip();
- if(this.activePanel.afterSlide){
- this.activePanel.afterSlide();
+ /**
+ * Searches all regions for a panel with the specified id
+ * @param {String} panelId
+ * @return {Roo.panel.Content} The panel or null if it wasn't found
+ */
+ findPanel : function(panelId){
+ var rs = this.regions;
+ for(var target in rs){
+ if(typeof rs[target] != "function"){
+ var p = rs[target].getPanel(panelId);
+ if(p){
+ return p;
}
}
}
+ return null;
},
- initAutoHide : function(){
- if(this.autoHide !== false){
- if(!this.autoHideHd){
- var st = new Roo.util.DelayedTask(this.slideIn, this);
- this.autoHideHd = {
- "mouseout": function(e){
- if(!e.within(this.el, true)){
- st.delay(500);
- }
- },
- "mouseover" : function(e){
- st.cancel();
- },
- scope : this
- };
+ /**
+ * Searches all regions for a panel with the specified id and activates (shows) it.
+ * @param {String/panel.Content} panelId The panels id or the panel itself
+ * @return {Roo.panel.Content} The shown panel or null
+ */
+ showPanel : function(panelId) {
+ var rs = this.regions;
+ for(var target in rs){
+ var r = rs[target];
+ if(typeof r != "function"){
+ if(r.hasPanel(panelId)){
+ return r.showPanel(panelId);
}
- this.el.on(this.autoHideHd);
- }
- },
+ }
+ }
+ return null;
+ },
- clearAutoHide : function(){
- if(this.autoHide !== false){
- this.el.un("mouseout", this.autoHideHd.mouseout);
- this.el.un("mouseover", this.autoHideHd.mouseover);
+ /**
+ * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
+ * @param {Roo.state.Provider} provider (optional) An alternate state provider
+ */
+ restoreState : function(provider){
+ if(!provider){
+ provider = Roo.state.Manager;
}
+ var sm = new Roo.LayoutStateManager();
+ sm.init(this, provider);
},
- clearMonitor : function(){
- Roo.get(document).un("click", this.slideInIf, this);
+ /**
+ * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
+ * object should contain properties for each region to add ContentPanels to, and each property's value should be
+ * a valid ContentPanel config object. Example:
+ * <pre><code>
+// Create the main layout
+var layout = new Roo.BorderLayout('main-ct', {
+ west: {
+ split:true,
+ minSize: 175,
+ titlebar: true
},
+ center: {
+ title:'Components'
+ }
+}, 'main-ct');
- // these names are backwards but not changed for compat
- slideOut : function(){
- if(this.isSlid || this.el.hasActiveFx()){
- return;
- }
- this.isSlid = true;
- if(this.collapseBtn){
- this.collapseBtn.hide();
- }
- this.closeBtnState = this.closeBtn.getStyle('display');
- this.closeBtn.hide();
- if(this.stickBtn){
- this.stickBtn.show();
+// Create and add multiple ContentPanels at once via configs
+layout.batchAdd({
+ west: {
+ id: 'source-files',
+ autoCreate:true,
+ title:'Ext Source Files',
+ autoScroll:true,
+ fitToFrame:true
+ },
+ center : {
+ el: cview,
+ autoScroll:true,
+ fitToFrame:true,
+ toolbar: tb,
+ resizeEl:'cbody'
+ }
+});
+</code></pre>
+ * @param {Object} regions An object containing ContentPanel configs by region name
+ */
+ batchAdd : function(regions){
+ this.beginUpdate();
+ for(var rname in regions){
+ var lr = this.regions[rname];
+ if(lr){
+ this.addTypedPanels(lr, regions[rname]);
+ }
}
- this.el.show();
- this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
- this.beforeSlide();
- this.el.setStyle("z-index", 10001);
- this.el.slideIn(this.getSlideAnchor(), {
- callback: function(){
- this.afterSlide();
- this.initAutoHide();
- Roo.get(document).on("click", this.slideInIf, this);
- this.fireEvent("slideshow", this);
- },
- scope: this,
- block: true
- });
+ this.endUpdate();
},
- afterSlideIn : function(){
- this.clearAutoHide();
- this.isSlid = false;
- this.clearMonitor();
- this.el.setStyle("z-index", "");
- if(this.collapseBtn){
- this.collapseBtn.show();
+ // private
+ addTypedPanels : function(lr, ps){
+ if(typeof ps == 'string'){
+ lr.add(new Roo.panel.Content(ps));
}
- this.closeBtn.setStyle('display', this.closeBtnState);
- if(this.stickBtn){
- this.stickBtn.hide();
+ else if(ps instanceof Array){
+ for(var i =0, len = ps.length; i < len; i++){
+ this.addTypedPanels(lr, ps[i]);
+ }
}
- this.fireEvent("slidehide", this);
- },
-
- slideIn : function(cb){
- if(!this.isSlid || this.el.hasActiveFx()){
- Roo.callback(cb);
- return;
+ else if(!ps.events){ // raw config?
+ var el = ps.el;
+ delete ps.el; // prevent conflict
+ lr.add(new Roo.panel.Content(el || Roo.id(), ps));
}
- this.isSlid = false;
- this.beforeSlide();
- this.el.slideOut(this.getSlideAnchor(), {
- callback: function(){
- this.el.setLeftTop(-10000, -10000);
- this.afterSlide();
- this.afterSlideIn();
- Roo.callback(cb);
- },
- scope: this,
- block: true
- });
- },
-
- slideInIf : function(e){
- if(!e.within(this.el)){
- this.slideIn();
+ else { // panel object assumed!
+ lr.add(ps);
}
},
+ /**
+ * Adds a xtype elements to the layout.
+ * <pre><code>
- animateCollapse : function(){
- this.beforeSlide();
- this.el.setStyle("z-index", 20000);
- var anchor = this.getSlideAnchor();
- this.el.slideOut(anchor, {
- callback : function(){
- this.el.setStyle("z-index", "");
- this.collapsedEl.slideIn(anchor, {duration:.3});
- this.afterSlide();
- this.el.setLocation(-10000,-10000);
- this.el.hide();
- this.fireEvent("collapsed", this);
- },
- scope: this,
- block: true
- });
- },
-
- animateExpand : function(){
- this.beforeSlide();
- this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
- this.el.setStyle("z-index", 20000);
- this.collapsedEl.hide({
- duration:.1
- });
- this.el.slideIn(this.getSlideAnchor(), {
- callback : function(){
- this.el.setStyle("z-index", "");
- this.afterSlide();
- if(this.split){
- this.split.el.show();
- }
- this.fireEvent("invalidated", this);
- this.fireEvent("expanded", this);
- },
- scope: this,
- block: true
- });
- },
-
- anchors : {
- "west" : "left",
- "east" : "right",
- "north" : "top",
- "south" : "bottom"
- },
-
- sanchors : {
- "west" : "l",
- "east" : "r",
- "north" : "t",
- "south" : "b"
- },
-
- canchors : {
- "west" : "tl-tr",
- "east" : "tr-tl",
- "north" : "tl-bl",
- "south" : "bl-tl"
- },
-
- getAnchor : function(){
- return this.anchors[this.position];
- },
-
- getCollapseAnchor : function(){
- return this.canchors[this.position];
- },
+layout.addxtype({
+ xtype : 'ContentPanel',
+ region: 'west',
+ items: [ .... ]
+ }
+);
- getSlideAnchor : function(){
- return this.sanchors[this.position];
- },
+layout.addxtype({
+ xtype : 'NestedLayoutPanel',
+ region: 'west',
+ layout: {
+ center: { },
+ west: { }
+ },
+ items : [ ... list of content panels or nested layout panels.. ]
+ }
+);
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+ addxtype : function(cfg)
+ {
+ // basically accepts a pannel...
+ // can accept a layout region..!?!?
+ //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+
+ // if (!cfg.xtype.match(/Panel$/)) {
+ // return false;
+ // }
+ var ret = false;
- getAlignAdj : function(){
- var cm = this.cmargins;
- switch(this.position){
- case "west":
- return [0, 0];
- break;
- case "east":
- return [0, 0];
- break;
- case "north":
- return [0, 0];
- break;
- case "south":
- return [0, 0];
- break;
+ if (typeof(cfg.region) == 'undefined') {
+ Roo.log("Failed to add Panel, region was not set");
+ Roo.log(cfg);
+ return false;
}
- },
+ var region = cfg.region;
+ delete cfg.region;
+
+
+ var xitems = [];
+ if (cfg.items) {
+ xitems = cfg.items;
+ delete cfg.items;
+ }
+ var nb = false;
+
+ switch(cfg.xtype)
+ {
+ case 'Content':
+ if(cfg.autoCreate) {
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ } else {
+ var el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](el, cfg); // new panel!!!!!
+ }
+
+ this.add(region, ret);
+ break;
+ case 'Grid':
+ // needs grid and region
+
+ //var el = this.getRegion(region).el.createChild();
+ var el = this.el.createChild();
+ // create the grid first...
+
+ var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+ delete cfg.grid;
+ if (region == 'center' && this.active ) {
+ cfg.background = false;
+ }
+ ret = new Roo.panel[cfg.xtype](grid, cfg); // new panel!!!!!
+
+ this.add(region, ret);
+ if (cfg.background) {
+ ret.on('activate', function(gp) {
+ if (!gp.grid.rendered) {
+ gp.grid.render();
+ }
+ });
+ } else {
+ grid.render();
+ }
+ break;
+ case 'NestedLayout':
+ // create a new Layout (which is a Border Layout...
+ var el = this.el.createChild();
+ var clayout = cfg.layout;
+ delete cfg.layout;
+ clayout.items = clayout.items || [];
+ // replace this exitems with the clayout ones..
+ xitems = clayout.items;
+
+
+ if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+ cfg.background = false;
+ }
+ var layout = new Roo.BorderLayout(el, clayout);
+
+ ret = new Roo.panel[cfg.xtype](layout, cfg); // new panel!!!!!
+ //console.log('adding nested layout panel ' + cfg.toSource());
+ this.add(region, ret);
+ nb = {}; /// find first...
+ break;
+
+ case 'Calendar':
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'Tree': // our new panel!
+ cfg.el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'ContentPanel':
+ case 'ScrollPanel': // ContentPanel (el, cfg)
+ case 'ViewPanel':
+ if(cfg.autoCreate) {
+ ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+ } else {
+ var el = this.el.createChild();
+ ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
+ }
+
+ this.add(region, ret);
+ break;
+
+
+ case 'TreePanel': // our new panel!
+ cfg.el = this.el.createChild();
+ ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+
+ case 'NestedLayoutPanel':
+ // create a new Layout (which is a Border Layout...
+ var el = this.el.createChild();
+ var clayout = cfg.layout;
+ delete cfg.layout;
+ clayout.items = clayout.items || [];
+ // replace this exitems with the clayout ones..
+ xitems = clayout.items;
+
+
+ if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+ cfg.background = false;
+ }
+ var layout = new Roo.BorderLayout(el, clayout);
+
+ ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
+ //console.log('adding nested layout panel ' + cfg.toSource());
+ this.add(region, ret);
+ nb = {}; /// find first...
+ break;
+
+ case 'GridPanel':
+
+ // needs grid and region
+
+ //var el = this.getRegion(region).el.createChild();
+ var el = this.el.createChild();
+ // create the grid first...
+
+ var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+ delete cfg.grid;
+ if (region == 'center' && this.active ) {
+ cfg.background = false;
+ }
+ ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
+
+ this.add(region, ret);
+ if (cfg.background) {
+ ret.on('activate', function(gp) {
+ if (!gp.grid.rendered) {
+ gp.grid.render();
+ }
+ });
+ } else {
+ grid.render();
+ }
+ break;
+
+
+
+
+
+
+ default:
+ if (typeof(Roo[cfg.xtype]) != 'undefined') {
+
+ ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ } else {
+
+ alert("Can not add '" + cfg.xtype + "' to BorderLayout");
+ return null;
+ }
+
+ // GridPanel (grid, cfg)
+
+ }
+ this.beginUpdate();
+ // add children..
+ var region = '';
+ var abn = {};
+ Roo.each(xitems, function(i) {
+ region = nb && i.region ? i.region : false;
+
+ var add = ret.addxtype(i);
+
+ if (region) {
+ nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
+ if (!i.background) {
+ abn[region] = nb[region] ;
+ }
+ }
+
+ });
+ this.endUpdate();
- getExpandAdj : function(){
- var c = this.collapsedEl, cm = this.cmargins;
- switch(this.position){
- case "west":
- return [-(cm.right+c.getWidth()+cm.left), 0];
- break;
- case "east":
- return [cm.right+c.getWidth()+cm.left, 0];
- break;
- case "north":
- return [0, -(cm.top+cm.bottom+c.getHeight())];
- break;
- case "south":
- return [0, cm.top+cm.bottom+c.getHeight()];
- break;
+ // make the last non-background panel active..
+ //if (nb) { Roo.log(abn); }
+ if (nb) {
+
+ for(var r in abn) {
+ region = this.getRegion(r);
+ if (region) {
+ // tried using nb[r], but it does not work..
+
+ region.showPanel(abn[r]);
+
+ }
+ }
}
+ return ret;
+
}
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/*
- * These classes are private internal classes
- */
-Roo.CenterLayoutRegion = function(mgr, config){
- Roo.LayoutRegion.call(this, mgr, config, "center");
- this.visible = true;
- this.minWidth = config.minWidth || 20;
- this.minHeight = config.minHeight || 20;
-};
+});
-Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
- hide : function(){
- // center panel can't be hidden
+/**
+ * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
+ * the beginUpdate and endUpdate calls internally. The key to this method is the <b>panels</b> property that can be
+ * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
+ * during creation. The following code is equivalent to the constructor-based example at the beginning of this class:
+ * <pre><code>
+// shorthand
+var CP = Roo.ContentPanel;
+
+var layout = Roo.BorderLayout.create({
+ north: {
+ initialSize: 25,
+ titlebar: false,
+ panels: [new CP("north", "North")]
},
-
- show : function(){
- // center panel can't be hidden
+ west: {
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ panels: [new CP("west", {title: "West"})]
},
-
- getMinWidth: function(){
- return this.minWidth;
+ east: {
+ split:true,
+ initialSize: 202,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
},
-
- getMinHeight: function(){
- return this.minHeight;
- }
-});
-
-
-Roo.NorthLayoutRegion = function(mgr, config){
- Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.TOP;
- this.split.orientation = Roo.SplitBar.VERTICAL;
- this.split.el.addClass("x-layout-split-v");
- }
- var size = config.initialSize || config.height;
- if(typeof size != "undefined"){
- this.el.setHeight(size);
- }
-};
-Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.VERTICAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- box.height += this.split.el.getHeight();
- }
- return box;
+ south: {
+ split:true,
+ initialSize: 100,
+ minSize: 100,
+ maxSize: 200,
+ titlebar: true,
+ collapsible: true,
+ panels: [new CP("south", {title: "South", closable: true})]
},
-
- updateBox : function(box){
- if(this.split && !this.collapsed){
- box.height -= this.split.el.getHeight();
- this.split.el.setLeft(box.x);
- this.split.el.setTop(box.y+box.height);
- this.split.el.setWidth(box.width);
- }
- if(this.collapsed){
- this.updateBody(box.width, null);
- }
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ center: {
+ titlebar: true,
+ autoScroll:true,
+ resizeTabs: true,
+ minTabWidth: 50,
+ preferredTabWidth: 150,
+ panels: [
+ new CP("center1", {title: "Close Me", closable: true}),
+ new CP("center2", {title: "Center Panel", closable: false})
+ ]
}
-});
+}, document.body);
-Roo.SouthLayoutRegion = function(mgr, config){
- Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.BOTTOM;
- this.split.orientation = Roo.SplitBar.VERTICAL;
- this.split.el.addClass("x-layout-split-v");
- }
- var size = config.initialSize || config.height;
- if(typeof size != "undefined"){
- this.el.setHeight(size);
- }
-};
-Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.VERTICAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- var sh = this.split.el.getHeight();
- box.height += sh;
- box.y -= sh;
- }
- return box;
- },
-
- updateBox : function(box){
- if(this.split && !this.collapsed){
- var sh = this.split.el.getHeight();
- box.height -= sh;
- box.y += sh;
- this.split.el.setLeft(box.x);
- this.split.el.setTop(box.y-sh);
- this.split.el.setWidth(box.width);
- }
- if(this.collapsed){
- this.updateBody(box.width, null);
+layout.getRegion("center").showPanel("center1");
+</code></pre>
+ * @param config
+ * @param targetEl
+ */
+Roo.BorderLayout.create = function(config, targetEl){
+ var layout = new Roo.BorderLayout(targetEl || document.body, config);
+ layout.beginUpdate();
+ var regions = Roo.BorderLayout.RegionFactory.validRegions;
+ for(var j = 0, jlen = regions.length; j < jlen; j++){
+ var lr = regions[j];
+ if(layout.regions[lr] && config[lr].panels){
+ var r = layout.regions[lr];
+ var ps = config[lr].panels;
+ layout.addTypedPanels(r, ps);
}
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
- }
-});
-
-Roo.EastLayoutRegion = function(mgr, config){
- Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.RIGHT;
- this.split.orientation = Roo.SplitBar.HORIZONTAL;
- this.split.el.addClass("x-layout-split-h");
- }
- var size = config.initialSize || config.width;
- if(typeof size != "undefined"){
- this.el.setWidth(size);
}
+ layout.endUpdate();
+ return layout;
};
-Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.HORIZONTAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- var sw = this.split.el.getWidth();
- box.width += sw;
- box.x -= sw;
- }
- return box;
- },
- updateBox : function(box){
- if(this.split && !this.collapsed){
- var sw = this.split.el.getWidth();
- box.width -= sw;
- this.split.el.setLeft(box.x);
- this.split.el.setTop(box.y);
- this.split.el.setHeight(box.height);
- box.x += sw;
- }
- if(this.collapsed){
- this.updateBody(null, box.height);
- }
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
- }
-});
+// private
+Roo.BorderLayout.RegionFactory = {
+ // private
+ validRegions : ["north","south","east","west","center"],
-Roo.WestLayoutRegion = function(mgr, config){
- Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
- if(this.split){
- this.split.placement = Roo.SplitBar.LEFT;
- this.split.orientation = Roo.SplitBar.HORIZONTAL;
- this.split.el.addClass("x-layout-split-h");
- }
- var size = config.initialSize || config.width;
- if(typeof size != "undefined"){
- this.el.setWidth(size);
- }
-};
-Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
- orientation: Roo.SplitBar.HORIZONTAL,
- getBox : function(){
- if(this.collapsed){
- return this.collapsedEl.getBox();
- }
- var box = this.el.getBox();
- if(this.split){
- box.width += this.split.el.getWidth();
- }
- return box;
- },
-
- updateBox : function(box){
- if(this.split && !this.collapsed){
- var sw = this.split.el.getWidth();
- box.width -= sw;
- this.split.el.setLeft(box.x+box.width);
- this.split.el.setTop(box.y);
- this.split.el.setHeight(box.height);
- }
- if(this.collapsed){
- this.updateBody(null, box.height);
+ // private
+ create : function(target, mgr, config){
+ target = target.toLowerCase();
+ if(config.lightweight || config.basic){
+ return new Roo.BasicLayoutRegion(mgr, config, target);
}
- Roo.LayoutRegion.prototype.updateBox.call(this, box);
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/*
- * Private internal class for reading and applying state
- */
-Roo.LayoutStateManager = function(layout){
- // default empty state
- this.state = {
- north: {},
- south: {},
- east: {},
- west: {}
- };
-};
-
-Roo.LayoutStateManager.prototype = {
- init : function(layout, provider){
- this.provider = provider;
- var state = provider.get(layout.id+"-layout-state");
- if(state){
- var wasUpdating = layout.isUpdating();
- if(!wasUpdating){
- layout.beginUpdate();
- }
- for(var key in state){
- if(typeof state[key] != "function"){
- var rstate = state[key];
- var r = layout.getRegion(key);
- if(r && rstate){
- if(rstate.size){
- r.resizeTo(rstate.size);
- }
- if(rstate.collapsed == true){
- r.collapse(true);
- }else{
- r.expand(null, true);
- }
- }
- }
- }
- if(!wasUpdating){
- layout.endUpdate();
- }
- this.state = state;
+ switch(target){
+ case "north":
+ return new Roo.NorthLayoutRegion(mgr, config);
+ case "south":
+ return new Roo.SouthLayoutRegion(mgr, config);
+ case "east":
+ return new Roo.EastLayoutRegion(mgr, config);
+ case "west":
+ return new Roo.WestLayoutRegion(mgr, config);
+ case "center":
+ return new Roo.CenterLayoutRegion(mgr, config);
}
- this.layout = layout;
- layout.on("regionresized", this.onRegionResized, this);
- layout.on("regioncollapsed", this.onRegionCollapsed, this);
- layout.on("regionexpanded", this.onRegionExpanded, this);
- },
-
- storeState : function(){
- this.provider.set(this.layout.id+"-layout-state", this.state);
- },
-
- onRegionResized : function(region, newSize){
- this.state[region.getPosition()].size = newSize;
- this.storeState();
- },
-
- onRegionCollapsed : function(region){
- this.state[region.getPosition()].collapsed = true;
- this.storeState();
- },
-
- onRegionExpanded : function(region){
- this.state[region.getPosition()].collapsed = false;
- this.storeState();
+ throw 'Layout region "'+target+'" not supported.';
}
};/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
+
/**
- * @class Roo.ContentPanel
+ * @class Roo.BasicLayoutRegion
* @extends Roo.util.Observable
- * @children Roo.form.Form Roo.JsonView Roo.View
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * 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|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 {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
- * @cfg {Roo.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) [required] 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.)
- * @cfg {String} style Extra style to add to the content panel
- * @cfg {Roo.menu.Menu} menu popup menu
-
- * @constructor
- * Create a new ContentPanel.
- * @param {String/HTMLElement/Roo.Element} el The container element for this panel
- * @param {String/Object} config A string to set only the title or a config object
- * @param {String} content (optional) Set the HTML content for this panel
- * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ * This class represents a lightweight region in a layout manager. This region does not move dom nodes
+ * and does not have a titlebar, tabs or any other features. All it does is size and position
+ * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
*/
-Roo.ContentPanel = function(el, config, content){
-
- /*
- if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
- config = el;
- el = Roo.id();
- }
- if (config && config.parentLayout) {
- el = config.parentLayout.el.createChild();
- }
- */
- if(el.autoCreate){ // xtype is available if this is called from factory
- config = el;
- el = Roo.id();
- }
- this.el = Roo.get(el);
- if(!this.el && config && config.autoCreate){
- if(typeof config.autoCreate == "object"){
- if(!config.autoCreate.id){
- config.autoCreate.id = config.id||el;
- }
- this.el = Roo.DomHelper.append(document.body,
- config.autoCreate, true);
- }else{
- this.el = Roo.DomHelper.append(document.body,
- {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
- }
- }
-
-
- this.closable = false;
- this.loaded = false;
- this.active = false;
- if(typeof config == "string"){
- this.title = config;
- }else{
- Roo.apply(this, config);
- }
-
- if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
- this.wrapEl = this.el.wrap();
- this.toolbar.container = this.el.insertSibling(false, 'before');
- this.toolbar = new Roo.Toolbar(this.toolbar);
- }
-
- // xtype created footer. - not sure if will work as we normally have to render first..
- if (this.footer && !this.footer.el && this.footer.xtype) {
- if (!this.wrapEl) {
- this.wrapEl = this.el.wrap();
- }
-
- this.footer.container = this.wrapEl.createChild();
-
- this.footer = Roo.factory(this.footer, Roo);
+Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
+ this.mgr = mgr;
+ this.position = pos;
+ this.events = {
+ /**
+ * @scope Roo.BasicLayoutRegion
+ */
- }
-
- if(this.resizeEl){
- this.resizeEl = Roo.get(this.resizeEl, true);
- }else{
- this.resizeEl = this.el;
- }
- // handle view.xtype
-
-
-
-
- this.addEvents({
/**
- * @event activate
- * Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
+ * @event beforeremove
+ * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The panel
+ * @param {Object} e The cancel event object
+ */
+ "beforeremove" : true,
+ /**
+ * @event invalidated
+ * Fires when the layout for this region is changed.
+ * @param {Roo.LayoutRegion} this
+ */
+ "invalidated" : true,
+ /**
+ * @event visibilitychange
+ * Fires when this region is shown or hidden
+ * @param {Roo.LayoutRegion} this
+ * @param {Boolean} visibility true or false
+ */
+ "visibilitychange" : true,
+ /**
+ * @event paneladded
+ * Fires when a panel is added.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The panel
+ */
+ "paneladded" : true,
+ /**
+ * @event panelremoved
+ * Fires when a panel is removed.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The panel
*/
- "activate" : true,
+ "panelremoved" : true,
/**
- * @event deactivate
- * Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
+ * @event beforecollapse
+ * Fires when this region before collapse.
+ * @param {Roo.LayoutRegion} this
*/
- "deactivate" : true,
-
+ "beforecollapse" : true,
/**
- * @event resize
- * Fires when this panel is resized if fitToFrame is true.
- * @param {Roo.ContentPanel} this
- * @param {Number} width The width after any component adjustments
- * @param {Number} height The height after any component adjustments
+ * @event collapsed
+ * Fires when this region is collapsed.
+ * @param {Roo.LayoutRegion} this
*/
- "resize" : true,
-
- /**
- * @event render
- * Fires when this tab is created
- * @param {Roo.ContentPanel} this
+ "collapsed" : true,
+ /**
+ * @event expanded
+ * Fires when this region is expanded.
+ * @param {Roo.LayoutRegion} this
*/
- "render" : true
-
-
- });
-
-
-
+ "expanded" : true,
+ /**
+ * @event slideshow
+ * Fires when this region is slid into view.
+ * @param {Roo.LayoutRegion} this
+ */
+ "slideshow" : true,
+ /**
+ * @event slidehide
+ * Fires when this region slides out of view.
+ * @param {Roo.LayoutRegion} this
+ */
+ "slidehide" : true,
+ /**
+ * @event panelactivated
+ * Fires when a panel is activated.
+ * @param {Roo.LayoutRegion} this
+ * @param {Roo.panel.Content} panel The activated panel
+ */
+ "panelactivated" : true,
+ /**
+ * @event resized
+ * Fires when the user resizes this region.
+ * @param {Roo.LayoutRegion} this
+ * @param {Number} newSize The new size (width for east/west, height for north/south)
+ */
+ "resized" : true
+ };
+ /** A collection of panels in this region. @type Roo.util.MixedCollection */
+ this.panels = new Roo.util.MixedCollection();
+ this.panels.getKey = this.getPanelId.createDelegate(this);
+ this.box = null;
+ this.activePanel = null;
+ // ensure listeners are added...
- 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);
+ if (config.listeners || config.events) {
+ Roo.BasicLayoutRegion.superclass.constructor.call(this, {
+ listeners : config.listeners || {},
+ events : config.events || {}
});
}
- content = content || this.content;
- if(content){
- this.setContent(content);
- }
- if(config && config.url){
- this.setUrl(this.url, this.params, this.loadOnce);
- }
-
-
- Roo.ContentPanel.superclass.constructor.call(this);
-
- if (this.view && typeof(this.view.xtype) != 'undefined') {
- this.view.el = this.el.appendChild(document.createElement("div"));
- this.view = Roo.factory(this.view);
- this.view.render && this.view.render(false, '');
+ if(skipConfig !== true){
+ this.applyConfig(config);
}
-
-
- this.fireEvent('render', this);
};
-Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
- tabTip:'',
- setRegion : function(region){
- this.region = region;
- if(region){
- this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
- }else{
- this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
- }
+Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
+ getPanelId : function(p){
+ return p.getId();
},
- /**
- * Returns the toolbar for this Panel if one was configured.
- * @return {Roo.Toolbar}
- */
- getToolbar : function(){
- return this.toolbar;
+ applyConfig : function(config){
+ this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+ this.config = config;
+
},
- setActiveState : function(active){
- this.active = active;
- if(!active){
- this.fireEvent("deactivate", this);
- }else{
- this.fireEvent("activate", this);
- }
- },
- /**
- * Updates this panel's element
- * @param {String} content The new content
- * @param {Boolean} loadScripts (optional) true to look for and process scripts
- */
- setContent : function(content, loadScripts){
- this.el.update(content, loadScripts);
- },
-
- ignoreResize : function(w, h){
- if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
- return true;
- }else{
- this.lastSize = {width: w, height: h};
- return false;
- }
- },
- /**
- * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
- * @return {Roo.UpdateManager} The UpdateManager
- */
- getUpdateManager : function(){
- return this.el.getUpdateManager();
- },
- /**
- * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
- * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
-<pre><code>
-panel.load({
- url: "your-url.php",
- params: {param1: "foo", param2: "bar"}, // or a URL encoded string
- callback: yourFunction,
- scope: yourObject, //(optional scope)
- discardUrl: false,
- nocache: false,
- text: "Loading...",
- timeout: 30,
- scripts: false
-});
-</code></pre>
- * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
- * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
- * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
- * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
- * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
- * @return {Roo.ContentPanel} this
- */
- load : function(){
- var um = this.el.getUpdateManager();
- um.update.apply(um, arguments);
- return this;
- },
-
-
/**
- * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
- * @param {String/Function} url The URL to load the content from or a function to call to get the URL
- * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
- * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
- * @return {Roo.UpdateManager} The UpdateManager
+ * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
+ * the width, for horizontal (north, south) the height.
+ * @param {Number} newSize The new width or height
*/
- setUrl : function(url, params, loadOnce){
- if(this.refreshDelegate){
- this.removeListener("activate", this.refreshDelegate);
- }
- this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
- this.on("activate", this.refreshDelegate);
- return this.el.getUpdateManager();
- },
-
- _handleRefresh : function(url, params, loadOnce){
- if(!loadOnce || !this.loaded){
- var updater = this.el.getUpdateManager();
- updater.update(url, params, this._setLoaded.createDelegate(this));
+ resizeTo : function(newSize){
+ var el = this.el ? this.el :
+ (this.activePanel ? this.activePanel.getEl() : null);
+ if(el){
+ switch(this.position){
+ case "east":
+ case "west":
+ el.setWidth(newSize);
+ this.fireEvent("resized", this, newSize);
+ break;
+ case "north":
+ case "south":
+ el.setHeight(newSize);
+ this.fireEvent("resized", this, newSize);
+ break;
+ }
}
},
- _setLoaded : function(){
- this.loaded = true;
- },
-
- /**
- * Returns this panel's id
- * @return {String}
- */
- getId : function(){
- return this.el.id;
- },
-
- /**
- * Returns this panel's element - used by regiosn to add.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.wrapEl || this.el;
- },
-
- adjustForComponents : function(width, height)
- {
- //Roo.log('adjustForComponents ');
- if(this.resizeEl != this.el){
- width -= this.el.getFrameWidth('lr');
- height -= this.el.getFrameWidth('tb');
- }
- if(this.toolbar){
- var te = this.toolbar.getEl();
- height -= te.getHeight();
- te.setWidth(width);
- }
- if(this.footer){
- var te = this.footer.getEl();
- //Roo.log("footer:" + te.getHeight());
-
- height -= te.getHeight();
- te.setWidth(width);
- }
-
-
- if(this.adjustments){
- width += this.adjustments[0];
- height += this.adjustments[1];
- }
- return {"width": width, "height": height};
+ getBox : function(){
+ return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
},
- setSize : function(width, height){
- if(this.fitToFrame && !this.ignoreResize(width, height)){
- if(this.fitContainer && this.resizeEl != this.el){
- this.el.setSize(width, height);
- }
- var size = this.adjustForComponents(width, height);
- this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
- this.fireEvent('resize', this, size.width, size.height);
- }
+ getMargins : function(){
+ return this.margins;
},
- /**
- * Returns this panel's title
- * @return {String}
- */
- getTitle : function(){
- return this.title;
+ updateBox : function(box){
+ this.box = box;
+ var el = this.activePanel.getEl();
+ el.dom.style.left = box.x + "px";
+ el.dom.style.top = box.y + "px";
+ this.activePanel.setSize(box.width, box.height);
},
/**
- * Set this panel's title
- * @param {String} title
+ * Returns the container element for this region.
+ * @return {Roo.Element}
*/
- setTitle : function(title){
- this.title = title;
- if(this.region){
- this.region.updatePanelTitle(this, title);
- }
+ getEl : function(){
+ return this.activePanel;
},
/**
- * Returns true is this panel was configured to be closable
- * @return {Boolean}
+ * Returns true if this region is currently visible.
+ * @return {Boolean}
*/
- isClosable : function(){
- return this.closable;
- },
-
- beforeSlide : function(){
- this.el.clip();
- this.resizeEl.clip();
+ isVisible : function(){
+ return this.activePanel ? true : false;
},
- afterSlide : function(){
- this.el.unclip();
- this.resizeEl.unclip();
+ setActivePanel : function(panel){
+ panel = this.getPanel(panel);
+ if(this.activePanel && this.activePanel != panel){
+ this.activePanel.setActiveState(false);
+ this.activePanel.getEl().setLeftTop(-10000,-10000);
+ }
+ this.activePanel = panel;
+ panel.setActiveState(true);
+ if(this.box){
+ panel.setSize(this.box.width, this.box.height);
+ }
+ this.fireEvent("panelactivated", this, panel);
+ this.fireEvent("invalidated");
},
/**
- * Force a content refresh from the URL specified in the {@link #setUrl} method.
- * Will fail silently if the {@link #setUrl} method has not been called.
- * This does not activate the panel, just updates its content.
+ * Show the specified panel.
+ * @param {Number/String/panel.Content} panelId The panels index, id or the panel itself
+ * @return {Roo.panel.Content} The shown panel or null
*/
- refresh : function(){
- if(this.refreshDelegate){
- this.loaded = false;
- this.refreshDelegate();
+ showPanel : function(panel){
+ if(panel = this.getPanel(panel)){
+ this.setActivePanel(panel);
}
+ return panel;
},
/**
- * Destroys this panel
+ * Get the active panel for this region.
+ * @return {Roo.panel.Content} The active panel or null
*/
- destroy : function(){
- this.el.removeAllListeners();
- var tempEl = document.createElement("span");
- tempEl.appendChild(this.el.dom);
- tempEl.innerHTML = "";
- this.el.remove();
- this.el = null;
+ getActivePanel : function(){
+ return this.activePanel;
},
/**
- * 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>
-
-layout.addxtype({
- xtype : 'Form',
- items: [ .... ]
- }
-);
-
-</code></pre>
- * @param {Object} cfg Xtype definition of item to add.
+ * Add the passed ContentPanel(s)
+ * @param {panel.Content...} panel The ContentPanel(s) to add (you can pass more than one)
+ * @return {Roo.panel.Content} The panel added (if only one was added)
*/
-
- addxtype : function(cfg) {
- if(cfg.xtype.match(/^UploadCropbox$/)) {
-
- this.cropbox = new Roo.factory(cfg);
-
- this.cropbox.render(this.el);
-
- return this.cropbox;
- }
- // add form..
- if (cfg.xtype.match(/^Form$/)) {
-
- var el;
- //if (this.footer) {
- // el = this.footer.container.insertSibling(false, 'before');
- //} else {
- el = this.el.createChild();
- //}
-
- this.form = new Roo.form.Form(cfg);
-
-
- if ( this.form.allItems.length) {
- this.form.render(el.dom);
+ add : function(panel){
+ if(arguments.length > 1){
+ for(var i = 0, len = arguments.length; i < len; i++) {
+ this.add(arguments[i]);
}
- return this.form;
+ return null;
}
- // should only have one of theses..
- if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
- // views.. should not be just added - used named prop 'view''
-
- cfg.el = this.el.appendChild(document.createElement("div"));
- // factory?
-
- var ret = new Roo.factory(cfg);
-
- ret.render && ret.render(false, ''); // render blank..
- this.view = ret;
- return ret;
+ if(this.hasPanel(panel)){
+ this.showPanel(panel);
+ return panel;
}
- return false;
- }
-});
-
-
-
-
-
-
-
-
-
-
-
-
-/**
- * @class Roo.GridPanel
- * @extends Roo.ContentPanel
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * @constructor
- * Create a new GridPanel.
- * @cfg {Roo.grid.Grid} grid The grid for this panel
- */
-Roo.GridPanel = function(grid, config){
-
- // universal ctor...
- if (typeof(grid.grid) != 'undefined') {
- config = grid;
- grid = config.grid;
- }
- this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
- {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
-
- this.wrapper.dom.appendChild(grid.getGridEl().dom);
-
- Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
-
- if(this.toolbar){
- this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
- }
- // xtype created footer. - not sure if will work as we normally have to render first..
- if (this.footer && !this.footer.el && this.footer.xtype) {
-
- this.footer.container = this.grid.getView().getFooterPanel(true);
- this.footer.dataSource = this.grid.dataSource;
- this.footer = Roo.factory(this.footer, Roo);
-
- }
-
- grid.monitorWindowResize = false; // turn off autosizing
- grid.autoHeight = false;
- grid.autoWidth = false;
- this.grid = grid;
- this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
-};
-
-Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
- getId : function(){
- return this.grid.id;
+ var el = panel.getEl();
+ if(el.dom.parentNode != this.mgr.el.dom){
+ this.mgr.el.dom.appendChild(el.dom);
+ }
+ if(panel.setRegion){
+ panel.setRegion(this);
+ }
+ this.panels.add(panel);
+ el.setStyle("position", "absolute");
+ if(!panel.background){
+ this.setActivePanel(panel);
+ if(this.config.initialSize && this.panels.getCount()==1){
+ this.resizeTo(this.config.initialSize);
+ }
+ }
+ this.fireEvent("paneladded", this, panel);
+ return panel;
},
/**
- * Returns the grid for this panel
- * @return {Roo.grid.Grid}
- */
- getGrid : function(){
- return this.grid;
- },
-
- setSize : function(width, height){
- if(!this.ignoreResize(width, height)){
- var grid = this.grid;
- var size = this.adjustForComponents(width, height);
- grid.getGridEl().setSize(size.width, size.height);
- grid.autoSize();
+ * Returns true if the panel is in this region.
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
+ * @return {Boolean}
+ */
+ hasPanel : function(panel){
+ if(typeof panel == "object"){ // must be panel obj
+ panel = panel.getId();
}
+ return this.getPanel(panel) ? true : false;
},
- beforeSlide : function(){
- this.grid.getView().scroller.clip();
+ /**
+ * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
+ * @param {Boolean} preservePanel Overrides the config preservePanel option
+ * @return {Roo.panel.Content} The panel that was removed
+ */
+ remove : function(panel, preservePanel){
+ panel = this.getPanel(panel);
+ if(!panel){
+ return null;
+ }
+ var e = {};
+ this.fireEvent("beforeremove", this, panel, e);
+ if(e.cancel === true){
+ return null;
+ }
+ var panelId = panel.getId();
+ this.panels.removeKey(panelId);
+ return panel;
},
- afterSlide : function(){
- this.grid.getView().scroller.unclip();
+ /**
+ * Returns the panel specified or null if it's not in this region.
+ * @param {Number/String/panel.Content} panel The panels index, id or the panel itself
+ * @return {Roo.panel.Content}
+ */
+ getPanel : function(id){
+ if(typeof id == "object"){ // must be panel obj
+ return id;
+ }
+ return this.panels.get(id);
},
- destroy : function(){
- this.grid.destroy();
- delete this.grid;
- Roo.GridPanel.superclass.destroy.call(this);
+ /**
+ * Returns this regions position (north/south/east/west/center).
+ * @return {String}
+ */
+ getPosition: function(){
+ return this.position;
}
-});
-
-
-/**
- * @class Roo.NestedLayoutPanel
- * @extends Roo.ContentPanel
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * @cfg {Roo.BorderLayout} layout [required] The layout for this panel
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
*
- *
- * @constructor
- * Create a new NestedLayoutPanel.
- *
- *
- * @param {Roo.BorderLayout} layout [required] The layout for this panel
- * @param {String/Object} config A string to set only the title or a config object
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
*/
-Roo.NestedLayoutPanel = function(layout, config)
-{
- // construct with only one argument..
- /* FIXME - implement nicer consturctors
- if (layout.layout) {
- config = layout;
- layout = config.layout;
- delete config.layout;
- }
- if (layout.xtype && !layout.getEl) {
- // then layout needs constructing..
- layout = Roo.factory(layout, Roo);
+
+/**
+ * @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|bottom) "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);
+ var dh = Roo.DomHelper;
+ /** This region's container element
+ * @type Roo.Element */
+ this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
+ /** This region's title element
+ * @type Roo.Element */
+
+ this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
+ {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: " "},
+ {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
+ ]}, true);
+ this.titleEl.enableDisplayMode();
+ /** This region's title text element
+ * @type HTMLElement */
+ this.titleTextEl = this.titleEl.dom.firstChild;
+ this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
+ this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
+ this.closeBtn.enableDisplayMode();
+ this.closeBtn.on("click", this.closeClicked, this);
+ this.closeBtn.hide();
+
+ this.createBody(config);
+ this.visible = true;
+ this.collapsed = false;
+
+ if(config.hideWhenEmpty){
+ this.hide();
+ this.on("paneladded", this.validateVisibility, this);
+ this.on("panelremoved", this.validateVisibility, this);
}
- */
-
-
- Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
-
- layout.monitorWindowResize = false; // turn off autosizing
- this.layout = layout;
- this.layout.getEl().addClass("x-layout-nested-layout");
-
-
-
-
+ this.applyConfig(config);
};
-Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
- layout : false,
+ createBody : function(){
+ /** This region's body element
+ * @type Roo.Element */
+ this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
+ },
- setSize : function(width, height){
- if(!this.ignoreResize(width, height)){
- var size = this.adjustForComponents(width, height);
- var el = this.layout.getEl();
- el.setSize(size.width, size.height);
- var touch = el.dom.offsetWidth;
- this.layout.layout();
- // ie requires a double layout on the first pass
- if(Roo.isIE && !this.initialized){
- this.initialized = true;
- this.layout.layout();
+ applyConfig : function(c){
+ if(c.collapsible && this.position != "center" && !this.collapsedEl){
+ var dh = Roo.DomHelper;
+ if(c.titlebar !== false){
+ this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
+ this.collapseBtn.on("click", this.collapse, this);
+ this.collapseBtn.enableDisplayMode();
+
+ if(c.showPin === true || this.showPin){
+ this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
+ this.stickBtn.enableDisplayMode();
+ this.stickBtn.on("click", this.expand, this);
+ this.stickBtn.hide();
+ }
+ }
+ /** This region's collapsed element
+ * @type Roo.Element */
+ this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
+ {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
+ ]}, true);
+ if(c.floatable !== false){
+ this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
+ this.collapsedEl.on("click", this.collapseClick, this);
}
+
+ if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
+ this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
+ id: "message", unselectable: "on", style:{"float":"left"}});
+ this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
+ }
+ this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
+ this.expandBtn.on("click", this.expand, this);
}
- },
-
- // activate all subpanels if not currently active..
-
- setActiveState : function(active){
- this.active = active;
- if(!active){
- this.fireEvent("deactivate", this);
- return;
+ if(this.collapseBtn){
+ this.collapseBtn.setVisible(c.collapsible == true);
}
-
- this.fireEvent("activate", this);
- // not sure if this should happen before or after..
- if (!this.layout) {
- return; // should not happen..
+ this.cmargins = c.cmargins || this.cmargins ||
+ (this.position == "west" || this.position == "east" ?
+ {top: 0, left: 2, right:2, bottom: 0} :
+ {top: 2, left: 0, right:0, bottom: 2});
+ this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+ this.bottomTabs = c.tabPosition != "top";
+ this.autoScroll = c.autoScroll || false;
+ if(this.autoScroll){
+ this.bodyEl.setStyle("overflow", "auto");
+ }else{
+ this.bodyEl.setStyle("overflow", "hidden");
}
- var reg = false;
- for (var r in this.layout.regions) {
- reg = this.layout.getRegion(r);
- if (reg.getActivePanel()) {
- //reg.showPanel(reg.getActivePanel()); // force it to activate..
- reg.setActivePanel(reg.getActivePanel());
- continue;
- }
- if (!reg.panels.length) {
- continue;
+ //if(c.titlebar !== false){
+ if((!c.titlebar && !c.title) || c.titlebar === false){
+ this.titleEl.hide();
+ }else{
+ this.titleEl.show();
+ if(c.title){
+ this.titleTextEl.innerHTML = c.title;
+ }
}
- reg.showPanel(reg.getPanel(0));
+ //}
+ this.duration = c.duration || .30;
+ this.slideDuration = c.slideDuration || .45;
+ this.config = c;
+ if(c.collapsed){
+ this.collapse(true);
+ }
+ if(c.hidden){
+ this.hide();
}
-
-
-
-
},
-
/**
- * Returns the nested BorderLayout for this panel
- * @return {Roo.BorderLayout}
+ * Returns true if this region is currently visible.
+ * @return {Boolean}
*/
- getLayout : function(){
- return this.layout;
+ isVisible : function(){
+ return this.visible;
},
-
- /**
- * Adds a xtype elements to the layout of the nested panel
- * <pre><code>
-
-panel.addxtype({
- xtype : 'ContentPanel',
- region: 'west',
- items: [ .... ]
- }
-);
-panel.addxtype({
- xtype : 'NestedLayoutPanel',
- region: 'west',
- layout: {
- center: { },
- west: { }
- },
- items : [ ... list of content panels or nested layout panels.. ]
- }
-);
-</code></pre>
- * @param {Object} cfg Xtype definition of item to add.
+ /**
+ * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
+ * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&#160;")
*/
- addxtype : function(cfg) {
- return this.layout.addxtype(cfg);
-
- }
-});
-
-Roo.ScrollPanel = function(el, config, content){
- config = config || {};
- config.fitToFrame = true;
- Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
-
- this.el.dom.style.overflow = "hidden";
- var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
- this.el.removeClass("x-layout-inactive-content");
- this.el.on("mousewheel", this.onWheel, this);
-
- var up = wrap.createChild({cls: "x-scroller-up", html: " "}, this.el.dom);
- var down = wrap.createChild({cls: "x-scroller-down", html: " "});
- up.unselectable(); down.unselectable();
- up.on("click", this.scrollUp, this);
- down.on("click", this.scrollDown, this);
- up.addClassOnOver("x-scroller-btn-over");
- down.addClassOnOver("x-scroller-btn-over");
- up.addClassOnClick("x-scroller-btn-click");
- down.addClassOnClick("x-scroller-btn-click");
- this.adjustments = [0, -(up.getHeight() + down.getHeight())];
-
- this.resizeEl = this.el;
- this.el = wrap; this.up = up; this.down = down;
-};
-
-Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
- increment : 100,
- wheelIncrement : 5,
- scrollUp : function(){
- this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
+ setCollapsedTitle : function(title){
+ title = title || " ";
+ if(this.collapsedTitleTextEl){
+ this.collapsedTitleTextEl.innerHTML = title;
+ }
},
- scrollDown : function(){
- this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
+ getBox : function(){
+ var b;
+ if(!this.collapsed){
+ b = this.el.getBox(false, true);
+ }else{
+ b = this.collapsedEl.getBox(false, true);
+ }
+ return b;
},
- afterScroll : function(){
- var el = this.resizeEl;
- var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
- this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
- this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ getMargins : function(){
+ return this.collapsed ? this.cmargins : this.margins;
},
- setSize : function(){
- Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
- this.afterScroll();
+ highlight : function(){
+ this.el.addClass("x-layout-panel-dragover");
},
- onWheel : function(e){
- var d = e.getWheelDelta();
- this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
- this.afterScroll();
- e.stopEvent();
+ unhighlight : function(){
+ this.el.removeClass("x-layout-panel-dragover");
},
- setContent : function(content, loadScripts){
- this.resizeEl.update(content, loadScripts);
- }
-
-});
-
-
-
-/**
- * @class Roo.TreePanel
- * @extends Roo.ContentPanel
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * Treepanel component
- *
- * @constructor
- * Create a new TreePanel. - defaults to fit/scoll contents.
- * @param {String/Object} config A string to set only the panel's title, or a config object
- */
-Roo.TreePanel = function(config){
- var el = config.el;
- var tree = config.tree;
- delete config.tree;
- delete config.el; // hopefull!
-
- // wrapper for IE7 strict & safari scroll issue
-
- var treeEl = el.createChild();
- config.resizeEl = treeEl;
-
-
-
- Roo.TreePanel.superclass.constructor.call(this, el, config);
-
-
- this.tree = new Roo.tree.TreePanel(treeEl , tree);
- //console.log(tree);
- this.on('activate', function()
- {
- if (this.tree.rendered) {
- return;
+ updateBox : function(box){
+ this.box = box;
+ if(!this.collapsed){
+ this.el.dom.style.left = box.x + "px";
+ this.el.dom.style.top = box.y + "px";
+ this.updateBody(box.width, box.height);
+ }else{
+ this.collapsedEl.dom.style.left = box.x + "px";
+ this.collapsedEl.dom.style.top = box.y + "px";
+ this.collapsedEl.setSize(box.width, box.height);
}
- //console.log('render tree');
- this.tree.render();
- });
- // this should not be needed.. - it's actually the 'el' that resizes?
- // actuall it breaks the containerScroll - dragging nodes auto scroll at top
-
- //this.on('resize', function (cp, w, h) {
- // this.tree.innerCt.setWidth(w);
- // this.tree.innerCt.setHeight(h);
- // //this.tree.innerCt.setStyle('overflow-y', 'auto');
- //});
-
-
-
-};
-
-Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
- fitToFrame : true,
- autoScroll : true,
- /*
- * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
- */
- tree : false
-
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.ReaderLayout
- * @extends Roo.BorderLayout
- * This is a pre-built layout that represents a classic, 5-pane application. It consists of a header, a primary
- * center region containing two nested regions (a top one for a list view and one for item preview below),
- * and regions on either side that can be used for navigation, application commands, informational displays, etc.
- * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
- * expedites the setup of the overall layout and regions for this common application style.
- * Example:
- <pre><code>
-var reader = new Roo.ReaderLayout();
-var CP = Roo.ContentPanel; // shortcut for adding
-
-reader.beginUpdate();
-reader.add("north", new CP("north", "North"));
-reader.add("west", new CP("west", {title: "West"}));
-reader.add("east", new CP("east", {title: "East"}));
-
-reader.regions.listView.add(new CP("listView", "List"));
-reader.regions.preview.add(new CP("preview", "Preview"));
-reader.endUpdate();
-</code></pre>
-* @constructor
-* Create a new ReaderLayout
-* @param {Object} config Configuration options
-* @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
-* document.body if omitted)
-*/
-Roo.ReaderLayout = function(config, renderTo){
- var c = config || {size:{}};
- Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
- north: c.north !== false ? Roo.apply({
- split:false,
- initialSize: 32,
- titlebar: false
- }, c.north) : false,
- west: c.west !== false ? Roo.apply({
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- animate: true,
- margins:{left:5,right:0,bottom:5,top:5},
- cmargins:{left:5,right:5,bottom:5,top:5}
- }, c.west) : false,
- east: c.east !== false ? Roo.apply({
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- animate: true,
- margins:{left:0,right:5,bottom:5,top:5},
- cmargins:{left:5,right:5,bottom:5,top:5}
- }, c.east) : false,
- center: Roo.apply({
- tabPosition: 'top',
- autoScroll:false,
- closeOnTab: true,
- titlebar:false,
- margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
- }, c.center)
- });
+ if(this.tabs){
+ this.tabs.autoSizeTabs();
+ }
+ },
- this.el.addClass('x-reader');
+ updateBody : function(w, h){
+ if(w !== null){
+ this.el.setWidth(w);
+ w -= this.el.getBorderWidth("rl");
+ if(this.config.adjustments){
+ w += this.config.adjustments[0];
+ }
+ }
+ if(h !== null){
+ this.el.setHeight(h);
+ h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
+ h -= this.el.getBorderWidth("tb");
+ if(this.config.adjustments){
+ h += this.config.adjustments[1];
+ }
+ this.bodyEl.setHeight(h);
+ if(this.tabs){
+ h = this.tabs.syncHeight(h);
+ }
+ }
+ if(this.panelSize){
+ w = w !== null ? w : this.panelSize.width;
+ h = h !== null ? h : this.panelSize.height;
+ }
+ if(this.activePanel){
+ var el = this.activePanel.getEl();
+ w = w !== null ? w : el.getWidth();
+ h = h !== null ? h : el.getHeight();
+ this.panelSize = {width: w, height: h};
+ this.activePanel.setSize(w, h);
+ }
+ if(Roo.isIE && this.tabs){
+ this.tabs.el.repaint();
+ }
+ },
- this.beginUpdate();
+ /**
+ * Returns the container element for this region.
+ * @return {Roo.Element}
+ */
+ getEl : function(){
+ return this.el;
+ },
- var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
- south: c.preview !== false ? Roo.apply({
- split:true,
- initialSize: 200,
- minSize: 100,
- autoScroll:true,
- collapsible:true,
- titlebar: true,
- cmargins:{top:5,left:0, right:0, bottom:0}
- }, c.preview) : false,
- center: Roo.apply({
- autoScroll:false,
- titlebar:false,
- minHeight:200
- }, c.listView)
- });
- this.add('center', new Roo.NestedLayoutPanel(inner,
- Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
+ /**
+ * Hides this region.
+ */
+ hide : function(){
+ if(!this.collapsed){
+ this.el.dom.style.left = "-2000px";
+ this.el.hide();
+ }else{
+ this.collapsedEl.dom.style.left = "-2000px";
+ this.collapsedEl.hide();
+ }
+ this.visible = false;
+ this.fireEvent("visibilitychange", this, false);
+ },
- this.endUpdate();
+ /**
+ * Shows this region if it was previously hidden.
+ */
+ show : function(){
+ if(!this.collapsed){
+ this.el.show();
+ }else{
+ this.collapsedEl.show();
+ }
+ this.visible = true;
+ this.fireEvent("visibilitychange", this, true);
+ },
- this.regions.preview = inner.getRegion('south');
- this.regions.listView = inner.getRegion('center');
-};
+ closeClicked : function(){
+ if(this.activePanel){
+ this.remove(this.activePanel);
+ }
+ },
-Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.grid.Grid
- * @extends Roo.util.Observable
- * This class represents the primary interface of a component based grid control.
- * <br><br>Usage:<pre><code>
- var grid = new Roo.grid.Grid("my-container-id", {
- ds: myDataStore,
- cm: myColModel,
- selModel: mySelectionModel,
- autoSizeColumns: true,
- monitorWindowResize: false,
- trackMouseOver: true
- });
- // set any options
- grid.render();
- * </code></pre>
- * <b>Common Problems:</b><br/>
- * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
- * element will correct this<br/>
- * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
- * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
- * are unpredictable.<br/>
- * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
- * grid to calculate dimensions/offsets.<br/>
- * @constructor
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid.
- */
-Roo.grid.Grid = function(container, config){
- // initialize the container
- this.container = Roo.get(container);
- this.container.update("");
- this.container.setStyle("overflow", "hidden");
- this.container.addClass('x-grid-container');
+ collapseClick : function(e){
+ if(this.isSlid){
+ e.stopPropagation();
+ this.slideIn();
+ }else{
+ e.stopPropagation();
+ this.slideOut();
+ }
+ },
- this.id = this.container.id;
+ /**
+ * Collapses this region.
+ * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+ */
+ collapse : function(skipAnim, skipCheck){
+ if(this.collapsed) {
+ return;
+ }
+
+ if(skipCheck || this.fireEvent("beforecollapse", this) != false){
+
+ this.collapsed = true;
+ if(this.split){
+ this.split.el.hide();
+ }
+ if(this.config.animate && skipAnim !== true){
+ this.fireEvent("invalidated", this);
+ this.animateCollapse();
+ }else{
+ this.el.setLocation(-20000,-20000);
+ this.el.hide();
+ this.collapsedEl.show();
+ this.fireEvent("collapsed", this);
+ this.fireEvent("invalidated", this);
+ }
+ }
+
+ },
- Roo.apply(this, config);
- // check and correct shorthanded configs
- if(this.ds){
- this.dataSource = this.ds;
- delete this.ds;
- }
- if(this.cm){
- this.colModel = this.cm;
- delete this.cm;
- }
- if(this.sm){
- this.selModel = this.sm;
- delete this.sm;
- }
+ animateCollapse : function(){
+ // overridden
+ },
- if (this.selModel) {
- this.selModel = Roo.factory(this.selModel, Roo.grid);
- this.sm = this.selModel;
- this.sm.xmodule = this.xmodule || false;
- }
- if (typeof(this.colModel.config) == 'undefined') {
- this.colModel = new Roo.grid.ColumnModel(this.colModel);
- this.cm = this.colModel;
- this.cm.xmodule = this.xmodule || false;
- }
- if (this.dataSource) {
- this.dataSource= Roo.factory(this.dataSource, Roo.data);
- this.ds = this.dataSource;
- this.ds.xmodule = this.xmodule || false;
-
- }
-
-
-
- if(this.width){
- this.container.setWidth(this.width);
- }
+ /**
+ * Expands this region if it was previously collapsed.
+ * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
+ * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
+ */
+ expand : function(e, skipAnim){
+ if(e) {
+ e.stopPropagation();
+ }
+ if(!this.collapsed || this.el.hasActiveFx()) {
+ return;
+ }
+ if(this.isSlid){
+ this.afterSlideIn();
+ skipAnim = true;
+ }
+ this.collapsed = false;
+ if(this.config.animate && skipAnim !== true){
+ this.animateExpand();
+ }else{
+ this.el.show();
+ if(this.split){
+ this.split.el.show();
+ }
+ this.collapsedEl.setLocation(-2000,-2000);
+ this.collapsedEl.hide();
+ this.fireEvent("invalidated", this);
+ this.fireEvent("expanded", this);
+ }
+ },
- if(this.height){
- this.container.setHeight(this.height);
- }
- /** @private */
- this.addEvents({
- // raw events
- /**
- * @event click
- * The raw click event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "click" : true,
- /**
- * @event dblclick
- * The raw dblclick event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "dblclick" : true,
- /**
- * @event contextmenu
- * The raw contextmenu event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "contextmenu" : true,
- /**
- * @event mousedown
- * The raw mousedown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mousedown" : true,
- /**
- * @event mouseup
- * The raw mouseup event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseup" : true,
- /**
- * @event mouseover
- * The raw mouseover event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseover" : true,
- /**
- * @event mouseout
- * The raw mouseout event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseout" : true,
- /**
- * @event keypress
- * The raw keypress event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keypress" : true,
- /**
- * @event keydown
- * The raw keydown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keydown" : true,
+ animateExpand : function(){
+ // overridden
+ },
- // custom events
+ initTabs : function()
+ {
+ this.bodyEl.setStyle("overflow", "hidden");
+ var ts = new Roo.panel.Tab(
+ this.bodyEl.dom,
+ {
+ tabPosition: this.bottomTabs ? 'bottom' : 'top',
+ disableTooltips: this.config.disableTabTips,
+ toolbar : this.config.toolbar
+ }
+ );
+ if(this.config.hideTabs){
+ ts.stripWrap.setDisplayed(false);
+ }
+ this.tabs = ts;
+ ts.resizeTabs = this.config.resizeTabs === true;
+ ts.minTabWidth = this.config.minTabWidth || 40;
+ ts.maxTabWidth = this.config.maxTabWidth || 250;
+ ts.preferredTabWidth = this.config.preferredTabWidth || 150;
+ ts.monitorResize = false;
+ ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+ ts.bodyEl.addClass('x-layout-tabs-body');
+ this.panels.each(this.initPanelAsTab, this);
+ },
- /**
- * @event cellclick
- * Fires when a cell is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "cellclick" : true,
- /**
- * @event celldblclick
- * Fires when a cell is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "celldblclick" : true,
- /**
- * @event rowclick
- * Fires when a row is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowclick" : true,
- /**
- * @event rowdblclick
- * Fires when a row is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowdblclick" : true,
- /**
- * @event headerclick
- * Fires when a header is clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerclick" : true,
- /**
- * @event headerdblclick
- * Fires when a header cell is double clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerdblclick" : true,
- /**
- * @event rowcontextmenu
- * Fires when a row is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowcontextmenu" : true,
- /**
- * @event cellcontextmenu
- * Fires when a cell is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} cellIndex
- * @param {Roo.EventObject} e
- */
- "cellcontextmenu" : true,
- /**
- * @event headercontextmenu
- * Fires when a header is right clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headercontextmenu" : true,
- /**
- * @event bodyscroll
- * Fires when the body element is scrolled
- * @param {Number} scrollLeft
- * @param {Number} scrollTop
- */
- "bodyscroll" : true,
- /**
- * @event columnresize
- * Fires when the user resizes a column
- * @param {Number} columnIndex
- * @param {Number} newSize
- */
- "columnresize" : true,
- /**
- * @event columnmove
- * Fires when the user moves a column
- * @param {Number} oldIndex
- * @param {Number} newIndex
- */
- "columnmove" : true,
- /**
- * @event startdrag
- * Fires when row(s) start being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "startdrag" : true,
- /**
- * @event enddrag
- * Fires when a drag operation is complete
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "enddrag" : true,
- /**
- * @event dragdrop
- * Fires when dragged row(s) are dropped on a valid DD target
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragdrop" : true,
- /**
- * @event dragover
- * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragover" : true,
- /**
- * @event dragenter
- * Fires when the dragged row(s) first cross another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragenter" : true,
- /**
- * @event dragout
- * Fires when the dragged row(s) leave another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragout" : true,
- /**
- * @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.
- */
- 'rowclass' : true,
+ initPanelAsTab : function(panel){
+ var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
+ this.config.closeOnTab && panel.isClosable());
+ if(panel.tabTip !== undefined){
+ ti.setTooltip(panel.tabTip);
+ }
+ ti.on("activate", function(){
+ this.setActivePanel(panel);
+ }, this);
+ if(this.config.closeOnTab){
+ ti.on("beforeclose", function(t, e){
+ e.cancel = true;
+ this.remove(panel);
+ }, this);
+ }
+ return ti;
+ },
+
+ updatePanelTitle : function(panel, title){
+ if(this.activePanel == panel){
+ this.updateTitle(title);
+ }
+ if(this.tabs){
+ var ti = this.tabs.getTab(panel.getEl().id);
+ ti.setText(title);
+ if(panel.tabTip !== undefined){
+ ti.setTooltip(panel.tabTip);
+ }
+ }
+ },
- /**
- * @event render
- * Fires when the grid is rendered
- * @param {Grid} grid
- */
- 'render' : true
- });
+ updateTitle : function(title){
+ if(this.titleTextEl && !this.config.title){
+ this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : " ");
+ }
+ },
+
+ setActivePanel : function(panel){
+ panel = this.getPanel(panel);
+ if(this.activePanel && this.activePanel != panel){
+ this.activePanel.setActiveState(false);
+ }
+ this.activePanel = panel;
+ panel.setActiveState(true);
+ if(this.panelSize){
+ panel.setSize(this.panelSize.width, this.panelSize.height);
+ }
+ if(this.closeBtn){
+ this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
+ }
+ this.updateTitle(panel.getTitle());
+ if(this.tabs){
+ this.fireEvent("invalidated", this);
+ }
+ this.fireEvent("panelactivated", this, panel);
+ },
- Roo.grid.Grid.superclass.constructor.call(this);
-};
-Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
-
/**
- * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
- */
- /**
- * @cfg {Roo.grid.GridView} view The view that renders the grid (default = Roo.grid.GridView)
- */
- /**
- * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
- */
- /**
- * @cfg {Roo.data.Store} ds The data store for the grid
- */
- /**
- * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
- */
-
- /**
- * @cfg {Roo.PagingToolbar} footer the paging toolbar
- */
-
- /**
- * @cfg {String} ddGroup - drag drop group.
- */
- /**
- * @cfg {String} dragGroup - drag group (?? not sure if needed.)
+ * Shows the specified panel.
+ * @param {Number/String/panel.Content} panelId The panel's index, id or the panel itself
+ * @return {Roo.panel.Content} The shown panel, or null if a panel could not be found from panelId
*/
+ showPanel : function(panel)
+ {
+ panel = this.getPanel(panel);
+ if(panel){
+ if(this.tabs){
+ var tab = this.tabs.getTab(panel.getEl().id);
+ if(tab.isHidden()){
+ this.tabs.unhideTab(tab.id);
+ }
+ tab.activate();
+ }else{
+ this.setActivePanel(panel);
+ }
+ }
+ return panel;
+ },
/**
- * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
+ * Get the active panel for this region.
+ * @return {Roo.panel.Content} The active panel or null
*/
- minColumnWidth : 25,
+ getActivePanel : function(){
+ return this.activePanel;
+ },
+
+ validateVisibility : function(){
+ if(this.panels.getCount() < 1){
+ this.updateTitle(" ");
+ this.closeBtn.hide();
+ this.hide();
+ }else{
+ if(!this.isVisible()){
+ this.show();
+ }
+ }
+ },
/**
- * @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.
+ * Adds the passed ContentPanel(s) to this region.
+ * @param {panel.Content...} panel The ContentPanel(s) to add (you can pass more than one)
+ * @return {Roo.panel.Content} The panel added (if only one was added; null otherwise)
*/
- autoSizeColumns : false,
+ add : function(panel){
+ if(arguments.length > 1){
+ for(var i = 0, len = arguments.length; i < len; i++) {
+ this.add(arguments[i]);
+ }
+ return null;
+ }
+ if(this.hasPanel(panel)){
+ this.showPanel(panel);
+ return panel;
+ }
+ panel.setRegion(this);
+ this.panels.add(panel);
+ if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+ this.bodyEl.dom.appendChild(panel.getEl().dom);
+ if(panel.background !== true){
+ this.setActivePanel(panel);
+ }
+ this.fireEvent("paneladded", this, panel);
+ return panel;
+ }
+ if(!this.tabs){
+ this.initTabs();
+ }else{
+ this.initPanelAsTab(panel);
+ }
+ if(panel.background !== true){
+ this.tabs.activate(panel.getEl().id);
+ }
+ this.fireEvent("paneladded", this, panel);
+ return panel;
+ },
/**
- * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
+ * Hides the tab for the specified panel.
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
*/
- autoSizeHeaders : true,
+ hidePanel : function(panel){
+ if(this.tabs && (panel = this.getPanel(panel))){
+ this.tabs.hideTab(panel.getEl().id);
+ }
+ },
/**
- * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+ * Unhides the tab for a previously hidden panel.
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
*/
- monitorWindowResize : true,
+ unhidePanel : function(panel){
+ if(this.tabs && (panel = this.getPanel(panel))){
+ this.tabs.unhideTab(panel.getEl().id);
+ }
+ },
+
+ clearPanels : function(){
+ while(this.panels.getCount() > 0){
+ this.remove(this.panels.first());
+ }
+ },
/**
- * @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).
+ * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+ * @param {Number/String/panel.Content} panel The panel's index, id or the panel itself
+ * @param {Boolean} preservePanel Overrides the config preservePanel option
+ * @return {Roo.panel.Content} The panel that was removed
*/
- maxRowsToMeasure : 0,
+ remove : function(panel, preservePanel){
+ panel = this.getPanel(panel);
+ if(!panel){
+ return null;
+ }
+ var e = {};
+ this.fireEvent("beforeremove", this, panel, e);
+ if(e.cancel === true){
+ return null;
+ }
+ preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
+ var panelId = panel.getId();
+ this.panels.removeKey(panelId);
+ if(preservePanel){
+ document.body.appendChild(panel.getEl().dom);
+ }
+ if(this.tabs){
+ this.tabs.removeTab(panel.getEl().id);
+ }else if (!preservePanel){
+ this.bodyEl.dom.removeChild(panel.getEl().dom);
+ }
+ if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
+ var p = this.panels.first();
+ var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
+ tempEl.appendChild(p.getEl().dom);
+ this.bodyEl.update("");
+ this.bodyEl.dom.appendChild(p.getEl().dom);
+ tempEl = null;
+ this.updateTitle(p.getTitle());
+ this.tabs = null;
+ this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+ this.setActivePanel(p);
+ }
+ panel.setRegion(null);
+ if(this.activePanel == panel){
+ this.activePanel = null;
+ }
+ if(this.config.autoDestroy !== false && preservePanel !== true){
+ try{panel.destroy();}catch(e){}
+ }
+ this.fireEvent("panelremoved", this, panel);
+ return panel;
+ },
/**
- * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+ * Returns the TabPanel component used by this region
+ * @return {Roo.panel.Tab}
*/
- trackMouseOver : true,
+ getTabs : function(){
+ return this.tabs;
+ },
- /**
- * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
- */
- /**
- * @cfg {Boolean} enableDrop True to enable drop of elements. 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,
+ createTool : function(parentEl, className){
+ var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
+ children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: " "}]}, true);
+ btn.addClassOnOver("x-layout-tools-button-over");
+ return btn;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+
+/**
+ * @class Roo.SplitLayoutRegion
+ * @extends Roo.LayoutRegion
+ * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ */
+Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
+ this.cursor = cursor;
+ Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+};
+
+Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
+ splitTip : "Drag to resize.",
+ collapsibleSplitTip : "Drag to resize. Double click to hide.",
+ useSplitTips : false,
+
+ applyConfig : function(config){
+ Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+ if(config.split){
+ if(!this.split){
+ var splitEl = Roo.DomHelper.append(this.mgr.el.dom,
+ {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: " "});
+ /** The SplitBar for this region
+ * @type Roo.SplitBar */
+ this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
+ this.split.on("moved", this.onSplitMove, this);
+ this.split.useShim = config.useShim === true;
+ this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
+ if(this.useSplitTips){
+ this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
+ }
+ if(config.collapsible){
+ this.split.el.on("dblclick", this.collapse, this);
+ }
+ }
+ if(typeof config.minSize != "undefined"){
+ this.split.minSize = config.minSize;
+ }
+ if(typeof config.maxSize != "undefined"){
+ this.split.maxSize = config.maxSize;
+ }
+ if(config.hideWhenEmpty || config.hidden || config.collapsed){
+ this.hideSplitter();
+ }
+ }
+ },
+
+ getHMaxSize : function(){
+ var cmax = this.config.maxSize || 10000;
+ var center = this.mgr.getRegion("center");
+ return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+ },
+
+ getVMaxSize : function(){
+ var cmax = this.config.maxSize || 10000;
+ var center = this.mgr.getRegion("center");
+ return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
+ },
+
+ onSplitMove : function(split, newSize){
+ this.fireEvent("resized", this, newSize);
+ },
- /**
- * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
- */
- enableColumnMove : true,
+ /**
+ * Returns the {@link Roo.SplitBar} for this region.
+ * @return {Roo.SplitBar}
+ */
+ getSplitBar : function(){
+ return this.split;
+ },
- /**
- * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
- */
- enableColumnHide : true,
+ hide : function(){
+ this.hideSplitter();
+ Roo.SplitLayoutRegion.superclass.hide.call(this);
+ },
+
+ hideSplitter : function(){
+ if(this.split){
+ this.split.el.setLocation(-2000,-2000);
+ this.split.el.hide();
+ }
+ },
+
+ show : function(){
+ if(this.split){
+ this.split.el.show();
+ }
+ Roo.SplitLayoutRegion.superclass.show.call(this);
+ },
- /**
- * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
- */
- enableRowHeightSync : false,
+ beforeSlide: function(){
+ if(Roo.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.clip();
+ if(this.tabs) {
+ this.tabs.bodyEl.clip();
+ }
+ if(this.activePanel){
+ this.activePanel.getEl().clip();
+
+ if(this.activePanel.beforeSlide){
+ this.activePanel.beforeSlide();
+ }
+ }
+ }
+ },
- /**
- * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
- */
- stripeRows : true,
+ afterSlide : function(){
+ if(Roo.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.unclip();
+ if(this.tabs) {
+ this.tabs.bodyEl.unclip();
+ }
+ if(this.activePanel){
+ this.activePanel.getEl().unclip();
+ if(this.activePanel.afterSlide){
+ this.activePanel.afterSlide();
+ }
+ }
+ }
+ },
+
+ initAutoHide : function(){
+ if(this.autoHide !== false){
+ if(!this.autoHideHd){
+ var st = new Roo.util.DelayedTask(this.slideIn, this);
+ this.autoHideHd = {
+ "mouseout": function(e){
+ if(!e.within(this.el, true)){
+ st.delay(500);
+ }
+ },
+ "mouseover" : function(e){
+ st.cancel();
+ },
+ scope : this
+ };
+ }
+ this.el.on(this.autoHideHd);
+ }
+ },
+
+ clearAutoHide : function(){
+ if(this.autoHide !== false){
+ this.el.un("mouseout", this.autoHideHd.mouseout);
+ this.el.un("mouseover", this.autoHideHd.mouseover);
+ }
+ },
+
+ clearMonitor : function(){
+ Roo.get(document).un("click", this.slideInIf, this);
+ },
+
+ // these names are backwards but not changed for compat
+ slideOut : function(){
+ if(this.isSlid || this.el.hasActiveFx()){
+ return;
+ }
+ this.isSlid = true;
+ if(this.collapseBtn){
+ this.collapseBtn.hide();
+ }
+ this.closeBtnState = this.closeBtn.getStyle('display');
+ this.closeBtn.hide();
+ if(this.stickBtn){
+ this.stickBtn.show();
+ }
+ this.el.show();
+ this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
+ this.beforeSlide();
+ this.el.setStyle("z-index", 10001);
+ this.el.slideIn(this.getSlideAnchor(), {
+ callback: function(){
+ this.afterSlide();
+ this.initAutoHide();
+ Roo.get(document).on("click", this.slideInIf, this);
+ this.fireEvent("slideshow", this);
+ },
+ scope: this,
+ block: true
+ });
+ },
+
+ afterSlideIn : function(){
+ this.clearAutoHide();
+ this.isSlid = false;
+ this.clearMonitor();
+ this.el.setStyle("z-index", "");
+ if(this.collapseBtn){
+ this.collapseBtn.show();
+ }
+ this.closeBtn.setStyle('display', this.closeBtnState);
+ if(this.stickBtn){
+ this.stickBtn.hide();
+ }
+ this.fireEvent("slidehide", this);
+ },
+
+ slideIn : function(cb){
+ if(!this.isSlid || this.el.hasActiveFx()){
+ Roo.callback(cb);
+ return;
+ }
+ this.isSlid = false;
+ this.beforeSlide();
+ this.el.slideOut(this.getSlideAnchor(), {
+ callback: function(){
+ this.el.setLeftTop(-10000, -10000);
+ this.afterSlide();
+ this.afterSlideIn();
+ Roo.callback(cb);
+ },
+ scope: this,
+ block: true
+ });
+ },
- /**
- * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
- */
- autoHeight : false,
+ slideInIf : function(e){
+ if(!e.within(this.el)){
+ this.slideIn();
+ }
+ },
+
+ animateCollapse : function(){
+ this.beforeSlide();
+ this.el.setStyle("z-index", 20000);
+ var anchor = this.getSlideAnchor();
+ this.el.slideOut(anchor, {
+ callback : function(){
+ this.el.setStyle("z-index", "");
+ this.collapsedEl.slideIn(anchor, {duration:.3});
+ this.afterSlide();
+ this.el.setLocation(-10000,-10000);
+ this.el.hide();
+ this.fireEvent("collapsed", this);
+ },
+ scope: this,
+ block: true
+ });
+ },
+
+ animateExpand : function(){
+ this.beforeSlide();
+ this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
+ this.el.setStyle("z-index", 20000);
+ this.collapsedEl.hide({
+ duration:.1
+ });
+ this.el.slideIn(this.getSlideAnchor(), {
+ callback : function(){
+ this.el.setStyle("z-index", "");
+ this.afterSlide();
+ if(this.split){
+ this.split.el.show();
+ }
+ this.fireEvent("invalidated", this);
+ this.fireEvent("expanded", this);
+ },
+ scope: this,
+ block: true
+ });
+ },
- /**
- * @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.
- */
- autoExpandColumn : false,
+ anchors : {
+ "west" : "left",
+ "east" : "right",
+ "north" : "top",
+ "south" : "bottom"
+ },
- /**
- * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
- * Default is 50.
- */
- autoExpandMin : 50,
+ sanchors : {
+ "west" : "l",
+ "east" : "r",
+ "north" : "t",
+ "south" : "b"
+ },
- /**
- * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
- */
- autoExpandMax : 1000,
+ canchors : {
+ "west" : "tl-tr",
+ "east" : "tr-tl",
+ "north" : "tl-bl",
+ "south" : "bl-tl"
+ },
- /**
- * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
- */
- view : null,
+ getAnchor : function(){
+ return this.anchors[this.position];
+ },
- /**
- * @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} dropTarget An {@link Roo.dd.DropTarget} config
- */
- dropTarget: false,
- /**
- * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
- */
- sortColMenu : false,
-
- // private
- rendered : false,
+ getCollapseAnchor : function(){
+ return this.canchors[this.position];
+ },
- /**
- * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
- * of a fixed width. Default is false.
- */
- /**
- * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
- */
-
+ getSlideAnchor : function(){
+ return this.sanchors[this.position];
+ },
+
+ getAlignAdj : function(){
+ var cm = this.cmargins;
+ switch(this.position){
+ case "west":
+ return [0, 0];
+ break;
+ case "east":
+ return [0, 0];
+ break;
+ case "north":
+ return [0, 0];
+ break;
+ case "south":
+ return [0, 0];
+ break;
+ }
+ },
+
+ getExpandAdj : function(){
+ var c = this.collapsedEl, cm = this.cmargins;
+ switch(this.position){
+ case "west":
+ return [-(cm.right+c.getWidth()+cm.left), 0];
+ break;
+ case "east":
+ return [cm.right+c.getWidth()+cm.left, 0];
+ break;
+ case "north":
+ return [0, -(cm.top+cm.bottom+c.getHeight())];
+ break;
+ case "south":
+ return [0, cm.top+cm.bottom+c.getHeight()];
+ break;
+ }
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/*
+ * These classes are private internal classes
+ */
+Roo.CenterLayoutRegion = function(mgr, config){
+ Roo.LayoutRegion.call(this, mgr, config, "center");
+ this.visible = true;
+ this.minWidth = config.minWidth || 20;
+ this.minHeight = config.minHeight || 20;
+};
+
+Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
+ hide : function(){
+ // center panel can't be hidden
+ },
- /**
- * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
- * %0 is replaced with the number of selected rows.
- */
- ddText : "{0} selected row{1}",
+ show : function(){
+ // center panel can't be hidden
+ },
+ getMinWidth: function(){
+ return this.minWidth;
+ },
- /**
- * Called once after all setup has been completed and the grid is ready to be rendered.
- * @return {Roo.grid.Grid} this
- */
- render : function()
- {
- var c = this.container;
- // try to detect autoHeight/width mode
- if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
- this.autoHeight = true;
- }
- var view = this.getView();
- view.init(this);
+ getMinHeight: function(){
+ return this.minHeight;
+ }
+});
- c.on("click", this.onClick, this);
- c.on("dblclick", this.onDblClick, this);
- c.on("contextmenu", this.onContextMenu, this);
- c.on("keydown", this.onKeyDown, this);
- if (Roo.isTouch) {
- c.on("touchstart", this.onTouchStart, this);
- }
- this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
+Roo.NorthLayoutRegion = function(mgr, config){
+ Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.TOP;
+ this.split.orientation = Roo.SplitBar.VERTICAL;
+ this.split.el.addClass("x-layout-split-v");
+ }
+ var size = config.initialSize || config.height;
+ if(typeof size != "undefined"){
+ this.el.setHeight(size);
+ }
+};
+Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.VERTICAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ box.height += this.split.el.getHeight();
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ box.height -= this.split.el.getHeight();
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y+box.height);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.updateBody(box.width, null);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
- this.getSelectionModel().init(this);
+Roo.SouthLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.BOTTOM;
+ this.split.orientation = Roo.SplitBar.VERTICAL;
+ this.split.el.addClass("x-layout-split-v");
+ }
+ var size = config.initialSize || config.height;
+ if(typeof size != "undefined"){
+ this.el.setHeight(size);
+ }
+};
+Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.VERTICAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sh = this.split.el.getHeight();
+ box.height += sh;
+ box.y -= sh;
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sh = this.split.el.getHeight();
+ box.height -= sh;
+ box.y += sh;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y-sh);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.updateBody(box.width, null);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
- view.render();
+Roo.EastLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.RIGHT;
+ this.split.orientation = Roo.SplitBar.HORIZONTAL;
+ this.split.el.addClass("x-layout-split-h");
+ }
+ var size = config.initialSize || config.width;
+ if(typeof size != "undefined"){
+ this.el.setWidth(size);
+ }
+};
+Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.HORIZONTAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sw = this.split.el.getWidth();
+ box.width += sw;
+ box.x -= sw;
+ }
+ return box;
+ },
- if(this.loadMask){
- this.loadMask = new Roo.LoadMask(this.container,
- Roo.apply({store:this.dataSource}, this.loadMask));
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ box.x += sw;
}
-
-
- if (this.toolbar && this.toolbar.xtype) {
- this.toolbar.container = this.getView().getHeaderPanel(true);
- this.toolbar = new Roo.Toolbar(this.toolbar);
+ if(this.collapsed){
+ this.updateBody(null, box.height);
}
- if (this.footer && this.footer.xtype) {
- this.footer.dataSource = this.getDataSource();
- this.footer.container = this.getView().getFooterPanel(true);
- this.footer = Roo.factory(this.footer, Roo);
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+
+Roo.WestLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.LEFT;
+ this.split.orientation = Roo.SplitBar.HORIZONTAL;
+ this.split.el.addClass("x-layout-split-h");
+ }
+ var size = config.initialSize || config.width;
+ if(typeof size != "undefined"){
+ this.el.setWidth(size);
+ }
+};
+Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.HORIZONTAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
}
- if (this.dropTarget && this.dropTarget.xtype) {
- delete this.dropTarget.xtype;
- this.dropTarget = new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
+ var box = this.el.getBox();
+ if(this.split){
+ box.width += this.split.el.getWidth();
}
-
-
- this.rendered = true;
- this.fireEvent('render', this);
- return this;
+ return box;
},
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x+box.width);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ }
+ if(this.collapsed){
+ this.updateBody(null, box.height);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/*
+ * Private internal class for reading and applying state
+ */
+Roo.LayoutStateManager = function(layout){
+ // default empty state
+ this.state = {
+ north: {},
+ south: {},
+ east: {},
+ west: {}
+ };
+};
- /**
- * Reconfigures the grid to use a different Store and Column Model.
- * The View will be bound to the new objects and refreshed.
- * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
- * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
- */
- reconfigure : function(dataSource, colModel){
- if(this.loadMask){
- this.loadMask.destroy();
- this.loadMask = new Roo.LoadMask(this.container,
- Roo.apply({store:dataSource}, this.loadMask));
+Roo.LayoutStateManager.prototype = {
+ init : function(layout, provider){
+ this.provider = provider;
+ var state = provider.get(layout.id+"-layout-state");
+ if(state){
+ var wasUpdating = layout.isUpdating();
+ if(!wasUpdating){
+ layout.beginUpdate();
+ }
+ for(var key in state){
+ if(typeof state[key] != "function"){
+ var rstate = state[key];
+ var r = layout.getRegion(key);
+ if(r && rstate){
+ if(rstate.size){
+ r.resizeTo(rstate.size);
+ }
+ if(rstate.collapsed == true){
+ r.collapse(true);
+ }else{
+ r.expand(null, true);
+ }
+ }
+ }
+ }
+ if(!wasUpdating){
+ layout.endUpdate();
+ }
+ this.state = state;
}
- this.view.bind(dataSource, colModel);
- this.dataSource = dataSource;
- this.colModel = colModel;
- this.view.refresh(true);
+ this.layout = layout;
+ layout.on("regionresized", this.onRegionResized, this);
+ layout.on("regioncollapsed", this.onRegionCollapsed, this);
+ layout.on("regionexpanded", this.onRegionExpanded, this);
},
- /**
- * addColumns
- * Add's a column, default at the end..
-
- * @param {int} position to add (default end)
- * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel}
- */
- addColumns : function(pos, ar)
- {
-
- for (var i =0;i< ar.length;i++) {
- var cfg = ar[i];
- cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
- this.cm.lookup[cfg.id] = cfg;
+
+ storeState : function(){
+ this.provider.set(this.layout.id+"-layout-state", this.state);
+ },
+
+ onRegionResized : function(region, newSize){
+ this.state[region.getPosition()].size = newSize;
+ this.storeState();
+ },
+
+ onRegionCollapsed : function(region){
+ this.state[region.getPosition()].collapsed = true;
+ this.storeState();
+ },
+
+ onRegionExpanded : function(region){
+ this.state[region.getPosition()].collapsed = false;
+ this.storeState();
+ }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.panel.Content
+ * @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * A basic Content Panel 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|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 {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Roo.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) [required] 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.)
+ * @cfg {String} style Extra style to add to the content panel
+ * @cfg {Roo.menu.Menu} menu popup menu
+
+ * @constructor
+ * Create a new Content Panel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+Roo.panel.Content = function(el, config, content){
+
+ /*
+ if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ if (config && config.parentLayout) {
+ el = config.parentLayout.el.createChild();
+ }
+ */
+ if(el.autoCreate){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ this.el = Roo.get(el);
+ if(!this.el && config && config.autoCreate){
+ if(typeof config.autoCreate == "object"){
+ if(!config.autoCreate.id){
+ config.autoCreate.id = config.id||el;
+ }
+ this.el = Roo.DomHelper.append(document.body,
+ config.autoCreate, true);
+ }else{
+ this.el = Roo.DomHelper.append(document.body,
+ {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
}
+ }
+
+
+ this.closable = false;
+ this.loaded = false;
+ this.active = false;
+ if(typeof config == "string"){
+ this.title = config;
+ }else{
+ Roo.apply(this, config);
+ }
+
+ if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+ this.wrapEl = this.el.wrap();
+ this.toolbar.container = this.el.insertSibling(false, 'before');
+ this.toolbar = new Roo.Toolbar(this.toolbar);
+ }
+
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+ if (!this.wrapEl) {
+ this.wrapEl = this.el.wrap();
+ }
+
+ this.footer.container = this.wrapEl.createChild();
+
+ this.footer = Roo.factory(this.footer, Roo);
+ }
+
+ if(this.resizeEl){
+ this.resizeEl = Roo.get(this.resizeEl, true);
+ }else{
+ this.resizeEl = this.el;
+ }
+ // handle view.xtype
+
+
+
+
+ this.addEvents({
+ /**
+ * @event activate
+ * Fires when this panel is activated.
+ * @param {Roo.panel.Content} this
+ */
+ "activate" : true,
+ /**
+ * @event deactivate
+ * Fires when this panel is activated.
+ * @param {Roo.panel.Content} this
+ */
+ "deactivate" : true,
+
+ /**
+ * @event resize
+ * Fires when this panel is resized if fitToFrame is true.
+ * @param {Roo.panel.Content} this
+ * @param {Number} width The width after any component adjustments
+ * @param {Number} height The height after any component adjustments
+ */
+ "resize" : true,
- if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
- pos = this.cm.config.length; //this.cm.config.push(cfg);
- }
- pos = Math.max(0,pos);
- ar.unshift(0);
- ar.unshift(pos);
- this.cm.config.splice.apply(this.cm.config, ar);
-
-
-
- this.view.generateRules(this.cm);
- this.view.refresh(true);
+ /**
+ * @event render
+ * Fires when this tab is created
+ * @param {Roo.panel.Content} 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);
+ });
+ }
+ content = content || this.content;
+ if(content){
+ this.setContent(content);
+ }
+ if(config && config.url){
+ this.setUrl(this.url, this.params, this.loadOnce);
+ }
+ Roo.panel.Content.superclass.constructor.call(this);
- // private
- onKeyDown : function(e){
- this.fireEvent("keydown", e);
- },
+ if (this.view && typeof(this.view.xtype) != 'undefined') {
+ this.view.el = this.el.appendChild(document.createElement("div"));
+ this.view = Roo.factory(this.view);
+ this.view.render && this.view.render(false, '');
+ }
+
+
+ this.fireEvent('render', this);
+};
+Roo.extend(Roo.panel.Content, Roo.util.Observable, {
+ tabTip:'',
+ setRegion : function(region){
+ this.region = region;
+ if(region){
+ this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
+ }else{
+ this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
+ }
+ },
+
/**
- * Destroy this grid.
- * @param {Boolean} removeEl True to remove the element
+ * Returns the toolbar for this Panel if one was configured.
+ * @return {Roo.Toolbar}
*/
- destroy : function(removeEl, keepListeners){
- if(this.loadMask){
- this.loadMask.destroy();
- }
- var c = this.container;
- c.removeAllListeners();
- this.view.destroy();
- this.colModel.purgeListeners();
- if(!keepListeners){
- this.purgeListeners();
- }
- c.update("");
- if(removeEl === true){
- c.remove();
- }
+ getToolbar : function(){
+ return this.toolbar;
},
-
- // private
- processEvent : function(name, e){
- // does this fire select???
- //Roo.log('grid:processEvent ' + name);
-
- if (name != 'touchstart' ) {
- this.fireEvent(name, e);
- }
-
- var t = e.getTarget();
- var v = this.view;
- var header = v.findHeaderIndex(t);
- if(header !== false){
- var ename = name == 'touchstart' ? 'click' : name;
-
- this.fireEvent("header" + ename, this, header, e);
+
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent("deactivate", this);
}else{
- var row = v.findRowIndex(t);
- var cell = v.findCellIndex(t);
- if (name == 'touchstart') {
- // first touch is always a click.
- // hopefull this happens after selection is updated.?
- name = false;
-
- if (typeof(this.selModel.getSelectedCell) != 'undefined') {
- var cs = this.selModel.getSelectedCell();
- if (row == cs[0] && cell == cs[1]){
- name = 'dblclick';
- }
- }
- if (typeof(this.selModel.getSelections) != 'undefined') {
- var cs = this.selModel.getSelections();
- var ds = this.dataSource;
- if (cs.length == 1 && ds.getAt(row) == cs[0]){
- name = 'dblclick';
- }
- }
- if (!name) {
- return;
- }
- }
-
-
- if(row !== false){
- this.fireEvent("row" + name, this, row, e);
- if(cell !== false){
- this.fireEvent("cell" + name, this, row, cell, e);
- }
- }
+ this.fireEvent("activate", this);
}
},
-
- // private
- onClick : function(e){
- this.processEvent("click", e);
- },
- // private
- onTouchStart : function(e){
- this.processEvent("touchstart", e);
- },
-
- // private
- onContextMenu : function(e, t){
- this.processEvent("contextmenu", e);
- },
-
- // private
- onDblClick : function(e){
- this.processEvent("dblclick", e);
+ /**
+ * Updates this panel's element
+ * @param {String} content The new content
+ * @param {Boolean} loadScripts (optional) true to look for and process scripts
+ */
+ setContent : function(content, loadScripts){
+ this.el.update(content, loadScripts);
},
- // private
- walkCells : function(row, col, step, fn, scope){
- var cm = this.colModel, clen = cm.getColumnCount();
- var ds = this.dataSource, rlen = ds.getCount(), first = true;
- if(step < 0){
- if(col < 0){
- row--;
- first = false;
- }
- while(row >= 0){
- if(!first){
- col = clen-1;
- }
- first = false;
- while(col >= 0){
- if(fn.call(scope || this, row, col, cm) === true){
- return [row, col];
- }
- col--;
- }
- row--;
- }
- } else {
- if(col >= clen){
- row++;
- first = false;
- }
- while(row < rlen){
- if(!first){
- col = 0;
- }
- first = false;
- while(col < clen){
- if(fn.call(scope || this, row, col, cm) === true){
- return [row, col];
- }
- col++;
- }
- row++;
- }
+ ignoreResize : function(w, h){
+ if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
+ return true;
+ }else{
+ this.lastSize = {width: w, height: h};
+ return false;
}
- return null;
- },
-
- // private
- getSelections : function(){
- return this.selModel.getSelections();
},
-
/**
- * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
- * but if manual update is required this method will initiate it.
+ * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
+ * @return {Roo.UpdateManager} The UpdateManager
*/
- autoSize : function(){
- if(this.rendered){
- this.view.layout();
- if(this.view.adjustForScroll){
- this.view.adjustForScroll();
- }
- }
+ getUpdateManager : function(){
+ return this.el.getUpdateManager();
},
-
- /**
- * Returns the grid's underlying element.
- * @return {Element} The element
+ /**
+ * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
+ * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
+<pre><code>
+panel.load({
+ url: "your-url.php",
+ params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+ callback: yourFunction,
+ scope: yourObject, //(optional scope)
+ discardUrl: false,
+ nocache: false,
+ text: "Loading...",
+ timeout: 30,
+ scripts: false
+});
+</code></pre>
+ * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
+ * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
+ * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
+ * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
+ * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+ * @return {Roo.panel.Content} this
*/
- getGridEl : function(){
- return this.container;
+ load : function(){
+ var um = this.el.getUpdateManager();
+ um.update.apply(um, arguments);
+ return this;
},
- // private for compatibility, overridden by editor grid
- stopEditing : function(){},
/**
- * Returns the grid's SelectionModel.
- * @return {SelectionModel}
+ * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
+ * @param {String/Function} url The URL to load the content from or a function to call to get the URL
+ * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+ * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+ * @return {Roo.UpdateManager} The UpdateManager
*/
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.grid.RowSelectionModel();
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.removeListener("activate", this.refreshDelegate);
}
- return this.selModel;
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on("activate", this.refreshDelegate);
+ return this.el.getUpdateManager();
},
-
- /**
- * Returns the grid's DataSource.
- * @return {DataSource}
- */
- getDataSource : function(){
- return this.dataSource;
+
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.el.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
+ }
},
-
+
+ _setLoaded : function(){
+ this.loaded = true;
+ },
+
/**
- * Returns the grid's ColumnModel.
- * @return {ColumnModel}
+ * Returns this panel's id
+ * @return {String}
*/
- getColumnModel : function(){
- return this.colModel;
+ getId : function(){
+ return this.el.id;
},
-
- /**
- * Returns the grid's GridView object.
- * @return {GridView}
+
+ /**
+ * Returns this panel's element - used by regiosn to add.
+ * @return {Roo.Element}
*/
- getView : function(){
- if(!this.view){
- this.view = new Roo.grid.GridView(this.viewConfig);
- this.relayEvents(this.view, [
- "beforerowremoved", "beforerowsinserted",
- "beforerefresh", "rowremoved",
- "rowsinserted", "rowupdated" ,"refresh"
- ]);
+ getEl : function(){
+ return this.wrapEl || this.el;
+ },
+
+ adjustForComponents : function(width, height)
+ {
+ //Roo.log('adjustForComponents ');
+ if(this.resizeEl != this.el){
+ width -= this.el.getFrameWidth('lr');
+ height -= this.el.getFrameWidth('tb');
+ }
+ if(this.toolbar){
+ var te = this.toolbar.getEl();
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+ if(this.footer){
+ var te = this.footer.getEl();
+ //Roo.log("footer:" + te.getHeight());
+
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+
+
+ if(this.adjustments){
+ width += this.adjustments[0];
+ height += this.adjustments[1];
+ }
+ return {"width": width, "height": height};
+ },
+
+ setSize : function(width, height){
+ if(this.fitToFrame && !this.ignoreResize(width, height)){
+ if(this.fitContainer && this.resizeEl != this.el){
+ this.el.setSize(width, height);
+ }
+ var size = this.adjustForComponents(width, height);
+ this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
+ this.fireEvent('resize', this, size.width, size.height);
}
- return this.view;
},
+
/**
- * Called to get grid's drag proxy text, by default returns this.ddText.
- * Override this to put something different in the dragged text.
- * @return {String}
+ * Returns this panel's title
+ * @return {String}
*/
- getDragDropText : function(){
- var count = this.selModel.getCount();
- return String.format(this.ddText, count, count == 1 ? '' : 's');
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- /**
- * @class Roo.grid.AbstractGridView
- * @extends Roo.util.Observable
- * @abstract
- * Abstract base class for grid Views
- * @constructor
- */
-Roo.grid.AbstractGridView = function(){
- this.grid = null;
-
- this.events = {
- "beforerowremoved" : true,
- "beforerowsinserted" : true,
- "beforerefresh" : true,
- "rowremoved" : true,
- "rowsinserted" : true,
- "rowupdated" : true,
- "refresh" : true
- };
- Roo.grid.AbstractGridView.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
- rowClass : "x-grid-row",
- cellClass : "x-grid-cell",
- tdClass : "x-grid-td",
- hdClass : "x-grid-hd",
- splitClass : "x-grid-hd-split",
+ getTitle : function(){
+ return this.title;
+ },
- init: function(grid){
- this.grid = grid;
- var cid = this.grid.getGridEl().id;
- this.colSelector = "#" + cid + " ." + this.cellClass + "-";
- this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
- this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
- this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
- },
-
- getColumnRenderers : function(){
- var renderers = [];
- var cm = this.grid.colModel;
- var colCount = cm.getColumnCount();
- for(var i = 0; i < colCount; i++){
- renderers[i] = cm.getRenderer(i);
+ /**
+ * Set this panel's title
+ * @param {String} title
+ */
+ setTitle : function(title){
+ this.title = title;
+ if(this.region){
+ this.region.updatePanelTitle(this, title);
}
- return renderers;
},
- getColumnIds : function(){
- var ids = [];
- var cm = this.grid.colModel;
- var colCount = cm.getColumnCount();
- for(var i = 0; i < colCount; i++){
- ids[i] = cm.getColumnId(i);
- }
- return ids;
+ /**
+ * Returns true is this panel was configured to be closable
+ * @return {Boolean}
+ */
+ isClosable : function(){
+ return this.closable;
+ },
+
+ beforeSlide : function(){
+ this.el.clip();
+ this.resizeEl.clip();
},
- getDataIndexes : function(){
- if(!this.indexMap){
- this.indexMap = this.buildIndexMap();
- }
- return this.indexMap.colToData;
+ afterSlide : function(){
+ this.el.unclip();
+ this.resizeEl.unclip();
},
- getColumnIndexByDataIndex : function(dataIndex){
- if(!this.indexMap){
- this.indexMap = this.buildIndexMap();
+ /**
+ * Force a content refresh from the URL specified in the {@link #setUrl} method.
+ * Will fail silently if the {@link #setUrl} method has not been called.
+ * This does not activate the panel, just updates its content.
+ */
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
}
- return this.indexMap.dataToCol[dataIndex];
},
/**
- * Set a css style for a column dynamically.
- * @param {Number} colIndex The index of the column
- * @param {String} name The css property name
- * @param {String} value The css value
+ * Destroys this panel
*/
- setCSSStyle : function(colIndex, name, value){
- var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
- Roo.util.CSS.updateRule(selector, name, value);
+ destroy : function(){
+ this.el.removeAllListeners();
+ var tempEl = document.createElement("span");
+ tempEl.appendChild(this.el.dom);
+ tempEl.innerHTML = "";
+ this.el.remove();
+ this.el = null;
},
- generateRules : function(cm){
- var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
- Roo.util.CSS.removeStyleSheet(rulesId);
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var cid = cm.getColumnId(i);
- ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
- this.tdSelector, cid, " {\n}\n",
- this.hdSelector, cid, " {\n}\n",
- this.splitSelector, cid, " {\n}\n");
- }
- return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+ /**
+ * 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>
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.HeaderDragZone = function(grid, hd, hd2){
- this.grid = grid;
- this.view = grid.getView();
- this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
- Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
- if(hd2){
- this.setHandleElId(Roo.id(hd));
- this.setOuterHandleElId(Roo.id(hd2));
- }
- this.scroll = false;
-};
-Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
- maxDragWidth: 120,
- getDragData : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var h = this.view.findHeaderCell(t);
- if(h){
- return {ddel: h.firstChild, header:h};
- }
- return false;
- },
+layout.addxtype({
+ xtype : 'Form',
+ items: [ .... ]
+ }
+);
- onInitDrag : function(e){
- this.view.headersDisabled = true;
- var clone = this.dragData.ddel.cloneNode(true);
- clone.id = Roo.id();
- clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
- this.proxy.update(clone);
- return true;
- },
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+
+ addxtype : function(cfg) {
+ if(cfg.xtype.match(/^Cropbox$/)) {
- afterValidDrop : function(){
- var v = this.view;
- setTimeout(function(){
- v.headersDisabled = false;
- }, 50);
- },
+ this.cropbox = new Roo.factory(cfg);
- afterInvalidDrop : function(){
- var v = this.view;
- setTimeout(function(){
- v.headersDisabled = false;
- }, 50);
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.HeaderDropZone = function(grid, hd, hd2){
- this.grid = grid;
- this.view = grid.getView();
- // split the proxies so they don't interfere with mouse events
- this.proxyTop = Roo.DomHelper.append(document.body, {
- cls:"col-move-top", html:" "
- }, true);
- this.proxyBottom = Roo.DomHelper.append(document.body, {
- cls:"col-move-bottom", html:" "
- }, true);
- this.proxyTop.hide = this.proxyBottom.hide = function(){
- this.setLeftTop(-100,-100);
- this.setStyle("visibility", "hidden");
- };
- this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
- // temporarily disabled
- //Roo.dd.ScrollManager.register(this.view.scroller.dom);
- Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
-};
-Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
- proxyOffsets : [-4, -9],
- fly: Roo.Element.fly,
+ this.cropbox.render(this.el);
- getTargetFromEvent : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var cindex = this.view.findCellIndex(t);
- if(cindex !== false){
- return this.view.getHeaderCell(cindex);
+ return this.cropbox;
}
- return null;
- },
+ // add form..
+ if (cfg.xtype.match(/^Form$/)) {
+
+ var el;
+ //if (this.footer) {
+ // el = this.footer.container.insertSibling(false, 'before');
+ //} else {
+ el = this.el.createChild();
+ //}
- nextVisible : function(h){
- var v = this.view, cm = this.grid.colModel;
- h = h.nextSibling;
- while(h){
- if(!cm.isHidden(v.getCellIndex(h))){
- return h;
+ this.form = new Roo.form.Form(cfg);
+
+
+ if ( this.form.allItems.length) {
+ this.form.render(el.dom);
}
- h = h.nextSibling;
+ return this.form;
}
- return null;
- },
-
- prevVisible : function(h){
- var v = this.view, cm = this.grid.colModel;
- h = h.prevSibling;
- while(h){
- if(!cm.isHidden(v.getCellIndex(h))){
- return h;
- }
- h = h.prevSibling;
+ // should only have one of theses..
+ if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
+ // views.. should not be just added - used named prop 'view''
+
+ cfg.el = this.el.appendChild(document.createElement("div"));
+ // factory?
+
+ var ret = new Roo.factory(cfg);
+
+ ret.render && ret.render(false, ''); // render blank..
+ this.view = ret;
+ return ret;
}
- return null;
- },
+ return false;
+ }
+});
- positionIndicator : function(h, n, e){
- var x = Roo.lib.Event.getPageX(e);
- var r = Roo.lib.Dom.getRegion(n.firstChild);
- var px, pt, py = r.top + this.proxyOffsets[1];
- if((r.right - x) <= (r.right-r.left)/2){
- px = r.right+this.view.borderWidth;
- pt = "after";
- }else{
- px = r.left;
- pt = "before";
- }
- var oldIndex = this.view.getCellIndex(h);
- var newIndex = this.view.getCellIndex(n);
- if(this.grid.colModel.isFixed(newIndex)){
- return false;
- }
- var locked = this.grid.colModel.isLocked(newIndex);
- if(pt == "after"){
- newIndex++;
- }
- if(oldIndex < newIndex){
- newIndex--;
- }
- if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
- return false;
- }
- px += this.proxyOffsets[0];
- this.proxyTop.setLeftTop(px, py);
- this.proxyTop.show();
- if(!this.bottomOffset){
- this.bottomOffset = this.view.mainHd.getHeight();
- }
- this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
- this.proxyBottom.show();
- return pt;
- },
- onNodeEnter : function(n, dd, e, data){
- if(data.header != n){
- this.positionIndicator(data.header, n, e);
- }
- },
- onNodeOver : function(n, dd, e, data){
- var result = false;
- if(data.header != n){
- result = this.positionIndicator(data.header, n, e);
- }
- if(!result){
- this.proxyTop.hide();
- this.proxyBottom.hide();
- }
- return result ? this.dropAllowed : this.dropNotAllowed;
- },
- onNodeOut : function(n, dd, e, data){
- this.proxyTop.hide();
- this.proxyBottom.hide();
- },
- onNodeDrop : function(n, dd, e, data){
- var h = data.header;
- if(h != n){
- var cm = this.grid.colModel;
- var x = Roo.lib.Event.getPageX(e);
- var r = Roo.lib.Dom.getRegion(n.firstChild);
- var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
- var oldIndex = this.view.getCellIndex(h);
- var newIndex = this.view.getCellIndex(n);
- var locked = cm.isLocked(newIndex);
- if(pt == "after"){
- newIndex++;
- }
- if(oldIndex < newIndex){
- newIndex--;
- }
- if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
- return false;
- }
- cm.setLocked(oldIndex, locked, true);
- cm.moveColumn(oldIndex, newIndex);
- this.grid.fireEvent("columnmove", oldIndex, newIndex);
- return true;
+
+
+
+
+/**
+ * @class Roo.panel.Grid
+ * @extends Roo.panel.Content
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @constructor
+ * Create a new GridPanel.
+ * @cfg {Roo.grid.Grid} grid The grid for this panel
+ */
+Roo.panel.Grid = function(grid, config){
+
+ // universal ctor...
+ if (typeof(grid.grid) != 'undefined') {
+ config = grid;
+ grid = config.grid;
+ }
+ this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
+ {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
+
+ this.wrapper.dom.appendChild(grid.getGridEl().dom);
+
+ Roo.panel.Grid.superclass.constructor.call(this, this.wrapper, config);
+
+ if(this.toolbar){
+ this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
+ }
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+
+ this.footer.container = this.grid.getView().getFooterPanel(true);
+ this.footer.dataSource = this.grid.dataSource;
+ this.footer = Roo.factory(this.footer, Roo);
+
+ }
+
+ grid.monitorWindowResize = false; // turn off autosizing
+ grid.autoHeight = false;
+ grid.autoWidth = false;
+ this.grid = grid;
+ this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
+};
+
+Roo.extend(Roo.panel.Grid, Roo.panel.Content, {
+ getId : function(){
+ return this.grid.id;
+ },
+
+ /**
+ * Returns the grid for this panel
+ * @return {Roo.grid.Grid}
+ */
+ getGrid : function(){
+ return this.grid;
+ },
+
+ setSize : function(width, height){
+ if(!this.ignoreResize(width, height)){
+ var grid = this.grid;
+ var size = this.adjustForComponents(width, height);
+ grid.getGridEl().setSize(size.width, size.height);
+ grid.autoSize();
}
- return false;
+ },
+
+ beforeSlide : function(){
+ this.grid.getView().scroller.clip();
+ },
+
+ afterSlide : function(){
+ this.grid.getView().scroller.unclip();
+ },
+
+ destroy : function(){
+ this.grid.destroy();
+ delete this.grid;
+ Roo.panel.Grid.superclass.destroy.call(this);
}
});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
+
+
/**
- * @class Roo.grid.GridView
- * @extends Roo.util.Observable
+ * @class Roo.panel.NestedLayout
+ * @extends Roo.panel.Content
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @cfg {Roo.BorderLayout} layout [required] The layout for this panel
*
+ *
* @constructor
- * @param {Object} config
+ * Create a new NestedLayoutPanel.
+ *
+ *
+ * @param {Roo.BorderLayout} layout [required] The layout for this panel
+ * @param {String/Object} config A string to set only the title or a config object
*/
-Roo.grid.GridView = function(config){
- Roo.grid.GridView.superclass.constructor.call(this);
- this.el = null;
-
- Roo.apply(this, config);
+Roo.panel.NestedLayout = function(layout, config)
+{
+ // construct with only one argument..
+ /* FIXME - implement nicer consturctors
+ if (layout.layout) {
+ config = layout;
+ layout = config.layout;
+ delete config.layout;
+ }
+ if (layout.xtype && !layout.getEl) {
+ // then layout needs constructing..
+ layout = Roo.factory(layout, Roo);
+ }
+ */
+
+
+ Roo.panel.NestedLayout.superclass.constructor.call(this, layout.getEl(), config);
+
+ layout.monitorWindowResize = false; // turn off autosizing
+ this.layout = layout;
+ this.layout.getEl().addClass("x-layout-nested-layout");
+
+
+
+
};
-Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
+Roo.extend(Roo.panel.NestedLayout, Roo.panel.Content, {
- unselectable : 'unselectable="on"',
- unselectableCls : 'x-unselectable',
+ layout : false,
+
+ setSize : function(width, height){
+ if(!this.ignoreResize(width, height)){
+ var size = this.adjustForComponents(width, height);
+ var el = this.layout.getEl();
+ el.setSize(size.width, size.height);
+ var touch = el.dom.offsetWidth;
+ this.layout.layout();
+ // ie requires a double layout on the first pass
+ if(Roo.isIE && !this.initialized){
+ this.initialized = true;
+ this.layout.layout();
+ }
+ }
+ },
+ // activate all subpanels if not currently active..
- rowClass : "x-grid-row",
-
- cellClass : "x-grid-col",
-
- tdClass : "x-grid-td",
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent("deactivate", this);
+ return;
+ }
+
+ this.fireEvent("activate", this);
+ // not sure if this should happen before or after..
+ if (!this.layout) {
+ return; // should not happen..
+ }
+ var reg = false;
+ for (var r in this.layout.regions) {
+ reg = this.layout.getRegion(r);
+ if (reg.getActivePanel()) {
+ //reg.showPanel(reg.getActivePanel()); // force it to activate..
+ reg.setActivePanel(reg.getActivePanel());
+ continue;
+ }
+ if (!reg.panels.length) {
+ continue;
+ }
+ reg.showPanel(reg.getPanel(0));
+ }
+
+
+
+
+ },
+
+ /**
+ * Returns the nested BorderLayout for this panel
+ * @return {Roo.BorderLayout}
+ */
+ getLayout : function(){
+ return this.layout;
+ },
+
+ /**
+ * Adds a xtype elements to the layout of the nested panel
+ * <pre><code>
- hdClass : "x-grid-hd",
+panel.addxtype({
+ xtype : 'ContentPanel',
+ region: 'west',
+ items: [ .... ]
+ }
+);
- splitClass : "x-grid-split",
+panel.addxtype({
+ xtype : 'panel.NestedLayout',
+ region: 'west',
+ layout: {
+ center: { },
+ west: { }
+ },
+ items : [ ... list of content panels or nested layout panels.. ]
+ }
+);
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+ addxtype : function(cfg) {
+ return this.layout.addxtype(cfg);
+
+ }
+});
- sortClasses : ["sort-asc", "sort-desc"],
+Roo.ScrollPanel = function(el, config, content){
+ config = config || {};
+ config.fitToFrame = true;
+ Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
+
+ this.el.dom.style.overflow = "hidden";
+ var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
+ this.el.removeClass("x-layout-inactive-content");
+ this.el.on("mousewheel", this.onWheel, this);
- enableMoveAnim : false,
+ var up = wrap.createChild({cls: "x-scroller-up", html: " "}, this.el.dom);
+ var down = wrap.createChild({cls: "x-scroller-down", html: " "});
+ up.unselectable(); down.unselectable();
+ up.on("click", this.scrollUp, this);
+ down.on("click", this.scrollDown, this);
+ up.addClassOnOver("x-scroller-btn-over");
+ down.addClassOnOver("x-scroller-btn-over");
+ up.addClassOnClick("x-scroller-btn-click");
+ down.addClassOnClick("x-scroller-btn-click");
+ this.adjustments = [0, -(up.getHeight() + down.getHeight())];
- hlColor: "C3DAF9",
+ this.resizeEl = this.el;
+ this.el = wrap; this.up = up; this.down = down;
+};
- dh : Roo.DomHelper,
+Roo.extend(Roo.ScrollPanel, Roo.panel.Content, {
+ increment : 100,
+ wheelIncrement : 5,
+ scrollUp : function(){
+ this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
+ },
- fly : Roo.Element.fly,
+ scrollDown : function(){
+ this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
+ },
- css : Roo.util.CSS,
+ afterScroll : function(){
+ var el = this.resizeEl;
+ var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
+ this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ },
- borderWidth: 1,
+ setSize : function(){
+ Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
+ this.afterScroll();
+ },
- splitOffset: 3,
+ onWheel : function(e){
+ var d = e.getWheelDelta();
+ this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
+ this.afterScroll();
+ e.stopEvent();
+ },
- scrollIncrement : 22,
+ setContent : function(content, loadScripts){
+ this.resizeEl.update(content, loadScripts);
+ }
- cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
+});
- findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
- bind : function(ds, cm){
- if(this.ds){
- this.ds.un("load", this.onLoad, this);
- this.ds.un("datachanged", this.onDataChange, this);
- this.ds.un("add", this.onAdd, this);
- this.ds.un("remove", this.onRemove, this);
- this.ds.un("update", this.onUpdate, this);
- this.ds.un("clear", this.onClear, this);
- }
- if(ds){
- ds.on("load", this.onLoad, this);
- ds.on("datachanged", this.onDataChange, this);
- ds.on("add", this.onAdd, this);
- ds.on("remove", this.onRemove, this);
- ds.on("update", this.onUpdate, this);
- ds.on("clear", this.onClear, this);
- }
- this.ds = ds;
- if(this.cm){
- this.cm.un("widthchange", this.onColWidthChange, this);
- this.cm.un("headerchange", this.onHeaderChange, this);
- this.cm.un("hiddenchange", this.onHiddenChange, this);
- this.cm.un("columnmoved", this.onColumnMove, this);
- this.cm.un("columnlockchange", this.onColumnLock, this);
- }
- if(cm){
- this.generateRules(cm);
- cm.on("widthchange", this.onColWidthChange, this);
- cm.on("headerchange", this.onHeaderChange, this);
- cm.on("hiddenchange", this.onHiddenChange, this);
- cm.on("columnmoved", this.onColumnMove, this);
- cm.on("columnlockchange", this.onColumnLock, this);
+/**
+ * @class Roo.panel.Tree
+ * @extends Roo.panel.Content
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * Treepanel component
+ *
+ * @constructor
+ * Create a new TreePanel. - defaults to fit/scoll contents.
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ */
+Roo.panel.Tree = function(config){
+ var el = config.el;
+ var tree = config.tree;
+ delete config.tree;
+ delete config.el; // hopefull!
+
+ // wrapper for IE7 strict & safari scroll issue
+
+ var treeEl = el.createChild();
+ config.resizeEl = treeEl;
+
+
+
+ Roo.panel.Tree.superclass.constructor.call(this, el, config);
+
+
+ this.tree = new Roo.tree.TreePanel(treeEl , tree);
+ //console.log(tree);
+ this.on('activate', function()
+ {
+ if (this.tree.rendered) {
+ return;
}
- this.cm = cm;
- },
-
- init: function(grid){
- Roo.grid.GridView.superclass.init.call(this, grid);
-
- this.bind(grid.dataSource, grid.colModel);
+ //console.log('render tree');
+ this.tree.render();
+ });
+ // this should not be needed.. - it's actually the 'el' that resizes?
+ // actuall it breaks the containerScroll - dragging nodes auto scroll at top
+
+ //this.on('resize', function (cp, w, h) {
+ // this.tree.innerCt.setWidth(w);
+ // this.tree.innerCt.setHeight(h);
+ // //this.tree.innerCt.setStyle('overflow-y', 'auto');
+ //});
- grid.on("headerclick", this.handleHeaderClick, this);
+
+
+};
- if(grid.trackMouseOver){
- grid.on("mouseover", this.onRowOver, this);
- grid.on("mouseout", this.onRowOut, this);
- }
- grid.cancelTextSelection = function(){};
- this.gridId = grid.id;
+Roo.extend(Roo.panel.Tree, Roo.panel.Content, {
+ fitToFrame : true,
+ autoScroll : true,
+ /*
+ * @cfg {Roo.tree.panel.Tree} tree [required] The tree TreePanel, with config etc.
+ */
+ tree : false
- var tpls = this.templates || {};
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
- 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-header">{lockedHeader}</div>',
- '<div class="x-grid-body">{lockedBody}</div>',
- "</div>",
- '<div class="x-grid-viewport">',
- '<div class="x-grid-header">{header}</div>',
- '<div class="x-grid-body">{body}</div>',
- "</div>",
- '<div class="x-grid-bottombar"></div>',
-
- '<div class="x-grid-resize-proxy"> </div>',
- "</div>"
- );
- tpls.master.disableformats = true;
- }
+/**
+ * @class Roo.ReaderLayout
+ * @extends Roo.BorderLayout
+ * This is a pre-built layout that represents a classic, 5-pane application. It consists of a header, a primary
+ * center region containing two nested regions (a top one for a list view and one for item preview below),
+ * and regions on either side that can be used for navigation, application commands, informational displays, etc.
+ * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
+ * expedites the setup of the overall layout and regions for this common application style.
+ * Example:
+ <pre><code>
+var reader = new Roo.ReaderLayout();
+var CP = Roo.panel.Content; // shortcut for adding
- if(!tpls.header){
- tpls.header = new Roo.Template(
- '<table border="0" cellspacing="0" cellpadding="0">',
- '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
- "</table>{splits}"
- );
- tpls.header.disableformats = true;
- }
- tpls.header.compile();
+reader.beginUpdate();
+reader.add("north", new CP("north", "North"));
+reader.add("west", new CP("west", {title: "West"}));
+reader.add("east", new CP("east", {title: "East"}));
- if(!tpls.hcell){
- tpls.hcell = new Roo.Template(
- '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
- '<div class="x-grid-hd-text ' + this.unselectableCls + '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
- "</div></td>"
- );
- tpls.hcell.disableFormats = true;
- }
- tpls.hcell.compile();
+reader.regions.listView.add(new CP("listView", "List"));
+reader.regions.preview.add(new CP("preview", "Preview"));
+reader.endUpdate();
+</code></pre>
+* @constructor
+* Create a new ReaderLayout
+* @param {Object} config Configuration options
+* @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
+* document.body if omitted)
+*/
+Roo.ReaderLayout = function(config, renderTo){
+ var c = config || {size:{}};
+ Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
+ north: c.north !== false ? Roo.apply({
+ split:false,
+ initialSize: 32,
+ titlebar: false
+ }, c.north) : false,
+ west: c.west !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ animate: true,
+ margins:{left:5,right:0,bottom:5,top:5},
+ cmargins:{left:5,right:5,bottom:5,top:5}
+ }, c.west) : false,
+ east: c.east !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ animate: true,
+ margins:{left:0,right:5,bottom:5,top:5},
+ cmargins:{left:5,right:5,bottom:5,top:5}
+ }, c.east) : false,
+ center: Roo.apply({
+ tabPosition: 'top',
+ autoScroll:false,
+ closeOnTab: true,
+ titlebar:false,
+ margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
+ }, c.center)
+ });
- if(!tpls.hsplit){
- tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
- this.unselectableCls + '" ' + this.unselectable +'> </div>');
- tpls.hsplit.disableFormats = true;
- }
- tpls.hsplit.compile();
+ this.el.addClass('x-reader');
- if(!tpls.body){
- tpls.body = new Roo.Template(
- '<table border="0" cellspacing="0" cellpadding="0">',
- "<tbody>{rows}</tbody>",
- "</table>"
- );
- tpls.body.disableFormats = true;
- }
- tpls.body.compile();
+ this.beginUpdate();
- if(!tpls.row){
- tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
- tpls.row.disableFormats = true;
- }
- tpls.row.compile();
+ var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
+ south: c.preview !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 100,
+ autoScroll:true,
+ collapsible:true,
+ titlebar: true,
+ cmargins:{top:5,left:0, right:0, bottom:0}
+ }, c.preview) : false,
+ center: Roo.apply({
+ autoScroll:false,
+ titlebar:false,
+ minHeight:200
+ }, c.listView)
+ });
+ this.add('center', new Roo.panel.NestedLayout(inner,
+ Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
- if(!tpls.cell){
- tpls.cell = new Roo.Template(
- '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
- '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
- this.unselectableCls + '" ' + this.unselectable +'" {attr}>{value}</div></div>',
- "</td>"
- );
- tpls.cell.disableFormats = true;
- }
- tpls.cell.compile();
+ this.endUpdate();
- this.templates = tpls;
- },
+ this.regions.preview = inner.getRegion('south');
+ this.regions.listView = inner.getRegion('center');
+};
- // remap these for backwards compat
- onColWidthChange : function(){
- this.updateColumns.apply(this, arguments);
- },
- onHeaderChange : function(){
- this.updateHeaders.apply(this, arguments);
- },
- onHiddenChange : function(){
- this.handleHiddenChange.apply(this, arguments);
- },
- onColumnMove : function(){
- this.handleColumnMove.apply(this, arguments);
- },
- onColumnLock : function(){
- this.handleLockChange.apply(this, arguments);
- },
+Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.Grid
+ * @extends Roo.util.Observable
+ * This class represents the primary interface of a component based grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.Grid("my-container-id", {
+ ds: myDataStore,
+ cm: myColModel,
+ selModel: mySelectionModel,
+ autoSizeColumns: true,
+ monitorWindowResize: false,
+ trackMouseOver: true
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+ * <b>Common Problems:</b><br/>
+ * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
+ * element will correct this<br/>
+ * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
+ * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
+ * are unpredictable.<br/>
+ * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
+ * grid to calculate dimensions/offsets.<br/>
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.Grid = function(container, config){
+ // initialize the container
+ this.container = Roo.get(container);
+ this.container.update("");
+ this.container.setStyle("overflow", "hidden");
+ this.container.addClass('x-grid-container');
- onDataChange : function(){
- this.refresh();
- this.updateHeaderSortState();
- },
+ this.id = this.container.id;
- onClear : function(){
- this.refresh();
- },
+ Roo.apply(this, config);
+ // check and correct shorthanded configs
+ if(this.ds){
+ this.dataSource = this.ds;
+ delete this.ds;
+ }
+ if(this.cm){
+ this.colModel = this.cm;
+ delete this.cm;
+ }
+ if(this.sm){
+ this.selModel = this.sm;
+ delete this.sm;
+ }
- onUpdate : function(ds, record){
- this.refreshRow(record);
- },
+ if (this.selModel) {
+ this.selModel = Roo.factory(this.selModel, Roo.grid);
+ this.sm = this.selModel;
+ this.sm.xmodule = this.xmodule || false;
+ }
+ if (typeof(this.colModel.config) == 'undefined') {
+ this.colModel = new Roo.grid.ColumnModel(this.colModel);
+ this.cm = this.colModel;
+ this.cm.xmodule = this.xmodule || false;
+ }
+ if (this.dataSource) {
+ this.dataSource= Roo.factory(this.dataSource, Roo.data);
+ this.ds = this.dataSource;
+ this.ds.xmodule = this.xmodule || false;
+
+ }
+
+
+
+ if(this.width){
+ this.container.setWidth(this.width);
+ }
- refreshRow : function(record){
- var ds = this.ds, index;
- if(typeof record == 'number'){
- index = record;
- record = ds.getAt(index);
- }else{
- index = ds.indexOf(record);
- }
- this.insertRows(ds, index, index, true);
- this.onRemove(ds, record, index+1, true);
- this.syncRowHeights(index, index);
- this.layout();
- this.fireEvent("rowupdated", this, index, record);
- },
+ if(this.height){
+ this.container.setHeight(this.height);
+ }
+ /** @private */
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true,
+ /**
+ * @event dblclick
+ * The raw dblclick event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "dblclick" : true,
+ /**
+ * @event contextmenu
+ * The raw contextmenu event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "contextmenu" : true,
+ /**
+ * @event mousedown
+ * The raw mousedown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mousedown" : true,
+ /**
+ * @event mouseup
+ * The raw mouseup event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseup" : true,
+ /**
+ * @event mouseover
+ * The raw mouseover event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseover" : true,
+ /**
+ * @event mouseout
+ * The raw mouseout event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseout" : true,
+ /**
+ * @event keypress
+ * The raw keypress event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keypress" : true,
+ /**
+ * @event keydown
+ * The raw keydown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keydown" : true,
- onAdd : function(ds, records, index){
- this.insertRows(ds, index, index + (records.length-1));
- },
+ // custom events
- onRemove : function(ds, record, index, isUpdate){
- if(isUpdate !== true){
- this.fireEvent("beforerowremoved", this, index, record);
- }
- var bt = this.getBodyTable(), lt = this.getLockedTable();
- if(bt.rows[index]){
- bt.firstChild.removeChild(bt.rows[index]);
- }
- if(lt.rows[index]){
- lt.firstChild.removeChild(lt.rows[index]);
- }
- if(isUpdate !== true){
- this.stripeRows(index);
- this.syncRowHeights(index, index);
- this.layout();
- this.fireEvent("rowremoved", this, index, record);
- }
- },
+ /**
+ * @event cellclick
+ * Fires when a cell is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "cellclick" : true,
+ /**
+ * @event celldblclick
+ * Fires when a cell is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "celldblclick" : true,
+ /**
+ * @event rowclick
+ * Fires when a row is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowclick" : true,
+ /**
+ * @event rowdblclick
+ * Fires when a row is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowdblclick" : true,
+ /**
+ * @event headerclick
+ * Fires when a header is clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headerclick" : true,
+ /**
+ * @event headerdblclick
+ * Fires when a header cell is double clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headerdblclick" : true,
+ /**
+ * @event rowcontextmenu
+ * Fires when a row is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowcontextmenu" : true,
+ /**
+ * @event cellcontextmenu
+ * Fires when a cell is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} cellIndex
+ * @param {Roo.EventObject} e
+ */
+ "cellcontextmenu" : true,
+ /**
+ * @event headercontextmenu
+ * Fires when a header is right clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headercontextmenu" : true,
+ /**
+ * @event bodyscroll
+ * Fires when the body element is scrolled
+ * @param {Number} scrollLeft
+ * @param {Number} scrollTop
+ */
+ "bodyscroll" : true,
+ /**
+ * @event columnresize
+ * Fires when the user resizes a column
+ * @param {Number} columnIndex
+ * @param {Number} newSize
+ */
+ "columnresize" : true,
+ /**
+ * @event columnmove
+ * Fires when the user moves a column
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
+ */
+ "columnmove" : true,
+ /**
+ * @event startdrag
+ * Fires when row(s) start being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
+ */
+ "startdrag" : true,
+ /**
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
+ */
+ "enddrag" : true,
+ /**
+ * @event dragdrop
+ * Fires when dragged row(s) are dropped on a valid DD target
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragdrop" : true,
+ /**
+ * @event dragover
+ * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragover" : true,
+ /**
+ * @event dragenter
+ * Fires when the dragged row(s) first cross another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragenter" : true,
+ /**
+ * @event dragout
+ * Fires when the dragged row(s) leave another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragout" : true,
+ /**
+ * @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.
+ */
+ 'rowclass' : true,
- onLoad : function(){
- this.scrollToTop();
- },
+ /**
+ * @event render
+ * Fires when the grid is rendered
+ * @param {Grid} grid
+ */
+ 'render' : true
+ });
+ Roo.grid.Grid.superclass.constructor.call(this);
+};
+Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
+
/**
- * Scrolls the grid to the top
+ * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
+ */
+ /**
+ * @cfg {Roo.grid.GridView} view The view that renders the grid (default = Roo.grid.GridView)
+ */
+ /**
+ * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
+ */
+ /**
+ * @cfg {Roo.data.Store} ds The data store for the grid
+ */
+ /**
+ * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
+ */
+
+ /**
+ * @cfg {Roo.PagingToolbar} footer the paging toolbar
+ */
+
+ /**
+ * @cfg {String} ddGroup - drag drop group.
+ */
+ /**
+ * @cfg {String} dragGroup - drag group (?? not sure if needed.)
*/
- scrollToTop : function(){
- if(this.scroller){
- this.scroller.dom.scrollTop = 0;
- this.syncScroll();
- }
- },
/**
- * Gets a panel in the header of the grid that can be used for toolbars etc.
- * After modifying the contents of this panel a call to grid.autoSize() may be
- * required to register any changes in size.
- * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
- * @return Roo.Element
+ * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
*/
- getHeaderPanel : function(doShow){
- if(doShow){
- this.headerPanel.show();
- }
- return this.headerPanel;
- },
+ minColumnWidth : 25,
/**
- * Gets a panel in the footer of the grid that can be used for toolbars etc.
- * After modifying the contents of this panel a call to grid.autoSize() may be
- * required to register any changes in size.
- * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
- * @return Roo.Element
+ * @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.
*/
- getFooterPanel : function(doShow){
- if(doShow){
- this.footerPanel.show();
- }
- return this.footerPanel;
- },
-
- initElements : function(){
- var E = Roo.Element;
- var el = this.grid.getGridEl().dom.firstChild;
- var cs = el.childNodes;
-
- this.el = new E(el);
-
- 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[2]);
- this.scrollSizer = new E(this.scroller.dom.firstChild);
-
- 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[4]);
- this.mainHd = new E(this.mainWrap.dom.firstChild);
- this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
-
- this.footerPanel = new E(cs[5]);
- this.footerPanel.enableDisplayMode("block");
-
- this.resizeProxy = new E(cs[6]);
-
- this.headerSelector = String.format(
- '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
- this.lockedHd.id, this.mainHd.id
- );
-
- this.splitterSelector = String.format(
- '#{0} div.x-grid-split, #{1} div.x-grid-split',
- this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
- );
- },
- idToCssName : function(s)
- {
- return s.replace(/[^a-z0-9]+/ig, '-');
- },
-
- getHeaderCell : function(index){
- return Roo.DomQuery.select(this.headerSelector)[index];
- },
-
- getHeaderCellMeasure : function(index){
- return this.getHeaderCell(index).firstChild;
- },
-
- getHeaderCellText : function(index){
- return this.getHeaderCell(index).firstChild.firstChild;
- },
-
- getLockedTable : function(){
- return this.lockedBody.dom.firstChild;
- },
-
- getBodyTable : function(){
- return this.mainBody.dom.firstChild;
- },
-
- getLockedRow : function(index){
- return this.getLockedTable().rows[index];
- },
-
- getRow : function(index){
- return this.getBodyTable().rows[index];
- },
+ autoSizeColumns : false,
- getRowComposite : function(index){
- if(!this.rowEl){
- this.rowEl = new Roo.CompositeElementLite();
- }
- var els = [], lrow, mrow;
- if(lrow = this.getLockedRow(index)){
- els.push(lrow);
- }
- if(mrow = this.getRow(index)){
- els.push(mrow);
- }
- this.rowEl.elements = els;
- return this.rowEl;
- },
/**
- * Gets the 'td' of the cell
- *
- * @param {Integer} rowIndex row to select
- * @param {Integer} colIndex column to select
- *
- * @return {Object}
+ * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
*/
- getCell : function(rowIndex, colIndex){
- var locked = this.cm.getLockedCount();
- var source;
- if(colIndex < locked){
- source = this.lockedBody.dom.firstChild;
- }else{
- source = this.mainBody.dom.firstChild;
- colIndex -= locked;
- }
- return source.rows[rowIndex].childNodes[colIndex];
- },
-
- getCellText : function(rowIndex, colIndex){
- return this.getCell(rowIndex, colIndex).firstChild.firstChild;
- },
-
- getCellBox : function(cell){
- var b = this.fly(cell).getBox();
- if(Roo.isOpera){ // opera fails to report the Y
- b.y = cell.offsetTop + this.mainBody.getY();
- }
- return b;
- },
-
- getCellIndex : function(cell){
- var id = String(cell.className).match(this.cellRE);
- if(id){
- return parseInt(id[1], 10);
- }
- return 0;
- },
-
- findHeaderIndex : function(n){
- var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
- return r ? this.getCellIndex(r) : false;
- },
-
- findHeaderCell : function(n){
- var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
- return r ? r : false;
- },
-
- findRowIndex : function(n){
- if(!n){
- return false;
- }
- var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
- return r ? r.rowIndex : false;
- },
-
- findCellIndex : function(node){
- var stop = this.el.dom;
- while(node && node != stop){
- if(this.findRE.test(node.className)){
- return this.getCellIndex(node);
- }
- node = node.parentNode;
- }
- return false;
- },
-
- getColumnId : function(index){
- return this.cm.getColumnId(index);
- },
-
- getSplitters : function()
- {
- if(this.splitterSelector){
- return Roo.DomQuery.select(this.splitterSelector);
- }else{
- return null;
- }
- },
-
- getSplitter : function(index){
- return this.getSplitters()[index];
- },
-
- onRowOver : function(e, t){
- var row;
- if((row = this.findRowIndex(t)) !== false){
- this.getRowComposite(row).addClass("x-grid-row-over");
- }
- },
+ autoSizeHeaders : true,
- onRowOut : function(e, t){
- var row;
- if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
- this.getRowComposite(row).removeClass("x-grid-row-over");
- }
- },
+ /**
+ * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+ */
+ monitorWindowResize : true,
- renderHeaders : function(){
- var cm = this.cm;
- var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
- var cb = [], lb = [], sb = [], lsb = [], p = {};
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- p.cellId = "x-grid-hd-0-" + i;
- p.splitId = "x-grid-csplit-0-" + i;
- p.id = cm.getColumnId(i);
- p.value = cm.getColumnHeader(i) || "";
- p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</) ? '' : p.value || "";
- p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
- if(!cm.isLocked(i)){
- cb[cb.length] = ct.apply(p);
- sb[sb.length] = st.apply(p);
- }else{
- lb[lb.length] = ct.apply(p);
- lsb[lsb.length] = st.apply(p);
- }
- }
- return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
- ht.apply({cells: cb.join(""), splits:sb.join("")})];
- },
+ /**
+ * @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,
- updateHeaders : function(){
- var html = this.renderHeaders();
- this.lockedHd.update(html[0]);
- this.mainHd.update(html[1]);
- },
+ /**
+ * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+ */
+ trackMouseOver : true,
/**
- * Focuses the specified row.
- * @param {Number} row The row index
- */
- focusRow : function(row)
- {
- //Roo.log('GridView.focusRow');
- var x = this.scroller.dom.scrollLeft;
- this.focusCell(row, 0, false);
- this.scroller.dom.scrollLeft = x;
- },
+ * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
+ */
+ /**
+ * @cfg {Boolean} enableDrop True to enable drop of elements. 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,
/**
- * Focuses the specified cell.
- * @param {Number} row The row index
- * @param {Number} col The column index
- * @param {Boolean} hscroll false to disable horizontal scrolling
+ * @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.
*/
- 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){
- this.focusEl.focus();
- }else{
- this.focusEl.focus.defer(1, this.focusEl);
- }
- },
+ autoExpandColumn : false,
/**
- * Scrolls the specified cell into view
- * @param {Number} row The row index
- * @param {Number} col The column index
- * @param {Boolean} hscroll false to disable horizontal scrolling
- */
- 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 null;
- }
- col = (col !== undefined ? col : 0);
- var cm = this.grid.colModel;
- while(cm.isHidden(col)){
- col++;
- }
+ * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
+ * Default is 50.
+ */
+ autoExpandMin : 50,
- var el = this.getCell(row, col);
- if(!el){
- return null;
- }
- var c = this.scroller.dom;
+ /**
+ * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
+ */
+ autoExpandMax : 1000,
- var ctop = parseInt(el.offsetTop, 10);
- 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;
- //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;
- }else if(cright > sright){
- c.scrollLeft = cright-c.clientWidth;
- }
- }
-
- return el;
- },
+ /**
+ * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
+ */
+ view : null,
- updateColumns : function(){
- this.grid.stopEditing();
- var cm = this.grid.colModel, colIds = this.getColumnIds();
- //var totalWidth = cm.getTotalWidth();
- var pos = 0;
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- //if(cm.isHidden(i)) continue;
- var w = cm.getColumnWidth(i);
- this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
- this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
- }
- this.updateSplitters();
- },
+ /**
+ * @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} dropTarget An {@link Roo.dd.DropTarget} config
+ */
+ dropTarget: false,
+ /**
+ * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
+ */
+ sortColMenu : false,
+
+ // private
+ rendered : false,
- generateRules : function(cm){
- var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
- Roo.util.CSS.removeStyleSheet(rulesId);
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var cid = cm.getColumnId(i);
- var align = '';
- if(cm.config[i].align){
- align = 'text-align:'+cm.config[i].align+';';
- }
- var hidden = '';
- if(cm.isHidden(i)){
- hidden = 'display:none;';
- }
- var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
- ruleBuf.push(
- this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
- this.hdSelector, cid, " {\n", align, width, "}\n",
- this.tdSelector, cid, " {\n",hidden,"\n}\n",
- this.splitSelector, cid, " {\n", hidden , "\n}\n");
- }
- return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
- },
+ /**
+ * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
+ * of a fixed width. Default is false.
+ */
+ /**
+ * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
+ */
+
+
+ /**
+ * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
+ * %0 is replaced with the number of selected rows.
+ */
+ ddText : "{0} selected row{1}",
+
+
+ /**
+ * Called once after all setup has been completed and the grid is ready to be rendered.
+ * @return {Roo.grid.Grid} this
+ */
+ render : function()
+ {
+ var c = this.container;
+ // try to detect autoHeight/width mode
+ if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
+ this.autoHeight = true;
+ }
+ var view = this.getView();
+ view.init(this);
- updateSplitters : function(){
- var cm = this.cm, s = this.getSplitters();
- if(s){ // splitters not created yet
- var pos = 0, locked = true;
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- if(cm.isHidden(i)) {
- continue;
- }
- var w = cm.getColumnWidth(i); // make sure it's a number
- if(!cm.isLocked(i) && locked){
- pos = 0;
- locked = false;
- }
- pos += w;
- s[i].style.left = (pos-this.splitOffset) + "px";
- }
+ c.on("click", this.onClick, this);
+ c.on("dblclick", this.onDblClick, this);
+ c.on("contextmenu", this.onContextMenu, this);
+ c.on("keydown", this.onKeyDown, this);
+ if (Roo.isTouch) {
+ c.on("touchstart", this.onTouchStart, this);
}
- },
- handleHiddenChange : function(colModel, colIndex, hidden){
- if(hidden){
- this.hideColumn(colIndex);
- }else{
- this.unhideColumn(colIndex);
- }
- },
+ this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
- hideColumn : function(colIndex){
- var cid = this.getColumnId(colIndex);
- this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
- this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
- if(Roo.isSafari){
- this.updateHeaders();
- }
- this.updateSplitters();
- this.layout();
- },
+ this.getSelectionModel().init(this);
- unhideColumn : function(colIndex){
- var cid = this.getColumnId(colIndex);
- this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
- this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
+ view.render();
- if(Roo.isSafari){
- this.updateHeaders();
+ if(this.loadMask){
+ this.loadMask = new Roo.LoadMask(this.container,
+ Roo.apply({store:this.dataSource}, this.loadMask));
}
- this.updateSplitters();
- this.layout();
- },
-
- insertRows : function(dm, firstRow, lastRow, isUpdate){
- if(firstRow == 0 && lastRow == dm.getCount()-1){
- this.refresh();
- }else{
- if(!isUpdate){
- this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
- }
- var s = this.getScrollState();
- var markup = this.renderRows(firstRow, lastRow);
- this.bufferRows(markup[0], this.getLockedTable(), firstRow);
- this.bufferRows(markup[1], this.getBodyTable(), firstRow);
- this.restoreScroll(s);
- if(!isUpdate){
- this.fireEvent("rowsinserted", this, firstRow, lastRow);
- this.syncRowHeights(firstRow, lastRow);
- this.stripeRows(firstRow);
- this.layout();
- }
+
+
+ if (this.toolbar && this.toolbar.xtype) {
+ this.toolbar.container = this.getView().getHeaderPanel(true);
+ this.toolbar = new Roo.Toolbar(this.toolbar);
}
- },
-
- bufferRows : function(markup, target, index){
- var before = null, trows = target.rows, tbody = target.tBodies[0];
- if(index < trows.length){
- before = trows[index];
+ if (this.footer && this.footer.xtype) {
+ this.footer.dataSource = this.getDataSource();
+ this.footer.container = this.getView().getFooterPanel(true);
+ this.footer = Roo.factory(this.footer, Roo);
}
- var b = document.createElement("div");
- b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
- var rows = b.firstChild.rows;
- for(var i = 0, len = rows.length; i < len; i++){
- if(before){
- tbody.insertBefore(rows[0], before);
- }else{
- tbody.appendChild(rows[0]);
- }
+ if (this.dropTarget && this.dropTarget.xtype) {
+ delete this.dropTarget.xtype;
+ this.dropTarget = new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
}
- b.innerHTML = "";
- b = null;
+
+
+ this.rendered = true;
+ this.fireEvent('render', this);
+ return this;
},
- deleteRows : function(dm, firstRow, lastRow){
- if(dm.getRowCount()<1){
- this.fireEvent("beforerefresh", this);
- this.mainBody.update("");
- this.lockedBody.update("");
- this.fireEvent("refresh", this);
- }else{
- this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
- var bt = this.getBodyTable();
- var tbody = bt.firstChild;
- var rows = bt.rows;
- for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
- tbody.removeChild(rows[firstRow]);
- }
- this.stripeRows(firstRow);
- this.fireEvent("rowsdeleted", this, firstRow, lastRow);
+ /**
+ * Reconfigures the grid to use a different Store and Column Model.
+ * The View will be bound to the new objects and refreshed.
+ * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
+ * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
+ */
+ reconfigure : function(dataSource, colModel){
+ if(this.loadMask){
+ this.loadMask.destroy();
+ this.loadMask = new Roo.LoadMask(this.container,
+ Roo.apply({store:dataSource}, this.loadMask));
}
+ this.view.bind(dataSource, colModel);
+ this.dataSource = dataSource;
+ this.colModel = colModel;
+ this.view.refresh(true);
},
-
- updateRows : function(dataSource, firstRow, lastRow){
- var s = this.getScrollState();
- this.refresh();
- this.restoreScroll(s);
- },
-
- handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
- if(!noRefresh){
- this.refresh();
+ /**
+ * addColumns
+ * Add's a column, default at the end..
+
+ * @param {int} position to add (default end)
+ * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel}
+ */
+ addColumns : function(pos, ar)
+ {
+
+ for (var i =0;i< ar.length;i++) {
+ var cfg = ar[i];
+ cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
+ this.cm.lookup[cfg.id] = cfg;
}
- this.updateHeaderSortState();
- },
-
- getScrollState : function(){
- var sb = this.scroller.dom;
- return {left: sb.scrollLeft, top: sb.scrollTop};
+
+ if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
+ pos = this.cm.config.length; //this.cm.config.push(cfg);
+ }
+ pos = Math.max(0,pos);
+ ar.unshift(0);
+ ar.unshift(pos);
+ this.cm.config.splice.apply(this.cm.config, ar);
+
+
+
+ this.view.generateRules(this.cm);
+ this.view.refresh(true);
+
+ },
+
+
+
+
+ // private
+ onKeyDown : function(e){
+ this.fireEvent("keydown", e);
},
- stripeRows : function(startRow){
- if(!this.grid.stripeRows || this.ds.getCount() < 1){
- return;
+ /**
+ * Destroy this grid.
+ * @param {Boolean} removeEl True to remove the element
+ */
+ destroy : function(removeEl, keepListeners){
+ if(this.loadMask){
+ this.loadMask.destroy();
}
- startRow = startRow || 0;
- var rows = this.getBodyTable().rows;
- var lrows = this.getLockedTable().rows;
- var cls = ' x-grid-row-alt ';
- for(var i = startRow, len = rows.length; i < len; i++){
- var row = rows[i], lrow = lrows[i];
- var isAlt = ((i+1) % 2 == 0);
- var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
- if(isAlt == hasAlt){
- continue;
- }
- if(isAlt){
- row.className += " x-grid-row-alt";
- }else{
- row.className = row.className.replace("x-grid-row-alt", "");
- }
- if(lrow){
- lrow.className = row.className;
- }
+ var c = this.container;
+ c.removeAllListeners();
+ this.view.destroy();
+ this.colModel.purgeListeners();
+ if(!keepListeners){
+ this.purgeListeners();
+ }
+ c.update("");
+ if(removeEl === true){
+ c.remove();
}
},
- restoreScroll : function(state){
- //Roo.log('GridView.restoreScroll');
- var sb = this.scroller.dom;
- sb.scrollLeft = state.left;
- sb.scrollTop = state.top;
- this.syncScroll();
- },
-
- syncScroll : function(){
- //Roo.log('GridView.syncScroll');
- var sb = this.scroller.dom;
- var sh = this.mainHd.dom;
- var bs = this.mainBody.dom;
- var lv = this.lockedBody.dom;
- sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
- lv.scrollTop = bs.scrollTop = sb.scrollTop;
- },
-
- handleScroll : function(e){
- this.syncScroll();
- var sb = this.scroller.dom;
- this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
- e.stopEvent();
- },
-
- handleWheel : function(e){
- var d = e.getWheelDelta();
- this.scroller.dom.scrollTop -= d*22;
- // set this here to prevent jumpy scrolling on large tables
- this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
- e.stopEvent();
- },
-
- renderRows : function(startRow, endRow){
- // pull in all the crap needed to render rows
- var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
- var colCount = cm.getColumnCount();
-
- if(ds.getCount() < 1){
- return ["", ""];
+ // private
+ processEvent : function(name, e){
+ // does this fire select???
+ //Roo.log('grid:processEvent ' + name);
+
+ if (name != 'touchstart' ) {
+ this.fireEvent(name, e);
}
-
- // build a map for all the columns
- var cs = [];
- for(var i = 0; i < colCount; i++){
- var name = cm.getDataIndex(i);
- cs[i] = {
- name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
- renderer : cm.getRenderer(i),
- id : cm.getColumnId(i),
- locked : cm.isLocked(i),
- has_editor : cm.isCellEditable(i)
- };
+
+ var t = e.getTarget();
+ var v = this.view;
+ var header = v.findHeaderIndex(t);
+ if(header !== false){
+ var ename = name == 'touchstart' ? 'click' : name;
+
+ this.fireEvent("header" + ename, this, header, e);
+ }else{
+ var row = v.findRowIndex(t);
+ var cell = v.findCellIndex(t);
+ if (name == 'touchstart') {
+ // first touch is always a click.
+ // hopefull this happens after selection is updated.?
+ name = false;
+
+ if (typeof(this.selModel.getSelectedCell) != 'undefined') {
+ var cs = this.selModel.getSelectedCell();
+ if (row == cs[0] && cell == cs[1]){
+ name = 'dblclick';
+ }
+ }
+ if (typeof(this.selModel.getSelections) != 'undefined') {
+ var cs = this.selModel.getSelections();
+ var ds = this.dataSource;
+ if (cs.length == 1 && ds.getAt(row) == cs[0]){
+ name = 'dblclick';
+ }
+ }
+ if (!name) {
+ return;
+ }
+ }
+
+
+ if(row !== false){
+ this.fireEvent("row" + name, this, row, e);
+ if(cell !== false){
+ this.fireEvent("cell" + name, this, row, cell, e);
+ }
+ }
}
+ },
- startRow = startRow || 0;
- endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+ // private
+ onClick : function(e){
+ this.processEvent("click", e);
+ },
+ // private
+ onTouchStart : function(e){
+ this.processEvent("touchstart", e);
+ },
- // records to render
- var rs = ds.getRange(startRow, endRow);
+ // private
+ onContextMenu : function(e, t){
+ this.processEvent("contextmenu", e);
+ },
- return this.doRender(cs, rs, ds, startRow, colCount, stripe);
+ // private
+ onDblClick : function(e){
+ this.processEvent("dblclick", e);
},
- // As much as I hate to duplicate code, this was branched because FireFox really hates
- // [].join("") on strings. The performance difference was substantial enough to
- // branch this function
- doRender : Roo.isGecko ?
- function(cs, rs, ds, startRow, colCount, stripe){
- var ts = this.templates, ct = ts.cell, rt = ts.row;
- // buffers
- var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
-
- var hasListener = this.grid.hasListener('rowclass');
- var rowcfg = {};
- for(var j = 0, len = rs.length; j < len; j++){
- r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
- for(var i = 0; i < colCount; i++){
- c = cs[i];
- p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
- p.id = c.id;
- p.css = p.attr = "";
- p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
- if(p.value == undefined || p.value === "") {
- p.value = " ";
- }
- if(c.has_editor){
- p.css += ' x-grid-editable-cell';
- }
- if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
- p.css += ' x-grid-dirty-cell';
- }
- var markup = ct.apply(p);
- if(!c.locked){
- cb+= markup;
- }else{
- lcb+= markup;
- }
- }
- var alt = [];
- if(stripe && ((rowIndex+1) % 2 == 0)){
- alt.push("x-grid-row-alt")
- }
- if(r.dirty){
- alt.push( " x-grid-dirty-row");
- }
- rp.cells = lcb;
- if(this.getRowClass){
- alt.push(this.getRowClass(r, rowIndex));
- }
- if (hasListener) {
- rowcfg = {
-
- record: r,
- rowIndex : rowIndex,
- rowClass : ''
- };
- this.grid.fireEvent('rowclass', this, rowcfg);
- alt.push(rowcfg.rowClass);
- }
- rp.alt = alt.join(" ");
- lbuf+= rt.apply(rp);
- rp.cells = cb;
- buf+= rt.apply(rp);
+ // private
+ walkCells : function(row, col, step, fn, scope){
+ var cm = this.colModel, clen = cm.getColumnCount();
+ var ds = this.dataSource, rlen = ds.getCount(), first = true;
+ if(step < 0){
+ if(col < 0){
+ row--;
+ first = false;
+ }
+ while(row >= 0){
+ if(!first){
+ col = clen-1;
}
- return [lbuf, buf];
- } :
- function(cs, rs, ds, startRow, colCount, stripe){
- var ts = this.templates, ct = ts.cell, rt = ts.row;
- // buffers
- var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
- var hasListener = this.grid.hasListener('rowclass');
-
- var rowcfg = {};
- for(var j = 0, len = rs.length; j < len; j++){
- r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
- for(var i = 0; i < colCount; i++){
- c = cs[i];
- p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
- p.id = c.id;
- p.css = p.attr = "";
- p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
- if(p.value == undefined || p.value === "") {
- p.value = " ";
- }
- //Roo.log(c);
- if(c.has_editor){
- p.css += ' x-grid-editable-cell';
- }
- if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
- p.css += ' x-grid-dirty-cell'
- }
-
- var markup = ct.apply(p);
- if(!c.locked){
- cb[cb.length] = markup;
- }else{
- lcb[lcb.length] = markup;
- }
- }
- var alt = [];
- if(stripe && ((rowIndex+1) % 2 == 0)){
- alt.push( "x-grid-row-alt");
- }
- if(r.dirty){
- alt.push(" x-grid-dirty-row");
- }
- rp.cells = lcb;
- if(this.getRowClass){
- alt.push( this.getRowClass(r, rowIndex));
+ first = false;
+ while(col >= 0){
+ if(fn.call(scope || this, row, col, cm) === true){
+ return [row, col];
}
- if (hasListener) {
- rowcfg = {
-
- record: r,
- rowIndex : rowIndex,
- rowClass : ''
- };
- this.grid.fireEvent('rowclass', this, rowcfg);
- alt.push(rowcfg.rowClass);
+ col--;
+ }
+ row--;
+ }
+ } else {
+ if(col >= clen){
+ row++;
+ first = false;
+ }
+ while(row < rlen){
+ if(!first){
+ col = 0;
+ }
+ first = false;
+ while(col < clen){
+ if(fn.call(scope || this, row, col, cm) === true){
+ return [row, col];
}
-
- rp.alt = alt.join(" ");
- rp.cells = lcb.join("");
- lbuf[lbuf.length] = rt.apply(rp);
- rp.cells = cb.join("");
- buf[buf.length] = rt.apply(rp);
+ col++;
}
- return [lbuf.join(""), buf.join("")];
- },
+ row++;
+ }
+ }
+ return null;
+ },
- renderBody : function(){
- var markup = this.renderRows();
- var bt = this.templates.body;
- return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
+ // private
+ getSelections : function(){
+ return this.selModel.getSelections();
},
/**
- * Refreshes the grid
- * @param {Boolean} headersToo
+ * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
+ * but if manual update is required this method will initiate it.
*/
- refresh : function(headersToo){
- this.fireEvent("beforerefresh", this);
- this.grid.stopEditing();
- var result = this.renderBody();
- this.lockedBody.update(result[0]);
- this.mainBody.update(result[1]);
- if(headersToo === true){
- this.updateHeaders();
- this.updateColumns();
- this.updateSplitters();
- this.updateHeaderSortState();
+ autoSize : function(){
+ if(this.rendered){
+ this.view.layout();
+ if(this.view.adjustForScroll){
+ this.view.adjustForScroll();
+ }
}
- this.syncRowHeights();
- this.layout();
- this.fireEvent("refresh", this);
},
- handleColumnMove : function(cm, oldIndex, newIndex){
- this.indexMap = null;
- var s = this.getScrollState();
- this.refresh(true);
- this.restoreScroll(s);
- this.afterMove(newIndex);
+ /**
+ * Returns the grid's underlying element.
+ * @return {Element} The element
+ */
+ getGridEl : function(){
+ return this.container;
},
- afterMove : function(colIndex){
- 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);
-
-
- }
-
- },
+ // private for compatibility, overridden by editor grid
+ stopEditing : function(){},
- updateCell : function(dm, rowIndex, dataIndex){
- var colIndex = this.getColumnIndexByDataIndex(dataIndex);
- if(typeof colIndex == "undefined"){ // not present in grid
- return;
+ /**
+ * Returns the grid's SelectionModel.
+ * @return {SelectionModel}
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.grid.RowSelectionModel();
}
- var cm = this.grid.colModel;
- var cell = this.getCell(rowIndex, colIndex);
- var cellText = this.getCellText(rowIndex, colIndex);
+ return this.selModel;
+ },
- var p = {
- cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
- id : cm.getColumnId(colIndex),
- css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
- };
- var renderer = cm.getRenderer(colIndex);
- var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
- if(typeof val == "undefined" || val === "") {
- val = " ";
- }
- cellText.innerHTML = val;
- cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
- this.syncRowHeights(rowIndex, rowIndex);
+ /**
+ * Returns the grid's DataSource.
+ * @return {DataSource}
+ */
+ getDataSource : function(){
+ return this.dataSource;
},
- calcColumnWidth : function(colIndex, maxRowsToMeasure){
- var maxWidth = 0;
- if(this.grid.autoSizeHeaders){
- var h = this.getHeaderCellMeasure(colIndex);
- maxWidth = Math.max(maxWidth, h.scrollWidth);
- }
- var tb, index;
- if(this.cm.isLocked(colIndex)){
- tb = this.getLockedTable();
- index = colIndex;
- }else{
- tb = this.getBodyTable();
- index = colIndex - this.cm.getLockedCount();
- }
- if(tb && tb.rows){
- var rows = tb.rows;
- var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
- for(var i = 0; i < stopIndex; i++){
- var cell = rows[i].childNodes[index].firstChild;
- maxWidth = Math.max(maxWidth, cell.scrollWidth);
- }
- }
- return maxWidth + /*margin for error in IE*/ 5;
+ /**
+ * Returns the grid's ColumnModel.
+ * @return {ColumnModel}
+ */
+ getColumnModel : function(){
+ return this.colModel;
},
+
/**
- * Autofit a column to its content.
- * @param {Number} colIndex
- * @param {Boolean} forceMinSize true to force the column to go smaller if possible
+ * Returns the grid's GridView object.
+ * @return {GridView}
*/
- autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
- if(this.cm.isHidden(colIndex)){
- return; // can't calc a hidden column
- }
- if(forceMinSize){
- var cid = this.cm.getColumnId(colIndex);
- this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
- if(this.grid.autoSizeHeaders){
- this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
- }
- }
- var newWidth = this.calcColumnWidth(colIndex);
- this.cm.setColumnWidth(colIndex,
- Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
- if(!suppressEvent){
- this.grid.fireEvent("columnresize", colIndex, newWidth);
+ getView : function(){
+ if(!this.view){
+ this.view = new Roo.grid.GridView(this.viewConfig);
+ this.relayEvents(this.view, [
+ "beforerowremoved", "beforerowsinserted",
+ "beforerefresh", "rowremoved",
+ "rowsinserted", "rowupdated" ,"refresh"
+ ]);
}
+ return this.view;
},
-
/**
- * Autofits all columns to their content and then expands to fit any extra space in the grid
+ * Called to get grid's drag proxy text, by default returns this.ddText.
+ * Override this to put something different in the dragged text.
+ * @return {String}
*/
- autoSizeColumns : function(){
- var cm = this.grid.colModel;
+ getDragDropText : function(){
+ var count = this.selModel.getCount();
+ return String.format(this.ddText, count, count == 1 ? '' : 's');
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ /**
+ * @class Roo.grid.AbstractGridView
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid Views
+ * @constructor
+ */
+Roo.grid.AbstractGridView = function(){
+ this.grid = null;
+
+ this.events = {
+ "beforerowremoved" : true,
+ "beforerowsinserted" : true,
+ "beforerefresh" : true,
+ "rowremoved" : true,
+ "rowsinserted" : true,
+ "rowupdated" : true,
+ "refresh" : true
+ };
+ Roo.grid.AbstractGridView.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
+ rowClass : "x-grid-row",
+ cellClass : "x-grid-cell",
+ tdClass : "x-grid-td",
+ hdClass : "x-grid-hd",
+ splitClass : "x-grid-hd-split",
+
+ init: function(grid){
+ this.grid = grid;
+ var cid = this.grid.getGridEl().id;
+ this.colSelector = "#" + cid + " ." + this.cellClass + "-";
+ this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
+ this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
+ this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
+ },
+
+ getColumnRenderers : function(){
+ var renderers = [];
+ var cm = this.grid.colModel;
var colCount = cm.getColumnCount();
for(var i = 0; i < colCount; i++){
- this.autoSizeColumn(i, true, true);
+ renderers[i] = cm.getRenderer(i);
}
- if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
- this.fitColumns();
- }else{
- this.updateColumns();
- this.layout();
+ return renderers;
+ },
+
+ getColumnIds : function(){
+ var ids = [];
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ for(var i = 0; i < colCount; i++){
+ ids[i] = cm.getColumnId(i);
+ }
+ return ids;
+ },
+
+ getDataIndexes : function(){
+ if(!this.indexMap){
+ this.indexMap = this.buildIndexMap();
}
+ return this.indexMap.colToData;
},
-
+
+ getColumnIndexByDataIndex : function(dataIndex){
+ if(!this.indexMap){
+ this.indexMap = this.buildIndexMap();
+ }
+ return this.indexMap.dataToCol[dataIndex];
+ },
+
/**
- * Autofits all columns to the grid's width proportionate with their current size
- * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
+ * Set a css style for a column dynamically.
+ * @param {Number} colIndex The index of the column
+ * @param {String} name The css property name
+ * @param {String} value The css value
*/
- fitColumns : function(reserveScrollSpace){
- var cm = this.grid.colModel;
- var colCount = cm.getColumnCount();
- var cols = [];
- var width = 0;
- var i, w;
- for (i = 0; i < colCount; i++){
- if(!cm.isHidden(i) && !cm.isFixed(i)){
- w = cm.getColumnWidth(i);
- cols.push(i);
- cols.push(w);
- width += w;
- }
- }
- var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
- if(reserveScrollSpace){
- avail -= 17;
+ setCSSStyle : function(colIndex, name, value){
+ var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
+ Roo.util.CSS.updateRule(selector, name, value);
+ },
+
+ generateRules : function(cm){
+ var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
+ Roo.util.CSS.removeStyleSheet(rulesId);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var cid = cm.getColumnId(i);
+ ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
+ this.tdSelector, cid, " {\n}\n",
+ this.hdSelector, cid, " {\n}\n",
+ this.splitSelector, cid, " {\n}\n");
}
- var frac = (avail - cm.getTotalWidth())/width;
- while (cols.length){
- w = cols.pop();
- i = cols.pop();
- cm.setColumnWidth(i, Math.floor(w + w*frac), true);
+ return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDragZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+ Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
+ if(hd2){
+ this.setHandleElId(Roo.id(hd));
+ this.setOuterHandleElId(Roo.id(hd2));
+ }
+ this.scroll = false;
+};
+Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
+ maxDragWidth: 120,
+ getDragData : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var h = this.view.findHeaderCell(t);
+ if(h){
+ return {ddel: h.firstChild, header:h};
}
- this.updateColumns();
- this.layout();
+ return false;
},
- onRowSelect : function(rowIndex){
- var row = this.getRowComposite(rowIndex);
- row.addClass("x-grid-row-selected");
+ onInitDrag : function(e){
+ this.view.headersDisabled = true;
+ var clone = this.dragData.ddel.cloneNode(true);
+ clone.id = Roo.id();
+ clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
+ this.proxy.update(clone);
+ return true;
},
- onRowDeselect : function(rowIndex){
- var row = this.getRowComposite(rowIndex);
- row.removeClass("x-grid-row-selected");
+ afterValidDrop : function(){
+ var v = this.view;
+ setTimeout(function(){
+ v.headersDisabled = false;
+ }, 50);
},
- onCellSelect : function(row, col){
- var cell = this.getCell(row, col);
- if(cell){
- Roo.fly(cell).addClass("x-grid-cell-selected");
- }
- },
+ afterInvalidDrop : function(){
+ var v = this.view;
+ setTimeout(function(){
+ v.headersDisabled = false;
+ }, 50);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDropZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ // split the proxies so they don't interfere with mouse events
+ this.proxyTop = Roo.DomHelper.append(document.body, {
+ cls:"col-move-top", html:" "
+ }, true);
+ this.proxyBottom = Roo.DomHelper.append(document.body, {
+ cls:"col-move-bottom", html:" "
+ }, true);
+ this.proxyTop.hide = this.proxyBottom.hide = function(){
+ this.setLeftTop(-100,-100);
+ this.setStyle("visibility", "hidden");
+ };
+ this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+ // temporarily disabled
+ //Roo.dd.ScrollManager.register(this.view.scroller.dom);
+ Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
+};
+Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
+ proxyOffsets : [-4, -9],
+ fly: Roo.Element.fly,
- onCellDeselect : function(row, col){
- var cell = this.getCell(row, col);
- if(cell){
- Roo.fly(cell).removeClass("x-grid-cell-selected");
+ getTargetFromEvent : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var cindex = this.view.findCellIndex(t);
+ if(cindex !== false){
+ return this.view.getHeaderCell(cindex);
}
+ return null;
},
- updateHeaderSortState : function(){
-
- // 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;
+ nextVisible : function(h){
+ var v = this.view, cm = this.grid.colModel;
+ h = h.nextSibling;
+ while(h){
+ if(!cm.isHidden(v.getCellIndex(h))){
+ return h;
}
- mstate[state.field] = state.direction;
- // FIXME... - this is not used here.. but might be elsewhere..
- this.sortState = state;
-
- } else {
- mstate = this.ds.sortToggle;
+ h = h.nextSibling;
}
- //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]);
+ return null;
+ },
+
+ prevVisible : function(h){
+ var v = this.view, cm = this.grid.colModel;
+ h = h.prevSibling;
+ while(h){
+ if(!cm.isHidden(v.getCellIndex(h))){
+ return h;
}
+ h = h.prevSibling;
}
-
-
-
+ return null;
},
+ positionIndicator : function(h, n, e){
+ var x = Roo.lib.Event.getPageX(e);
+ var r = Roo.lib.Dom.getRegion(n.firstChild);
+ var px, pt, py = r.top + this.proxyOffsets[1];
+ if((r.right - x) <= (r.right-r.left)/2){
+ px = r.right+this.view.borderWidth;
+ pt = "after";
+ }else{
+ px = r.left;
+ pt = "before";
+ }
+ var oldIndex = this.view.getCellIndex(h);
+ var newIndex = this.view.getCellIndex(n);
- handleHeaderClick : function(g, index,e){
-
- Roo.log("header click");
-
- if (Roo.isTouch) {
- // touch events on header are handled by context
- this.handleHdCtx(g,index,e);
- return;
+ if(this.grid.colModel.isFixed(newIndex)){
+ return false;
}
-
-
- if(this.headersDisabled){
- return;
+
+ var locked = this.grid.colModel.isLocked(newIndex);
+
+ if(pt == "after"){
+ newIndex++;
}
- var dm = g.dataSource, cm = g.colModel;
- if(!cm.isSortable(index)){
- return;
+ if(oldIndex < newIndex){
+ newIndex--;
}
- 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;
+ if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
+ return false;
}
-
-
- dm.sort(cm.getDataIndex(index));
+ px += this.proxyOffsets[0];
+ this.proxyTop.setLeftTop(px, py);
+ this.proxyTop.show();
+ if(!this.bottomOffset){
+ this.bottomOffset = this.view.mainHd.getHeight();
+ }
+ this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
+ this.proxyBottom.show();
+ return pt;
},
-
- destroy : function(){
- if(this.colMenu){
- this.colMenu.removeAll();
- Roo.menu.MenuMgr.unregister(this.colMenu);
- this.colMenu.getEl().remove();
- delete this.colMenu;
+ onNodeEnter : function(n, dd, e, data){
+ if(data.header != n){
+ this.positionIndicator(data.header, n, e);
}
- if(this.hmenu){
- this.hmenu.removeAll();
- Roo.menu.MenuMgr.unregister(this.hmenu);
- this.hmenu.getEl().remove();
- delete this.hmenu;
+ },
+
+ onNodeOver : function(n, dd, e, data){
+ var result = false;
+ if(data.header != n){
+ result = this.positionIndicator(data.header, n, e);
}
- if(this.grid.enableColumnMove){
- var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
- if(dds){
- for(var dd in dds){
- if(!dds[dd].config.isTarget && dds[dd].dragElId){
- var elid = dds[dd].dragElId;
- dds[dd].unreg();
- Roo.get(elid).remove();
- } else if(dds[dd].config.isTarget){
- dds[dd].proxyTop.remove();
- dds[dd].proxyBottom.remove();
- dds[dd].unreg();
- }
- if(Roo.dd.DDM.locationCache[dd]){
- delete Roo.dd.DDM.locationCache[dd];
- }
- }
- delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
- }
+ if(!result){
+ this.proxyTop.hide();
+ this.proxyBottom.hide();
}
- Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
- this.bind(null, null);
- Roo.EventManager.removeResizeListener(this.onWindowResize, this);
+ return result ? this.dropAllowed : this.dropNotAllowed;
},
- handleLockChange : function(){
- this.refresh(true);
+ onNodeOut : function(n, dd, e, data){
+ this.proxyTop.hide();
+ this.proxyBottom.hide();
},
- onDenyColumnLock : function(){
+ onNodeDrop : function(n, dd, e, data){
+ var h = data.header;
+ if(h != n){
+ var cm = this.grid.colModel;
+ var x = Roo.lib.Event.getPageX(e);
+ var r = Roo.lib.Dom.getRegion(n.firstChild);
+ var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
+ var oldIndex = this.view.getCellIndex(h);
+ var newIndex = this.view.getCellIndex(n);
+ var locked = cm.isLocked(newIndex);
+ if(pt == "after"){
+ newIndex++;
+ }
+ if(oldIndex < newIndex){
+ newIndex--;
+ }
+ if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
+ return false;
+ }
+ cm.setLocked(oldIndex, locked, true);
+ cm.moveColumn(oldIndex, newIndex);
+ this.grid.fireEvent("columnmove", oldIndex, newIndex);
+ return true;
+ }
+ return false;
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.GridView
+ * @extends Roo.util.Observable
+ *
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.GridView = function(config){
+ Roo.grid.GridView.superclass.constructor.call(this);
+ this.el = null;
- },
+ Roo.apply(this, config);
+};
- onDenyColumnHide : function(){
+Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
- },
+ unselectable : 'unselectable="on"',
+ unselectableCls : 'x-unselectable',
+
+
+ rowClass : "x-grid-row",
- handleHdMenuClick : function(item){
- var index = this.hdCtxIndex;
- var cm = this.cm, ds = this.ds;
- switch(item.id){
- case "asc":
- ds.sort(cm.getDataIndex(index), "ASC");
- break;
- case "desc":
- ds.sort(cm.getDataIndex(index), "DESC");
- break;
- case "lock":
- var lc = cm.getLockedCount();
- if(cm.getColumnCount(true) <= lc+1){
- this.onDenyColumnLock();
- return;
- }
- if(lc != index){
- cm.setLocked(index, true, true);
- cm.moveColumn(index, lc);
- this.grid.fireEvent("columnmove", index, lc);
- }else{
- cm.setLocked(index, true);
- }
- break;
- case "unlock":
- var lc = cm.getLockedCount();
- if((lc-1) != index){
- cm.setLocked(index, false, true);
- cm.moveColumn(index, lc-1);
- this.grid.fireEvent("columnmove", index, lc-1);
- }else{
- cm.setLocked(index, false);
- }
- break;
- case 'wider': // used to expand cols on touch..
- case 'narrow':
- var cw = cm.getColumnWidth(index);
- cw += (item.id == 'wider' ? 1 : -1) * 50;
- cw = Math.max(0, cw);
- cw = Math.min(cw,4000);
- cm.setColumnWidth(index, cw);
- break;
-
- default:
- index = cm.getIndexById(item.id.substr(4));
- if(index != -1){
- if(item.checked && cm.getColumnCount(true) <= 1){
- this.onDenyColumnHide();
- return false;
- }
- cm.setHidden(index, item.checked);
- }
- }
- return true;
- },
+ cellClass : "x-grid-col",
- beforeColMenuShow : function(){
- var cm = this.cm, colCount = cm.getColumnCount();
- this.colMenu.removeAll();
-
- var items = [];
- for(var i = 0; i < colCount; i++){
- items.push({
- id: "col-"+cm.getColumnId(i),
- text: cm.getColumnHeader(i),
- checked: !cm.isHidden(i),
- hideOnClick:false
- });
- }
-
- if (this.grid.sortColMenu) {
- items.sort(function(a,b) {
- if (a.text == b.text) {
- return 0;
- }
- return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
- });
- }
-
- for(var i = 0; i < colCount; i++){
- this.colMenu.add(new Roo.menu.CheckItem(items[i]));
- }
- },
+ tdClass : "x-grid-td",
- handleHdCtx : function(g, index, e){
- e.stopEvent();
- var hd = this.getHeaderCell(index);
- this.hdCtxIndex = index;
- var ms = this.hmenu.items, cm = this.cm;
- ms.get("asc").setDisabled(!cm.isSortable(index));
- ms.get("desc").setDisabled(!cm.isSortable(index));
- if(this.grid.enableColLock !== false){
- ms.get("lock").setDisabled(cm.isLocked(index));
- ms.get("unlock").setDisabled(!cm.isLocked(index));
- }
- this.hmenu.show(hd, "tl-bl");
- },
+ hdClass : "x-grid-hd",
- handleHdOver : function(e){
- var hd = this.findHeaderCell(e.getTarget());
- if(hd && !this.headersDisabled){
- if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
- this.fly(hd).addClass("x-grid-hd-over");
- }
- }
- },
+ splitClass : "x-grid-split",
- handleHdOut : function(e){
- var hd = this.findHeaderCell(e.getTarget());
- if(hd){
- this.fly(hd).removeClass("x-grid-hd-over");
- }
- },
+ sortClasses : ["sort-asc", "sort-desc"],
- handleSplitDblClick : function(e, t){
- var i = this.getCellIndex(t);
- if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
- this.autoSizeColumn(i, true);
- this.layout();
- }
- },
+ enableMoveAnim : false,
- render : function(){
+ hlColor: "C3DAF9",
- var cm = this.cm;
- var colCount = cm.getColumnCount();
+ dh : Roo.DomHelper,
- if(this.grid.monitorWindowResize === true){
- Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
- }
- var header = this.renderHeaders();
- var body = this.templates.body.apply({rows:""});
- var html = this.templates.master.apply({
- lockedBody: body,
- body: body,
- lockedHeader: header[0],
- header: header[1]
- });
+ fly : Roo.Element.fly,
- //this.updateColumns();
+ css : Roo.util.CSS,
- this.grid.getGridEl().dom.innerHTML = html;
+ borderWidth: 1,
- this.initElements();
-
- // a kludge to fix the random scolling effect in webkit
- this.el.on("scroll", function() {
- this.el.dom.scrollTop=0; // hopefully not recursive..
- },this);
+ splitOffset: 3,
+
+ scrollIncrement : 22,
+
+ cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
+
+ findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
+
+ bind : function(ds, cm){
+ if(this.ds){
+ this.ds.un("load", this.onLoad, this);
+ this.ds.un("datachanged", this.onDataChange, this);
+ this.ds.un("add", this.onAdd, this);
+ this.ds.un("remove", this.onRemove, this);
+ this.ds.un("update", this.onUpdate, this);
+ this.ds.un("clear", this.onClear, this);
+ }
+ if(ds){
+ ds.on("load", this.onLoad, this);
+ ds.on("datachanged", this.onDataChange, this);
+ ds.on("add", this.onAdd, this);
+ ds.on("remove", this.onRemove, this);
+ ds.on("update", this.onUpdate, this);
+ ds.on("clear", this.onClear, this);
+ }
+ this.ds = ds;
+
+ if(this.cm){
+ this.cm.un("widthchange", this.onColWidthChange, this);
+ this.cm.un("headerchange", this.onHeaderChange, this);
+ this.cm.un("hiddenchange", this.onHiddenChange, this);
+ this.cm.un("columnmoved", this.onColumnMove, this);
+ this.cm.un("columnlockchange", this.onColumnLock, this);
+ }
+ if(cm){
+ this.generateRules(cm);
+ cm.on("widthchange", this.onColWidthChange, this);
+ cm.on("headerchange", this.onHeaderChange, this);
+ cm.on("hiddenchange", this.onHiddenChange, this);
+ cm.on("columnmoved", this.onColumnMove, this);
+ cm.on("columnlockchange", this.onColumnLock, this);
+ }
+ this.cm = cm;
+ },
- this.scroller.on("scroll", this.handleScroll, this);
- this.lockedBody.on("mousewheel", this.handleWheel, this);
- this.mainBody.on("mousewheel", this.handleWheel, this);
+ init: function(grid){
+ Roo.grid.GridView.superclass.init.call(this, grid);
- this.mainHd.on("mouseover", this.handleHdOver, this);
- this.mainHd.on("mouseout", this.handleHdOut, this);
- this.mainHd.on("dblclick", this.handleSplitDblClick, this,
- {delegate: "."+this.splitClass});
+ this.bind(grid.dataSource, grid.colModel);
- this.lockedHd.on("mouseover", this.handleHdOver, this);
- this.lockedHd.on("mouseout", this.handleHdOut, this);
- this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
- {delegate: "."+this.splitClass});
+ grid.on("headerclick", this.handleHeaderClick, this);
- if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
- new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ if(grid.trackMouseOver){
+ grid.on("mouseover", this.onRowOver, this);
+ grid.on("mouseout", this.onRowOut, this);
}
+ grid.cancelTextSelection = function(){};
+ this.gridId = grid.id;
- this.updateSplitters();
+ var tpls = this.templates || {};
- if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
- new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
- new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ 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-header">{lockedHeader}</div>',
+ '<div class="x-grid-body">{lockedBody}</div>',
+ "</div>",
+ '<div class="x-grid-viewport">',
+ '<div class="x-grid-header">{header}</div>',
+ '<div class="x-grid-body">{body}</div>',
+ "</div>",
+ '<div class="x-grid-bottombar"></div>',
+
+ '<div class="x-grid-resize-proxy"> </div>',
+ "</div>"
+ );
+ tpls.master.disableformats = true;
}
- if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
- this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
- this.hmenu.add(
- {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
- {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
+ if(!tpls.header){
+ tpls.header = new Roo.Template(
+ '<table border="0" cellspacing="0" cellpadding="0">',
+ '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
+ "</table>{splits}"
);
- if(this.grid.enableColLock !== false){
- this.hmenu.add('-',
- {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
- {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
- );
- }
- if (Roo.isTouch) {
- this.hmenu.add('-',
- {id:"wider", text: this.columnsWiderText},
- {id:"narrow", text: this.columnsNarrowText }
- );
-
-
- }
-
- if(this.grid.enableColumnHide !== false){
+ tpls.header.disableformats = true;
+ }
+ tpls.header.compile();
- this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
- this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
- this.colMenu.on("itemclick", this.handleHdMenuClick, this);
+ if(!tpls.hcell){
+ tpls.hcell = new Roo.Template(
+ '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
+ '<div class="x-grid-hd-text ' + this.unselectableCls + '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
+ "</div></td>"
+ );
+ tpls.hcell.disableFormats = true;
+ }
+ tpls.hcell.compile();
- this.hmenu.add('-',
- {id:"columns", text: this.columnsText, menu: this.colMenu}
- );
- }
- this.hmenu.on("itemclick", this.handleHdMenuClick, this);
+ if(!tpls.hsplit){
+ tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
+ this.unselectableCls + '" ' + this.unselectable +'> </div>');
+ tpls.hsplit.disableFormats = true;
+ }
+ tpls.hsplit.compile();
- this.grid.on("headercontextmenu", this.handleHdCtx, this);
+ if(!tpls.body){
+ tpls.body = new Roo.Template(
+ '<table border="0" cellspacing="0" cellpadding="0">',
+ "<tbody>{rows}</tbody>",
+ "</table>"
+ );
+ tpls.body.disableFormats = true;
}
+ tpls.body.compile();
- if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
- this.dd = new Roo.grid.GridDragZone(this.grid, {
- ddGroup : this.grid.ddGroup || 'GridDD'
- });
-
+ if(!tpls.row){
+ tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
+ tpls.row.disableFormats = true;
}
+ tpls.row.compile();
- /*
- for(var i = 0; i < colCount; i++){
- if(cm.isHidden(i)){
- this.hideColumn(i);
- }
- if(cm.config[i].align){
- this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
- this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
- }
- }*/
-
- this.updateHeaderSortState();
+ if(!tpls.cell){
+ tpls.cell = new Roo.Template(
+ '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
+ '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
+ this.unselectableCls + '" ' + this.unselectable +'" {attr}>{value}</div></div>',
+ "</td>"
+ );
+ tpls.cell.disableFormats = true;
+ }
+ tpls.cell.compile();
- this.beforeInitialResize();
- this.layout(true);
+ this.templates = tpls;
+ },
- // two part rendering gives faster view to the user
- this.renderPhase2.defer(1, this);
+ // remap these for backwards compat
+ onColWidthChange : function(){
+ this.updateColumns.apply(this, arguments);
+ },
+ onHeaderChange : function(){
+ this.updateHeaders.apply(this, arguments);
+ },
+ onHiddenChange : function(){
+ this.handleHiddenChange.apply(this, arguments);
+ },
+ onColumnMove : function(){
+ this.handleColumnMove.apply(this, arguments);
+ },
+ onColumnLock : function(){
+ this.handleLockChange.apply(this, arguments);
},
- renderPhase2 : function(){
- // render the rows now
+ onDataChange : function(){
this.refresh();
- if(this.grid.autoSizeColumns){
- this.autoSizeColumns();
- }
+ this.updateHeaderSortState();
},
- beforeInitialResize : function(){
-
+ onClear : function(){
+ this.refresh();
},
- onColumnSplitterMoved : function(i, w){
- this.userResized = true;
- var cm = this.grid.colModel;
- cm.setColumnWidth(i, w, true);
- var cid = cm.getColumnId(i);
- this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
- this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
- this.updateSplitters();
- this.layout();
- this.grid.fireEvent("columnresize", i, w);
+ onUpdate : function(ds, record){
+ this.refreshRow(record);
},
- syncRowHeights : function(startIndex, endIndex){
- if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
- startIndex = startIndex || 0;
- var mrows = this.getBodyTable().rows;
- var lrows = this.getLockedTable().rows;
- var len = mrows.length-1;
- endIndex = Math.min(endIndex || len, len);
- for(var i = startIndex; i <= endIndex; i++){
- var m = mrows[i], l = lrows[i];
- var h = Math.max(m.offsetHeight, l.offsetHeight);
- m.style.height = l.style.height = h + "px";
- }
+ refreshRow : function(record){
+ var ds = this.ds, index;
+ if(typeof record == 'number'){
+ index = record;
+ record = ds.getAt(index);
+ }else{
+ index = ds.indexOf(record);
}
+ this.insertRows(ds, index, index, true);
+ this.onRemove(ds, record, index+1, true);
+ this.syncRowHeights(index, index);
+ this.layout();
+ this.fireEvent("rowupdated", this, index, record);
},
- layout : function(initialRender, is2ndPass)
- {
- var g = this.grid;
- var auto = g.autoHeight;
- var scrollOffset = 16;
- var c = g.getGridEl(), cm = this.cm,
- expandCol = g.autoExpandColumn,
- gv = this;
- //c.beginMeasure();
+ onAdd : function(ds, records, index){
+ this.insertRows(ds, index, index + (records.length-1));
+ },
- if(!c.dom.offsetWidth){ // display:none?
- if(initialRender){
- this.lockedWrap.show();
- this.mainWrap.show();
- }
- return;
+ onRemove : function(ds, record, index, isUpdate){
+ if(isUpdate !== true){
+ this.fireEvent("beforerowremoved", this, index, record);
}
-
- var hasLock = this.cm.isLocked(0);
-
- var tbh = this.headerPanel.getHeight();
- var bbh = this.footerPanel.getHeight();
-
- if(auto){
- var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
- var newHeight = ch + c.getBorderWidth("tb");
- if(g.maxHeight){
- newHeight = Math.min(g.maxHeight, newHeight);
- }
- c.setHeight(newHeight);
+ var bt = this.getBodyTable(), lt = this.getLockedTable();
+ if(bt.rows[index]){
+ bt.firstChild.removeChild(bt.rows[index]);
}
-
- if(g.autoWidth){
- c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
+ if(lt.rows[index]){
+ lt.firstChild.removeChild(lt.rows[index]);
}
+ if(isUpdate !== true){
+ this.stripeRows(index);
+ this.syncRowHeights(index, index);
+ this.layout();
+ this.fireEvent("rowremoved", this, index, record);
+ }
+ },
- var s = this.scroller;
-
- var csize = c.getSize(true);
+ onLoad : function(){
+ this.scrollToTop();
+ },
- this.el.setSize(csize.width, csize.height);
+ /**
+ * Scrolls the grid to the top
+ */
+ scrollToTop : function(){
+ if(this.scroller){
+ this.scroller.dom.scrollTop = 0;
+ this.syncScroll();
+ }
+ },
- this.headerPanel.setWidth(csize.width);
- this.footerPanel.setWidth(csize.width);
+ /**
+ * Gets a panel in the header of the grid that can be used for toolbars etc.
+ * After modifying the contents of this panel a call to grid.autoSize() may be
+ * required to register any changes in size.
+ * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
+ * @return Roo.Element
+ */
+ getHeaderPanel : function(doShow){
+ if(doShow){
+ this.headerPanel.show();
+ }
+ return this.headerPanel;
+ },
- var hdHeight = this.mainHd.getHeight();
- var vw = csize.width;
- var vh = csize.height - (tbh + bbh);
+ /**
+ * Gets a panel in the footer of the grid that can be used for toolbars etc.
+ * After modifying the contents of this panel a call to grid.autoSize() may be
+ * required to register any changes in size.
+ * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
+ * @return Roo.Element
+ */
+ getFooterPanel : function(doShow){
+ if(doShow){
+ this.footerPanel.show();
+ }
+ return this.footerPanel;
+ },
- s.setSize(vw, vh);
+ initElements : function(){
+ var E = Roo.Element;
+ var el = this.grid.getGridEl().dom.firstChild;
+ var cs = el.childNodes;
- var bt = this.getBodyTable();
+ this.el = new E(el);
- if(cm.getLockedCount() == cm.config.length){
- bt = this.getLockedTable();
- }
+ this.focusEl = new E(el.firstChild);
+ this.focusEl.swallowEvent("click", true);
- var ltWidth = hasLock ?
- Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
-
- var scrollHeight = bt.offsetHeight;
- var scrollWidth = ltWidth + bt.offsetWidth;
- var vscroll = false, hscroll = false;
-
- this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
+ this.headerPanel = new E(cs[1]);
+ this.headerPanel.enableDisplayMode("block");
- var lw = this.lockedWrap, mw = this.mainWrap;
- var lb = this.lockedBody, mb = this.mainBody;
+ this.scroller = new E(cs[2]);
+ this.scrollSizer = new E(this.scroller.dom.firstChild);
- setTimeout(function(){
- var t = s.dom.offsetTop;
- var w = s.dom.clientWidth,
- h = s.dom.clientHeight;
+ this.lockedWrap = new E(cs[3]);
+ this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+ this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
- lw.setTop(t);
- lw.setSize(ltWidth, h);
+ this.mainWrap = new E(cs[4]);
+ this.mainHd = new E(this.mainWrap.dom.firstChild);
+ this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
- mw.setLeftTop(ltWidth, t);
- mw.setSize(w-ltWidth, h);
+ this.footerPanel = new E(cs[5]);
+ this.footerPanel.enableDisplayMode("block");
- lb.setHeight(h-hdHeight);
- mb.setHeight(h-hdHeight);
+ this.resizeProxy = new E(cs[6]);
- if(is2ndPass !== true && !gv.userResized && expandCol){
- // high speed resize without full column calculation
-
- var ci = cm.getIndexById(expandCol);
- if (ci < 0) {
- ci = cm.findColumnIndex(expandCol);
- }
- ci = Math.max(0, ci); // make sure it's got at least the first col.
- var expandId = cm.getColumnId(ci);
- var tw = cm.getTotalWidth(false);
- var currentWidth = cm.getColumnWidth(ci);
- var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
- if(currentWidth != cw){
- cm.setColumnWidth(ci, cw, true);
- gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
- gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
- gv.updateSplitters();
- gv.layout(false, true);
- }
- }
+ this.headerSelector = String.format(
+ '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
+ this.lockedHd.id, this.mainHd.id
+ );
- if(initialRender){
- lw.show();
- mw.show();
- }
- //c.endMeasure();
- }, 10);
+ this.splitterSelector = String.format(
+ '#{0} div.x-grid-split, #{1} div.x-grid-split',
+ this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
+ );
+ },
+ idToCssName : function(s)
+ {
+ return s.replace(/[^a-z0-9]+/ig, '-');
},
- onWindowResize : function(){
- if(!this.grid.monitorWindowResize || this.grid.autoHeight){
- return;
- }
- this.layout();
+ getHeaderCell : function(index){
+ return Roo.DomQuery.select(this.headerSelector)[index];
},
- appendFooter : function(parentEl){
- return null;
+ getHeaderCellMeasure : function(index){
+ return this.getHeaderCell(index).firstChild;
},
- sortAscText : "Sort Ascending",
- sortDescText : "Sort Descending",
- lockText : "Lock Column",
- unlockText : "Unlock Column",
- columnsText : "Columns",
-
- columnsWiderText : "Wider",
- columnsNarrowText : "Thinner"
-});
+ getHeaderCellText : function(index){
+ return this.getHeaderCell(index).firstChild.firstChild;
+ },
+ getLockedTable : function(){
+ return this.lockedBody.dom.firstChild;
+ },
-Roo.grid.GridView.ColumnDragZone = function(grid, hd){
- Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
- this.proxy.el.addClass('x-grid3-col-dd');
-};
+ getBodyTable : function(){
+ return this.mainBody.dom.firstChild;
+ },
-Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
- handleMouseDown : function(e){
+ getLockedRow : function(index){
+ return this.getLockedTable().rows[index];
+ },
+ getRow : function(index){
+ return this.getBodyTable().rows[index];
},
- callHandleMouseDown : function(e){
- Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- /**
- * @extends Roo.dd.DDProxy
- * @class Roo.grid.SplitDragZone
- * Support for Column Header resizing
- * @constructor
- * @param {Object} config
- */
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.SplitDragZone = function(grid, hd, hd2){
- this.grid = grid;
- this.view = grid.getView();
- this.proxy = this.view.resizeProxy;
- Roo.grid.SplitDragZone.superclass.constructor.call(
- this,
- hd, // ID
- "gridSplitters" + this.grid.getGridEl().id, // SGROUP
- { // CONFIG
- dragElId : Roo.id(this.proxy.dom),
- resizeFrame:false
+ getRowComposite : function(index){
+ if(!this.rowEl){
+ this.rowEl = new Roo.CompositeElementLite();
}
- );
-
- this.setHandleElId(Roo.id(hd));
- if (hd2 !== false) {
- this.setOuterHandleElId(Roo.id(hd2));
- }
-
- this.scroll = false;
-};
-Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
- fly: Roo.Element.fly,
-
- b4StartDrag : function(x, y){
- this.view.headersDisabled = true;
- var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
- this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
- );
- this.proxy.setHeight(h);
-
- // for old system colWidth really stored the actual width?
- // in bootstrap we tried using xs/ms/etc.. to do % sizing?
- // which in reality did not work.. - it worked only for fixed sizes
- // for resizable we need to use actual sizes.
- var w = this.cm.getColumnWidth(this.cellIndex);
- if (!this.view.mainWrap) {
- // bootstrap.
- w = this.view.getHeaderIndex(this.cellIndex).getWidth();
+ var els = [], lrow, mrow;
+ if(lrow = this.getLockedRow(index)){
+ els.push(lrow);
}
-
-
-
- // this was w-this.grid.minColumnWidth;
- // doesnt really make sense? - w = thie curren width or the rendered one?
- var minw = Math.max(w-this.grid.minColumnWidth, 0);
- this.resetConstraints();
- this.setXConstraint(minw, 1000);
- this.setYConstraint(0, 0);
- this.minX = x - minw;
- this.maxX = x + 1000;
- this.startPos = x;
- if (!this.view.mainWrap) { // this is Bootstrap code..
- this.getDragEl().style.display='block';
+ if(mrow = this.getRow(index)){
+ els.push(mrow);
}
-
- Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
+ this.rowEl.elements = els;
+ return this.rowEl;
+ },
+ /**
+ * Gets the 'td' of the cell
+ *
+ * @param {Integer} rowIndex row to select
+ * @param {Integer} colIndex column to select
+ *
+ * @return {Object}
+ */
+ getCell : function(rowIndex, colIndex){
+ var locked = this.cm.getLockedCount();
+ var source;
+ if(colIndex < locked){
+ source = this.lockedBody.dom.firstChild;
+ }else{
+ source = this.mainBody.dom.firstChild;
+ colIndex -= locked;
+ }
+ return source.rows[rowIndex].childNodes[colIndex];
},
+ getCellText : function(rowIndex, colIndex){
+ return this.getCell(rowIndex, colIndex).firstChild.firstChild;
+ },
- handleMouseDown : function(e){
- ev = Roo.EventObject.setEvent(e);
- var t = this.fly(ev.getTarget());
- if(t.hasClass("x-grid-split")){
- this.cellIndex = this.view.getCellIndex(t.dom);
- this.split = t.dom;
- this.cm = this.grid.colModel;
- if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
- Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
- }
+ getCellBox : function(cell){
+ var b = this.fly(cell).getBox();
+ if(Roo.isOpera){ // opera fails to report the Y
+ b.y = cell.offsetTop + this.mainBody.getY();
}
+ return b;
},
- endDrag : function(e){
- this.view.headersDisabled = false;
- var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
- var diff = endX - this.startPos;
- //
- var w = this.cm.getColumnWidth(this.cellIndex);
- if (!this.view.mainWrap) {
- w = 0;
+ getCellIndex : function(cell){
+ var id = String(cell.className).match(this.cellRE);
+ if(id){
+ return parseInt(id[1], 10);
}
- this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
+ return 0;
},
- autoOffset : function(){
- this.setDelta(0,0);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.GridDragZone = function(grid, config){
- this.view = grid.getView();
- Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
- if(this.view.lockedBody){
- this.setHandleElId(Roo.id(this.view.mainBody.dom));
- this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
- }
- this.scroll = false;
- this.grid = grid;
- this.ddel = document.createElement('div');
- this.ddel.className = 'x-grid-dd-wrap';
-};
+ findHeaderIndex : function(n){
+ var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+ return r ? this.getCellIndex(r) : false;
+ },
-Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
- ddGroup : "GridDD",
+ findHeaderCell : function(n){
+ var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+ return r ? r : false;
+ },
- getDragData : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var rowIndex = this.view.findRowIndex(t);
- var sm = this.grid.selModel;
-
- //Roo.log(rowIndex);
-
- if (sm.getSelectedCell) {
- // cell selection..
- if (!sm.getSelectedCell()) {
- return false;
- }
- if (rowIndex != sm.getSelectedCell()[0]) {
- return false;
- }
-
- }
- if (sm.getSelections && sm.getSelections().length < 1) {
+ findRowIndex : function(n){
+ if(!n){
return false;
}
-
-
- // before it used to all dragging of unseleted... - now we dont do that.
- if(rowIndex !== false){
-
- // if editorgrid..
-
-
- //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
-
- //if(!sm.isSelected(rowIndex) || e.hasModifier()){
- //
- //}
- if (e.hasModifier()){
- sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
+ var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
+ return r ? r.rowIndex : false;
+ },
+
+ findCellIndex : function(node){
+ var stop = this.el.dom;
+ while(node && node != stop){
+ if(this.findRE.test(node.className)){
+ return this.getCellIndex(node);
}
-
- Roo.log("getDragData");
-
- return {
- grid: this.grid,
- ddel: this.ddel,
- rowIndex: rowIndex,
- selections: sm.getSelections ? sm.getSelections() : (
- sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
- };
+ node = node.parentNode;
}
return false;
},
-
-
- onInitDrag : function(e){
- var data = this.dragData;
- this.ddel.innerHTML = this.grid.getDragDropText();
- this.proxy.update(this.ddel);
- // fire start drag?
- },
- afterRepair : function(){
- this.dragging = false;
+ getColumnId : function(index){
+ return this.cm.getColumnId(index);
},
- getRepairXY : function(e, data){
- return false;
+ getSplitters : function()
+ {
+ if(this.splitterSelector){
+ return Roo.DomQuery.select(this.splitterSelector);
+ }else{
+ return null;
+ }
},
- onEndDrag : function(data, e){
- // fire end drag?
+ getSplitter : function(index){
+ return this.getSplitters()[index];
},
- onValidDrop : function(dd, e, id){
- // fire drag drop?
- this.hideProxy();
+ onRowOver : function(e, t){
+ var row;
+ if((row = this.findRowIndex(t)) !== false){
+ this.getRowComposite(row).addClass("x-grid-row-over");
+ }
},
- beforeInvalidDrop : function(e, id){
-
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.grid.ColumnModel
- * @extends Roo.util.Observable
- * This is the default implementation of a ColumnModel used by the Grid. It defines
- * the columns in the grid.
- * <br>Usage:<br>
- <pre><code>
- var colModel = new Roo.grid.ColumnModel([
- {header: "Ticker", width: 60, sortable: true, locked: true},
- {header: "Company Name", width: 150, sortable: true},
- {header: "Market Cap.", width: 100, sortable: true},
- {header: "$ Sales", width: 100, sortable: true, renderer: money},
- {header: "Employees", width: 100, sortable: true, resizable: false}
- ]);
- </code></pre>
- * <p>
-
- * The config options listed for this class are options which may appear in each
- * individual column definition.
- * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
- * @constructor
- * @param {Object} config An Array of column config objects. See this class's
- * config objects for details.
-*/
-Roo.grid.ColumnModel = function(config){
- /**
- * The config passed into the constructor
- */
- this.config = []; //config;
- this.lookup = {};
-
- // if no id, create one
- // if the column does not have a dataIndex mapping,
- // map it to the order it is in the config
- for(var i = 0, len = config.length; i < len; i++){
- this.addColumn(config[i]);
-
- }
-
- /**
- * The width of columns which have no width specified (defaults to 100)
- * @type Number
- */
- this.defaultWidth = 100;
+ onRowOut : function(e, t){
+ var row;
+ if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
+ this.getRowComposite(row).removeClass("x-grid-row-over");
+ }
+ },
- /**
- * Default sortable of columns which have no sortable specified (defaults to false)
- * @type Boolean
- */
- this.defaultSortable = false;
+ renderHeaders : function(){
+ var cm = this.cm;
+ var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
+ var cb = [], lb = [], sb = [], lsb = [], p = {};
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ p.cellId = "x-grid-hd-0-" + i;
+ p.splitId = "x-grid-csplit-0-" + i;
+ p.id = cm.getColumnId(i);
+ p.value = cm.getColumnHeader(i) || "";
+ p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</) ? '' : p.value || "";
+ p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
+ if(!cm.isLocked(i)){
+ cb[cb.length] = ct.apply(p);
+ sb[sb.length] = st.apply(p);
+ }else{
+ lb[lb.length] = ct.apply(p);
+ lsb[lsb.length] = st.apply(p);
+ }
+ }
+ return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
+ ht.apply({cells: cb.join(""), splits:sb.join("")})];
+ },
- this.addEvents({
- /**
- * @event widthchange
- * Fires when the width of a column changes.
- * @param {ColumnModel} this
- * @param {Number} columnIndex The column index
- * @param {Number} newWidth The new width
- */
- "widthchange": true,
- /**
- * @event headerchange
- * Fires when the text of a header changes.
- * @param {ColumnModel} this
- * @param {Number} columnIndex The column index
- * @param {Number} newText The new header text
- */
- "headerchange": true,
- /**
- * @event hiddenchange
- * Fires when a column is hidden or "unhidden".
- * @param {ColumnModel} this
- * @param {Number} columnIndex The column index
- * @param {Boolean} hidden true if hidden, false otherwise
- */
- "hiddenchange": true,
- /**
- * @event columnmoved
- * Fires when a column is moved.
- * @param {ColumnModel} this
- * @param {Number} oldIndex
- * @param {Number} newIndex
- */
- "columnmoved" : true,
- /**
- * @event columlockchange
- * Fires when a column's locked state is changed
- * @param {ColumnModel} this
- * @param {Number} colIndex
- * @param {Boolean} locked true if locked
- */
- "columnlockchange" : true
- });
- Roo.grid.ColumnModel.superclass.constructor.call(this);
-};
-Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
- /**
- * @cfg {String} header [required] The header text to display in the Grid view.
- */
- /**
- * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
- */
- /**
- * @cfg {String} smHeader Header at Bootsrap Small width
- */
- /**
- * @cfg {String} mdHeader Header at Bootsrap Medium width
- */
- /**
- * @cfg {String} lgHeader Header at Bootsrap Large width
- */
- /**
- * @cfg {String} xlHeader Header at Bootsrap extra Large width
- */
- /**
- * @cfg {String} dataIndex The name of the field in the grid's {@link Roo.data.Store}'s
- * {@link Roo.data.Record} definition from which to draw the column's value. If not
- * specified, the column's index is used as an index into the Record's data Array.
- */
- /**
- * @cfg {Number} width The initial width in pixels of the column. Using this
- * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
- */
- /**
- * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
- * Defaults to the value of the {@link #defaultSortable} property.
- * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
- */
- /**
- * @cfg {Boolean} locked True to lock the column in place while scrolling the Grid. Defaults to false.
- */
- /**
- * @cfg {Boolean} fixed True if the column width cannot be changed. Defaults to false.
- */
- /**
- * @cfg {Boolean} resizable False to disable column resizing. Defaults to true.
- */
- /**
- * @cfg {Boolean} hidden True to hide the column. Defaults to false.
- */
- /**
- * @cfg {Function} renderer A function used to generate HTML markup for a cell
- * given the cell's data value. See {@link #setRenderer}. If not specified, the
- * default renderer returns the escaped data value. If an object is returned (bootstrap only)
- * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
- */
- /**
- * @cfg {Roo.grid.GridEditor} editor For grid editors - returns the grid editor
- */
- /**
- * @cfg {String} align (left|right) Set the CSS text-align property of the column. Defaults to undefined (left).
- */
- /**
- * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined (middle)
- */
- /**
- * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
- */
- /**
- * @cfg {String} tooltip mouse over tooltip text
- */
- /**
- * @cfg {Number} xs can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} lg can be '0' for hidden at this size (number less than 12)
- */
- /**
- * @cfg {Number} xl can be '0' for hidden at this size (number less than 12)
- */
- /**
- * Returns the id of the column at the specified index.
- * @param {Number} index The column index
- * @return {String} the id
- */
- getColumnId : function(index){
- return this.config[index].id;
+ updateHeaders : function(){
+ var html = this.renderHeaders();
+ this.lockedHd.update(html[0]);
+ this.mainHd.update(html[1]);
},
/**
- * Returns the column for a specified id.
- * @param {String} id The column id
- * @return {Object} the column
+ * Focuses the specified row.
+ * @param {Number} row The row index
*/
- getColumnById : function(id){
- return this.lookup[id];
+ focusRow : function(row)
+ {
+ //Roo.log('GridView.focusRow');
+ var x = this.scroller.dom.scrollLeft;
+ this.focusCell(row, 0, false);
+ this.scroller.dom.scrollLeft = x;
},
-
/**
- * Returns the column Object for a specified dataIndex.
- * @param {String} dataIndex The column dataIndex
- * @return {Object|Boolean} the column or false if not found
+ * Focuses the specified cell.
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
*/
- getColumnByDataIndex: function(dataIndex){
- var index = this.findColumnIndex(dataIndex);
- return index > -1 ? this.config[index] : false;
+ 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){
+ this.focusEl.focus();
+ }else{
+ this.focusEl.focus.defer(1, this.focusEl);
+ }
},
-
+
/**
- * Returns the index for a specified column id.
- * @param {String} id The column id
- * @return {Number} the index, or -1 if not found
+ * Scrolls the specified cell into view
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
*/
- getIndexById : function(id){
- for(var i = 0, len = this.config.length; i < len; i++){
- if(this.config[i].id == id){
- return i;
+ 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 null;
+ }
+ col = (col !== undefined ? col : 0);
+ var cm = this.grid.colModel;
+ while(cm.isHidden(col)){
+ col++;
+ }
+
+ var el = this.getCell(row, col);
+ if(!el){
+ return null;
+ }
+ var c = this.scroller.dom;
+
+ var ctop = parseInt(el.offsetTop, 10);
+ 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;
+ //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;
+ }else if(cright > sright){
+ c.scrollLeft = cright-c.clientWidth;
}
}
- return -1;
+
+ return el;
},
-
- /**
- * Returns the index for a specified column dataIndex.
- * @param {String} dataIndex The column dataIndex
- * @return {Number} the index, or -1 if not found
- */
-
- findColumnIndex : function(dataIndex){
- for(var i = 0, len = this.config.length; i < len; i++){
- if(this.config[i].dataIndex == dataIndex){
- return i;
- }
+
+ updateColumns : function(){
+ this.grid.stopEditing();
+ var cm = this.grid.colModel, colIds = this.getColumnIds();
+ //var totalWidth = cm.getTotalWidth();
+ var pos = 0;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ //if(cm.isHidden(i)) continue;
+ var w = cm.getColumnWidth(i);
+ this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+ this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
}
- return -1;
- },
-
-
- moveColumn : function(oldIndex, newIndex){
- var c = this.config[oldIndex];
- this.config.splice(oldIndex, 1);
- this.config.splice(newIndex, 0, c);
- this.dataMap = null;
- this.fireEvent("columnmoved", this, oldIndex, newIndex);
+ this.updateSplitters();
},
- isLocked : function(colIndex){
- return this.config[colIndex].locked === true;
+ generateRules : function(cm){
+ var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
+ Roo.util.CSS.removeStyleSheet(rulesId);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var cid = cm.getColumnId(i);
+ var align = '';
+ if(cm.config[i].align){
+ align = 'text-align:'+cm.config[i].align+';';
+ }
+ var hidden = '';
+ if(cm.isHidden(i)){
+ hidden = 'display:none;';
+ }
+ var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
+ ruleBuf.push(
+ this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
+ this.hdSelector, cid, " {\n", align, width, "}\n",
+ this.tdSelector, cid, " {\n",hidden,"\n}\n",
+ this.splitSelector, cid, " {\n", hidden , "\n}\n");
+ }
+ return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
},
- setLocked : function(colIndex, value, suppressEvent){
- if(this.isLocked(colIndex) == value){
- return;
- }
- this.config[colIndex].locked = value;
- if(!suppressEvent){
- this.fireEvent("columnlockchange", this, colIndex, value);
+ updateSplitters : function(){
+ var cm = this.cm, s = this.getSplitters();
+ if(s){ // splitters not created yet
+ var pos = 0, locked = true;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ if(cm.isHidden(i)) {
+ continue;
+ }
+ var w = cm.getColumnWidth(i); // make sure it's a number
+ if(!cm.isLocked(i) && locked){
+ pos = 0;
+ locked = false;
+ }
+ pos += w;
+ s[i].style.left = (pos-this.splitOffset) + "px";
+ }
}
},
- getTotalLockedWidth : function(){
- var totalWidth = 0;
- for(var i = 0; i < this.config.length; i++){
- if(this.isLocked(i) && !this.isHidden(i)){
- this.totalWidth += this.getColumnWidth(i);
- }
+ handleHiddenChange : function(colModel, colIndex, hidden){
+ if(hidden){
+ this.hideColumn(colIndex);
+ }else{
+ this.unhideColumn(colIndex);
}
- return totalWidth;
},
- getLockedCount : function(){
- for(var i = 0, len = this.config.length; i < len; i++){
- if(!this.isLocked(i)){
- return i;
- }
+ hideColumn : function(colIndex){
+ var cid = this.getColumnId(colIndex);
+ this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
+ this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
+ if(Roo.isSafari){
+ this.updateHeaders();
}
-
- return this.config.length;
+ this.updateSplitters();
+ this.layout();
},
- /**
- * Returns the number of columns.
- * @return {Number}
- */
- getColumnCount : function(visibleOnly){
- if(visibleOnly === true){
- var c = 0;
- for(var i = 0, len = this.config.length; i < len; i++){
- if(!this.isHidden(i)){
- c++;
- }
- }
- return c;
+ unhideColumn : function(colIndex){
+ var cid = this.getColumnId(colIndex);
+ this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
+ this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
+
+ if(Roo.isSafari){
+ this.updateHeaders();
}
- return this.config.length;
+ this.updateSplitters();
+ this.layout();
},
- /**
- * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
- * @param {Function} fn
- * @param {Object} scope (optional)
- * @return {Array} result
- */
- getColumnsBy : function(fn, scope){
- var r = [];
- for(var i = 0, len = this.config.length; i < len; i++){
- var c = this.config[i];
- if(fn.call(scope||this, c, i) === true){
- r[r.length] = c;
+ insertRows : function(dm, firstRow, lastRow, isUpdate){
+ if(firstRow == 0 && lastRow == dm.getCount()-1){
+ this.refresh();
+ }else{
+ if(!isUpdate){
+ this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
+ }
+ var s = this.getScrollState();
+ var markup = this.renderRows(firstRow, lastRow);
+ this.bufferRows(markup[0], this.getLockedTable(), firstRow);
+ this.bufferRows(markup[1], this.getBodyTable(), firstRow);
+ this.restoreScroll(s);
+ if(!isUpdate){
+ this.fireEvent("rowsinserted", this, firstRow, lastRow);
+ this.syncRowHeights(firstRow, lastRow);
+ this.stripeRows(firstRow);
+ this.layout();
}
}
- return r;
},
- /**
- * Returns true if the specified column is sortable.
- * @param {Number} col The column index
- * @return {Boolean}
- */
- isSortable : function(col){
- if(typeof this.config[col].sortable == "undefined"){
- return this.defaultSortable;
+ bufferRows : function(markup, target, index){
+ var before = null, trows = target.rows, tbody = target.tBodies[0];
+ if(index < trows.length){
+ before = trows[index];
}
- return this.config[col].sortable;
+ var b = document.createElement("div");
+ b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
+ var rows = b.firstChild.rows;
+ for(var i = 0, len = rows.length; i < len; i++){
+ if(before){
+ tbody.insertBefore(rows[0], before);
+ }else{
+ tbody.appendChild(rows[0]);
+ }
+ }
+ b.innerHTML = "";
+ b = null;
},
- /**
- * Returns the rendering (formatting) function defined for the column.
- * @param {Number} col The column index.
- * @return {Function} The function used to render the cell. See {@link #setRenderer}.
- */
- getRenderer : function(col){
- if(!this.config[col].renderer){
- return Roo.grid.ColumnModel.defaultRenderer;
+ deleteRows : function(dm, firstRow, lastRow){
+ if(dm.getRowCount()<1){
+ this.fireEvent("beforerefresh", this);
+ this.mainBody.update("");
+ this.lockedBody.update("");
+ this.fireEvent("refresh", this);
+ }else{
+ this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
+ var bt = this.getBodyTable();
+ var tbody = bt.firstChild;
+ var rows = bt.rows;
+ for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
+ tbody.removeChild(rows[firstRow]);
+ }
+ this.stripeRows(firstRow);
+ this.fireEvent("rowsdeleted", this, firstRow, lastRow);
}
- return this.config[col].renderer;
},
- /**
- * Sets the rendering (formatting) function for a column.
- * @param {Number} col The column index
- * @param {Function} fn The function to use to process the cell's raw data
- * to return HTML markup for the grid view. The render function is called with
- * the following parameters:<ul>
- * <li>Data value.</li>
- * <li>Cell metadata. An object in which you may set the following attributes:<ul>
- * <li>css A CSS style string to apply to the table cell.</li>
- * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
- * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
- * <li>Row index</li>
- * <li>Column index</li>
- * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
- */
- setRenderer : function(col, fn){
- this.config[col].renderer = fn;
+ updateRows : function(dataSource, firstRow, lastRow){
+ var s = this.getScrollState();
+ this.refresh();
+ this.restoreScroll(s);
},
- /**
- * Returns the width for the specified column.
- * @param {Number} col The column index
- * @param (optional) {String} gridSize bootstrap width size.
- * @return {Number}
- */
- getColumnWidth : function(col, gridSize)
- {
- var cfg = this.config[col];
-
- if (typeof(gridSize) == 'undefined') {
- return cfg.width * 1 || this.defaultWidth;
- }
- if (gridSize === false) { // if we set it..
- return cfg.width || false;
- }
- var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
-
- for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
- if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
- continue;
- }
- return cfg[ sizes[i] ];
- }
- return 1;
-
+ handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
+ if(!noRefresh){
+ this.refresh();
+ }
+ this.updateHeaderSortState();
},
- /**
- * Sets the width for a column.
- * @param {Number} col The column index
- * @param {Number} width The new width
- */
- setColumnWidth : function(col, width, suppressEvent){
- this.config[col].width = width;
- this.totalWidth = null;
- if(!suppressEvent){
- this.fireEvent("widthchange", this, col, width);
- }
+ getScrollState : function(){
+
+ var sb = this.scroller.dom;
+ return {left: sb.scrollLeft, top: sb.scrollTop};
},
- /**
- * Returns the total width of all columns.
- * @param {Boolean} includeHidden True to include hidden column widths
- * @return {Number}
- */
- getTotalWidth : function(includeHidden){
- if(!this.totalWidth){
- this.totalWidth = 0;
- for(var i = 0, len = this.config.length; i < len; i++){
- if(includeHidden || !this.isHidden(i)){
- this.totalWidth += this.getColumnWidth(i);
- }
+ stripeRows : function(startRow){
+ if(!this.grid.stripeRows || this.ds.getCount() < 1){
+ return;
+ }
+ startRow = startRow || 0;
+ var rows = this.getBodyTable().rows;
+ var lrows = this.getLockedTable().rows;
+ var cls = ' x-grid-row-alt ';
+ for(var i = startRow, len = rows.length; i < len; i++){
+ var row = rows[i], lrow = lrows[i];
+ var isAlt = ((i+1) % 2 == 0);
+ var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
+ if(isAlt == hasAlt){
+ continue;
+ }
+ if(isAlt){
+ row.className += " x-grid-row-alt";
+ }else{
+ row.className = row.className.replace("x-grid-row-alt", "");
+ }
+ if(lrow){
+ lrow.className = row.className;
}
}
- return this.totalWidth;
},
- /**
- * Returns the header for the specified column.
- * @param {Number} col The column index
- * @return {String}
- */
- getColumnHeader : function(col){
- return this.config[col].header;
+ restoreScroll : function(state){
+ //Roo.log('GridView.restoreScroll');
+ var sb = this.scroller.dom;
+ sb.scrollLeft = state.left;
+ sb.scrollTop = state.top;
+ this.syncScroll();
},
- /**
- * Sets the header for a column.
- * @param {Number} col The column index
- * @param {String} header The new header
- */
- setColumnHeader : function(col, header){
- this.config[col].header = header;
- this.fireEvent("headerchange", this, col, header);
+ syncScroll : function(){
+ //Roo.log('GridView.syncScroll');
+ var sb = this.scroller.dom;
+ var sh = this.mainHd.dom;
+ var bs = this.mainBody.dom;
+ var lv = this.lockedBody.dom;
+ sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
+ lv.scrollTop = bs.scrollTop = sb.scrollTop;
},
- /**
- * Returns the tooltip for the specified column.
- * @param {Number} col The column index
- * @return {String}
- */
- getColumnTooltip : function(col){
- return this.config[col].tooltip;
+ handleScroll : function(e){
+ this.syncScroll();
+ var sb = this.scroller.dom;
+ this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
+ e.stopEvent();
},
- /**
- * Sets the tooltip for a column.
- * @param {Number} col The column index
- * @param {String} tooltip The new tooltip
- */
- setColumnTooltip : function(col, tooltip){
- this.config[col].tooltip = tooltip;
+
+ handleWheel : function(e){
+ var d = e.getWheelDelta();
+ this.scroller.dom.scrollTop -= d*22;
+ // set this here to prevent jumpy scrolling on large tables
+ this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
+ e.stopEvent();
},
- /**
- * Returns the dataIndex for the specified column.
- * @param {Number} col The column index
- * @return {Number}
- */
- getDataIndex : function(col){
- return this.config[col].dataIndex;
+ renderRows : function(startRow, endRow){
+ // pull in all the crap needed to render rows
+ var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
+ var colCount = cm.getColumnCount();
+
+ if(ds.getCount() < 1){
+ return ["", ""];
+ }
+
+ // build a map for all the columns
+ var cs = [];
+ for(var i = 0; i < colCount; i++){
+ var name = cm.getDataIndex(i);
+ cs[i] = {
+ name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
+ renderer : cm.getRenderer(i),
+ id : cm.getColumnId(i),
+ locked : cm.isLocked(i),
+ has_editor : cm.isCellEditable(i)
+ };
+ }
+
+ startRow = startRow || 0;
+ endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+
+ // records to render
+ var rs = ds.getRange(startRow, endRow);
+
+ return this.doRender(cs, rs, ds, startRow, colCount, stripe);
},
- /**
- * Sets the dataIndex for a column.
- * @param {Number} col The column index
- * @param {Number} dataIndex The new dataIndex
- */
- setDataIndex : function(col, dataIndex){
- this.config[col].dataIndex = dataIndex;
+ // As much as I hate to duplicate code, this was branched because FireFox really hates
+ // [].join("") on strings. The performance difference was substantial enough to
+ // branch this function
+ doRender : Roo.isGecko ?
+ function(cs, rs, ds, startRow, colCount, stripe){
+ var ts = this.templates, ct = ts.cell, rt = ts.row;
+ // buffers
+ var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+
+ var hasListener = this.grid.hasListener('rowclass');
+ var rowcfg = {};
+ for(var j = 0, len = rs.length; j < len; j++){
+ r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
+ for(var i = 0; i < colCount; i++){
+ c = cs[i];
+ p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+ p.id = c.id;
+ p.css = p.attr = "";
+ p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+ if(p.value == undefined || p.value === "") {
+ p.value = " ";
+ }
+ if(c.has_editor){
+ p.css += ' x-grid-editable-cell';
+ }
+ if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
+ p.css += ' x-grid-dirty-cell';
+ }
+ var markup = ct.apply(p);
+ if(!c.locked){
+ cb+= markup;
+ }else{
+ lcb+= markup;
+ }
+ }
+ var alt = [];
+ if(stripe && ((rowIndex+1) % 2 == 0)){
+ alt.push("x-grid-row-alt")
+ }
+ if(r.dirty){
+ alt.push( " x-grid-dirty-row");
+ }
+ rp.cells = lcb;
+ if(this.getRowClass){
+ alt.push(this.getRowClass(r, rowIndex));
+ }
+ if (hasListener) {
+ rowcfg = {
+
+ record: r,
+ rowIndex : rowIndex,
+ rowClass : ''
+ };
+ this.grid.fireEvent('rowclass', this, rowcfg);
+ alt.push(rowcfg.rowClass);
+ }
+ rp.alt = alt.join(" ");
+ lbuf+= rt.apply(rp);
+ rp.cells = cb;
+ buf+= rt.apply(rp);
+ }
+ return [lbuf, buf];
+ } :
+ function(cs, rs, ds, startRow, colCount, stripe){
+ var ts = this.templates, ct = ts.cell, rt = ts.row;
+ // buffers
+ var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+ var hasListener = this.grid.hasListener('rowclass');
+
+ var rowcfg = {};
+ for(var j = 0, len = rs.length; j < len; j++){
+ r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
+ for(var i = 0; i < colCount; i++){
+ c = cs[i];
+ p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+ p.id = c.id;
+ p.css = p.attr = "";
+ p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+ if(p.value == undefined || p.value === "") {
+ p.value = " ";
+ }
+ //Roo.log(c);
+ if(c.has_editor){
+ p.css += ' x-grid-editable-cell';
+ }
+ if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
+ p.css += ' x-grid-dirty-cell'
+ }
+
+ var markup = ct.apply(p);
+ if(!c.locked){
+ cb[cb.length] = markup;
+ }else{
+ lcb[lcb.length] = markup;
+ }
+ }
+ var alt = [];
+ if(stripe && ((rowIndex+1) % 2 == 0)){
+ alt.push( "x-grid-row-alt");
+ }
+ if(r.dirty){
+ alt.push(" x-grid-dirty-row");
+ }
+ rp.cells = lcb;
+ if(this.getRowClass){
+ alt.push( this.getRowClass(r, rowIndex));
+ }
+ if (hasListener) {
+ rowcfg = {
+
+ record: r,
+ rowIndex : rowIndex,
+ rowClass : ''
+ };
+ this.grid.fireEvent('rowclass', this, rowcfg);
+ alt.push(rowcfg.rowClass);
+ }
+
+ rp.alt = alt.join(" ");
+ rp.cells = lcb.join("");
+ lbuf[lbuf.length] = rt.apply(rp);
+ rp.cells = cb.join("");
+ buf[buf.length] = rt.apply(rp);
+ }
+ return [lbuf.join(""), buf.join("")];
+ },
+
+ renderBody : function(){
+ var markup = this.renderRows();
+ var bt = this.templates.body;
+ return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
},
-
-
/**
- * Returns true if the cell is editable.
- * @param {Number} colIndex The column index
- * @param {Number} rowIndex The row index - this is nto actually used..?
- * @return {Boolean}
+ * Refreshes the grid
+ * @param {Boolean} headersToo
*/
- isCellEditable : function(colIndex, rowIndex){
- return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
+ refresh : function(headersToo){
+ this.fireEvent("beforerefresh", this);
+ this.grid.stopEditing();
+ var result = this.renderBody();
+ this.lockedBody.update(result[0]);
+ this.mainBody.update(result[1]);
+ if(headersToo === true){
+ this.updateHeaders();
+ this.updateColumns();
+ this.updateSplitters();
+ this.updateHeaderSortState();
+ }
+ this.syncRowHeights();
+ this.layout();
+ this.fireEvent("refresh", this);
},
- /**
- * Returns the editor defined for the cell/column.
- * return false or null to disable editing.
- * @param {Number} colIndex The column index
- * @param {Number} rowIndex The row index
- * @return {Object}
- */
- getCellEditor : function(colIndex, rowIndex){
- return this.config[colIndex].editor;
+ handleColumnMove : function(cm, oldIndex, newIndex){
+ this.indexMap = null;
+ var s = this.getScrollState();
+ this.refresh(true);
+ this.restoreScroll(s);
+ this.afterMove(newIndex);
},
- /**
- * Sets if a column is editable.
- * @param {Number} col The column index
- * @param {Boolean} editable True if the column is editable
- */
- setEditable : function(col, editable){
- this.config[col].editable = editable;
+ afterMove : function(colIndex){
+ 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){
+ var colIndex = this.getColumnIndexByDataIndex(dataIndex);
+ if(typeof colIndex == "undefined"){ // not present in grid
+ return;
+ }
+ var cm = this.grid.colModel;
+ var cell = this.getCell(rowIndex, colIndex);
+ var cellText = this.getCellText(rowIndex, colIndex);
- /**
- * Returns true if the column is hidden.
- * @param {Number} colIndex The column index
- * @return {Boolean}
- */
- isHidden : function(colIndex){
- return this.config[colIndex].hidden;
+ var p = {
+ cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
+ id : cm.getColumnId(colIndex),
+ css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
+ };
+ var renderer = cm.getRenderer(colIndex);
+ var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
+ if(typeof val == "undefined" || val === "") {
+ val = " ";
+ }
+ cellText.innerHTML = val;
+ cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
+ this.syncRowHeights(rowIndex, rowIndex);
},
-
- /**
- * Returns true if the column width cannot be changed
- */
- isFixed : function(colIndex){
- return this.config[colIndex].fixed;
+ calcColumnWidth : function(colIndex, maxRowsToMeasure){
+ var maxWidth = 0;
+ if(this.grid.autoSizeHeaders){
+ var h = this.getHeaderCellMeasure(colIndex);
+ maxWidth = Math.max(maxWidth, h.scrollWidth);
+ }
+ var tb, index;
+ if(this.cm.isLocked(colIndex)){
+ tb = this.getLockedTable();
+ index = colIndex;
+ }else{
+ tb = this.getBodyTable();
+ index = colIndex - this.cm.getLockedCount();
+ }
+ if(tb && tb.rows){
+ var rows = tb.rows;
+ var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
+ for(var i = 0; i < stopIndex; i++){
+ var cell = rows[i].childNodes[index].firstChild;
+ maxWidth = Math.max(maxWidth, cell.scrollWidth);
+ }
+ }
+ return maxWidth + /*margin for error in IE*/ 5;
},
-
/**
- * Returns true if the column can be resized
- * @return {Boolean}
+ * Autofit a column to its content.
+ * @param {Number} colIndex
+ * @param {Boolean} forceMinSize true to force the column to go smaller if possible
*/
- isResizable : function(colIndex){
- return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
+ autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
+ if(this.cm.isHidden(colIndex)){
+ return; // can't calc a hidden column
+ }
+ if(forceMinSize){
+ var cid = this.cm.getColumnId(colIndex);
+ this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
+ if(this.grid.autoSizeHeaders){
+ this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
+ }
+ }
+ var newWidth = this.calcColumnWidth(colIndex);
+ this.cm.setColumnWidth(colIndex,
+ Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
+ if(!suppressEvent){
+ this.grid.fireEvent("columnresize", colIndex, newWidth);
+ }
},
+
/**
- * Sets if a column is hidden.
- * @param {Number} colIndex The column index
- * @param {Boolean} hidden True if the column is hidden
+ * Autofits all columns to their content and then expands to fit any extra space in the grid
*/
- setHidden : function(colIndex, hidden){
- this.config[colIndex].hidden = hidden;
- this.totalWidth = null;
- this.fireEvent("hiddenchange", this, colIndex, hidden);
+ autoSizeColumns : function(){
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ for(var i = 0; i < colCount; i++){
+ this.autoSizeColumn(i, true, true);
+ }
+ if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
+ this.fitColumns();
+ }else{
+ this.updateColumns();
+ this.layout();
+ }
},
/**
- * Sets the editor for a column.
- * @param {Number} col The column index
- * @param {Object} editor The editor object
+ * Autofits all columns to the grid's width proportionate with their current size
+ * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
*/
- setEditor : function(col, editor){
- this.config[col].editor = editor;
- },
- /**
- * Add a column (experimental...) - defaults to adding to the end..
- * @param {Object} config
- */
- addColumn : function(c)
- {
-
- var i = this.config.length;
- this.config[i] = c;
-
- if(typeof c.dataIndex == "undefined"){
- c.dataIndex = i;
- }
- if(typeof c.renderer == "string"){
- c.renderer = Roo.util.Format[c.renderer];
- }
- if(typeof c.id == "undefined"){
- c.id = Roo.id();
+ fitColumns : function(reserveScrollSpace){
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ var cols = [];
+ var width = 0;
+ var i, w;
+ for (i = 0; i < colCount; i++){
+ if(!cm.isHidden(i) && !cm.isFixed(i)){
+ w = cm.getColumnWidth(i);
+ cols.push(i);
+ cols.push(w);
+ width += w;
+ }
}
- if(c.editor && c.editor.xtype){
- c.editor = Roo.factory(c.editor, Roo.grid);
+ var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
+ if(reserveScrollSpace){
+ avail -= 17;
}
- if(c.editor && c.editor.isFormField){
- c.editor = new Roo.grid.GridEditor(c.editor);
+ var frac = (avail - cm.getTotalWidth())/width;
+ while (cols.length){
+ w = cols.pop();
+ i = cols.pop();
+ cm.setColumnWidth(i, Math.floor(w + w*frac), true);
}
- this.lookup[c.id] = c;
- }
-
-});
-
-Roo.grid.ColumnModel.defaultRenderer = function(value)
-{
- if(typeof value == "object") {
- return value;
- }
- if(typeof value == "string" && value.length < 1){
- return " ";
- }
-
- return String.format("{0}", value);
-};
-
-// Alias for backwards compatibility
-Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.grid.AbstractSelectionModel
- * @extends Roo.util.Observable
- * @abstract
- * Abstract base class for grid SelectionModels. It provides the interface that should be
- * implemented by descendant classes. This class should not be directly instantiated.
- * @constructor
- */
-Roo.grid.AbstractSelectionModel = function(){
- this.locked = false;
- Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
-};
+ this.updateColumns();
+ this.layout();
+ },
-Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable, {
- /** @ignore Called by the grid automatically. Do not call directly. */
- init : function(grid){
- this.grid = grid;
- this.initEvents();
+ onRowSelect : function(rowIndex){
+ var row = this.getRowComposite(rowIndex);
+ row.addClass("x-grid-row-selected");
},
- /**
- * Locks the selections.
- */
- lock : function(){
- this.locked = true;
+ onRowDeselect : function(rowIndex){
+ var row = this.getRowComposite(rowIndex);
+ row.removeClass("x-grid-row-selected");
},
- /**
- * Unlocks the selections.
- */
- unlock : function(){
- this.locked = false;
+ onCellSelect : function(row, col){
+ var cell = this.getCell(row, col);
+ if(cell){
+ Roo.fly(cell).addClass("x-grid-cell-selected");
+ }
},
- /**
- * Returns true if the selections are locked.
- * @return {Boolean}
- */
- isLocked : function(){
- return this.locked;
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @extends Roo.grid.AbstractSelectionModel
- * @class Roo.grid.RowSelectionModel
- * The default SelectionModel used by {@link Roo.grid.Grid}.
- * It supports multiple selections and keyboard selection/navigation.
- * @constructor
- * @param {Object} config
- */
-Roo.grid.RowSelectionModel = function(config){
- Roo.apply(this, config);
- this.selections = new Roo.util.MixedCollection(false, function(o){
- return o.id;
- });
+ onCellDeselect : function(row, col){
+ var cell = this.getCell(row, col);
+ if(cell){
+ Roo.fly(cell).removeClass("x-grid-cell-selected");
+ }
+ },
- this.last = false;
- this.lastActive = false;
+ updateHeaderSortState : function(){
+
+ // 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;
+ }
+ //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]);
+ }
+ }
+
+
+
+ },
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selection changes
- * @param {SelectionModel} this
- */
- "selectionchange" : true,
- /**
- * @event afterselectionchange
- * Fires after the selection changes (eg. by key press or clicking)
- * @param {SelectionModel} this
- */
- "afterselectionchange" : true,
- /**
- * @event beforerowselect
- * Fires when a row is selected being selected, return false to cancel.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Boolean} keepExisting False if other selections will be cleared
- */
- "beforerowselect" : true,
- /**
- * @event rowselect
- * Fires when a row is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Roo.data.Record} r The record
- */
- "rowselect" : true,
- /**
- * @event rowdeselect
- * Fires when a row is deselected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- */
- "rowdeselect" : true
- });
- Roo.grid.RowSelectionModel.superclass.constructor.call(this);
- this.locked = false;
-};
-Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel, {
- /**
- * @cfg {Boolean} singleSelect
- * True to allow selection of only one row at a time (defaults to false)
- */
- singleSelect : false,
+ handleHeaderClick : function(g, index,e){
+
+ Roo.log("header click");
+
+ if (Roo.isTouch) {
+ // touch events on header are handled by context
+ this.handleHdCtx(g,index,e);
+ return;
+ }
+
+
+ if(this.headersDisabled){
+ return;
+ }
+ var dm = g.dataSource, cm = g.colModel;
+ if(!cm.isSortable(index)){
+ 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));
+ },
- // private
- initEvents : function(){
- if(!this.grid.enableDragDrop && !this.grid.enableDrag){
- this.grid.on("mousedown", this.handleMouseDown, this);
- }else{ // allow click to work like normal
- this.grid.on("rowclick", this.handleDragableRowClick, this);
+ destroy : function(){
+ if(this.colMenu){
+ this.colMenu.removeAll();
+ Roo.menu.MenuMgr.unregister(this.colMenu);
+ this.colMenu.getEl().remove();
+ delete this.colMenu;
}
- // bootstrap does not have a view..
- var view = this.grid.view ? this.grid.view : this.grid;
- this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
- "up" : function(e){
- if(!e.shiftKey){
- this.selectPrevious(e.shiftKey);
- }else if(this.last !== false && this.lastActive !== false){
- var last = this.last;
- this.selectRange(this.last, this.lastActive-1);
- view.focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
+ if(this.hmenu){
+ this.hmenu.removeAll();
+ Roo.menu.MenuMgr.unregister(this.hmenu);
+ this.hmenu.getEl().remove();
+ delete this.hmenu;
+ }
+ if(this.grid.enableColumnMove){
+ var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+ if(dds){
+ for(var dd in dds){
+ if(!dds[dd].config.isTarget && dds[dd].dragElId){
+ var elid = dds[dd].dragElId;
+ dds[dd].unreg();
+ Roo.get(elid).remove();
+ } else if(dds[dd].config.isTarget){
+ dds[dd].proxyTop.remove();
+ dds[dd].proxyBottom.remove();
+ dds[dd].unreg();
}
- }else{
- this.selectFirstRow();
- }
- this.fireEvent("afterselectionchange", this);
- },
- "down" : function(e){
- if(!e.shiftKey){
- this.selectNext(e.shiftKey);
- }else if(this.last !== false && this.lastActive !== false){
- var last = this.last;
- this.selectRange(this.last, this.lastActive+1);
- view.focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
+ if(Roo.dd.DDM.locationCache[dd]){
+ delete Roo.dd.DDM.locationCache[dd];
}
- }else{
- this.selectFirstRow();
}
- this.fireEvent("afterselectionchange", this);
- },
- scope: this
- });
+ delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+ }
+ }
+ Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
+ this.bind(null, null);
+ Roo.EventManager.removeResizeListener(this.onWindowResize, this);
+ },
-
- view.on("refresh", this.onRefresh, this);
- view.on("rowupdated", this.onRowUpdated, this);
- view.on("rowremoved", this.onRemove, this);
+ handleLockChange : function(){
+ this.refresh(true);
},
- // private
- onRefresh : function(){
- var ds = this.grid.ds, i, v = this.grid.view;
- var s = this.selections;
- s.each(function(r){
- if((i = ds.indexOfId(r.id)) != -1){
- v.onRowSelect(i);
- s.add(ds.getAt(i)); // updating the selection relate data
- }else{
- s.remove(r);
- }
- });
+ onDenyColumnLock : function(){
+
},
- // private
- onRemove : function(v, index, r){
- this.selections.remove(r);
+ onDenyColumnHide : function(){
+
},
- // private
- onRowUpdated : function(v, index, r){
- if(this.isSelected(r)){
- v.onRowSelect(index);
+ handleHdMenuClick : function(item){
+ var index = this.hdCtxIndex;
+ var cm = this.cm, ds = this.ds;
+ switch(item.id){
+ case "asc":
+ ds.sort(cm.getDataIndex(index), "ASC");
+ break;
+ case "desc":
+ ds.sort(cm.getDataIndex(index), "DESC");
+ break;
+ case "lock":
+ var lc = cm.getLockedCount();
+ if(cm.getColumnCount(true) <= lc+1){
+ this.onDenyColumnLock();
+ return;
+ }
+ if(lc != index){
+ cm.setLocked(index, true, true);
+ cm.moveColumn(index, lc);
+ this.grid.fireEvent("columnmove", index, lc);
+ }else{
+ cm.setLocked(index, true);
+ }
+ break;
+ case "unlock":
+ var lc = cm.getLockedCount();
+ if((lc-1) != index){
+ cm.setLocked(index, false, true);
+ cm.moveColumn(index, lc-1);
+ this.grid.fireEvent("columnmove", index, lc-1);
+ }else{
+ cm.setLocked(index, false);
+ }
+ break;
+ case 'wider': // used to expand cols on touch..
+ case 'narrow':
+ var cw = cm.getColumnWidth(index);
+ cw += (item.id == 'wider' ? 1 : -1) * 50;
+ cw = Math.max(0, cw);
+ cw = Math.min(cw,4000);
+ cm.setColumnWidth(index, cw);
+ break;
+
+ default:
+ index = cm.getIndexById(item.id.substr(4));
+ if(index != -1){
+ if(item.checked && cm.getColumnCount(true) <= 1){
+ this.onDenyColumnHide();
+ return false;
+ }
+ cm.setHidden(index, item.checked);
+ }
}
+ return true;
},
- /**
- * Select records.
- * @param {Array} records The records to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRecords : function(records, keepExisting){
- if(!keepExisting){
- this.clearSelections();
+ beforeColMenuShow : function(){
+ var cm = this.cm, colCount = cm.getColumnCount();
+ this.colMenu.removeAll();
+
+ var items = [];
+ for(var i = 0; i < colCount; i++){
+ items.push({
+ id: "col-"+cm.getColumnId(i),
+ text: cm.getColumnHeader(i),
+ checked: !cm.isHidden(i),
+ hideOnClick:false
+ });
}
- var ds = this.grid.ds;
- for(var i = 0, len = records.length; i < len; i++){
- this.selectRow(ds.indexOf(records[i]), true);
+
+ if (this.grid.sortColMenu) {
+ items.sort(function(a,b) {
+ if (a.text == b.text) {
+ return 0;
+ }
+ return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
+ });
+ }
+
+ for(var i = 0; i < colCount; i++){
+ this.colMenu.add(new Roo.menu.CheckItem(items[i]));
}
},
- /**
- * Gets the number of selected rows.
- * @return {Number}
- */
- getCount : function(){
- return this.selections.length;
+ handleHdCtx : function(g, index, e){
+ e.stopEvent();
+ var hd = this.getHeaderCell(index);
+ this.hdCtxIndex = index;
+ var ms = this.hmenu.items, cm = this.cm;
+ ms.get("asc").setDisabled(!cm.isSortable(index));
+ ms.get("desc").setDisabled(!cm.isSortable(index));
+ if(this.grid.enableColLock !== false){
+ ms.get("lock").setDisabled(cm.isLocked(index));
+ ms.get("unlock").setDisabled(!cm.isLocked(index));
+ }
+ this.hmenu.show(hd, "tl-bl");
},
- /**
- * Selects the first row in the grid.
- */
- selectFirstRow : function(){
- this.selectRow(0);
+ handleHdOver : function(e){
+ var hd = this.findHeaderCell(e.getTarget());
+ if(hd && !this.headersDisabled){
+ if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
+ this.fly(hd).addClass("x-grid-hd-over");
+ }
+ }
},
- /**
- * Select the last row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectLastRow : function(keepExisting){
- this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
+ handleHdOut : function(e){
+ var hd = this.findHeaderCell(e.getTarget());
+ if(hd){
+ this.fly(hd).removeClass("x-grid-hd-over");
+ }
},
- /**
- * Selects the row immediately following the last selected row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectNext : function(keepExisting){
- if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
- this.selectRow(this.last+1, keepExisting);
- var view = this.grid.view ? this.grid.view : this.grid;
- view.focusRow(this.last);
+ handleSplitDblClick : function(e, t){
+ var i = this.getCellIndex(t);
+ if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
+ this.autoSizeColumn(i, true);
+ this.layout();
}
},
- /**
- * Selects the row that precedes the last selected row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectPrevious : function(keepExisting){
- if(this.last){
- this.selectRow(this.last-1, keepExisting);
- var view = this.grid.view ? this.grid.view : this.grid;
- view.focusRow(this.last);
+ render : function(){
+
+ var cm = this.cm;
+ var colCount = cm.getColumnCount();
+
+ if(this.grid.monitorWindowResize === true){
+ Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
}
- },
+ var header = this.renderHeaders();
+ var body = this.templates.body.apply({rows:""});
+ var html = this.templates.master.apply({
+ lockedBody: body,
+ body: body,
+ lockedHeader: header[0],
+ header: header[1]
+ });
- /**
- * Returns the selected records
- * @return {Array} Array of selected records
- */
- getSelections : function(){
- return [].concat(this.selections.items);
- },
+ //this.updateColumns();
- /**
- * Returns the first selected record.
- * @return {Record}
- */
- getSelected : function(){
- return this.selections.itemAt(0);
- },
+ this.grid.getGridEl().dom.innerHTML = html;
+ this.initElements();
+
+ // a kludge to fix the random scolling effect in webkit
+ this.el.on("scroll", function() {
+ this.el.dom.scrollTop=0; // hopefully not recursive..
+ },this);
- /**
- * Clears all selections.
- */
- clearSelections : function(fast){
- if(this.locked) {
- return;
- }
- if(fast !== true){
- var ds = this.grid.ds;
- var s = this.selections;
- s.each(function(r){
- this.deselectRow(ds.indexOfId(r.id));
- }, this);
- s.clear();
- }else{
- this.selections.clear();
- }
- this.last = false;
- },
+ this.scroller.on("scroll", this.handleScroll, this);
+ this.lockedBody.on("mousewheel", this.handleWheel, this);
+ this.mainBody.on("mousewheel", this.handleWheel, this);
+
+ this.mainHd.on("mouseover", this.handleHdOver, this);
+ this.mainHd.on("mouseout", this.handleHdOut, this);
+ this.mainHd.on("dblclick", this.handleSplitDblClick, this,
+ {delegate: "."+this.splitClass});
+ this.lockedHd.on("mouseover", this.handleHdOver, this);
+ this.lockedHd.on("mouseout", this.handleHdOut, this);
+ this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
+ {delegate: "."+this.splitClass});
- /**
- * Selects all rows.
- */
- selectAll : function(){
- if(this.locked) {
- return;
- }
- this.selections.clear();
- for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
- this.selectRow(i, true);
+ if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
+ new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
}
- },
- /**
- * Returns True if there is a selection.
- * @return {Boolean}
- */
- hasSelection : function(){
- return this.selections.length > 0;
- },
+ this.updateSplitters();
- /**
- * Returns True if the specified row is selected.
- * @param {Number/Record} record The record or index of the record to check
- * @return {Boolean}
- */
- isSelected : function(index){
- var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
- return (r && this.selections.key(r.id) ? true : false);
- },
+ if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
+ new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+ }
- /**
- * Returns True if the specified record id is selected.
- * @param {String} id The id of record to check
- * @return {Boolean}
- */
- isIdSelected : function(id){
- return (this.selections.key(id) ? true : false);
- },
+ if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
+ this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
+ this.hmenu.add(
+ {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
+ {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
+ );
+ if(this.grid.enableColLock !== false){
+ this.hmenu.add('-',
+ {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
+ {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
+ );
+ }
+ if (Roo.isTouch) {
+ this.hmenu.add('-',
+ {id:"wider", text: this.columnsWiderText},
+ {id:"narrow", text: this.columnsNarrowText }
+ );
+
+
+ }
+
+ if(this.grid.enableColumnHide !== false){
- // private
- handleMouseDown : function(e, t)
- {
- var view = this.grid.view ? this.grid.view : this.grid;
- var rowIndex;
- if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
- return;
- };
- if(e.shiftKey && this.last !== false){
- var last = this.last;
- this.selectRange(last, rowIndex, e.ctrlKey);
- this.last = last; // reset the last
- view.focusRow(rowIndex);
- }else{
- var isSelected = this.isSelected(rowIndex);
- if(e.button !== 0 && isSelected){
- view.focusRow(rowIndex);
- }else if(e.ctrlKey && isSelected){
- this.deselectRow(rowIndex);
- }else if(!isSelected){
- this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
- view.focusRow(rowIndex);
+ this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
+ this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
+ this.colMenu.on("itemclick", this.handleHdMenuClick, this);
+
+ this.hmenu.add('-',
+ {id:"columns", text: this.columnsText, menu: this.colMenu}
+ );
}
- }
- this.fireEvent("afterselectionchange", this);
- },
- // private
- handleDragableRowClick : function(grid, rowIndex, e)
- {
- if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
- this.selectRow(rowIndex, false);
- var view = this.grid.view ? this.grid.view : this.grid;
- view.focusRow(rowIndex);
- this.fireEvent("afterselectionchange", this);
- }
- },
-
- /**
- * Selects multiple rows.
- * @param {Array} rows Array of the indexes of the row to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRows : function(rows, keepExisting){
- if(!keepExisting){
- this.clearSelections();
- }
- for(var i = 0, len = rows.length; i < len; i++){
- this.selectRow(rows[i], true);
- }
- },
+ this.hmenu.on("itemclick", this.handleHdMenuClick, this);
- /**
- * Selects a range of rows. All rows in between startRow and endRow are also selected.
- * @param {Number} startRow The index of the first row in the range
- * @param {Number} endRow The index of the last row in the range
- * @param {Boolean} keepExisting (optional) True to retain existing selections
- */
- selectRange : function(startRow, endRow, keepExisting){
- if(this.locked) {
- return;
+ this.grid.on("headercontextmenu", this.handleHdCtx, this);
}
- if(!keepExisting){
- this.clearSelections();
+
+ if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
+ this.dd = new Roo.grid.GridDragZone(this.grid, {
+ ddGroup : this.grid.ddGroup || 'GridDD'
+ });
+
}
- if(startRow <= endRow){
- for(var i = startRow; i <= endRow; i++){
- this.selectRow(i, true);
+
+ /*
+ for(var i = 0; i < colCount; i++){
+ if(cm.isHidden(i)){
+ this.hideColumn(i);
}
- }else{
- for(var i = startRow; i >= endRow; i--){
- this.selectRow(i, true);
+ if(cm.config[i].align){
+ this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
+ this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
}
- }
+ }*/
+
+ this.updateHeaderSortState();
+
+ this.beforeInitialResize();
+ this.layout(true);
+
+ // two part rendering gives faster view to the user
+ this.renderPhase2.defer(1, this);
},
- /**
- * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
- * @param {Number} startRow The index of the first row in the range
- * @param {Number} endRow The index of the last row in the range
- */
- deselectRange : function(startRow, endRow, preventViewNotify){
- if(this.locked) {
- return;
- }
- for(var i = startRow; i <= endRow; i++){
- this.deselectRow(i, preventViewNotify);
+ renderPhase2 : function(){
+ // render the rows now
+ this.refresh();
+ if(this.grid.autoSizeColumns){
+ this.autoSizeColumns();
}
},
- /**
- * Selects a row.
- * @param {Number} row The index of the row to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRow : function(index, keepExisting, preventViewNotify){
- if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
- return;
- }
- if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
- if(!keepExisting || this.singleSelect){
- this.clearSelections();
- }
- var r = this.grid.ds.getAt(index);
- this.selections.add(r);
- this.last = this.lastActive = index;
- if(!preventViewNotify){
- var view = this.grid.view ? this.grid.view : this.grid;
- view.onRowSelect(index);
+ beforeInitialResize : function(){
+
+ },
+
+ onColumnSplitterMoved : function(i, w){
+ this.userResized = true;
+ var cm = this.grid.colModel;
+ cm.setColumnWidth(i, w, true);
+ var cid = cm.getColumnId(i);
+ this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+ this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+ this.updateSplitters();
+ this.layout();
+ this.grid.fireEvent("columnresize", i, w);
+ },
+
+ syncRowHeights : function(startIndex, endIndex){
+ if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
+ startIndex = startIndex || 0;
+ var mrows = this.getBodyTable().rows;
+ var lrows = this.getLockedTable().rows;
+ var len = mrows.length-1;
+ endIndex = Math.min(endIndex || len, len);
+ for(var i = startIndex; i <= endIndex; i++){
+ var m = mrows[i], l = lrows[i];
+ var h = Math.max(m.offsetHeight, l.offsetHeight);
+ m.style.height = l.style.height = h + "px";
}
- this.fireEvent("rowselect", this, index, r);
- this.fireEvent("selectionchange", this);
}
},
- /**
- * Deselects a row.
- * @param {Number} row The index of the row to deselect
- */
- deselectRow : function(index, preventViewNotify){
- if(this.locked) {
+ layout : function(initialRender, is2ndPass)
+ {
+ var g = this.grid;
+ var auto = g.autoHeight;
+ var scrollOffset = 16;
+ var c = g.getGridEl(), cm = this.cm,
+ expandCol = g.autoExpandColumn,
+ gv = this;
+ //c.beginMeasure();
+
+ if(!c.dom.offsetWidth){ // display:none?
+ if(initialRender){
+ this.lockedWrap.show();
+ this.mainWrap.show();
+ }
return;
}
- if(this.last == index){
- this.last = false;
- }
- if(this.lastActive == index){
- this.lastActive = false;
- }
- var r = this.grid.ds.getAt(index);
- this.selections.remove(r);
- if(!preventViewNotify){
- var view = this.grid.view ? this.grid.view : this.grid;
- view.onRowDeselect(index);
- }
- this.fireEvent("rowdeselect", this, index);
- this.fireEvent("selectionchange", this);
- },
- // private
- restoreLast : function(){
- if(this._last){
- this.last = this._last;
- }
- },
+ var hasLock = this.cm.isLocked(0);
- // private
- acceptsNav : function(row, col, cm){
- return !cm.isHidden(col) && cm.isCellEditable(col, row);
- },
+ var tbh = this.headerPanel.getHeight();
+ var bbh = this.footerPanel.getHeight();
- // private
- onEditorKey : function(field, e){
- var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
- if(k == e.TAB){
- e.stopEvent();
- ed.completeEdit();
- if(e.shiftKey){
- newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- }
- }else if(k == e.ENTER && !e.ctrlKey){
- e.stopEvent();
- ed.completeEdit();
- if(e.shiftKey){
- newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
+ if(auto){
+ var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
+ var newHeight = ch + c.getBorderWidth("tb");
+ if(g.maxHeight){
+ newHeight = Math.min(g.maxHeight, newHeight);
}
- }else if(k == e.ESC){
- ed.cancelEdit();
+ c.setHeight(newHeight);
}
- if(newCell){
- g.startEditing(newCell[0], newCell[1]);
+
+ if(g.autoWidth){
+ c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
}
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.grid.CellSelectionModel
- * @extends Roo.grid.AbstractSelectionModel
- * This class provides the basic implementation for cell selection in a grid.
- * @constructor
- * @param {Object} config The object containing the configuration of this model.
- * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
- */
-Roo.grid.CellSelectionModel = function(config){
- Roo.apply(this, config);
- this.selection = null;
+ var s = this.scroller;
- this.addEvents({
- /**
- * @event beforerowselect
- * Fires before a cell is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected row index
- * @param {Number} colIndex The selected cell index
- */
- "beforecellselect" : true,
- /**
- * @event cellselect
- * Fires when a cell is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected row index
- * @param {Number} colIndex The selected cell index
- */
- "cellselect" : true,
- /**
- * @event selectionchange
- * Fires when the active selection changes.
- * @param {SelectionModel} this
- * @param {Object} selection null for no selection or an object (o) with two properties
- <ul>
- <li>o.record: the record object for the row the selection is in</li>
- <li>o.cell: An array of [rowIndex, columnIndex]</li>
- </ul>
- */
- "selectionchange" : true,
- /**
- * @event tabend
- * Fires when the tab (or enter) was pressed on the last editable cell
- * You can use this to trigger add new row.
- * @param {SelectionModel} this
- */
- "tabend" : true,
- /**
- * @event beforeeditnext
- * Fires before the next editable sell is made active
- * You can use this to skip to another cell or fire the tabend
- * if you set cell to false
- * @param {Object} eventdata object : { cell : [ row, col ] }
- */
- "beforeeditnext" : true
- });
- Roo.grid.CellSelectionModel.superclass.constructor.call(this);
-};
+ var csize = c.getSize(true);
-Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel, {
-
- enter_is_tab: false,
+ this.el.setSize(csize.width, csize.height);
- /** @ignore */
- initEvents : function(){
- this.grid.on("mousedown", this.handleMouseDown, this);
- this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
- var view = this.grid.view;
- view.on("refresh", this.onViewChange, this);
- view.on("rowupdated", this.onRowUpdated, this);
- view.on("beforerowremoved", this.clearSelections, this);
- view.on("beforerowsinserted", this.clearSelections, this);
- if(this.grid.isEditor){
- this.grid.on("beforeedit", this.beforeEdit, this);
- }
- },
+ this.headerPanel.setWidth(csize.width);
+ this.footerPanel.setWidth(csize.width);
- //private
- beforeEdit : function(e){
- this.select(e.row, e.column, false, true, e.record);
- },
+ var hdHeight = this.mainHd.getHeight();
+ var vw = csize.width;
+ var vh = csize.height - (tbh + bbh);
- //private
- onRowUpdated : function(v, index, r){
- if(this.selection && this.selection.record == r){
- v.onCellSelect(index, this.selection.cell[1]);
+ s.setSize(vw, vh);
+
+ var bt = this.getBodyTable();
+
+ if(cm.getLockedCount() == cm.config.length){
+ bt = this.getLockedTable();
}
- },
+
+ var ltWidth = hasLock ?
+ Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
- //private
- onViewChange : function(){
- this.clearSelections(true);
- },
+ var scrollHeight = bt.offsetHeight;
+ var scrollWidth = ltWidth + bt.offsetWidth;
+ var vscroll = false, hscroll = false;
- /**
- * Returns the currently selected cell,.
- * @return {Array} The selected cell (row, column) or null if none selected.
- */
- getSelectedCell : function(){
- return this.selection ? this.selection.cell : null;
- },
+ this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
- /**
- * Clears all selections.
- * @param {Boolean} true to prevent the gridview from being notified about the change.
- */
- clearSelections : function(preventNotify){
- var s = this.selection;
- if(s){
- if(preventNotify !== true){
- this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
+ var lw = this.lockedWrap, mw = this.mainWrap;
+ var lb = this.lockedBody, mb = this.mainBody;
+
+ setTimeout(function(){
+ var t = s.dom.offsetTop;
+ var w = s.dom.clientWidth,
+ h = s.dom.clientHeight;
+
+ lw.setTop(t);
+ lw.setSize(ltWidth, h);
+
+ mw.setLeftTop(ltWidth, t);
+ mw.setSize(w-ltWidth, h);
+
+ lb.setHeight(h-hdHeight);
+ mb.setHeight(h-hdHeight);
+
+ if(is2ndPass !== true && !gv.userResized && expandCol){
+ // high speed resize without full column calculation
+
+ var ci = cm.getIndexById(expandCol);
+ if (ci < 0) {
+ ci = cm.findColumnIndex(expandCol);
+ }
+ ci = Math.max(0, ci); // make sure it's got at least the first col.
+ var expandId = cm.getColumnId(ci);
+ var tw = cm.getTotalWidth(false);
+ var currentWidth = cm.getColumnWidth(ci);
+ var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
+ if(currentWidth != cw){
+ cm.setColumnWidth(ci, cw, true);
+ gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+ gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+ gv.updateSplitters();
+ gv.layout(false, true);
+ }
}
- this.selection = null;
- this.fireEvent("selectionchange", this, null);
- }
- },
- /**
- * Returns true if there is a selection.
- * @return {Boolean}
- */
- hasSelection : function(){
- return this.selection ? true : false;
+ if(initialRender){
+ lw.show();
+ mw.show();
+ }
+ //c.endMeasure();
+ }, 10);
},
- /** @ignore */
- handleMouseDown : function(e, t){
- var v = this.grid.getView();
- if(this.isLocked()){
+ onWindowResize : function(){
+ if(!this.grid.monitorWindowResize || this.grid.autoHeight){
return;
- };
- var row = v.findRowIndex(t);
- var cell = v.findCellIndex(t);
- if(row !== false && cell !== false){
- this.select(row, cell);
}
+ this.layout();
},
- /**
- * Selects a cell.
- * @param {Number} rowIndex
- * @param {Number} collIndex
- */
- select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
- if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
- this.clearSelections();
- r = r || this.grid.dataSource.getAt(rowIndex);
- this.selection = {
- record : r,
- cell : [rowIndex, colIndex]
- };
- if(!preventViewNotify){
- var v = this.grid.getView();
- v.onCellSelect(rowIndex, colIndex);
- if(preventFocus !== true){
- v.focusCell(rowIndex, colIndex);
- }
- }
- this.fireEvent("cellselect", this, rowIndex, colIndex);
- this.fireEvent("selectionchange", this, this.selection);
- }
+ appendFooter : function(parentEl){
+ return null;
},
- //private
- isSelectable : function(rowIndex, colIndex, cm){
- return !cm.isHidden(colIndex);
- },
+ sortAscText : "Sort Ascending",
+ sortDescText : "Sort Descending",
+ lockText : "Lock Column",
+ unlockText : "Unlock Column",
+ columnsText : "Columns",
+
+ columnsWiderText : "Wider",
+ columnsNarrowText : "Thinner"
+});
- /** @ignore */
- handleKeyDown : function(e){
- //Roo.log('Cell Sel Model handleKeyDown');
- if(!e.isNavKeyPress()){
- return;
- }
- var g = this.grid, s = this.selection;
- if(!s){
- e.stopEvent();
- var cell = g.walkCells(0, 0, 1, this.isSelectable, this);
- if(cell){
- this.select(cell[0], cell[1]);
- }
- return;
- }
- var sm = this;
- var walk = function(row, col, step){
- return g.walkCells(row, col, step, sm.isSelectable, sm);
- };
- var k = e.getKey(), r = s.cell[0], c = s.cell[1];
- var newCell;
-
+Roo.grid.GridView.ColumnDragZone = function(grid, hd){
+ Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
+ this.proxy.el.addClass('x-grid3-col-dd');
+};
- switch(k){
- case e.TAB:
- // handled by onEditorKey
- if (g.isEditor && g.editing) {
- return;
- }
- if(e.shiftKey) {
- newCell = walk(r, c-1, -1);
- } else {
- newCell = walk(r, c+1, 1);
- }
- break;
-
- case e.DOWN:
- newCell = walk(r+1, c, 1);
- break;
-
- case e.UP:
- newCell = walk(r-1, c, -1);
- break;
-
- case e.RIGHT:
- newCell = walk(r, c+1, 1);
- break;
-
- case e.LEFT:
- newCell = walk(r, c-1, -1);
- break;
-
- case e.ENTER:
-
- if(g.isEditor && !g.editing){
- g.startEditing(r, c);
- e.stopEvent();
- return;
- }
-
-
- break;
- };
- if(newCell){
- this.select(newCell[0], newCell[1]);
- e.stopEvent();
-
- }
- },
+Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
+ handleMouseDown : function(e){
- acceptsNav : function(row, col, cm){
- return !cm.isHidden(col) && cm.isCellEditable(col, row);
},
- /**
- * Selects a cell.
- * @param {Number} field (not used) - as it's normally used as a listener
- * @param {Number} e - event - fake it by using
- *
- * var e = Roo.EventObjectImpl.prototype;
- * e.keyCode = e.TAB
- *
- *
- */
- onEditorKey : function(field, e){
-
- var k = e.getKey(),
- newCell,
- g = this.grid,
- ed = g.activeEditor,
- forward = false;
- ///Roo.log('onEditorKey' + k);
-
+
+ callHandleMouseDown : function(e){
+ Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ /**
+ * @extends Roo.dd.DDProxy
+ * @class Roo.grid.SplitDragZone
+ * Support for Column Header resizing
+ * @constructor
+ * @param {Object} config
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.SplitDragZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ this.proxy = this.view.resizeProxy;
+ Roo.grid.SplitDragZone.superclass.constructor.call(
+ this,
+ hd, // ID
+ "gridSplitters" + this.grid.getGridEl().id, // SGROUP
+ { // CONFIG
+ dragElId : Roo.id(this.proxy.dom),
+ resizeFrame:false
+ }
+ );
+
+ this.setHandleElId(Roo.id(hd));
+ if (hd2 !== false) {
+ this.setOuterHandleElId(Roo.id(hd2));
+ }
+
+ this.scroll = false;
+};
+Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
+ fly: Roo.Element.fly,
+
+ b4StartDrag : function(x, y){
+ this.view.headersDisabled = true;
+ var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
+ this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
+ );
+ this.proxy.setHeight(h);
- if (this.enter_is_tab && k == e.ENTER) {
- k = e.TAB;
+ // for old system colWidth really stored the actual width?
+ // in bootstrap we tried using xs/ms/etc.. to do % sizing?
+ // which in reality did not work.. - it worked only for fixed sizes
+ // for resizable we need to use actual sizes.
+ var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ // bootstrap.
+ w = this.view.getHeaderIndex(this.cellIndex).getWidth();
}
- if(k == e.TAB){
- if(e.shiftKey){
- newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- forward = true;
- }
-
- e.stopEvent();
-
- } else if(k == e.ENTER && !e.ctrlKey){
- ed.completeEdit();
- e.stopEvent();
- newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- } else if(k == e.ESC){
- ed.cancelEdit();
+
+ // this was w-this.grid.minColumnWidth;
+ // doesnt really make sense? - w = thie curren width or the rendered one?
+ var minw = Math.max(w-this.grid.minColumnWidth, 0);
+ this.resetConstraints();
+ this.setXConstraint(minw, 1000);
+ this.setYConstraint(0, 0);
+ this.minX = x - minw;
+ this.maxX = x + 1000;
+ this.startPos = x;
+ if (!this.view.mainWrap) { // this is Bootstrap code..
+ this.getDragEl().style.display='block';
}
-
- if (newCell) {
- var ecall = { cell : newCell, forward : forward };
- this.fireEvent('beforeeditnext', ecall );
- newCell = ecall.cell;
- forward = ecall.forward;
+
+ Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
+ },
+
+
+ handleMouseDown : function(e){
+ ev = Roo.EventObject.setEvent(e);
+ var t = this.fly(ev.getTarget());
+ if(t.hasClass("x-grid-split")){
+ this.cellIndex = this.view.getCellIndex(t.dom);
+ this.split = t.dom;
+ this.cm = this.grid.colModel;
+ if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
+ Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
+ }
}
-
- if(newCell){
- //Roo.log('next cell after edit');
- g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
- } else if (forward) {
- // tabbed past last
- this.fireEvent.defer(100, this, ['tabend',this]);
+ },
+
+ endDrag : function(e){
+ this.view.headersDisabled = false;
+ var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
+ var diff = endX - this.startPos;
+ //
+ var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ w = 0;
}
+ this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
+ },
+
+ autoOffset : function(){
+ this.setDelta(0,0);
}
});/*
* Based on:
* <script type="text/javascript">
*/
-/**
- * @class Roo.grid.EditorGrid
- * @extends Roo.grid.Grid
- * Class for creating and editable grid.
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} dataSource The data model to bind to
- * @param {Object} colModel The column model with info about this grid's columns
- */
-Roo.grid.EditorGrid = function(container, config){
- Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
- this.getGridEl().addClass("xedit-grid");
-
- if(!this.selModel){
- this.selModel = new Roo.grid.CellSelectionModel();
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.GridDragZone = function(grid, config){
+ this.view = grid.getView();
+ Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
+ if(this.view.lockedBody){
+ this.setHandleElId(Roo.id(this.view.mainBody.dom));
+ this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
}
-
- this.activeEditor = null;
-
- this.addEvents({
- /**
- * @event beforeedit
- * Fires before cell editing is triggered. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - This grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value for the field being edited.</li>
- * <li>row - The grid row index</li>
- * <li>column - The grid column index</li>
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
- * </ul>
- * @param {Object} e An edit event (see above for description)
- */
- "beforeedit" : true,
- /**
- * @event afteredit
- * Fires after a cell is edited. <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - This grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value being set</li>
- * <li>originalValue - The original value for the field, before the edit.</li>
- * <li>row - The grid row index</li>
- * <li>column - The grid column index</li>
- * </ul>
- * @param {Object} e An edit event (see above for description)
- */
- "afteredit" : true,
- /**
- * @event validateedit
- * Fires after a cell is edited, but before the value is set in the record.
- * You can use this to modify the value being set in the field, Return false
- * to cancel the change. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>editor - This editor</li>
- * <li>grid - This grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value being set</li>
- * <li>originalValue - The original value for the field, before the edit.</li>
- * <li>row - The grid row index</li>
- * <li>column - The grid column index</li>
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
- * </ul>
- * @param {Object} e An edit event (see above for description)
- */
- "validateedit" : true
- });
- this.on("bodyscroll", this.stopEditing, this);
- this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick, this);
+ this.scroll = false;
+ this.grid = grid;
+ this.ddel = document.createElement('div');
+ this.ddel.className = 'x-grid-dd-wrap';
};
-Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
- /**
- * @cfg {Number} clicksToEdit
- * The number of clicks on a cell required to display the cell's editor (defaults to 2)
- */
- clicksToEdit: 2,
-
- // private
- isEditor : true,
- // private
- trackMouseOver: false, // causes very odd FF errors
-
- onCellDblClick : function(g, row, col){
- this.startEditing(row, col);
- },
+Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
+ ddGroup : "GridDD",
- onEditComplete : function(ed, value, startValue){
- this.editing = false;
- this.activeEditor = null;
- ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
- var r = ed.record;
- var field = this.colModel.getDataIndex(ed.col);
- var e = {
- grid: this,
- record: r,
- field: field,
- originalValue: startValue,
- value: value,
- row: ed.row,
- column: ed.col,
- cancel:false,
- editor: ed
- };
- var cell = Roo.get(this.view.getCell(ed.row,ed.col));
- cell.show();
-
- if(String(value) !== String(startValue)){
+ getDragData : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var rowIndex = this.view.findRowIndex(t);
+ var sm = this.grid.selModel;
- if(this.fireEvent("validateedit", e) !== false && !e.cancel){
- r.set(field, e.value);
- // if we are dealing with a combo box..
- // then we also set the 'name' colum to be the displayField
- if (ed.field.displayField && ed.field.name) {
- r.set(ed.field.name, ed.field.el.dom.value);
- }
-
- delete e.cancel; //?? why!!!
- this.fireEvent("afteredit", e);
+ //Roo.log(rowIndex);
+
+ if (sm.getSelectedCell) {
+ // cell selection..
+ if (!sm.getSelectedCell()) {
+ return false;
}
- } else {
- this.fireEvent("afteredit", e); // always fire it!
+ if (rowIndex != sm.getSelectedCell()[0]) {
+ return false;
+ }
+
}
- this.view.focusCell(ed.row, ed.col);
- },
-
- /**
- * Starts editing the specified for the specified row/column
- * @param {Number} rowIndex
- * @param {Number} colIndex
- */
- startEditing : function(row, col){
- this.stopEditing();
- if(this.colModel.isCellEditable(col, row)){
- this.view.ensureVisible(row, col, true);
-
- var r = this.dataSource.getAt(row);
- var field = this.colModel.getDataIndex(col);
- var cell = Roo.get(this.view.getCell(row,col));
- var e = {
- grid: this,
- record: r,
- field: field,
- value: r.data[field],
- row: row,
- column: col,
- cancel:false
- };
- if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
- this.editing = true;
- var ed = this.colModel.getCellEditor(col, row);
-
- if (!ed) {
- return;
- }
- if(!ed.rendered){
- ed.render(ed.parentEl || document.body);
- }
- ed.field.reset();
+ if (sm.getSelections && sm.getSelections().length < 1) {
+ return false;
+ }
+
+
+ // before it used to all dragging of unseleted... - now we dont do that.
+ if(rowIndex !== false){
+
+ // if editorgrid..
+
+
+ //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
- cell.hide();
-
- (function(){ // complex but required for focus issues in safari, ie and opera
- ed.row = row;
- ed.col = col;
- ed.record = r;
- ed.on("complete", this.onEditComplete, this, {single: true});
- ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
- this.activeEditor = ed;
- var v = r.data[field];
- ed.startEdit(this.view.getCell(row, col), v);
- // combo's with 'displayField and name set
- if (ed.field.displayField && ed.field.name) {
- ed.field.el.dom.value = r.data[ed.field.name];
- }
-
-
- }).defer(50, this);
+ //if(!sm.isSelected(rowIndex) || e.hasModifier()){
+ //
+ //}
+ if (e.hasModifier()){
+ sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
}
+
+ Roo.log("getDragData");
+
+ return {
+ grid: this.grid,
+ ddel: this.ddel,
+ rowIndex: rowIndex,
+ selections: sm.getSelections ? sm.getSelections() : (
+ sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
+ };
}
+ return false;
},
-
- /**
- * Stops any active editing
- */
- stopEditing : function(){
- if(this.activeEditor){
- this.activeEditor.completeEdit();
- }
- this.activeEditor = null;
+
+
+ onInitDrag : function(e){
+ var data = this.dragData;
+ this.ddel.innerHTML = this.grid.getDragDropText();
+ this.proxy.update(this.ddel);
+ // fire start drag?
},
-
- /**
- * Called to get grid's drag proxy text, by default returns this.ddText.
- * @return {String}
- */
- getDragDropText : function(){
- var count = this.selModel.getSelectedCell() ? 1 : 0;
- return String.format(this.ddText, count, count == 1 ? '' : 's');
+
+ afterRepair : function(){
+ this.dragging = false;
+ },
+
+ getRepairXY : function(e, data){
+ return false;
+ },
+
+ onEndDrag : function(data, e){
+ // fire end drag?
+ },
+
+ onValidDrop : function(dd, e, id){
+ // fire drag drop?
+ this.hideProxy();
+ },
+
+ beforeInvalidDrop : function(e, id){
+
}
-
});/*
* Based on:
* Ext JS Library 1.1.1
* Fork - LGPL
* <script type="text/javascript">
*/
-
-// private - not really -- you end up using it !
-// This is a support class used internally by the Grid components
+
/**
- * @class Roo.grid.GridEditor
- * @extends Roo.Editor
- * Class for creating and editable grid elements.
- * @param {Object} config any settings (must include field)
- */
-Roo.grid.GridEditor = function(field, config){
- if (!config && field.field) {
- config = field;
- field = Roo.factory(config.field, Roo.form);
+ * @class Roo.grid.ColumnModel
+ * @extends Roo.util.Observable
+ * This is the default implementation of a ColumnModel used by the Grid. It defines
+ * the columns in the grid.
+ * <br>Usage:<br>
+ <pre><code>
+ var colModel = new Roo.grid.ColumnModel([
+ {header: "Ticker", width: 60, sortable: true, locked: true},
+ {header: "Company Name", width: 150, sortable: true},
+ {header: "Market Cap.", width: 100, sortable: true},
+ {header: "$ Sales", width: 100, sortable: true, renderer: money},
+ {header: "Employees", width: 100, sortable: true, resizable: false}
+ ]);
+ </code></pre>
+ * <p>
+
+ * The config options listed for this class are options which may appear in each
+ * individual column definition.
+ * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
+ * @constructor
+ * @param {Object} config An Array of column config objects. See this class's
+ * config objects for details.
+*/
+Roo.grid.ColumnModel = function(config){
+ /**
+ * The config passed into the constructor
+ */
+ this.config = []; //config;
+ this.lookup = {};
+
+ // if no id, create one
+ // if the column does not have a dataIndex mapping,
+ // map it to the order it is in the config
+ for(var i = 0, len = config.length; i < len; i++){
+ this.addColumn(config[i]);
+
}
- Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
- field.monitorTab = false;
+
+ /**
+ * The width of columns which have no width specified (defaults to 100)
+ * @type Number
+ */
+ this.defaultWidth = 100;
+
+ /**
+ * Default sortable of columns which have no sortable specified (defaults to false)
+ * @type Boolean
+ */
+ this.defaultSortable = false;
+
+ this.addEvents({
+ /**
+ * @event widthchange
+ * Fires when the width of a column changes.
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Number} newWidth The new width
+ */
+ "widthchange": true,
+ /**
+ * @event headerchange
+ * Fires when the text of a header changes.
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Number} newText The new header text
+ */
+ "headerchange": true,
+ /**
+ * @event hiddenchange
+ * Fires when a column is hidden or "unhidden".
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Boolean} hidden true if hidden, false otherwise
+ */
+ "hiddenchange": true,
+ /**
+ * @event columnmoved
+ * Fires when a column is moved.
+ * @param {ColumnModel} this
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
+ */
+ "columnmoved" : true,
+ /**
+ * @event columlockchange
+ * Fires when a column's locked state is changed
+ * @param {ColumnModel} this
+ * @param {Number} colIndex
+ * @param {Boolean} locked true if locked
+ */
+ "columnlockchange" : true
+ });
+ Roo.grid.ColumnModel.superclass.constructor.call(this);
};
+Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
+ /**
+ * @cfg {String} header [required] The header text to display in the Grid view.
+ */
+ /**
+ * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
+ */
+ /**
+ * @cfg {String} smHeader Header at Bootsrap Small width
+ */
+ /**
+ * @cfg {String} mdHeader Header at Bootsrap Medium width
+ */
+ /**
+ * @cfg {String} lgHeader Header at Bootsrap Large width
+ */
+ /**
+ * @cfg {String} xlHeader Header at Bootsrap extra Large width
+ */
+ /**
+ * @cfg {String} dataIndex The name of the field in the grid's {@link Roo.data.Store}'s
+ * {@link Roo.data.Record} definition from which to draw the column's value. If not
+ * specified, the column's index is used as an index into the Record's data Array.
+ */
+ /**
+ * @cfg {Number} width The initial width in pixels of the column. Using this
+ * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
+ */
+ /**
+ * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
+ * Defaults to the value of the {@link #defaultSortable} property.
+ * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
+ */
+ /**
+ * @cfg {Boolean} locked True to lock the column in place while scrolling the Grid. Defaults to false.
+ */
+ /**
+ * @cfg {Boolean} fixed True if the column width cannot be changed. Defaults to false.
+ */
+ /**
+ * @cfg {Boolean} resizable False to disable column resizing. Defaults to true.
+ */
+ /**
+ * @cfg {Boolean} hidden True to hide the column. Defaults to false.
+ */
+ /**
+ * @cfg {Function} renderer A function used to generate HTML markup for a cell
+ * given the cell's data value. See {@link #setRenderer}. If not specified, the
+ * default renderer returns the escaped data value. If an object is returned (bootstrap only)
+ * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
+ */
+ /**
+ * @cfg {Roo.grid.GridEditor} editor For grid editors - returns the grid editor
+ */
+ /**
+ * @cfg {String} align (left|right) Set the CSS text-align property of the column. Defaults to undefined (left).
+ */
+ /**
+ * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined (middle)
+ */
+ /**
+ * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
+ */
+ /**
+ * @cfg {String} tooltip mouse over tooltip text
+ */
+ /**
+ * @cfg {Number} xs can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} lg can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} xl can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * Returns the id of the column at the specified index.
+ * @param {Number} index The column index
+ * @return {String} the id
+ */
+ getColumnId : function(index){
+ return this.config[index].id;
+ },
+
+ /**
+ * Returns the column for a specified id.
+ * @param {String} id The column id
+ * @return {Object} the column
+ */
+ getColumnById : function(id){
+ return this.lookup[id];
+ },
-Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
/**
- * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
+ * Returns the column Object for a specified dataIndex.
+ * @param {String} dataIndex The column dataIndex
+ * @return {Object|Boolean} the column or false if not found
*/
+ getColumnByDataIndex: function(dataIndex){
+ var index = this.findColumnIndex(dataIndex);
+ return index > -1 ? this.config[index] : false;
+ },
- alignment: "tl-tl",
- autoSize: "width",
- hideEl : false,
- cls: "x-small-editor x-grid-editor",
- shim:false,
- shadow:"frame"
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-
-Roo.grid.PropertyRecord = Roo.data.Record.create([
- {name:'name',type:'string'}, 'value'
-]);
+ /**
+ * Returns the index for a specified column id.
+ * @param {String} id The column id
+ * @return {Number} the index, or -1 if not found
+ */
+ getIndexById : function(id){
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(this.config[i].id == id){
+ return i;
+ }
+ }
+ return -1;
+ },
+
+ /**
+ * Returns the index for a specified column dataIndex.
+ * @param {String} dataIndex The column dataIndex
+ * @return {Number} the index, or -1 if not found
+ */
+
+ findColumnIndex : function(dataIndex){
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(this.config[i].dataIndex == dataIndex){
+ return i;
+ }
+ }
+ return -1;
+ },
+
+
+ moveColumn : function(oldIndex, newIndex){
+ var c = this.config[oldIndex];
+ this.config.splice(oldIndex, 1);
+ this.config.splice(newIndex, 0, c);
+ this.dataMap = null;
+ this.fireEvent("columnmoved", this, oldIndex, newIndex);
+ },
+ isLocked : function(colIndex){
+ return this.config[colIndex].locked === true;
+ },
-Roo.grid.PropertyStore = function(grid, source){
- this.grid = grid;
- this.store = new Roo.data.Store({
- recordType : Roo.grid.PropertyRecord
- });
- this.store.on('update', this.onUpdate, this);
- if(source){
- this.setSource(source);
- }
- Roo.grid.PropertyStore.superclass.constructor.call(this);
-};
+ setLocked : function(colIndex, value, suppressEvent){
+ if(this.isLocked(colIndex) == value){
+ return;
+ }
+ this.config[colIndex].locked = value;
+ if(!suppressEvent){
+ this.fireEvent("columnlockchange", this, colIndex, value);
+ }
+ },
+ getTotalLockedWidth : function(){
+ var totalWidth = 0;
+ for(var i = 0; i < this.config.length; i++){
+ if(this.isLocked(i) && !this.isHidden(i)){
+ this.totalWidth += this.getColumnWidth(i);
+ }
+ }
+ return totalWidth;
+ },
+ getLockedCount : function(){
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(!this.isLocked(i)){
+ return i;
+ }
+ }
+
+ return this.config.length;
+ },
-Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
- setSource : function(o){
- this.source = o;
- this.store.removeAll();
- var data = [];
- for(var k in o){
- if(this.isEditableValue(o[k])){
- data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
+ /**
+ * Returns the number of columns.
+ * @return {Number}
+ */
+ getColumnCount : function(visibleOnly){
+ if(visibleOnly === true){
+ var c = 0;
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(!this.isHidden(i)){
+ c++;
+ }
}
+ return c;
}
- this.store.loadRecords({records: data}, {}, true);
+ return this.config.length;
},
- onUpdate : function(ds, record, type){
- if(type == Roo.data.Record.EDIT){
- var v = record.data['value'];
- var oldValue = record.modified['value'];
- if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
- this.source[record.id] = v;
- record.commit();
- this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
- }else{
- record.reject();
+ /**
+ * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
+ * @param {Function} fn
+ * @param {Object} scope (optional)
+ * @return {Array} result
+ */
+ getColumnsBy : function(fn, scope){
+ var r = [];
+ for(var i = 0, len = this.config.length; i < len; i++){
+ var c = this.config[i];
+ if(fn.call(scope||this, c, i) === true){
+ r[r.length] = c;
}
}
+ return r;
},
- getProperty : function(row){
- return this.store.getAt(row);
+ /**
+ * Returns true if the specified column is sortable.
+ * @param {Number} col The column index
+ * @return {Boolean}
+ */
+ isSortable : function(col){
+ if(typeof this.config[col].sortable == "undefined"){
+ return this.defaultSortable;
+ }
+ return this.config[col].sortable;
},
- isEditableValue: function(val){
- if(val && val instanceof Date){
- return true;
- }else if(typeof val == 'object' || typeof val == 'function'){
- return false;
+ /**
+ * Returns the rendering (formatting) function defined for the column.
+ * @param {Number} col The column index.
+ * @return {Function} The function used to render the cell. See {@link #setRenderer}.
+ */
+ getRenderer : function(col){
+ if(!this.config[col].renderer){
+ return Roo.grid.ColumnModel.defaultRenderer;
}
- return true;
+ return this.config[col].renderer;
},
- setValue : function(prop, value){
- this.source[prop] = value;
- this.store.getById(prop).set('value', value);
+ /**
+ * Sets the rendering (formatting) function for a column.
+ * @param {Number} col The column index
+ * @param {Function} fn The function to use to process the cell's raw data
+ * to return HTML markup for the grid view. The render function is called with
+ * the following parameters:<ul>
+ * <li>Data value.</li>
+ * <li>Cell metadata. An object in which you may set the following attributes:<ul>
+ * <li>css A CSS style string to apply to the table cell.</li>
+ * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
+ * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
+ * <li>Row index</li>
+ * <li>Column index</li>
+ * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
+ */
+ setRenderer : function(col, fn){
+ this.config[col].renderer = fn;
},
- getSource : function(){
- return this.source;
- }
-});
+ /**
+ * Returns the width for the specified column.
+ * @param {Number} col The column index
+ * @param (optional) {String} gridSize bootstrap width size.
+ * @return {Number}
+ */
+ getColumnWidth : function(col, gridSize)
+ {
+ var cfg = this.config[col];
+
+ if (typeof(gridSize) == 'undefined') {
+ return cfg.width * 1 || this.defaultWidth;
+ }
+ if (gridSize === false) { // if we set it..
+ return cfg.width || false;
+ }
+ var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+
+ for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
+ if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
+ continue;
+ }
+ return cfg[ sizes[i] ];
+ }
+ return 1;
+
+ },
-Roo.grid.PropertyColumnModel = function(grid, store){
- this.grid = grid;
- var g = Roo.grid;
- g.PropertyColumnModel.superclass.constructor.call(this, [
- {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
- {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
- ]);
- this.store = store;
- this.bselect = Roo.DomHelper.append(document.body, {
- tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
- {tag: 'option', value: 'true', html: 'true'},
- {tag: 'option', value: 'false', html: 'false'}
- ]
- });
- Roo.id(this.bselect);
- var f = Roo.form;
- this.editors = {
- 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
- 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
- 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
- 'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
- 'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
- };
- this.renderCellDelegate = this.renderCell.createDelegate(this);
- this.renderPropDelegate = this.renderProp.createDelegate(this);
-};
+ /**
+ * Sets the width for a column.
+ * @param {Number} col The column index
+ * @param {Number} width The new width
+ */
+ setColumnWidth : function(col, width, suppressEvent){
+ this.config[col].width = width;
+ this.totalWidth = null;
+ if(!suppressEvent){
+ this.fireEvent("widthchange", this, col, width);
+ }
+ },
-Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
-
-
- nameText : 'Name',
- valueText : 'Value',
-
- dateFormat : 'm/j/Y',
-
-
- renderDate : function(dateVal){
- return dateVal.dateFormat(this.dateFormat);
+ /**
+ * Returns the total width of all columns.
+ * @param {Boolean} includeHidden True to include hidden column widths
+ * @return {Number}
+ */
+ getTotalWidth : function(includeHidden){
+ if(!this.totalWidth){
+ this.totalWidth = 0;
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(includeHidden || !this.isHidden(i)){
+ this.totalWidth += this.getColumnWidth(i);
+ }
+ }
+ }
+ return this.totalWidth;
},
- renderBool : function(bVal){
- return bVal ? 'true' : 'false';
+ /**
+ * Returns the header for the specified column.
+ * @param {Number} col The column index
+ * @return {String}
+ */
+ getColumnHeader : function(col){
+ return this.config[col].header;
},
- isCellEditable : function(colIndex, rowIndex){
- return colIndex == 1;
+ /**
+ * Sets the header for a column.
+ * @param {Number} col The column index
+ * @param {String} header The new header
+ */
+ setColumnHeader : function(col, header){
+ this.config[col].header = header;
+ this.fireEvent("headerchange", this, col, header);
},
- getRenderer : function(col){
- return col == 1 ?
- this.renderCellDelegate : this.renderPropDelegate;
+ /**
+ * Returns the tooltip for the specified column.
+ * @param {Number} col The column index
+ * @return {String}
+ */
+ getColumnTooltip : function(col){
+ return this.config[col].tooltip;
+ },
+ /**
+ * Sets the tooltip for a column.
+ * @param {Number} col The column index
+ * @param {String} tooltip The new tooltip
+ */
+ setColumnTooltip : function(col, tooltip){
+ this.config[col].tooltip = tooltip;
},
- renderProp : function(v){
- return this.getPropertyName(v);
+ /**
+ * Returns the dataIndex for the specified column.
+ * @param {Number} col The column index
+ * @return {Number}
+ */
+ getDataIndex : function(col){
+ return this.config[col].dataIndex;
},
- renderCell : function(val){
- var rv = val;
- if(val instanceof Date){
- rv = this.renderDate(val);
- }else if(typeof val == 'boolean'){
- rv = this.renderBool(val);
- }
- return Roo.util.Format.htmlEncode(rv);
+ /**
+ * Sets the dataIndex for a column.
+ * @param {Number} col The column index
+ * @param {Number} dataIndex The new dataIndex
+ */
+ setDataIndex : function(col, dataIndex){
+ this.config[col].dataIndex = dataIndex;
},
- getPropertyName : function(name){
- var pn = this.grid.propertyNames;
- return pn && pn[name] ? pn[name] : name;
+
+
+ /**
+ * Returns true if the cell is editable.
+ * @param {Number} colIndex The column index
+ * @param {Number} rowIndex The row index - this is nto actually used..?
+ * @return {Boolean}
+ */
+ isCellEditable : function(colIndex, rowIndex){
+ return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
},
+ /**
+ * Returns the editor defined for the cell/column.
+ * return false or null to disable editing.
+ * @param {Number} colIndex The column index
+ * @param {Number} rowIndex The row index
+ * @return {Object}
+ */
getCellEditor : function(colIndex, rowIndex){
- var p = this.store.getProperty(rowIndex);
- var n = p.data['name'], val = p.data['value'];
-
- if(typeof(this.grid.customEditors[n]) == 'string'){
- return this.editors[this.grid.customEditors[n]];
- }
- if(typeof(this.grid.customEditors[n]) != 'undefined'){
- return this.grid.customEditors[n];
- }
- if(val instanceof Date){
- return this.editors['date'];
- }else if(typeof val == 'number'){
- return this.editors['number'];
- }else if(typeof val == 'boolean'){
- return this.editors['boolean'];
- }else{
- return this.editors['string'];
- }
- }
-});
+ return this.config[colIndex].editor;
+ },
-/**
- * @class Roo.grid.PropertyGrid
- * @extends Roo.grid.EditorGrid
- * This class represents the interface of a component based property grid control.
- * <br><br>Usage:<pre><code>
- var grid = new Roo.grid.PropertyGrid("my-container-id", {
-
- });
- // set any options
- grid.render();
- * </code></pre>
-
- * @constructor
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid.
- */
-Roo.grid.PropertyGrid = function(container, config){
- config = config || {};
- var store = new Roo.grid.PropertyStore(this);
- this.store = store;
- var cm = new Roo.grid.PropertyColumnModel(this, store);
- store.store.sort('name', 'ASC');
- Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
- ds: store.store,
- cm: cm,
- enableColLock:false,
- enableColumnMove:false,
- stripeRows:false,
- trackMouseOver: false,
- clicksToEdit:1
- }, config));
- this.getGridEl().addClass('x-props-grid');
- this.lastEditRow = null;
- this.on('columnresize', this.onColumnResize, this);
- this.addEvents({
- /**
- * @event beforepropertychange
- * Fires before a property changes (return false to stop?)
- * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
- * @param {String} id Record Id
- * @param {String} newval New Value
- * @param {String} oldval Old Value
- */
- "beforepropertychange": true,
- /**
- * @event propertychange
- * Fires after a property changes
- * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
- * @param {String} id Record Id
- * @param {String} newval New Value
- * @param {String} oldval Old Value
- */
- "propertychange": true
- });
- this.customEditors = this.customEditors || {};
-};
-Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
-
- /**
- * @cfg {Object} customEditors map of colnames=> custom editors.
- * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
- * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
- * false disables editing of the field.
- */
-
- /**
- * @cfg {Object} propertyNames map of property Names to their displayed value
- */
-
- render : function(){
- Roo.grid.PropertyGrid.superclass.render.call(this);
- this.autoSize.defer(100, this);
+ /**
+ * Sets if a column is editable.
+ * @param {Number} col The column index
+ * @param {Boolean} editable True if the column is editable
+ */
+ setEditable : function(col, editable){
+ this.config[col].editable = editable;
},
- autoSize : function(){
- Roo.grid.PropertyGrid.superclass.autoSize.call(this);
- if(this.view){
- this.view.fitColumns();
- }
+
+ /**
+ * Returns true if the column is hidden.
+ * @param {Number} colIndex The column index
+ * @return {Boolean}
+ */
+ isHidden : function(colIndex){
+ return this.config[colIndex].hidden;
},
- onColumnResize : function(){
- this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
- this.autoSize();
+
+ /**
+ * Returns true if the column width cannot be changed
+ */
+ isFixed : function(colIndex){
+ return this.config[colIndex].fixed;
},
+
/**
- * Sets the data for the Grid
- * accepts a Key => Value object of all the elements avaiable.
- * @param {Object} data to appear in grid.
+ * Returns true if the column can be resized
+ * @return {Boolean}
*/
- setSource : function(source){
- this.store.setSource(source);
- //this.autoSize();
+ isResizable : function(colIndex){
+ return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
},
/**
- * Gets all the data from the grid.
- * @return {Object} data data stored in grid
+ * Sets if a column is hidden.
+ * @param {Number} colIndex The column index
+ * @param {Boolean} hidden True if the column is hidden
*/
- getSource : function(){
- return this.store.getSource();
- }
-});/*
-
- * Licence LGPL
-
- */
-
-/**
- * @class Roo.grid.Calendar
- * @extends Roo.grid.Grid
- * This class extends the Grid to provide a calendar widget
- * <br><br>Usage:<pre><code>
- var grid = new Roo.grid.Calendar("my-container-id", {
- ds: myDataStore,
- cm: myColModel,
- selModel: mySelectionModel,
- autoSizeColumns: true,
- monitorWindowResize: false,
- trackMouseOver: true
- eventstore : real data store..
- });
- // set any options
- grid.render();
-
- * @constructor
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid.
- */
-Roo.grid.Calendar = function(container, config){
- // initialize the container
- this.container = Roo.get(container);
- this.container.update("");
- this.container.setStyle("overflow", "hidden");
- this.container.addClass('x-grid-container');
-
- this.id = this.container.id;
+ setHidden : function(colIndex, hidden){
+ this.config[colIndex].hidden = hidden;
+ this.totalWidth = null;
+ this.fireEvent("hiddenchange", this, colIndex, hidden);
+ },
- Roo.apply(this, config);
- // check and correct shorthanded configs
+ /**
+ * Sets the editor for a column.
+ * @param {Number} col The column index
+ * @param {Object} editor The editor object
+ */
+ setEditor : function(col, editor){
+ this.config[col].editor = editor;
+ },
+ /**
+ * Add a column (experimental...) - defaults to adding to the end..
+ * @param {Object} config
+ */
+ addColumn : function(c)
+ {
- var rows = [];
- var d =1;
- for (var r = 0;r < 6;r++) {
-
- rows[r]=[];
- for (var c =0;c < 7;c++) {
- rows[r][c]= '';
+ var i = this.config.length;
+ this.config[i] = c;
+
+ if(typeof c.dataIndex == "undefined"){
+ c.dataIndex = i;
}
- }
- if (this.eventStore) {
- this.eventStore= Roo.factory(this.eventStore, Roo.data);
- this.eventStore.on('load',this.onLoad, this);
- this.eventStore.on('beforeload',this.clearEvents, this);
-
+ if(typeof c.renderer == "string"){
+ c.renderer = Roo.util.Format[c.renderer];
+ }
+ if(typeof c.id == "undefined"){
+ c.id = Roo.id();
+ }
+ if(c.editor && c.editor.xtype){
+ c.editor = Roo.factory(c.editor, Roo.grid);
+ }
+ if(c.editor && c.editor.isFormField){
+ c.editor = new Roo.grid.GridEditor(c.editor);
+ }
+ this.lookup[c.id] = c;
}
- this.dataSource = new Roo.data.Store({
- proxy: new Roo.data.MemoryProxy(rows),
- reader: new Roo.data.ArrayReader({}, [
- 'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
- });
+});
- this.dataSource.load();
- this.ds = this.dataSource;
- this.ds.xmodule = this.xmodule || false;
-
-
- var cellRender = function(v,x,r)
- {
- return String.format(
- '<div class="fc-day fc-widget-content"><div>' +
- '<div class="fc-event-container"></div>' +
- '<div class="fc-day-number">{0}</div>'+
-
- '<div class="fc-day-content"><div style="position:relative"></div></div>' +
- '</div></div>', v);
-
+Roo.grid.ColumnModel.defaultRenderer = function(value)
+{
+ if(typeof value == "object") {
+ return value;
}
+ if(typeof value == "string" && value.length < 1){
+ return " ";
+ }
-
- this.colModel = new Roo.grid.ColumnModel( [
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday0',
- header : 'Sunday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday1',
- header : 'Monday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday2',
- header : 'Tuesday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday3',
- header : 'Wednesday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday4',
- header : 'Thursday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday5',
- header : 'Friday',
- renderer : cellRender
- },
- {
- xtype: 'ColumnModel',
- xns: Roo.grid,
- dataIndex : 'weekday6',
- header : 'Saturday',
- renderer : cellRender
- }
- ]);
- this.cm = this.colModel;
- this.cm.xmodule = this.xmodule || false;
-
-
-
- //this.selModel = new Roo.grid.CellSelectionModel();
- //this.sm = this.selModel;
- //this.selModel.init(this);
-
-
- if(this.width){
- this.container.setWidth(this.width);
- }
+ return String.format("{0}", value);
+};
- if(this.height){
- this.container.setHeight(this.height);
- }
- /** @private */
- this.addEvents({
- // raw events
- /**
- * @event click
- * The raw click event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "click" : true,
- /**
- * @event dblclick
- * The raw dblclick event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "dblclick" : true,
- /**
- * @event contextmenu
- * The raw contextmenu event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "contextmenu" : true,
- /**
- * @event mousedown
- * The raw mousedown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mousedown" : true,
- /**
- * @event mouseup
- * The raw mouseup event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseup" : true,
- /**
- * @event mouseover
- * The raw mouseover event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseover" : true,
- /**
- * @event mouseout
- * The raw mouseout event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "mouseout" : true,
- /**
- * @event keypress
- * The raw keypress event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keypress" : true,
- /**
- * @event keydown
- * The raw keydown event for the entire grid.
- * @param {Roo.EventObject} e
- */
- "keydown" : true,
+// Alias for backwards compatibility
+Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
- // custom events
+/**
+ * @class Roo.grid.AbstractSelectionModel
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid SelectionModels. It provides the interface that should be
+ * implemented by descendant classes. This class should not be directly instantiated.
+ * @constructor
+ */
+Roo.grid.AbstractSelectionModel = function(){
+ this.locked = false;
+ Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
+};
- /**
- * @event cellclick
- * Fires when a cell is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "cellclick" : true,
- /**
- * @event celldblclick
- * Fires when a cell is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "celldblclick" : true,
- /**
- * @event rowclick
- * Fires when a row is clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowclick" : true,
- /**
- * @event rowdblclick
- * Fires when a row is double clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowdblclick" : true,
- /**
- * @event headerclick
- * Fires when a header is clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerclick" : true,
- /**
- * @event headerdblclick
- * Fires when a header cell is double clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headerdblclick" : true,
- /**
- * @event rowcontextmenu
- * Fires when a row is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Roo.EventObject} e
- */
- "rowcontextmenu" : true,
- /**
- * @event cellcontextmenu
- * Fires when a cell is right clicked
- * @param {Grid} this
- * @param {Number} rowIndex
- * @param {Number} cellIndex
- * @param {Roo.EventObject} e
- */
- "cellcontextmenu" : true,
- /**
- * @event headercontextmenu
- * Fires when a header is right clicked
- * @param {Grid} this
- * @param {Number} columnIndex
- * @param {Roo.EventObject} e
- */
- "headercontextmenu" : true,
- /**
- * @event bodyscroll
- * Fires when the body element is scrolled
- * @param {Number} scrollLeft
- * @param {Number} scrollTop
- */
- "bodyscroll" : true,
- /**
- * @event columnresize
- * Fires when the user resizes a column
- * @param {Number} columnIndex
- * @param {Number} newSize
- */
- "columnresize" : true,
- /**
- * @event columnmove
- * Fires when the user moves a column
- * @param {Number} oldIndex
- * @param {Number} newIndex
- */
- "columnmove" : true,
- /**
- * @event startdrag
- * Fires when row(s) start being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "startdrag" : true,
- /**
- * @event enddrag
- * Fires when a drag operation is complete
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {event} e The raw browser event
- */
- "enddrag" : true,
- /**
- * @event dragdrop
- * Fires when dragged row(s) are dropped on a valid DD target
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragdrop" : true,
- /**
- * @event dragover
- * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragover" : true,
- /**
- * @event dragenter
- * Fires when the dragged row(s) first cross another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragenter" : true,
- /**
- * @event dragout
- * Fires when the dragged row(s) leave another DD target while being dragged
- * @param {Grid} this
- * @param {Roo.GridDD} dd The drag drop object
- * @param {String} targetId The target drag drop object
- * @param {event} e The raw browser event
- */
- "dragout" : true,
- /**
- * @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.
- */
- 'rowclass' : true,
+Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable, {
+ /** @ignore Called by the grid automatically. Do not call directly. */
+ init : function(grid){
+ this.grid = grid;
+ this.initEvents();
+ },
+ /**
+ * Locks the selections.
+ */
+ lock : function(){
+ this.locked = true;
+ },
+
+ /**
+ * Unlocks the selections.
+ */
+ unlock : function(){
+ this.locked = false;
+ },
+
+ /**
+ * Returns true if the selections are locked.
+ * @return {Boolean}
+ */
+ isLocked : function(){
+ return this.locked;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @extends Roo.grid.AbstractSelectionModel
+ * @class Roo.grid.RowSelectionModel
+ * The default SelectionModel used by {@link Roo.grid.Grid}.
+ * It supports multiple selections and keyboard selection/navigation.
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.RowSelectionModel = function(config){
+ Roo.apply(this, config);
+ this.selections = new Roo.util.MixedCollection(false, function(o){
+ return o.id;
+ });
+
+ this.last = false;
+ this.lastActive = false;
+
+ this.addEvents({
/**
- * @event render
- * Fires when the grid is rendered
- * @param {Grid} grid
- */
- 'render' : true,
- /**
- * @event select
- * Fires when a date is selected
- * @param {DatePicker} this
- * @param {Date} date The selected date
- */
- 'select': true,
- /**
- * @event monthchange
- * Fires when the displayed month changes
- * @param {DatePicker} this
- * @param {Date} date The selected month
- */
- 'monthchange': true,
- /**
- * @event evententer
- * Fires when mouse over an event
- * @param {Calendar} this
- * @param {event} Event
- */
- 'evententer': true,
- /**
- * @event eventleave
- * Fires when the mouse leaves an
- * @param {Calendar} this
- * @param {event}
- */
- 'eventleave': true,
- /**
- * @event eventclick
- * Fires when the mouse click an
- * @param {Calendar} this
- * @param {event}
- */
- 'eventclick': true,
- /**
- * @event eventrender
- * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
- * @param {Calendar} this
- * @param {data} data to be modified
- */
- 'eventrender': true
-
+ * @event selectionchange
+ * Fires when the selection changes
+ * @param {SelectionModel} this
+ */
+ "selectionchange" : true,
+ /**
+ * @event afterselectionchange
+ * Fires after the selection changes (eg. by key press or clicking)
+ * @param {SelectionModel} this
+ */
+ "afterselectionchange" : true,
+ /**
+ * @event beforerowselect
+ * Fires when a row is selected being selected, return false to cancel.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Boolean} keepExisting False if other selections will be cleared
+ */
+ "beforerowselect" : true,
+ /**
+ * @event rowselect
+ * Fires when a row is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Roo.data.Record} r The record
+ */
+ "rowselect" : true,
+ /**
+ * @event rowdeselect
+ * Fires when a row is deselected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ */
+ "rowdeselect" : true
});
+ Roo.grid.RowSelectionModel.superclass.constructor.call(this);
+ this.locked = false;
+};
- Roo.grid.Grid.superclass.constructor.call(this);
- this.on('render', function() {
- this.view.el.addClass('x-grid-cal');
-
- (function() { this.setDate(new Date()); }).defer(100,this); //default today..
+Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel, {
+ /**
+ * @cfg {Boolean} singleSelect
+ * True to allow selection of only one row at a time (defaults to false)
+ */
+ singleSelect : false,
- },this);
-
- if (!Roo.grid.Calendar.style) {
- Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
-
-
- '.x-grid-cal .x-grid-col' : {
- height: 'auto !important',
- 'vertical-align': 'top'
+ // private
+ initEvents : function(){
+
+ if(!this.grid.enableDragDrop && !this.grid.enableDrag){
+ this.grid.on("mousedown", this.handleMouseDown, this);
+ }else{ // allow click to work like normal
+ this.grid.on("rowclick", this.handleDragableRowClick, this);
+ }
+ // bootstrap does not have a view..
+ var view = this.grid.view ? this.grid.view : this.grid;
+ this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
+ "up" : function(e){
+ if(!e.shiftKey){
+ this.selectPrevious(e.shiftKey);
+ }else if(this.last !== false && this.lastActive !== false){
+ var last = this.last;
+ this.selectRange(this.last, this.lastActive-1);
+ view.focusRow(this.lastActive);
+ if(last !== false){
+ this.last = last;
+ }
+ }else{
+ this.selectFirstRow();
+ }
+ this.fireEvent("afterselectionchange", this);
},
- '.x-grid-cal .fc-event-hori' : {
- height: '14px'
+ "down" : function(e){
+ if(!e.shiftKey){
+ this.selectNext(e.shiftKey);
+ }else if(this.last !== false && this.lastActive !== false){
+ var last = this.last;
+ this.selectRange(this.last, this.lastActive+1);
+ view.focusRow(this.lastActive);
+ if(last !== false){
+ this.last = last;
+ }
+ }else{
+ this.selectFirstRow();
+ }
+ this.fireEvent("afterselectionchange", this);
+ },
+ scope: this
+ });
+
+
+ view.on("refresh", this.onRefresh, this);
+ view.on("rowupdated", this.onRowUpdated, this);
+ view.on("rowremoved", this.onRemove, this);
+ },
+
+ // private
+ onRefresh : function(){
+ var ds = this.grid.ds, i, v = this.grid.view;
+ var s = this.selections;
+ s.each(function(r){
+ if((i = ds.indexOfId(r.id)) != -1){
+ v.onRowSelect(i);
+ s.add(ds.getAt(i)); // updating the selection relate data
+ }else{
+ s.remove(r);
}
-
-
- }, Roo.id());
- }
+ });
+ },
+
+ // private
+ onRemove : function(v, index, r){
+ this.selections.remove(r);
+ },
+
+ // private
+ onRowUpdated : function(v, index, r){
+ if(this.isSelected(r)){
+ v.onRowSelect(index);
+ }
+ },
-
-
-};
-Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
/**
- * @cfg {Store} eventStore The store that loads events.
+ * Select records.
+ * @param {Array} records The records to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
*/
- eventStore : 25,
+ selectRecords : function(records, keepExisting){
+ if(!keepExisting){
+ this.clearSelections();
+ }
+ var ds = this.grid.ds;
+ for(var i = 0, len = records.length; i < len; i++){
+ this.selectRow(ds.indexOf(records[i]), true);
+ }
+ },
-
- activeDate : false,
- startDay : 0,
- autoWidth : true,
- monitorWindowResize : false,
+ /**
+ * Gets the number of selected rows.
+ * @return {Number}
+ */
+ getCount : function(){
+ return this.selections.length;
+ },
-
- resizeColumns : function() {
- var col = (this.view.el.getWidth() / 7) - 3;
- // loop through cols, and setWidth
- for(var i =0 ; i < 7 ; i++){
- this.cm.setColumnWidth(i, col);
+ /**
+ * Selects the first row in the grid.
+ */
+ selectFirstRow : function(){
+ this.selectRow(0);
+ },
+
+ /**
+ * Select the last row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectLastRow : function(keepExisting){
+ this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
+ },
+
+ /**
+ * Selects the row immediately following the last selected row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectNext : function(keepExisting){
+ if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
+ this.selectRow(this.last+1, keepExisting);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
}
},
- setDate :function(date) {
-
- Roo.log('setDate?');
-
- this.resizeColumns();
- var vd = this.activeDate;
- this.activeDate = date;
-// if(vd && this.el){
-// var t = date.getTime();
-// if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
-// Roo.log('using add remove');
-//
-// this.fireEvent('monthchange', this, date);
-//
-// this.cells.removeClass("fc-state-highlight");
-// this.cells.each(function(c){
-// if(c.dateValue == t){
-// c.addClass("fc-state-highlight");
-// setTimeout(function(){
-// try{c.dom.firstChild.focus();}catch(e){}
-// }, 50);
-// return false;
-// }
-// return true;
-// });
-// return;
-// }
-// }
-
- var days = date.getDaysInMonth();
-
- var firstOfMonth = date.getFirstDateOfMonth();
- var startingPos = firstOfMonth.getDay()-this.startDay;
-
- if(startingPos < this.startDay){
- startingPos += 7;
+
+ /**
+ * Selects the row that precedes the last selected row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectPrevious : function(keepExisting){
+ if(this.last){
+ this.selectRow(this.last-1, keepExisting);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
}
-
- var pm = date.add(Date.MONTH, -1);
- var prevStart = pm.getDaysInMonth()-startingPos;
-//
-
-
- this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
-
- this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
- //this.cells.addClassOnOver('fc-state-hover');
-
- var cells = this.cells.elements;
- var textEls = this.textNodes;
-
- //Roo.each(cells, function(cell){
- // cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
- //});
-
- days += startingPos;
+ },
- // convert everything to numbers so it's fast
- var day = 86400000;
- var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
- //Roo.log(d);
- //Roo.log(pm);
- //Roo.log(prevStart);
-
- var today = new Date().clearTime().getTime();
- var sel = date.clearTime().getTime();
- var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
- var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
- var ddMatch = this.disabledDatesRE;
- var ddText = this.disabledDatesText;
- var ddays = this.disabledDays ? this.disabledDays.join("") : false;
- var ddaysText = this.disabledDaysText;
- var format = this.format;
-
- var setCellClass = function(cal, cell){
-
- //Roo.log('set Cell Class');
- cell.title = "";
- var t = d.getTime();
-
- //Roo.log(d);
-
-
- cell.dateValue = t;
- if(t == today){
- cell.className += " fc-today";
- cell.className += " fc-state-highlight";
- cell.title = cal.todayText;
- }
- if(t == sel){
- // disable highlight in other month..
- cell.className += " fc-state-highlight";
-
- }
- // disabling
- if(t < min) {
- //cell.className = " fc-state-disabled";
- cell.title = cal.minText;
- return;
- }
- if(t > max) {
- //cell.className = " fc-state-disabled";
- cell.title = cal.maxText;
- return;
- }
- if(ddays){
- if(ddays.indexOf(d.getDay()) != -1){
- // cell.title = ddaysText;
- // cell.className = " fc-state-disabled";
- }
- }
- if(ddMatch && format){
- var fvalue = d.dateFormat(format);
- if(ddMatch.test(fvalue)){
- cell.title = ddText.replace("%0", fvalue);
- cell.className = " fc-state-disabled";
- }
- }
-
- if (!cell.initialClassName) {
- cell.initialClassName = cell.dom.className;
- }
-
- cell.dom.className = cell.initialClassName + ' ' + cell.className;
+ /**
+ * Returns the selected records
+ * @return {Array} Array of selected records
+ */
+ getSelections : function(){
+ return [].concat(this.selections.items);
+ },
+
+ /**
+ * Returns the first selected record.
+ * @return {Record}
+ */
+ getSelected : function(){
+ return this.selections.itemAt(0);
+ },
+
+
+ /**
+ * Clears all selections.
+ */
+ clearSelections : function(fast){
+ if(this.locked) {
+ return;
+ }
+ if(fast !== true){
+ var ds = this.grid.ds;
+ var s = this.selections;
+ s.each(function(r){
+ this.deselectRow(ds.indexOfId(r.id));
+ }, this);
+ s.clear();
+ }else{
+ this.selections.clear();
+ }
+ this.last = false;
+ },
+
+
+ /**
+ * Selects all rows.
+ */
+ selectAll : function(){
+ if(this.locked) {
+ return;
+ }
+ this.selections.clear();
+ for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
+ this.selectRow(i, true);
+ }
+ },
+
+ /**
+ * Returns True if there is a selection.
+ * @return {Boolean}
+ */
+ hasSelection : function(){
+ return this.selections.length > 0;
+ },
+
+ /**
+ * Returns True if the specified row is selected.
+ * @param {Number/Record} record The record or index of the record to check
+ * @return {Boolean}
+ */
+ isSelected : function(index){
+ var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
+ return (r && this.selections.key(r.id) ? true : false);
+ },
+
+ /**
+ * Returns True if the specified record id is selected.
+ * @param {String} id The id of record to check
+ * @return {Boolean}
+ */
+ isIdSelected : function(id){
+ return (this.selections.key(id) ? true : false);
+ },
+
+ // private
+ handleMouseDown : function(e, t)
+ {
+ var view = this.grid.view ? this.grid.view : this.grid;
+ var rowIndex;
+ if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
+ return;
};
+ if(e.shiftKey && this.last !== false){
+ var last = this.last;
+ this.selectRange(last, rowIndex, e.ctrlKey);
+ this.last = last; // reset the last
+ view.focusRow(rowIndex);
+ }else{
+ var isSelected = this.isSelected(rowIndex);
+ if(e.button !== 0 && isSelected){
+ view.focusRow(rowIndex);
+ }else if(e.ctrlKey && isSelected){
+ this.deselectRow(rowIndex);
+ }else if(!isSelected){
+ this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
+ view.focusRow(rowIndex);
+ }
+ }
+ this.fireEvent("afterselectionchange", this);
+ },
+ // private
+ handleDragableRowClick : function(grid, rowIndex, e)
+ {
+ if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
+ this.selectRow(rowIndex, false);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(rowIndex);
+ this.fireEvent("afterselectionchange", this);
+ }
+ },
+
+ /**
+ * Selects multiple rows.
+ * @param {Array} rows Array of the indexes of the row to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectRows : function(rows, keepExisting){
+ if(!keepExisting){
+ this.clearSelections();
+ }
+ for(var i = 0, len = rows.length; i < len; i++){
+ this.selectRow(rows[i], true);
+ }
+ },
- var i = 0;
-
- for(; i < startingPos; i++) {
- cells[i].dayName = (++prevStart);
- Roo.log(textEls[i]);
- d.setDate(d.getDate()+1);
-
- //cells[i].className = "fc-past fc-other-month";
- setCellClass(this, cells[i]);
+ /**
+ * Selects a range of rows. All rows in between startRow and endRow are also selected.
+ * @param {Number} startRow The index of the first row in the range
+ * @param {Number} endRow The index of the last row in the range
+ * @param {Boolean} keepExisting (optional) True to retain existing selections
+ */
+ selectRange : function(startRow, endRow, keepExisting){
+ if(this.locked) {
+ return;
+ }
+ if(!keepExisting){
+ this.clearSelections();
}
-
- var intDay = 0;
-
- for(; i < days; i++){
- intDay = i - startingPos + 1;
- cells[i].dayName = (intDay);
- d.setDate(d.getDate()+1);
-
- cells[i].className = ''; // "x-date-active";
- setCellClass(this, cells[i]);
+ if(startRow <= endRow){
+ for(var i = startRow; i <= endRow; i++){
+ this.selectRow(i, true);
+ }
+ }else{
+ for(var i = startRow; i >= endRow; i--){
+ this.selectRow(i, true);
+ }
}
- var extraDays = 0;
-
- for(; i < 42; i++) {
- //textEls[i].innerHTML = (++extraDays);
-
- d.setDate(d.getDate()+1);
- cells[i].dayName = (++extraDays);
- cells[i].className = "fc-future fc-other-month";
- setCellClass(this, cells[i]);
+ },
+
+ /**
+ * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
+ * @param {Number} startRow The index of the first row in the range
+ * @param {Number} endRow The index of the last row in the range
+ */
+ deselectRange : function(startRow, endRow, preventViewNotify){
+ if(this.locked) {
+ return;
}
-
- //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
-
- var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
-
- // this will cause all the cells to mis
- var rows= [];
- var i =0;
- for (var r = 0;r < 6;r++) {
- for (var c =0;c < 7;c++) {
- this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
- }
+ for(var i = startRow; i <= endRow; i++){
+ this.deselectRow(i, preventViewNotify);
}
-
- this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
- for(i=0;i<cells.length;i++) {
-
- this.cells.elements[i].dayName = cells[i].dayName ;
- this.cells.elements[i].className = cells[i].className;
- this.cells.elements[i].initialClassName = cells[i].initialClassName ;
- this.cells.elements[i].title = cells[i].title ;
- this.cells.elements[i].dateValue = cells[i].dateValue ;
+ },
+
+ /**
+ * Selects a row.
+ * @param {Number} row The index of the row to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectRow : function(index, keepExisting, preventViewNotify){
+ if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
+ return;
+ }
+ if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
+ if(!keepExisting || this.singleSelect){
+ this.clearSelections();
+ }
+ var r = this.grid.ds.getAt(index);
+ this.selections.add(r);
+ this.last = this.lastActive = index;
+ if(!preventViewNotify){
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowSelect(index);
+ }
+ this.fireEvent("rowselect", this, index, r);
+ this.fireEvent("selectionchange", this);
}
-
-
-
-
- //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
- //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
-
- ////if(totalRows != 6){
- //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
- // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
- // }
-
- this.fireEvent('monthchange', this, date);
-
-
},
- /**
- * Returns the grid's SelectionModel.
- * @return {SelectionModel}
+
+ /**
+ * Deselects a row.
+ * @param {Number} row The index of the row to deselect
*/
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.grid.CellSelectionModel();
+ deselectRow : function(index, preventViewNotify){
+ if(this.locked) {
+ return;
}
- return this.selModel;
+ if(this.last == index){
+ this.last = false;
+ }
+ if(this.lastActive == index){
+ this.lastActive = false;
+ }
+ var r = this.grid.ds.getAt(index);
+ this.selections.remove(r);
+ if(!preventViewNotify){
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowDeselect(index);
+ }
+ this.fireEvent("rowdeselect", this, index);
+ this.fireEvent("selectionchange", this);
},
- load: function() {
- this.eventStore.load()
-
-
-
+ // private
+ restoreLast : function(){
+ if(this._last){
+ this.last = this._last;
+ }
},
-
- findCell : function(dt) {
- dt = dt.clearTime().getTime();
- var ret = false;
- this.cells.each(function(c){
- //Roo.log("check " +c.dateValue + '?=' + dt);
- if(c.dateValue == dt){
- ret = c;
- return false;
- }
- return true;
- });
-
- return ret;
+
+ // private
+ acceptsNav : function(row, col, cm){
+ return !cm.isHidden(col) && cm.isCellEditable(col, row);
},
-
- findCells : function(rec) {
- var s = rec.data.start_dt.clone().clearTime().getTime();
- // Roo.log(s);
- var e= rec.data.end_dt.clone().clearTime().getTime();
- // Roo.log(e);
- var ret = [];
- this.cells.each(function(c){
- ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
-
- if(c.dateValue > e){
- return ;
+
+ // private
+ onEditorKey : function(field, e){
+ var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
+ if(k == e.TAB){
+ e.stopEvent();
+ ed.completeEdit();
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
}
- if(c.dateValue < s){
- return ;
+ }else if(k == e.ENTER && !e.ctrlKey){
+ e.stopEvent();
+ ed.completeEdit();
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
}
- ret.push(c);
- });
-
- return ret;
- },
+ }else if(k == e.ESC){
+ ed.cancelEdit();
+ }
+ if(newCell){
+ g.startEditing(newCell[0], newCell[1]);
+ }
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.grid.CellSelectionModel
+ * @extends Roo.grid.AbstractSelectionModel
+ * This class provides the basic implementation for cell selection in a grid.
+ * @constructor
+ * @param {Object} config The object containing the configuration of this model.
+ * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
+ */
+Roo.grid.CellSelectionModel = function(config){
+ Roo.apply(this, config);
+
+ this.selection = null;
+
+ this.addEvents({
+ /**
+ * @event beforerowselect
+ * Fires before a cell is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected row index
+ * @param {Number} colIndex The selected cell index
+ */
+ "beforecellselect" : true,
+ /**
+ * @event cellselect
+ * Fires when a cell is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected row index
+ * @param {Number} colIndex The selected cell index
+ */
+ "cellselect" : true,
+ /**
+ * @event selectionchange
+ * Fires when the active selection changes.
+ * @param {SelectionModel} this
+ * @param {Object} selection null for no selection or an object (o) with two properties
+ <ul>
+ <li>o.record: the record object for the row the selection is in</li>
+ <li>o.cell: An array of [rowIndex, columnIndex]</li>
+ </ul>
+ */
+ "selectionchange" : true,
+ /**
+ * @event tabend
+ * Fires when the tab (or enter) was pressed on the last editable cell
+ * You can use this to trigger add new row.
+ * @param {SelectionModel} this
+ */
+ "tabend" : true,
+ /**
+ * @event beforeeditnext
+ * Fires before the next editable sell is made active
+ * You can use this to skip to another cell or fire the tabend
+ * if you set cell to false
+ * @param {Object} eventdata object : { cell : [ row, col ] }
+ */
+ "beforeeditnext" : true
+ });
+ Roo.grid.CellSelectionModel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel, {
- findBestRow: function(cells)
- {
- var ret = 0;
-
- for (var i =0 ; i < cells.length;i++) {
- ret = Math.max(cells[i].rows || 0,ret);
+ enter_is_tab: false,
+
+ /** @ignore */
+ initEvents : function(){
+ this.grid.on("mousedown", this.handleMouseDown, this);
+ this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
+ var view = this.grid.view;
+ view.on("refresh", this.onViewChange, this);
+ view.on("rowupdated", this.onRowUpdated, this);
+ view.on("beforerowremoved", this.clearSelections, this);
+ view.on("beforerowsinserted", this.clearSelections, this);
+ if(this.grid.isEditor){
+ this.grid.on("beforeedit", this.beforeEdit, this);
}
- return ret;
-
},
-
-
- addItem : function(rec)
- {
- // look for vertical location slot in
- var cells = this.findCells(rec);
-
- rec.row = this.findBestRow(cells);
-
- // work out the location.
-
- var crow = false;
- var rows = [];
- for(var i =0; i < cells.length; i++) {
- if (!crow) {
- crow = {
- start : cells[i],
- end : cells[i]
- };
- continue;
- }
- if (crow.start.getY() == cells[i].getY()) {
- // on same row.
- crow.end = cells[i];
- continue;
- }
- // different row.
- rows.push(crow);
- crow = {
- start: cells[i],
- end : cells[i]
- };
-
+
+ //private
+ beforeEdit : function(e){
+ this.select(e.row, e.column, false, true, e.record);
+ },
+
+ //private
+ onRowUpdated : function(v, index, r){
+ if(this.selection && this.selection.record == r){
+ v.onCellSelect(index, this.selection.cell[1]);
}
-
- rows.push(crow);
- rec.els = [];
- rec.rows = rows;
- rec.cells = cells;
- for (var i = 0; i < cells.length;i++) {
- cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
-
+ },
+
+ //private
+ onViewChange : function(){
+ this.clearSelections(true);
+ },
+
+ /**
+ * Returns the currently selected cell,.
+ * @return {Array} The selected cell (row, column) or null if none selected.
+ */
+ getSelectedCell : function(){
+ return this.selection ? this.selection.cell : null;
+ },
+
+ /**
+ * Clears all selections.
+ * @param {Boolean} true to prevent the gridview from being notified about the change.
+ */
+ clearSelections : function(preventNotify){
+ var s = this.selection;
+ if(s){
+ if(preventNotify !== true){
+ this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
+ }
+ this.selection = null;
+ this.fireEvent("selectionchange", this, null);
}
-
-
},
-
- clearEvents: function() {
-
- if (!this.eventStore.getCount()) {
+
+ /**
+ * Returns true if there is a selection.
+ * @return {Boolean}
+ */
+ hasSelection : function(){
+ return this.selection ? true : false;
+ },
+
+ /** @ignore */
+ handleMouseDown : function(e, t){
+ var v = this.grid.getView();
+ if(this.isLocked()){
return;
+ };
+ var row = v.findRowIndex(t);
+ var cell = v.findCellIndex(t);
+ if(row !== false && cell !== false){
+ this.select(row, cell);
}
- // reset number of rows in cells.
- Roo.each(this.cells.elements, function(c){
- c.rows = 0;
- });
-
- this.eventStore.each(function(e) {
- this.clearEvent(e);
- },this);
-
},
-
- clearEvent : function(ev)
- {
- if (ev.els) {
- Roo.each(ev.els, function(el) {
- el.un('mouseenter' ,this.onEventEnter, this);
- el.un('mouseleave' ,this.onEventLeave, this);
- el.remove();
- },this);
- ev.els = [];
+
+ /**
+ * Selects a cell.
+ * @param {Number} rowIndex
+ * @param {Number} collIndex
+ */
+ select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
+ if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
+ this.clearSelections();
+ r = r || this.grid.dataSource.getAt(rowIndex);
+ this.selection = {
+ record : r,
+ cell : [rowIndex, colIndex]
+ };
+ if(!preventViewNotify){
+ var v = this.grid.getView();
+ v.onCellSelect(rowIndex, colIndex);
+ if(preventFocus !== true){
+ v.focusCell(rowIndex, colIndex);
+ }
+ }
+ this.fireEvent("cellselect", this, rowIndex, colIndex);
+ this.fireEvent("selectionchange", this, this.selection);
}
},
-
-
- renderEvent : function(ev,ctr) {
- if (!ctr) {
- ctr = this.view.el.select('.fc-event-container',true).first();
+
+ //private
+ isSelectable : function(rowIndex, colIndex, cm){
+ return !cm.isHidden(colIndex);
+ },
+
+ /** @ignore */
+ handleKeyDown : function(e){
+ //Roo.log('Cell Sel Model handleKeyDown');
+ if(!e.isNavKeyPress()){
+ return;
}
-
-
- this.clearEvent(ev);
- //code
-
-
-
- ev.els = [];
- var cells = ev.cells;
- var rows = ev.rows;
- this.fireEvent('eventrender', this, ev);
-
- for(var i =0; i < rows.length; i++) {
-
- cls = '';
- if (i == 0) {
- cls += ' fc-event-start';
- }
- if ((i+1) == rows.length) {
- cls += ' fc-event-end';
+ var g = this.grid, s = this.selection;
+ if(!s){
+ e.stopEvent();
+ var cell = g.walkCells(0, 0, 1, this.isSelectable, this);
+ if(cell){
+ this.select(cell[0], cell[1]);
}
+ return;
+ }
+ var sm = this;
+ var walk = function(row, col, step){
+ return g.walkCells(row, col, step, sm.isSelectable, sm);
+ };
+ var k = e.getKey(), r = s.cell[0], c = s.cell[1];
+ var newCell;
+
+
+
+ switch(k){
+ case e.TAB:
+ // handled by onEditorKey
+ if (g.isEditor && g.editing) {
+ return;
+ }
+ if(e.shiftKey) {
+ newCell = walk(r, c-1, -1);
+ } else {
+ newCell = walk(r, c+1, 1);
+ }
+ break;
- //Roo.log(ev.data);
- // how many rows should it span..
- var cg = this.eventTmpl.append(ctr,Roo.apply({
- fccls : cls
-
- }, ev.data) , true);
-
-
- cg.on('mouseenter' ,this.onEventEnter, this, ev);
- cg.on('mouseleave' ,this.onEventLeave, this, ev);
- cg.on('click', this.onEventClick, this, ev);
-
- ev.els.push(cg);
+ case e.DOWN:
+ newCell = walk(r+1, c, 1);
+ break;
- var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
- var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
- //Roo.log(cg);
-
- cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
- cg.setWidth(ebox.right - sbox.x -2);
- }
- },
-
- renderEvents: function()
- {
- // first make sure there is enough space..
-
- if (!this.eventTmpl) {
- this.eventTmpl = new Roo.Template(
- '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}" style="position: absolute" unselectable="on">' +
- '<div class="fc-event-inner">' +
- '<span class="fc-event-time">{time}</span>' +
- '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
- '</div>' +
- '<div class="ui-resizable-heandle ui-resizable-e"> </div>' +
- '</div>'
- );
-
- }
-
-
-
- this.cells.each(function(c) {
- //Roo.log(c.select('.fc-day-content div',true).first());
- c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
- });
-
- var ctr = this.view.el.select('.fc-event-container',true).first();
-
- var cls;
- this.eventStore.each(function(ev){
+ case e.UP:
+ newCell = walk(r-1, c, -1);
+ break;
- this.renderEvent(ev);
-
-
- }, this);
- this.view.layout();
-
- },
-
- onEventEnter: function (e, el,event,d) {
- this.fireEvent('evententer', this, el, event);
- },
-
- onEventLeave: function (e, el,event,d) {
- this.fireEvent('eventleave', this, el, event);
- },
-
- onEventClick: function (e, el,event,d) {
- this.fireEvent('eventclick', this, el, event);
- },
-
- onMonthChange: function () {
- this.store.load();
- },
-
- onLoad: function () {
-
- //Roo.log('calendar onload');
-//
- if(this.eventStore.getCount() > 0){
+ case e.RIGHT:
+ newCell = walk(r, c+1, 1);
+ break;
-
+ case e.LEFT:
+ newCell = walk(r, c-1, -1);
+ break;
- this.eventStore.each(function(d){
-
+ case e.ENTER:
- // FIXME..
- var add = d.data;
- if (typeof(add.end_dt) == 'undefined') {
- Roo.log("Missing End time in calendar data: ");
- Roo.log(d);
- return;
- }
- if (typeof(add.start_dt) == 'undefined') {
- Roo.log("Missing Start time in calendar data: ");
- Roo.log(d);
- return;
+ if(g.isEditor && !g.editing){
+ g.startEditing(r, c);
+ e.stopEvent();
+ return;
}
- add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
- add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
- add.id = add.id || d.id;
- add.title = add.title || '??';
- this.addItem(d);
-
- },this);
+ break;
+ };
+ if(newCell){
+ this.select(newCell[0], newCell[1]);
+ e.stopEvent();
+
}
-
- this.renderEvents();
- }
-
+ },
-});
-/*
- grid : {
- xtype: 'Grid',
- xns: Roo.grid,
- listeners : {
- render : function ()
- {
- _this.grid = this;
-
- if (!this.view.el.hasClass('course-timesheet')) {
- this.view.el.addClass('course-timesheet');
- }
- if (this.tsStyle) {
- this.ds.load({});
- return;
- }
- Roo.log('width');
- Roo.log(_this.grid.view.el.getWidth());
-
-
- this.tsStyle = Roo.util.CSS.createStyleSheet({
- '.course-timesheet .x-grid-row' : {
- height: '80px'
- },
- '.x-grid-row td' : {
- 'vertical-align' : 0
- },
- '.course-edit-link' : {
- 'color' : 'blue',
- 'text-overflow' : 'ellipsis',
- 'overflow' : 'hidden',
- 'white-space' : 'nowrap',
- 'cursor' : 'pointer'
- },
- '.sub-link' : {
- 'color' : 'green'
- },
- '.de-act-sup-link' : {
- 'color' : 'purple',
- 'text-decoration' : 'line-through'
- },
- '.de-act-link' : {
- 'color' : 'red',
- 'text-decoration' : 'line-through'
- },
- '.course-timesheet .course-highlight' : {
- 'border-top-style': 'dashed !important',
- 'border-bottom-bottom': 'dashed !important'
- },
- '.course-timesheet .course-item' : {
- 'font-family' : 'tahoma, arial, helvetica',
- 'font-size' : '11px',
- 'overflow' : 'hidden',
- 'padding-left' : '10px',
- 'padding-right' : '10px',
- 'padding-top' : '10px'
- }
-
- }, Roo.id());
- this.ds.load({});
- }
- },
- autoWidth : true,
- monitorWindowResize : false,
- cellrenderer : function(v,x,r)
- {
- return v;
- },
- sm : {
- xtype: 'CellSelectionModel',
- xns: Roo.grid
- },
- dataSource : {
- xtype: 'Store',
- xns: Roo.data,
- listeners : {
- beforeload : function (_self, options)
- {
- options.params = options.params || {};
- options.params._month = _this.monthField.getValue();
- options.params.limit = 9999;
- options.params['sort'] = 'when_dt';
- options.params['dir'] = 'ASC';
- this.proxy.loadResponse = this.loadResponse;
- Roo.log("load?");
- //this.addColumns();
- },
- load : function (_self, records, options)
- {
- _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
- // if you click on the translation.. you can edit it...
- var el = Roo.get(this);
- var id = el.dom.getAttribute('data-id');
- var d = el.dom.getAttribute('data-date');
- var t = el.dom.getAttribute('data-time');
- //var id = this.child('span').dom.textContent;
-
- //Roo.log(this);
- Pman.Dialog.CourseCalendar.show({
- id : id,
- when_d : d,
- when_t : t,
- productitem_active : id ? 1 : 0
- }, function() {
- _this.grid.ds.load({});
- });
-
- });
-
- _this.panel.fireEvent('resize', [ '', '' ]);
- }
- },
- loadResponse : function(o, success, response){
- // this is overridden on before load..
-
- Roo.log("our code?");
- //Roo.log(success);
- //Roo.log(response)
- delete this.activeRequest;
- if(!success){
- this.fireEvent("loadexception", this, o, response);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
- return;
- }
- var result;
- try {
- result = o.reader.read(response);
- }catch(e){
- Roo.log("load exception?");
- this.fireEvent("loadexception", this, o, response, e);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
- return;
- }
- Roo.log("ready...");
- // loop through result.records;
- // and set this.tdate[date] = [] << array of records..
- _this.tdata = {};
- Roo.each(result.records, function(r){
- //Roo.log(r.data);
- if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
- _this.tdata[r.data.when_dt.format('j')] = [];
- }
- _this.tdata[r.data.when_dt.format('j')].push(r.data);
- });
-
- //Roo.log(_this.tdata);
-
- result.records = [];
- result.totalRecords = 6;
-
- // let's generate some duumy records for the rows.
- //var st = _this.dateField.getValue();
-
- // work out monday..
- //st = st.add(Date.DAY, -1 * st.format('w'));
-
- var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
-
- var firstOfMonth = date.getFirstDayOfMonth();
- var days = date.getDaysInMonth();
- var d = 1;
- var firstAdded = false;
- for (var i = 0; i < result.totalRecords ; i++) {
- //var d= st.add(Date.DAY, i);
- var row = {};
- var added = 0;
- for(var w = 0 ; w < 7 ; w++){
- if(!firstAdded && firstOfMonth != w){
- continue;
- }
- if(d > days){
- continue;
- }
- firstAdded = true;
- var dd = (d > 0 && d < 10) ? "0"+d : d;
- row['weekday'+w] = String.format(
- '<span style="font-size: 16px;"><b>{0}</b></span>'+
- '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
- d,
- date.format('Y-m-')+dd
- );
- added++;
- if(typeof(_this.tdata[d]) != 'undefined'){
- Roo.each(_this.tdata[d], function(r){
- var is_sub = '';
- var deactive = '';
- var id = r.id;
- var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
- if(r.parent_id*1>0){
- is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
- id = r.parent_id;
- }
- if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
- deactive = 'de-act-link';
- }
-
- row['weekday'+w] += String.format(
- '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
- id, //0
- r.product_id_name, //1
- r.when_dt.format('h:ia'), //2
- is_sub, //3
- deactive, //4
- desc // 5
- );
- });
- }
- d++;
- }
-
- // only do this if something added..
- if(added > 0){
- result.records.push(_this.grid.dataSource.reader.newRow(row));
- }
-
-
- // push it twice. (second one with an hour..
-
- }
- //Roo.log(result);
- this.fireEvent("load", this, o, o.request.arg);
- o.request.callback.call(o.request.scope, result, o.request.arg, true);
- },
- sortInfo : {field: 'when_dt', direction : 'ASC' },
- proxy : {
- xtype: 'HttpProxy',
- xns: Roo.data,
- method : 'GET',
- url : baseURL + '/Roo/Shop_course.php'
- },
- reader : {
- xtype: 'JsonReader',
- xns: Roo.data,
- id : 'id',
- fields : [
- {
- 'name': 'id',
- 'type': 'int'
- },
- {
- 'name': 'when_dt',
- 'type': 'string'
- },
- {
- 'name': 'end_dt',
- 'type': 'string'
- },
- {
- 'name': 'parent_id',
- 'type': 'int'
- },
- {
- 'name': 'product_id',
- 'type': 'int'
- },
- {
- 'name': 'productitem_id',
- 'type': 'int'
- },
- {
- 'name': 'guid',
- 'type': 'int'
- }
- ]
- }
- },
- toolbar : {
- xtype: 'Toolbar',
- xns: Roo,
- items : [
- {
- xtype: 'Button',
- xns: Roo.Toolbar,
- listeners : {
- click : function (_self, e)
- {
- var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
- sd.setMonth(sd.getMonth()-1);
- _this.monthField.setValue(sd.format('Y-m-d'));
- _this.grid.ds.load({});
- }
- },
- text : "Back"
- },
- {
- xtype: 'Separator',
- xns: Roo.Toolbar
- },
- {
- xtype: 'MonthField',
- xns: Roo.form,
- listeners : {
- render : function (_self)
- {
- _this.monthField = _self;
- // _this.monthField.set today
- },
- select : function (combo, date)
- {
- _this.grid.ds.load({});
- }
- },
- value : (function() { return new Date(); })()
- },
- {
- xtype: 'Separator',
- xns: Roo.Toolbar
- },
- {
- xtype: 'TextItem',
- xns: Roo.Toolbar,
- text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
- },
- {
- xtype: 'Fill',
- xns: Roo.Toolbar
- },
- {
- xtype: 'Button',
- xns: Roo.Toolbar,
- listeners : {
- click : function (_self, e)
- {
- var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
- sd.setMonth(sd.getMonth()+1);
- _this.monthField.setValue(sd.format('Y-m-d'));
- _this.grid.ds.load({});
- }
- },
- text : "Next"
- }
- ]
- },
-
+ acceptsNav : function(row, col, cm){
+ return !cm.isHidden(col) && cm.isCellEditable(col, row);
+ },
+ /**
+ * Selects a cell.
+ * @param {Number} field (not used) - as it's normally used as a listener
+ * @param {Number} e - event - fake it by using
+ *
+ * var e = Roo.EventObjectImpl.prototype;
+ * e.keyCode = e.TAB
+ *
+ *
+ */
+ onEditorKey : function(field, e){
+
+ var k = e.getKey(),
+ newCell,
+ g = this.grid,
+ ed = g.activeEditor,
+ forward = false;
+ ///Roo.log('onEditorKey' + k);
+
+
+ if (this.enter_is_tab && k == e.ENTER) {
+ k = e.TAB;
+ }
+
+ if(k == e.TAB){
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+ forward = true;
}
- };
+
+ e.stopEvent();
+
+ } else if(k == e.ENTER && !e.ctrlKey){
+ ed.completeEdit();
+ e.stopEvent();
+ newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- *//*
+ } else if(k == e.ESC){
+ ed.cancelEdit();
+ }
+
+ if (newCell) {
+ var ecall = { cell : newCell, forward : forward };
+ this.fireEvent('beforeeditnext', ecall );
+ newCell = ecall.cell;
+ forward = ecall.forward;
+ }
+
+ if(newCell){
+ //Roo.log('next cell after edit');
+ g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
+ } else if (forward) {
+ // tabbed past last
+ this.fireEvent.defer(100, this, ['tabend',this]);
+ }
+ }
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.LoadMask
- * A simple utility class for generically masking elements while loading data. If the element being masked has
- * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
- * process and the mask element will be cached for reuse. For all other elements, this mask will replace the
- * element's UpdateManager load indicator and will be destroyed after the initial load.
- * @constructor
- * Create a new LoadMask
- * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
- * @param {Object} config The config object
+ * @class Roo.grid.EditorGrid
+ * @extends Roo.grid.Grid
+ * Class for creating and editable grid.
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} dataSource The data model to bind to
+ * @param {Object} colModel The column model with info about this grid's columns
*/
-Roo.LoadMask = function(el, config){
- this.el = Roo.get(el);
- Roo.apply(this, config);
- if(this.store){
- this.store.on('beforeload', this.onBeforeLoad, this);
- this.store.on('load', this.onLoad, this);
- this.store.on('loadexception', this.onLoadException, this);
- this.removeMask = false;
- }else{
- var um = this.el.getUpdateManager();
- um.showLoadIndicator = false; // disable the default indicator
- um.on('beforeupdate', this.onBeforeLoad, this);
- um.on('update', this.onLoad, this);
- um.on('failure', this.onLoad, this);
- this.removeMask = true;
+Roo.grid.EditorGrid = function(container, config){
+ Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
+ this.getGridEl().addClass("xedit-grid");
+
+ if(!this.selModel){
+ this.selModel = new Roo.grid.CellSelectionModel();
}
+
+ this.activeEditor = null;
+
+ this.addEvents({
+ /**
+ * @event beforeedit
+ * Fires before cell editing is triggered. The edit event object has the following properties <br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>grid - This grid</li>
+ * <li>record - The record being edited</li>
+ * <li>field - The field name being edited</li>
+ * <li>value - The value for the field being edited.</li>
+ * <li>row - The grid row index</li>
+ * <li>column - The grid column index</li>
+ * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+ * </ul>
+ * @param {Object} e An edit event (see above for description)
+ */
+ "beforeedit" : true,
+ /**
+ * @event afteredit
+ * Fires after a cell is edited. <br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>grid - This grid</li>
+ * <li>record - The record being edited</li>
+ * <li>field - The field name being edited</li>
+ * <li>value - The value being set</li>
+ * <li>originalValue - The original value for the field, before the edit.</li>
+ * <li>row - The grid row index</li>
+ * <li>column - The grid column index</li>
+ * </ul>
+ * @param {Object} e An edit event (see above for description)
+ */
+ "afteredit" : true,
+ /**
+ * @event validateedit
+ * Fires after a cell is edited, but before the value is set in the record.
+ * You can use this to modify the value being set in the field, Return false
+ * to cancel the change. The edit event object has the following properties <br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>editor - This editor</li>
+ * <li>grid - This grid</li>
+ * <li>record - The record being edited</li>
+ * <li>field - The field name being edited</li>
+ * <li>value - The value being set</li>
+ * <li>originalValue - The original value for the field, before the edit.</li>
+ * <li>row - The grid row index</li>
+ * <li>column - The grid column index</li>
+ * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+ * </ul>
+ * @param {Object} e An edit event (see above for description)
+ */
+ "validateedit" : true
+ });
+ this.on("bodyscroll", this.stopEditing, this);
+ this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick, this);
};
-Roo.LoadMask.prototype = {
+Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
/**
- * @cfg {Boolean} removeMask
- * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
- * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
+ * @cfg {Number} clicksToEdit
+ * The number of clicks on a cell required to display the cell's editor (defaults to 2)
*/
- removeMask : false,
+ clicksToEdit: 2,
+
+ // private
+ isEditor : true,
+ // private
+ trackMouseOver: false, // causes very odd FF errors
+
+ onCellDblClick : function(g, row, col){
+ this.startEditing(row, col);
+ },
+
+ onEditComplete : function(ed, value, startValue){
+ this.editing = false;
+ this.activeEditor = null;
+ ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
+ var r = ed.record;
+ var field = this.colModel.getDataIndex(ed.col);
+ var e = {
+ grid: this,
+ record: r,
+ field: field,
+ originalValue: startValue,
+ value: value,
+ row: ed.row,
+ column: ed.col,
+ cancel:false,
+ editor: ed
+ };
+ var cell = Roo.get(this.view.getCell(ed.row,ed.col));
+ cell.show();
+
+ if(String(value) !== String(startValue)){
+
+ if(this.fireEvent("validateedit", e) !== false && !e.cancel){
+ r.set(field, e.value);
+ // if we are dealing with a combo box..
+ // then we also set the 'name' colum to be the displayField
+ if (ed.field.displayField && ed.field.name) {
+ r.set(ed.field.name, ed.field.el.dom.value);
+ }
+
+ delete e.cancel; //?? why!!!
+ this.fireEvent("afteredit", e);
+ }
+ } else {
+ this.fireEvent("afteredit", e); // always fire it!
+ }
+ this.view.focusCell(ed.row, ed.col);
+ },
+
/**
- * @cfg {String} msg
- * The text to display in a centered loading message box (defaults to 'Loading...')
+ * Starts editing the specified for the specified row/column
+ * @param {Number} rowIndex
+ * @param {Number} colIndex
*/
- msg : 'Loading...',
+ startEditing : function(row, col){
+ this.stopEditing();
+ if(this.colModel.isCellEditable(col, row)){
+ this.view.ensureVisible(row, col, true);
+
+ var r = this.dataSource.getAt(row);
+ var field = this.colModel.getDataIndex(col);
+ var cell = Roo.get(this.view.getCell(row,col));
+ var e = {
+ grid: this,
+ record: r,
+ field: field,
+ value: r.data[field],
+ row: row,
+ column: col,
+ cancel:false
+ };
+ if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
+ this.editing = true;
+ var ed = this.colModel.getCellEditor(col, row);
+
+ if (!ed) {
+ return;
+ }
+ if(!ed.rendered){
+ ed.render(ed.parentEl || document.body);
+ }
+ ed.field.reset();
+
+ cell.hide();
+
+ (function(){ // complex but required for focus issues in safari, ie and opera
+ ed.row = row;
+ ed.col = col;
+ ed.record = r;
+ ed.on("complete", this.onEditComplete, this, {single: true});
+ ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
+ this.activeEditor = ed;
+ var v = r.data[field];
+ ed.startEdit(this.view.getCell(row, col), v);
+ // combo's with 'displayField and name set
+ if (ed.field.displayField && ed.field.name) {
+ ed.field.el.dom.value = r.data[ed.field.name];
+ }
+
+
+ }).defer(50, this);
+ }
+ }
+ },
+
/**
- * @cfg {String} msgCls
- * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
+ * Stops any active editing
*/
- msgCls : 'x-mask-loading',
-
- /**
- * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
- * @type Boolean
+ stopEditing : function(){
+ if(this.activeEditor){
+ this.activeEditor.completeEdit();
+ }
+ this.activeEditor = null;
+ },
+
+ /**
+ * Called to get grid's drag proxy text, by default returns this.ddText.
+ * @return {String}
*/
- disabled: false,
+ getDragDropText : function(){
+ var count = this.selModel.getSelectedCell() ? 1 : 0;
+ return String.format(this.ddText, count, count == 1 ? '' : 's');
+ }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private - not really -- you end up using it !
+// This is a support class used internally by the Grid components
+
+/**
+ * @class Roo.grid.GridEditor
+ * @extends Roo.Editor
+ * Class for creating and editable grid elements.
+ * @param {Object} config any settings (must include field)
+ */
+Roo.grid.GridEditor = function(field, config){
+ if (!config && field.field) {
+ config = field;
+ field = Roo.factory(config.field, Roo.form);
+ }
+ Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
+ field.monitorTab = false;
+};
+Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
+
/**
- * Disables the mask to prevent it from being displayed
+ * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
*/
- disable : function(){
- this.disabled = true;
+
+ alignment: "tl-tl",
+ autoSize: "width",
+ hideEl : false,
+ cls: "x-small-editor x-grid-editor",
+ shim:false,
+ shadow:"frame"
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+
+Roo.grid.PropertyRecord = Roo.data.Record.create([
+ {name:'name',type:'string'}, 'value'
+]);
+
+
+Roo.grid.PropertyStore = function(grid, source){
+ this.grid = grid;
+ this.store = new Roo.data.Store({
+ recordType : Roo.grid.PropertyRecord
+ });
+ this.store.on('update', this.onUpdate, this);
+ if(source){
+ this.setSource(source);
+ }
+ Roo.grid.PropertyStore.superclass.constructor.call(this);
+};
+
+
+
+Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
+ setSource : function(o){
+ this.source = o;
+ this.store.removeAll();
+ var data = [];
+ for(var k in o){
+ if(this.isEditableValue(o[k])){
+ data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
+ }
+ }
+ this.store.loadRecords({records: data}, {}, true);
},
- /**
- * Enables the mask so that it can be displayed
- */
- enable : function(){
- this.disabled = false;
+ onUpdate : function(ds, record, type){
+ if(type == Roo.data.Record.EDIT){
+ var v = record.data['value'];
+ var oldValue = record.modified['value'];
+ if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
+ this.source[record.id] = v;
+ record.commit();
+ this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
+ }else{
+ record.reject();
+ }
+ }
+ },
+
+ getProperty : function(row){
+ return this.store.getAt(row);
+ },
+
+ isEditableValue: function(val){
+ if(val && val instanceof Date){
+ return true;
+ }else if(typeof val == 'object' || typeof val == 'function'){
+ return false;
+ }
+ return true;
+ },
+
+ setValue : function(prop, value){
+ this.source[prop] = value;
+ this.store.getById(prop).set('value', value);
+ },
+
+ getSource : function(){
+ return this.source;
+ }
+});
+
+Roo.grid.PropertyColumnModel = function(grid, store){
+ this.grid = grid;
+ var g = Roo.grid;
+ g.PropertyColumnModel.superclass.constructor.call(this, [
+ {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
+ {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
+ ]);
+ this.store = store;
+ this.bselect = Roo.DomHelper.append(document.body, {
+ tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
+ {tag: 'option', value: 'true', html: 'true'},
+ {tag: 'option', value: 'false', html: 'false'}
+ ]
+ });
+ Roo.id(this.bselect);
+ var f = Roo.form;
+ this.editors = {
+ 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
+ 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
+ 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
+ 'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
+ 'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
+ };
+ this.renderCellDelegate = this.renderCell.createDelegate(this);
+ this.renderPropDelegate = this.renderProp.createDelegate(this);
+};
+
+Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
+
+
+ nameText : 'Name',
+ valueText : 'Value',
+
+ dateFormat : 'm/j/Y',
+
+
+ renderDate : function(dateVal){
+ return dateVal.dateFormat(this.dateFormat);
+ },
+
+ renderBool : function(bVal){
+ return bVal ? 'true' : 'false';
+ },
+
+ isCellEditable : function(colIndex, rowIndex){
+ return colIndex == 1;
+ },
+
+ getRenderer : function(col){
+ return col == 1 ?
+ this.renderCellDelegate : this.renderPropDelegate;
+ },
+
+ renderProp : function(v){
+ return this.getPropertyName(v);
},
+
+ renderCell : function(val){
+ var rv = val;
+ if(val instanceof Date){
+ rv = this.renderDate(val);
+ }else if(typeof val == 'boolean'){
+ rv = this.renderBool(val);
+ }
+ return Roo.util.Format.htmlEncode(rv);
+ },
+
+ getPropertyName : function(name){
+ var pn = this.grid.propertyNames;
+ return pn && pn[name] ? pn[name] : name;
+ },
+
+ getCellEditor : function(colIndex, rowIndex){
+ var p = this.store.getProperty(rowIndex);
+ var n = p.data['name'], val = p.data['value'];
+
+ if(typeof(this.grid.customEditors[n]) == 'string'){
+ return this.editors[this.grid.customEditors[n]];
+ }
+ if(typeof(this.grid.customEditors[n]) != 'undefined'){
+ return this.grid.customEditors[n];
+ }
+ if(val instanceof Date){
+ return this.editors['date'];
+ }else if(typeof val == 'number'){
+ return this.editors['number'];
+ }else if(typeof val == 'boolean'){
+ return this.editors['boolean'];
+ }else{
+ return this.editors['string'];
+ }
+ }
+});
+
+/**
+ * @class Roo.grid.PropertyGrid
+ * @extends Roo.grid.EditorGrid
+ * This class represents the interface of a component based property grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.PropertyGrid("my-container-id", {
+
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.PropertyGrid = function(container, config){
+ config = config || {};
+ var store = new Roo.grid.PropertyStore(this);
+ this.store = store;
+ var cm = new Roo.grid.PropertyColumnModel(this, store);
+ store.store.sort('name', 'ASC');
+ Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
+ ds: store.store,
+ cm: cm,
+ enableColLock:false,
+ enableColumnMove:false,
+ stripeRows:false,
+ trackMouseOver: false,
+ clicksToEdit:1
+ }, config));
+ this.getGridEl().addClass('x-props-grid');
+ this.lastEditRow = null;
+ this.on('columnresize', this.onColumnResize, this);
+ this.addEvents({
+ /**
+ * @event beforepropertychange
+ * Fires before a property changes (return false to stop?)
+ * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+ * @param {String} id Record Id
+ * @param {String} newval New Value
+ * @param {String} oldval Old Value
+ */
+ "beforepropertychange": true,
+ /**
+ * @event propertychange
+ * Fires after a property changes
+ * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+ * @param {String} id Record Id
+ * @param {String} newval New Value
+ * @param {String} oldval Old Value
+ */
+ "propertychange": true
+ });
+ this.customEditors = this.customEditors || {};
+};
+Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
- onLoadException : function()
- {
- Roo.log(arguments);
-
- if (typeof(arguments[3]) != 'undefined') {
- Roo.MessageBox.alert("Error loading",arguments[3]);
- }
- /*
- try {
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
- }
- } catch(e) {
-
- }
- */
+ /**
+ * @cfg {Object} customEditors map of colnames=> custom editors.
+ * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
+ * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
+ * false disables editing of the field.
+ */
- (function() { this.el.unmask(this.removeMask); }).defer(50, this);
- },
- // private
- onLoad : function()
- {
- (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+ /**
+ * @cfg {Object} propertyNames map of property Names to their displayed value
+ */
+
+ render : function(){
+ Roo.grid.PropertyGrid.superclass.render.call(this);
+ this.autoSize.defer(100, this);
},
- // private
- onBeforeLoad : function(){
- if(!this.disabled){
- (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
+ autoSize : function(){
+ Roo.grid.PropertyGrid.superclass.autoSize.call(this);
+ if(this.view){
+ this.view.fitColumns();
}
},
- // private
- destroy : function(){
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
- }else{
- var um = this.el.getUpdateManager();
- um.un('beforeupdate', this.onBeforeLoad, this);
- um.un('update', this.onLoad, this);
- um.un('failure', this.onLoad, this);
- }
+ onColumnResize : function(){
+ this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
+ this.autoSize();
+ },
+ /**
+ * Sets the data for the Grid
+ * accepts a Key => Value object of all the elements avaiable.
+ * @param {Object} data to appear in grid.
+ */
+ setSource : function(source){
+ this.store.setSource(source);
+ //this.autoSize();
+ },
+ /**
+ * Gets all the data from the grid.
+ * @return {Object} data data stored in grid
+ */
+ getSource : function(){
+ return this.store.getSource();
}
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.XTemplate
- * @extends Roo.Template
- * Provides a template that can have nested templates for loops or conditionals. The syntax is:
-<pre><code>
-var t = new Roo.XTemplate(
- '<select name="{name}">',
- '<tpl for="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
- '</select>'
-);
+});/*
+
+ * Licence LGPL
-// then append, applying the master template values
- </code></pre>
- *
- * Supported features:
- *
- * Tags:
-
-<pre><code>
- {a_variable} - output encoded.
- {a_variable.format:("Y-m-d")} - call a method on the variable
- {a_variable:raw} - unencoded output
- {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
- {a_variable:this.method_on_template(...)} - call a method on the template object.
+ */
-</code></pre>
- * The tpl tag:
-<pre><code>
- <tpl for="a_variable or condition.."></tpl>
- <tpl if="a_variable or condition"></tpl>
- <tpl exec="some javascript"></tpl>
- <tpl name="named_template"></tpl> (experimental)
+/**
+ * @class Roo.grid.Calendar
+ * @extends Roo.grid.Grid
+ * This class extends the Grid to provide a calendar widget
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.Calendar("my-container-id", {
+ ds: myDataStore,
+ cm: myColModel,
+ selModel: mySelectionModel,
+ autoSizeColumns: true,
+ monitorWindowResize: false,
+ trackMouseOver: true
+ eventstore : real data store..
+ });
+ // set any options
+ grid.render();
- <tpl for="."></tpl> - just iterate the property..
- <tpl for=".."></tpl> - iterates with the parent (probably the template)
-</code></pre>
- *
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
*/
-Roo.XTemplate = function()
-{
- Roo.XTemplate.superclass.constructor.apply(this, arguments);
- if (this.html) {
- this.compile();
- }
-};
-
-
-Roo.extend(Roo.XTemplate, Roo.Template, {
+Roo.grid.Calendar = function(container, config){
+ // initialize the container
+ this.container = Roo.get(container);
+ this.container.update("");
+ this.container.setStyle("overflow", "hidden");
+ this.container.addClass('x-grid-container');
- /**
- * The various sub templates
- */
- tpls : false,
- /**
- *
- * basic tag replacing syntax
- * WORD:WORD()
- *
- * // you can fake an object call by doing this
- * x.t:(test,tesT)
- *
- */
- re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+ this.id = this.container.id;
- /**
- * compile the template
- *
- * This is not recursive, so I'm not sure how nested templates are really going to be handled..
- *
- */
- compile: function()
- {
- var s = this.html;
-
- s = ['<tpl>', s, '</tpl>'].join('');
-
- var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
- nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
- ifRe = /^<tpl\b[^>]*?if="(.*?)"/,
- execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
- namedRe = /^<tpl\b[^>]*?name="(\w+)"/, // named templates..
- m,
- id = 0,
- tpls = [];
+ Roo.apply(this, config);
+ // check and correct shorthanded configs
- while(true == !!(m = s.match(re))){
- var forMatch = m[0].match(nameRe),
- ifMatch = m[0].match(ifRe),
- execMatch = m[0].match(execRe),
- namedMatch = m[0].match(namedRe),
-
- exp = null,
- fn = null,
- exec = null,
- name = forMatch && forMatch[1] ? forMatch[1] : '';
-
- if (ifMatch) {
- // if - puts fn into test..
- exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
- if(exp){
- fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
- }
- }
-
- if (execMatch) {
- // exec - calls a function... returns empty if true is returned.
- exp = execMatch && execMatch[1] ? execMatch[1] : null;
- if(exp){
- exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
- }
- }
-
-
- if (name) {
- // for =
- switch(name){
- case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
- case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
- default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
- }
- }
- var uid = namedMatch ? namedMatch[1] : id;
-
-
- tpls.push({
- id: namedMatch ? namedMatch[1] : id,
- target: name,
- exec: exec,
- test: fn,
- body: m[1] || ''
- });
- if (namedMatch) {
- s = s.replace(m[0], '');
- } else {
- s = s.replace(m[0], '{xtpl'+ id + '}');
- }
- ++id;
- }
- this.tpls = [];
- for(var i = tpls.length-1; i >= 0; --i){
- this.compileTpl(tpls[i]);
- this.tpls[tpls[i].id] = tpls[i];
- }
- this.master = tpls[tpls.length-1];
- return this;
- },
- /**
- * same as applyTemplate, except it's done to one of the subTemplates
- * when using named templates, you can do:
- *
- * var str = pl.applySubTemplate('your-name', values);
- *
- *
- * @param {Number} id of the template
- * @param {Object} values to apply to template
- * @param {Object} parent (normaly the instance of this object)
- */
- applySubTemplate : function(id, values, parent)
- {
-
-
- var t = this.tpls[id];
-
+ var rows = [];
+ var d =1;
+ for (var r = 0;r < 6;r++) {
- try {
- if(t.test && !t.test.call(this, values, parent)){
- return '';
- }
- } catch(e) {
- Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.test);
- return ''
- }
- try {
-
- if(t.exec && t.exec.call(this, values, parent)){
- return '';
- }
- } catch(e) {
- Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.exec);
- return ''
- }
- try {
- var vs = t.target ? t.target.call(this, values, parent) : values;
- parent = t.target ? values : parent;
- if(t.target && vs instanceof Array){
- var buf = [];
- for(var i = 0, len = vs.length; i < len; i++){
- buf[buf.length] = t.compiled.call(this, vs[i], parent);
- }
- return buf.join('');
- }
- return t.compiled.call(this, vs, parent);
- } catch (e) {
- Roo.log("Xtemplate.applySubTemplate : Exception thrown");
- Roo.log(e.toString());
- Roo.log(t.compiled);
- return '';
+ rows[r]=[];
+ for (var c =0;c < 7;c++) {
+ rows[r][c]= '';
}
- },
+ }
+ if (this.eventStore) {
+ this.eventStore= Roo.factory(this.eventStore, Roo.data);
+ this.eventStore.on('load',this.onLoad, this);
+ this.eventStore.on('beforeload',this.clearEvents, this);
+
+ }
+
+ this.dataSource = new Roo.data.Store({
+ proxy: new Roo.data.MemoryProxy(rows),
+ reader: new Roo.data.ArrayReader({}, [
+ 'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
+ });
- compileTpl : function(tpl)
+ this.dataSource.load();
+ this.ds = this.dataSource;
+ this.ds.xmodule = this.xmodule || false;
+
+
+ var cellRender = function(v,x,r)
{
- var fm = Roo.util.Format;
- var useF = this.disableFormats !== true;
- var sep = Roo.isGecko ? "+" : ",";
- var undef = function(str) {
- Roo.log("Property not found :" + str);
- return '';
- };
-
- var fn = function(m, name, format, args)
- {
- //Roo.log(arguments);
- args = args ? args.replace(/\\'/g,"'") : args;
- //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
- if (typeof(format) == 'undefined') {
- format= 'htmlEncode';
- }
- if (format == 'raw' ) {
- format = false;
- }
-
- if(name.substr(0, 4) == 'xtpl'){
- return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
- }
-
- // build an array of options to determine if value is undefined..
-
- // basically get 'xxxx.yyyy' then do
- // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
- // (function () { Roo.log("Property not found"); return ''; })() :
- // ......
-
- var udef_ar = [];
- var lookfor = '';
- Roo.each(name.split('.'), function(st) {
- lookfor += (lookfor.length ? '.': '') + st;
- udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
- });
-
- var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
-
-
- if(format && useF){
-
- args = args ? ',' + args : "";
-
- if(format.substr(0, 5) != "this."){
- format = "fm." + format + '(';
- }else{
- format = 'this.call("'+ format.substr(5) + '", ';
- args = ", values";
- }
+ return String.format(
+ '<div class="fc-day fc-widget-content"><div>' +
+ '<div class="fc-event-container"></div>' +
+ '<div class="fc-day-number">{0}</div>'+
- return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
- }
-
- if (args.length) {
- // called with xxyx.yuu:(test,test)
- // change to ()
- return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
- }
- // raw.. - :raw modifier..
- return "'"+ sep + udef_st + name + ")"+sep+"'";
-
- };
- var body;
- // branched to use + in gecko and [].join() in others
- if(Roo.isGecko){
- body = "tpl.compiled = function(values, parent){ with(values) { return '" +
- tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
- "';};};";
- }else{
- body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
- body.push(tpl.body.replace(/(\r\n|\n)/g,
- '\\n').replace(/'/g, "\\'").replace(this.re, fn));
- body.push("'].join('');};};");
- body = body.join('');
+ '<div class="fc-day-content"><div style="position:relative"></div></div>' +
+ '</div></div>', v);
+
+ }
+
+
+ this.colModel = new Roo.grid.ColumnModel( [
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday0',
+ header : 'Sunday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday1',
+ header : 'Monday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday2',
+ header : 'Tuesday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday3',
+ header : 'Wednesday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday4',
+ header : 'Thursday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday5',
+ header : 'Friday',
+ renderer : cellRender
+ },
+ {
+ xtype: 'ColumnModel',
+ xns: Roo.grid,
+ dataIndex : 'weekday6',
+ header : 'Saturday',
+ renderer : cellRender
}
+ ]);
+ this.cm = this.colModel;
+ this.cm.xmodule = this.xmodule || false;
+
- Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
-
- /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
- eval(body);
-
- return this;
- },
-
- applyTemplate : function(values){
- return this.master.compiled.call(this, values, {});
- //var s = this.subs;
- },
-
- apply : function(){
- return this.applyTemplate.apply(this, arguments);
- }
-
- });
-
-Roo.XTemplate.from = function(el){
- el = Roo.getDom(el);
- return new Roo.XTemplate(el.value || el.innerHTML);
-};Roo.dialog = {};
-/*
-* Licence: LGPL
-*/
+
+ //this.selModel = new Roo.grid.CellSelectionModel();
+ //this.sm = this.selModel;
+ //this.selModel.init(this);
+
+
+ if(this.width){
+ this.container.setWidth(this.width);
+ }
-/**
- * @class Roo.dialog.UploadCropbox
- * @extends Roo.BoxComponent
- * Dialog UploadCropbox class
- * @cfg {String} emptyText show when image has been loaded
- * @cfg {String} rotateNotify show when image too small to rotate
- * @cfg {Number} errorTimeout default 3000
- * @cfg {Number} minWidth default 300
- * @cfg {Number} minHeight default 300
- * @cfg {Number} outputMaxWidth default 1200
- * @cfg {Number} windowSize default 300
- * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
- * @cfg {Boolean} isDocument (true|false) default false
- * @cfg {String} url action url
- * @cfg {String} paramName default 'imageUpload'
- * @cfg {String} method default POST
- * @cfg {Boolean} loadMask (true|false) default true
- * @cfg {Boolean} loadingText default 'Loading...'
- *
- * @constructor
- * Create a new UploadCropbox
- * @param {Object} config The config object
- */
+ if(this.height){
+ this.container.setHeight(this.height);
+ }
+ /** @private */
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true,
+ /**
+ * @event dblclick
+ * The raw dblclick event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "dblclick" : true,
+ /**
+ * @event contextmenu
+ * The raw contextmenu event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "contextmenu" : true,
+ /**
+ * @event mousedown
+ * The raw mousedown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mousedown" : true,
+ /**
+ * @event mouseup
+ * The raw mouseup event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseup" : true,
+ /**
+ * @event mouseover
+ * The raw mouseover event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseover" : true,
+ /**
+ * @event mouseout
+ * The raw mouseout event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseout" : true,
+ /**
+ * @event keypress
+ * The raw keypress event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keypress" : true,
+ /**
+ * @event keydown
+ * The raw keydown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keydown" : true,
+
+ // custom events
- Roo.dialog.UploadCropbox = function(config){
- Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
-
- this.addEvents({
/**
- * @event beforeselectfile
- * Fire before select file
- * @param {Roo.dialog.UploadCropbox} this
+ * @event cellclick
+ * Fires when a cell is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "beforeselectfile" : true,
+ "cellclick" : true,
/**
- * @event initial
- * Fire after initEvent
- * @param {Roo.dialog.UploadCropbox} this
+ * @event celldblclick
+ * Fires when a cell is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "initial" : true,
+ "celldblclick" : true,
/**
- * @event crop
- * Fire after initEvent
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} data
+ * @event rowclick
+ * Fires when a row is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
*/
- "crop" : true,
+ "rowclick" : true,
/**
- * @event prepare
- * Fire when preparing the file data
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} file
+ * @event rowdblclick
+ * Fires when a row is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
*/
- "prepare" : true,
+ "rowdblclick" : true,
/**
- * @event exception
- * Fire when get exception
- * @param {Roo.dialog.UploadCropbox} this
- * @param {XMLHttpRequest} xhr
+ * @event headerclick
+ * Fires when a header is clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "exception" : true,
+ "headerclick" : true,
/**
- * @event beforeloadcanvas
- * Fire before load the canvas
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} src
+ * @event headerdblclick
+ * Fires when a header cell is double clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "beforeloadcanvas" : true,
+ "headerdblclick" : true,
/**
- * @event trash
- * Fire when trash image
- * @param {Roo.dialog.UploadCropbox} this
+ * @event rowcontextmenu
+ * Fires when a row is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
*/
- "trash" : true,
+ "rowcontextmenu" : true,
/**
- * @event download
- * Fire when download the image
- * @param {Roo.dialog.UploadCropbox} this
+ * @event cellcontextmenu
+ * Fires when a cell is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} cellIndex
+ * @param {Roo.EventObject} e
*/
- "download" : true,
+ "cellcontextmenu" : true,
/**
- * @event footerbuttonclick
- * Fire when footerbuttonclick
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} type
+ * @event headercontextmenu
+ * Fires when a header is right clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
*/
- "footerbuttonclick" : true,
+ "headercontextmenu" : true,
/**
- * @event resize
- * Fire when resize
- * @param {Roo.dialog.UploadCropbox} this
+ * @event bodyscroll
+ * Fires when the body element is scrolled
+ * @param {Number} scrollLeft
+ * @param {Number} scrollTop
*/
- "resize" : true,
+ "bodyscroll" : true,
/**
- * @event rotate
- * Fire when rotate the image
- * @param {Roo.dialog.UploadCropbox} this
- * @param {String} pos
+ * @event columnresize
+ * Fires when the user resizes a column
+ * @param {Number} columnIndex
+ * @param {Number} newSize
*/
- "rotate" : true,
+ "columnresize" : true,
/**
- * @event inspect
- * Fire when inspect the file
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} file
+ * @event columnmove
+ * Fires when the user moves a column
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
*/
- "inspect" : true,
+ "columnmove" : true,
/**
- * @event upload
- * Fire when xhr upload the file
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} data
+ * @event startdrag
+ * Fires when row(s) start being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
*/
- "upload" : true,
+ "startdrag" : true,
/**
- * @event arrange
- * Fire when arrange the file data
- * @param {Roo.dialog.UploadCropbox} this
- * @param {Object} formData
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
*/
- "arrange" : true,
+ "enddrag" : true,
/**
- * @event loadcanvas
- * Fire after load the canvas
- * @param {Roo.dialog.UploadCropbox}
- * @param {Object} imgEl
+ * @event dragdrop
+ * Fires when dragged row(s) are dropped on a valid DD target
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
*/
- "loadcanvas" : true
- });
-
- this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
-};
-
-Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, {
-
- emptyText : 'Click to upload image',
- rotateNotify : 'Image is too small to rotate',
- errorTimeout : 3000,
- scale : 0,
- baseScale : 1,
- rotate : 0,
- dragable : false,
- pinching : false,
- mouseX : 0,
- mouseY : 0,
- cropData : false,
- minWidth : 300,
- minHeight : 300,
- outputMaxWidth : 1200,
- windowSize : 300,
- file : false,
- exif : {},
- baseRotate : 1,
- cropType : 'image/jpeg',
- buttons : false,
- canvasLoaded : false,
- isDocument : false,
- method : 'POST',
- paramName : 'imageUpload',
- loadMask : true,
- loadingText : 'Loading...',
- maskEl : false,
-
- getAutoCreate : function()
- {
- var cfg = {
- tag : 'div',
- cls : 'roo-upload-cropbox',
- cn : [
- {
- tag : 'input',
- cls : 'roo-upload-cropbox-selector',
- type : 'file'
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-body',
- style : 'cursor:pointer',
- cn : [
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-preview'
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-thumb'
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-empty-notify',
- html : this.emptyText
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-error-notify alert alert-danger',
- html : this.rotateNotify
- }
- ]
- },
- {
- tag : 'div',
- cls : 'roo-upload-cropbox-footer',
- cn : {
- tag : 'div',
- cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
- cn : []
- }
- }
- ]
- };
-
- return cfg;
- },
-
- onRender : function(ct, position)
- {
- Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
-
- if(this.el){
- if (this.el.attr('xtype')) {
- this.el.attr('xtypex', this.el.attr('xtype'));
- this.el.dom.removeAttribute('xtype');
-
- this.initEvents();
- }
- }
- else {
- var cfg = Roo.apply({}, this.getAutoCreate());
-
- cfg.id = this.id || Roo.id();
-
- if (this.cls) {
- cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
- }
-
- if (this.style) { // fixme needs to support more complex style data.
- cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
- }
-
- this.el = ct.createChild(cfg, position);
-
- this.initEvents();
- }
-
- if (this.buttons.length) {
-
- Roo.each(this.buttons, function(bb) {
-
- var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
-
- btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
-
- }, this);
- }
-
- if(this.loadMask){
- this.maskEl = this.el;
- }
- },
-
- initEvents : function()
- {
- this.urlAPI = (window.createObjectURL && window) ||
- (window.URL && URL.revokeObjectURL && URL) ||
- (window.webkitURL && webkitURL);
-
- this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
- this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
-
- this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
- this.selectorEl.hide();
-
- this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
- this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
-
- this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
- this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.thumbEl.hide();
-
- this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
- this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
-
- this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
- this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.errorEl.hide();
-
- this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
- this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.footerEl.hide();
-
- this.setThumbBoxSize();
-
- this.bind();
-
- this.resize();
-
- this.fireEvent('initial', this);
- },
-
- bind : function()
- {
- var _this = this;
-
- window.addEventListener("resize", function() { _this.resize(); } );
-
- this.bodyEl.on('click', this.beforeSelectFile, this);
-
- if(Roo.isTouch){
- this.bodyEl.on('touchstart', this.onTouchStart, this);
- this.bodyEl.on('touchmove', this.onTouchMove, this);
- this.bodyEl.on('touchend', this.onTouchEnd, this);
- }
-
- if(!Roo.isTouch){
- this.bodyEl.on('mousedown', this.onMouseDown, this);
- this.bodyEl.on('mousemove', this.onMouseMove, this);
- var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
- this.bodyEl.on(mousewheel, this.onMouseWheel, this);
- Roo.get(document).on('mouseup', this.onMouseUp, this);
- }
-
- this.selectorEl.on('change', this.onFileSelected, this);
- },
-
- reset : function()
- {
- this.scale = 0;
- this.baseScale = 1;
- this.rotate = 0;
- this.baseRotate = 1;
- this.dragable = false;
- this.pinching = false;
- this.mouseX = 0;
- this.mouseY = 0;
- this.cropData = false;
- this.notifyEl.dom.innerHTML = this.emptyText;
-
- // this.selectorEl.dom.value = '';
-
- },
-
- resize : function()
- {
- if(this.fireEvent('resize', this) != false){
- this.setThumbBoxPosition();
- this.setCanvasPosition();
- }
- },
-
- onFooterButtonClick : function(e, el, o, type)
- {
- switch (type) {
- case 'rotate-left' :
- this.onRotateLeft(e);
- break;
- case 'rotate-right' :
- this.onRotateRight(e);
- break;
- case 'picture' :
- this.beforeSelectFile(e);
- break;
- case 'trash' :
- this.trash(e);
- break;
- case 'crop' :
- this.crop(e);
- break;
- case 'download' :
- this.download(e);
- break;
- case 'center' :
- this.center(e);
- break;
- default :
- break;
- }
-
- this.fireEvent('footerbuttonclick', this, type);
- },
-
- beforeSelectFile : function(e)
- {
- e.preventDefault();
-
- if(this.fireEvent('beforeselectfile', this) != false){
- this.selectorEl.dom.click();
- }
- },
-
- onFileSelected : function(e)
- {
- e.preventDefault();
-
- if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
- return;
- }
-
- var file = this.selectorEl.dom.files[0];
+ "dragdrop" : true,
+ /**
+ * @event dragover
+ * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragover" : true,
+ /**
+ * @event dragenter
+ * Fires when the dragged row(s) first cross another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragenter" : true,
+ /**
+ * @event dragout
+ * Fires when the dragged row(s) leave another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragout" : true,
+ /**
+ * @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.
+ */
+ 'rowclass' : true,
+
+ /**
+ * @event render
+ * Fires when the grid is rendered
+ * @param {Grid} grid
+ */
+ 'render' : true,
+ /**
+ * @event select
+ * Fires when a date is selected
+ * @param {DatePicker} this
+ * @param {Date} date The selected date
+ */
+ 'select': true,
+ /**
+ * @event monthchange
+ * Fires when the displayed month changes
+ * @param {DatePicker} this
+ * @param {Date} date The selected month
+ */
+ 'monthchange': true,
+ /**
+ * @event evententer
+ * Fires when mouse over an event
+ * @param {Calendar} this
+ * @param {event} Event
+ */
+ 'evententer': true,
+ /**
+ * @event eventleave
+ * Fires when the mouse leaves an
+ * @param {Calendar} this
+ * @param {event}
+ */
+ 'eventleave': true,
+ /**
+ * @event eventclick
+ * Fires when the mouse click an
+ * @param {Calendar} this
+ * @param {event}
+ */
+ 'eventclick': true,
+ /**
+ * @event eventrender
+ * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
+ * @param {Calendar} this
+ * @param {data} data to be modified
+ */
+ 'eventrender': true
- if(this.fireEvent('inspect', this, file) != false){
- this.prepare(file);
- }
+ });
+
+ Roo.grid.Grid.superclass.constructor.call(this);
+ this.on('render', function() {
+ this.view.el.addClass('x-grid-cal');
- },
-
- trash : function(e)
- {
- this.fireEvent('trash', this);
- },
-
- download : function(e)
- {
- this.fireEvent('download', this);
- },
+ (function() { this.setDate(new Date()); }).defer(100,this); //default today..
- center : function(e)
- {
- this.setCanvasPosition();
- },
-
- loadCanvas : function(src)
- {
- if(this.fireEvent('beforeloadcanvas', this, src) != false){
-
- this.reset();
-
- this.imageEl = document.createElement('img');
-
- var _this = this;
-
- this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
-
- this.imageEl.src = src;
- }
- },
+ },this);
- onLoadCanvas : function()
- {
- this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
- this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
-
- if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
-
- this.bodyEl.un('click', this.beforeSelectFile, this);
-
- this.notifyEl.hide();
- this.thumbEl.show();
- this.footerEl.show();
+ if (!Roo.grid.Calendar.style) {
+ Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
- this.baseRotateLevel();
- if(this.isDocument){
- this.setThumbBoxSize();
+ '.x-grid-cal .x-grid-col' : {
+ height: 'auto !important',
+ 'vertical-align': 'top'
+ },
+ '.x-grid-cal .fc-event-hori' : {
+ height: '14px'
}
+
- this.setThumbBoxPosition();
-
- this.baseScaleLevel();
-
- this.draw();
-
- this.resize();
-
- this.canvasLoaded = true;
-
- }
-
- if(this.loadMask){
- this.maskEl.unmask();
- }
-
- },
-
- setCanvasPosition : function(center = true)
- {
- if(!this.canvasEl){
- return;
- }
-
- var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
- var newCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
-
- if(center) {
- this.previewEl.setLeft(newCenterLeft);
- this.previewEl.setTop(newCenterTop);
-
- return;
- }
-
- var oldScaleLevel = this.baseScale * Math.pow(1.02, this.startScale);
- var oldCanvasWidth = Math.floor(this.imageEl.OriginWidth * oldScaleLevel);
- var oldCanvasHeight = Math.floor(this.imageEl.OriginHeight * oldScaleLevel);
-
- var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - oldCanvasWidth) / 2);
- var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - oldCanvasHeight) / 2);
-
- var leftDiff = newCenterLeft - oldCenterLeft;
- var topDiff = newCenterTop - oldCenterTop;
-
- var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
- var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+ }, Roo.id());
+ }
- this.previewEl.setLeft(newPreviewLeft);
- this.previewEl.setTop(newPreviewTop);
-
- },
- onMouseDown : function(e)
- {
- e.stopEvent();
-
- this.dragable = true;
- this.pinching = false;
-
- if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
- this.dragable = false;
- return;
- }
-
- this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
- this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
-
- },
- onMouseMove : function(e)
- {
- e.stopEvent();
-
- if(!this.canvasLoaded){
- return;
- }
-
- if (!this.dragable){
- return;
- }
-
- var maxPaddingLeft = this.canvasEl.width / 0.9 * 0.05;
- var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
- maxPaddingLeft = (this.canvasEl.height * this.minWidth / this.minHeight - this.canvasEl.width) / 2 + maxPaddingLeft;
- }
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
- maxPaddingTop = (this.canvasEl.width * this.minHeight / this.minWidth - this.canvasEl.height) / 2 + maxPaddingTop;
- }
-
- var minX = Math.ceil(this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - this.canvasEl.width - maxPaddingLeft);
- var minY = Math.ceil(this.thumbEl.getTop(true) + this.thumbEl.getHeight() - this.canvasEl.height - maxPaddingTop);
-
- var maxX = Math.ceil(this.thumbEl.getLeft(true) + maxPaddingLeft);
- var maxY = Math.ceil(this.thumbEl.getTop(true) + maxPaddingTop);
+};
+Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
+ /**
+ * @cfg {Store} eventStore The store that loads events.
+ */
+ eventStore : 25,
- if(minX > maxX) {
- var tempX = minX;
- minX = maxX;
- maxX = tempX;
- }
+
+ activeDate : false,
+ startDay : 0,
+ autoWidth : true,
+ monitorWindowResize : false,
- if(minY > maxY) {
- var tempY = minY;
- minY = maxY;
- maxY = tempY;
+
+ resizeColumns : function() {
+ var col = (this.view.el.getWidth() / 7) - 3;
+ // loop through cols, and setWidth
+ for(var i =0 ; i < 7 ; i++){
+ this.cm.setColumnWidth(i, col);
}
-
- var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
- var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
-
- x = x - this.mouseX;
- y = y - this.mouseY;
-
- var bgX = Math.ceil(x + this.previewEl.getLeft(true));
- var bgY = Math.ceil(y + this.previewEl.getTop(true));
-
- bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
- bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+ },
+ setDate :function(date) {
- this.previewEl.setLeft(bgX);
- this.previewEl.setTop(bgY);
+ Roo.log('setDate?');
- this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
- this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
- },
-
- onMouseUp : function(e)
- {
- e.stopEvent();
+ this.resizeColumns();
+ var vd = this.activeDate;
+ this.activeDate = date;
+// if(vd && this.el){
+// var t = date.getTime();
+// if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
+// Roo.log('using add remove');
+//
+// this.fireEvent('monthchange', this, date);
+//
+// this.cells.removeClass("fc-state-highlight");
+// this.cells.each(function(c){
+// if(c.dateValue == t){
+// c.addClass("fc-state-highlight");
+// setTimeout(function(){
+// try{c.dom.firstChild.focus();}catch(e){}
+// }, 50);
+// return false;
+// }
+// return true;
+// });
+// return;
+// }
+// }
- this.dragable = false;
- },
-
- onMouseWheel : function(e)
- {
- e.stopEvent();
+ var days = date.getDaysInMonth();
- this.startScale = this.scale;
- this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1);
+ var firstOfMonth = date.getFirstDateOfMonth();
+ var startingPos = firstOfMonth.getDay()-this.startDay;
- if(!this.zoomable()){
- this.scale = this.startScale;
- return;
+ if(startingPos < this.startDay){
+ startingPos += 7;
}
-
-
- this.draw();
- return;
- },
-
- zoomable : function()
- {
- var minScale = this.thumbEl.getWidth() / this.minWidth;
+ var pm = date.add(Date.MONTH, -1);
+ var prevStart = pm.getDaysInMonth()-startingPos;
+//
- if(this.minWidth < this.minHeight){
- minScale = this.thumbEl.getHeight() / this.minHeight;
- }
- var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
- var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
-
- var maxWidth = this.imageEl.OriginWidth;
- var maxHeight = this.imageEl.OriginHeight;
-
-
- var newCanvasWidth = Math.floor(this.imageEl.OriginWidth * this.getScaleLevel());
- var newCanvasHeight = Math.floor(this.imageEl.OriginHeight * this.getScaleLevel());
-
- var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
- var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
-
- var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - newCanvasWidth) / 2);
- var newCenterTop = Math.ceil((this.bodyEl.getHeight() - newCanvasHeight) / 2);
-
- var leftDiff = newCenterLeft - oldCenterLeft;
- var topDiff = newCenterTop - oldCenterTop;
-
- var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
- var newPreviewTop = this.previewEl.getTop(true) + topDiff;
-
- var paddingLeft = newPreviewLeft - this.thumbEl.getLeft(true);
- var paddingTop = newPreviewTop - this.thumbEl.getTop(true);
-
- var paddingRight = this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - newCanvasWidth - newPreviewLeft;
- var paddingBottom = this.thumbEl.getTop(true) + this.thumbEl.getHeight() - newCanvasHeight - newPreviewTop;
-
- var maxPaddingLeft = newCanvasWidth / 0.9 * 0.05;
- var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
- maxPaddingLeft = (newCanvasHeight * this.minWidth / this.minHeight - newCanvasWidth) / 2 + maxPaddingLeft;
- }
-
- if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
- maxPaddingTop = (newCanvasWidth * this.minHeight / this.minWidth - newCanvasHeight) / 2 + maxPaddingTop;
- }
+ this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
- if(
- this.isDocument &&
- (this.rotate == 0 || this.rotate == 180) &&
- (
- width > this.imageEl.OriginWidth ||
- height > this.imageEl.OriginHeight ||
- (width < this.minWidth && height < this.minHeight)
- )
- ){
- return false;
- }
+ this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
+ //this.cells.addClassOnOver('fc-state-hover');
- if(
- this.isDocument &&
- (this.rotate == 90 || this.rotate == 270) &&
- (
- width > this.imageEl.OriginWidth ||
- height > this.imageEl.OriginHeight ||
- (width < this.minHeight && height < this.minWidth)
- )
- ){
- return false;
- }
+ var cells = this.cells.elements;
+ var textEls = this.textNodes;
- if(
- !this.isDocument &&
- (this.rotate == 0 || this.rotate == 180) &&
- (
- // for zoom out
- paddingLeft > maxPaddingLeft ||
- paddingRight > maxPaddingLeft ||
- paddingTop > maxPaddingTop ||
- paddingBottom > maxPaddingTop ||
- // for zoom in
- width > maxWidth ||
- height > maxHeight
- )
- ){
- return false;
- }
+ //Roo.each(cells, function(cell){
+ // cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
+ //});
- if(
- !this.isDocument &&
- (this.rotate == 90 || this.rotate == 270) &&
- (
- width < this.minHeight ||
- width > this.imageEl.OriginWidth ||
- height < this.minWidth ||
- height > this.imageEl.OriginHeight
- )
- ){
- return false;
- }
+ days += startingPos;
+
+ // convert everything to numbers so it's fast
+ var day = 86400000;
+ var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
+ //Roo.log(d);
+ //Roo.log(pm);
+ //Roo.log(prevStart);
- return true;
+ var today = new Date().clearTime().getTime();
+ var sel = date.clearTime().getTime();
+ var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
+ var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
+ var ddMatch = this.disabledDatesRE;
+ var ddText = this.disabledDatesText;
+ var ddays = this.disabledDays ? this.disabledDays.join("") : false;
+ var ddaysText = this.disabledDaysText;
+ var format = this.format;
- },
-
- onRotateLeft : function(e)
- {
- if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
-
- var minScale = this.thumbEl.getWidth() / this.minWidth;
+ var setCellClass = function(cal, cell){
- var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
- var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+ //Roo.log('set Cell Class');
+ cell.title = "";
+ var t = d.getTime();
- this.startScale = this.scale;
+ //Roo.log(d);
- while (this.getScaleLevel() < minScale){
- this.scale = this.scale + 1;
-
- if(!this.zoomable()){
- break;
- }
-
- if(
- Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
- Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
- ){
- continue;
- }
-
- this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
-
- this.draw();
+ cell.dateValue = t;
+ if(t == today){
+ cell.className += " fc-today";
+ cell.className += " fc-state-highlight";
+ cell.title = cal.todayText;
+ }
+ if(t == sel){
+ // disable highlight in other month..
+ cell.className += " fc-state-highlight";
+ }
+ // disabling
+ if(t < min) {
+ //cell.className = " fc-state-disabled";
+ cell.title = cal.minText;
+ return;
+ }
+ if(t > max) {
+ //cell.className = " fc-state-disabled";
+ cell.title = cal.maxText;
return;
}
+ if(ddays){
+ if(ddays.indexOf(d.getDay()) != -1){
+ // cell.title = ddaysText;
+ // cell.className = " fc-state-disabled";
+ }
+ }
+ if(ddMatch && format){
+ var fvalue = d.dateFormat(format);
+ if(ddMatch.test(fvalue)){
+ cell.title = ddText.replace("%0", fvalue);
+ cell.className = " fc-state-disabled";
+ }
+ }
- this.scale = this.startScale;
+ if (!cell.initialClassName) {
+ cell.initialClassName = cell.dom.className;
+ }
- this.onRotateFail();
+ cell.dom.className = cell.initialClassName + ' ' + cell.className;
+ };
+
+ var i = 0;
+
+ for(; i < startingPos; i++) {
+ cells[i].dayName = (++prevStart);
+ Roo.log(textEls[i]);
+ d.setDate(d.getDate()+1);
- return false;
+ //cells[i].className = "fc-past fc-other-month";
+ setCellClass(this, cells[i]);
}
- this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
-
- if(this.isDocument){
- this.setThumbBoxSize();
- this.setThumbBoxPosition();
- this.setCanvasPosition();
+ var intDay = 0;
+
+ for(; i < days; i++){
+ intDay = i - startingPos + 1;
+ cells[i].dayName = (intDay);
+ d.setDate(d.getDate()+1);
+
+ cells[i].className = ''; // "x-date-active";
+ setCellClass(this, cells[i]);
}
+ var extraDays = 0;
- this.draw();
+ for(; i < 42; i++) {
+ //textEls[i].innerHTML = (++extraDays);
+
+ d.setDate(d.getDate()+1);
+ cells[i].dayName = (++extraDays);
+ cells[i].className = "fc-future fc-other-month";
+ setCellClass(this, cells[i]);
+ }
- this.fireEvent('rotate', this, 'left');
+ //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
- },
-
- onRotateRight : function(e)
- {
- if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
-
- var minScale = this.thumbEl.getWidth() / this.minWidth;
+ var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
- var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
- var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
-
- this.startScale = this.scale;
-
- while (this.getScaleLevel() < minScale){
-
- this.scale = this.scale + 1;
-
- if(!this.zoomable()){
- break;
- }
-
- if(
- Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
- Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
- ){
- continue;
- }
-
- this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-
- this.draw();
-
- return;
- }
-
- this.scale = this.startScale;
-
- this.onRotateFail();
-
- return false;
+ // this will cause all the cells to mis
+ var rows= [];
+ var i =0;
+ for (var r = 0;r < 6;r++) {
+ for (var c =0;c < 7;c++) {
+ this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
+ }
}
- this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
-
- if(this.isDocument){
- this.setThumbBoxSize();
- this.setThumbBoxPosition();
- this.setCanvasPosition();
+ this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
+ for(i=0;i<cells.length;i++) {
+
+ this.cells.elements[i].dayName = cells[i].dayName ;
+ this.cells.elements[i].className = cells[i].className;
+ this.cells.elements[i].initialClassName = cells[i].initialClassName ;
+ this.cells.elements[i].title = cells[i].title ;
+ this.cells.elements[i].dateValue = cells[i].dateValue ;
}
- this.draw();
- this.fireEvent('rotate', this, 'right');
- },
-
- onRotateFail : function()
- {
- this.errorEl.show(true);
- var _this = this;
- (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
- },
-
- draw : function()
- {
- this.previewEl.dom.innerHTML = '';
+ //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
+ //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
- var canvasEl = document.createElement("canvas");
+ ////if(totalRows != 6){
+ //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
+ // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
+ // }
- var contextEl = canvasEl.getContext("2d");
+ this.fireEvent('monthchange', this, date);
- canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
- canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
- var center = this.imageEl.OriginWidth / 2;
- if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
- canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
- canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
- center = this.imageEl.OriginHeight / 2;
+ },
+ /**
+ * Returns the grid's SelectionModel.
+ * @return {SelectionModel}
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.grid.CellSelectionModel();
}
-
- contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
-
- contextEl.translate(center, center);
- contextEl.rotate(this.rotate * Math.PI / 180);
+ return this.selModel;
+ },
- contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
-
- this.canvasEl = document.createElement("canvas");
+ load: function() {
+ this.eventStore.load()
- this.contextEl = this.canvasEl.getContext("2d");
- switch (this.rotate) {
- case 0 :
-
- this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
-
- this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- case 90 :
-
- this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
-
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
- break;
- }
-
- this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- case 180 :
-
- this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
-
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
- break;
- }
-
- this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- case 270 :
-
- this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
- this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
- break;
- }
-
- this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
-
- break;
- default :
- break;
- }
+ },
+
+ findCell : function(dt) {
+ dt = dt.clearTime().getTime();
+ var ret = false;
+ this.cells.each(function(c){
+ //Roo.log("check " +c.dateValue + '?=' + dt);
+ if(c.dateValue == dt){
+ ret = c;
+ return false;
+ }
+ return true;
+ });
- this.previewEl.appendChild(this.canvasEl);
+ return ret;
+ },
+
+ findCells : function(rec) {
+ var s = rec.data.start_dt.clone().clearTime().getTime();
+ // Roo.log(s);
+ var e= rec.data.end_dt.clone().clearTime().getTime();
+ // Roo.log(e);
+ var ret = [];
+ this.cells.each(function(c){
+ ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
+
+ if(c.dateValue > e){
+ return ;
+ }
+ if(c.dateValue < s){
+ return ;
+ }
+ ret.push(c);
+ });
- this.setCanvasPosition(false);
+ return ret;
},
- crop : function()
+ findBestRow: function(cells)
{
- if(!this.canvasLoaded){
- return;
- }
-
- var imageCanvas = document.createElement("canvas");
-
- var imageContext = imageCanvas.getContext("2d");
-
- imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
- imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
-
- var center = imageCanvas.width / 2;
+ var ret = 0;
- imageContext.translate(center, center);
+ for (var i =0 ; i < cells.length;i++) {
+ ret = Math.max(cells[i].rows || 0,ret);
+ }
+ return ret;
- imageContext.rotate(this.rotate * Math.PI / 180);
+ },
+
+
+ addItem : function(rec)
+ {
+ // look for vertical location slot in
+ var cells = this.findCells(rec);
- imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+ rec.row = this.findBestRow(cells);
- var canvas = document.createElement("canvas");
+ // work out the location.
- var context = canvas.getContext("2d");
-
- canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+ var crow = false;
+ var rows = [];
+ for(var i =0; i < cells.length; i++) {
+ if (!crow) {
+ crow = {
+ start : cells[i],
+ end : cells[i]
+ };
+ continue;
+ }
+ if (crow.start.getY() == cells[i].getY()) {
+ // on same row.
+ crow.end = cells[i];
+ continue;
+ }
+ // different row.
+ rows.push(crow);
+ crow = {
+ start: cells[i],
+ end : cells[i]
+ };
+
+ }
- canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
-
- switch (this.rotate) {
- case 0 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
- var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- if(canvas.width > this.outputMaxWidth) {
- var scale = this.outputMaxWidth / canvas.width;
- canvas.width = canvas.width * scale;
- canvas.height = canvas.height * scale;
- context.scale(scale, scale);
- }
-
- context.fillStyle = 'white';
- context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel());
-
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- case 90 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var targetWidth = this.minWidth - 2 * x;
- var targetHeight = this.minHeight - 2 * y;
-
- var scale = 1;
-
- if((x == 0 && y == 0) || (x == 0 && y > 0)){
- scale = targetWidth / width;
- }
-
- if(x > 0 && y == 0){
- scale = targetHeight / height;
- }
-
- if(x > 0 && y > 0){
- scale = targetWidth / width;
-
- if(width < height){
- scale = targetHeight / height;
- }
- }
-
- context.scale(scale, scale);
-
- var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
- var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- case 180 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var targetWidth = this.minWidth - 2 * x;
- var targetHeight = this.minHeight - 2 * y;
-
- var scale = 1;
-
- if((x == 0 && y == 0) || (x == 0 && y > 0)){
- scale = targetWidth / width;
- }
-
- if(x > 0 && y == 0){
- scale = targetHeight / height;
- }
-
- if(x > 0 && y > 0){
- scale = targetWidth / width;
-
- if(width < height){
- scale = targetHeight / height;
- }
- }
-
- context.scale(scale, scale);
-
- var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
- var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
- sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- case 270 :
-
- var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
- var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
-
- var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
- var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
-
- var targetWidth = this.minWidth - 2 * x;
- var targetHeight = this.minHeight - 2 * y;
-
- var scale = 1;
-
- if((x == 0 && y == 0) || (x == 0 && y > 0)){
- scale = targetWidth / width;
- }
-
- if(x > 0 && y == 0){
- scale = targetHeight / height;
- }
-
- if(x > 0 && y > 0){
- scale = targetWidth / width;
-
- if(width < height){
- scale = targetHeight / height;
- }
- }
-
- context.scale(scale, scale);
- var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
- var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
-
- sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
- sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
-
- sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
-
- context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
-
- break;
- default :
- break;
+ rows.push(crow);
+ rec.els = [];
+ rec.rows = rows;
+ rec.cells = cells;
+ for (var i = 0; i < cells.length;i++) {
+ cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
+
}
- this.cropData = canvas.toDataURL(this.cropType);
- if(this.fireEvent('crop', this, this.cropData) !== false){
- this.process(this.file, this.cropData);
+ },
+
+ clearEvents: function() {
+
+ if (!this.eventStore.getCount()) {
+ return;
}
+ // reset number of rows in cells.
+ Roo.each(this.cells.elements, function(c){
+ c.rows = 0;
+ });
- return;
+ this.eventStore.each(function(e) {
+ this.clearEvent(e);
+ },this);
},
- setThumbBoxSize : function()
+ clearEvent : function(ev)
{
- var width, height;
+ if (ev.els) {
+ Roo.each(ev.els, function(el) {
+ el.un('mouseenter' ,this.onEventEnter, this);
+ el.un('mouseleave' ,this.onEventLeave, this);
+ el.remove();
+ },this);
+ ev.els = [];
+ }
+ },
+
+
+ renderEvent : function(ev,ctr) {
+ if (!ctr) {
+ ctr = this.view.el.select('.fc-event-container',true).first();
+ }
+
+
+ this.clearEvent(ev);
+ //code
+
+
+
+ ev.els = [];
+ var cells = ev.cells;
+ var rows = ev.rows;
+ this.fireEvent('eventrender', this, ev);
- if(this.isDocument && typeof(this.imageEl) != 'undefined'){
- width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
- height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
-
- this.minWidth = width;
- this.minHeight = height;
+ for(var i =0; i < rows.length; i++) {
- if(this.rotate == 90 || this.rotate == 270){
- this.minWidth = height;
- this.minHeight = width;
+ cls = '';
+ if (i == 0) {
+ cls += ' fc-event-start';
+ }
+ if ((i+1) == rows.length) {
+ cls += ' fc-event-end';
}
+
+ //Roo.log(ev.data);
+ // how many rows should it span..
+ var cg = this.eventTmpl.append(ctr,Roo.apply({
+ fccls : cls
+
+ }, ev.data) , true);
+
+
+ cg.on('mouseenter' ,this.onEventEnter, this, ev);
+ cg.on('mouseleave' ,this.onEventLeave, this, ev);
+ cg.on('click', this.onEventClick, this, ev);
+
+ ev.els.push(cg);
+
+ var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
+ var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
+ //Roo.log(cg);
+
+ cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
+ cg.setWidth(ebox.right - sbox.x -2);
}
+ },
+
+ renderEvents: function()
+ {
+ // first make sure there is enough space..
- height = this.windowSize;
- width = Math.ceil(this.minWidth * height / this.minHeight);
-
- if(this.minWidth > this.minHeight){
- width = this.windowSize;
- height = Math.ceil(this.minHeight * width / this.minWidth);
+ if (!this.eventTmpl) {
+ this.eventTmpl = new Roo.Template(
+ '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}" style="position: absolute" unselectable="on">' +
+ '<div class="fc-event-inner">' +
+ '<span class="fc-event-time">{time}</span>' +
+ '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
+ '</div>' +
+ '<div class="ui-resizable-heandle ui-resizable-e"> </div>' +
+ '</div>'
+ );
+
}
+
- this.thumbEl.setStyle({
- width : width + 'px',
- height : height + 'px'
+
+ this.cells.each(function(c) {
+ //Roo.log(c.select('.fc-day-content div',true).first());
+ c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
});
-
- return;
+
+ var ctr = this.view.el.select('.fc-event-container',true).first();
+
+ var cls;
+ this.eventStore.each(function(ev){
+ this.renderEvent(ev);
+
+
+ }, this);
+ this.view.layout();
+
},
- setThumbBoxPosition : function()
- {
- var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
- var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
-
- this.thumbEl.setLeft(x);
- this.thumbEl.setTop(y);
-
+ onEventEnter: function (e, el,event,d) {
+ this.fireEvent('evententer', this, el, event);
},
- baseRotateLevel : function()
- {
- this.baseRotate = 1;
-
- if(
- typeof(this.exif) != 'undefined' &&
- typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
- [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
- ){
- this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
- }
-
- this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
-
+ onEventLeave: function (e, el,event,d) {
+ this.fireEvent('eventleave', this, el, event);
},
- baseScaleLevel : function()
- {
- var width, height;
+ onEventClick: function (e, el,event,d) {
+ this.fireEvent('eventclick', this, el, event);
+ },
+
+ onMonthChange: function () {
+ this.store.load();
+ },
+
+ onLoad: function () {
- if(this.isDocument){
+ //Roo.log('calendar onload');
+//
+ if(this.eventStore.getCount() > 0){
- if(this.baseRotate == 6 || this.baseRotate == 8){
+
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginWidth;
-
- if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginHeight;
+ this.eventStore.each(function(d){
+
+
+ // FIXME..
+ var add = d.data;
+ if (typeof(add.end_dt) == 'undefined') {
+ Roo.log("Missing End time in calendar data: ");
+ Roo.log(d);
+ return;
}
-
- return;
- }
-
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginWidth;
- }
-
- return;
+ if (typeof(add.start_dt) == 'undefined') {
+ Roo.log("Missing Start time in calendar data: ");
+ Roo.log(d);
+ return;
+ }
+ add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
+ add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
+ add.id = add.id || d.id;
+ add.title = add.title || '??';
+
+ this.addItem(d);
+
+
+ },this);
}
- if(this.baseRotate == 6 || this.baseRotate == 8){
-
- width = this.thumbEl.getHeight();
- this.baseScale = width / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
- height = this.thumbEl.getWidth();
- this.baseScale = height / this.imageEl.OriginHeight;
- }
-
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
- height = this.thumbEl.getWidth();
- this.baseScale = height / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
- width = this.thumbEl.getHeight();
- this.baseScale = width / this.imageEl.OriginWidth;
- }
+ this.renderEvents();
+ }
+
+
+});
+/*
+ grid : {
+ xtype: 'Grid',
+ xns: Roo.grid,
+ listeners : {
+ render : function ()
+ {
+ _this.grid = this;
+
+ if (!this.view.el.hasClass('course-timesheet')) {
+ this.view.el.addClass('course-timesheet');
+ }
+ if (this.tsStyle) {
+ this.ds.load({});
+ return;
+ }
+ Roo.log('width');
+ Roo.log(_this.grid.view.el.getWidth());
+
+
+ this.tsStyle = Roo.util.CSS.createStyleSheet({
+ '.course-timesheet .x-grid-row' : {
+ height: '80px'
+ },
+ '.x-grid-row td' : {
+ 'vertical-align' : 0
+ },
+ '.course-edit-link' : {
+ 'color' : 'blue',
+ 'text-overflow' : 'ellipsis',
+ 'overflow' : 'hidden',
+ 'white-space' : 'nowrap',
+ 'cursor' : 'pointer'
+ },
+ '.sub-link' : {
+ 'color' : 'green'
+ },
+ '.de-act-sup-link' : {
+ 'color' : 'purple',
+ 'text-decoration' : 'line-through'
+ },
+ '.de-act-link' : {
+ 'color' : 'red',
+ 'text-decoration' : 'line-through'
+ },
+ '.course-timesheet .course-highlight' : {
+ 'border-top-style': 'dashed !important',
+ 'border-bottom-bottom': 'dashed !important'
+ },
+ '.course-timesheet .course-item' : {
+ 'font-family' : 'tahoma, arial, helvetica',
+ 'font-size' : '11px',
+ 'overflow' : 'hidden',
+ 'padding-left' : '10px',
+ 'padding-right' : '10px',
+ 'padding-top' : '10px'
+ }
+
+ }, Roo.id());
+ this.ds.load({});
+ }
+ },
+ autoWidth : true,
+ monitorWindowResize : false,
+ cellrenderer : function(v,x,r)
+ {
+ return v;
+ },
+ sm : {
+ xtype: 'CellSelectionModel',
+ xns: Roo.grid
+ },
+ dataSource : {
+ xtype: 'Store',
+ xns: Roo.data,
+ listeners : {
+ beforeload : function (_self, options)
+ {
+ options.params = options.params || {};
+ options.params._month = _this.monthField.getValue();
+ options.params.limit = 9999;
+ options.params['sort'] = 'when_dt';
+ options.params['dir'] = 'ASC';
+ this.proxy.loadResponse = this.loadResponse;
+ Roo.log("load?");
+ //this.addColumns();
+ },
+ load : function (_self, records, options)
+ {
+ _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
+ // if you click on the translation.. you can edit it...
+ var el = Roo.get(this);
+ var id = el.dom.getAttribute('data-id');
+ var d = el.dom.getAttribute('data-date');
+ var t = el.dom.getAttribute('data-time');
+ //var id = this.child('span').dom.textContent;
+
+ //Roo.log(this);
+ Pman.Dialog.CourseCalendar.show({
+ id : id,
+ when_d : d,
+ when_t : t,
+ productitem_active : id ? 1 : 0
+ }, function() {
+ _this.grid.ds.load({});
+ });
+
+ });
+
+ _this.panel.fireEvent('resize', [ '', '' ]);
+ }
+ },
+ loadResponse : function(o, success, response){
+ // this is overridden on before load..
+
+ Roo.log("our code?");
+ //Roo.log(success);
+ //Roo.log(response)
+ delete this.activeRequest;
+ if(!success){
+ this.fireEvent("loadexception", this, o, response);
+ o.request.callback.call(o.request.scope, null, o.request.arg, false);
+ return;
+ }
+ var result;
+ try {
+ result = o.reader.read(response);
+ }catch(e){
+ Roo.log("load exception?");
+ this.fireEvent("loadexception", this, o, response, e);
+ o.request.callback.call(o.request.scope, null, o.request.arg, false);
+ return;
+ }
+ Roo.log("ready...");
+ // loop through result.records;
+ // and set this.tdate[date] = [] << array of records..
+ _this.tdata = {};
+ Roo.each(result.records, function(r){
+ //Roo.log(r.data);
+ if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
+ _this.tdata[r.data.when_dt.format('j')] = [];
+ }
+ _this.tdata[r.data.when_dt.format('j')].push(r.data);
+ });
+
+ //Roo.log(_this.tdata);
+
+ result.records = [];
+ result.totalRecords = 6;
+
+ // let's generate some duumy records for the rows.
+ //var st = _this.dateField.getValue();
+
+ // work out monday..
+ //st = st.add(Date.DAY, -1 * st.format('w'));
+
+ var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+
+ var firstOfMonth = date.getFirstDayOfMonth();
+ var days = date.getDaysInMonth();
+ var d = 1;
+ var firstAdded = false;
+ for (var i = 0; i < result.totalRecords ; i++) {
+ //var d= st.add(Date.DAY, i);
+ var row = {};
+ var added = 0;
+ for(var w = 0 ; w < 7 ; w++){
+ if(!firstAdded && firstOfMonth != w){
+ continue;
+ }
+ if(d > days){
+ continue;
+ }
+ firstAdded = true;
+ var dd = (d > 0 && d < 10) ? "0"+d : d;
+ row['weekday'+w] = String.format(
+ '<span style="font-size: 16px;"><b>{0}</b></span>'+
+ '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
+ d,
+ date.format('Y-m-')+dd
+ );
+ added++;
+ if(typeof(_this.tdata[d]) != 'undefined'){
+ Roo.each(_this.tdata[d], function(r){
+ var is_sub = '';
+ var deactive = '';
+ var id = r.id;
+ var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
+ if(r.parent_id*1>0){
+ is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
+ id = r.parent_id;
+ }
+ if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
+ deactive = 'de-act-link';
+ }
+
+ row['weekday'+w] += String.format(
+ '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
+ id, //0
+ r.product_id_name, //1
+ r.when_dt.format('h:ia'), //2
+ is_sub, //3
+ deactive, //4
+ desc // 5
+ );
+ });
+ }
+ d++;
+ }
+
+ // only do this if something added..
+ if(added > 0){
+ result.records.push(_this.grid.dataSource.reader.newRow(row));
+ }
+
+
+ // push it twice. (second one with an hour..
+
+ }
+ //Roo.log(result);
+ this.fireEvent("load", this, o, o.request.arg);
+ o.request.callback.call(o.request.scope, result, o.request.arg, true);
+ },
+ sortInfo : {field: 'when_dt', direction : 'ASC' },
+ proxy : {
+ xtype: 'HttpProxy',
+ xns: Roo.data,
+ method : 'GET',
+ url : baseURL + '/Roo/Shop_course.php'
+ },
+ reader : {
+ xtype: 'JsonReader',
+ xns: Roo.data,
+ id : 'id',
+ fields : [
+ {
+ 'name': 'id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'when_dt',
+ 'type': 'string'
+ },
+ {
+ 'name': 'end_dt',
+ 'type': 'string'
+ },
+ {
+ 'name': 'parent_id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'product_id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'productitem_id',
+ 'type': 'int'
+ },
+ {
+ 'name': 'guid',
+ 'type': 'int'
+ }
+ ]
+ }
+ },
+ toolbar : {
+ xtype: 'Toolbar',
+ xns: Roo,
+ items : [
+ {
+ xtype: 'Button',
+ xns: Roo.Toolbar,
+ listeners : {
+ click : function (_self, e)
+ {
+ var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+ sd.setMonth(sd.getMonth()-1);
+ _this.monthField.setValue(sd.format('Y-m-d'));
+ _this.grid.ds.load({});
+ }
+ },
+ text : "Back"
+ },
+ {
+ xtype: 'Separator',
+ xns: Roo.Toolbar
+ },
+ {
+ xtype: 'MonthField',
+ xns: Roo.form,
+ listeners : {
+ render : function (_self)
+ {
+ _this.monthField = _self;
+ // _this.monthField.set today
+ },
+ select : function (combo, date)
+ {
+ _this.grid.ds.load({});
+ }
+ },
+ value : (function() { return new Date(); })()
+ },
+ {
+ xtype: 'Separator',
+ xns: Roo.Toolbar
+ },
+ {
+ xtype: 'TextItem',
+ xns: Roo.Toolbar,
+ text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
+ },
+ {
+ xtype: 'Fill',
+ xns: Roo.Toolbar
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.Toolbar,
+ listeners : {
+ click : function (_self, e)
+ {
+ var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+ sd.setMonth(sd.getMonth()+1);
+ _this.monthField.setValue(sd.format('Y-m-d'));
+ _this.grid.ds.load({});
+ }
+ },
+ text : "Next"
+ }
+ ]
+ },
+
}
-
- return;
- }
-
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginWidth;
-
- if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginHeight;
- }
+ };
- if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
-
- height = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginHeight;
-
- if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
- width = this.thumbEl.getWidth();
- this.baseScale = width / this.imageEl.OriginWidth;
- }
-
- }
+ *//*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.LoadMask
+ * A simple utility class for generically masking elements while loading data. If the element being masked has
+ * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
+ * process and the mask element will be cached for reuse. For all other elements, this mask will replace the
+ * element's UpdateManager load indicator and will be destroyed after the initial load.
+ * @constructor
+ * Create a new LoadMask
+ * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
+ * @param {Object} config The config object
+ */
+Roo.LoadMask = function(el, config){
+ this.el = Roo.get(el);
+ Roo.apply(this, config);
+ if(this.store){
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
+ this.removeMask = false;
+ }else{
+ var um = this.el.getUpdateManager();
+ um.showLoadIndicator = false; // disable the default indicator
+ um.on('beforeupdate', this.onBeforeLoad, this);
+ um.on('update', this.onLoad, this);
+ um.on('failure', this.onLoad, this);
+ this.removeMask = true;
+ }
+};
- if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
- this.baseScale = width / this.minWidth;
- }
+Roo.LoadMask.prototype = {
+ /**
+ * @cfg {Boolean} removeMask
+ * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
+ * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
+ */
+ removeMask : false,
+ /**
+ * @cfg {String} msg
+ * The text to display in a centered loading message box (defaults to 'Loading...')
+ */
+ msg : 'Loading...',
+ /**
+ * @cfg {String} msgCls
+ * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
+ */
+ msgCls : 'x-mask-loading',
- return;
+ /**
+ * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
+ * @type Boolean
+ */
+ disabled: false,
+
+ /**
+ * Disables the mask to prevent it from being displayed
+ */
+ disable : function(){
+ this.disabled = true;
},
-
- getScaleLevel : function()
- {
- return this.baseScale * Math.pow(1.02, this.scale);
+
+ /**
+ * Enables the mask so that it can be displayed
+ */
+ enable : function(){
+ this.disabled = false;
},
- onTouchStart : function(e)
+ onLoadException : function()
{
- if(!this.canvasLoaded){
- this.beforeSelectFile(e);
- return;
- }
-
- var touches = e.browserEvent.touches;
-
- if(!touches){
- return;
- }
-
- if(touches.length == 1){
- this.onMouseDown(e);
- return;
- }
-
- if(touches.length != 2){
- return;
- }
-
- var coords = [];
+ Roo.log(arguments);
- for(var i = 0, finger; finger = touches[i]; i++){
- coords.push(finger.pageX, finger.pageY);
+ if (typeof(arguments[3]) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",arguments[3]);
+ }
+ /*
+ try {
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+ } catch(e) {
+
}
-
- var x = Math.pow(coords[0] - coords[2], 2);
- var y = Math.pow(coords[1] - coords[3], 2);
-
- this.startDistance = Math.sqrt(x + y);
-
- this.startScale = this.scale;
-
- this.pinching = true;
- this.dragable = false;
-
- },
+ */
- onTouchMove : function(e)
- {
- if(!this.pinching && !this.dragable){
- return;
- }
-
- var touches = e.browserEvent.touches;
-
- if(!touches){
- return;
- }
-
- if(this.dragable){
- this.onMouseMove(e);
- return;
- }
-
- var coords = [];
-
- for(var i = 0, finger; finger = touches[i]; i++){
- coords.push(finger.pageX, finger.pageY);
- }
-
- var x = Math.pow(coords[0] - coords[2], 2);
- var y = Math.pow(coords[1] - coords[3], 2);
-
- this.endDistance = Math.sqrt(x + y);
-
- this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
-
- if(!this.zoomable()){
- this.scale = this.startScale;
- return;
- }
-
- this.draw();
-
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
},
-
- onTouchEnd : function(e)
+ // private
+ onLoad : function()
{
- this.pinching = false;
- this.dragable = false;
-
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
},
-
- process : function(file, crop)
- {
- if(this.loadMask){
- this.maskEl.mask(this.loadingText);
- }
-
- this.xhr = new XMLHttpRequest();
-
- file.xhr = this.xhr;
- this.xhr.open(this.method, this.url, true);
-
- var headers = {
- "Accept": "application/json",
- "Cache-Control": "no-cache",
- "X-Requested-With": "XMLHttpRequest"
- };
-
- for (var headerName in headers) {
- var headerValue = headers[headerName];
- if (headerValue) {
- this.xhr.setRequestHeader(headerName, headerValue);
- }
- }
-
- var _this = this;
-
- this.xhr.onload = function()
- {
- _this.xhrOnLoad(_this.xhr);
+ // private
+ onBeforeLoad : function(){
+ if(!this.disabled){
+ (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
}
-
- this.xhr.onerror = function()
- {
- _this.xhrOnError(_this.xhr);
+ },
+
+ // private
+ destroy : function(){
+ if(this.store){
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('loadexception', this.onLoadException, this);
+ }else{
+ var um = this.el.getUpdateManager();
+ um.un('beforeupdate', this.onBeforeLoad, this);
+ um.un('update', this.onLoad, this);
+ um.un('failure', this.onLoad, this);
}
-
- var formData = new FormData();
+ }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
- formData.append('returnHTML', 'NO');
- if(crop){
- formData.append('crop', crop);
- var blobBin = atob(crop.split(',')[1]);
- var array = [];
- for(var i = 0; i < blobBin.length; i++) {
- array.push(blobBin.charCodeAt(i));
- }
- var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
- formData.append(this.paramName, croppedFile, file.name);
- }
-
- if(typeof(file.filename) != 'undefined'){
- formData.append('filename', file.filename);
- }
-
- if(typeof(file.mimetype) != 'undefined'){
- formData.append('mimetype', file.mimetype);
- }
+/**
+ * @class Roo.XTemplate
+ * @extends Roo.Template
+ * Provides a template that can have nested templates for loops or conditionals. The syntax is:
+<pre><code>
+var t = new Roo.XTemplate(
+ '<select name="{name}">',
+ '<tpl for="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
+ '</select>'
+);
+
+// then append, applying the master template values
+ </code></pre>
+ *
+ * Supported features:
+ *
+ * Tags:
- if(this.fireEvent('arrange', this, formData) != false){
- this.xhr.send(formData);
- };
- },
-
- xhrOnLoad : function(xhr)
- {
- if(this.loadMask){
- this.maskEl.unmask();
- }
-
- if (xhr.readyState !== 4) {
- this.fireEvent('exception', this, xhr);
- return;
- }
+<pre><code>
+ {a_variable} - output encoded.
+ {a_variable.format:("Y-m-d")} - call a method on the variable
+ {a_variable:raw} - unencoded output
+ {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
+ {a_variable:this.method_on_template(...)} - call a method on the template object.
+
+</code></pre>
+ * The tpl tag:
+<pre><code>
+ <tpl for="a_variable or condition.."></tpl>
+ <tpl if="a_variable or condition"></tpl>
+ <tpl exec="some javascript"></tpl>
+ <tpl name="named_template"></tpl> (experimental)
+
+ <tpl for="."></tpl> - just iterate the property..
+ <tpl for=".."></tpl> - iterates with the parent (probably the template)
+</code></pre>
+ *
+ */
+Roo.XTemplate = function()
+{
+ Roo.XTemplate.superclass.constructor.apply(this, arguments);
+ if (this.html) {
+ this.compile();
+ }
+};
- var response = Roo.decode(xhr.responseText);
-
- if(!response.success){
- this.fireEvent('exception', this, xhr);
- return;
- }
-
- var response = Roo.decode(xhr.responseText);
-
- this.fireEvent('upload', this, response);
-
- },
-
- xhrOnError : function()
+
+Roo.extend(Roo.XTemplate, Roo.Template, {
+
+ /**
+ * The various sub templates
+ */
+ tpls : false,
+ /**
+ *
+ * basic tag replacing syntax
+ * WORD:WORD()
+ *
+ * // you can fake an object call by doing this
+ * x.t:(test,tesT)
+ *
+ */
+ re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+
+ /**
+ * compile the template
+ *
+ * This is not recursive, so I'm not sure how nested templates are really going to be handled..
+ *
+ */
+ compile: function()
{
- if(this.loadMask){
- this.maskEl.unmask();
- }
-
- Roo.log('xhr on error');
-
- var response = Roo.decode(xhr.responseText);
-
- Roo.log(response);
-
- },
+ var s = this.html;
+
+ s = ['<tpl>', s, '</tpl>'].join('');
- prepare : function(file)
- {
- if(this.loadMask){
- this.maskEl.mask(this.loadingText);
- }
-
- this.file = false;
- this.exif = {};
-
- if(typeof(file) === 'string'){
- this.loadCanvas(file);
- return;
- }
-
- if(!file || !this.urlAPI){
- return;
- }
-
- this.file = file;
- if(typeof(file.type) != 'undefined' && file.type.length != 0) {
- this.cropType = file.type;
- }
-
- var _this = this;
-
- if(this.fireEvent('prepare', this, this.file) != false){
-
- var reader = new FileReader();
-
- reader.onload = function (e) {
- if (e.target.error) {
- Roo.log(e.target.error);
- return;
- }
+ var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
+ nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
+ ifRe = /^<tpl\b[^>]*?if="(.*?)"/,
+ execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
+ namedRe = /^<tpl\b[^>]*?name="(\w+)"/, // named templates..
+ m,
+ id = 0,
+ tpls = [];
+
+ while(true == !!(m = s.match(re))){
+ var forMatch = m[0].match(nameRe),
+ ifMatch = m[0].match(ifRe),
+ execMatch = m[0].match(execRe),
+ namedMatch = m[0].match(namedRe),
- var buffer = e.target.result,
- dataView = new DataView(buffer),
- offset = 2,
- maxOffset = dataView.byteLength - 4,
- markerBytes,
- markerLength;
+ exp = null,
+ fn = null,
+ exec = null,
+ name = forMatch && forMatch[1] ? forMatch[1] : '';
- if (dataView.getUint16(0) === 0xffd8) {
- while (offset < maxOffset) {
- markerBytes = dataView.getUint16(offset);
-
- if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
- markerLength = dataView.getUint16(offset + 2) + 2;
- if (offset + markerLength > dataView.byteLength) {
- Roo.log('Invalid meta data: Invalid segment size.');
- break;
- }
-
- if(markerBytes == 0xffe1){
- _this.parseExifData(
- dataView,
- offset,
- markerLength
- );
- }
-
- offset += markerLength;
-
- continue;
- }
-
- break;
- }
-
+ if (ifMatch) {
+ // if - puts fn into test..
+ exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
+ if(exp){
+ fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ }
+ }
+
+ if (execMatch) {
+ // exec - calls a function... returns empty if true is returned.
+ exp = execMatch && execMatch[1] ? execMatch[1] : null;
+ if(exp){
+ exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+ }
+ }
+
+
+ if (name) {
+ // for =
+ switch(name){
+ case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
+ case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
+ default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
}
-
- var url = _this.urlAPI.createObjectURL(_this.file);
-
- _this.loadCanvas(url);
-
- return;
}
+ var uid = namedMatch ? namedMatch[1] : id;
- reader.readAsArrayBuffer(this.file);
+ tpls.push({
+ id: namedMatch ? namedMatch[1] : id,
+ target: name,
+ exec: exec,
+ test: fn,
+ body: m[1] || ''
+ });
+ if (namedMatch) {
+ s = s.replace(m[0], '');
+ } else {
+ s = s.replace(m[0], '{xtpl'+ id + '}');
+ }
+ ++id;
}
-
+ this.tpls = [];
+ for(var i = tpls.length-1; i >= 0; --i){
+ this.compileTpl(tpls[i]);
+ this.tpls[tpls[i].id] = tpls[i];
+ }
+ this.master = tpls[tpls.length-1];
+ return this;
},
-
- parseExifData : function(dataView, offset, length)
+ /**
+ * same as applyTemplate, except it's done to one of the subTemplates
+ * when using named templates, you can do:
+ *
+ * var str = pl.applySubTemplate('your-name', values);
+ *
+ *
+ * @param {Number} id of the template
+ * @param {Object} values to apply to template
+ * @param {Object} parent (normaly the instance of this object)
+ */
+ applySubTemplate : function(id, values, parent)
{
- var tiffOffset = offset + 10,
- littleEndian,
- dirOffset;
-
- if (dataView.getUint32(offset + 4) !== 0x45786966) {
- // No Exif data, might be XMP data instead
- return;
- }
- // Check for the ASCII code for "Exif" (0x45786966):
- if (dataView.getUint32(offset + 4) !== 0x45786966) {
- // No Exif data, might be XMP data instead
- return;
- }
- if (tiffOffset + 8 > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid segment size.');
- return;
- }
- // Check for the two null bytes:
- if (dataView.getUint16(offset + 8) !== 0x0000) {
- Roo.log('Invalid Exif data: Missing byte alignment offset.');
- return;
- }
- // Check the byte alignment:
- switch (dataView.getUint16(tiffOffset)) {
- case 0x4949:
- littleEndian = true;
- break;
- case 0x4D4D:
- littleEndian = false;
- break;
- default:
- Roo.log('Invalid Exif data: Invalid byte alignment marker.');
- return;
- }
- // Check for the TIFF tag marker (0x002A):
- if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
- Roo.log('Invalid Exif data: Missing TIFF marker.');
- return;
- }
- // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
- dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
- this.parseExifTags(
- dataView,
- tiffOffset,
- tiffOffset + dirOffset,
- littleEndian
- );
- },
-
- parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
- {
- var tagsNumber,
- dirEndOffset,
- i;
- if (dirOffset + 6 > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid directory offset.');
- return;
- }
- tagsNumber = dataView.getUint16(dirOffset, littleEndian);
- dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
- if (dirEndOffset + 4 > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid directory size.');
- return;
- }
- for (i = 0; i < tagsNumber; i += 1) {
- this.parseExifTag(
- dataView,
- tiffOffset,
- dirOffset + 2 + 12 * i, // tag offset
- littleEndian
- );
- }
- // Return the offset to the next directory:
- return dataView.getUint32(dirEndOffset, littleEndian);
- },
-
- parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
- {
- var tag = dataView.getUint16(offset, littleEndian);
+ var t = this.tpls[id];
- this.exif[tag] = this.getExifValue(
- dataView,
- tiffOffset,
- offset,
- dataView.getUint16(offset + 2, littleEndian), // tag type
- dataView.getUint32(offset + 4, littleEndian), // tag length
- littleEndian
- );
- },
-
- getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
- {
- var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
- tagSize,
- dataOffset,
- values,
- i,
- str,
- c;
-
- if (!tagType) {
- Roo.log('Invalid Exif data: Invalid tag type.');
- return;
- }
- tagSize = tagType.size * length;
- // Determine if the value is contained in the dataOffset bytes,
- // or if the value at the dataOffset is a pointer to the actual data:
- dataOffset = tagSize > 4 ?
- tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
- if (dataOffset + tagSize > dataView.byteLength) {
- Roo.log('Invalid Exif data: Invalid data offset.');
- return;
- }
- if (length === 1) {
- return tagType.getValue(dataView, dataOffset, littleEndian);
+ try {
+ if(t.test && !t.test.call(this, values, parent)){
+ return '';
+ }
+ } catch(e) {
+ Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.test);
+ return ''
}
- values = [];
- for (i = 0; i < length; i += 1) {
- values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ try {
+
+ if(t.exec && t.exec.call(this, values, parent)){
+ return '';
+ }
+ } catch(e) {
+ Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.exec);
+ return ''
}
-
- if (tagType.ascii) {
- str = '';
- // Concatenate the chars:
- for (i = 0; i < values.length; i += 1) {
- c = values[i];
- // Ignore the terminating NULL byte(s):
- if (c === '\u0000') {
- break;
+ try {
+ var vs = t.target ? t.target.call(this, values, parent) : values;
+ parent = t.target ? values : parent;
+ if(t.target && vs instanceof Array){
+ var buf = [];
+ for(var i = 0, len = vs.length; i < len; i++){
+ buf[buf.length] = t.compiled.call(this, vs[i], parent);
}
- str += c;
+ return buf.join('');
}
- return str;
- }
- return values;
- }
-
-});
-
-Roo.apply(Roo.dialog.UploadCropbox, {
- tags : {
- 'Orientation': 0x0112
- },
-
- Orientation: {
- 1: 0, //'top-left',
-// 2: 'top-right',
- 3: 180, //'bottom-right',
-// 4: 'bottom-left',
-// 5: 'left-top',
- 6: 90, //'right-top',
-// 7: 'right-bottom',
- 8: 270 //'left-bottom'
- },
-
- exifTagTypes : {
- // byte, 8-bit unsigned int:
- 1: {
- getValue: function (dataView, dataOffset) {
- return dataView.getUint8(dataOffset);
- },
- size: 1
- },
- // ascii, 8-bit byte:
- 2: {
- getValue: function (dataView, dataOffset) {
- return String.fromCharCode(dataView.getUint8(dataOffset));
- },
- size: 1,
- ascii: true
- },
- // short, 16 bit int:
- 3: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getUint16(dataOffset, littleEndian);
- },
- size: 2
- },
- // long, 32 bit int:
- 4: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getUint32(dataOffset, littleEndian);
- },
- size: 4
- },
- // rational = two long values, first is numerator, second is denominator:
- 5: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getUint32(dataOffset, littleEndian) /
- dataView.getUint32(dataOffset + 4, littleEndian);
- },
- size: 8
- },
- // slong, 32 bit signed int:
- 9: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getInt32(dataOffset, littleEndian);
- },
- size: 4
- },
- // srational, two slongs, first is numerator, second is denominator:
- 10: {
- getValue: function (dataView, dataOffset, littleEndian) {
- return dataView.getInt32(dataOffset, littleEndian) /
- dataView.getInt32(dataOffset + 4, littleEndian);
- },
- size: 8
+ return t.compiled.call(this, vs, parent);
+ } catch (e) {
+ Roo.log("Xtemplate.applySubTemplate : Exception thrown");
+ Roo.log(e.toString());
+ Roo.log(t.compiled);
+ return '';
}
},
-
- footer : {
- STANDARD : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-left',
- action : 'rotate-left',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-undo"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-picture',
- action : 'picture',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-picture-o"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-right',
- action : 'rotate-right',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-repeat"></i>'
- }
- ]
+
+ compileTpl : function(tpl)
+ {
+ var fm = Roo.util.Format;
+ var useF = this.disableFormats !== true;
+ var sep = Roo.isGecko ? "+" : ",";
+ var undef = function(str) {
+ Roo.log("Property not found :" + str);
+ return '';
+ };
+
+ var fn = function(m, name, format, args)
+ {
+ //Roo.log(arguments);
+ args = args ? args.replace(/\\'/g,"'") : args;
+ //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
+ if (typeof(format) == 'undefined') {
+ format= 'htmlEncode';
}
- ],
- DOCUMENT : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-left',
- action : 'rotate-left',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-undo"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-download',
- action : 'download',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-download"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-crop',
- action : 'crop',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-crop"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-trash',
- action : 'trash',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-trash"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-right',
- action : 'rotate-right',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-repeat"></i>'
- }
- ]
+ if (format == 'raw' ) {
+ format = false;
}
- ],
- ROTATOR : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-left',
- action : 'rotate-left',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-undo"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-rotate-right',
- action : 'rotate-right',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-repeat"></i>'
- }
- ]
+
+ if(name.substr(0, 4) == 'xtpl'){
+ return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
}
- ],
- CENTER : [
- {
- tag : 'div',
- cls : 'btn-group roo-upload-cropbox-center',
- action : 'center',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : 'CENTER'
- }
- ]
+
+ // build an array of options to determine if value is undefined..
+
+ // basically get 'xxxx.yyyy' then do
+ // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
+ // (function () { Roo.log("Property not found"); return ''; })() :
+ // ......
+
+ var udef_ar = [];
+ var lookfor = '';
+ Roo.each(name.split('.'), function(st) {
+ lookfor += (lookfor.length ? '.': '') + st;
+ udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
+ });
+
+ var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
+
+
+ if(format && useF){
+
+ args = args ? ',' + args : "";
+
+ if(format.substr(0, 5) != "this."){
+ format = "fm." + format + '(';
+ }else{
+ format = 'this.call("'+ format.substr(5) + '", ';
+ args = ", values";
+ }
+
+ return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
}
- ]
+
+ if (args.length) {
+ // called with xxyx.yuu:(test,test)
+ // change to ()
+ return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
+ }
+ // raw.. - :raw modifier..
+ return "'"+ sep + udef_st + name + ")"+sep+"'";
+
+ };
+ var body;
+ // branched to use + in gecko and [].join() in others
+ if(Roo.isGecko){
+ body = "tpl.compiled = function(values, parent){ with(values) { return '" +
+ tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
+ "';};};";
+ }else{
+ body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
+ body.push(tpl.body.replace(/(\r\n|\n)/g,
+ '\\n').replace(/'/g, "\\'").replace(this.re, fn));
+ body.push("'].join('');};};");
+ body = body.join('');
+ }
+
+ Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
+
+ /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
+ eval(body);
+
+ return this;
+ },
+
+ applyTemplate : function(values){
+ return this.master.compiled.call(this, values, {});
+ //var s = this.subs;
+ },
+
+ apply : function(){
+ return this.applyTemplate.apply(this, arguments);
}
-});
+
+ });
+
+Roo.XTemplate.from = function(el){
+ el = Roo.getDom(el);
+ return new Roo.XTemplate(el.value || el.innerHTML);
+};// old names for panel elements
+Roo.GridPanel = Roo.panel.Grid;
+Roo.CalendarPanel = Roo.panel.Calendar;
+Roo.ContentPanel = Roo.panel.Content;
+Roo.NestedLayoutPanel = Roo.panel.NestedLayout;
+Roo.TabPanel = Roo.panel.Tab;
+Roo.TabPanelItem = Roo.panel.TabItem;
+Roo.TreePanel = Roo.panel.Tree;
\ No newline at end of file
R(this,F[i]);}for(;i<B;i++){intDay=i-D+1;G[i].innerHTML=(intDay);d.setDate(d.getDate()+1);F[i].className="x-date-active";R(this,F[i]);}var S=0;for(;i<42;i++){G[i].innerHTML=(++S);d.setDate(d.getDate()+1);F[i].className="x-date-nextday";R(this,F[i]);}this.mbtn.setText(this.monthNames[A.getMonth()]+" "+A.getFullYear());
this.fireEvent('monthchange',this,A);if(!this.internalRender){var T=this.el.dom.firstChild;var w=T.offsetWidth;this.el.setWidth(w+this.el.getBorderWidth("lr"));Roo.fly(T).setWidth(w);this.internalRender=true;if(Roo.isOpera&&!this.secondPass){T.rows[0].cells[1].style.width=(w-(T.rows[0].cells[0].offsetWidth+T.rows[0].cells[2].offsetWidth))+"px";
this.secondPass=true;this.update.defer(10,this,[A]);}}}});
-// Roo/TabPanel.js
-Roo.TabPanel=function(A,B){this.el=Roo.get(A,true);if(B){if(typeof B=="boolean"){this.tabPosition=B?"bottom":"top";}else{Roo.apply(this,B);}}if(this.tabPosition=="bottom"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("x-tabs-bottom");
+// Roo/panel/namespace.js
+Roo.panel={};
+// Roo/panel/Cropbox.js
+Roo.panel.Cropbox=function(A){Roo.panel.Cropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true}
+);this.buttons=this.buttons||Roo.panel.Cropbox.footer.STANDARD;};Roo.extend(Roo.panel.Cropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,windowSize:300,file:false,exif:{}
+,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'}
+,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify}
+]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){Roo.panel.Cropbox.superclass.onRender.call(this,ct,A);if(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype'));
+this.el.dom.removeAttribute('xtype');this.initEvents();}}else{var B=Roo.apply({},this.getAutoCreate());B.id=this.id||Roo.id();if(this.cls){B.cls=(typeof(B.cls)=='undefined'?this.cls:B.cls)+' '+this.cls;}if(this.style){B.style=(typeof(B.style)=='undefined'?this.style:B.style)+'; '+this.style;
+}this.el=ct.createChild(B,A);this.initEvents();}if(this.buttons.length){Roo.each(this.buttons,function(bb){var C=this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);C.on('click',this.onFooterButtonClick.createDelegate(this,[bb.action],true));
+},this);}if(this.loadMask){this.maskEl=this.el;}},initEvents:function(){this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);this.bodyEl=this.el.select('.roo-upload-cropbox-body',true).first();
+this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl=this.el.select('.roo-upload-cropbox-selector',true).first();this.selectorEl.hide();this.previewEl=this.el.select('.roo-upload-cropbox-preview',true).first();this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.thumbEl=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl.hide();this.notifyEl=this.el.select('.roo-upload-cropbox-empty-notify',true).first();this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.errorEl=this.el.select('.roo-upload-cropbox-error-notify',true).first();this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl.hide();this.footerEl=this.el.select('.roo-upload-cropbox-footer',true).first();this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
+this.footerEl.hide();this.setThumbBoxSize();this.bind();this.resize();this.fireEvent('initial',this);},bind:function(){var A=this;window.addEventListener("resize",function(){A.resize();});this.bodyEl.on('click',this.beforeSelectFile,this);if(Roo.isTouch){this.bodyEl.on('touchstart',this.onTouchStart,this);
+this.bodyEl.on('touchmove',this.onTouchMove,this);this.bodyEl.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.bodyEl.on('mousedown',this.onMouseDown,this);this.bodyEl.on('mousemove',this.onMouseMove,this);var B=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';
+this.bodyEl.on(B,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);}this.selectorEl.on('change',this.onFileSelected,this);},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.baseRotate=1;this.dragable=false;this.pinching=false;
+this.mouseX=0;this.mouseY=0;this.cropData=false;this.notifyEl.dom.innerHTML=this.emptyText;},resize:function(){if(this.fireEvent('resize',this)!=false){this.setThumbBoxPosition();this.setCanvasPosition();}},onFooterButtonClick:function(e,el,o,A){switch(A){case 'rotate-left':this.onRotateLeft(e);
+break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.beforeSelectFile(e);break;case 'trash':this.trash(e);break;case 'crop':this.crop(e);break;case 'download':this.download(e);break;case 'center':this.center(e);break;default:break;}this.fireEvent('footerbuttonclick',this,A);
+},beforeSelectFile:function(e){e.preventDefault();if(this.fireEvent('beforeselectfile',this)!=false){this.selectorEl.dom.click();}},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;
+}var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);},center:function(e){this.setCanvasPosition();},loadCanvas:function(A){if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();
+this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;
+if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();if(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();
+this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(A=true){if(!this.canvasEl){return;}var B=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);var C=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);
+if(A){this.previewEl.setLeft(B);this.previewEl.setTop(C);return;}var D=this.baseScale*Math.pow(1.02,this.startScale);var E=Math.floor(this.imageEl.OriginWidth*D);var F=Math.floor(this.imageEl.OriginHeight*D);var G=Math.ceil((this.bodyEl.getWidth()-E)/2);var H=Math.ceil((this.bodyEl.getHeight()-F)/2);
+var I=B-G;var J=C-H;var K=this.previewEl.getLeft(true)+I;var L=this.previewEl.getTop(true)+J;this.previewEl.setLeft(K);this.previewEl.setTop(L);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;if(this.isDocument&&(this.canvasEl.width<this.thumbEl.getWidth()||this.canvasEl.height<this.thumbEl.getHeight())){this.dragable=false;
+return;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.canvasLoaded){return;}if(!this.dragable){return;}var A=this.canvasEl.width/0.9*0.05;
+var B=A*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){A=(this.canvasEl.height*this.minWidth/this.minHeight-this.canvasEl.width)/2+A;}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){B=(this.canvasEl.width*this.minHeight/this.minWidth-this.canvasEl.height)/2+B;
+}var C=Math.ceil(this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-this.canvasEl.width-A);var D=Math.ceil(this.thumbEl.getTop(true)+this.thumbEl.getHeight()-this.canvasEl.height-B);var E=Math.ceil(this.thumbEl.getLeft(true)+A);var F=Math.ceil(this.thumbEl.getTop(true)+B);
+if(C>E){var G=C;C=E;E=G;}if(D>F){var H=D;D=F;F=H;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var I=Math.ceil(x+this.previewEl.getLeft(true));
+var J=Math.ceil(y+this.previewEl.getTop(true));I=(I<C)?C:((I>E)?E:I);J=(J<D)?D:((J>F)?F:J);this.previewEl.setLeft(I);this.previewEl.setTop(J);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();
+},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.startScale=this.scale;this.scale=(e.getWheelDelta()>0)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();
+return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth<this.minHeight){A=this.thumbEl.getHeight()/this.minHeight;}var B=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel()/A);var C=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel()/A);
+var D=this.imageEl.OriginWidth;var E=this.imageEl.OriginHeight;var F=Math.floor(this.imageEl.OriginWidth*this.getScaleLevel());var G=Math.floor(this.imageEl.OriginHeight*this.getScaleLevel());var H=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);
+var I=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);var J=Math.ceil((this.bodyEl.getWidth()-F)/2);var K=Math.ceil((this.bodyEl.getHeight()-G)/2);var L=J-H;var M=K-I;var N=this.previewEl.getLeft(true)+L;var O=this.previewEl.getTop(true)+M;var P=N-this.thumbEl.getLeft(true);
+var Q=O-this.thumbEl.getTop(true);var R=this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-F-N;var S=this.thumbEl.getTop(true)+this.thumbEl.getHeight()-G-O;var T=F/0.9*0.05;var U=T*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){T=(G*this.minWidth/this.minHeight-F)/2+T;
+}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){U=(F*this.minHeight/this.minWidth-G)/2+U;}if(this.isDocument&&(this.rotate==0||this.rotate==180)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minWidth&&C<this.minHeight))){return false;
+}if(this.isDocument&&(this.rotate==90||this.rotate==270)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minHeight&&C<this.minWidth))){return false;}if(!this.isDocument&&(this.rotate==0||this.rotate==180)&&(P>T||R>T||Q>U||S>U||B>D||C>E)){return false;
+}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(B<this.minHeight||B>this.imageEl.OriginWidth||C<this.minWidth||C>this.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;
+var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
+}this.rotate=(this.rotate<90)?270:this.rotate-90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate<90)?270:this.rotate-90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
+}this.draw();this.fireEvent('rotate',this,'left');},onRotateRight:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
+var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
+}this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
+}this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){this.previewEl.dom.innerHTML='';var A=document.createElement("canvas");
+var B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidth<this.imageEl.OriginHeight){A.width=this.imageEl.OriginHeight*this.getScaleLevel();
+A.height=this.imageEl.OriginHeight*this.getScaleLevel();C=this.imageEl.OriginHeight/2;}B.scale(this.getScaleLevel(),this.getScaleLevel());B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);
+this.canvasEl=document.createElement("canvas");this.contextEl=this.canvasEl.getContext("2d");switch(this.rotate){case 0:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;case 90:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();
+if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;}this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;case 270:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
+break;}this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;default:break;}this.previewEl.appendChild(this.canvasEl);this.setCanvasPosition(false);
+},crop:function(){if(!this.canvasLoaded){return;}var A=document.createElement("canvas");var B=A.getContext("2d");A.width=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;A.height=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;
+var C=A.width/2;B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);var D=document.createElement("canvas");var E=D.getContext("2d");
+D.width=this.thumbEl.getWidth()/this.getScaleLevel();D.height=this.thumbEl.getHeight()/this.getScaleLevel();switch(this.rotate){case 0:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());
+var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var sx=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true);var sy=this.thumbEl.getTop(true)-this.previewEl.getTop(true);
+sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());if(D.width>this.outputMaxWidth){var H=this.outputMaxWidth/D.width;D.width=D.width*H;D.height=D.height*H;E.scale(H,H);}E.fillStyle='white';E.fillRect(0,0,this.thumbEl.getWidth()/this.getScaleLevel(),this.thumbEl.getHeight()/this.getScaleLevel());
+E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 90:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());
+var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
+var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
+var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;
+E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 180:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());
+var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
+var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
+var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
+sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 270:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());
+var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
+}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
+sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);E.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);
+if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight);
+B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=this.windowSize;
+A=Math.ceil(this.minWidth*B/this.minHeight);if(this.minWidth>this.minHeight){A=this.windowSize;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);
+var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.panel.Cropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.panel.Cropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.panel.Cropbox['tags']['Orientation']];
+}this.rotate=Roo.panel.Cropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();
+this.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;
+}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getWidth()){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;
+}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getHeight()){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginWidth;
+}}return;}A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getHeight()){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getHeight();
+this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;}}if(this.imageEl.OriginWidth<this.minWidth||this.imageEl.OriginHeight<this.minHeight){this.baseScale=A/this.minWidth;
+}return;},getScaleLevel:function(){return this.baseScale*Math.pow(1.02,this.scale);},onTouchStart:function(e){if(!this.canvasLoaded){this.beforeSelectFile(e);return;}var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;}if(A.length!=2){return;
+}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){if(!this.pinching&&!this.dragable){return;
+}var A=e.browserEvent.touches;if(!A){return;}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);this.scale=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));
+if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();},onTouchEnd:function(e){this.pinching=false;this.dragable=false;},process:function(A,B){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.xhr=new XMLHttpRequest();A.xhr=this.xhr;
+this.xhr.open(this.method,this.url,true);var C={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};for(var D in C){var E=C[D];if(E){this.xhr.setRequestHeader(D,E);}}var F=this;this.xhr.onload=function(){F.xhrOnLoad(F.xhr);
+};this.xhr.onerror=function(){F.xhrOnError(F.xhr);};var G=new FormData();G.append('returnHTML','NO');if(B){G.append('crop',B);var H=atob(B.split(',')[1]);var I=[];for(var i=0;i<H.length;i++){I.push(H.charCodeAt(i));}var J=new Blob([new Uint8Array(I)],{type:this.cropType}
+);G.append(this.paramName,J,A.name);}if(typeof(A.filename)!='undefined'){G.append('filename',A.filename);}if(typeof(A.mimetype)!='undefined'){G.append('mimetype',A.mimetype);}if(this.fireEvent('arrange',this,G)!=false){this.xhr.send(G);};},xhrOnLoad:function(A){if(this.loadMask){this.maskEl.unmask();
+}if(A.readyState!==4){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);if(!B.success){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);this.fireEvent('upload',this,B);},xhrOnError:function(){if(this.loadMask){this.maskEl.unmask();
+}Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);Roo.log(A);},prepare:function(A){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.file=false;this.exif={};if(typeof(A)==='string'){this.loadCanvas(A);return;}if(!A||!this.urlAPI){return;
+}this.file=A;if(typeof(A.type)!='undefined'&&A.type.length!=0){this.cropType=A.type;}var B=this;if(this.fireEvent('prepare',this,this.file)!=false){var C=new FileReader();C.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var D=e.target.result,E=new DataView(D),F=2,G=E.byteLength-4,H,I;
+if(E.getUint16(0)===0xffd8){while(F<G){H=E.getUint16(F);if((H>=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}if(H==0xffe1){B.parseExifData(E,F,I);}F+=I;continue;}break;
+}}var J=B.urlAPI.createObjectURL(B.file);B.loadCanvas(J);return;};C.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');
+return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;default:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;
+}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;if(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');
+return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);
+},getExifValue:function(A,B,C,D,E,F){var G=Roo.panel.Cropbox.exifTagTypes[D],H,I,J,i,K,c;if(!G){Roo.log('Invalid Exif data: Invalid tag type.');return;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');
+return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);}if(G.ascii){K='';for(i=0;i<J.length;i+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.panel.Cropbox,{tags:{'Orientation':0x0112
+}
+,Orientation:{1:0,3:180,6:90,8:270},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);},size:1},2:{getValue:function(A,B){return String.fromCharCode(A.getUint8(B));},size:1,ascii:true},3:{getValue:function(A,B,C){return A.getUint16(B,C);},size:2}
+,4:{getValue:function(A,B,C){return A.getUint32(B,C);},size:4},5:{getValue:function(A,B,C){return A.getUint32(B,C)/A.getUint32(B+4,C);},size:8},9:{getValue:function(A,B,C){return A.getInt32(B,C);},size:4},10:{getValue:function(A,B,C){return A.getInt32(B,C)/A.getInt32(B+4,C);
+},size:8}},footer:{STANDARD:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-picture-o"></i>'}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-download"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-crop"></i>'}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-trash"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
+]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
+]}],CENTER:[{tag:'div',cls:'btn-group roo-upload-cropbox-center',action:'center',cn:[{tag:'button',cls:'btn btn-default',html:'CENTER'}]}]}});
+// Roo/panel/Tab.js
+Roo.panel.Tab=function(A,B){this.el=Roo.get(A,true);if(B){if(typeof B=="boolean"){this.tabPosition=B?"bottom":"top";}else{Roo.apply(this,B);}}if(this.tabPosition=="bottom"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("x-tabs-bottom");
}this.stripWrap=Roo.get(this.createStrip(this.el.dom),true);this.stripEl=Roo.get(this.createStripList(this.stripWrap.dom),true);this.stripBody=Roo.get(this.stripWrap.dom.firstChild.firstChild,true);if(Roo.isIE){Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x","hidden");
}if(this.tabPosition!="bottom"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("x-tabs-top");}this.items=[];this.bodyEl.setStyle("position","relative");this.active=null;this.activateDelegate=this.activate.createDelegate(this);this.addEvents({"tabchange":true,"beforetabchange":true}
);Roo.EventManager.onWindowResize(this.onResize,this);this.cpad=this.el.getPadding("lr");this.hiddenCount=0;if(this.toolbar){var C=this.toolbar;C.container=this.stripEl.child('td.x-tab-strip-toolbar');this.toolbar=new Roo.Toolbar(C);if(Roo.isSafari){var D=C.container.child('table',true);
-D.setAttribute('width','100%');}}Roo.TabPanel.superclass.constructor.call(this);};Roo.extend(Roo.TabPanel,Roo.util.Observable,{tabPosition:"top",currentTabWidth:0,minTabWidth:40,maxTabWidth:250,preferredTabWidth:175,resizeTabs:false,monitorResize:true,toolbar:false,addTab:function(id,A,B,C){var D=new Roo.TabPanelItem(this,id,A,C);
+D.setAttribute('width','100%');}}Roo.panel.Tab.superclass.constructor.call(this);};Roo.extend(Roo.panel.Tab,Roo.util.Observable,{tabPosition:"top",currentTabWidth:0,minTabWidth:40,maxTabWidth:250,preferredTabWidth:175,resizeTabs:false,monitorResize:true,toolbar:false,addTab:function(id,A,B,C){var D=new Roo.panel.TabItem(this,id,A,C);
this.addTabItem(D);if(B){D.setContent(B);}return D;},getTab:function(id){return this.items[id];},hideTab:function(id){var t=this.items[id];if(!t.isHidden()){t.setHidden(true);this.hiddenCount++;this.autoSizeTabs();}},unhideTab:function(id){var t=this.items[id];
if(t.isHidden()){t.setHidden(false);this.hiddenCount--;this.autoSizeTabs();}},addTabItem:function(A){this.items[A.id]=A;this.items.push(A);if(this.resizeTabs){A.setWidth(this.currentTabWidth||this.preferredTabWidth);this.autoSizeTabs();}else{A.autoSize();
}},removeTab:function(id){var A=this.items;var B=A[id];if(!B){return;}var C=A.indexOf(B);if(this.active==B&&A.length>1){var D=this.getNextAvailable(C);if(D){D.activate();}}this.stripEl.dom.removeChild(B.pnode.dom);if(B.bodyEl.dom.parentNode==this.bodyEl.dom){this.bodyEl.dom.removeChild(B.bodyEl.dom);
}},beginUpdate:function(){this.updating=true;},endUpdate:function(){this.updating=false;this.autoSizeTabs();},autoSizeTabs:function(){var A=this.items.length;var B=A-this.hiddenCount;if(!this.resizeTabs||A<1||B<1||this.updating){return;}var w=Math.max(this.el.getWidth()-this.cpad,10);
var C=Math.floor(w/B);var b=this.stripBody;if(b.getWidth()>w){var D=this.items;this.setTabWidth(Math.max(C,this.minTabWidth)-2);if(C<this.minTabWidth){}}else{if(this.currentTabWidth<this.preferredTabWidth){this.setTabWidth(Math.min(C,this.preferredTabWidth)-2);
}}},getCount:function(){return this.items.length;},setTabWidth:function(A){this.currentTabWidth=A;for(var i=0,B=this.items.length;i<B;i++){if(!this.items[i].isHidden()){this.items[i].setWidth(A);}}},destroy:function(A){Roo.EventManager.removeResizeListener(this.onResize,this);
-for(var i=0,B=this.items.length;i<B;i++){this.items[i].purgeListeners();}if(A===true){this.el.update("");this.el.remove();}}});Roo.TabPanelItem=function(A,id,B,C){this.tabPanel=A;this.id=id;this.disabled=false;this.text=B;this.loaded=false;this.closable=C;
-this.bodyEl=Roo.get(A.createItemBody(A.bodyEl.dom,id));this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);this.bodyEl.setStyle("display","block");this.bodyEl.setStyle("zoom","1");this.hideAction();var D=A.createStripElements(A.stripEl.dom,B,C);this.el=Roo.get(D.el,true);
-this.inner=Roo.get(D.inner,true);this.textEl=Roo.get(this.el.dom.firstChild.firstChild.firstChild,true);this.pnode=Roo.get(D.el.parentNode,true);this.el.on("mousedown",this.onTabMouseDown,this);this.el.on("click",this.onTabClick,this);if(C){var c=Roo.get(D.close,true);
-c.dom.title=this.closeText;c.addClassOnOver("close-over");c.on("click",this.closeClick,this);}this.addEvents({"activate":true,"beforeclose":true,"close":true,"deactivate":true});this.hidden=false;Roo.TabPanelItem.superclass.constructor.call(this);};Roo.extend(Roo.TabPanelItem,Roo.util.Observable,{purgeListeners:function(){Roo.util.Observable.prototype.purgeListeners.call(this);
-this.el.removeAllListeners();},show:function(){this.pnode.addClass("on");this.showAction();if(Roo.isOpera){this.tabPanel.stripWrap.repaint();}this.fireEvent("activate",this.tabPanel,this);},isActive:function(){return this.tabPanel.getActiveTab()==this;},hide:function(){this.pnode.removeClass("on");
-this.hideAction();this.fireEvent("deactivate",this.tabPanel,this);},hideAction:function(){this.bodyEl.hide();this.bodyEl.setStyle("position","absolute");this.bodyEl.setLeft("-20000px");this.bodyEl.setTop("-20000px");},showAction:function(){this.bodyEl.setStyle("position","relative");
-this.bodyEl.setTop("");this.bodyEl.setLeft("");this.bodyEl.show();},setTooltip:function(A){if(Roo.QuickTips&&Roo.QuickTips.isEnabled()){this.textEl.dom.qtip=A;this.textEl.dom.removeAttribute('title');}else{this.textEl.dom.title=A;}},onTabClick:function(e){e.preventDefault();
-this.tabPanel.activate(this.id);},onTabMouseDown:function(e){e.preventDefault();this.tabPanel.activate(this.id);},getWidth:function(){return this.inner.getWidth();},setWidth:function(A){var B=A-this.pnode.getPadding("lr");this.inner.setWidth(B);this.textEl.setWidth(B-this.inner.getPadding("lr"));
+for(var i=0,B=this.items.length;i<B;i++){this.items[i].purgeListeners();}if(A===true){this.el.update("");this.el.remove();}}});Roo.panel.Tab.prototype.createStripList=function(A){A.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 A.firstChild.firstChild.firstChild.firstChild;};Roo.panel.Tab.prototype.createBody=function(A){var B=document.createElement("div");Roo.id(B,"tab-body");Roo.fly(B).addClass("x-tabs-body");A.appendChild(B);return B;};Roo.panel.Tab.prototype.createItemBody=function(A,id){var B=Roo.getDom(id);
+if(!B){B=document.createElement("div");B.id=id;}Roo.fly(B).addClass("x-tabs-item-body");A.insertBefore(B,A.firstChild);return B;};Roo.panel.Tab.prototype.createStripElements=function(A,B,C){var td=document.createElement("td");A.insertBefore(td,A.childNodes[A.childNodes.length-1]);
+if(C){td.className="x-tabs-closable";if(!this.closeTpl){this.closeTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span>'+'<div unselectable="on" class="close-icon"> </div></em></span></a>');
+}var el=this.closeTpl.overwrite(td,{"text":B});var D=el.getElementsByTagName("div")[0];var E=el.getElementsByTagName("em")[0];return {"el":el,"close":D,"inner":E};}else{if(!this.tabTpl){this.tabTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span></em></span></a>');
+}var el=this.tabTpl.overwrite(td,{"text":B});var E=el.getElementsByTagName("em")[0];return {"el":el,"inner":E};}};
+// Roo/panel/TabItem.js
+Roo.panel.TabItem=function(A,id,B,C){this.tabPanel=A;this.id=id;this.disabled=false;this.text=B;this.loaded=false;this.closable=C;this.bodyEl=Roo.get(A.createItemBody(A.bodyEl.dom,id));this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);this.bodyEl.setStyle("display","block");
+this.bodyEl.setStyle("zoom","1");this.hideAction();var D=A.createStripElements(A.stripEl.dom,B,C);this.el=Roo.get(D.el,true);this.inner=Roo.get(D.inner,true);this.textEl=Roo.get(this.el.dom.firstChild.firstChild.firstChild,true);this.pnode=Roo.get(D.el.parentNode,true);
+this.el.on("mousedown",this.onTabMouseDown,this);this.el.on("click",this.onTabClick,this);if(C){var c=Roo.get(D.close,true);c.dom.title=this.closeText;c.addClassOnOver("close-over");c.on("click",this.closeClick,this);}this.addEvents({"activate":true,"beforeclose":true,"close":true,"deactivate":true}
+);this.hidden=false;Roo.panel.TabItem.superclass.constructor.call(this);};Roo.extend(Roo.panel.TabItem,Roo.util.Observable,{purgeListeners:function(){Roo.util.Observable.prototype.purgeListeners.call(this);this.el.removeAllListeners();},show:function(){this.pnode.addClass("on");
+this.showAction();if(Roo.isOpera){this.tabPanel.stripWrap.repaint();}this.fireEvent("activate",this.tabPanel,this);},isActive:function(){return this.tabPanel.getActiveTab()==this;},hide:function(){this.pnode.removeClass("on");this.hideAction();this.fireEvent("deactivate",this.tabPanel,this);
+},hideAction:function(){this.bodyEl.hide();this.bodyEl.setStyle("position","absolute");this.bodyEl.setLeft("-20000px");this.bodyEl.setTop("-20000px");},showAction:function(){this.bodyEl.setStyle("position","relative");this.bodyEl.setTop("");this.bodyEl.setLeft("");
+this.bodyEl.show();},setTooltip:function(A){if(Roo.QuickTips&&Roo.QuickTips.isEnabled()){this.textEl.dom.qtip=A;this.textEl.dom.removeAttribute('title');}else{this.textEl.dom.title=A;}},onTabClick:function(e){e.preventDefault();this.tabPanel.activate(this.id);
+},onTabMouseDown:function(e){e.preventDefault();this.tabPanel.activate(this.id);},getWidth:function(){return this.inner.getWidth();},setWidth:function(A){var B=A-this.pnode.getPadding("lr");this.inner.setWidth(B);this.textEl.setWidth(B-this.inner.getPadding("lr"));
this.pnode.setWidth(A);},setHidden:function(A){this.hidden=A;this.pnode.setStyle("display",A?"none":"");},isHidden:function(){return this.hidden;},getText:function(){return this.text;},autoSize:function(){this.textEl.setWidth(1);this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr")+2);
},setText:function(A){this.text=A;this.textEl.update(A);this.setTooltip(A);if(!this.tabPanel.resizeTabs){this.autoSize();}},activate:function(){this.tabPanel.activate(this.id);},disable:function(){if(this.tabPanel.active!=this){this.disabled=true;this.pnode.addClass("disabled");
}},enable:function(){this.disabled=false;this.pnode.removeClass("disabled");},setContent:function(A,B){this.bodyEl.update(A,B);},getUpdateManager:function(){return this.bodyEl.getUpdateManager();},setUrl:function(A,B,C){if(this.refreshDelegate){this.un('activate',this.refreshDelegate);
}this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);return this.bodyEl.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.loaded){var D=this.bodyEl.getUpdateManager();D.update(A,B,this._setLoaded.createDelegate(this));
}},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();}},_setLoaded:function(){this.loaded=true;},closeClick:function(e){var o={};e.stopEvent();this.fireEvent("beforeclose",this,o);if(o.cancel!==true){this.tabPanel.removeTab(this.id);
-}},closeText:"Close this tab"});Roo.TabPanel.prototype.createStrip=function(A){var B=document.createElement("div");B.className="x-tabs-wrap";A.appendChild(B);return B;};Roo.TabPanel.prototype.createStripList=function(A){A.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 A.firstChild.firstChild.firstChild.firstChild;};Roo.TabPanel.prototype.createBody=function(A){var B=document.createElement("div");Roo.id(B,"tab-body");Roo.fly(B).addClass("x-tabs-body");A.appendChild(B);return B;};Roo.TabPanel.prototype.createItemBody=function(A,id){var B=Roo.getDom(id);
-if(!B){B=document.createElement("div");B.id=id;}Roo.fly(B).addClass("x-tabs-item-body");A.insertBefore(B,A.firstChild);return B;};Roo.TabPanel.prototype.createStripElements=function(A,B,C){var td=document.createElement("td");A.insertBefore(td,A.childNodes[A.childNodes.length-1]);
-if(C){td.className="x-tabs-closable";if(!this.closeTpl){this.closeTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span>'+'<div unselectable="on" class="close-icon"> </div></em></span></a>');
-}var el=this.closeTpl.overwrite(td,{"text":B});var D=el.getElementsByTagName("div")[0];var E=el.getElementsByTagName("em")[0];return {"el":el,"close":D,"inner":E};}else{if(!this.tabTpl){this.tabTpl=new Roo.Template('<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">'+'<span unselectable="on"'+(this.disableTooltips?'':' title="{text}"')+' class="x-tabs-text">{text}</span></em></span></a>');
-}var el=this.tabTpl.overwrite(td,{"text":B});var E=el.getElementsByTagName("em")[0];return {"el":el,"inner":E};}};
+}},closeText:"Close this tab"});Roo.panel.Tab.prototype.createStrip=function(A){var B=document.createElement("div");B.className="x-tabs-wrap";A.appendChild(B);return B;};
// Roo/Button.js
Roo.Button=function(A,B){if(!B){B=A;A=B.renderTo||false;}Roo.apply(this,B);this.addEvents({"click":true,"toggle":true,'mouseover':true,'mouseout':true,'render':true});if(this.menu){this.menu=Roo.menu.MenuMgr.get(this.menu);}Roo.util.Observable.call(this);if(A){this.render(A);
}};Roo.extend(Roo.Button,Roo.util.Observable,{hidden:false,disabled:false,pressed:false,tabIndex:undefined,enableToggle:false,menu:undefined,menuAlign:"tl-bl?",iconCls:undefined,type:'button',menuClassTarget:'tr',clickEvent:'click',handleMouseEvents:true,tooltipType:'qtip',render:function(A){var B;
w+=this.body.getMargins("lr")+this.bwrap.getMargins("lr")+this.centerBg.getPadding("lr");h+=this.body.getPadding("tb")+this.bwrap.getBorderWidth("tb")+this.body.getBorderWidth("tb")+this.el.getBorderWidth("tb");w+=this.body.getPadding("lr")+this.bwrap.getBorderWidth("lr")+this.body.getBorderWidth("lr")+this.bwrap.getPadding("lr")+this.el.getBorderWidth("lr");
if(this.tabs){h+=this.tabs.stripWrap.getHeight()+this.tabs.bodyEl.getMargins("tb")+this.tabs.bodyEl.getPadding("tb");w+=this.tabs.bodyEl.getMargins("lr")+this.tabs.bodyEl.getPadding("lr");}this.resizeTo(w,h);return this;},addKeyListener:function(A,fn,B){var C,D,E,F;
if(typeof A=="object"&&!(A instanceof Array)){C=A["key"];D=A["shift"];E=A["ctrl"];F=A["alt"];}else{C=A;}var G=function(H,e){if((!D||e.shiftKey)&&(!E||e.ctrlKey)&&(!F||e.altKey)){var k=e.getKey();if(C instanceof Array){for(var i=0,I=C.length;i<I;i++){if(C[i]==k){fn.call(B||window,H,k,e);
-return;}}}else{if(k==C){fn.call(B||window,H,k,e);}}}};this.on("keydown",G);return this;},getTabs:function(){if(!this.tabs){this.el.addClass("x-dlg-auto-tabs");this.body.addClass(this.tabPosition=="bottom"?"x-tabs-bottom":"x-tabs-top");this.tabs=new Roo.TabPanel(this.body.dom,this.tabPosition=="bottom");
+return;}}}else{if(k==C){fn.call(B||window,H,k,e);}}}};this.on("keydown",G);return this;},getTabs:function(){if(!this.tabs){this.el.addClass("x-dlg-auto-tabs");this.body.addClass(this.tabPosition=="bottom"?"x-tabs-bottom":"x-tabs-top");this.tabs=new Roo.panel.Tab(this.body.dom,this.tabPosition=="bottom");
}return this.tabs;},addButton:function(A,B,C){var dh=Roo.DomHelper;if(!this.footer){this.footer=dh.append(this.bwrap,{tag:"div",cls:"x-dlg-ft"},true);}if(!this.btnContainer){var tb=this.footer.createChild({cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'}
,null,true);this.btnContainer=tb.firstChild.firstChild.firstChild;}var D={handler:B,scope:C,minWidth:this.minButtonWidth,hideParent:true};if(typeof A=="string"){D.text=A;}else{if(A.tag){D.dhconfig=A;}else{Roo.apply(D,A);}}var fc=false;if((typeof(D.position)!='undefined')&&D.position<this.btnContainer.childNodes.length-1){D.position=Math.max(0,D.position);
fc=this.btnContainer.childNodes[D.position];}var E=new Roo.Button(fc?this.btnContainer.insertBefore(document.createElement("td"),fc):this.btnContainer.appendChild(document.createElement("td")),D);this.syncBodyHeight();if(!this.buttons){this.buttons=[];}this.buttons.push(E);
}this.el.repaint();this.fireEvent("layout",this);},safeBox:function(A){A.width=Math.max(0,A.width);A.height=Math.max(0,A.height);return A;},add:function(A,B){A=A.toLowerCase();return this.regions[A].add(B);},remove:function(A,B){A=A.toLowerCase();return this.regions[A].remove(B);
},findPanel:function(A){var rs=this.regions;for(var B in rs){if(typeof rs[B]!="function"){var p=rs[B].getPanel(A);if(p){return p;}}}return null;},showPanel:function(A){var rs=this.regions;for(var B in rs){var r=rs[B];if(typeof r!="function"){if(r.hasPanel(A)){return r.showPanel(A);
}}}return null;},restoreState:function(A){if(!A){A=Roo.state.Manager;}var sm=new Roo.LayoutStateManager();sm.init(this,A);},batchAdd:function(A){this.beginUpdate();for(var B in A){var lr=this.regions[B];if(lr){this.addTypedPanels(lr,A[B]);}}this.endUpdate();
-},addTypedPanels:function(lr,ps){if(typeof ps=='string'){lr.add(new Roo.ContentPanel(ps));}else if(ps instanceof Array){for(var i=0,A=ps.length;i<A;i++){this.addTypedPanels(lr,ps[i]);}}else if(!ps.events){var el=ps.el;delete ps.el;lr.add(new Roo.ContentPanel(el||Roo.id(),ps));
-}else{lr.add(ps);}},addxtype:function(A){if(!A.xtype.match(/Panel$/)){return false;}var B=false;if(typeof(A.region)=='undefined'){Roo.log("Failed to add Panel, region was not set");Roo.log(A);return false;}var C=A.region;delete A.region;var D=[];if(A.items){D=A.items;
-delete A.items;}var nb=false;switch(A.xtype){case 'ContentPanel':case 'ScrollPanel':case 'ViewPanel':if(A.autoCreate){B=new Roo[A.xtype](A);}else{var el=this.el.createChild();B=new Roo[A.xtype](el,A);}this.add(C,B);break;case 'TreePanel':A.el=this.el.createChild();
-B=new Roo[A.xtype](A);this.add(C,B);break;case 'NestedLayoutPanel':var el=this.el.createChild();var E=A.layout;delete A.layout;E.items=E.items||[];D=E.items;if(C=='center'&&this.active&&this.getRegion('center').panels.length<1){A.background=false;}var F=new Roo.BorderLayout(el,E);
-B=new Roo[A.xtype](F,A);this.add(C,B);nb={};break;case 'GridPanel':var el=this.el.createChild();var G=new Roo.grid[A.grid.xtype](el,A.grid);delete A.grid;if(C=='center'&&this.active){A.background=false;}B=new Roo[A.xtype](G,A);this.add(C,B);if(A.background){B.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.render();
-}});}else{G.render();}break;default:if(typeof(Roo[A.xtype])!='undefined'){B=new Roo[A.xtype](A);this.add(C,B);}else{alert("Can not add '"+A.xtype+"' to BorderLayout");return null;}}this.beginUpdate();var C='';var H={};Roo.each(D,function(i){C=nb&&i.region?i.region:false;
-var I=B.addxtype(i);if(C){nb[C]=nb[C]==undefined?0:nb[C]+1;if(!i.background){H[C]=nb[C];}}});this.endUpdate();if(nb){for(var r in H){C=this.getRegion(r);if(C){C.showPanel(H[r]);}}}return B;}});Roo.BorderLayout.create=function(A,B){var C=new Roo.BorderLayout(B||document.body,A);
-C.beginUpdate();var D=Roo.BorderLayout.RegionFactory.validRegions;for(var j=0,E=D.length;j<E;j++){var lr=D[j];if(C.regions[lr]&&A[lr].panels){var r=C.regions[lr];var ps=A[lr].panels;C.addTypedPanels(r,ps);}}C.endUpdate();return C;};Roo.BorderLayout.RegionFactory={validRegions:["north","south","east","west","center"],create:function(A,B,C){A=A.toLowerCase();
+},addTypedPanels:function(lr,ps){if(typeof ps=='string'){lr.add(new Roo.panel.Content(ps));}else if(ps instanceof Array){for(var i=0,A=ps.length;i<A;i++){this.addTypedPanels(lr,ps[i]);}}else if(!ps.events){var el=ps.el;delete ps.el;lr.add(new Roo.panel.Content(el||Roo.id(),ps));
+}else{lr.add(ps);}},addxtype:function(A){var B=false;if(typeof(A.region)=='undefined'){Roo.log("Failed to add Panel, region was not set");Roo.log(A);return false;}var C=A.region;delete A.region;var D=[];if(A.items){D=A.items;delete A.items;}var nb=false;switch(A.xtype){case 'Content':if(A.autoCreate){B=new Roo.panel[A.xtype](A);
+}else{var el=this.el.createChild();B=new Roo.panel[A.xtype](el,A);}this.add(C,B);break;case 'Grid':var el=this.el.createChild();var E=new Roo.grid[A.grid.xtype](el,A.grid);delete A.grid;if(C=='center'&&this.active){A.background=false;}B=new Roo.panel[A.xtype](E,A);
+this.add(C,B);if(A.background){B.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.render();}});}else{E.render();}break;case 'NestedLayout':var el=this.el.createChild();var F=A.layout;delete A.layout;F.items=F.items||[];D=F.items;if(C=='center'&&this.active&&this.getRegion('center').panels.length<1){A.background=false;
+}var G=new Roo.BorderLayout(el,F);B=new Roo.panel[A.xtype](G,A);this.add(C,B);nb={};break;case 'Calendar':B=new Roo.panel[A.xtype](A);this.add(C,B);break;case 'Tree':A.el=this.el.createChild();B=new Roo.panel[A.xtype](A);this.add(C,B);break;case 'ContentPanel':case 'ScrollPanel':case 'ViewPanel':if(A.autoCreate){B=new Roo[A.xtype](A);
+}else{var el=this.el.createChild();B=new Roo[A.xtype](el,A);}this.add(C,B);break;case 'TreePanel':A.el=this.el.createChild();B=new Roo[A.xtype](A);this.add(C,B);break;case 'NestedLayoutPanel':var el=this.el.createChild();var F=A.layout;delete A.layout;F.items=F.items||[];
+D=F.items;if(C=='center'&&this.active&&this.getRegion('center').panels.length<1){A.background=false;}var G=new Roo.BorderLayout(el,F);B=new Roo[A.xtype](G,A);this.add(C,B);nb={};break;case 'GridPanel':var el=this.el.createChild();var E=new Roo.grid[A.grid.xtype](el,A.grid);
+delete A.grid;if(C=='center'&&this.active){A.background=false;}B=new Roo[A.xtype](E,A);this.add(C,B);if(A.background){B.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.render();}});}else{E.render();}break;default:if(typeof(Roo[A.xtype])!='undefined'){B=new Roo[A.xtype](A);
+this.add(C,B);}else{alert("Can not add '"+A.xtype+"' to BorderLayout");return null;}}this.beginUpdate();var C='';var H={};Roo.each(D,function(i){C=nb&&i.region?i.region:false;var I=B.addxtype(i);if(C){nb[C]=nb[C]==undefined?0:nb[C]+1;if(!i.background){H[C]=nb[C];
+}}});this.endUpdate();if(nb){for(var r in H){C=this.getRegion(r);if(C){C.showPanel(H[r]);}}}return B;}});Roo.BorderLayout.create=function(A,B){var C=new Roo.BorderLayout(B||document.body,A);C.beginUpdate();var D=Roo.BorderLayout.RegionFactory.validRegions;
+for(var j=0,E=D.length;j<E;j++){var lr=D[j];if(C.regions[lr]&&A[lr].panels){var r=C.regions[lr];var ps=A[lr].panels;C.addTypedPanels(r,ps);}}C.endUpdate();return C;};Roo.BorderLayout.RegionFactory={validRegions:["north","south","east","west","center"],create:function(A,B,C){A=A.toLowerCase();
if(C.lightweight||C.basic){return new Roo.BasicLayoutRegion(B,C,A);}switch(A){case "north":return new Roo.NorthLayoutRegion(B,C);case "south":return new Roo.SouthLayoutRegion(B,C);case "east":return new Roo.EastLayoutRegion(B,C);case "west":return new Roo.WestLayoutRegion(B,C);
case "center":return new Roo.CenterLayoutRegion(B,C);}throw 'Layout region "'+A+'" not supported.';}};
// Roo/BasicLayoutRegion.js
}},collapseClick:function(e){if(this.isSlid){e.stopPropagation();this.slideIn();}else{e.stopPropagation();this.slideOut();}},collapse:function(A,B){if(this.collapsed){return;}if(B||this.fireEvent("beforecollapse",this)!=false){this.collapsed=true;if(this.split){this.split.el.hide();
}if(this.config.animate&&A!==true){this.fireEvent("invalidated",this);this.animateCollapse();}else{this.el.setLocation(-20000,-20000);this.el.hide();this.collapsedEl.show();this.fireEvent("collapsed",this);this.fireEvent("invalidated",this);}}},animateCollapse:function(){}
,expand:function(e,A){if(e){e.stopPropagation();}if(!this.collapsed||this.el.hasActiveFx()){return;}if(this.isSlid){this.afterSlideIn();A=true;}this.collapsed=false;if(this.config.animate&&A!==true){this.animateExpand();}else{this.el.show();if(this.split){this.split.el.show();
-}this.collapsedEl.setLocation(-2000,-2000);this.collapsedEl.hide();this.fireEvent("invalidated",this);this.fireEvent("expanded",this);}},animateExpand: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,toolbar:this.config.toolbar}
+}this.collapsedEl.setLocation(-2000,-2000);this.collapsedEl.hide();this.fireEvent("invalidated",this);this.fireEvent("expanded",this);}},animateExpand:function(){},initTabs:function(){this.bodyEl.setStyle("overflow","hidden");var ts=new Roo.panel.Tab(this.bodyEl.dom,{tabPosition:this.bottomTabs?'bottom':'top',disableTooltips:this.config.disableTabTips,toolbar:this.config.toolbar}
);if(this.config.hideTabs){ts.stripWrap.setDisplayed(false);}this.tabs=ts;ts.resizeTabs=this.config.resizeTabs===true;ts.minTabWidth=this.config.minTabWidth||40;ts.maxTabWidth=this.config.maxTabWidth||250;ts.preferredTabWidth=this.config.preferredTabWidth||150;
ts.monitorResize=false;ts.bodyEl.setStyle("overflow",this.config.autoScroll?"auto":"hidden");ts.bodyEl.addClass('x-layout-tabs-body');this.panels.each(this.initPanelAsTab,this);},initPanelAsTab:function(A){var ti=this.tabs.addTab(A.getEl().id,A.getTitle(),null,this.config.closeOnTab&&A.isClosable());
if(A.tabTip!==undefined){ti.setTooltip(A.tabTip);}ti.on("activate",function(){this.setActivePanel(A);},this);if(this.config.closeOnTab){ti.on("beforeclose",function(t,e){e.cancel=true;this.remove(A);},this);}return ti;},updatePanelTitle:function(A,B){if(this.activePanel==A){this.updateTitle(B);
var r=A.getRegion(E);if(r&&F){if(F.size){r.resizeTo(F.size);}if(F.collapsed==true){r.collapse(true);}else{r.expand(null,true);}}}}if(!D){A.endUpdate();}this.state=C;}this.layout=A;A.on("regionresized",this.onRegionResized,this);A.on("regioncollapsed",this.onRegionCollapsed,this);
A.on("regionexpanded",this.onRegionExpanded,this);},storeState:function(){this.provider.set(this.layout.id+"-layout-state",this.state);},onRegionResized:function(A,B){this.state[A.getPosition()].size=B;this.storeState();},onRegionCollapsed:function(A){this.state[A.getPosition()].collapsed=true;
this.storeState();},onRegionExpanded:function(A){this.state[A.getPosition()].collapsed=false;this.storeState();}};
-// Roo/ContentPanel.js
-Roo.ContentPanel=function(el,A,B){if(el.autoCreate){A=el;el=Roo.id();}this.el=Roo.get(el);if(!this.el&&A&&A.autoCreate){if(typeof A.autoCreate=="object"){if(!A.autoCreate.id){A.autoCreate.id=A.id||el;}this.el=Roo.DomHelper.append(document.body,A.autoCreate,true);
+// Roo/panel/Content.js
+Roo.panel.Content=function(el,A,B){if(el.autoCreate){A=el;el=Roo.id();}this.el=Roo.get(el);if(!this.el&&A&&A.autoCreate){if(typeof A.autoCreate=="object"){if(!A.autoCreate.id){A.autoCreate.id=A.id||el;}this.el=Roo.DomHelper.append(document.body,A.autoCreate,true);
}else{this.el=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-inactive-content",id:A.id||el},true);}}this.closable=false;this.loaded=false;this.active=false;if(typeof A=="string"){this.title=A;}else{Roo.apply(this,A);}if(this.toolbar&&!this.toolbar.el&&this.toolbar.xtype){this.wrapEl=this.el.wrap();
this.toolbar.container=this.el.insertSibling(false,'before');this.toolbar=new Roo.Toolbar(this.toolbar);}if(this.footer&&!this.footer.el&&this.footer.xtype){if(!this.wrapEl){this.wrapEl=this.el.wrap();}this.footer.container=this.wrapEl.createChild();this.footer=Roo.factory(this.footer,Roo);
}if(this.resizeEl){this.resizeEl=Roo.get(this.resizeEl,true);}else{this.resizeEl=this.el;}this.addEvents({"activate":true,"deactivate":true,"resize":true,"render":true});if(this.autoScroll){this.resizeEl.setStyle("overflow","auto");}else{this.el.on('scroll',function(){Roo.log('fix random scolling');
-this.scrollTo('top',0);});}B=B||this.content;if(B){this.setContent(B);}if(A&&A.url){this.setUrl(this.url,this.params,this.loadOnce);}Roo.ContentPanel.superclass.constructor.call(this);if(this.view&&typeof(this.view.xtype)!='undefined'){this.view.el=this.el.appendChild(document.createElement("div"));
-this.view=Roo.factory(this.view);this.view.render&&this.view.render(false,'');}this.fireEvent('render',this);};Roo.extend(Roo.ContentPanel,Roo.util.Observable,{tabTip:'',setRegion:function(A){this.region=A;if(A){this.el.replaceClass("x-layout-inactive-content","x-layout-active-content");
+this.scrollTo('top',0);});}B=B||this.content;if(B){this.setContent(B);}if(A&&A.url){this.setUrl(this.url,this.params,this.loadOnce);}Roo.panel.Content.superclass.constructor.call(this);if(this.view&&typeof(this.view.xtype)!='undefined'){this.view.el=this.el.appendChild(document.createElement("div"));
+this.view=Roo.factory(this.view);this.view.render&&this.view.render(false,'');}this.fireEvent('render',this);};Roo.extend(Roo.panel.Content,Roo.util.Observable,{tabTip:'',setRegion:function(A){this.region=A;if(A){this.el.replaceClass("x-layout-inactive-content","x-layout-active-content");
}else{this.el.replaceClass("x-layout-active-content","x-layout-inactive-content");}},getToolbar:function(){return this.toolbar;},setActiveState:function(A){this.active=A;if(!A){this.fireEvent("deactivate",this);}else{this.fireEvent("activate",this);}},setContent:function(A,B){this.el.update(A,B);
},ignoreResize:function(w,h){if(this.lastSize&&this.lastSize.width==w&&this.lastSize.height==h){return true;}else{this.lastSize={width:w,height:h};return false;}},getUpdateManager:function(){return this.el.getUpdateManager();},load:function(){var um=this.el.getUpdateManager();
um.update.apply(um,arguments);return this;},setUrl:function(A,B,C){if(this.refreshDelegate){this.removeListener("activate",this.refreshDelegate);}this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);
te.setWidth(A);}if(this.adjustments){A+=this.adjustments[0];B+=this.adjustments[1];}return {"width":A,"height":B};},setSize:function(A,B){if(this.fitToFrame&&!this.ignoreResize(A,B)){if(this.fitContainer&&this.resizeEl!=this.el){this.el.setSize(A,B);}var C=this.adjustForComponents(A,B);
this.resizeEl.setSize(this.autoWidth?"auto":C.width,this.autoHeight?"auto":C.height);this.fireEvent('resize',this,C.width,C.height);}},getTitle:function(){return this.title;},setTitle:function(A){this.title=A;if(this.region){this.region.updatePanelTitle(this,A);
}},isClosable:function(){return this.closable;},beforeSlide:function(){this.el.clip();this.resizeEl.clip();},afterSlide:function(){this.el.unclip();this.resizeEl.unclip();},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();
-}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^UploadCropbox$/)){this.cropbox=new Roo.factory(A);
+}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^Cropbox$/)){this.cropbox=new Roo.factory(A);
this.cropbox.render(this.el);return this.cropbox;}if(A.xtype.match(/^Form$/)){var el;el=this.el.createChild();this.form=new Roo.form.Form(A);if(this.form.allItems.length){this.form.render(el.dom);}return this.form;}if(['View','JsonView','DatePicker'].indexOf(A.xtype)>-1){A.el=this.el.appendChild(document.createElement("div"));
var B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});
-// Roo/GridPanel.js
-Roo.GridPanel=function(A,B){if(typeof(A.grid)!='undefined'){B=A;A=B.grid;}this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-grid-wrapper x-layout-inactive-content"},true);this.wrapper.dom.appendChild(A.getGridEl().dom);Roo.GridPanel.superclass.constructor.call(this,this.wrapper,B);
+// Roo/panel/Grid.js
+Roo.panel.Grid=function(A,B){if(typeof(A.grid)!='undefined'){B=A;A=B.grid;}this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-grid-wrapper x-layout-inactive-content"},true);this.wrapper.dom.appendChild(A.getGridEl().dom);Roo.panel.Grid.superclass.constructor.call(this,this.wrapper,B);
if(this.toolbar){this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);}if(this.footer&&!this.footer.el&&this.footer.xtype){this.footer.container=this.grid.getView().getFooterPanel(true);this.footer.dataSource=this.grid.dataSource;this.footer=Roo.factory(this.footer,Roo);
-}A.monitorWindowResize=false;A.autoHeight=false;A.autoWidth=false;this.grid=A;this.grid.getGridEl().replaceClass("x-layout-inactive-content","x-layout-component-panel");};Roo.extend(Roo.GridPanel,Roo.ContentPanel,{getId:function(){return this.grid.id;},getGrid:function(){return this.grid;
+}A.monitorWindowResize=false;A.autoHeight=false;A.autoWidth=false;this.grid=A;this.grid.getGridEl().replaceClass("x-layout-inactive-content","x-layout-component-panel");};Roo.extend(Roo.panel.Grid,Roo.panel.Content,{getId:function(){return this.grid.id;},getGrid:function(){return this.grid;
},setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.grid;var D=this.adjustForComponents(A,B);C.getGridEl().setSize(D.width,D.height);C.autoSize();}},beforeSlide:function(){this.grid.getView().scroller.clip();},afterSlide:function(){this.grid.getView().scroller.unclip();
-},destroy:function(){this.grid.destroy();delete this.grid;Roo.GridPanel.superclass.destroy.call(this);}});
-// Roo/NestedLayoutPanel.js
-Roo.NestedLayoutPanel=function(A,B){Roo.NestedLayoutPanel.superclass.constructor.call(this,A.getEl(),B);A.monitorWindowResize=false;this.layout=A;this.layout.getEl().addClass("x-layout-nested-layout");};Roo.extend(Roo.NestedLayoutPanel,Roo.ContentPanel,{layout:false,setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.adjustForComponents(A,B);
+},destroy:function(){this.grid.destroy();delete this.grid;Roo.panel.Grid.superclass.destroy.call(this);}});
+// Roo/panel/NestedLayout.js
+Roo.panel.NestedLayout=function(A,B){Roo.panel.NestedLayout.superclass.constructor.call(this,A.getEl(),B);A.monitorWindowResize=false;this.layout=A;this.layout.getEl().addClass("x-layout-nested-layout");};Roo.extend(Roo.panel.NestedLayout,Roo.panel.Content,{layout:false,setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.adjustForComponents(A,B);
var el=this.layout.getEl();el.setSize(C.width,C.height);var D=el.dom.offsetWidth;this.layout.layout();if(Roo.isIE&&!this.initialized){this.initialized=true;this.layout.layout();}}},setActiveState:function(A){this.active=A;if(!A){this.fireEvent("deactivate",this);
return;}this.fireEvent("activate",this);if(!this.layout){return;}var B=false;for(var r in this.layout.regions){B=this.layout.getRegion(r);if(B.getActivePanel()){B.setActivePanel(B.getActivePanel());continue;}if(!B.panels.length){continue;}B.showPanel(B.getPanel(0));
}},getLayout:function(){return this.layout;},addxtype:function(A){return this.layout.addxtype(A);}});
Roo.ScrollPanel=function(el,A,B){A=A||{};A.fitToFrame=true;Roo.ScrollPanel.superclass.constructor.call(this,el,A,B);this.el.dom.style.overflow="hidden";var C=this.el.wrap({cls:"x-scroller x-layout-inactive-content"});this.el.removeClass("x-layout-inactive-content");
this.el.on("mousewheel",this.onWheel,this);var up=C.createChild({cls:"x-scroller-up",html:" "},this.el.dom);var D=C.createChild({cls:"x-scroller-down",html:" "});up.unselectable();D.unselectable();up.on("click",this.scrollUp,this);D.on("click",this.scrollDown,this);
up.addClassOnOver("x-scroller-btn-over");D.addClassOnOver("x-scroller-btn-over");up.addClassOnClick("x-scroller-btn-click");D.addClassOnClick("x-scroller-btn-click");this.adjustments=[0,-(up.getHeight()+D.getHeight())];this.resizeEl=this.el;this.el=C;this.up=up;
-this.down=D;};Roo.extend(Roo.ScrollPanel,Roo.ContentPanel,{increment:100,wheelIncrement:5,scrollUp:function(){this.resizeEl.scroll("up",this.increment,{callback:this.afterScroll,scope:this});},scrollDown:function(){this.resizeEl.scroll("down",this.increment,{callback:this.afterScroll,scope:this}
+this.down=D;};Roo.extend(Roo.ScrollPanel,Roo.panel.Content,{increment:100,wheelIncrement:5,scrollUp:function(){this.resizeEl.scroll("up",this.increment,{callback:this.afterScroll,scope:this});},scrollDown:function(){this.resizeEl.scroll("down",this.increment,{callback:this.afterScroll,scope:this}
);},afterScroll:function(){var el=this.resizeEl;var t=el.dom.scrollTop,h=el.dom.scrollHeight,ch=el.dom.clientHeight;this.up[t==0?"addClass":"removeClass"]("x-scroller-btn-disabled");this.down[h-t<=ch?"addClass":"removeClass"]("x-scroller-btn-disabled");},setSize:function(){Roo.ScrollPanel.superclass.setSize.apply(this,arguments);
this.afterScroll();},onWheel:function(e){var d=e.getWheelDelta();this.resizeEl.dom.scrollTop-=(d*this.wheelIncrement);this.afterScroll();e.stopEvent();},setContent:function(A,B){this.resizeEl.update(A,B);}});
-// Roo/TreePanel.js
-Roo.TreePanel=function(A){var el=A.el;var B=A.tree;delete A.tree;delete A.el;var C=el.createChild();A.resizeEl=C;Roo.TreePanel.superclass.constructor.call(this,el,A);this.tree=new Roo.tree.TreePanel(C,B);this.on('activate',function(){if(this.tree.rendered){return;
-}this.tree.render();});};Roo.extend(Roo.TreePanel,Roo.ContentPanel,{fitToFrame:true,autoScroll:true,tree:false});
+// Roo/panel/Tree.js
+Roo.panel.Tree=function(A){var el=A.el;var B=A.tree;delete A.tree;delete A.el;var C=el.createChild();A.resizeEl=C;Roo.panel.Tree.superclass.constructor.call(this,el,A);this.tree=new Roo.tree.TreePanel(C,B);this.on('activate',function(){if(this.tree.rendered){return;
+}this.tree.render();});};Roo.extend(Roo.panel.Tree,Roo.panel.Content,{fitToFrame:true,autoScroll:true,tree:false});
// Roo/ReaderLayout.js
Roo.ReaderLayout=function(A,B){var c=A||{size:{}};Roo.ReaderLayout.superclass.constructor.call(this,B||document.body,{north:c.north!==false?Roo.apply({split:false,initialSize:32,titlebar:false},c.north):false,west:c.west!==false?Roo.apply({split:true,initialSize:200,minSize:175,maxSize:400,titlebar:true,collapsible:true,animate:true,margins:{left:5,right:0,bottom:5,top:5}
,cmargins:{left:5,right:5,bottom:5,top:5}},c.west):false,east:c.east!==false?Roo.apply({split:true,initialSize:200,minSize:175,maxSize:400,titlebar:true,collapsible:true,animate:true,margins:{left:0,right:5,bottom:5,top:5},cmargins:{left:5,right:5,bottom:5,top:5}
},c.east):false,center:Roo.apply({tabPosition:'top',autoScroll:false,closeOnTab:true,titlebar:false,margins:{left:c.west!==false?0:5,right:c.east!==false?0:5,bottom:5,top:2}},c.center)});this.el.addClass('x-reader');this.beginUpdate();var C=new Roo.BorderLayout(Roo.get(document.body).createChild(),{south:c.preview!==false?Roo.apply({split:true,initialSize:200,minSize:100,autoScroll:true,collapsible:true,titlebar:true,cmargins:{top:5,left:0,right:0,bottom:0}
-},c.preview):false,center:Roo.apply({autoScroll:false,titlebar:false,minHeight:200},c.listView)});this.add('center',new Roo.NestedLayoutPanel(C,Roo.apply({title:c.mainTitle||'',tabTip:''},c.innerPanelCfg)));this.endUpdate();this.regions.preview=C.getRegion('south');
+},c.preview):false,center:Roo.apply({autoScroll:false,titlebar:false,minHeight:200},c.listView)});this.add('center',new Roo.panel.NestedLayout(C,Roo.apply({title:c.mainTitle||'',tabTip:''},c.innerPanelCfg)));this.endUpdate();this.regions.preview=C.getRegion('south');
this.regions.listView=C.getRegion('center');};Roo.extend(Roo.ReaderLayout,Roo.BorderLayout);
// Roo/grid/Grid.js
Roo.grid.Grid=function(A,B){this.container=Roo.get(A);this.container.update("");this.container.setStyle("overflow","hidden");this.container.addClass('x-grid-container');this.id=this.container.id;Roo.apply(this,B);if(this.ds){this.dataSource=this.ds;delete this.ds;
}return "'"+A+H+C+")"+A+"'";};var B;if(Roo.isGecko){B="tpl.compiled = function(values, parent){ with(values) { return '"+tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn)+"';};};";}else{B=["tpl.compiled = function(values, parent){ with (values) { return ['"];
B.push(tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn));B.push("'].join('');};};");B=B.join('');}Roo.debug&&Roo.log(B.replace(/\\n/,'\n'));eval(B);return this;},applyTemplate:function(A){return this.master.compiled.call(this,A,{}
);},apply:function(){return this.applyTemplate.apply(this,arguments);}});Roo.XTemplate.from=function(el){el=Roo.getDom(el);return new Roo.XTemplate(el.value||el.innerHTML);};
-// Roo/dialog/namespace.js
-Roo.dialog={};
-// Roo/dialog/UploadCropbox.js
-Roo.dialog.UploadCropbox=function(A){Roo.dialog.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true}
-);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,outputMaxWidth:1200,windowSize:300,file:false,exif:{}
-,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'}
-,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify}
-]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);if(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype'));
-this.el.dom.removeAttribute('xtype');this.initEvents();}}else{var B=Roo.apply({},this.getAutoCreate());B.id=this.id||Roo.id();if(this.cls){B.cls=(typeof(B.cls)=='undefined'?this.cls:B.cls)+' '+this.cls;}if(this.style){B.style=(typeof(B.style)=='undefined'?this.style:B.style)+'; '+this.style;
-}this.el=ct.createChild(B,A);this.initEvents();}if(this.buttons.length){Roo.each(this.buttons,function(bb){var C=this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);C.on('click',this.onFooterButtonClick.createDelegate(this,[bb.action],true));
-},this);}if(this.loadMask){this.maskEl=this.el;}},initEvents:function(){this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);this.bodyEl=this.el.select('.roo-upload-cropbox-body',true).first();
-this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl=this.el.select('.roo-upload-cropbox-selector',true).first();this.selectorEl.hide();this.previewEl=this.el.select('.roo-upload-cropbox-preview',true).first();this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.thumbEl=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl.hide();this.notifyEl=this.el.select('.roo-upload-cropbox-empty-notify',true).first();this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.errorEl=this.el.select('.roo-upload-cropbox-error-notify',true).first();this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl.hide();this.footerEl=this.el.select('.roo-upload-cropbox-footer',true).first();this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';
-this.footerEl.hide();this.setThumbBoxSize();this.bind();this.resize();this.fireEvent('initial',this);},bind:function(){var A=this;window.addEventListener("resize",function(){A.resize();});this.bodyEl.on('click',this.beforeSelectFile,this);if(Roo.isTouch){this.bodyEl.on('touchstart',this.onTouchStart,this);
-this.bodyEl.on('touchmove',this.onTouchMove,this);this.bodyEl.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.bodyEl.on('mousedown',this.onMouseDown,this);this.bodyEl.on('mousemove',this.onMouseMove,this);var B=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';
-this.bodyEl.on(B,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);}this.selectorEl.on('change',this.onFileSelected,this);},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.baseRotate=1;this.dragable=false;this.pinching=false;
-this.mouseX=0;this.mouseY=0;this.cropData=false;this.notifyEl.dom.innerHTML=this.emptyText;},resize:function(){if(this.fireEvent('resize',this)!=false){this.setThumbBoxPosition();this.setCanvasPosition();}},onFooterButtonClick:function(e,el,o,A){switch(A){case 'rotate-left':this.onRotateLeft(e);
-break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.beforeSelectFile(e);break;case 'trash':this.trash(e);break;case 'crop':this.crop(e);break;case 'download':this.download(e);break;case 'center':this.center(e);break;default:break;}this.fireEvent('footerbuttonclick',this,A);
-},beforeSelectFile:function(e){e.preventDefault();if(this.fireEvent('beforeselectfile',this)!=false){this.selectorEl.dom.click();}},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;
-}var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);},center:function(e){this.setCanvasPosition();},loadCanvas:function(A){if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();
-this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;
-if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();if(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();
-this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(A=true){if(!this.canvasEl){return;}var B=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);var C=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);
-if(A){this.previewEl.setLeft(B);this.previewEl.setTop(C);return;}var D=this.baseScale*Math.pow(1.02,this.startScale);var E=Math.floor(this.imageEl.OriginWidth*D);var F=Math.floor(this.imageEl.OriginHeight*D);var G=Math.ceil((this.bodyEl.getWidth()-E)/2);var H=Math.ceil((this.bodyEl.getHeight()-F)/2);
-var I=B-G;var J=C-H;var K=this.previewEl.getLeft(true)+I;var L=this.previewEl.getTop(true)+J;this.previewEl.setLeft(K);this.previewEl.setTop(L);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;if(this.isDocument&&(this.canvasEl.width<this.thumbEl.getWidth()||this.canvasEl.height<this.thumbEl.getHeight())){this.dragable=false;
-return;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.canvasLoaded){return;}if(!this.dragable){return;}var A=this.canvasEl.width/0.9*0.05;
-var B=A*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){A=(this.canvasEl.height*this.minWidth/this.minHeight-this.canvasEl.width)/2+A;}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){B=(this.canvasEl.width*this.minHeight/this.minWidth-this.canvasEl.height)/2+B;
-}var C=Math.ceil(this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-this.canvasEl.width-A);var D=Math.ceil(this.thumbEl.getTop(true)+this.thumbEl.getHeight()-this.canvasEl.height-B);var E=Math.ceil(this.thumbEl.getLeft(true)+A);var F=Math.ceil(this.thumbEl.getTop(true)+B);
-if(C>E){var G=C;C=E;E=G;}if(D>F){var H=D;D=F;F=H;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var I=Math.ceil(x+this.previewEl.getLeft(true));
-var J=Math.ceil(y+this.previewEl.getTop(true));I=(I<C)?C:((I>E)?E:I);J=(J<D)?D:((J>F)?F:J);this.previewEl.setLeft(I);this.previewEl.setTop(J);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();
-},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.startScale=this.scale;this.scale=(e.getWheelDelta()>0)?(this.scale+1):(this.scale-1);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();
-return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth<this.minHeight){A=this.thumbEl.getHeight()/this.minHeight;}var B=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel()/A);var C=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel()/A);
-var D=this.imageEl.OriginWidth;var E=this.imageEl.OriginHeight;var F=Math.floor(this.imageEl.OriginWidth*this.getScaleLevel());var G=Math.floor(this.imageEl.OriginHeight*this.getScaleLevel());var H=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);
-var I=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);var J=Math.ceil((this.bodyEl.getWidth()-F)/2);var K=Math.ceil((this.bodyEl.getHeight()-G)/2);var L=J-H;var M=K-I;var N=this.previewEl.getLeft(true)+L;var O=this.previewEl.getTop(true)+M;var P=N-this.thumbEl.getLeft(true);
-var Q=O-this.thumbEl.getTop(true);var R=this.thumbEl.getLeft(true)+this.thumbEl.getWidth()-F-N;var S=this.thumbEl.getTop(true)+this.thumbEl.getHeight()-G-O;var T=F/0.9*0.05;var U=T*this.minHeight/this.minWidth;if((this.imageEl.OriginWidth/this.imageEl.OriginHeight<=this.minWidth/this.minHeight)){T=(G*this.minWidth/this.minHeight-F)/2+T;
-}if((this.imageEl.OriginWidth/this.imageEl.OriginHeight>=this.minWidth/this.minHeight)){U=(F*this.minHeight/this.minWidth-G)/2+U;}if(this.isDocument&&(this.rotate==0||this.rotate==180)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minWidth&&C<this.minHeight))){return false;
-}if(this.isDocument&&(this.rotate==90||this.rotate==270)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minHeight&&C<this.minWidth))){return false;}if(!this.isDocument&&(this.rotate==0||this.rotate==180)&&(P>T||R>T||Q>U||S>U||B>D||C>E)){return false;
-}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(B<this.minHeight||B>this.imageEl.OriginWidth||C<this.minWidth||C>this.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;
-var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
-}this.rotate=(this.rotate<90)?270:this.rotate-90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate<90)?270:this.rotate-90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
-}this.draw();this.fireEvent('rotate',this,'left');},onRotateRight:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
-var bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
-}this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
-}this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){this.previewEl.dom.innerHTML='';var A=document.createElement("canvas");
-var B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidth<this.imageEl.OriginHeight){A.width=this.imageEl.OriginHeight*this.getScaleLevel();
-A.height=this.imageEl.OriginHeight*this.getScaleLevel();C=this.imageEl.OriginHeight/2;}B.scale(this.getScaleLevel(),this.getScaleLevel());B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);
-this.canvasEl=document.createElement("canvas");this.contextEl=this.canvasEl.getContext("2d");switch(this.rotate){case 0:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;case 90:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();
-if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;}this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;case 270:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
-break;}this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;default:break;}this.previewEl.appendChild(this.canvasEl);this.setCanvasPosition(false);
-},crop:function(){if(!this.canvasLoaded){return;}var A=document.createElement("canvas");var B=A.getContext("2d");A.width=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;A.height=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;
-var C=A.width/2;B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);var D=document.createElement("canvas");var E=D.getContext("2d");
-D.width=this.thumbEl.getWidth()/this.getScaleLevel();D.height=this.thumbEl.getHeight()/this.getScaleLevel();switch(this.rotate){case 0:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());
-var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
-var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var sx=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true);var sy=this.thumbEl.getTop(true)-this.previewEl.getTop(true);
-sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());if(D.width>this.outputMaxWidth){var H=this.outputMaxWidth/D.width;D.width=D.width*H;D.height=D.height*H;E.scale(H,H);}E.fillStyle='white';E.fillRect(0,0,this.thumbEl.getWidth()/this.getScaleLevel(),this.thumbEl.getHeight()/this.getScaleLevel());
-E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 90:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());
-var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
-var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
-var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;
-E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 180:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());
-var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
-var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
-var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
-sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 270:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());
-var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
-var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
-}if(x>0&&y>0){H=I/F;if(F<G){H=J/G;}}E.scale(H,H);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
-sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);E.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);
-if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight);
-B=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=this.windowSize;
-A=Math.ceil(this.minWidth*B/this.minHeight);if(this.minWidth>this.minHeight){A=this.windowSize;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);
-var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);this.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
-}this.rotate=Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();
-this.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;
-}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getWidth()){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;
-}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getHeight()){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginWidth;
-}}return;}A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getHeight()){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getHeight();
-this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;}}if(this.imageEl.OriginWidth<this.minWidth||this.imageEl.OriginHeight<this.minHeight){this.baseScale=A/this.minWidth;
-}return;},getScaleLevel:function(){return this.baseScale*Math.pow(1.02,this.scale);},onTouchStart:function(e){if(!this.canvasLoaded){this.beforeSelectFile(e);return;}var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;}if(A.length!=2){return;
-}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){if(!this.pinching&&!this.dragable){return;
-}var A=e.browserEvent.touches;if(!A){return;}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);this.scale=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));
-if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();},onTouchEnd:function(e){this.pinching=false;this.dragable=false;},process:function(A,B){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.xhr=new XMLHttpRequest();A.xhr=this.xhr;
-this.xhr.open(this.method,this.url,true);var C={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};for(var D in C){var E=C[D];if(E){this.xhr.setRequestHeader(D,E);}}var F=this;this.xhr.onload=function(){F.xhrOnLoad(F.xhr);
-};this.xhr.onerror=function(){F.xhrOnError(F.xhr);};var G=new FormData();G.append('returnHTML','NO');if(B){G.append('crop',B);var H=atob(B.split(',')[1]);var I=[];for(var i=0;i<H.length;i++){I.push(H.charCodeAt(i));}var J=new Blob([new Uint8Array(I)],{type:this.cropType}
-);G.append(this.paramName,J,A.name);}if(typeof(A.filename)!='undefined'){G.append('filename',A.filename);}if(typeof(A.mimetype)!='undefined'){G.append('mimetype',A.mimetype);}if(this.fireEvent('arrange',this,G)!=false){this.xhr.send(G);};},xhrOnLoad:function(A){if(this.loadMask){this.maskEl.unmask();
-}if(A.readyState!==4){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);if(!B.success){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);this.fireEvent('upload',this,B);},xhrOnError:function(){if(this.loadMask){this.maskEl.unmask();
-}Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);Roo.log(A);},prepare:function(A){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.file=false;this.exif={};if(typeof(A)==='string'){this.loadCanvas(A);return;}if(!A||!this.urlAPI){return;
-}this.file=A;if(typeof(A.type)!='undefined'&&A.type.length!=0){this.cropType=A.type;}var B=this;if(this.fireEvent('prepare',this,this.file)!=false){var C=new FileReader();C.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var D=e.target.result,E=new DataView(D),F=2,G=E.byteLength-4,H,I;
-if(E.getUint16(0)===0xffd8){while(F<G){H=E.getUint16(F);if((H>=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}if(H==0xffe1){B.parseExifData(E,F,I);}F+=I;continue;}break;
-}}var J=B.urlAPI.createObjectURL(B.file);B.loadCanvas(J);return;};C.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');
-return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;default:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;
-}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;if(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');
-return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);
-},getExifValue:function(A,B,C,D,E,F){var G=Roo.dialog.UploadCropbox.exifTagTypes[D],H,I,J,i,K,c;if(!G){Roo.log('Invalid Exif data: Invalid tag type.');return;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');
-return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);}if(G.ascii){K='';for(i=0;i<J.length;i+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.dialog.UploadCropbox,{tags:{'Orientation':0x0112
-}
-,Orientation:{1:0,3:180,6:90,8:270},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);},size:1},2:{getValue:function(A,B){return String.fromCharCode(A.getUint8(B));},size:1,ascii:true},3:{getValue:function(A,B,C){return A.getUint16(B,C);},size:2}
-,4:{getValue:function(A,B,C){return A.getUint32(B,C);},size:4},5:{getValue:function(A,B,C){return A.getUint32(B,C)/A.getUint32(B+4,C);},size:8},9:{getValue:function(A,B,C){return A.getInt32(B,C);},size:4},10:{getValue:function(A,B,C){return A.getInt32(B,C)/A.getInt32(B+4,C);
-},size:8}},footer:{STANDARD:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-picture-o"></i>'}
-]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
-]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-download"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-crop"></i>'}
-]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-trash"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
-]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
-]}],CENTER:[{tag:'div',cls:'btn-group roo-upload-cropbox-center',action:'center',cn:[{tag:'button',cls:'btn btn-default',html:'CENTER'}]}]}});
+// Roo/depreicated.js
+Roo.GridPanel=Roo.panel.Grid;Roo.CalendarPanel=Roo.panel.Calendar;Roo.ContentPanel=Roo.panel.Content;Roo.NestedLayoutPanel=Roo.panel.NestedLayout;Roo.TabPanel=Roo.panel.Tab;Roo.TabPanelItem=Roo.panel.TabItem;Roo.TreePanel=Roo.panel.Tree;
projects / roojs1 / commitdiff