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.addEvents({
- // raw events
- /**
- * @event resize
- * When window resize
- * @param {Roo.EventObject} e
- */
- "resize" : true
- });
-
this.el = Roo.get(document.body);
if (this.cls && this.cls.length) {
Roo.get(document.body).addClass(this.cls);
}
// style??? xttr???
*/
- },
-
- initEvents: function()
- {
- this.el.on('resize', this.onResize, this);
-
-
+ }
- },
- onResize: function ()
- {
- this.fireEvent('resize', this);
- }
+
});
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-text',true).first().dom.innerHTML = str;
},
+ getText : function()
+ {
+ return this.el.select('.roo-button-text',true).first().dom.innerHTML;
+ },
hide: function() {
unmask : function()
{
this.maskEl.hide();
- }
+ }
+
},
+ 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
- * @extends Roo.bootstrap.Component
- * Bootstrap Navbar.Button class
- * @cfg {String} href link to
- * @cfg {String} html content of button
- * @cfg {String} badge text inside badge
- * @cfg {String} glyphicon name of glyphicon
- * @cfg {String} icon name of font awesome icon
- * @cfg {Boolean} active Is item active
- * @cfg {Boolean} preventDefault (true | false) default false
- * @cfg {String} tabId the tab that this item activates.
-
- * @constructor
- * Create a new Navbar Button
- * @param {Object} config The config object
- */
-Roo.bootstrap.Navbar.Item = function(config){
- Roo.bootstrap.Navbar.Item.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.Navbar.Item} this
- * @param {boolean} state the new state
-
- */
- 'changed': true
- });
-
-};
-
-Roo.extend(Roo.bootstrap.Navbar.Item, Roo.bootstrap.Component, {
-
- href: false,
- html: '',
- badge: '',
- icon: false,
- glyphicon: false,
- active: false,
- preventDefault : false,
- tabId : 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>'
- }
-
- 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'
- }
- ];
-
- 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>'
- }
-
- return cfg;
- },
- initEvents: function() {
- // Roo.log('init events?');
- // Roo.log(this.el.dom);
- this.el.select('a',true).on('click', this.onClick, this);
- // at this point parent should be available..
- this.parent().register(this);
- },
-
- onClick : function(e)
- {
- if(this.preventDefault){
- e.preventDefault();
- }
-
- if(this.fireEvent('click', this, e) === false){
- return;
- };
-
- if (['tabs','pills'].indexOf(this.parent().type)!==-1) {
- if (typeof(this.parent().setActiveItem) !== 'undefined') {
- this.parent().setActiveItem(this);
- }
-
-
-
- }
- },
-
- isActive: function () {
- 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 should not be here...
-
-});
-
-
- /*
- * - LGPL
- *
- * row
- *
- */
-
/**
* @class Roo.bootstrap.NavItem
* @extends Roo.bootstrap.Component
* @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 Item
active: false,
preventDefault : false,
tabId : false,
+ tagtype : 'a',
+ disabled : false,
getAutoCreate : function(){
cls: 'nav-item',
cn : [
{
- tag: 'a',
+ tag: this.tagtype,
href : this.href || "#",
html: this.html || ''
}
// 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>'
+ 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;
+ cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
}
}
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);
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;
};
}
- }
+ },
// 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');
+ }
+
+ }
});
/**
* @class Roo.bootstrap.NavSidebarItem
- * @extends Roo.bootstrap.Component
+ * @extends Roo.bootstrap.NavItem
* Bootstrap Navbar.NavSidebarItem class
* @constructor
* Create a new Navbar Button
/**
* @event changed
* Fires when the active item active state changes
- * @param {Roo.bootstrap.Navbar.Item} this
+ * @param {Roo.bootstrap.NavSidebarItem} this
* @param {boolean} state the new state
*/
* @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.store.on('load', this.onLoad, this);
- this.store.on('beforeload', this.onBeforeLoad, this);
-
- this.store.load();
-
-
-
- },
-
- sort : function(e,el)
- {
- var col = Roo.get(el)
-
- if(!col.hasClass('sortable')){
- return;
+ this.parent().el.setStyle('position', 'relative');
+ if (this.footer) {
+ this.footer.parentId = this.id;
+ this.footer.onRender(this.el.select('tfoot tr td'), null);
}
- var sort = col.attr('sort');
- var dir = 'ASC';
-
- if(col.hasClass('glyphicon-arrow-up')){
- dir = 'DESC';
- }
- this.store.sortInfo = {field : sort, direction : dir};
+ // mask should be using Roo.bootstrap.Mask...
- this.store.load();
+ 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);
+
+ this.store.load();
+
+
+
+ },
+
+ sort : function(e,el)
+ {
+ var col = Roo.get(el)
+
+ if(!col.hasClass('sortable')){
+ return;
+ }
+
+ var sort = col.attr('sort');
+ var dir = 'ASC';
+
+ if(col.hasClass('glyphicon-arrow-up')){
+ dir = 'DESC';
+ }
+
+ this.store.sortInfo = {field : sort, direction : dir};
+
+ this.store.load();
},
renderHeader : function()
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){
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()
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,
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 (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
+ nopadtext = true;
+ }
+
+
+ // 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;
+ }
+ // 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;
+ }
+ 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( " " );
+ }
+
+
+ if (tagName) {
+ ret+= "</"+tagName+">";
+ }
+ return ret;
+
+ }
// 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.NavSimplebar, {
-
-
+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;
-
-/**
- * @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
*