* frame: Shadow displays equally on all four sides<br />
* drop: Traditional bottom-right drop shadow (default)
*/
+ mode: false,
/**
* @cfg {String} offset
* The number of pixels to offset the shadow from the element (defaults to 4)
/**
* @class Roo.bootstrap.Component
* @extends Roo.Component
+ * @abstract
+ * @children Roo.bootstrap.Component
* Bootstrap Component base class
* @cfg {String} cls css class
* @cfg {String} style any extra css
/**
* @class Roo.bootstrap.Element
* @extends Roo.bootstrap.Component
- * Bootstrap Element class
+ * @children Roo.bootstrap.Component
+ * Bootstrap Element class (basically a DIV used to make random stuff )
+ *
* @cfg {String} html contents of the element
* @cfg {String} tag tag of the element
* @cfg {String} cls class of the element
/**
* @class Roo.bootstrap.Body
* @extends Roo.bootstrap.Component
+ * @builder-top
+ * @children Roo.bootstrap.Component
+ * @parent none
* Bootstrap Body class
*
* @constructor
* @class Roo.bootstrap.ButtonGroup
* @extends Roo.bootstrap.Component
* Bootstrap ButtonGroup class
+ * @children Roo.bootstrap.Button Roo.bootstrap.Form
+ *
* @cfg {String} size lg | sm | xs (default empty normal)
* @cfg {String} align vertical | justified (default none)
* @cfg {String} direction up | down (default down)
* @cfg {Boolean} removeClass remove the standard class..
* @cfg {String} target (_self|_blank|_parent|_top|other) target for a href.
* @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
- *
+ * @cfg {Roo.bootstrap.Menu} menu a Menu
+
* @constructor
* Create a new button
* @param {Object} config The config object
/**
* @class Roo.bootstrap.Column
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Column class
* @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
* @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
/**
* @class Roo.bootstrap.Container
* @extends Roo.bootstrap.Component
+ * @builder-top
+ * @children Roo.bootstrap.Component
* Bootstrap Container class
* @cfg {Boolean} jumbotron is it a jumbotron element
* @cfg {String} html content of element
}
});
- /*
- * - LGPL
- *
- * This is BS4's Card element.. - similar to our containers probably..
- *
- */
-/**
+ /**
* @class Roo.bootstrap.Card
* @extends Roo.bootstrap.Component
- * Bootstrap Card class
+ * @children Roo.bootstrap.Component
+ * @licence LGPL
+ * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
*
*
* possible... may not be implemented..
/**
* @class Roo.bootstrap.CardHeader
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardHeader class
* @constructor
* Create a new Card Header - that you can embed children into
/**
* @class Roo.bootstrap.CardFooter
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardFooter class
+ *
* @constructor
* Create a new Card Footer - that you can embed children into
* @param {Object} config The config object
/**
* @class Roo.bootstrap.CardImageTop
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardImageTop class
+ *
* @constructor
* Create a new Card Image Top container
* @param {Object} config The config object
/**
* @class Roo.bootstrap.Link
* @extends Roo.bootstrap.Component
- * Bootstrap Link Class
+ * @children Roo.bootstrap.Component
+ * Bootstrap Link Class (eg. '<a href>')
+
* @cfg {String} alt image alternative text
* @cfg {String} href a tag href
* @cfg {String} target (_self|_blank|_parent|_top) target for a href.
/**
* @class Roo.bootstrap.Menu
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.MenuItem
* Bootstrap Menu class - container for MenuItems
+ *
* @cfg {String} type (dropdown|treeview|submenu) type of menu
* @cfg {bool} hidden if the menu should be hidden when rendered.
* @cfg {bool} stopEvent (true|false) Stop event after trigger press (default true)
/**
* @class Roo.bootstrap.Modal
* @extends Roo.bootstrap.Component
+ * @builder-top
+ * @parent none
+ * @children Roo.bootstrap.Component
* Bootstrap Modal class
* @cfg {String} title Title of dialog
* @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
* @cfg {String} tabId the tab that this item activates.
* @cfg {String} tagtype (a|span) render as a href or span?
* @cfg {Boolean} animateRef (true|false) link to element default false
+ * @cfg {Roo.bootstrap.Menu} menu a Menu
* @constructor
* Create a new Navbar Item
/**
* @class Roo.bootstrap.Row
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Row class (contains columns...)
*
* @constructor
/**
* @class Roo.grid.AbstractSelectionModel
* @extends Roo.util.Observable
+ * @abstract
* Abstract base class for grid SelectionModels. It provides the interface that should be
* implemented by descendant classes. This class should not be directly instantiated.
* @constructor
* True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
* False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
*/
+ removeMask : false,
/**
* @cfg {String} msg
* The text to display in a centered loading message box (defaults to 'Loading...')
* @class Roo.bootstrap.Table
* @licence LGBL
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.TableBody
* Bootstrap Table class. This class represents the primary interface of a component based grid control.
* Similar to Roo.grid.Grid
* <pre><code>
*
- * @cfg {Roo.grid.RowSelectionModel|Roo.grid.CellSelectionModel} sm The selection model to use (cell selection is not supported yet)
- * @cfg {Roo.data.Store|Roo.data.SimpleStore} store The data store to use
- * @cfg {Roo.grid.ColumnModel} cm[] A column for th grid.
+ * @cfg {Roo.grid.AbstractSelectionModel} sm The selection model to use (cell selection is not supported yet)
+ * @cfg {Roo.data.Store} store The data store to use
+ * @cfg {Roo.grid.ColumnModel} cm[] A column for the grid.
*
* @cfg {String} cls table class
*
* @cfg {boolean} bordered Add borders to the table
* @cfg {boolean} hover Add hover highlighting
* @cfg {boolean} condensed Format condensed
- * @cfg {boolean} responsive Format condensed
+ * @cfg {boolean} responsive default false - if this is on, columns are rendered with col-xs-4 etc. classes, otherwise columns will be sized by CSS,
+ * also adds table-responsive (see bootstrap docs for details)
* @cfg {Boolean} loadMask (true|false) default false
* @cfg {Boolean} footerShow (true|false) generate tfoot, default true
* @cfg {Boolean} headerShow (true|false) generate thead, default true
width = "width:" + w+ "px;";
}
+ if (this.responsive) {
+ width = '';
+ left = '';
+ hidden = cm.isHidden(i) ? 'display:none;' : '';
+ splithide = 'display: none;';
+ }
styles.push( '#' , this.id , ' .x-col-' , i, " {", cm.config[i].css, width, hidden, "}\n" );
if (this.headEl) {
}
}
- Roo.log(styles.join(''));
+ //Roo.log(styles.join(''));
this.CSS.createStyleSheet( styles.join(''), this.id + '-cssrules');
},
}
// this is the bit that doesnt reall work at all...
- /*
-
- ['xs','sm','md','lg'].map(function(size){
-
- if(typeof(config[size]) == 'undefined'){
- return;
- }
+ if (this.responsive) {
- if (!config[size]) { // 0 = hidden
- // BS 4 '0' is treated as hide that column and below.
- c.cls += ' hidden-' + size + ' hidden' + size + '-down';
- return;
- }
-
- c.cls += ' col-' + size + '-' + config[size] + (
- size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
- );
-
-
- });
- */
+
+ ['xs','sm','md','lg'].map(function(size){
+
+ if(typeof(config[size]) == 'undefined'){
+ return;
+ }
+
+ if (!config[size]) { // 0 = hidden
+ // BS 4 '0' is treated as hide that column and below.
+ c.cls += ' hidden-' + size + ' hidden' + size + '-down';
+ return;
+ }
+
+ c.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
+
+ });
+ }
// at the end?
c.html +=' <span class="x-grid-split x-grid-split-' + i + '"></span>';
if(typeof(config.cls) != 'undefined'){
td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
}
- /*
- ['xs','sm','md','lg'].map(function(size){
-
- if(typeof(config[size]) == 'undefined'){
- return;
- }
-
-
-
- if (!config[size]) { // 0 = hidden
- // BS 4 '0' is treated as hide that column and below.
- td.cls += ' hidden-' + size + ' hidden' + size + '-down';
- return;
- }
-
- td.cls += ' col-' + size + '-' + config[size] + (
- size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
- );
-
-
- });
- */
+ if (this.responsive) {
+ ['xs','sm','md','lg'].map(function(size){
+
+ if(typeof(config[size]) == 'undefined'){
+ return;
+ }
+
+
+
+ if (!config[size]) { // 0 = hidden
+ // BS 4 '0' is treated as hide that column and below.
+ td.cls += ' hidden-' + size + ' hidden' + size + '-down';
+ return;
+ }
+
+ td.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
+
+ });
+ }
row.cn.push(td);
}
onHiddenChange : function(colModel, colIndex, hidden)
{
+ /*
+ this.cm.setHidden()
var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
this.CSS.updateRule(thSelector, "display", "none");
this.CSS.updateRule(tdSelector, "display", "none");
}
-
+ */
+ // onload calls initCSS()
this.onHeaderChange();
this.onLoad();
},
/**
* @class Roo.bootstrap.TableCell
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent Roo.bootstrap.TableRow
* Bootstrap TableCell class
+ *
* @cfg {String} html cell contain text
* @cfg {String} cls cell class
* @cfg {String} tag cell tag (td|th) default td
/**
* @class Roo.bootstrap.TableRow
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.TableCell
+ * @parent Roo.bootstrap.TableBody
* Bootstrap TableRow class
* @cfg {String} cls row class
* @cfg {String} align Aligns the content in a table row
/**
* @class Roo.bootstrap.TableBody
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.TableRow
+ * @parent Roo.bootstrap.Table
* Bootstrap TableBody class
* @cfg {String} cls element class
* @cfg {String} tag element tag (thead|tbody|tfoot) default tbody
/**
* @class Roo.bootstrap.Form
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Form class
* @cfg {String} method GET | POST (default POST)
* @cfg {String} labelAlign top | left (default top)
*/
/**
- * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
+ * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
*/
/**
* @cfg {Array} data Inline data to be loaded when the store is initialized.
*/
/**
- * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
+ * @cfg {Roo.data.DataReader} reader [required] The Reader object which processes the data object and returns
* an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
*/
/**
* @cfg {Array} fields An array of field definition objects, or field name strings.
* @cfg {Object} an existing reader (eg. copied from another store)
* @cfg {Array} data The multi-dimensional array of data
+ * @cfg {Roo.data.DataProxy} proxy [not-required]
+ * @cfg {Roo.data.Reader} reader [not-required]
* @constructor
* @param {Object} config
*/
/**
* @class Roo.data.DataReader
+ * @abstract
* Base class for reading structured data from a data source. This class is intended to be
* extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
*/
/**
* @class Roo.data.DataProxy
* @extends Roo.data.Observable
+ * @abstract
* This class is an abstract base class for implementations which provide retrieval of
* unformatted data objects.<br>
* <p>
Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component, {
+ /**
+ * @cfg {Roo.data.Store} store
+ * The data source for the calendar
+ */
+ store : false,
/**
* @cfg {Number} startDay
* Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
/**
* @class Roo.bootstrap.Popover
* @extends Roo.bootstrap.Component
+ * @builder-top
+ * @children Roo.bootstrap.Component
* Bootstrap Popover class
* @cfg {String} html contents of the popover (or false to use children..)
* @cfg {String} title of popover (or false to hide)
/**
* @class Roo.bootstrap.Progress
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.ProgressBar
* Bootstrap Progress class
* @cfg {Boolean} striped striped of the progress bar
* @cfg {Boolean} active animated of the progress bar
- /*
- * - LGPL
- *
- * column
- *
- */
-
-/**
+ /**
* @class Roo.bootstrap.TabGroup
* @extends Roo.bootstrap.Column
+ * @children Roo.bootstrap.TabPanel
* Bootstrap Column class
* @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
* @cfg {Boolean} carousel true to make the group behave like a carousel
/**
* @class Roo.bootstrap.TabPanel
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap TabPanel class
* @cfg {Boolean} active panel active
* @cfg {String} html panel content
*/
stylesheets: false,
+ /**
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+ */
+ allowComments: false,
// id of frame..
frameId: false,
return;
}
if (node.nodeName == "#comment") {
- node.parentNode.removeChild(node);
+ if (!this.allowComments) {
+ node.parentNode.removeChild(node);
+ }
// clean up silly Windows -- stuff?
return;
}
Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
/**
- * @cfg {Roo.data.Store} dataSource
+ * @cfg {Roo.bootstrap.Button} buttons[]
+ * Buttons for the toolbar
+ */
+ /**
+ * @cfg {Roo.data.Store} store
* The underlying data store providing the paged data
*/
/**
* Bootstrap NavProgressBar class
*
* @constructor
- * Create a new nav progress bar
+ * Create a new nav progress bar - a bar indicating step along a process
* @param {Object} config The config object
*/
};
Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
-
+ /**
+ * @cfg {Roo.bootstrap.NavProgressItem} NavProgressBar:bullets[]
+ * Bullets for the Nav Progress bar for the toolbar
+ */
bullets : [],
barItems : [],
/**
* @class Roo.bootstrap.RadioSet
* @extends Roo.bootstrap.Input
+ * @children Roo.bootstrap.Radio
* Bootstrap RadioSet class
* @cfg {String} indicatorpos (left|right) default left
* @cfg {Boolean} inline (true|false) inline the element (default true)
/**
* @class Roo.bootstrap.layout.Border
* @extends Roo.bootstrap.layout.Manager
+ * @builder-top
* This class represents a common layout manager used in desktop applications. For screenshots and more details,
* please see: examples/bootstrap/nested.html<br><br>
* <script type="text/javascript">
*/
/**
- * @class Roo.ContentPanel
+ * @class Roo.bootstrap.paenl.Content
* @extends Roo.util.Observable
- * A basic ContentPanel element.
+ * @builder-top
+ * @children Roo.bootstrap.Component
+ * A basic ContentPanel element. - a panel that contain any content (eg. forms etc.)
* @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 {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} region [required] (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
* @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
* @cfg {Boolean} badges render the badges
* @cfg {String} cls extra classes to use
* @cfg {String} background (primary|secondary|success|info|warning|danger|light|dark)
-
+
* @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.bootstrap.panel.Content = function( config){
};
Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
-
+ /**
+ * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined)
+ */
listWidth: undefined,
selectedClass: 'active',
projects / roojs1 / blobdiff