* @hide
* @method autoSize
*/
-});/*
- * 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.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.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.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,
- /**
- * @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,
-
- /**
- * @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,
-
-
- // private
- onRender : function(ct, position){
- 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');
- }
- 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.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.collapse, 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 (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);
- }
-
-
-
- },
-
- // 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);
- 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);
- }
- },
-
- 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.collapse, this);
- }
- Roo.form.ComboBox.superclass.onDestroy.call(this);
- },
-
- // private
- fireKey : function(e){
- if(e.isNavKeyPress() && !this.list.isVisible()){
- this.fireEvent("specialkey", this, e);
- }
- },
-
- // private
- onResize: function(w, h){
- Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
-
- if(typeof w != 'number'){
- // we do not handle it!?!?
- 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'));
- }
-
-
-
- },
-
- /**
- * 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');
- }
- },
-
- // private
- onBeforeLoad : function(){
- if(!this.hasFocus){
- return;
- }
- this.innerList.update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- this.restrictHeight();
- this.selectedIndex = -1;
- },
-
- // private
- onLoad : function(){
- if(!this.hasFocus){
- 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();
- }
- //this.el.focus();
- },
-
- // 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);
- }
- },
-
- /**
- * 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 : '';
- }else{
- return Roo.form.ComboBox.superclass.getValue.call(this);
- }
- },
-
- /**
- * Clears any text/value currently set in the field
- */
- clearValue : function(){
- if(this.hiddenField){
- this.hiddenField.value = '';
- }
- this.value = '';
- this.setRawValue('');
- this.lastSelectionText = '';
- this.applyEmptyText();
- },
-
- /**
- * 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.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.originalValue);
- this.clearInvalid();
- this.lastData = false;
- },
- // 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 record;
- },
-
- // 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);
- }
- },
-
- // 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();
- }
- },
-
- // 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();
- },
-
- // 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;
- }
- }
- 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
- 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);
- }
- }
- },
-
- // 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);
- }
- }
- },
-
- // private
- onKeyUp : function(e){
- if(this.editable !== false && !e.isSpecialKey()){
- this.lastKey = e.getKey();
- this.dqTask.delay(this.queryDelay);
- }
- },
-
- // 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;
- this.applyEmptyText();
- }
- },
-
- /**
- * 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
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
- }
- 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);
- }
- 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;
- }
- 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);
- },
-
- // 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();
- }
- }
- },
- listKeyPress : function(e)
- {
- //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;
- }
-
- }
-
- 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?
- }
- // scroll to?
- this.view.select(match);
- var sn = Roo.get(this.view.getSelectedNodes()[0])
- sn.scrollIntoView(sn.dom.parentNode, false);
- }
-
- /**
- * @cfg {Boolean} grow
- * @hide
- */
- /**
- * @cfg {Number} growMin
- * @hide
- */
- /**
- * @cfg {Number} growMax
- * @hide
- */
- /**
- * @hide
- * @method autoSize
- */
-});/*
- * 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');
- }
- },
-
- 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;
- }
- */
- //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);
- }
- //if(this.checked){
- this.setChecked(this.checked);
- //}else{
- //this.checked = this.el.dom;
- //}
-
- },
-
- // private
- initValue : Roo.emptyFn,
-
- /**
- * Returns the checked state of the checkbox.
- * @return {Boolean} True if checked, else false
- */
- getValue : function(){
- if(this.el){
- return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
- }
- return this.valueOff;
-
- },
-
- // private
- onClick : function(){
- 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){
-
-
- //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;
- }
-
-
- if(this.wrap){
- this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
- }
- 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;
-
- },
- // handle setting of hidden value by some other method!!?!?
- setFromHidden: function()
- {
- if(!this.el){
- return;
- }
- //console.log("SET FROM HIDDEN");
- //alert('setFrom hidden');
- this.setValue(this.el.dom.value);
- },
-
- onDestroy : function()
- {
- if(this.viewEl){
- Roo.get(this.viewEl).remove();
- }
-
- Roo.form.Checkbox.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.
- *
- * 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;
- }
-});//<script type="text/javascript">
-
-/*
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * licensing@extjs.com
- *
- * http://www.extjs.com/license
- */
-
- /*
- *
- * Known bugs:
- * Default CSS appears to render it as fixed text by default (should really be Sans-Serif)
- * - IE ? - no idea how much works there.
- *
- *
- *
- */
-
-
-/**
- * @class Ext.form.HtmlEditor
- * @extends Ext.form.Field
- * Provides a lightweight HTML Editor component.
- * WARNING - THIS CURRENTlY ONLY WORKS ON FIREFOX - USE FCKeditor for a cross platform version
- *
- * <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.form.HtmlEditor = Roo.extend(Roo.form.Field, {
- /**
- * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
- */
- toolbars : 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:/'+'/',
-
-
- // id of frame..
- frameId: false,
-
- // private properties
- validationEvent : false,
- deferHeight: true,
- initialized : false,
- activated : false,
- sourceEditMode : false,
- onFocus : Roo.emptyFn,
- iframePad:3,
- hideMode:'offsets',
- defaultAutoCreate : {
- tag: "textarea",
- style:"width:500px;height:300px;",
- autocomplete: "off"
- },
-
- // 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
- })
- },
-
- /**
- * 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){
- if (!editor.toolbars || !editor.toolbars.length) {
- editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
- }
-
- for (var i =0 ; i < editor.toolbars.length;i++) {
- editor.toolbars[i] = Roo.factory(editor.toolbars[i], Roo.form.HtmlEditor);
- editor.toolbars[i].init(editor);
- }
-
-
- },
-
- /**
- * 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(){
- return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
- },
-
- // private
- onRender : function(ct, position){
- Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
- this.el.dom.style.border = '0 none';
- this.el.dom.setAttribute('tabIndex', -1);
- this.el.addClass('x-hidden');
- if(Roo.isIE){ // fix IE 1px bogus margin
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
- }
- this.wrap = this.el.wrap({
- cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
- });
-
- this.frameId = Roo.id();
- this.createToolbar(this);
-
-
-
-
-
-
- var iframe = this.wrap.createChild({
- tag: 'iframe',
- id: this.frameId,
- name: this.frameId,
- frameBorder : 'no',
- 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
- });
-
- // console.log(iframe);
- //this.wrap.dom.appendChild(iframe);
-
- 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);
-
- if(!this.width){
- this.setSize(this.el.getSize());
- }
- },
-
- // private
- onResize : function(w, h){
- Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
- if(this.el && this.iframe){
- if(typeof w == 'number'){
- var aw = w - this.wrap.getFrameWidth('lr');
- this.el.setWidth(this.adjustWidth('textarea', aw));
- this.iframe.style.width = aw + 'px';
- }
- 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();
- }
-
-
-
-
- var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
- this.el.setHeight(this.adjustWidth('textarea', ah));
- this.iframe.style.height = ah + 'px';
- if(this.doc){
- (this.doc.body || this.doc.documentElement).style.height = (ah - (this.iframePad*2)) + 'px';
- }
- }
- }
- },
-
- /**
- * 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){
-
- this.syncValue();
- this.iframe.className = 'x-hidden';
- this.el.removeClass('x-hidden');
- this.el.dom.removeAttribute('tabIndex');
- this.el.focus();
- }else{
-
- this.pushValue();
- this.iframe.className = '';
- this.el.addClass('x-hidden');
- this.el.dom.setAttribute('tabIndex', -1);
- this.deferFocus();
- }
- this.setSize(this.wrap.getSize());
- this.fireEvent('editmodechange', this, this.sourceEditMode);
- },
-
- // private used internally
- createLink : function(){
- var url = prompt(this.createLinkText, this.defaultLinkValue);
- if(url && url != 'http:/'+'/'){
- this.relayCmd('createlink', url);
- }
- },
-
- // 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.pushValue();
- },
-
- /**
- * 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;
- },
-
- /**
- * Protected method that will not generally be called directly. Syncs the contents
- * of the editor iframe with the textarea.
- */
- syncValue : function(){
- if(this.initialized){
- var bd = (this.doc.body || this.doc.documentElement);
- var html = bd.innerHTML;
- if(Roo.isSafari){
- var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
- var m = bs.match(/text-align:(.*?);/i);
- if(m && m[1]){
- html = '<div style="'+m[0]+'">' + html + '</div>';
- }
- }
- html = this.cleanHtml(html);
- if(this.fireEvent('beforesync', this, html) !== false){
- this.el.dom.value = html;
- this.fireEvent('sync', this, html);
- }
- }
- },
-
- /**
- * Protected method that will not generally be called directly. Pushes the value of the textarea
- * into the iframe editor.
- */
- pushValue : function(){
- if(this.initialized){
- var v = this.el.dom.value;
- if(v.length < 1){
- v = ' ';
- }
- if(this.fireEvent('beforepush', this, v) !== false){
- (this.doc.body || this.doc.documentElement).innerHTML = v;
- this.fireEvent('push', this, v);
- }
- }
- },
-
- // 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;
-
- 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;
- }
- },
-
- // 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');
- ss['background-attachment'] = 'fixed'; // w3c
- dbody.bgProperties = 'fixed'; // ie
- Roo.DomHelper.applyStyles(dbody, ss);
- Roo.EventManager.on(this.doc, {
- 'mousedown': this.onEditorEvent,
- 'dblclick': this.onEditorEvent,
- 'click': this.onEditorEvent,
- 'keyup': this.onEditorEvent,
- buffer:100,
- scope: this
- });
- if(Roo.isGecko){
- Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
- }
- if(Roo.isIE || Roo.isSafari || Roo.isOpera){
- Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
- }
- this.initialized = true;
-
- this.fireEvent('initialize', this);
- this.pushValue();
- },
-
- // 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.activated = true;
- for (var i =0; i < this.toolbars.length;i++) {
- this.toolbars[i].onFirstFocus();
- }
-
- 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.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];
-
- }
-
-
- v = Math.max(1, v+adjust);
-
- this.execCmd('FontSize', v );
- },
-
- onEditorEvent : function(e){
- this.fireEvent('editorevent', this, e);
- // this.updateToolbar();
- this.syncValue();
- },
-
- insertTag : function(tg)
- {
- // could be a bit smarter... -> wrap the current selected tRoo..
-
- this.execCmd("formatblock", tg);
-
- },
-
- insertText : function(txt)
- {
-
-
- range = this.createRange();
- range.deleteContents();
- //alert(Sender.getAttribute('label'));
-
- range.insertNode(this.doc.createTextNode(txt));
- } ,
-
- // private
- relayBtnCmd : function(btn){
- this.relayCmd(btn.cmd);
- },
-
- /**
- * 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){
- this.win.focus();
- this.execCmd(cmd, value);
- this.fireEvent('editorevent', this);
- //this.updateToolbar();
- this.deferFocus();
- },
-
- /**
- * 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)
- */
- execCmd : function(cmd, value){
- this.doc.execCommand(cmd, false, value === undefined ? null : value);
- this.syncValue();
- },
-
-
- /**
- * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
- * to insert tRoo.
- * @param {String} text
- */
- insertAtCursor : function(text){
- if(!this.activated){
- return;
- }
- if(Roo.isIE){
- this.win.focus();
- var r = this.doc.selection.createRange();
- if(r){
- r.collapse(true);
- r.pasteHTML(text);
- this.syncValue();
- this.deferFocus();
- }
- }else if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
- this.win.focus();
- this.execCmd('InsertHTML', text);
- 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';
- case 'v':
- this.cleanUpPaste.defer(100, this);
- return;
- break;
- }
- if(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();
- }
- return;
- }
-
- 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;
- }
- 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();
- }
-
-
- 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.isIE ? this.doc.selection : this.win.getSelection();
- },
-
- getSelectedNode: function()
- {
- // this may only work on Gecko!!!
-
- // should we cache this!!!!
-
-
-
-
- var range = this.createRange(this.getSelection());
-
- 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 ar = range.endContainer.childNodes;
- if (!ar.length) {
- ar = range.commonAncestorContainer.childNodes;
- //alert(ar.length);
- }
- 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;
- }
- if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
- continue;
- }
-
-
- has_other_nodes = true;
- }
- 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.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;
- }
-
- },
-
-
-
- // BC Hacks - cause I cant work out what i was trying to do..
- rangeIntersectsNode : function(range, node)
- {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- }
- catch (e) {
- nodeRange.selectNodeContents(node);
- }
-
- return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
- range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
- },
- rangeCompareNode : function(range, node) {
- var nodeRange = node.ownerDocument.createRange();
- try {
- nodeRange.selectNode(node);
- } catch (e) {
- nodeRange.selectNodeContents(node);
- }
- var nodeIsBefore = range.compareBoundaryPoints(Range.START_TO_START, nodeRange) == 1;
- var nodeIsAfter = range.compareBoundaryPoints(Range.END_TO_END, nodeRange) == -1;
-
- if (nodeIsBefore && !nodeIsAfter)
- return 0;
- if (!nodeIsBefore && nodeIsAfter)
- return 1;
- if (nodeIsBefore && nodeIsAfter)
- return 2;
-
- return 3;
- },
-
- // private? - in a new class?
- cleanUpPaste : function()
- {
- // cleans up the whole document..
- // console.log('cleanuppaste');
- this.cleanUpChildren(this.doc.body)
-
-
- },
- cleanUpChildren : function (n)
- {
- if (!n.childNodes.length) {
- return;
- }
- for (var i = n.childNodes.length-1; i > -1 ; i--) {
- this.cleanUpChild(n.childNodes[i]);
- }
- },
-
-
-
-
- cleanUpChild : function (node)
- {
- //console.log(node);
- if (node.nodeName == "#text") {
- // clean up silly Windows -- stuff?
- return;
- }
- if (node.nodeName == "#comment") {
- node.parentNode.removeChild(node);
- // clean up silly Windows -- stuff?
- return;
- }
-
- if (Roo.form.HtmlEditor.black.indexOf(node.tagName.toLowerCase()) > -1) {
- // remove node.
- node.parentNode.removeChild(node);
- return;
-
- }
- if (!node.attributes || !node.attributes.length) {
- this.cleanUpChildren(node);
- return;
- }
-
- function cleanAttr(n,v)
- {
-
- if (v.match(/^\./) || v.match(/^\//)) {
- return;
- }
- if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/)) {
- return;
- }
- Roo.log("(REMOVE)"+ node.tagName +'.' + n + '=' + v);
- node.removeAttribute(n);
-
- }
-
- function cleanStyle(n,v)
- {
- if (v.match(/expression/)) { //XSS?? should we even bother..
- node.removeAttribute(n);
- return;
- }
-
-
- var parts = v.split(/;/);
- Roo.each(parts, function(p) {
- p = p.replace(/\s+/g,'');
- if (!p.length) {
- return;
- }
- var l = p.split(':').shift().replace(/\s+/g,'');
-
- if (Roo.form.HtmlEditor.cwhite.indexOf(l) < 0) {
- Roo.log('(REMOVE)' + node.tagName +'.' + n + ':'+l + '=' + v);
- node.removeAttribute(n);
- return false;
- }
- });
-
-
- }
-
-
- for (var i = node.attributes.length-1; i > -1 ; i--) {
- var a = node.attributes[i];
- //console.log(a);
- if (Roo.form.HtmlEditor.ablack.indexOf(a.name.toLowerCase()) > -1) {
- node.removeAttribute(a.name);
- return;
- }
- if (Roo.form.HtmlEditor.aclean.indexOf(a.name.toLowerCase()) > -1) {
- cleanAttr(a.name,a.value); // fixme..
- return;
- }
- if (a.name == 'style') {
- cleanStyle(a.name,a.value);
- }
- /// clean up MS crap..
- if (a.name == 'class') {
- if (a.value.match(/^Mso/)) {
- node.className = '';
- }
- }
-
- // style cleanup!?
- // class cleanup?
-
- }
-
-
- this.cleanUpChildren(node);
-
-
- }
-
-
- // 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.form.HtmlEditor.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.form.HtmlEditor.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' // clean later..
-];
-Roo.form.HtmlEditor.clean = [
- 'script', 'style', 'title', 'xml'
-];
-
-// attributes..
-
-Roo.form.HtmlEditor.ablack = [
- 'on'
-];
-
-Roo.form.HtmlEditor.aclean = [
- 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
-];
-
-// protocols..
-Roo.form.HtmlEditor.pwhite= [
- 'http', 'https', 'mailto'
-];
-
-Roo.form.HtmlEditor.cwhite= [
- 'text-align',
- 'font-size'
-];
-
-// <script type="text/javascript">
-/*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
-
- */
-
-/**
- * @class Roo.form.HtmlEditorToolbar1
- * 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 {Array} 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);
- //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
- // dont call parent... till later.
-}
-
-Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype, {
-
- tb: false,
-
- rendered: false,
-
- editor : false,
- /**
- * @cfg {Object} disable List of toolbar elements to disable
-
- */
- disable : false,
- /**
- * @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?
- ],
- 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"]
- ],
- /**
- * @cfg {String} defaultFont default font to use.
- */
- defaultFont: 'tahoma',
-
- fontSelect : false,
-
-
- formatCombo : false,
-
- init : function(editor)
- {
- this.editor = editor;
-
-
- var fid = editor.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: editor, // was editor...
- handler:handler||editor.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?
- });
-
- 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: editor.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,
- //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) {
- editor.insertTag(r.get('tag'));
- editor.focus();
- }
- }
-
- });
- tb.addField(this.formatCombo);
-
- }
-
- if(!this.disable.format){
- tb.add(
- btn('bold'),
- btn('italic'),
- btn('underline')
- );
- };
- if(!this.disable.fontSize){
- tb.add(
- '-',
-
-
- btn('increasefontsize', false, editor.adjustFont),
- btn('decreasefontsize', false, editor.adjustFont)
- );
- };
-
-
- if(this.disable.colors){
- tb.add(
- '-', {
- id:editor.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){
- editor.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- },
- scope: editor,
- clickEvent:'mousedown'
- })
- }, {
- id:editor.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){
- editor.execCmd('useCSS', false);
- editor.execCmd('hilitecolor', color);
- editor.execCmd('useCSS', true);
- editor.deferFocus();
- }else{
- editor.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
- Roo.isSafari || Roo.isIE ? '#'+color : color);
- editor.deferFocus();
- }
- },
- scope:editor,
- clickEvent:'mousedown'
- })
- }
- );
- };
- // now add all the items...
-
-
- if(!this.disable.alignments){
- tb.add(
- '-',
- btn('justifyleft'),
- btn('justifycenter'),
- btn('justifyright')
- );
- };
-
- //if(!Roo.isSafari){
- if(!this.disable.links){
- tb.add(
- '-',
- btn('createlink', false, editor.createLink) /// MOVE TO HERE?!!?!?!?!
- );
- };
-
- if(!this.disable.lists){
- tb.add(
- '-',
- btn('insertorderedlist'),
- btn('insertunorderedlist')
- );
- }
- 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) {
- editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
-
- },
- tabIndex:-1
- });
- }
-
-
- tb.add(smenu);
-
-
- }
- if (this.btns) {
- for(var i =0; i< this.btns.length;i++) {
- var b = this.btns[i];
- b.cls = 'x-edit-none';
- b.scope = editor;
- tb.add(b);
- }
-
- }
-
-
-
- // disable everything...
-
- this.tb.items.each(function(item){
- if(item.id != editor.frameId+ '-sourceedit'){
- 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);
- },
-
-
-
- /**
- * 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.editor.activated){
- this.editor.onFirstFocus();
- return;
- }
-
- var btns = this.tb.items.map,
- doc = this.editor.doc,
- frameId = this.editor.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(!this.disable.format){
- btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
- btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
- btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
- }
- 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'));
- }
-
- var ans = this.editor.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;
- }
- }
- }
-
-
-
- // 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('');
- },
-
- toggleSourceEdit : function(sourceEditMode){
- if(sourceEditMode === undefined){
- sourceEditMode = !this.sourceEditMode;
- }
- this.sourceEditMode = sourceEditMode === true;
- var btn = this.tb.items.get(this.editor.frameId +'-sourceedit');
- // just toggle the button?
- if(btn.pressed !== this.editor.sourceEditMode){
- btn.toggle(this.editor.sourceEditMode);
- return;
- }
-
- if(this.sourceEditMode){
- this.tb.items.each(function(item){
- if(item.cmd != 'sourceedit'){
- item.disable();
- }
- });
-
- }else{
- if(this.initialized){
- this.tb.items.each(function(item){
- item.enable();
- });
- }
-
- }
- // 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'
- },
- 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();
- });
-
- }
- },
- 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 : [
- new Roo.form.HtmlEditor.ToolbarStandard(),
- new Roo.form.HtmlEditor.ToolbarContext()
- })
- }
-
- *
- * @config : {Object} disable List of elements to disable.. (not done yet.)
- *
- *
- */
-
-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.
-}
-Roo.form.HtmlEditor.ToolbarContext.types = {
- 'IMG' : {
- width : {
- title: "Width",
- width: 40
- },
- height: {
- title: "Height",
- width: 40
- },
- align: {
- title: "Align",
- opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
- width : 80
-
- },
- border: {
- title: "Border",
- width: 40
- },
- alt: {
- title: "Alt",
- width: 120
- },
- src : {
- title: "Src",
- width: 220
- }
-
- },
- 'A' : {
- name : {
- title: "Name",
- width: 50
- },
- href: {
- title: "Href",
- width: 220
- } // border?
-
- },
- 'TABLE' : {
- rows : {
- title: "Rows",
- width: 20
- },
- cols : {
- title: "Cols",
- width: 20
- },
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- border : {
- title: "Border",
- width: 20
- }
- },
- 'TD' : {
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- align: {
- title: "Align",
- opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
- width: 40
- },
- valign: {
- title: "Valign",
- opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
- width: 40
- },
- colspan: {
- title: "Colspan",
- width: 20
-
- }
- },
- 'INPUT' : {
- name : {
- title: "name",
- width: 120
- },
- value : {
- title: "Value",
- width: 120
- },
- width : {
- title: "Width",
- width: 40
- }
- },
- 'LABEL' : {
- 'for' : {
- title: "For",
- width: 120
- }
- },
- 'TEXTAREA' : {
- name : {
- title: "name",
- width: 120
- },
- rows : {
- title: "Rows",
- width: 20
- },
- cols : {
- title: "Cols",
- width: 20
- }
- },
- 'SELECT' : {
- name : {
- title: "name",
- width: 120
- },
- selectoptions : {
- title: "Options",
- width: 200
- }
- },
- 'BODY' : {
- title : {
- title: "title",
- width: 120,
- disabled : true
- }
- }
-};
-
-
-
-Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
-
- tb: false,
-
- rendered: false,
-
- editor : false,
- /**
- * @cfg {Object} disable List of toolbar elements to disable
-
- */
- disable : false,
-
-
-
- toolbars : false,
-
- init : function(editor)
- {
- this.editor = editor;
-
-
- var fid = editor.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: editor, // was editor...
- handler:handler||editor.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 = {};
-
- for (var i in ty) {
-
- this.toolbars[i] = this.buildToolbar(ty[i],i);
- }
- this.tb = this.toolbars.BODY;
- this.tb.el.show();
-
-
- 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.
- */
- updateToolbar: function(){
-
- if(!this.editor.activated){
- this.editor.onFirstFocus();
- return;
- }
-
-
- var ans = this.editor.getAllAncestors();
-
- // pick
- var ty= Roo.form.HtmlEditor.ToolbarContext.types;
- var sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editor.doc.body;
- sel = sel ? sel : this.editor.doc.body;
- sel = sel.tagName.length ? sel : this.editor.doc.body;
- var tn = sel.tagName.toUpperCase();
- sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
- tn = sel.tagName.toUpperCase();
- if (this.tb.name == tn) {
- return; // no change
- }
- this.tb.el.hide();
- ///console.log("show: " + tn);
- this.tb = this.toolbars[tn];
- this.tb.el.show();
- this.tb.fields.each(function(e) {
- e.setValue(sel.getAttribute(e.name));
- });
- this.tb.selectedNode = sel;
-
-
- Roo.menu.MenuMgr.hideAll();
-
- //this.editorsyncValue();
- },
-
-
- // 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();
- });
- },
- buildToolbar: function(tlist, nm)
- {
- var editor = this.editor;
- // create a new element.
- var wdiv = editor.wrap.createChild({
- tag: 'div'
- }, editor.wrap.dom.firstChild.nextSibling, true);
-
-
- var tb = new Roo.Toolbar(wdiv);
- tb.add(nm+ ": ");
- for (var i in tlist) {
- var item = tlist[i];
- tb.add(item.title + ": ");
- if (item.opts) {
- // fixme
-
-
- tb.addField( new Roo.form.ComboBox({
- store: new Roo.data.SimpleStore({
- id : 'val',
- fields: ['val'],
- data : item.opts // from states.js
- }),
- name : i,
- displayField:'val',
- typeAhead: false,
- mode: 'local',
- editable : false,
- triggerAction: 'all',
- emptyText:'Select',
- selectOnFocus:true,
- width: item.width ? item.width : 130,
- listeners : {
- 'select': function(c, r, i) {
- tb.selectedNode.setAttribute(c.name, r.get('val'));
- }
- }
-
- }));
- continue;
-
-
-
-
-
- tb.addField( new Roo.form.TextField({
- name: i,
- width: 100,
- //allowBlank:false,
- value: ''
- }));
- continue;
- }
- tb.addField( new Roo.form.TextField({
- name: i,
- width: item.width,
- //allowBlank:true,
- value: '',
- listeners: {
- 'change' : function(f, nv, ov) {
- tb.selectedNode.setAttribute(f.name, nv);
- }
- }
- }));
-
- }
- tb.el.on('click', function(e){
- e.preventDefault(); // what does this do?
- });
- tb.el.setVisibilityMode( Roo.Element.DISPLAY);
- tb.el.hide();
- tb.name = nm;
- // dont need to disable them... as they will get hidden
- return tb;
-
-
- }
-
-
-
-
-});
-
-
-
-
-
-/*
- * 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.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.BasicForm.superclass.constructor.call(this);
-};
-
-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 {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
- * or setValues() data instead of when the form was first created.
- */
- trackResetOnLoad : false,
-
-
- /**
- * childForms - used for multi-tab forms
- * @type {Array}
- */
- childForms : false,
-
- /**
- * allItems - full list of fields.
- * @type {Array}
- */
- allItems : false,
-
- /**
- * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
- * element by passing it or its id or mask the form itself by passing in true.
- * @type Mixed
- */
- waitMsgTarget : false,
-
- // 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;
- this.items.each(function(f){
- if(!f.validate()){
- valid = false;
- }
- });
- return valid;
- },
-
- /**
- * 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;
- },
-
- /**
- * 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);
- }
- 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.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...');
- }
-
- },
-
- // private
- afterAction : function(action, success){
- this.activeAction = null;
- var o = action.options;
-
- if(this.waitMsgTarget === true){
- this.el.unmask();
- }else if(this.waitMsgTarget){
- this.waitMsgTarget.unmask();
- }else{
- Roo.MessageBox.updateProgress(1);
- Roo.MessageBox.hide();
- }
-
- if(success){
- if(o.reset){
- this.reset();
- }
- Roo.callback(o.success, o.scope, [this, action]);
- this.fireEvent('actioncomplete', this, action);
-
- }else{
- 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", "Saving Failed, please check your entries");
- }
-
- 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;
- },
-
- /**
- * 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);
-
- 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);
- }
- }
- }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);
- });
-
- 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 {
- field.setValue(values[id]);
- }
-
-
- if(this.trackResetOnLoad){
- field.originalValue = field.getValue();
- }
- }
- }
- }
-
- Roo.each(this.childForms || [], function (f) {
- f.setValues(values);
- });
-
- return this;
- },
-
- /**
- * 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
- * @return {Object}
- */
- getValues : function(asString){
- if (this.childForms) {
- // copy values from the child forms
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getValues());
- }, this);
- }
-
-
-
- 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.
- * @return {Object}
- */
- getFieldValues : function()
- {
- if (this.childForms) {
- // copy values from the child forms
- Roo.each(this.childForms, function (f) {
- this.setValues(f.getValues());
- }, this);
- }
-
- var ret = {};
- this.items.each(function(f){
- if (!f.getName()) {
- return;
- }
- var v = f.getValue();
- if ((typeof(v) == 'object') && f.getRawValue) {
- v = f.getRawValue() ; // dates..
- }
- ret[f.getName()] = v;
- });
-
- return ret;
- },
-
- /**
- * Clears all invalid messages in this form.
- * @return {BasicForm} this
- */
- clearInvalid : function(){
- this.items.each(function(f){
- f.clearInvalid();
- });
-
- Roo.each(this.childForms || [], function (f) {
- f.clearInvalid();
- });
-
-
- return this;
- },
-
- /**
- * Resets this form.
- * @return {BasicForm} this
- */
- reset : function(){
- this.items.each(function(f){
- f.reset();
- });
-
- Roo.each(this.childForms || [], function (f) {
- f.reset();
- });
-
-
- return this;
- },
-
- /**
- * 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;
- },
-
-
- /**
- * Removes a field from the items collection (does NOT remove its markup).
- * @param {Field} field
- * @return {BasicForm} this
- */
- 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
- */
- 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
- */
- applyToFields : function(o){
- this.items.each(function(f){
- Roo.apply(f, o);
- });
- return this;
- },
-
- /**
- * Calls {@link Ext#applyIf} for all field in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
- */
- applyIfToFields : function(o){
- this.items.each(function(f){
- Roo.applyIf(f, o);
- });
- return this;
- }
-});
-
-// back compat
-Roo.BasicForm = Roo.form.BasicForm;/*
- * 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
- * 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 {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 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 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,
-
- /**
- * 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;
- },
-
- /**
- * 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;
- },
-
- /**
- * 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;
- },
-
- /**
- * Closes the current open container
- * @return {Form} this
- */
- end : function(){
- if(this.active == this.root){
- return this;
- }
- 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]);
- }
- }
- 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;
- }
- Ext.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)
- {
-
-
-
- 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);
- });
-
- 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;
- },
-
- /**
- * 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;
- },
-
- /**
- * 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
- });
- }
- },
-
- /**
- * Stops monitoring of the valid state of this form
- */
- stopMonitoring : function(){
- this.bound = false;
- },
-
- // 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);
- }
-
-
-
-
-
-
-
-
-});
-
-
-// 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.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){
-
- },
-
- // interface method
- handleResponse : function(response){
-
- },
-
- // default connection failure
- failure : function(response){
-
- 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;
- }
- 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;
- }
- }
- 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);
- }
- return p;
- },
-
- 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);
-};
-
-Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
- type : 'submit',
-
- haveProgress : false,
- uploadComplete : false,
-
- // 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();
-
- 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);
- return;
- }
- var data = rdata.data;
-
- 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
- });
-
- },
-
-
- 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()){
-
- 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
- }));
-
- this.uploadProgress();
-
- }else if (o.clientValidation !== false){ // client validation failed
- this.failureType = Roo.form.Action.CLIENT_INVALID;
- this.form.afterAction(this, false);
- }
- },
-
- 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);
- },
- 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);
- },
-
- 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;
- }
- return {
- success : rs.success,
- errors : errors
- };
- }
- var ret = false;
- try {
- ret = Roo.decode(response.responseText);
- } catch (e) {
- ret = {
- success: false,
- errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
- errors : []
- };
- }
- 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);
- 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.
- *
- * 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
- * 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
- * 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]);
- }
- }
- }
- if(this.clear){
- this.el.createChild({cls:'x-form-clear'});
- }
- },
-
- // 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());
- },
- /**
- * 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)
- {
- // 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
- * 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);
- }
- }
-});
-
-
-/**
- * @class Roo.form.Row
- * @extends Roo.form.Layout
- * 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'},
-
- 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;
-
- if ((this.labelAlign != 'top')) {
- if (typeof this.labelWidth == 'number') {
- labelWidth = this.labelWidth
- }
- this.padWidth = 20 + labelWidth;
-
- }
-
- 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
- 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
- * 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.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * 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.
- * @singleton
- */
-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,4}$/;
- var url = /(((https?)|(ftp)):\/\/([\-\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 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.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.
- */
- editorinit : true
- });
-
-
-};
-Roo.form.FCKeditor.editors = { };
-Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
-{
- //defaultAutoCreate : {
- // tag : "textarea",style : "width:100px;height:60px;" ,autocomplete : "off"
- //},
- // private
- /**
- * @cfg {Object} fck options - see fck manual for details.
- */
- fckconfig : false,
-
- /**
- * @cfg {Object} fck toolbar set (Basic or Default)
- */
- toolbarSet : 'Basic',
- /**
- * @cfg {Object} fck BasePath
- */
- basePath : '/fckeditor/',
-
-
- frame : false,
-
- value : '',
-
-
- onRender : function(ct, position)
- {
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:300px;height:60px;",
- autocomplete: "off"
- };
- }
- 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;
- },
- /**
- * 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(value)
- {
- //console.log('setValue: ' + value);
-
- 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);
-
- //
-
- },
-
- /**
- * 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);
- }
-
- if(!this.el || !this.getEditor()) {
-
- // this.getValue.defer(100,this);
- return this.value;
- }
-
-
- var value=this.getEditor().GetData();
- Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
- return Roo.form.FCKeditor.superclass.getValue.call(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()
- {
- 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);
-
- },
-
- 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' : '';
-
- },
-
-
- focus: function(tag)
- {
- 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;
- }
-
-
-
-
- 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 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();
- }
-
- },
-
-
-
- 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 ;
- }
-
- 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" />' ;
- },
-
-
- _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) : '';
-
-
- 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, {
- /**
- * @cfg {Number} width - used to restrict width of grid..
- */
- width : 100,
- /**
- * @cfg {Number} height - used to restrict height of grid..
- */
- height : 50,
- /**
- * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
- *
- *}
- */
- xgrid : 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: 'div' },
- defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
- /**
- * @cfg {String} addTitle Text to include for adding a title.
- */
- addTitle : false,
- //
- onResize : function(){
- Roo.form.Field.superclass.onResize.apply(this, arguments);
- },
-
- initEvents : function(){
- // Roo.form.Checkbox.superclass.initEvents.call(this);
- // has no events...
-
- },
-
-
- getResizeEl : function(){
- return this.wrap;
- },
-
- getPositionEl : function(){
- return this.wrap;
- },
-
- // 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);
- }
- 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
- * 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.
- * @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.extend(Roo.form.DisplayField, Roo.form.TextField, {
- inputType: 'hidden',
- allowBlank: true,
- readOnly: true,
-
-
- /**
- * @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 {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
- */
- valueRenderer: undefined,
-
- width: 100,
- /**
- * @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'},
-
- onResize : function(){
- Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
-
- },
-
- initEvents : function(){
- // Roo.form.Checkbox.superclass.initEvents.call(this);
- // has no events...
-
- },
-
-
- getResizeEl : function(){
- return this.wrap;
- },
-
- getPositionEl : function(){
- return this.wrap;
- },
-
- // private
- onRender : function(ct, position){
-
- 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'});
-
- if (this.bodyStyle) {
- this.viewEl.applyStyles(this.bodyStyle);
- }
- //this.viewEl.setStyle('padding', '2px');
-
- this.setValue(this.value);
-
- },
-/*
- // private
- initValue : Roo.emptyFn,
-
- */
-
- // private
- onClick : function(){
-
- },
-
- /**
- * 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.
- */
- 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);
-
- }
-});//<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>
- *
- */
-
-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.
- */
- 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;
- },
-
-/**
- * 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
-
- });
-// 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
- });
-
-// 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);
- }
- },
-
-/** 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";
- }
- },
-
- 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);
- },
-
- 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;
- },
-
- removeDropIndicators : function(n){
- if(n){
- Roo.fly(n).removeClass([
- "x-view-drag-insert-above",
- "x-view-drag-insert-below"]);
- this.lastInsertClass = "_noclass";
- }
- },
-
-/**
- * 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);
- }
- },
-
- 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());
- }
- },
-
-/**
- * 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);
- }
- },
-
-/**
- * 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));
- }
- }
- }
- },
-
- 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;
- }
- }
- },
-
- 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, {
- /**
- * Returns true if this layout is currently being updated
- * @return {Boolean}
- */
- isUpdating : function(){
- return this.updating;
- },
-
- /**
- * Suspend the LayoutManager from doing auto-layouts while
- * making multiple add or remove calls
- */
- beginUpdate : function(){
- this.updating = true;
- },
-
- /**
- * 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();
- }
- },
-
- 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);
- },
-
- /**
- * 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()};
- }
- 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;
- },
-
- /**
- * 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()];
- },
-
- onWindowResize : function(){
- if(this.monitorWindowResize){
- this.layout();
- }
- }
-});/*
- * 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.BorderLayout
- * @extends Roo.LayoutManager
- * 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
- */
-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.BorderLayout, Roo.LayoutManager, {
- /**
- * 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];
- },
-
- // 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);
- },
-
- /**
- * 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);
- },
-
- // private
- safeBox : function(box){
- box.width = Math.max(0, box.width);
- box.height = Math.max(0, box.height);
- return box;
- },
-
- /**
- * 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
- */
- add : function(target, panel){
-
- target = target.toLowerCase();
- return this.regions[target].add(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
- */
- remove : function(target, panel){
- target = target.toLowerCase();
- return this.regions[target].remove(panel);
- },
-
- /**
- * 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
- */
- 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;
- },
-
- /**
- * 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
- */
- 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
- },
- 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
- 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);
- }
- },
- /**
- * 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..!?!?
- // console.log('BorderLayout add ' + cfg.xtype)
-
- if (!cfg.xtype.match(/Panel$/)) {
- return false;
- }
- var ret = false;
- var region = cfg.region;
- delete cfg.region;
-
-
- var xitems = [];
- if (cfg.items) {
- xitems = cfg.items;
- delete cfg.items;
- }
-
-
- switch(cfg.xtype)
- {
- case 'ContentPanel': // ContentPanel (el, cfg)
- case 'ScrollPanel': // ContentPanel (el, cfg)
- 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);
-
- 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:
- alert("Can not add '" + cfg.xtype + "' to BorderLayout");
- return;
- // GridPanel (grid, cfg)
-
- }
- this.beginUpdate();
- // add children..
- Roo.each(xitems, function(i) {
- ret.addxtype(i);
- });
- this.endUpdate();
- 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})]
- },
- 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);
- }
- }
- layout.endUpdate();
- return layout;
-};
-
-// private
-Roo.BorderLayout.RegionFactory = {
- // private
- validRegions : ["north","south","east","west","center"],
-
- // 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
- */
-
- /**
- * @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 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 || {}
- });
- }
-
- if(skipConfig !== true){
- this.applyConfig(config);
- }
-};
-
-Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
- getPanelId : function(p){
- return p.getId();
- },
-
- applyConfig : function(config){
- this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
- this.config = config;
-
- },
-
- /**
- * 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;
- }
- }
- },
-
- getBox : function(){
- return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
- },
-
- getMargins : function(){
- return this.margins;
- },
-
- 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);
- },
-
- /**
- * Returns the container element for this region.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.activePanel;
- },
-
- /**
- * Returns true if this region is currently visible.
- * @return {Boolean}
- */
- isVisible : function(){
- return this.activePanel ? true : 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);
- }
- this.fireEvent("panelactivated", this, panel);
- this.fireEvent("invalidated");
- },
-
- /**
- * 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
- */
- showPanel : function(panel){
- if(panel = this.getPanel(panel)){
- this.setActivePanel(panel);
- }
- return panel;
- },
-
- /**
- * Get the active panel for this region.
- * @return {Roo.ContentPanel} 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)
- */
- 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;
- }
- 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 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();
- }
- return this.getPanel(panel) ? true : false;
- },
-
- /**
- * 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
- */
- 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;
- },
-
- /**
- * 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}
- */
- getPanel : function(id){
- if(typeof id == "object"){ // must be panel obj
- return id;
- }
- return this.panels.get(id);
- },
-
- /**
- * Returns this regions position (north/south/east/west/center).
- * @return {String}
- */
- getPosition: function(){
- return this.position;
- }
-});/*
- * 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.LayoutRegion
- * @extends Roo.BasicLayoutRegion
- * This class represents a region in a layout manager.
- * @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
- * @cfg {Boolean} collapsed True to set the initial display to collapsed (defaults to false)
- * @cfg {Boolean} floatable False to disable floating (defaults to true)
- * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
- * @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
- * @cfg {String} tabPosition "top" or "bottom" (defaults to "bottom")
- * @cfg {String} collapsedTitle Optional string message to display in the collapsed block of a north or south region
- * @cfg {Boolean} alwaysShowTabs True to always display tabs even when there is only 1 panel (defaults to false)
- * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
- * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
- * @cfg {String} title The title for the region (overrides panel titles)
- * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
- * @cfg {Boolean} autoHide False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
- * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
- * @cfg {Boolean} closeOnTab True to place the close icon on the tabs instead of the region titlebar (defaults to false)
- * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
- * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
- * the space available, similar to FireFox 1.5 tabs (defaults to false)
- * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
- * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
- * @cfg {Boolean} showPin True to show a pin button
-* @cfg {Boolean} hidden True to start the region hidden (defaults to false)
-* @cfg {Boolean} hideWhenEmpty True to hide the region when it has no panels
-* @cfg {Boolean} disableTabTips True to disable tab tooltips
-* @cfg {Number} width For East/West panels
-* @cfg {Number} height For North/South panels
-* @cfg {Boolean} split To show the splitter
- */
-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);
- }
- this.applyConfig(config);
-};
-
-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();
-
- 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);
- }
- 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;
- },
-
- /**
- * 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;
- }
- },
-
- getBox : function(){
- var b;
- if(!this.collapsed){
- b = this.el.getBox(false, true);
- }else{
- b = this.collapsedEl.getBox(false, true);
- }
- return b;
- },
-
- getMargins : function(){
- return this.collapsed ? this.cmargins : this.margins;
- },
-
- highlight : function(){
- this.el.addClass("x-layout-panel-dragover");
- },
-
- unhighlight : function(){
- this.el.removeClass("x-layout-panel-dragover");
- },
-
- 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();
- }
- },
-
- 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();
- }
- },
-
- /**
- * Returns the container element for this region.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
- },
-
- /**
- * 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);
- },
-
- /**
- * 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);
- },
-
- closeClicked : function(){
- if(this.activePanel){
- this.remove(this.activePanel);
- }
- },
-
- collapseClick : function(e){
- if(this.isSlid){
- e.stopPropagation();
- this.slideIn();
- }else{
- e.stopPropagation();
- this.slideOut();
- }
- },
-
- /**
- * Collapses this region.
- * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
- */
- collapse : function(skipAnim){
- if(this.collapsed) return;
- 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);
- }
- },
-
- animateCollapse : function(){
- // overridden
- },
-
- /**
- * 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);
- }
- },
-
- animateExpand : function(){
- // overridden
- },
-
- initTabs : function(){
- this.bodyEl.setStyle("overflow", "hidden");
- var ts = new Roo.TabPanel(this.bodyEl.dom, {
- tabPosition: this.bottomTabs ? 'bottom' : 'top',
- disableTooltips: this.config.disableTabTips
- });
- 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(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);
- }
- }
- },
-
- 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);
- },
-
- /**
- * 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
- */
- showPanel : function(panel){
- if(panel = this.getPanel(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;
- },
-
- /**
- * Get the active panel for this region.
- * @return {Roo.ContentPanel} The active panel or null
- */
- 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();
- }
- }
- },
-
- /**
- * 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)
- */
- 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;
- },
-
- /**
- * 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);
- }
- },
-
- /**
- * Unhides the tab for a previously hidden panel.
- * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
- */
- 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());
- }
- },
-
- /**
- * 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
- */
- 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;
- },
-
- /**
- * Returns the TabPanel component used by this region
- * @return {Roo.TabPanel}
- */
- getTabs : function(){
- return this.tabs;
- },
-
- 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);
- },
-
- /**
- * Returns the {@link Roo.SplitBar} for this region.
- * @return {Roo.SplitBar}
- */
- getSplitBar : function(){
- return this.split;
- },
-
- 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);
- },
-
- 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();
- }
- }
- }
- },
-
- 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
- });
- },
-
- 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
- });
- },
-
- 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];
- },
-
- 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
- },
-
- show : function(){
- // center panel can't be hidden
- },
-
- getMinWidth: function(){
- return this.minWidth;
- },
-
- 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;
- },
-
- 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);
- }
-});
-
-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);
- }
-});
-
-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;
- },
-
- 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);
- }
-});
-
-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);
- }
- 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;
- }
- 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();
- }
-};/*
- * 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.ContentPanel
- * @extends Roo.util.Observable
- * A basic ContentPanel element.
- * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
- * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
- * @cfg {Boolean/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 {Toolbar} toolbar A toolbar for this panel
- * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
- * @cfg {String} title The title for this panel
- * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
- * @cfg {String} url Calls {@link #setUrl} with this value
- * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
- * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
- * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
- * @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)
- */
-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 = new Roo.Toolbar(this.el.insertSibling(false, 'before'), [] , this.toolbar);
-
- }
-
-
-
- if(this.resizeEl){
- this.resizeEl = Roo.get(this.resizeEl, true);
- }else{
- this.resizeEl = this.el;
- }
- this.addEvents({
- /**
- * @event activate
- * Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
- */
- "activate" : true,
- /**
- * @event deactivate
- * Fires when this panel is activated.
- * @param {Roo.ContentPanel} this
- */
- "deactivate" : 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
- */
- "resize" : true
- });
- if(this.autoScroll){
- this.resizeEl.setStyle("overflow", "auto");
- } else {
- // fix randome scrolling
- this.el.on('scroll', function() {
- 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.ContentPanel.superclass.constructor.call(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");
- }
- },
-
- /**
- * 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.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
- */
- 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){
- 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.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;
- },
-
- /**
- * 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) {
- // add form..
- if (cfg.xtype.match(/^Form$/)) {
- var el = this.el.createChild();
-
- this.form = new Roo.form.Form(cfg);
-
-
- if ( this.form.allItems.length) this.form.render(el.dom);
- return this.form;
- }
- if (['View', 'JsonView'].indexOf(cfg.xtype) > -1) {
- // views..
- cfg.el = this.el.appendChild(document.createElement("div"));
- // factory?
- var ret = new Roo[cfg.xtype](cfg);
- ret.render(false, ''); // render blank..
- return ret;
-
- }
- return false;
-
- }
-});
-
-/**
- * @class Roo.GridPanel
- * @extends Roo.ContentPanel
- * @constructor
- * Create a new GridPanel.
- * @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
- */
-Roo.GridPanel = function(grid, config){
-
-
- 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;
- },
-
- /**
- * 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();
- }
- },
-
- 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);
- }
-});
-
-
-/**
- * @class Roo.NestedLayoutPanel
- * @extends Roo.ContentPanel
- * @constructor
- * Create a new NestedLayoutPanel.
- *
- *
- * @param {Roo.BorderLayout} layout 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)
-{
- // 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.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");
-
-
-
-
-};
-
-Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
-
- 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..
-
- 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>
-
-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.
- */
- 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});
- },
-
- 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(content, loadScripts){
- this.resizeEl.update(content, loadScripts);
- }
-
-});
-
-
-
-
-
-
-
-
-
-/**
- * @class Roo.TreePanel
- * @extends Roo.ContentPanel
- * @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
- * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
- */
-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;
- }
- //console.log('render tree');
- this.tree.render();
- });
-
- 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
-});
-
-
-
-
-
-
-
-
-
-
-
-/*
- * 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)
- });
-
- this.el.addClass('x-reader');
-
- this.beginUpdate();
-
- 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)));
-
- this.endUpdate();
-
- this.regions.preview = inner.getRegion('south');
- this.regions.listView = inner.getRegion('center');
-};
-
-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');
-
- this.id = this.container.id;
-
- 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;
- }
-
- 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);
- }
-
- 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
-
- /**
- * @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,
-
- /**
- * @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, {
-
- /**
- * @cfg {String} ddGroup - drag drop group.
- */
-
- /**
- * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
- */
- minColumnWidth : 25,
-
- /**
- * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
- * <b>on initial render.</b> It is more efficient to explicitly size the columns
- * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option. Default is false.
- */
- autoSizeColumns : false,
-
- /**
- * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
- */
- autoSizeHeaders : true,
-
- /**
- * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
- */
- monitorWindowResize : true,
-
- /**
- * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
- * rows measured to get a columns size. Default is 0 (all rows).
- */
- maxRowsToMeasure : 0,
-
- /**
- * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
- */
- trackMouseOver : true,
-
- /**
- * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
- */
-
- /**
- * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
- */
- enableDragDrop : false,
-
- /**
- * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
- */
- enableColumnMove : true,
-
- /**
- * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
- */
- enableColumnHide : true,
-
- /**
- * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
- */
- enableRowHeightSync : false,
-
- /**
- * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
- */
- stripeRows : true,
-
- /**
- * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
- */
- autoHeight : false,
-
- /**
- * @cfg {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,
-
- /**
- * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
- * Default is 50.
- */
- autoExpandMin : 50,
-
- /**
- * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
- */
- autoExpandMax : 1000,
-
- /**
- * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
- */
- view : null,
-
- /**
- * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
- */
- loadMask : false,
- /**
- * @cfg {Roo.dd.DropTarget} dragTarget An {@link Roo.dd.DragTarget} config
- */
- dropTarget: false,
- // private
- rendered : false,
-
- /**
- * @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.
- */
- /**
- * 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);
-
- c.on("click", this.onClick, this);
- c.on("dblclick", this.onDblClick, this);
- c.on("contextmenu", this.onContextMenu, this);
- c.on("keydown", this.onKeyDown, this);
-
- this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
-
- this.getSelectionModel().init(this);
-
- view.render();
-
- if(this.loadMask){
- this.loadMask = new Roo.LoadMask(this.container,
- Roo.apply({store:this.dataSource}, this.loadMask));
- }
-
-
- if (this.toolbar && this.toolbar.xtype) {
- this.toolbar.container = this.getView().getHeaderPanel(true);
- this.toolbar = new Ext.Toolbar(this.toolbar);
- }
- 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);
- }
- if (this.dropTarget && this.dropTarget.xtype) {
- delete this.dropTarget.xtype;
- this.dropTarget = new Ext.dd.DropTarget(this.getView().mainBody, this.dropTarget);
- }
-
-
- this.rendered = true;
- this.fireEvent('render', this);
- return this;
- },
-
- /**
- * 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);
- },
-
- // private
- onKeyDown : function(e){
- this.fireEvent("keydown", e);
- },
-
- /**
- * Destroy this grid.
- * @param {Boolean} removeEl True to remove the element
- */
- 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();
- }
- },
-
- // private
- processEvent : function(name, e){
- this.fireEvent(name, e);
- var t = e.getTarget();
- var v = this.view;
- var header = v.findHeaderIndex(t);
- if(header !== false){
- this.fireEvent("header" + name, this, header, e);
- }else{
- var row = v.findRowIndex(t);
- var cell = v.findCellIndex(t);
- if(row !== false){
- this.fireEvent("row" + name, this, row, e);
- if(cell !== false){
- this.fireEvent("cell" + name, this, row, cell, e);
- }
- }
- }
- },
-
- // private
- onClick : function(e){
- this.processEvent("click", e);
- },
-
- // private
- onContextMenu : function(e, t){
- this.processEvent("contextmenu", e);
- },
-
- // private
- onDblClick : function(e){
- this.processEvent("dblclick", e);
- },
-
- // 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++;
- }
- }
- 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.
- */
- autoSize : function(){
- if(this.rendered){
- this.view.layout();
- if(this.view.adjustForScroll){
- this.view.adjustForScroll();
- }
- }
- },
-
- /**
- * Returns the grid's underlying element.
- * @return {Element} The element
- */
- getGridEl : function(){
- return this.container;
- },
-
- // private for compatibility, overridden by editor grid
- stopEditing : function(){},
-
- /**
- * Returns the grid's SelectionModel.
- * @return {SelectionModel}
- */
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.grid.RowSelectionModel();
- }
- return this.selModel;
- },
-
- /**
- * Returns the grid's DataSource.
- * @return {DataSource}
- */
- getDataSource : function(){
- return this.dataSource;
- },
-
- /**
- * Returns the grid's ColumnModel.
- * @return {ColumnModel}
- */
- getColumnModel : function(){
- return this.colModel;
- },
-
- /**
- * Returns the grid's GridView object.
- * @return {GridView}
- */
- getView : function(){
- if(!this.view){
- this.view = new Roo.grid.GridView(this.viewConfig);
- }
- return this.view;
- },
- /**
- * Called to get grid's drag proxy text, by default returns this.ddText.
- * @return {String}
- */
- getDragDropText : function(){
- var count = this.selModel.getCount();
- return String.format(this.ddText, count, count == 1 ? '' : 's');
- }
-});
-/**
- * Configures the text is the drag proxy (defaults to "%0 selected row(s)").
- * %0 is replaced with the number of selected rows.
- * @type String
- */
-Roo.grid.Grid.prototype.ddText = "{0} selected row{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">
- */
-
-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++){
- renderers[i] = cm.getRenderer(i);
- }
- 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];
- },
-
- /**
- * 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
- */
- 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");
- }
- 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};
- }
- return false;
- },
-
- 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;
- },
-
- afterValidDrop : function(){
- var v = this.view;
- setTimeout(function(){
- v.headersDisabled = false;
- }, 50);
- },
-
- 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,
-
- getTargetFromEvent : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var cindex = this.view.findCellIndex(t);
- if(cindex !== false){
- return this.view.getHeaderCell(cindex);
- }
- },
-
- nextVisible : function(h){
- var v = this.view, cm = this.grid.colModel;
- h = h.nextSibling;
- while(h){
- if(!cm.isHidden(v.getCellIndex(h))){
- return h;
- }
- h = h.nextSibling;
- }
- 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);
-
- 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;
- }
- 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);
-};
-
-Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
-
- /**
- * Override this function to apply custom css classes to rows during rendering
- * @param {Record} record The record
- * @param {Number} index
- * @method getRowClass
- */
- rowClass : "x-grid-row",
-
- cellClass : "x-grid-col",
-
- tdClass : "x-grid-td",
-
- hdClass : "x-grid-hd",
-
- splitClass : "x-grid-split",
-
- sortClasses : ["sort-asc", "sort-desc"],
-
- enableMoveAnim : false,
-
- hlColor: "C3DAF9",
-
- dh : Roo.DomHelper,
-
- fly : Roo.Element.fly,
-
- css : Roo.util.CSS,
-
- borderWidth: 1,
-
- 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;
- },
-
- init: function(grid){
- Roo.grid.GridView.superclass.init.call(this, grid);
-
- this.bind(grid.dataSource, grid.colModel);
-
- 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;
-
- var tpls = this.templates || {};
-
- if(!tpls.master){
- tpls.master = new Roo.Template(
- '<div class="x-grid" hidefocus="true">',
- '<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>',
- '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
- '<div class="x-grid-resize-proxy"> </div>',
- "</div>"
- );
- tpls.master.disableformats = true;
- }
-
- 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();
-
- 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" unselectable="on">{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
- "</div></td>"
- );
- tpls.hcell.disableFormats = true;
- }
- tpls.hcell.compile();
-
- if(!tpls.hsplit){
- tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style}" unselectable="on"> </div>');
- tpls.hsplit.disableFormats = true;
- }
- tpls.hsplit.compile();
-
- 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(!tpls.row){
- tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
- tpls.row.disableFormats = true;
- }
- tpls.row.compile();
-
- 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" unselectable="on" {attr}>{value}</div></div>',
- "</td>"
- );
- tpls.cell.disableFormats = true;
- }
- tpls.cell.compile();
-
- this.templates = tpls;
- },
-
- // 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);
- },
-
- onDataChange : function(){
- this.refresh();
- this.updateHeaderSortState();
- },
-
- onClear : function(){
- this.refresh();
- },
-
- onUpdate : function(ds, record){
- this.refreshRow(record);
- },
-
- 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);
- },
-
- onAdd : function(ds, records, index){
- this.insertRows(ds, index, index + (records.length-1));
- },
-
- 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);
- }
- },
-
- onLoad : function(){
- this.scrollToTop();
- },
-
- /**
- * Scrolls the grid to the top
- */
- 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
- */
- getHeaderPanel : function(doShow){
- if(doShow){
- this.headerPanel.show();
- }
- return this.headerPanel;
- },
-
- /**
- * 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;
- },
-
- initElements : function(){
- var E = Roo.Element;
- var el = this.grid.getGridEl().dom.firstChild;
- var cs = el.childNodes;
-
- this.el = new E(el);
- this.headerPanel = new E(el.firstChild);
- this.headerPanel.enableDisplayMode("block");
-
- this.scroller = new E(cs[1]);
- this.scrollSizer = new E(this.scroller.dom.firstChild);
-
- this.lockedWrap = new E(cs[2]);
- this.lockedHd = new E(this.lockedWrap.dom.firstChild);
- this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
-
- this.mainWrap = new E(cs[3]);
- this.mainHd = new E(this.mainWrap.dom.firstChild);
- this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
-
- this.footerPanel = new E(cs[4]);
- this.footerPanel.enableDisplayMode("block");
-
- this.focusEl = new E(cs[5]);
- this.focusEl.swallowEvent("click", true);
- 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];
- },
-
- 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;
- },
-
- 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");
- }
- },
-
- 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");
- }
- },
-
- 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.title = cm.getColumnTooltip(i) || "";
- p.value = cm.getColumnHeader(i) || "";
- 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("")})];
- },
-
- updateHeaders : function(){
- var html = this.renderHeaders();
- this.lockedHd.update(html[0]);
- this.mainHd.update(html[1]);
- },
-
- /**
- * Focuses the specified row.
- * @param {Number} row The row index
- */
- focusRow : function(row){
- var x = this.scroller.dom.scrollLeft;
- this.focusCell(row, 0, false);
- this.scroller.dom.scrollLeft = x;
- },
-
- /**
- * Focuses the specified cell.
- * @param {Number} row The row index
- * @param {Number} col The column index
- * @param {Boolean} hscroll false to disable horizontal scrolling
- */
- focusCell : function(row, col, hscroll){
- 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);
- }
- },
-
- /**
- * 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){
- if(typeof row != "number"){
- row = row.rowIndex;
- }
- if(row < 0 && row >= this.ds.getCount()){
- return;
- }
- col = (col !== undefined ? col : 0);
- var cm = this.grid.colModel;
- while(cm.isHidden(col)){
- col++;
- }
-
- var el = this.getCell(row, col);
- if(!el){
- return;
- }
- 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;
-
- if(ctop < stop){
- c.scrollTop = ctop;
- }else if(cbot > sbot){
- c.scrollTop = cbot-ch;
- }
-
- if(hscroll !== false){
- if(cleft < sleft){
- c.scrollLeft = cleft;
- }else if(cright > sright){
- c.scrollLeft = cright-c.clientWidth;
- }
- }
- return el;
- },
-
- 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();
- },
-
- 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);
- },
-
- 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";
- }
- }
- },
-
- handleHiddenChange : function(colModel, colIndex, hidden){
- if(hidden){
- this.hideColumn(colIndex);
- }else{
- this.unhideColumn(colIndex);
- }
- },
-
- 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();
- },
-
- 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();
- }
- 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();
- }
- }
- },
-
- bufferRows : function(markup, target, index){
- var before = null, trows = target.rows, tbody = target.tBodies[0];
- if(index < trows.length){
- before = trows[index];
- }
- 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;
- },
-
- 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);
- }
- },
-
- updateRows : function(dataSource, firstRow, lastRow){
- var s = this.getScrollState();
- this.refresh();
- this.restoreScroll(s);
- },
-
- handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
- if(!noRefresh){
- this.refresh();
- }
- this.updateHeaderSortState();
- },
-
- getScrollState : function(){
- var sb = this.scroller.dom;
- return {left: sb.scrollLeft, top: sb.scrollTop};
- },
-
- 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;
- }
- }
- },
-
- restoreScroll : function(state){
- var sb = this.scroller.dom;
- sb.scrollLeft = state.left;
- sb.scrollTop = state.top;
- this.syncScroll();
- },
-
- syncScroll : function(){
- 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 ["", ""];
- }
-
- // 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)
- };
- }
-
- 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);
- },
-
- // 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(r.dirty && typeof r.modified[c.name] !== 'undefined'){
- p.css += p.css ? ' x-grid-dirty-cell' : '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 = " ";
- if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
- p.css += p.css ? ' x-grid-dirty-cell' : '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]})];
- },
-
- /**
- * Refreshes the grid
- * @param {Boolean} headersToo
- */
- 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);
- },
-
- handleColumnMove : function(cm, oldIndex, newIndex){
- this.indexMap = null;
- var s = this.getScrollState();
- this.refresh(true);
- this.restoreScroll(s);
- this.afterMove(newIndex);
- },
-
- afterMove : function(colIndex){
- if(this.enableMoveAnim && Roo.enableFx){
- this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
- }
- },
-
- 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);
-
- 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);
- },
-
- 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;
- },
- /**
- * Autofit a column to its content.
- * @param {Number} colIndex
- * @param {Boolean} forceMinSize true to force the column to go smaller if possible
- */
- 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);
- }
- },
-
- /**
- * Autofits all columns to their content and then expands to fit any extra space in the grid
- */
- 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();
- }
- },
-
- /**
- * Autofits all columns to the grid's width proportionate with their current size
- * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
- */
- 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;
- }
- 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.updateColumns();
- this.layout();
- },
-
- onRowSelect : function(rowIndex){
- var row = this.getRowComposite(rowIndex);
- row.addClass("x-grid-row-selected");
- },
-
- onRowDeselect : function(rowIndex){
- var row = this.getRowComposite(rowIndex);
- row.removeClass("x-grid-row-selected");
- },
-
- onCellSelect : function(row, col){
- var cell = this.getCell(row, col);
- if(cell){
- Roo.fly(cell).addClass("x-grid-cell-selected");
- }
- },
-
- onCellDeselect : function(row, col){
- var cell = this.getCell(row, col);
- if(cell){
- Roo.fly(cell).removeClass("x-grid-cell-selected");
- }
- },
-
- updateHeaderSortState : function(){
- var state = this.ds.getSortState();
- if(!state){
- return;
- }
- this.sortState = state;
- var sortColumn = this.cm.findColumnIndex(state.field);
- if(sortColumn != -1){
- var sortDir = state.direction;
- var sc = this.sortClasses;
- var hds = this.el.select(this.headerSelector).removeClass(sc);
- hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
- }
- },
-
- handleHeaderClick : function(g, index){
- if(this.headersDisabled){
- return;
- }
- var dm = g.dataSource, cm = g.colModel;
- if(!cm.isSortable(index)){
- return;
- }
- g.stopEditing();
- dm.sort(cm.getDataIndex(index));
- },
-
-
- destroy : function(){
- if(this.colMenu){
- this.colMenu.removeAll();
- Roo.menu.MenuMgr.unregister(this.colMenu);
- this.colMenu.getEl().remove();
- delete this.colMenu;
- }
- 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();
- }
- if(Roo.dd.DDM.locationCache[dd]){
- delete Roo.dd.DDM.locationCache[dd];
- }
- }
- 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);
- },
-
- handleLockChange : function(){
- this.refresh(true);
- },
-
- onDenyColumnLock : function(){
-
- },
-
- onDenyColumnHide : function(){
-
- },
-
- 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;
- 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;
- },
-
- beforeColMenuShow : function(){
- var cm = this.cm, colCount = cm.getColumnCount();
- this.colMenu.removeAll();
- for(var i = 0; i < colCount; i++){
- this.colMenu.add(new Roo.menu.CheckItem({
- id: "col-"+cm.getColumnId(i),
- text: cm.getColumnHeader(i),
- checked: !cm.isHidden(i),
- hideOnClick:false
- }));
- }
- },
-
- 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");
- },
-
- 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");
- }
- }
- },
-
- handleHdOut : function(e){
- var hd = this.findHeaderCell(e.getTarget());
- if(hd){
- this.fly(hd).removeClass("x-grid-hd-over");
- }
- },
-
- 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();
- }
- },
-
- 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]
- });
-
- //this.updateColumns();
-
- 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);
-
- 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});
-
- if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
- new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
- }
-
- this.updateSplitters();
-
- 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(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(this.grid.enableColumnHide !== false){
-
- 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.hmenu.on("itemclick", this.handleHdMenuClick, this);
-
- this.grid.on("headercontextmenu", this.handleHdCtx, this);
- }
-
- if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
- this.dd = new Roo.grid.GridDragZone(this.grid, {
- ddGroup : this.grid.ddGroup || 'GridDD'
- });
- }
-
- /*
- 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();
-
- this.beforeInitialResize();
- this.layout(true);
-
- // two part rendering gives faster view to the user
- this.renderPhase2.defer(1, this);
- },
-
- renderPhase2 : function(){
- // render the rows now
- this.refresh();
- if(this.grid.autoSizeColumns){
- this.autoSizeColumns();
- }
- },
-
- 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";
- }
- }
- },
-
- 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;
- }
-
- 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);
- }
-
- if(g.autoWidth){
- c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
- }
-
- var s = this.scroller;
-
- var csize = c.getSize(true);
-
- this.el.setSize(csize.width, csize.height);
-
- this.headerPanel.setWidth(csize.width);
- this.footerPanel.setWidth(csize.width);
-
- var hdHeight = this.mainHd.getHeight();
- var vw = csize.width;
- var vh = csize.height - (tbh + bbh);
-
- s.setSize(vw, vh);
-
- var bt = this.getBodyTable();
- 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);
-
- 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);
- }
- }
-
- if(initialRender){
- lw.show();
- mw.show();
- }
- //c.endMeasure();
- }, 10);
- },
-
- onWindowResize : function(){
- if(!this.grid.monitorWindowResize || this.grid.autoHeight){
- return;
- }
- this.layout();
- },
-
- appendFooter : function(parentEl){
- return null;
- },
-
- sortAscText : "Sort Ascending",
- sortDescText : "Sort Descending",
- lockText : "Lock Column",
- unlockText : "Unlock Column",
- columnsText : "Columns"
-});
-
-
-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');
-};
-
-Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
- handleMouseDown : function(e){
-
- },
-
- 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">
- */
-
-// 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,
- "gridSplitters" + this.grid.getGridEl().id, {
- dragElId : Roo.id(this.proxy.dom), resizeFrame:false
- });
- this.setHandleElId(Roo.id(hd));
- 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;
- this.proxy.setHeight(this.view.mainWrap.getHeight());
- var w = this.cm.getColumnWidth(this.cellIndex);
- 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;
- 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);
- }
- }
- },
-
- endDrag : function(e){
- this.view.headersDisabled = false;
- var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
- var diff = endX - this.startPos;
- this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
- },
-
- 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';
-};
-
-Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
- ddGroup : "GridDD",
-
- getDragData : function(e){
- var t = Roo.lib.Event.getTarget(e);
- var rowIndex = this.view.findRowIndex(t);
- if(rowIndex !== false){
- var sm = this.grid.selModel;
- //if(!sm.isSelected(rowIndex) || e.hasModifier()){
- // sm.mouseDown(e, t);
- //}
- if (e.hasModifier()){
- sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
- }
- return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
- }
- 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;
- },
-
- 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
- * 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++){
- var c = config[i];
- 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();
- }
- 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;
- }
-
- /**
- * 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 The header text to display in the Grid view.
- */
- /**
- * @cfg {String} dataIndex (Optional) 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 (Optional) The initial width in pixels of the column. Using this
- * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
- */
- /**
- * @cfg {Boolean} sortable (Optional) 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 (Optional) True to lock the column in place while scrolling the Grid. Defaults to false.
- */
- /**
- * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed. Defaults to false.
- */
- /**
- * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
- */
- /**
- * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
- */
- /**
- * @cfg {Function} renderer (Optional) 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 uses the raw data value.
- */
- /**
- * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor
- */
- /**
- * @cfg {String} align (Optional) Set the CSS text-align property of the column. Defaults to undefined.
- */
-
- /**
- * 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];
- },
-
-
- /**
- * Returns the column 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;
- },
-
- /**
- * 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;
- },
-
- 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;
- }
- }
- },
-
- /**
- * 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;
- }
- return this.config.length;
- },
-
- /**
- * 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;
- },
-
- /**
- * 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;
- },
-
- /**
- * 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 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;
- },
-
- /**
- * Returns the width for the specified column.
- * @param {Number} col The column index
- * @return {Number}
- */
- getColumnWidth : function(col){
- return this.config[col].width * 1 || this.defaultWidth;
- },
-
- /**
- * 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);
- }
- },
-
- /**
- * 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;
- },
-
- /**
- * Returns the header for the specified column.
- * @param {Number} col The column index
- * @return {String}
- */
- getColumnHeader : function(col){
- return this.config[col].header;
- },
-
- /**
- * 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);
- },
-
- /**
- * 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;
- },
-
- /**
- * Returns the dataIndex for the specified column.
- * @param {Number} col The column index
- * @return {Number}
- */
- getDataIndex : function(col){
- return this.config[col].dataIndex;
- },
-
- /**
- * 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;
- },
-
-
-
- /**
- * Returns true if the cell is editable.
- * @param {Number} colIndex The column index
- * @param {Number} rowIndex The row index
- * @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){
- return this.config[colIndex].editor;
- },
-
- /**
- * 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;
- },
-
-
- /**
- * Returns true if the column is hidden.
- * @param {Number} colIndex The column index
- * @return {Boolean}
- */
- isHidden : function(colIndex){
- return this.config[colIndex].hidden;
- },
-
-
- /**
- * Returns true if the column width cannot be changed
- */
- isFixed : function(colIndex){
- return this.config[colIndex].fixed;
- },
-
- /**
- * Returns true if the column can be resized
- * @return {Boolean}
- */
- isResizable : function(colIndex){
- return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
- },
- /**
- * Sets if a column is hidden.
- * @param {Number} colIndex The column index
- * @param {Boolean} hidden True if the column is hidden
- */
- setHidden : function(colIndex, hidden){
- this.config[colIndex].hidden = hidden;
- this.totalWidth = null;
- this.fireEvent("hiddenchange", this, colIndex, hidden);
- },
-
- /**
- * 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;
- }
-});
-
-Roo.grid.ColumnModel.defaultRenderer = function(value){
- if(typeof value == "string" && value.length < 1){
- return " ";
- }
- return 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 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);
-};
-
-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 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,
-
- // 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);
- }
-
- 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);
- this.grid.getView().focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
- }
- }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);
- this.grid.getView().focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
- }
- }else{
- this.selectFirstRow();
- }
- this.fireEvent("afterselectionchange", this);
- },
- scope: this
- });
-
- var view = this.grid.view;
- 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.dataSource, i, v = this.grid.view;
- var s = this.selections;
- s.each(function(r){
- if((i = ds.indexOfId(r.id)) != -1){
- v.onRowSelect(i);
- }else{
- s.remove(r);
- }
- });
- },
-
- // private
- onRemove : function(v, index, r){
- this.selections.remove(r);
- },
-
- // private
- onRowUpdated : function(v, index, r){
- if(this.isSelected(r)){
- v.onRowSelect(index);
- }
- },
-
- /**
- * 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();
- }
- var ds = this.grid.dataSource;
- for(var i = 0, len = records.length; i < len; i++){
- this.selectRow(ds.indexOf(records[i]), true);
- }
- },
-
- /**
- * Gets the number of selected rows.
- * @return {Number}
- */
- getCount : function(){
- return this.selections.length;
- },
-
- /**
- * 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.dataSource.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.dataSource.getCount()){
- this.selectRow(this.last+1, keepExisting);
- this.grid.getView().focusRow(this.last);
- }
- },
-
- /**
- * 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);
- this.grid.getView().focusRow(this.last);
- }
- },
-
- /**
- * 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.dataSource;
- 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.dataSource.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.dataSource.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.getView(), 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);
- 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);
- }
- },
-
- /**
- * 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();
- }
- 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);
- }
- }
- },
-
- /**
- * 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);
- }
- },
-
- /**
- * 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.dataSource.getCount())) return;
- if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
- if(!keepExisting || this.singleSelect){
- this.clearSelections();
- }
- var r = this.grid.dataSource.getAt(index);
- this.selections.add(r);
- this.last = this.lastActive = index;
- if(!preventViewNotify){
- this.grid.getView().onRowSelect(index);
- }
- 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) return;
- if(this.last == index){
- this.last = false;
- }
- if(this.lastActive == index){
- this.lastActive = false;
- }
- var r = this.grid.dataSource.getAt(index);
- this.selections.remove(r);
- if(!preventViewNotify){
- this.grid.getView().onRowDeselect(index);
- }
- this.fireEvent("rowdeselect", this, index);
- this.fireEvent("selectionchange", this);
- },
-
- // private
- restoreLast : function(){
- if(this._last){
- this.last = this._last;
- }
- },
-
- // private
- acceptsNav : function(row, col, cm){
- return !cm.isHidden(col) && cm.isCellEditable(col, row);
- },
-
- // 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);
- }
- }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.
- */
-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
- });
- Roo.grid.CellSelectionModel.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel, {
-
- /** @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);
- }
- },
-
- //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]);
- }
- },
-
- //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);
- }
- },
-
- /**
- * 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);
- }
- },
-
- /**
- * 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);
- }
- },
-
- //private
- isSelectable : function(rowIndex, colIndex, cm){
- return !cm.isHidden(colIndex);
- },
-
- /** @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;
-
- 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();
- }
- },
-
- acceptsNav : function(row, col, cm){
- return !cm.isHidden(col) && cm.isCellEditable(col, row);
- },
-
- onEditorKey : function(field, e){
-
- var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
- ///Roo.log('onEditorKey' + k);
-
- 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);
- }
- 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){
- //Roo.log('next cell after edit');
- g.startEditing.defer(100, g, [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.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();
- }
-
- 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.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);
- },
-
- 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
- };
- 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);
- },
-
- /**
- * 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 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();
- (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);
- }
- }
- },
-
- /**
- * Stops any active editing
- */
- stopEditing : function(){
- if(this.activeEditor){
- this.activeEditor.completeEdit();
- }
- this.activeEditor = 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">
- */
-
-// 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, {
-
- /**
- * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
- */
-
- 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);
- },
-
- 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, {
-
- /**
- * @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);
- },
-
- autoSize : function(){
- Roo.grid.PropertyGrid.superclass.autoSize.call(this);
- if(this.view){
- this.view.fitColumns();
- }
- },
-
- 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.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.onLoad, 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.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.
- */
- /**
- * @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',
-
- /**
- * 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;
- },
-
- /**
- * Enables the mask so that it can be displayed
- */
- enable : function(){
- this.disabled = false;
- },
-
- // private
- onLoad : function(){
- this.el.unmask(this.removeMask);
- },
-
- // private
- onBeforeLoad : function(){
- if(!this.disabled){
- this.el.mask(this.msg, this.msgCls);
- }
- },
-
- // 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.onLoad, 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);
- }
- }
-};/*
- * 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.XTemplate = function(){
- Roo.XTemplate.superclass.constructor.apply(this, arguments);
- var s = this.html;
-
- s = ['<tpl>', s, '</tpl>'].join('');
-
- var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/;
-
- var nameRe = /^<tpl\b[^>]*?for="(.*?)"/;
- var ifRe = /^<tpl\b[^>]*?if="(.*?)"/;
- var execRe = /^<tpl\b[^>]*?exec="(.*?)"/;
- var m, id = 0;
- var tpls = [];
-
- while(m = s.match(re)){
- var m2 = m[0].match(nameRe);
- var m3 = m[0].match(ifRe);
- var m4 = m[0].match(execRe);
- var exp = null, fn = null, exec = null;
- var name = m2 && m2[1] ? m2[1] : '';
- if(m3){
- exp = m3 && m3[1] ? m3[1] : null;
- if(exp){
- fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
- }
- }
- if(m4){
- exp = m4 && m4[1] ? m4[1] : null;
- if(exp){
- exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
- }
- }
- if(name){
- 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+'; }');
- }
- }
- tpls.push({
- id: id,
- target: name,
- exec: exec,
- test: fn,
- body: m[1]||''
- });
- s = s.replace(m[0], '{xtpl'+ id + '}');
- ++id;
- }
- for(var i = tpls.length-1; i >= 0; --i){
- this.compileTpl(tpls[i]);
- }
- this.master = tpls[tpls.length-1];
- this.tpls = tpls;
-};
-Roo.extend(Roo.XTemplate, Roo.Template, {
-
- re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
-
- applySubTemplate : function(id, values, parent){
- var t = this.tpls[id];
- if(t.test && !t.test.call(this, values, parent)){
- return '';
- }
- if(t.exec && t.exec.call(this, values, parent)){
- return '';
- }
- 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);
- },
-
- compileTpl : function(tpl){
- var fm = Roo.util.Format;
- var useF = this.disableFormats !== true;
- var sep = Roo.isGecko ? "+" : ",";
- var fn = function(m, name, format, args){
- if(name.substr(0, 4) == 'xtpl'){
- return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
- }
- var v;
- if(name.indexOf('.') != -1){
- v = name;
- }else{
- v = "values['" + name + "']";
- }
- if(format && useF){
- args = args ? ',' + args : "";
- if(format.substr(0, 5) != "this."){
- format = "fm." + format + '(';
- }else{
- format = 'this.call("'+ format.substr(5) + '", ';
- args = ", values";
- }
- }else{
- args= ''; format = "("+v+" === undefined ? '' : ";
- }
- return "'"+ sep + format + v + args + ")"+sep+"'";
- };
- var body;
- // branched to use + in gecko and [].join() in others
- if(Roo.isGecko){
- body = "tpl.compiled = function(values, parent){ return '" +
- tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
- "';};";
- }else{
- body = ["tpl.compiled = function(values, parent){ return ['"];
- body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
- body.push("'].join('');};");
- body = body.join('');
- }
- /** eval:var:zzzzzzz */
- 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);
- },
-
- compile : function(){return this;}
-});
-
-Roo.XTemplate.from = function(el){
- el = Roo.getDom(el);
- return new Roo.XTemplate(el.value || el.innerHTML);
-};/*
- * Original code for Roojs - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.XComponent
- * A delayed Element creator...
- *
- * Mypart.xyx = new Roo.XComponent({
-
- parent : 'Mypart.xyz', // empty == document.element.!!
- order : '001',
- name : 'xxxx'
- region : 'xxxx'
- disabled : function() {}
-
- tree : function() { // return an tree of xtype declared components
- var MODULE = this;
- return
- {
- xtype : 'NestedLayoutPanel',
- // technicall
- }
- ]
- *})
- * @extends Roo.util.Observable
- * @constructor
- * @param cfg {Object} configuration of component
- *
- */
-Roo.XComponent = function(cfg) {
- Roo.apply(this, cfg);
- this.addEvents({
- /**
- * @event built
- * Fires when this the componnt is built
- * @param {Roo.XComponent} c the component
- */
- 'built' : true,
- /**
- * @event buildcomplete
- * Fires on the top level element when all elements have been built
- * @param {Roo.XComponent} c the top level component.
- */
- 'buildcomplete' : true
-
- });
-
- Roo.XComponent.register(this);
- this.modules = false;
- this.el = false; // where the layout goes..
-
-
-}
-Roo.extend(Roo.XComponent, Roo.util.Observable, {
- /**
- * @property el
- * The created element (with Roo.factory())
- * @type {Roo.Layout}
- */
- el : false,
-
- /**
- * @property el
- * for BC - use el in new code
- * @type {Roo.Layout}
- */
- panel : false,
-
- /**
- * @property layout
- * for BC - use el in new code
- * @type {Roo.Layout}
- */
- layout : false,
-
- /**
- * @cfg {Function|boolean} disabled
- * If this module is disabled by some rule, return true from the funtion
- */
- disabled : false,
-
- /**
- * @cfg {String} parent
- * Name of parent element which it get xtype added to..
- */
- parent: false,
-
- /**
- * @cfg {String} order
- * Used to set the order in which elements are created (usefull for multiple tabs)
- */
-
- order : false,
- /**
- * @cfg {String} name
- * String to display while loading.
- */
- name : false,
- /**
- * @cfg {Array} items
- * A single item array - the first element is the root of the tree..
- * It's done this way to stay compatible with the Xtype system...
- */
- items : false
-
-
-
-});
-
-Roo.apply(Roo.XComponent, {
-
- /**
- * @property buildCompleted
- * True when the builder has completed building the interface.
- * @type Boolean
- */
- buildCompleted : false,
-
- /**
- * @property topModule
- * the upper most module - uses document.element as it's constructor.
- * @type Object
- */
-
- topModule : false,
-
- /**
- * @property modules
- * array of modules to be created by registration system.
- * @type Roo.XComponent
- */
-
- modules : [],
-
-
- /**
- * Register components to be built later.
- *
- * This solves the following issues
- * - Building is not done on page load, but after an authentication process has occured.
- * - Interface elements are registered on page load
- * - Parent Interface elements may not be loaded before child, so this handles that..
- *
- *
- * example:
- *
- * MyApp.register({
- order : '000001',
- module : 'Pman.Tab.projectMgr',
- region : 'center',
- parent : 'Pman.layout',
- disabled : false, // or use a function..
- })
-
- * * @param {Object} details about module
- */
- register : function(obj) {
- this.modules.push(obj);
-
- },
- /**
- * convert a string to an object..
- *
- */
-
- toObject : function(str)
- {
- if (!str || typeof(str) == 'object') {
- return str;
- }
- var ar = str.split('.');
- var rt, o;
- rt = ar.shift();
- /** eval:var:o */
- eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
- if (o === false) {
- throw "Module not found : " + str;
- }
- Roo.each(ar, function(e) {
- if (typeof(o[e]) == 'undefined') {
- throw "Module not found : " + str;
- }
- o = o[e];
- });
- return o;
-
- },
-
-
- /**
- * move modules into their correct place in the tree..
- *
- */
- preBuild : function ()
- {
-
- Roo.each(this.modules , function (obj)
- {
- obj.parent = this.toObject(obj.parent);
-
- if (!obj.parent) {
- this.topModule = obj;
- return;
- }
-
- if (!obj.parent.modules) {
- obj.parent.modules = new Roo.util.MixedCollection(false,
- function(o) { return o.order + '' }
- );
- }
-
- obj.parent.modules.add(obj);
- }, this);
- },
-
- /**
- * make a list of modules to build.
- * @return {Array} list of modules.
- */
-
- buildOrder : function()
- {
- var _this = this;
- var cmp = function(a,b) {
- return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
- };
-
- if (!this.topModule || !this.topModule.modules) {
- throw "No top level modules to build";
- }
-
- // make a flat list in order of modules to build.
- var mods = [ this.topModule ];
-
-
- // add modules to their parents..
- var addMod = function(m) {
- // Roo.debug && Roo.log(m.modKey);
-
- mods.push(m);
- if (m.modules) {
- m.modules.keySort('ASC', cmp );
- m.modules.each(addMod);
- }
- // not sure if this is used any more..
- if (m.finalize) {
- m.finalize.name = m.name + " (clean up) ";
- mods.push(m.finalize);
- }
-
- }
- this.topModule.modules.keySort('ASC', cmp );
- this.topModule.modules.each(addMod);
- return mods;
- },
-
- /**
- * Build the registered modules.
- * @param {Object} parent element.
- * @param {Function} optional method to call after module has been added.
- *
- */
-
- build : function()
- {
-
- this.preBuild();
- var mods = this.buildOrder();
-
- //this.allmods = mods;
- //Roo.debug && Roo.log(mods);
- //return;
- if (!mods.length) { // should not happen
- throw "NO modules!!!";
- }
-
-
-
- // flash it up as modal - so we store the mask!?
- Roo.MessageBox.show({ title: 'loading' });
- Roo.MessageBox.show({
- title: "Please wait...",
- msg: "Building Interface...",
- width:450,
- progress:true,
- closable:false,
- modal: false
-
- });
- var total = mods.length;
-
- var _this = this;
- var progressRun = function() {
- if (!mods.length) {
- Roo.debug && Roo.log('hide?');
- Roo.MessageBox.hide();
- _this.topModule.fireEvent('buildcomplete', _this.topModule);
- return;
- }
-
- var m = mods.shift();
- Roo.debug && Roo.log(m);
- if (typeof(m) == 'function') { // not sure if this is supported any more..
- m.call(this);
- return progressRun.defer(10, _this);
- }
-
- Roo.MessageBox.updateProgress(
- (total - mods.length)/total, "Building Interface " + (total - mods.length) +
- " of " + total +
- (m.name ? (' - ' + m.name) : '')
- );
-
-
-
- var disabled = (typeof(m.disabled) == 'function') ?
- m.disabled.call(m.module.disabled) : m.disabled;
-
-
- if (disabled) {
- return progressRun(); // we do not update the display!
- }
-
- if (!m.parent) {
- // it's a top level one..
- var layoutbase = new Ext.BorderLayout(document.body, {
-
- center: {
- titlebar: false,
- autoScroll:false,
- closeOnTab: true,
- tabPosition: 'top',
- //resizeTabs: true,
- alwaysShowTabs: true,
- minTabWidth: 140
- }
- });
- var tree = m.tree();
- tree.region = 'center';
- m.el = layoutbase.addxtype(tree);
- m.panel = m.el;
- m.layout = m.panel.layout;
- return progressRun.defer(10, _this);
- }
-
- var tree = m.tree();
- tree.region = tree.region || m.region;
- m.el = m.parent.el.addxtype(tree);
- m.fireEvent('built', m);
- m.panel = m.el;
- m.layout = m.panel.layout;
- progressRun.defer(10, _this);
-
- }
- progressRun.defer(1, _this);
-
-
-
- }
-
-
-
-
-});
- //<script type="text/javascript">
-
-
-/**
- * @class Roo.Login
- * @extends Roo.LayoutDialog
- * A generic Login Dialog..... - only one needed in theory!?!?
- *
- * Fires XComponent builder on success...
- *
- * Sends
- * username,password, lang = for login actions.
- * check = 1 for periodic checking that sesion is valid.
- * passwordRequest = email request password
- * logout = 1 = to logout
- *
- * Affects: (this id="????" elements)
- * loading (removed) (used to indicate application is loading)
- * loading-mask (hides) (used to hide application when it's building loading)
- *
- *
- * Usage:
- *
- *
- * Myapp.login = Roo.Login({
- url: xxxx,
-
- realm : 'Myapp',
-
-
- method : 'POST',
-
-
- *
- })
- *
- *
- *
- **/
-
-Roo.Login = function(cfg)
-{
- this.addEvents({
- 'refreshed' : true
- });
-
- Roo.apply(this,cfg);
-
- Roo.onReady(function() {
- this.onLoad();
- }, this);
- // call parent..
-
-
- Roo.Login.superclass.constructor.call(this, this);
- //this.addxtype(this.items[0]);
-
-
-}
-
-
-Roo.extend(Roo.Login, Roo.LayoutDialog, {
-
- /**
- * @cfg {String} method
- * Method used to query for login details.
- */
-
- method : 'POST',
- /**
- * @cfg {String} url
- * URL to query login data. - eg. baseURL + '/Login.php'
- */
- url : '',
-
- /**
- * @property user
- * The user data - if user.id < 0 then login will be bypassed. (used for inital setup situation.
- * @type {Object}
- */
- user : false,
- /**
- * @property checkFails
- * Number of times we have attempted to get authentication check, and failed.
- * @type {Number}
- */
- checkFails : 0,
- /**
- * @property intervalID
- * The window interval that does the constant login checking.
- * @type {Number}
- */
- intervalID : 0,
-
-
- onLoad : function() // called on page load...
- {
- // load
-
- if (Roo.get('loading')) { // clear any loading indicator..
- Roo.get('loading').remove();
- }
-
- //this.switchLang('en'); // set the language to english..
-
- this.check({
- success: function(response, opts) { // check successfull...
-
- var res = this.processResponse(response);
- this.checkFails =0;
- if (!res.success) { // error!
- this.checkFails = 5;
- //console.log('call failure');
- return this.failure(response,opts);
- }
-
- if (!res.data.id) { // id=0 == login failure.
- return this.show();
- }
-
-
- //console.log(success);
- this.fillAuth(res.data);
- this.checkFails =0;
- Roo.XComponent.build();
- },
- failure : this.show
- });
-
- },
-
-
- check: function(cfg) // called every so often to refresh cookie etc..
- {
- if (cfg.again) { // could be undefined..
- this.checkFails++;
- } else {
- this.checkFails = 0;
- }
- var _this = this;
- if (this.sending) {
- if ( this.checkFails > 4) {
- Roo.MessageBox.alert("Error",
- "Error getting authentication status. - try reloading, or wait a while", function() {
- _this.sending = false;
- });
- return;
- }
- cfg.again = true;
- _this.check.defer(10000, _this, [ cfg ]); // check in 10 secs.
- return;
- }
- this.sending = true;
-
- Roo.Ajax.request({
- url: this.url,
- params: {
- getAuthUser: true
- },
- method: this.method,
- success: cfg.success || this.success,
- failure : cfg.failure || this.failure,
- scope : this,
- callCfg : cfg
-
- });
- },
-
-
- logout: function()
- {
- window.onbeforeunload = function() { }; // false does not work for IE..
- this.user = false;
- var _this = this;
-
- Roo.Ajax.request({
- url: this.url,
- params: {
- logout: 1
- },
- method: 'GET',
- failure : function() {
- Roo.MessageBox.alert("Error", "Error logging out. - continuing anyway.", function() {
- document.location = document.location.toString() + '?ts=' + Math.random();
- });
-
- },
- success : function() {
- _this.user = false;
- this.checkFails =0;
- // fixme..
- document.location = document.location.toString() + '?ts=' + Math.random();
- }
-
-
- });
- },
-
- processResponse : function (response)
- {
- var res = '';
- try {
- res = Roo.decode(response.responseText);
- // oops...
- if (typeof(res) != 'object') {
- res = { success : false, errorMsg : res, errors : true };
- }
- if (typeof(res.success) == 'undefined') {
- res.success = false;
- }
-
- } catch(e) {
- res = { success : false, errorMsg : response.responseText, errors : true };
- }
- return res;
- },
-
- success : function(response, opts) // check successfull...
- {
- this.sending = false;
- var res = this.processResponse(response);
- if (!res.success) {
- return this.failure(response, opts);
- }
- if (!res.data || !res.data.id) {
- return this.failure(response,opts);
- }
- //console.log(res);
- this.fillAuth(res.data);
-
- this.checkFails =0;
-
- },
-
-
- failure : function (response, opts) // called if login 'check' fails.. (causes re-check)
- {
- this.authUser = -1;
- this.sending = false;
- var res = this.processResponse(response);
- //console.log(res);
- if ( this.checkFails > 2) {
-
- Roo.MessageBox.alert("Error", res.errorMsg ? res.errorMsg :
- "Error getting authentication status. - try reloading");
- return;
- }
- opts.callCfg.again = true;
- this.check.defer(1000, this, [ opts.callCfg ]);
- return;
- },
-
-
-
- fillAuth: function(au) {
- this.startAuthCheck();
- this.authUserId = au.id;
- this.authUser = au;
- this.lastChecked = new Date();
- this.fireEvent('refreshed', au);
- //Pman.Tab.FaxQueue.newMaxId(au.faxMax);
- //Pman.Tab.FaxTab.setTitle(au.faxNumPending);
- au.lang = au.lang || 'en';
- //this.switchLang(Roo.state.Manager.get('Pman.Login.lang', 'en'));
- Roo.state.Manager.set( this.realm + 'lang' , au.lang);
- this.switchLang(au.lang );
-
-
- // open system... - -on setyp..
- if (this.authUserId < 0) {
- Roo.MessageBox.alert("Warning",
- "This is an open system - please set up a admin user with a password.");
- }
-
- //Pman.onload(); // which should do nothing if it's a re-auth result...
-
-
- },
-
- startAuthCheck : function() // starter for timeout checking..
- {
- if (this.intervalID) { // timer already in place...
- return false;
- }
- var _this = this;
- this.intervalID = window.setInterval(function() {
- _this.check(false);
- }, 120000); // every 120 secs = 2mins..
-
-
- },
-
-
- switchLang : function (lang)
- {
- _T = typeof(_T) == 'undefined' ? false : _T;
- if (!_T || !lang.length) {
- return;
- }
-
- if (!_T && lang != 'en') {
- Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
- return;
- }
-
- if (typeof(_T.en) == 'undefined') {
- _T.en = {};
- Roo.apply(_T.en, _T);
- }
-
- if (typeof(_T[lang]) == 'undefined') {
- Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
- return;
- }
-
-
- Roo.apply(_T, _T[lang]);
- // just need to set the text values for everything...
- var _this = this;
- /* this will not work ...
- if (this.form) {
-
-
- function formLabel(name, val) {
- _this.form.findField(name).fieldEl.child('label').dom.innerHTML = val;
- }
-
- formLabel('password', "Password"+':');
- formLabel('username', "Email Address"+':');
- formLabel('lang', "Language"+':');
- this.dialog.setTitle("Login");
- this.dialog.buttons[0].setText("Forgot Password");
- this.dialog.buttons[1].setText("Login");
- }
- */
-
-
- },
-
-
- title: "Login",
- modal: true,
- width: 350,
- //height: 230,
- height: 180,
- shadow: true,
- minWidth:200,
- minHeight:180,
- //proxyDrag: true,
- closable: false,
- draggable: false,
- collapsible: false,
- resizable: false,
- center: { // needed??
- autoScroll:false,
- titlebar: false,
- // tabPosition: 'top',
- hideTabs: true,
- closeOnTab: true,
- alwaysShowTabs: false
- } ,
- listeners : {
-
- show : function(dlg)
- {
- //console.log(this);
- this.form = this.layout.getRegion('center').activePanel.form;
- this.form.dialog = dlg;
- this.buttons[0].form = this.form;
- this.buttons[0].dialog = dlg;
- this.buttons[1].form = this.form;
- this.buttons[1].dialog = dlg;
-
- //this.resizeToLogo.defer(1000,this);
- // this is all related to resizing for logos..
- //var sz = Roo.get(Pman.Login.form.el.query('img')[0]).getSize();
- //// if (!sz) {
- // this.resizeToLogo.defer(1000,this);
- // return;
- // }
- //var w = Ext.lib.Dom.getViewWidth() - 100;
- //var h = Ext.lib.Dom.getViewHeight() - 100;
- //this.resizeTo(Math.max(350, Math.min(sz.width + 30, w)),Math.min(sz.height+200, h));
- //this.center();
- if (this.disabled) {
- this.hide();
- return;
- }
-
- if (this.user.id < 0) { // used for inital setup situations.
- return;
- }
-
- if (this.intervalID) {
- // remove the timer
- window.clearInterval(this.intervalID);
- this.intervalID = false;
- }
-
-
- if (Roo.get('loading')) {
- Roo.get('loading').remove();
- }
- if (Roo.get('loading-mask')) {
- Roo.get('loading-mask').hide();
- }
-
- //incomming._node = tnode;
- this.form.reset();
- //this.dialog.modal = !modal;
- //this.dialog.show();
- this.el.unmask();
-
-
- this.form.setValues({
- 'username' : Roo.state.Manager.get(this.realm + '.username', ''),
- 'lang' : Roo.state.Manager.get(this.realm + '.lang', 'en')
- });
-
- this.switchLang(Roo.state.Manager.get(this.realm + '.lang', 'en'));
- if (this.form.findField('username').getValue().length > 0 ){
- this.form.findField('password').focus();
- } else {
- this.form.findField('username').focus();
- }
-
- }
- },
- items : [
- {
-
- xtype : 'ContentPanel',
- xns : Roo,
- region: 'center',
- fitToFrame : true,
-
- items : [
-
- {
-
- xtype : 'Form',
- xns : Roo.form,
- labelWidth: 100,
- style : 'margin: 10px;',
-
- listeners : {
- actionfailed : function(f, act) {
- // form can return { errors: .... }
-
- //act.result.errors // invalid form element list...
- //act.result.errorMsg// invalid form element list...
-
- this.dialog.el.unmask();
- Roo.MessageBox.alert("Error", act.result.errorMsg ? act.result.errorMsg :
- "Login failed - communication error - try again.");
-
- },
- actioncomplete: function(re, act) {
-
- Roo.state.Manager.set(
- this.dialog.realm + '.username',
- this.findField('username').getValue()
- );
- Roo.state.Manager.set(
- this.dialog.realm + '.lang',
- this.findField('lang').getValue()
- );
-
- this.dialog.fillAuth(act.result.data);
-
- this.dialog.hide();
-
- if (Roo.get('loading-mask')) {
- Roo.get('loading-mask').show();
- }
- Roo.XComponent.build();
-
-
-
- }
- },
- items : [
- {
- xtype : 'TextField',
- xns : Roo.form,
- fieldLabel: "Email Address",
- name: 'username',
- width:200,
- autoCreate : {tag: "input", type: "text", size: "20"}
- },
- {
- xtype : 'TextField',
- xns : Roo.form,
- fieldLabel: "Password",
- inputType: 'password',
- name: 'password',
- width:200,
- autoCreate : {tag: "input", type: "text", size: "20"},
- listeners : {
- specialkey : function(e,ev) {
- if (ev.keyCode == 13) {
- this.form.dialog.el.mask("Logging in");
- this.form.doAction('submit', {
- url: this.form.dialog.url,
- method: this.form.dialog.method
- });
- }
- }
- }
- },
- {
- xtype : 'ComboBox',
- xns : Roo.form,
- fieldLabel: "Language",
- name : 'langdisp',
- store: {
- xtype : 'SimpleStore',
- fields: ['lang', 'ldisp'],
- data : [
- [ 'en', 'English' ],
- [ 'zh_HK' , '\u7E41\u4E2D' ],
- [ 'zh_CN', '\u7C21\u4E2D' ]
- ]
- },
-
- valueField : 'lang',
- hiddenName: 'lang',
- width: 200,
- displayField:'ldisp',
- typeAhead: false,
- editable: false,
- mode: 'local',
- triggerAction: 'all',
- emptyText:'Select a Language...',
- selectOnFocus:true,
- listeners : {
- select : function(cb, rec, ix) {
- this.form.switchLang(rec.data.lang);
- }
- }
-
- }
- ]
- }
-
-
- ]
- }
- ],
- buttons : [
- {
- xtype : 'Button',
- xns : 'Roo',
- text : "Forgot Password",
- listeners : {
- click : function() {
- //console.log(this);
- var n = this.form.findField('username').getValue();
- if (!n.length) {
- Roo.MessageBox.alert("Error", "Fill in your email address");
- return;
- }
- Roo.Ajax.request({
- url: this.dialog.url,
- params: {
- passwordRequest: n
- },
- method: this.dialog.method,
- success: function(response, opts) { // check successfull...
-
- var res = this.dialog.processResponse(response);
- if (!res.success) { // error!
- Roo.MessageBox.alert("Error" ,
- res.errorMsg ? res.errorMsg : "Problem Requesting Password Reset");
- return;
- }
- Roo.MessageBox.alert("Notice" ,
- "Please check you email for the Password Reset message");
- },
- failure : function() {
- Roo.MessageBox.alert("Error" , "Problem Requesting Password Reset");
- }
-
- });
- }
- }
- },
- {
- xtype : 'Button',
- xns : 'Roo',
- text : "Login",
- listeners : {
-
- click : function () {
-
- this.dialog.el.mask("Logging in");
- this.form.doAction('submit', {
- url: this.dialog.url,
- method: this.dialog.method
- });
- }
- }
- }
- ]
-
-
-})
-
-
-
- /*
- * Original code for Roojs - LGPL
- * <script type="text/javascript">
- */
-
-/**
- *
- * This needs some more thought..
- *
- *
- *
- * @class Roo.XComponent
- * @extends Roo.data.Observable
- *
- * A delayed Element creator...
- *
- * Mypart.xyx = new Roo.XComponent({
-
- parent : 'Mypart.xyz', // empty == document.element.!!
- order : '001',
- name : 'xxxx'
- region : 'xxxx'
- disabled : function() {}
-
- items : [ // technically only one component..
- {
- xtype : 'NestedLayoutPanel',
- // technicall
- }
- ]
- *})
- *
- *
- *
- */
-Roo.XComponent = function(cfg) {
- Roo.apply(this, cfg);
- this.addEvents({
- /**
- * @event built
- * Fires when this the componnt is built
- * @param {Roo.XComponent} c the component
- */
- 'built' : true,
- /**
- * @event buildcomplete
- * Fires on the top level element when all elements have been built
- * @param {Roo.XComponent} c the top level component.
- */
- 'buildcomplete' : true
-
- });
-
- Roo.XComponent.register(this);
- this.modules = [];
- this.el = false; // where the layout goes..
-
-
-}
-Roo.extend(Roo.XComponent, Roo.util.Observable {
- /**
- * @property el
- * The created element (with Roo.factory())
- * @type {Roo.Layout}
- */
- el : false,
-
- /**
- * @property el
- * for BC - use el in new code
- * @type {Roo.Layout}
- */
- panel : false,
-
- /**
- * @property layout
- * for BC - use el in new code
- * @type {Roo.Layout}
- */
- layout : false,
-
- /**
- * @cfg {Function|boolean} disabled
- * If this module is disabled by some rule, return true from the funtion
- */
- disabled : false,
-
- /**
- * @cfg {String} parent
- * Name of parent element which it get xtype added to..
- */
- parent: false,
-
- /**
- * @cfg {String} order
- * Used to set the order in which elements are created (usefull for multiple tabs)
- */
-
- order : false,
- /**
- * @cfg {String} name
- * String to display while loading.
- */
- name : false,
- /**
- * @cfg {Array} items
- * A single item array - the first element is the root of the tree..
- * It's done this way to stay compatible with the Xtype system...
- */
- items : false
-});
-
-Roo.apply(Roo.XComponent,
- /**
- * @property buildCompleted
- * True when the builder has completed building the interface.
- * @type Boolean
- */
- buildCompleted : false,
-
- /**
- * @property topModule
- * the upper most module - uses document.element as it's constructor.
- * @type Object
- */
-
- topModule : false,
-
- /**
- * @property modules
- * array of modules to be created by registration system.
- * @type Roo.XComponent
- */
-
- modules : [],
-
-
- /**
- * Register components to be built later.
- * @param {Object} details about module
- *
- * This solves the following issues
- * - Building is not done on page load, but after an authentication process has occured.
- * - Interface elements are registered on page load
- * - Parent Interface elements may not be loaded before child, so this handles that..
- *
- *
- * example:
- *
- * MyApp.register({
- order : '000001',
- module : 'Pman.Tab.projectMgr',
- region : 'center',
- parent : 'Pman.layout',
- disabled : false, // or use a function..
- })
- *
- */
- register : function(obj) {
- this.modules.push(obj);
-
- },
- /**
- * convert a string to an object..
- *
- */
-
- toObject : function(str)
- {
- if (typeof(str) == 'object') {
- return str;
- }
- var ar = str.split('.');
- var rt, o;
- rt = ar.unshift();
- /** eval:var:o */
- eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
- if (o === false) {
- throw "Module not found : " + str;
- }
- Roo.each(ar, function(e) {
- if (typeof(o[e]) == 'undefined') {
- throw "Module not found : " + str;
- }
- o = o[e];
- });
- return o;
-
- }
-
-
- /**
- * move modules into their correct place in the tree..
- *
- */
- preBuild : function ()
- {
- var modules = this.modules;
- this.modules = false;
-
- Roo.each(modules , function (obj)
- {
- obj.parent = this.toObject(obj.parent);
-
- if (!obj.parent) {
- this.topModule = obj;
- return;
- }
- obj.parent = toObject(obj.parent);
- if (!obj.parent.modules) {
- obj.parent.modules = new Roo.util.MixedCollection(false,
- function(o) { return o.order + '' }
- );
- }
-
- obj.parent.modules.add(obj);
- }, this);
- }
-
- /**
- * make a list of modules to build.
- * @return {Array} list of modules.
- */
-
- buildOrder : function()
- {
- var _this = this;
- var cmp = function(a,b) {
- return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
- };
-
- if (!this.topModule || !this.topModule.modules) {
- throw "No top level modules to build";
- }
-
- // make a flat list in order of modules to build.
- var mods = [ this.topModule ];
-
-
- // add modules to their parents..
- var addMod = function(m) {
- // console.log(m.modKey);
-
- mods.push(m);
- if (m.module.modules) {
- m.module.modules.keySort('ASC', cmp );
- m.module.modules.each(addMod);
- }
- if (m.finalize) {
- m.finalize.name = m.name + " (clean up) ";
- mods.push(m.finalize);
- }
-
- }
- this.topModule.modules.keySort('ASC', cmp );
- this.topModule.modules.each(addMod);
- }
-
- /**
- * Build the registered modules.
- * @param {Object} parent element.
- * @param {Function} optional method to call after module has been added.
- *
- */
-
- build : function()
- {
-
- this.preBuild();
- var mods = this.buildOrder();
-
- //this.allmods = mods;
- //console.log(mods);
- //return;
- if (!mods.length) { // should not happen
- throw "NO modules!!!";
- }
-
-
-
- // flash it up as modal - so we store the mask!?
- Roo.MessageBox.show({ title: 'loading' });
- Roo.MessageBox.show({
- title: "Please wait...",
- msg: "Building Interface...",
- width:450,
- progress:true,
- closable:false,
- modal: false
-
- });
- var total = mods.length();
-
- var _this = this;
- var progressRun = function() {
- if (mods.length) {
- Roo.MessageBox.hide();
- _this.topModule.fireEvent('buildcomplete', _this.topModule);
- return;
- }
-
- var m = mods.unshift();
-
- if (typeof(m) == 'function') { // not sure if this is supported any more..
- m.call(this);
- return progressRun.defer(10, _this);
- }
-
- Roo.MessageBox.updateProgress(
- (total - mods.length)/total, "Building Interface " + (total - mods.length) +
- " of " + total +
- (m.name ? (' - ' + m.name) : '')
- );
-
-
-
- var disabled = (typeof(m.module.disabled) == 'function') ?
- m.module.disabled.call(m.module.disabled) : m.module.disabled;
- }
-
- if (disabled) {
- return progressRun(); // we do not update the display!
- }
-
- m.el = m.parent.el.addxtype(m.items[0]);
- m.fireEvent('built', m);
- m.panel = this.el;
- m.layout = m.panel.layout;
-
-
- }
- progressRun.defer(1, _this);
-
-
-
- }
-
-
-
-
-});
-
\ No newline at end of file
+});
\ No newline at end of file
projects / roojs1 / commitdiff