var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
- var self_cntr_el = Roo.get(this[cntr]());
+ var self_cntr_el = Roo.get(this[cntr](false));
if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
// so we should check to see if body has xtype set.
if (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
- var self_cntr_el = Roo.get(this[cntr]());
+ var self_cntr_el = Roo.get(this[cntr](false));
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
// multiple copies here...
//Roo.log('render');
//Roo.log(this[cntr]());
- cn.render(this[cntr]());
+ cn.render(this[cntr](true));
}
// then add the element..
}
// handle the kids..
var nitems = [];
+ /*
if (typeof (tree.menu) != 'undefined') {
tree.menu.parentType = cn.xtype;
tree.menu.triggerEl = cn.el;
nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
}
-
+ */
if (!tree.items || !tree.items.length) {
cn.items = nitems;
return cn;
Roo.bootstrap.Body = function(config){
Roo.bootstrap.Body.superclass.constructor.call(this, config);
this.el = Roo.get(document.body);
+ if (this.cls && this.cls.length) {
+ Roo.get(document.body).addClass(this.cls);
+ }
};
Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component, {
autoCreate : {
cls: 'container'
},
- onRender : function(ct, position){
-
-
- //this.el.addClass([this.fieldClass, this.cls]);
-
+ onRender : function(ct, position)
+ {
+ /* Roo.log("Roo.bootstrap.Body - onRender");
+ if (this.cls && this.cls.length) {
+ Roo.get(document.body).addClass(this.cls);
+ }
+ // style??? xttr???
+ */
}
initEvents: function() {
// Roo.log('init events?');
// Roo.log(this.el.dom);
+ // add the menu...
+
+ if (typeof (this.menu) != 'undefined') {
+ this.menu.parentType = this.xtype;
+ this.menu.triggerEl = this.el;
+ this.addxtype(Roo.apply({}, this.menu));
+ }
+
+
if (this.el.hasClass('roo-button')) {
this.el.on('click', this.onClick, this);
} else {
this.el.select('.roo-button').on('click', this.onClick, this);
}
+ if(this.removeClass){
+ this.el.on('click', this.onClick, this);
+ }
+
this.el.enableDisplayMode();
},
{
this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
},
+ getText : function()
+ {
+ return this.el.select('.roo-button-text',true).first().dom.innerHTML;
+ },
hide: function() {
* @cfg {String} header content of header (for panel)
* @cfg {String} footer content of footer (for panel)
* @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
+ * @cfg {String} tag (header|aside|section) type of HTML tag.
+
*
* @constructor
* Create a new Container
header: '',
footer : '',
sticky: '',
+ tag : false,
getChildContainer : function() {
getAutoCreate : function(){
var cfg = {
+ tag : this.tag || 'div',
html : '',
cls : ''
};
if (this.jumbotron) {
cfg.cls = 'jumbotron';
}
- if (this.cls) {
- cfg.cls = this.cls + '';
- }
+ // - this is applied by the parent..
+ //if (this.cls) {
+ // cfg.cls = this.cls + '';
+ //}
if (this.sticky.length) {
}
}
+
if (body) {
body.html = this.html || cfg.html;
}
- if (!cfg.cls.length) {
+ if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
cfg.cls = 'container';
}
this.fireEvent('click', this, e);
}
+});
+
+ /*
+ * - LGPL
+ *
+ * image
+ *
+ */
+
+
+/**
+ * @class Roo.bootstrap.Link
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Link Class
+ * @cfg {String} alt image alternative text
+ * @cfg {String} href a tag href
+ * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
+ * @cfg {String} html the content of the link.
+
+ *
+ * @constructor
+ * Create a new Input
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.Link = function(config){
+ Roo.bootstrap.Link.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // img events
+ /**
+ * @event click
+ * The img click event for the img.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
+};
+
+Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component, {
+
+ href: false,
+ target: false,
+
+ getAutoCreate : function(){
+
+ var cfg = {
+ tag: 'a',
+ html : this.html || 'html-missing'
+ }
+
+
+ if(this.alt){
+ cfg.alt = this.alt;
+ }
+ cfg.href = this.href || '#';
+ if(this.target){
+ cfg.target = this.target;
+ }
+
+ return cfg;
+ },
+
+ initEvents: function() {
+
+ if(!this.href){
+ this.el.on('click', this.onClick, this);
+ }
+ },
+
+ onClick : function(e)
+ {
+ //Roo.log('img onclick');
+ this.fireEvent('click', this, e);
+ }
+
});
/*
* @class Roo.bootstrap.Menu
* @extends Roo.bootstrap.Component
* Bootstrap Menu class - container for MenuItems
- * @cfg {String} type type of menu
+ * @cfg {String} type (dropdown|treeview|submenu) type of menu
*
* @constructor
* Create a new Menu
//if (['right'].indexOf(this.align)!==-1) {
// cfg.cn[1].cls += ' pull-right'
//}
+
+
var cfg = {
tag : 'ul',
cls : 'dropdown-menu' ,
}
- if (this.type === 'submenu') {
- cfg.cls = 'submenu active'
- }
-
+ if (this.type === 'submenu') {
+ cfg.cls = 'submenu active';
+ }
+ if (this.type === 'treeview') {
+ cfg.cls = 'treeview-menu';
+ }
+
return cfg;
},
initEvents : function() {
getAutoCreate : function(){
var cfg= {
- tag: 'li',
- cls: 'dropdown-menu-item',
- cn: [
- {
- tag : 'a',
- href : '#',
- html : 'Link'
- }
- ]
- };
-
+ tag: 'li',
+ cls: 'dropdown-menu-item',
+ cn: [
+ {
+ tag : 'a',
+ href : '#',
+ html : 'Link'
+ }
+ ]
+ };
+ if (this.parent().type == 'treeview') {
+ cfg.cls = 'treeview-menu';
+ }
+
cfg.cn[0].href = this.href || cfg.cn[0].href ;
cfg.cn[0].html = this.html || cfg.cn[0].html ;
return cfg;
* @extends Roo.bootstrap.Component
* Bootstrap Modal class
* @cfg {String} title Title of dialog
+ * @cfg {Boolean} specificTitle (true|false) default false
* @cfg {Array} buttons Array of buttons or standard button set..
+ * @cfg {String} buttonPosition (left|right|center) default right
*
* @constructor
* Create a new Modal Dialog
// set on load...
body: false,
+ specificTitle: false,
+
+ buttonPosition: 'right',
+
onRender : function(ct, position)
{
Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
var btn = Roo.factory(b);
- btn.onRender(this.el.select('.modal-footer').first());
+ btn.onRender(this.el.select('.modal-footer div').first());
},this);
}
html : this.html || ''
};
-
+ var title = {
+ tag: 'h4',
+ cls : 'modal-title',
+ html : this.title
+ };
+
+ if(this.specificTitle){
+ title = this.title;
+ };
+
return modal = {
cls: "modal fade",
style : 'display: none',
cls : 'close',
html : '×'
},
- {
- tag: 'h4',
- cls : 'modal-title',
- html : this.title
- }
-
+ title
]
},
bdy,
{
- cls : 'modal-footer'
+ cls : 'modal-footer',
+ cn : [
+ {
+ tag: 'div',
+ cls: 'btn-' + this.buttonPosition
+ }
+ ]
+
}
},
getButtonContainer : function() {
- return this.el.select('.modal-footer',true).first();
+ return this.el.select('.modal-footer div',true).first();
},
initEvents : function()
var btn = Roo.factory(b);
- btn.onRender(this.el.select('.modal-footer').first());
+ btn.onRender(this.el.select('.modal-footer div').first());
return btn;
* @class Roo.bootstrap.Navbar
* @extends Roo.bootstrap.Component
* Bootstrap Navbar class
- * @cfg {Boolean} sidebar has side bar
- * @cfg {Boolean} bar is a bar?
- * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
- * @cfg {String} brand what is brand
- * @cfg {Boolean} inverse is inverted color
- * @cfg {String} type (nav | pills | tabs)
- * @cfg {Boolean} arrangement stacked | justified
- * @cfg {String} align (left | right) alignment
- * @cfg {String} brand_href href of the brand
- * @cfg {Boolean} main (true|false) main nav bar? default false
- * @cfg {Boolean} loadMask (true|false) loadMask on the bar
- *
- *
+
* @constructor
* Create a new Navbar
* @param {Object} config The config object
Roo.bootstrap.Navbar = function(config){
Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
-
};
Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, {
- sidebar: false,
-
- bar: false,
- brand: '',
- inverse: false,
- position: '',
- align : false,
- type: 'nav',
- arrangement: '',
- brand_href: false,
- main : false,
- loadMask : false,
-
+
// private
navItems : false,
+ loadMask : false,
+
getAutoCreate : function(){
- var cfg = {
- cls : 'navbar'
- };
-
- if (this.sidebar === true) {
- cfg = {
- tag: 'div',
- cls: 'sidebar-nav'
- };
- return cfg;
- }
-
- if (this.bar === true) {
- cfg = {
- tag: 'nav',
- cls: 'navbar',
- role: 'navigation',
- cn: [
- {
- tag: 'div',
- cls: 'navbar-header',
- cn: [
- {
- tag: 'button',
- type: 'button',
- cls: 'navbar-toggle',
- 'data-toggle': 'collapse',
- cn: [
- {
- tag: 'span',
- cls: 'sr-only',
- html: 'Toggle navigation'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- }
- ]
- }
- ]
- },
- {
- tag: 'div',
- cls: 'collapse navbar-collapse'
- }
- ]
- };
-
- cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
-
- if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
- cfg.cls += ' navbar-' + this.position;
- cfg.tag = this.position == 'fixed-bottom' ? 'footer' : 'header';
- }
-
- if (this.brand !== '') {
- cfg.cn[0].cn.push({
- tag: 'a',
- href: this.brand_href ? this.brand_href : '#',
- cls: 'navbar-brand',
- cn: [
- this.brand
- ]
- });
- }
-
- if(this.main){
- cfg.cls += ' main-nav';
- }
-
-
- return cfg;
-
- } else if (this.bar === false) {
-
- } else {
- Roo.log('Property \'bar\' in of Navbar must be either true or false')
- }
-
- cfg.cn = [
- {
- cls: 'nav',
- tag : 'ul'
- }
- ];
-
- if (['tabs','pills'].indexOf(this.type)!==-1) {
- cfg.cn[0].cls += ' nav-' + this.type
- } else {
- if (this.type!=='nav') {
- Roo.log('nav type must be nav/tabs/pills')
- }
- cfg.cn[0].cls += ' navbar-nav'
- }
-
- if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
- cfg.cn[0].cls += ' nav-' + this.arrangement;
- }
- if (this.align === 'right') {
- cfg.cn[0].cls += ' navbar-right';
- }
- if (this.inverse) {
- cfg.cls += ' navbar-inverse';
-
- }
+ throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
- return cfg;
},
initEvents :function ()
getChildContainer : function()
{
- if (this.bar === true) {
+ if (this.el.select('.collapse').getCount()) {
return this.el.select('.collapse',true).first();
}
unmask : function()
{
this.maskEl.hide();
- }
+ }
+
/*
* - LGPL
*
- * nav group
+ * navbar
*
*/
/**
- * @class Roo.bootstrap.NavGroup
- * @extends Roo.bootstrap.Component
- * Bootstrap NavGroup class
- * @cfg {String} align left | right
- * @cfg {Boolean} inverse false | true
- * @cfg {String} type (nav|pills|tab) default nav
- * @cfg {String} navId - reference Id for navbar.
-
+ * @class Roo.bootstrap.NavSimplebar
+ * @extends Roo.bootstrap.Navbar
+ * Bootstrap Sidebar class
+ *
+ * @cfg {Boolean} inverse is inverted color
+ *
+ * @cfg {String} type (nav | pills | tabs)
+ * @cfg {Boolean} arrangement stacked | justified
+ * @cfg {String} align (left | right) alignment
+ *
+ * @cfg {Boolean} main (true|false) main nav bar? default false
+ * @cfg {Boolean} loadMask (true|false) loadMask on the bar
+ *
+ * @cfg {String} tag (header|footer|nav|div) default is nav
+
+ *
+ *
+ *
+ * @constructor
+ * Create a new Sidebar
+ * @param {Object} config The config object
+ */
+
+
+Roo.bootstrap.NavSimplebar = function(config){
+ Roo.bootstrap.NavSimplebar.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, {
+
+ inverse: false,
+
+ type: false,
+ arrangement: '',
+ align : false,
+
+
+
+ main : false,
+
+
+ tag : false,
+
+
+ getAutoCreate : function(){
+
+
+ var cfg = {
+ tag : this.tag || 'div',
+ cls : 'navbar'
+ };
+
+
+ cfg.cn = [
+ {
+ cls: 'nav',
+ tag : 'ul'
+ }
+ ];
+
+
+ this.type = this.type || 'nav';
+ if (['tabs','pills'].indexOf(this.type)!==-1) {
+ cfg.cn[0].cls += ' nav-' + this.type
+
+
+ } else {
+ if (this.type!=='nav') {
+ Roo.log('nav type must be nav/tabs/pills')
+ }
+ cfg.cn[0].cls += ' navbar-nav'
+ }
+
+
+
+
+ if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
+ cfg.cn[0].cls += ' nav-' + this.arrangement;
+ }
+
+
+ if (this.align === 'right') {
+ cfg.cn[0].cls += ' navbar-right';
+ }
+
+ if (this.inverse) {
+ cfg.cls += ' navbar-inverse';
+
+ }
+
+
+ return cfg;
+
+
+ }
+
+
+
+});
+
+
+
+
+
+
+ /*
+ * - LGPL
+ *
+ * navbar
*
- * @constructor
- * Create a new nav group
- * @param {Object} config The config object
+ */
+
+/**
+ * @class Roo.bootstrap.NavHeaderbar
+ * @extends Roo.bootstrap.NavSimplebar
+ * Bootstrap Sidebar class
+ *
+ * @cfg {String} brand what is brand
+ * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
+ * @cfg {String} brand_href href of the brand
+ *
+ * @constructor
+ * Create a new Sidebar
+ * @param {Object} config The config object
+ */
+
+
+Roo.bootstrap.NavHeaderbar = function(config){
+ Roo.bootstrap.NavHeaderbar.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, {
+
+ position: '',
+ brand: '',
+ brand_href: false,
+
+
+ getAutoCreate : function(){
+
+
+
+ var cfg = {
+ tag: this.nav || 'nav',
+ cls: 'navbar',
+ role: 'navigation',
+ cn: [
+ {
+ tag: 'div',
+ cls: 'navbar-header',
+ cn: [
+ {
+ tag: 'button',
+ type: 'button',
+ cls: 'navbar-toggle',
+ 'data-toggle': 'collapse',
+ cn: [
+ {
+ tag: 'span',
+ cls: 'sr-only',
+ html: 'Toggle navigation'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ tag: 'div',
+ cls: 'collapse navbar-collapse'
+ }
+ ]
+ };
+
+ cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
+
+ if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
+ cfg.cls += ' navbar-' + this.position;
+
+ // tag can override this..
+
+ cfg.tag = this.tag || (this.position == 'fixed-bottom' ? 'footer' : 'header');
+ }
+
+ if (this.brand !== '') {
+ cfg.cn[0].cn.push({
+ tag: 'a',
+ href: this.brand_href ? this.brand_href : '#',
+ cls: 'navbar-brand',
+ cn: [
+ this.brand
+ ]
+ });
+ }
+
+ if(this.main){
+ cfg.cls += ' main-nav';
+ }
+
+
+ return cfg;
+
+
+ }
+
+
+
+});
+
+
+
+
+
+ /*
+ * - LGPL
+ *
+ * navbar
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.NavSidebar
+ * @extends Roo.bootstrap.Navbar
+ * Bootstrap Sidebar class
+ *
+ * @constructor
+ * Create a new Sidebar
+ * @param {Object} config The config object
+ */
+
+
+Roo.bootstrap.NavSidebar = function(config){
+ Roo.bootstrap.NavSidebar.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.NavSidebar, Roo.bootstrap.Navbar, {
+
+ sidebar : true, // used by Navbar Item and NavbarGroup at present...
+
+ getAutoCreate : function(){
+
+
+ return {
+ tag: 'div',
+ cls: 'sidebar sidebar-nav'
+ };
+
+
+ }
+
+
+
+});
+
+
+
+
+
+ /*
+ * - LGPL
+ *
+ * nav group
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.NavGroup
+ * @extends Roo.bootstrap.Component
+ * Bootstrap NavGroup class
+ * @cfg {String} align left | right
+ * @cfg {Boolean} inverse false | true
+ * @cfg {String} type (nav|pills|tab) default nav
+ * @cfg {String} navId - reference Id for navbar.
+
+ *
+ * @constructor
+ * Create a new nav group
+ * @param {Object} config The config object
*/
Roo.bootstrap.NavGroup = function(config){
cfg.cls += ' navbar-nav'
}
- if (this.parent().sidebar === true) {
+ if (this.parent().sidebar) {
cfg = {
tag: 'ul',
- cls: 'dashboard-menu'
+ cls: 'dashboard-menu sidebar-menu'
}
return cfg;
},
+ addItem : function(cfg)
+ {
+ var cn = new Roo.bootstrap.NavItem(cfg);
+ this.register(cn);
+ cn.parentId = this.id;
+ cn.onRender(this.el, null);
+ return cn;
+ },
register : function(item)
{
- this.navItems.push( item);
- item.navId = this.navId;
+ this.navItems.push( item);
+ item.navId = this.navId;
},
getNavItem: function(tabId)
});
return ret;
}
+
+
+
+
});
*/
/**
- * @class Roo.bootstrap.Navbar.Item
+ * @class Roo.bootstrap.NavItem
* @extends Roo.bootstrap.Component
- * Bootstrap Navbar.Button class
+ * Bootstrap Navbar.NavItem class
* @cfg {String} href link to
* @cfg {String} html content of button
* @cfg {String} badge text inside badge
+ * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
* @cfg {String} glyphicon name of glyphicon
* @cfg {String} icon name of font awesome icon
* @cfg {Boolean} active Is item active
+ * @cfg {Boolean} disabled Is item disabled
+
* @cfg {Boolean} preventDefault (true | false) default false
* @cfg {String} tabId the tab that this item activates.
+ * @cfg {String} tagtype (a|span) render as a href or span?
* @constructor
- * Create a new Navbar Button
+ * Create a new Navbar Item
* @param {Object} config The config object
*/
-Roo.bootstrap.Navbar.Item = function(config){
- Roo.bootstrap.Navbar.Item.superclass.constructor.call(this, config);
+Roo.bootstrap.NavItem = function(config){
+ Roo.bootstrap.NavItem.superclass.constructor.call(this, config);
this.addEvents({
// raw events
/**
/**
* @event changed
* Fires when the active item active state changes
- * @param {Roo.bootstrap.Navbar.Item} this
+ * @param {Roo.bootstrap.NavItem} this
* @param {boolean} state the new state
*/
};
-Roo.extend(Roo.bootstrap.Navbar.Item, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, {
href: false,
html: '',
active: false,
preventDefault : false,
tabId : false,
+ tagtype : 'a',
+ disabled : false,
getAutoCreate : function(){
-
- var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Item.superclass.getAutoCreate.call(this));
-
- if (this.parent().parent().sidebar === true) {
- cfg = {
- tag: 'li',
- cls: '',
- cn: [
- {
- tag: 'p',
- cls: ''
- }
- ]
- }
-
- if (this.html) {
- cfg.cn[0].html = this.html;
- }
-
- if (this.active) {
- this.cls += ' active';
- }
-
- if (this.menu) {
- cfg.cn[0].cls += ' dropdown-toggle';
- cfg.cn[0].html = (cfg.cn[0].html || this.html) + '<span class="glyphicon glyphicon-chevron-down"></span>';
- }
-
- if (this.href) {
- cfg.cn[0].tag = 'a',
- cfg.cn[0].href = this.href;
- }
-
- if (this.glyphicon) {
- cfg.cn[0].html = '<i class="glyphicon glyphicon-'+this.glyphicon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
- }
+
+ var cfg = {
+ tag: 'li',
+ cls: 'nav-item',
+ cn : [
+ {
+ tag: this.tagtype,
+ href : this.href || "#",
+ html: this.html || ''
+ }
+ ]
+ }
- if (this.icon) {
- cfg.cn[0].html = '<i class="'+this.icon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
- }
-
- return cfg;
- }
-
- cfg = {
- tag: 'li',
- cls: 'nav-item'
- }
-
if (this.active) {
cfg.cls = typeof(cfg.cls) == 'undefined' ? 'active' : cfg.cls + ' active';
}
- cfg.cn = [
- {
- tag: 'p',
- html: 'Text'
+ // glyphicon and icon go before content..
+ if (this.glyphicon || this.icon) {
+ if (this.icon) {
+ cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
+ } else {
+ cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
}
- ];
-
- if (this.glyphicon) {
- if(cfg.html){cfg.html = ' ' + this.html};
- cfg.cn=[
- {
- tag: 'span',
- cls: 'glyphicon glyphicon-' + this.glyphicon
- }
- ];
}
- cfg.cn[0].html = this.html || cfg.cn[0].html ;
- if (this.menu) {
- cfg.cn[0].tag='a';
- cfg.cn[0].href='#';
- cfg.cn[0].html += " <span class='caret'></span>";
- //}else if (!this.href) {
- // cfg.cn[0].tag='p';
- // cfg.cn[0].cls='navbar-text';
- } else {
- cfg.cn[0].tag='a';
- cfg.cn[0].href=this.href||'#';
- cfg.cn[0].html=this.html;
- }
-
- if (this.badge !== '') {
-
- cfg.cn[0].cn=[
- cfg.cn[0].html + ' ',
- {
- tag: 'span',
- cls: 'badge',
- html: this.badge
- }
- ];
- cfg.cn[0].html=''
- }
-
- if (this.icon) {
- cfg.cn[0].html = '<i class="'+this.icon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
+
+ if (this.menu) {
+
+ cfg.cn[0].html += " <span class='caret'></span>";
+
}
+ if (this.badge !== '') {
+
+ cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
+ }
+ if (this.disabled) {
+ cfg.cls += ' disabled';
+ }
+
+
return cfg;
},
initEvents: function() {
// Roo.log('init events?');
// Roo.log(this.el.dom);
+ if (typeof (this.menu) != 'undefined') {
+ this.menu.parentType = this.xtype;
+ this.menu.triggerEl = this.el;
+ this.addxtype(Roo.apply({}, this.menu));
+ }
+
+
this.el.select('a',true).on('click', this.onClick, this);
- // at this point parent should be available..
- this.parent().register(this);
+ // at this point parent should be available..
+ this.parent().register(this);
},
onClick : function(e)
{
+
if(this.preventDefault){
e.preventDefault();
}
-
+ if (this.disabled) {
+ return;
+ }
+ Roo.log("fire event clicked");
if(this.fireEvent('click', this, e) === false){
return;
};
},
isActive: function () {
- return this.active
+ return this.active
},
setActive : function(state, fire)
{
- this.active = state;
- if (!state ) {
- this.el.removeClass('active');
- } else if (!this.el.hasClass('active')) {
- this.el.addClass('active');
- }
- if (fire) {
- this.fireEvent('changed', this, state);
- }
+ this.active = state;
+ if (!state ) {
+ this.el.removeClass('active');
+ } else if (!this.el.hasClass('active')) {
+ this.el.addClass('active');
+ }
+ if (fire) {
+ this.fireEvent('changed', this, state);
+ }
- }
+ },
// this should not be here...
+ setDisabled : function(state)
+ {
+ this.disabled = state;
+ if (!state ) {
+ this.el.removeClass('disabled');
+ } else if (!this.el.hasClass('disabled')) {
+ this.el.addClass('disabled');
+ }
+
+ }
+});
+
+
+ /*
+ * - LGPL
+ *
+ * sidebar item
+ *
+ * li
+ * <span> icon </span>
+ * <span> text </span>
+ * <span>badge </span>
+ */
+
+/**
+ * @class Roo.bootstrap.NavSidebarItem
+ * @extends Roo.bootstrap.NavItem
+ * Bootstrap Navbar.NavSidebarItem class
+ * @constructor
+ * Create a new Navbar Button
+ * @param {Object} config The config object
+ */
+Roo.bootstrap.NavSidebarItem = function(config){
+ Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this, config);
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true,
+ /**
+ * @event changed
+ * Fires when the active item active state changes
+ * @param {Roo.bootstrap.NavSidebarItem} this
+ * @param {boolean} state the new state
+
+ */
+ 'changed': true
+ });
+
+};
+
+Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, {
+
+
+ getAutoCreate : function(){
+
+
+ var a = {
+ tag: 'a',
+ href : this.href || '#',
+ cls: '',
+ html : '',
+ cn : []
+ };
+ var cfg = {
+ tag: 'li',
+ cls: '',
+ cn: [ a ]
+ }
+ var span = {
+ tag: 'span',
+ html : this.html || ''
+ }
+
+
+ if (this.active) {
+ cfg.cls += ' active';
+ }
+
+ // left icon..
+ if (this.glyphicon || this.icon) {
+ var c = this.glyphicon ? ('glyphicon glyphicon-'+this.glyphicon) : this.icon;
+ a.cn.push({ tag : 'i', cls : c }) ;
+ }
+ // html..
+ a.cn.push(span);
+ // then badge..
+ if (this.badge !== '') {
+ a.cn.push({ tag: 'span', cls : 'badge pull-right ' + (this.badgecls || ''), html: this.badge });
+ }
+ // fi
+ if (this.menu) {
+ a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
+ a.cls += 'dropdown-toggle treeview' ;
+
+ }
+
+
+
+ return cfg;
+
+
+ }
+
+
});
* @cfg {boolean} hover Add hover highlighting
* @cfg {boolean} condensed Format condensed
* @cfg {boolean} responsive Format condensed
+ * @cfg {Boolean} loadMask (true|false) default false
*
-
+ * @cfg {Roo.bootstrap.PagingToolbar} footer a paging toolbar
*
* @constructor
this.sm.xmodule = this.xmodule || false;
}
if (this.cm && typeof(this.cm.config) == 'undefined') {
- this.colModel = new Roo.bootstrap.Table.ColumnModel(this.cm);
+ this.colModel = Roo.factory(this.cm, Roo.grid);
this.cm = this.colModel;
this.cm.xmodule = this.xmodule || false;
}
this.ds.xmodule = this.xmodule || false;
}
+ if (this.footer && this.store) {
+ this.footer.dataSource = this.ds;
+ this.footer = Roo.factory(this.footer);
+ }
};
Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
sm : false,
cm : false,
store : false,
+ loadMask : false,
getAutoCreate : function(){
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
// this.maskEl.enableDisplayMode("block");
// this.maskEl.show();
+ this.parent().el.setStyle('position', 'relative');
+ if (this.footer) {
+ this.footer.parentId = this.id;
+ this.footer.onRender(this.el.select('tfoot tr td'), null);
+ }
+
+
+ // mask should be using Roo.bootstrap.Mask...
+
+ var mark = {
+ tag: "div",
+ cls:"x-dlg-mask",
+ style: "text-align:center",
+ cn: [
+ {
+ tag: "div",
+ style: "background-color:white;width:50%;margin:100 auto",
+ cn: [
+ {
+ tag: "img",
+ src: rootURL + '/roojs1/images/ux/lightbox/loading.gif'
+ },
+ {
+ tag: "span",
+ html: "Loading"
+ }
+
+ ]
+ }
+ ]
+ }
+ this.maskEl = Roo.DomHelper.append(this.parent().el, mark, true);
+
+ var size = this.parent().el.getSize();
+
+ this.maskEl.setSize(size.width, 300); // we will fix the height at the beginning...
+
+ this.maskEl.enableDisplayMode("block");
+
this.store.on('load', this.onLoad, this);
this.store.on('beforeload', this.onBeforeLoad, this);
var config = cm.config[i];
+ if(typeof(config.hidden) != 'undefined' && config.hidden){
+ continue;
+ }
+
var c = {
tag: 'th',
html: cm.getColumnHeader(i)
{
var footer = {
tag: 'tfoot',
- cn : []
+ cn : [
+ {
+ tag: 'tr',
+ cn : [
+ {
+ tag : 'td',
+ colspan : 1
+ }
+ ]
+ }
+ ]
};
return footer;
var tbody = this.el.select('tbody', true).first();
var renders = [];
-
+
if(this.store.getCount() > 0){
this.store.data.each(function(d){
var row = {
};
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var renderer = cm.getRenderer(i);
var config = cm.config[i];
+
+ if(typeof(config.hidden) != 'undefined' && config.hidden){
+ continue;
+ }
+
+ var renderer = cm.getRenderer(i);
var value = '';
var id = Roo.id();
_this.renderColumn(r);
})
}
-//
-// if(this.loadMask){
-// this.maskEl.hide();
-// }
+
+ if(this.loadMask){
+ this.maskEl.hide();
+ }
},
onBeforeLoad : function()
this.clear();
-// if(this.loadMask){
-// this.maskEl.show();
-// }
+ if(this.loadMask){
+ this.maskEl.show();
+ }
},
clear : function()
cls : 'input-group',
cn : []
};
- if (this.before) {
+ if (this.before && typeof(this.before) == 'string') {
+
inputblock.cn.push({
tag :'span',
- cls : 'input-group-addon',
+ cls : 'roo-input-before input-group-addon',
html : this.before
});
}
+ if (this.before && typeof(this.before) == 'object') {
+ this.before = Roo.factory(this.before);
+ Roo.log(this.before);
+ inputblock.cn.push({
+ tag :'span',
+ cls : 'roo-input-before input-group-' +
+ (this.before.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
+ });
+ }
+
inputblock.cn.push(input);
- if (this.after) {
+
+ if (this.after && typeof(this.after) == 'string') {
inputblock.cn.push({
tag :'span',
- cls : 'input-group-addon',
+ cls : 'roo-input-after input-group-addon',
html : this.after
});
}
-
+ if (this.after && typeof(this.after) == 'object') {
+ this.after = Roo.factory(this.after);
+ Roo.log(this.after);
+ inputblock.cn.push({
+ tag :'span',
+ cls : 'roo-input-after input-group-' +
+ (this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
+ });
+ }
};
if (align ==='left' && this.fieldLabel.length) {
this.inputEl().on('keydown', this.SafariOnKeyDown, this);
}
+ if (typeof(this.before) == 'object') {
+ this.before.render(this.el.select('.roo-input-before',true).first());
+ }
+ if (typeof(this.after) == 'object') {
+ this.after.render(this.el.select('.roo-input-after',true).first());
+ }
+
+
},
filterValidation : function(e){
if(!e.isNavKeyPress()){
var parent = this.parent();
- var align = this.parentLabelAlign();
+ var align = this.labelAlign || this.parentLabelAlign();
var id = Roo.id();
// private
onDisable : function(){
- Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
+ this.inputEl().dom.disabled = true;
+ //Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
//if(this.wrap){
// this.wrap.addClass('x-item-disabled');
//}
// private
onEnable : function(){
- Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
+ this.inputEl().dom.disabled = false;
+ //Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
//if(this.wrap){
// this.el.removeClass('x-item-disabled');
//}
this.inputEl().on("keyup", this.onKeyUp, this);
}
if(this.forceSelection){
- this.on('blur', this.doForce, this);
+ this.inputEl().on('blur', this.doForce, this);
}
if(this.multiple){
// private
doForce : function(){
- if(this.el.dom.value.length > 0){
- this.el.dom.value =
+ if(this.inputEl().dom.value.length > 0){
+ this.inputEl().dom.value =
this.lastSelectionText === undefined ? '' : this.lastSelectionText;
}
onRemoveItem : function(e, _self, o)
{
- Roo.log('remove item');
+ e.preventDefault();
var index = this.item.indexOf(o.data) * 1;
if( index < 0){
this.syncValue();
- this.fireEvent('remove', this);
+ this.fireEvent('remove', this, e);
},
cn: [
{
tag: "img",
- src: rootURL + '/roojs1/images/ux/lightbox/loading.gif'
+ src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
},
{
tag: "span",
var format = this.format;
var setCellClass = function(cal, cell){
-
+ cell.row = 0;
+ cell.events = [];
+ cell.more = [];
//Roo.log('set Cell Class');
cell.title = "";
var t = d.getTime();
return ret;
},
- findBestRow: function(cells)
- {
- var ret = 0;
-
- for (var i =0 ; i < cells.length;i++) {
- ret = Math.max(cells[i].rows || 0,ret);
- }
- return ret;
-
- },
+// findBestRow: function(cells)
+// {
+// var ret = 0;
+//
+// for (var i =0 ; i < cells.length;i++) {
+// ret = Math.max(cells[i].rows || 0,ret);
+// }
+// return ret;
+//
+// },
addItem : function(ev)
// look for vertical location slot in
var cells = this.findCells(ev);
- ev.row = this.findBestRow(cells);
+// ev.row = this.findBestRow(cells);
// work out the location.
var crow = false;
var rows = [];
for(var i =0; i < cells.length; i++) {
+
+ cells[i].row = cells[0].row;
+
+ if(i == 0){
+ cells[i].row = cells[i].row + 1;
+ }
+
if (!crow) {
crow = {
start : cells[i],
ev.els = [];
ev.rows = rows;
ev.cells = cells;
- for (var i = 0; i < cells.length;i++) {
- cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
-
- }
+
+ cells[0].events.push(ev);
+
+// if((typeof(cells[0].events) == 'undefined')){
+// cells[0].events = [];
+// }
+//
+// cells[0].events.push(ev);
+// ev.rendered = false;
+// for (var i = 0; i < cells.length;i++) {
+// cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
+//
+// }
this.calevents.push(ev);
},
}
Roo.each(this.cells.elements, function(c){
- c.rows = 0;
+ c.row = 0;
+ c.events = [];
+ c.more = [];
});
Roo.each(this.calevents, function(e) {
},this);
},this);
+ Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
+ e.remove();
+ });
+
},
renderEvents: function()
- {
- // first make sure there is enough space..
+ {
+// for (var e = 0; e < this.calevents.length; e++) {
+//
+// var ev = this.calevents[e];
+// var cells = ev.cells;
+// var rows = ev.rows;
+//
+// for (var j = 0; j < cells.length; j++){
+//
+// if(!cells[j].more.length){
+// cells[j].row++;
+// }
+// if(cells[j].row > 3){
+// cells[j].more.push(ev);
+// continue;
+// }
+//
+// cells[j].events.push(ev);
+// }
+// }
+
+// for (var i = 0; i < rows.length; i++){
+// // how many rows should it span..
+//
+// var cfg = {
+// cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
+// style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
+//
+// unselectable : "on",
+// cn : [
+// {
+// cls: 'fc-event-inner',
+// cn : [
+//// {
+//// tag:'span',
+//// cls: 'fc-event-time',
+//// html : cells.length > 1 ? '' : ev.time
+//// },
+// {
+// tag:'span',
+// cls: 'fc-event-title',
+// html : String.format('{0}', ev.title)
+// }
+//
+//
+// ]
+// },
+// {
+// cls: 'ui-resizable-handle ui-resizable-e',
+// html : '  '
+// }
+//
+// ]
+// };
+//
+// if (i == 0) {
+// cfg.cls += ' fc-event-start';
+// }
+// if ((i+1) == rows.length) {
+// cfg.cls += ' fc-event-end';
+// }
+//
+// var ctr = this.el.select('.fc-event-container',true).first();
+// var cg = ctr.createChild(cfg);
+//
+// var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
+// var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
+//
+// cg.setXY([sbox.x +2, sbox.y +(e * 20)]);
+// cg.setWidth(ebox.right - sbox.x -2);
+//
+// cg.on('mouseenter' ,this.onEventEnter, this, ev);
+// cg.on('mouseleave' ,this.onEventLeave, this, ev);
+// cg.on('click', this.onEventClick, this, ev);
+//
+// ev.els.push(cg);
+//
+//
+// }
+// }
- this.cells.each(function(c) {
+ var _this = this;
- c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.rows * 20));
+ this.cells.each(function(c) {
+
+ if(c.row < 5){
+ return;
+ }
+
+ var ev = c.events;
+
+ var r = 4;
+ if(c.row != c.events.length){
+ r = 4 - (4 - (c.row - c.events.length));
+ }
+
+ c.events = ev.slice(0, r);
+ c.more = ev.slice(r);
+
+ if(c.more.length && c.more.length == 1){
+ c.events.push(c.more.pop());
+ }
+
+ c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
+
});
-
- for (var e = 0; e < this.calevents.length; e++) {
- var ev = this.calevents[e];
- var cells = ev.cells;
- var rows = ev.rows;
- for(var i =0; i < rows.length; i++) {
+// for (var e = 0; e < this.calevents.length; e++) {
+//
+// var ev = this.calevents[e];
+// var cells = ev.cells;
+// var rows = ev.rows;
+//
+// for(var i = 0; i < cells.length; i++){
+//
+// var cbox = this.cells.item(this.cells.indexOf(cells[i]));
+//
+// if(cells.length < 2 && cbox.rows.length > 3){
+// cbox.more.push(ev);
+// continue;
+// }
+//
+// cbox.rows.push(ev);
+// }
+// }
+//
+ this.cells.each(function(c) {
+
+ c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
+
+
+ for (var e = 0; e < c.events.length; e++){
+ var ev = c.events[e];
+ var rows = ev.rows;
-
- // how many rows should it span..
+ for(var i = 0; i < rows.length; i++) {
- var cfg = {
- cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
- style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
+ // how many rows should it span..
+
+ var cfg = {
+ cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
+ style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
+
+ unselectable : "on",
+ cn : [
+ {
+ cls: 'fc-event-inner',
+ cn : [
+ // {
+ // tag:'span',
+ // cls: 'fc-event-time',
+ // html : cells.length > 1 ? '' : ev.time
+ // },
+ {
+ tag:'span',
+ cls: 'fc-event-title',
+ html : String.format('{0}', ev.title)
+ }
+
+
+ ]
+ },
+ {
+ cls: 'ui-resizable-handle ui-resizable-e',
+ html : '  '
+ }
+
+ ]
+ };
+
+ if (i == 0) {
+ cfg.cls += ' fc-event-start';
+ }
+ if ((i+1) == rows.length) {
+ cfg.cls += ' fc-event-end';
+ }
+
+ var ctr = _this.el.select('.fc-event-container',true).first();
+ var cg = ctr.createChild(cfg);
+
+ var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
+ var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
+
+ var r = (c.more.length) ? 1 : 0;
+ cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);
+ cg.setWidth(ebox.right - sbox.x -2);
+
+ cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
+ cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
+ cg.on('click', _this.onEventClick, _this, ev);
+
+ ev.els.push(cg);
+ }
+
+ }
+
+
+ if(c.more.length){
+ var cfg = {
+ cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
+ style : 'position: absolute',
unselectable : "on",
cn : [
{
cls: 'fc-event-inner',
cn : [
-// {
-// tag:'span',
-// cls: 'fc-event-time',
-// html : cells.length > 1 ? '' : ev.time
-// },
{
tag:'span',
cls: 'fc-event-title',
- html : String.format('{0}', ev.title)
+ html : 'More'
}
-
-
+
+
]
},
{
cls: 'ui-resizable-handle ui-resizable-e',
html : '  '
}
-
+
]
};
- if (i == 0) {
- cfg.cls += ' fc-event-start';
- }
- if ((i+1) == rows.length) {
- cfg.cls += ' fc-event-end';
- }
-
- var ctr = this.el.select('.fc-event-container',true).first();
+
+ var ctr = _this.el.select('.fc-event-container',true).first();
var cg = ctr.createChild(cfg);
-
- cg.on('mouseenter' ,this.onEventEnter, this, ev);
- cg.on('mouseleave' ,this.onEventLeave, this, ev);
- cg.on('click', this.onEventClick, this, ev);
-
- ev.els.push(cg);
-
- var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
- var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
+
+ var sbox = c.select('.fc-day-content',true).first().getBox();
+ var ebox = c.select('.fc-day-content',true).first().getBox();
//Roo.log(cg);
- cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
+ cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);
cg.setWidth(ebox.right - sbox.x -2);
+
+ cg.on('click', _this.onMoreEventClick, _this, c.more);
+
}
-
- }
+ });
+
+
},
this.store.load();
},
+ onMoreEventClick: function(e, el, more)
+ {
+ var _this = this;
+
+ this.calpopover.placement = 'right';
+ this.calpopover.setTitle('More');
+
+ this.calpopover.setContent('');
+
+ var ctr = this.calpopover.el.select('.popover-content', true).first();
+
+ Roo.each(more, function(m){
+ var cfg = {
+ cls : 'fc-event-hori fc-event-draggable',
+ html : m.title
+ }
+ var cg = ctr.createChild(cfg);
+
+ cg.on('click', _this.onEventClick, _this, m);
+ });
+
+ this.calpopover.show(el);
+
+
+ },
+
onLoad: function ()
{
this.calevents = [];
this.renderEvents();
- if(this.loadMask){
+ if(this.calevents.length && this.loadMask){
this.maskEl.hide();
}
},
onBeforeLoad: function()
{
this.clearEvents();
-
if(this.loadMask){
this.maskEl.show();
}
* @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
* @cfg {String} inputValue The value that should go into the generated input element's value when checked.
* @cfg {String} boxLabel The text that appears beside the checkbox
+ * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
* @cfg {Boolean} checked initnal the element
*
+ *
* @constructor
* Create a new CheckBox
* @param {Object} config The config object
valueOff: 0,
boxLabel: false,
checked: false,
+ weight : false,
getAutoCreate : function()
{
var cfg = {};
- cfg.cls = 'form-group' //input-group
+ cfg.cls = 'form-group checkbox' //input-group
+
+
+
var input = {
tag: 'input',
id : id,
type : this.inputType,
value : (!this.checked) ? this.valueOff : this.inputValue,
- cls : 'form-box',
+ cls : 'roo-checkbox', //'form-box',
placeholder : this.placeholder || ''
};
+ if (this.weight) { // Validity check?
+ cfg.cls += " checkbox-" + this.weight;
+ }
+
if (this.disabled) {
input.disabled=true;
}
}
});
+
+
var inputblock = input;
+
+
+
if (this.before || this.after) {
inputblock = {
} else {
- Roo.log(" no label && no align");
- cfg.cn = [
-
- inputblock
-
- ];
+ Roo.log(" no label && no align");
+ cfg.cn = [ inputblock ] ;
};
-
- if(this.boxLabel){
- cfg.cn.push({
+ if(this.boxLabel){
+ cfg.cn.push( {
tag: 'label',
'for': id,
cls: 'box-label',
html: this.boxLabel
- })
+
+ });
}
+
+
return cfg;
},
*/
inputEl: function ()
{
- return this.el.select('input.form-box',true).first();
+ return this.el.select('input.roo-checkbox',true).first();
+ },
+
+ label: function()
+ {
+ return this.el.select('label.control-label',true).first();
},
initEvents : function()
var cfg = {};
- cfg.cls = 'form-group' //input-group
+ cfg.cls = 'form-group radio' //input-group
var input = {
tag: 'input',
id : id,
type : this.inputType,
value : (!this.checked) ? this.valueOff : this.inputValue,
- cls : 'form-box',
+ cls : 'roo-radio',
placeholder : this.placeholder || ''
};
-
+ if (this.weight) { // Validity check?
+ cfg.cls += " radio-" + this.weight;
+ }
if (this.disabled) {
input.disabled=true;
}
return cfg;
},
-
+ inputEl: function ()
+ {
+ return this.el.select('input.roo-radio',true).first();
+ },
onClick : function()
{
this.setChecked(true);
//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
+ //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+
+ //var ss = this.el.getStyles( 'background-image', 'background-repeat');
+ //ss['background-attachment'] = 'fixed'; // w3c
dbody.bgProperties = 'fixed'; // ie
- Roo.DomHelper.applyStyles(dbody, ss);
+ //Roo.DomHelper.applyStyles(dbody, ss);
Roo.EventManager.on(this.doc, {
//'mousedown': this.onEditorEvent,
'mouseup': this.onEditorEvent,
node.removeAttribute(a.name);
continue;
}
- if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
- cleanAttr(a.name,a.value); // fixme..
- continue;
+ if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
+ cleanAttr(a.name,a.value); // fixme..
+ continue;
+ }
+ if (a.name == 'style') {
+ cleanStyle(a.name,a.value);
+ continue;
+ }
+ /// clean up MS crap..
+ // tecnically this should be a list of valid class'es..
+
+
+ if (a.name == 'class') {
+ if (a.value.match(/^Mso/)) {
+ node.className = '';
+ }
+
+ if (a.value.match(/body/)) {
+ node.className = '';
+ }
+ continue;
+ }
+
+ // style cleanup!?
+ // class cleanup?
+
+ }
+
+
+ this.cleanUpChildren(node);
+
+
+ },
+ /**
+ * Clean up MS wordisms...
+ */
+ cleanWord : function(node)
+ {
+ var _t = this;
+ var cleanWordChildren = function()
+ {
+ if (!node.childNodes.length) {
+ return;
+ }
+ for (var i = node.childNodes.length-1; i > -1 ; i--) {
+ _t.cleanWord(node.childNodes[i]);
+ }
+ }
+
+
+ if (!node) {
+ this.cleanWord(this.doc.body);
+ return;
+ }
+ 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 (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
+ node.parentNode.removeChild(node);
+ return;
+ }
+
+ // remove - but keep children..
+ if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)) {
+ while (node.childNodes.length) {
+ var cn = node.childNodes[0];
+ node.removeChild(cn);
+ node.parentNode.insertBefore(cn, node);
+ }
+ node.parentNode.removeChild(node);
+ cleanWordChildren();
+ return;
+ }
+ // clean styles
+ if (node.className.length) {
+
+ var cn = node.className.split(/\W+/);
+ var cna = [];
+ Roo.each(cn, function(cls) {
+ if (cls.match(/Mso[a-zA-Z]+/)) {
+ return;
+ }
+ cna.push(cls);
+ });
+ node.className = cna.length ? cna.join(' ') : '';
+ if (!cna.length) {
+ node.removeAttribute("class");
+ }
+ }
+
+ if (node.hasAttribute("lang")) {
+ node.removeAttribute("lang");
+ }
+
+ if (node.hasAttribute("style")) {
+
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
+ return;
+ }
+ var kv = s.split(":");
+ if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
+ return;
+ }
+ // what ever is left... we allow.
+ nstyle.push(s);
+ });
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
+ }
+ }
+
+ cleanWordChildren();
+
+
+ },
+ domToHTML : function(currentElement, depth, nopadtext) {
+
+ depth = depth || 0;
+ nopadtext = nopadtext || false;
+
+ if (!currentElement) {
+ return this.domToHTML(this.doc.body);
+ }
+
+ //Roo.log(currentElement);
+ var j;
+ var allText = false;
+ var nodeName = currentElement.nodeName;
+ var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
+
+ if (nodeName == '#text') {
+ return currentElement.nodeValue;
+ }
+
+
+ var ret = '';
+ if (nodeName != 'BODY') {
+
+ var i = 0;
+ // Prints the node tagName, such as <A>, <IMG>, etc
+ if (tagName) {
+ var attr = [];
+ for(i = 0; i < currentElement.attributes.length;i++) {
+ // quoting?
+ var aname = currentElement.attributes.item(i).name;
+ if (!currentElement.attributes.item(i).value.length) {
+ continue;
+ }
+ attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
+ }
+
+ ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
+ }
+ else {
+
+ // eack
+ }
+ } else {
+ tagName = false;
+ }
+ if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
+ return ret;
}
- if (a.name == 'style') {
- cleanStyle(a.name,a.value);
- continue;
+ if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
+ nopadtext = true;
}
- /// clean up MS crap..
- // tecnically this should be a list of valid class'es..
- if (a.name == 'class') {
- if (a.value.match(/^Mso/)) {
- node.className = '';
+ // Traverse the tree
+ i = 0;
+ var currentElementChild = currentElement.childNodes.item(i);
+ var allText = true;
+ var innerHTML = '';
+ lastnode = '';
+ while (currentElementChild) {
+ // Formatting code (indent the tree so it looks nice on the screen)
+ var nopad = nopadtext;
+ if (lastnode == 'SPAN') {
+ nopad = true;
}
-
- if (a.value.match(/body/)) {
- node.className = '';
+ // text
+ if (currentElementChild.nodeName == '#text') {
+ var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
+ if (!nopad && toadd.length > 80) {
+ innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
+ }
+ innerHTML += toadd;
+
+ i++;
+ currentElementChild = currentElement.childNodes.item(i);
+ lastNode = '';
+ continue;
}
- continue;
+ allText = false;
+
+ innerHTML += nopad ? '' : "\n" + (new Array( depth + 1 )).join( " " );
+
+ // Recursively traverse the tree structure of the child node
+ innerHTML += this.domToHTML(currentElementChild, depth+1, nopadtext);
+ lastnode = currentElementChild.nodeName;
+ i++;
+ currentElementChild=currentElement.childNodes.item(i);
+ }
+
+ ret += innerHTML;
+
+ if (!allText) {
+ // The remaining code is mostly for formatting the tree
+ ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
}
- // style cleanup!?
- // class cleanup?
+
+ if (tagName) {
+ ret+= "</"+tagName+">";
+ }
+ return ret;
}
-
-
- this.cleanUpChildren(node);
-
-
- }
-
// hide stuff that is not compatible
/**
Roo.log("create toolbars");
- this.toolbars = [ new Roo.bootstrap.HtmlEditor.ToolbarStandard({editor: this} ) ];
+ this.toolbars = [ new Roo.bootstrap.htmleditor.ToolbarStandard({editor: this} ) ];
this.toolbars[0].render(this.toolbarContainer());
return;
-
+Roo.namespace('Roo.bootstrap.htmleditor');
/**
* @class Roo.bootstrap.HtmlEditorToolbar1
* Basic Toolbar
* .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
*/
-Roo.bootstrap.HtmlEditor.ToolbarStandard = function(config)
+Roo.bootstrap.htmleditor.ToolbarStandard = function(config)
{
Roo.apply(this, config);
colors : true,
specialElements : true
});
- Roo.bootstrap.HtmlEditor.ToolbarStandard.superclass.constructor.call(this, config);
+ Roo.bootstrap.htmleditor.ToolbarStandard.superclass.constructor.call(this, config);
this.editor = config.editor;
this.editorcore = config.editor.editorcore;
//Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
// dont call parent... till later.
}
-Roo.extend(Roo.bootstrap.HtmlEditor.ToolbarStandard, Roo.bootstrap.Navbar, {
-
-
+Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar, {
+
bar : true,
editor : false,
{
// Roo.log("Call onRender: " + this.xtype);
- Roo.bootstrap.HtmlEditor.ToolbarStandard.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.htmleditor.ToolbarStandard.superclass.onRender.call(this, ct, position);
Roo.log(this.el);
this.el.dom.style.marginBottom = '0';
var _this = this;
*/
- this.xtype = 'Navbar';
+ this.xtype = 'NavSimplebar';
for(var i=0;i< children.length;i++) {
-
-/**
- * @class Roo.bootstrap.Table.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
+/*
+ * 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.bootstrap.Table.AbstractSelectionModel = function(){
- this.locked = false;
- Roo.bootstrap.Table.AbstractSelectionModel.superclass.constructor.call(this);
-};
-
-
-Roo.extend(Roo.bootstrap.Table.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;
- }
-});
/**
- * @class Roo.bootstrap.Table.ColumnModel
+ * @class Roo.grid.ColumnModel
* @extends Roo.util.Observable
- * This is the default implementation of a ColumnModel used by the bootstrap table. It defines
- * the columns in the table.
+ * 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.bootstrap.Table.ColumnModel = function(config){
+Roo.grid.ColumnModel = function(config){
/**
* The config passed into the constructor
*/
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);
-// }
-
+ 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;
}
*/
"columnlockchange" : true
});
- Roo.bootstrap.Table.ColumnModel.superclass.constructor.call(this);
+ Roo.grid.ColumnModel.superclass.constructor.call(this);
};
-Roo.extend(Roo.bootstrap.Table.ColumnModel, Roo.util.Observable, {
+Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
/**
* @cfg {String} header The header text to display in the Grid view.
*/
* @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.
*/
getRenderer : function(col){
if(!this.config[col].renderer){
- return Roo.bootstrap.Table.ColumnModel.defaultRenderer;
+ return Roo.grid.ColumnModel.defaultRenderer;
}
return this.config[col].renderer;
},
}
});
-Roo.bootstrap.Table.ColumnModel.defaultRenderer = function(value){
+Roo.grid.ColumnModel.defaultRenderer = function(value){
if(typeof value == "string" && value.length < 1){
return " ";
}
};
// Alias for backwards compatibility
-Roo.bootstrap.Table.DefaultColumnModel = Roo.bootstrap.Table.ColumnModel;
+Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
+
+/**
+ * @class Roo.bootstrap.Table.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.bootstrap.Table.AbstractSelectionModel = function(){
+ this.locked = false;
+ Roo.bootstrap.Table.AbstractSelectionModel.superclass.constructor.call(this);
+};
+
+
+Roo.extend(Roo.bootstrap.Table.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;
+ }
+});
/**
* @extends Roo.bootstrap.Table.AbstractSelectionModel
* @class Roo.bootstrap.Table.RowSelectionModel
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.bootstrap.PagingToolbar
+ * @extends Roo.Row
+ * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
+ * @constructor
+ * Create a new PagingToolbar
+ * @param {Object} config The config object
+ */
+Roo.bootstrap.PagingToolbar = function(config)
+{
+ // old args format still supported... - xtype is prefered..
+ // created from xtype...
+ var ds = config.dataSource;
+ var items = [];
+ if (config.items) {
+ items = config.items;
+ config.items = [];
+ }
+
+ Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
+ this.ds = ds;
+ this.cursor = 0;
+ if (ds) {
+ this.bind(ds);
+ }
+
+ this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+
+ // supprot items array.
+
+ Roo.each(items, function(e) {
+ this.add(Roo.factory(e));
+ },this);
+
+
+
+
+
+};
+
+Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
+ /**
+ * @cfg {Roo.data.Store} dataSource
+ * The underlying data store providing the paged data
+ */
+ /**
+ * @cfg {String/HTMLElement/Element} container
+ * container The id or element that will contain the toolbar
+ */
+ /**
+ * @cfg {Boolean} displayInfo
+ * True to display the displayMsg (defaults to false)
+ */
+ /**
+ * @cfg {Number} pageSize
+ * The number of records to display per page (defaults to 20)
+ */
+ pageSize: 20,
+ /**
+ * @cfg {String} displayMsg
+ * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
+ */
+ displayMsg : 'Displaying {0} - {1} of {2}',
+ /**
+ * @cfg {String} emptyMsg
+ * The message to display when no records are found (defaults to "No data to display")
+ */
+ emptyMsg : 'No data to display',
+ /**
+ * Customizable piece of the default paging text (defaults to "Page")
+ * @type String
+ */
+ beforePageText : "Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "of %0")
+ * @type String
+ */
+ afterPageText : "of {0}",
+ /**
+ * Customizable piece of the default paging text (defaults to "First Page")
+ * @type String
+ */
+ firstText : "First Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Previous Page")
+ * @type String
+ */
+ prevText : "Previous Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Next Page")
+ * @type String
+ */
+ nextText : "Next Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Last Page")
+ * @type String
+ */
+ lastText : "Last Page",
+ /**
+ * Customizable piece of the default paging text (defaults to "Refresh")
+ * @type String
+ */
+ refreshText : "Refresh",
+
+ // private
+ onRender : function(ct, position)
+ {
+ Roo.bootstrap.PagingToolbar.superclass.onRender.call(this, ct, position);
+ this.navgroup.parentId = this.id;
+ this.navgroup.onRender(this.el, null);
+ // add the buttons to the navgroup
+
+ this.first = this.navgroup.addItem({
+ tooltip: this.firstText,
+ cls: "prev",
+ icon : 'fa fa-backward',
+ disabled: true,
+ listeners : { click : this.onClick.createDelegate(this, ["first"]) }
+ });
+
+ this.prev = this.navgroup.addItem({
+ tooltip: this.prevText,
+ cls: "prev",
+ icon : 'fa fa-step-backward',
+ disabled: true,
+ listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
+ });
+ //this.addSeparator();
+
+
+ var field = this.navgroup.addItem( {
+ tagtype : 'span',
+ cls : 'x-paging-position',
+
+ html : this.beforePageText +
+ '<input type="text" size="3" value="1" class="x-grid-page-number">' +
+ '<span class="x-paging-after">' + String.format(this.afterPageText, 1) + '</span>'
+ } ); //?? escaped?
+
+ this.field = field.el.select('input', true).first();
+ this.field.on("keydown", this.onPagingKeydown, this);
+ this.field.on("focus", function(){this.dom.select();});
+
+
+ this.afterTextEl = field.el.select('.x-paging-after').first();
+ //this.field.setHeight(18);
+ //this.addSeparator();
+ this.next = this.navgroup.addItem({
+ tooltip: this.nextText,
+ cls: "next",
+ html : ' <i class="fa fa-step-forward">',
+ disabled: true,
+ listeners : { click : this.onClick.createDelegate(this, ["next"]) }
+ });
+ this.last = this.navgroup.addItem({
+ tooltip: this.lastText,
+ icon : 'fa fa-forward',
+ cls: "next",
+ disabled: true,
+ listeners : { click : this.onClick.createDelegate(this, ["last"]) }
+ });
+ //this.addSeparator();
+ this.loading = this.navgroup.addItem({
+ tooltip: this.refreshText,
+ icon: 'fa fa-refresh',
+
+ listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
+ });
+
+ if(this.displayInfo){
+ var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info' } );
+ this.displayEl = navel.el.select('a',true).first();
+ }
+
+ },
+
+ // private
+ updateInfo : function(){
+ if(this.displayEl){
+ var count = this.ds.getCount();
+ var msg = count == 0 ?
+ this.emptyMsg :
+ String.format(
+ this.displayMsg,
+ this.cursor+1, this.cursor+count, this.ds.getTotalCount()
+ );
+ this.displayEl.update(msg);
+ }
+ },
+
+ // private
+ onLoad : function(ds, r, o){
+ this.cursor = o.params ? o.params.start : 0;
+ var d = this.getPageData(), ap = d.activePage, ps = d.pages;
+
+ this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
+ this.field.dom.value = ap;
+ this.first.setDisabled(ap == 1);
+ this.prev.setDisabled(ap == 1);
+ this.next.setDisabled(ap == ps);
+ this.last.setDisabled(ap == ps);
+ this.loading.enable();
+ this.updateInfo();
+ },
+
+ // private
+ getPageData : function(){
+ var total = this.ds.getTotalCount();
+ return {
+ total : total,
+ activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
+ pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
+ };
+ },
+
+ // private
+ onLoadError : function(){
+ this.loading.enable();
+ },
+
+ // private
+ onPagingKeydown : function(e){
+ var k = e.getKey();
+ var d = this.getPageData();
+ if(k == e.RETURN){
+ var v = this.field.dom.value, pageNum;
+ if(!v || isNaN(pageNum = parseInt(v, 10))){
+ this.field.dom.value = d.activePage;
+ return;
+ }
+ pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
+ this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+ e.stopEvent();
+ }
+ else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
+ {
+ var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
+ this.field.dom.value = pageNum;
+ this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
+ e.stopEvent();
+ }
+ else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
+ {
+ var v = this.field.dom.value, pageNum;
+ var increment = (e.shiftKey) ? 10 : 1;
+ if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
+ increment *= -1;
+ if(!v || isNaN(pageNum = parseInt(v, 10))) {
+ this.field.dom.value = d.activePage;
+ return;
+ }
+ else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
+ {
+ this.field.dom.value = parseInt(v, 10) + increment;
+ pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
+ this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+ }
+ e.stopEvent();
+ }
+ },
+
+ // private
+ beforeLoad : function(){
+ if(this.loading){
+ this.loading.disable();
+ }
+ },
+
+ // private
+ onClick : function(which){
+ var ds = this.ds;
+ if (!ds) {
+ return;
+ }
+ switch(which){
+ case "first":
+ ds.load({params:{start: 0, limit: this.pageSize}});
+ break;
+ case "prev":
+ ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
+ break;
+ case "next":
+ ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
+ break;
+ case "last":
+ var total = ds.getTotalCount();
+ var extra = total % this.pageSize;
+ var lastStart = extra ? (total - extra) : total-this.pageSize;
+ ds.load({params:{start: lastStart, limit: this.pageSize}});
+ break;
+ case "refresh":
+ ds.load({params:{start: this.cursor, limit: this.pageSize}});
+ break;
+ }
+ },
+
+ /**
+ * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
+ * @param {Roo.data.Store} store The data store to unbind
+ */
+ unbind : function(ds){
+ ds.un("beforeload", this.beforeLoad, this);
+ ds.un("load", this.onLoad, this);
+ ds.un("loadexception", this.onLoadError, this);
+ ds.un("remove", this.updateInfo, this);
+ ds.un("add", this.updateInfo, this);
+ this.ds = undefined;
+ },
+
+ /**
+ * Binds the paging toolbar to the specified {@link Roo.data.Store}
+ * @param {Roo.data.Store} store The data store to bind
+ */
+ bind : function(ds){
+ ds.on("beforeload", this.beforeLoad, this);
+ ds.on("load", this.onLoad, this);
+ ds.on("loadexception", this.onLoadError, this);
+ ds.on("remove", this.updateInfo, this);
+ ds.on("add", this.updateInfo, this);
+ this.ds = ds;
+ }
});/*
* - LGPL
*
projects / roojs1 / blobdiff