}
if (this.icon) {
- cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + + (cfg.html || '')
+ cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + (cfg.html || '');
}
return cfg;
}
return titleEl.dom.innerHTML;
+ },
+
+ show : function() {
+ this.el.removeClass('hidden');
+ },
+ hide: function() {
+ if (!this.el.hasClass('hidden')) {
+ this.el.addClass('hidden');
+ }
+
}
});
/**
* Shorthand for {@link Roo.MessageBox}
*/
-Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox
+Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
Roo.Msg = Roo.Msg || Roo.MessageBox;
/*
* - LGPL
if (typeof (this.menu) != 'undefined') {
this.menu.parentType = this.xtype;
this.menu.triggerEl = this.el;
- this.addxtype(Roo.apply({}, this.menu));
+ this.menu = this.addxtype(Roo.apply({}, this.menu));
}
this.el.select('a',true).on('click', this.onClick, this);
onClick : function(e)
{
-
- if(this.preventDefault){
+ if(this.preventDefault || this.href == '#'){
e.preventDefault();
}
+
if (this.disabled) {
return;
}
* @cfg {String} href the link
* @cfg {Boolean} preventDefault (true | false) default true
* @cfg {Boolean} active (true | false) default false
+ * @cfg {Boolean} disabled default false
*
*
* @constructor
preventDefault: true,
active : false,
cls : false,
+ disabled: false,
getAutoCreate : function(){
var cfg= {
cfg.cls = this.cls;
}
+ if(this.disabled){
+ cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' disabled' : 'disabled';
+ }
+
if(this.active){
cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' active' : 'active';
}
e.preventDefault();
}
+ if(this.disabled){
+ return;
+ }
+
this.fireEvent('click', this, e);
}
/**
* @cfg {String} cursor (Optional)
*/
+ /**
+ * @cfg {String} tooltip (Optional)
+ */
/**
* Returns the id of the column at the specified index.
* @param {Number} index The column index
* @param {Roo.bootstrap.Table} this
* @param {Object} rowcfg contains record rowIndex colIndex and rowClass - set rowClass to add a style.
*/
- 'rowclass' : true
+ 'rowclass' : true,
+ /**
+ * @event rowsrendered
+ * Fires when all the rows have been rendered
+ * @param {Roo.bootstrap.Table} this
+ */
+ 'rowsrendered' : true
});
};
return;
}
-
if(e.getTarget().nodeName.toLowerCase() != 'td'){
cell = cell.findParent('td', false, true);
}
+ if(!cell || typeof(cell) == 'undefined'){
+ return;
+ }
+
var row = cell.findParent('tr', false, true);
+
+ if(!row || typeof(row) == 'undefined'){
+ return;
+ }
+
var cellIndex = cell.dom.cellIndex;
- var rowIndex = row.dom.rowIndex - 1;
+ var rowIndex = this.getRowIndex(row);
if(this.CellSelection){
this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
cell = cell.findParent('td', false, true);
}
+ if(!cell || typeof(cell) == 'undefined'){
+ return;
+ }
+
var row = cell.findParent('tr', false, true);
+
+ if(!row || typeof(row) == 'undefined'){
+ return;
+ }
+
var cellIndex = cell.dom.cellIndex;
- var rowIndex = row.dom.rowIndex - 1;
+ var rowIndex = this.getRowIndex(row);
if(this.CellSelection){
this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
sort : function(e,el)
{
- var col = Roo.get(el)
+ var col = Roo.get(el);
if(!col.hasClass('sortable')){
return;
html: cm.getColumnHeader(i)
};
+ if(typeof(config.tooltip) != 'undefined'){
+ c.tooltip = config.tooltip;
+ }
+
if(typeof(config.hidden) != 'undefined' && config.hidden){
c.style += ' display:none;';
}
Roo.each(this.el.select('tbody td', true).elements, function(e){
e.on('mouseout', _this.onMouseout, _this);
});
-
+ this.fireEvent('rowsrendered', this);
//if(this.loadMask){
// this.maskEl.hide();
//}
{
this.refreshRow(record);
},
+
onRemove : function(ds, record, index, isUpdate){
if(isUpdate !== true){
this.fireEvent("beforerowremoved", this, index, record);
}
var bt = this.mainBody.dom;
- if(bt.rows[index]){
- bt.removeChild(bt.rows[index]);
+
+ var rows = this.el.select('tbody > tr', true).elements;
+
+ if(typeof(rows[index]) != 'undefined'){
+ bt.removeChild(rows[index].dom);
}
+// if(bt.rows[index]){
+// bt.removeChild(bt.rows[index]);
+// }
+
if(isUpdate !== true){
//this.stripeRows(index);
//this.syncRowHeights(index, index);
getRowDom : function(rowIndex)
{
- // not sure if I need to check this.. but let's do it anyway..
- return (this.mainBody.dom.rows && (rowIndex-1) < this.mainBody.dom.rows.length ) ?
- this.mainBody.dom.rows[rowIndex] : false
+ var rows = this.el.select('tbody > tr', true).elements;
+
+ return (typeof(rows[rowIndex]) == 'undefined') ? false : rows[rowIndex];
+
},
// returns the object tree for a tr..
- renderRow : function(cm, ds, rowIndex) {
+ renderRow : function(cm, ds, rowIndex)
+ {
var d = ds.getAt(rowIndex);
setRowVisibility : function(rowIndex, state)
{
var bt = this.mainBody.dom;
- if(typeof(bt.rows[rowIndex]) == 'undefined'){
+
+ var rows = this.el.select('tbody > tr', true).elements;
+
+ if(typeof(rows[rowIndex]) == 'undefined'){
return;
}
- bt.rows[rowIndex].style.display = state ? '' : 'none';
+ rows[rowIndex].dom.style.display = state ? '' : 'none';
},
_this.renderCellObject(child);
})
}
+ },
+
+ getRowIndex : function(row)
+ {
+ var rowIndex = -1;
+
+ Roo.each(this.el.select('tbody > tr', true).elements, function(el, index){
+ if(el != row){
+ return;
+ }
+
+ rowIndex = index;
+ });
+
+ return rowIndex;
}
});
return;
}
- if(isSelectAll){ // backspace and delete key
+ if(isSelectAll && event.getCharCode() > 31){ // not backspace and delete key
event.preventDefault();
// this is very hacky as keydown always get's upper case.
if(this.typeAhead){
this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
}
+
},
onDestroy : function(){
rm = true;
return;
}
- })
+ });
if(rm){
return;
this.list.hide();
if(this.tickable){
+ this.hasFocus = false;
this.okBtn.hide();
this.cancelBtn.hide();
this.trigger.show();
onSearchFieldClick : function(e)
{
+ if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
+ this.onTickableFooterButtonClick(e, false, false);
+ return;
+ }
+
if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
return;
}
* Refreshes the view. - called by datachanged on the store. - do not call directly.
*/
refresh : function(){
- Roo.log('refresh');
+ //Roo.log('refresh');
var t = this.tpl;
// if we are using something like 'domtemplate', then
},
onUpdate : function(ds, record){
- Roo.log('on update');
+ // Roo.log('on update');
this.clearSelections();
var index = this.store.indexOf(record);
var n = this.nodes[index];
// --------- FIXME
onAdd : function(ds, records, index)
{
- Roo.log(['on Add', ds, records, index] );
+ //Roo.log(['on Add', ds, records, index] );
this.clearSelections();
if(this.nodes.length == 0){
this.refresh();
},
onRemove : function(ds, record, index){
- Roo.log('onRemove');
+ // Roo.log('onRemove');
this.clearSelections();
var el = this.dataName ?
this.el.child('.roo-tpl-' + this.dataName) :
*/
onBeforeLoad : function(store,opts)
{
- Roo.log('onBeforeLoad');
+ //Roo.log('onBeforeLoad');
if (!opts.add) {
this.el.update("");
}
}
if (this.toggleSelect) {
var m = this.isSelected(item) ? 'unselect' : 'select';
- Roo.log(m);
+ //Roo.log(m);
var _t = this;
_t[m](item, true, false);
return true;
}
var node = this.getNode(nodeInfo);
if(!node || !this.isSelected(node)){
- Roo.log("not selected");
+ //Roo.log("not selected");
return; // not selected.
}
// fireevent???
};
var cal_rows = function() {
- var ret = []
+ var ret = [];
for (var r = 0; r < 6; r++) {
var row= {
tag : 'tr',
if (trigger == 'click') {
on_el.on('click', this.toggle, this);
} else if (trigger != 'manual') {
- var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
- var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
+ var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin';
+ var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
on_el.on(eventIn ,this.enter, this);
on_el.on(eventOut, this.leave, this);
clearTimeout(this.timeout);
- this.hoverState = 'in'
+ this.hoverState = 'in';
if (!this.delay || !this.delay.show) {
this.show();
- return
+ return;
}
var _t = this;
this.timeout = setTimeout(function () {
leave : function() {
clearTimeout(this.timeout);
- this.hoverState = 'out'
+ this.hoverState = 'out';
if (!this.delay || !this.delay.hide) {
this.hide();
- return
+ return;
}
var _t = this;
this.timeout = setTimeout(function () {
if (autoPlace) {
// fixme..
}
- var align = Roo.bootstrap.Popover.alignment[placement]
+ var align = Roo.bootstrap.Popover.alignment[placement];
this.el.alignTo(on_el, align[0],align[1]);
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
return false;
}
- if (this.carousel) {
+ if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
+
this.transition = true;
var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
var lr = dir == 'next' ? 'left' : 'right';
Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
v.setVisibilityMode(Roo.Element.DISPLAY)
v.hide();
- })
+ });
Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
v.setStyle('width', '189px');
if(!this.calendarWeeks){
v.remove();
return;
- };
+ }
- v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today
+ v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
v.attr('colspan', function(i, val){
return parseInt(val) + 1;
});
fillMonths: function()
{
- var i = 0
+ var i = 0;
var months = this.picker().select('>.datepicker-months td', true).first();
months.dom.innerHTML = '';
/**
* @event show
* Fires when this field show.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.DateField} thisthis
* @param {Mixed} date The date value
*/
show : true,
this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.pop = this.picker().select('>.datepicker-time',true).first();
- this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'
+ this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.picker().on('mousedown', this.onMousedown, this);
this.picker().on('click', this.onClick, this);
fireKey: function(e){
if (!this.picker().isVisible()){
- if (e.keyCode == 27) // allow escape to hide and re-show picker
+ if (e.keyCode == 27) { // allow escape to hide and re-show picker
this.show();
+ }
return;
}
/*
* - LGPL
*
- * CheckBox
+ * MonthField
*
*/
/**
- * @class Roo.bootstrap.CheckBox
+ * @class Roo.bootstrap.MonthField
* @extends Roo.bootstrap.Input
- * Bootstrap CheckBox class
+ * Bootstrap MonthField class
*
- * @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
- * @cfg {Boolean} inline inline the element (default false)
+ * @cfg {String} language default en
*
* @constructor
- * Create a new CheckBox
+ * Create a new MonthField
* @param {Object} config The config object
*/
-Roo.bootstrap.CheckBox = function(config){
- Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
-
- this.addEvents({
- /**
- * @event check
- * Fires when the element is checked or unchecked.
- * @param {Roo.bootstrap.CheckBox} this This input
- * @param {Boolean} checked The new checked value
- */
- check : true
- });
+Roo.bootstrap.MonthField = function(config){
+ Roo.bootstrap.MonthField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event show
+ * Fires when this field show.
+ * @param {Roo.bootstrap.MonthField} this
+ * @param {Mixed} date The date value
+ */
+ show : true,
+ /**
+ * @event show
+ * Fires when this field hide.
+ * @param {Roo.bootstrap.MonthField} this
+ * @param {Mixed} date The date value
+ */
+ hide : true,
+ /**
+ * @event select
+ * Fires when select a date.
+ * @param {Roo.bootstrap.MonthField} this
+ * @param {Mixed} date The date value
+ */
+ select : true
+ });
};
-Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
-
- inputType: 'checkbox',
- inputValue: 1,
- valueOff: 0,
- boxLabel: false,
- checked: false,
- weight : false,
- inline: false,
+Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, {
- getAutoCreate : function()
+ onRender: function(ct, position)
{
- var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
- var id = Roo.id();
+ Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
- var cfg = {};
+ this.language = this.language || 'en';
+ this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0];
+ this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
- cfg.cls = 'form-group ' + this.inputType //input-group
+ this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
+ this.isInline = false;
+ this.isInput = true;
+ this.component = this.el.select('.add-on', true).first() || false;
+ this.component = (this.component && this.component.length === 0) ? false : this.component;
+ this.hasInput = this.component && this.inputEL().length;
- if(this.inline){
- cfg.cls += ' ' + this.inputType + '-inline';
- }
+ this.minViewMode = 1;
+ this.viewMode = 1;
+
+ this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
- var input = {
- tag: 'input',
- id : id,
- type : this.inputType,
- value : (!this.checked) ? this.valueOff : this.inputValue,
- cls : 'roo-' + this.inputType, //'form-box',
- placeholder : this.placeholder || ''
-
- };
+ this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- if (this.weight) { // Validity check?
- cfg.cls += " " + this.inputType + "-" + this.weight;
- }
+ this.picker().on('mousedown', this.onMousedown, this);
+ this.picker().on('click', this.onClick, this);
- if (this.disabled) {
- input.disabled=true;
- }
+ this.picker().addClass('datepicker-dropdown');
- if(this.checked){
- input.checked = this.checked;
- }
+ this.startViewMode = this.viewMode;
+
+ Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
+ v.setStyle('width', '189px');
+ });
- if (this.name) {
- input.name = this.name;
+ this.fillMonths();
+ this.update();
+
+ if(this.isInline) {
+ this.show();
}
+ },
+
+ setValue: function(v)
+ {
+ Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
- if (this.size) {
- input.cls += ' input-' + this.size;
+ this.update();
+
+ this.fireEvent('select', this, this.date);
+
+ },
+
+ getValue: function()
+ {
+ return this.value;
+ },
+
+ onClick: function(e)
+ {
+ e.stopPropagation();
+ e.preventDefault();
+
+ var target = e.getTarget();
+
+ if(target.nodeName.toLowerCase() === 'i'){
+ target = Roo.get(target).dom.parentNode;
}
- var settings=this;
- ['xs','sm','md','lg'].map(function(size){
- if (settings[size]) {
- cfg.cls += ' col-' + size + '-' + settings[size];
- }
- });
+ var nodeName = target.nodeName;
+ var className = target.className;
+ var html = target.innerHTML;
-
+ if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
+ return;
+ }
- var inputblock = input;
+ this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ this.hide();
+
+ },
+
+ picker : function()
+ {
+ return this.pickerEl;
+ },
+
+ fillMonths: function()
+ {
+ var i = 0
+ var months = this.picker().select('>.datepicker-months td', true).first();
+ months.dom.innerHTML = '';
- if (this.before || this.after) {
-
- inputblock = {
- cls : 'input-group',
- cn : []
- };
- if (this.before) {
- inputblock.cn.push({
- tag :'span',
- cls : 'input-group-addon',
- html : this.before
- });
- }
- inputblock.cn.push(input);
- if (this.after) {
- inputblock.cn.push({
- tag :'span',
- cls : 'input-group-addon',
- html : this.after
- });
+ while (i < 12) {
+ var month = {
+ tag: 'span',
+ cls: 'month',
+ html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
}
- };
+ months.createChild(month);
+ }
- if (align ==='left' && this.fieldLabel.length) {
- Roo.log("left and has label");
- cfg.cn = [
-
- {
- tag: 'label',
- 'for' : id,
- cls : 'control-label col-md-' + this.labelWidth,
+ },
+
+ update: function()
+ {
+ var _this = this;
+
+ if(typeof(this.vIndex) == 'undefined' && this.value.length){
+ this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
+ }
+
+ Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
+ e.removeClass('active');
+
+ if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
+ e.addClass('active');
+ }
+ })
+ },
+
+ place: function()
+ {
+ if(this.isInline) return;
+
+ this.picker().removeClass(['bottom', 'top']);
+
+ if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
+ /*
+ * place to the top of element!
+ *
+ */
+
+ this.picker().addClass('top');
+ this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
+
+ return;
+ }
+
+ this.picker().addClass('bottom');
+
+ this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
+ },
+
+ onFocus : function()
+ {
+ Roo.bootstrap.MonthField.superclass.onFocus.call(this);
+ this.show();
+ },
+
+ onBlur : function()
+ {
+ Roo.bootstrap.MonthField.superclass.onBlur.call(this);
+
+ var d = this.inputEl().getValue();
+
+ this.setValue(d);
+
+ this.hide();
+ },
+
+ show : function()
+ {
+ this.picker().show();
+ this.picker().select('>.datepicker-months', true).first().show();
+ this.update();
+ this.place();
+
+ this.fireEvent('show', this, this.date);
+ },
+
+ hide : function()
+ {
+ if(this.isInline) return;
+ this.picker().hide();
+ this.fireEvent('hide', this, this.date);
+
+ },
+
+ onMousedown: function(e)
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ },
+
+ keyup: function(e)
+ {
+ Roo.bootstrap.MonthField.superclass.keyup.call(this);
+ this.update();
+ },
+
+ fireKey: function(e)
+ {
+ if (!this.picker().isVisible()){
+ if (e.keyCode == 27) // allow escape to hide and re-show picker
+ this.show();
+ return;
+ }
+
+ var dir;
+
+ switch(e.keyCode){
+ case 27: // escape
+ this.hide();
+ e.preventDefault();
+ break;
+ case 37: // left
+ case 39: // right
+ dir = e.keyCode == 37 ? -1 : 1;
+
+ this.vIndex = this.vIndex + dir;
+
+ if(this.vIndex < 0){
+ this.vIndex = 0;
+ }
+
+ if(this.vIndex > 11){
+ this.vIndex = 11;
+ }
+
+ if(isNaN(this.vIndex)){
+ this.vIndex = 0;
+ }
+
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+
+ break;
+ case 38: // up
+ case 40: // down
+
+ dir = e.keyCode == 38 ? -1 : 1;
+
+ this.vIndex = this.vIndex + dir * 4;
+
+ if(this.vIndex < 0){
+ this.vIndex = 0;
+ }
+
+ if(this.vIndex > 11){
+ this.vIndex = 11;
+ }
+
+ if(isNaN(this.vIndex)){
+ this.vIndex = 0;
+ }
+
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ break;
+
+ case 13: // enter
+
+ if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ }
+
+ this.hide();
+ e.preventDefault();
+ break;
+ case 9: // tab
+ if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ }
+ this.hide();
+ break;
+ case 16: // shift
+ case 17: // ctrl
+ case 18: // alt
+ break;
+ default :
+ this.hide();
+
+ }
+ },
+
+ remove: function()
+ {
+ this.picker().remove();
+ }
+
+});
+
+Roo.apply(Roo.bootstrap.MonthField, {
+
+ content : {
+ tag: 'tbody',
+ cn: [
+ {
+ tag: 'tr',
+ cn: [
+ {
+ tag: 'td',
+ colspan: '7'
+ }
+ ]
+ }
+ ]
+ },
+
+ dates:{
+ en: {
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+ }
+ }
+});
+
+Roo.apply(Roo.bootstrap.MonthField, {
+
+ template : {
+ tag: 'div',
+ cls: 'datepicker dropdown-menu roo-dynamic',
+ cn: [
+ {
+ tag: 'div',
+ cls: 'datepicker-months',
+ cn: [
+ {
+ tag: 'table',
+ cls: 'table-condensed',
+ cn:[
+ Roo.bootstrap.DateField.content
+ ]
+ }
+ ]
+ }
+ ]
+ }
+});
+
+
+
+
+ /*
+ * - LGPL
+ *
+ * CheckBox
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.CheckBox
+ * @extends Roo.bootstrap.Input
+ * Bootstrap CheckBox class
+ *
+ * @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
+ * @cfg {Boolean} inline inline the element (default false)
+ *
+ * @constructor
+ * Create a new CheckBox
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CheckBox = function(config){
+ Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event check
+ * Fires when the element is checked or unchecked.
+ * @param {Roo.bootstrap.CheckBox} this This input
+ * @param {Boolean} checked The new checked value
+ */
+ check : true
+ });
+};
+
+Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
+
+ inputType: 'checkbox',
+ inputValue: 1,
+ valueOff: 0,
+ boxLabel: false,
+ checked: false,
+ weight : false,
+ inline: false,
+
+ getAutoCreate : function()
+ {
+ var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
+
+ var id = Roo.id();
+
+ var cfg = {};
+
+ cfg.cls = 'form-group ' + this.inputType; //input-group
+
+ if(this.inline){
+ cfg.cls += ' ' + this.inputType + '-inline';
+ }
+
+ var input = {
+ tag: 'input',
+ id : id,
+ type : this.inputType,
+ value : this.inputType == 'radio' ? this.inputValue : ((!this.checked) ? this.valueOff : this.inputValue),
+ cls : 'roo-' + this.inputType, //'form-box',
+ placeholder : this.placeholder || ''
+
+ };
+
+ if (this.weight) { // Validity check?
+ cfg.cls += " " + this.inputType + "-" + this.weight;
+ }
+
+ if (this.disabled) {
+ input.disabled=true;
+ }
+
+ if(this.checked){
+ input.checked = this.checked;
+ }
+
+ if (this.name) {
+ input.name = this.name;
+ }
+
+ if (this.size) {
+ input.cls += ' input-' + this.size;
+ }
+
+ var settings=this;
+
+ ['xs','sm','md','lg'].map(function(size){
+ if (settings[size]) {
+ cfg.cls += ' col-' + size + '-' + settings[size];
+ }
+ });
+
+
+
+ var inputblock = input;
+
+
+
+
+ if (this.before || this.after) {
+
+ inputblock = {
+ cls : 'input-group',
+ cn : []
+ };
+
+ if (this.before) {
+ inputblock.cn.push({
+ tag :'span',
+ cls : 'input-group-addon',
+ html : this.before
+ });
+ }
+
+ inputblock.cn.push(input);
+
+ if (this.after) {
+ inputblock.cn.push({
+ tag :'span',
+ cls : 'input-group-addon',
+ html : this.after
+ });
+ }
+
+ }
+
+ if (align ==='left' && this.fieldLabel.length) {
+ Roo.log("left and has label");
+ cfg.cn = [
+
+ {
+ tag: 'label',
+ 'for' : id,
+ cls : 'control-label col-md-' + this.labelWidth,
html : this.fieldLabel
},
cfg.cn = [ inputblock ] ;
- };
- if(this.boxLabel){
- cfg.cn.push( {
+ }
+ if(this.boxLabel){
+ var boxLabelCfg = {
tag: 'label',
- 'for': id,
+ //'for': id, // box label is handled by onclick - so no for...
cls: 'box-label',
html: this.boxLabel
-
- });
+ }
+
+ if(this.tooltip){
+ boxLabelCfg.tooltip = this.tooltip;
+ }
+
+ cfg.cn.push(boxLabelCfg);
}
return this.el.select('input.roo-' + this.inputType,true).first();
},
- label: function()
+ labelEl: function()
{
return this.el.select('label.control-label',true).first();
},
+ /* depricated... */
+
+ label: function()
+ {
+ return this.labelEl();
+ },
initEvents : function()
{
// Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
this.inputEl().on('click', this.onClick, this);
+ if (this.boxLabel) {
+ this.el.select('label.box-label',true).first().on('click', this.onClick, this);
+ }
},
getGroupValue : function()
{
+ if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
+ return '';
+ }
+
return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
},
e.dom.checked = true;
}
});
-
+
if(suppressEvent !== true){
this.fireEvent('check', this, true);
}
* - LGPL
*
* Radio
+ *
+ *
+ * not inline
+ *<div class="radio">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+</div>
+ *
+ *
+ *inline
+ *<span>
+ *<label class="radio-inline">fieldLabel</label>
+ *<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+</label>
+<span>
+ *
*
*/
getAutoCreate : function()
{
var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
+ align = align || 'left'; // default...
+
+
var id = Roo.id();
- var cfg = {};
+ var cfg = {
+ tag : this.inline ? 'span' : 'div',
+ cls : '',
+ cn : []
+ };
+
+ var inline = this.inline ? ' radio-inline' : '';
+
+ var lbl = {
+ tag: 'label' ,
+ // does not need for, as we wrap the input with it..
+ 'for' : id,
+ cls : 'control-label box-label' + inline,
+ cn : []
+ };
+ var labelWidth = this.labelWidth ? this.labelWidth *1 : 100;
+
+ var fieldLabel = {
+ tag: 'label' ,
+ //cls : 'control-label' + inline,
+ html : this.fieldLabel,
+ style : 'width:' + labelWidth + 'px;line-height:1;vertical-align:bottom;cursor:default;' // should be css really.
+ };
+
+
- cfg.cls = 'form-group radio' //input-group
var input = {
tag: 'input',
id : id,
type : this.inputType,
- value : (!this.checked) ? this.valueOff : this.inputValue,
+ //value : (!this.checked) ? this.valueOff : this.inputValue,
+ value : this.inputValue,
cls : 'roo-radio',
- placeholder : this.placeholder || ''
+ placeholder : this.placeholder || '' // ?? needed????
};
- if (this.weight) { // Validity check?
- cfg.cls += " radio-" + this.weight;
+ if (this.weight) { // Validity check?
+ input.cls += " radio-" + this.weight;
}
if (this.disabled) {
input.disabled=true;
input.cls += ' input-' + this.size;
}
+ //?? can span's inline have a width??
+
var settings=this;
['xs','sm','md','lg'].map(function(size){
if (settings[size]) {
inputblock = {
cls : 'input-group',
+ tag : 'span',
cn : []
};
if (this.before) {
}
inputblock.cn.push(input);
if (this.after) {
- inputblock.cn.push({
- tag :'span',
- cls : 'input-group-addon',
- html : this.after
- });
- }
-
- };
-
- if (align ==='left' && this.fieldLabel.length) {
- Roo.log("left and has label");
- cfg.cn = [
-
- {
- tag: 'label',
- 'for' : id,
- cls : 'control-label col-md-' + this.labelWidth,
- html : this.fieldLabel
-
- },
- {
- cls : "col-md-" + (12 - this.labelWidth),
- cn: [
- inputblock
- ]
- }
-
- ];
- } else if ( this.fieldLabel.length) {
- Roo.log(" label");
- cfg.cn = [
-
- {
- tag: 'label',
- 'for': id,
- cls: 'control-label box-input-label',
- //cls : 'input-group-addon',
- html : this.fieldLabel
-
- },
-
- inputblock
-
- ];
-
- } else {
+ inputblock.cn.push({
+ tag :'span',
+ cls : 'input-group-addon',
+ html : this.after
+ });
+ }
- Roo.log(" no label && no align");
- cfg.cn = [
-
- inputblock
-
- ];
-
-
};
+
+ if (this.fieldLabel && this.fieldLabel.length) {
+ cfg.cn.push(fieldLabel);
+ }
+
+ // normal bootstrap puts the input inside the label.
+ // however with our styled version - it has to go after the input.
+
+ //lbl.cn.push(inputblock);
+
+ var lblwrap = {
+ tag: 'span',
+ cls: 'radio' + inline,
+ cn: [
+ inputblock,
+ lbl
+ ]
+ };
+
+ cfg.cn.push( lblwrap);
+
if(this.boxLabel){
- cfg.cn.push({
- tag: 'label',
- 'for': id,
- cls: 'box-label',
+ lbl.cn.push({
+ tag: 'span',
html: this.boxLabel
})
}
+
return cfg;
},
+
+ initEvents : function()
+ {
+// Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
+
+ this.inputEl().on('click', this.onClick, this);
+ if (this.boxLabel) {
+ Roo.log('find label')
+ this.el.select('span.radio label span',true).first().on('click', this.onClick, this);
+ }
+
+ },
+
inputEl: function ()
{
return this.el.select('input.roo-radio',true).first();
},
onClick : function()
{
+ Roo.log("click");
this.setChecked(true);
},
v.dom.checked = false;
});
}
-
+ Roo.log(this.inputEl().dom);
this.checked = state;
this.inputEl().dom.checked = state;
this.fireEvent('check', this, state);
}
- this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
+ //this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
},
getGroupValue : function()
{
- var value = ''
+ var value = '';
Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
if(v.dom.checked == true){
value = v.dom.value;
* @param {Roo.HtmlEditorCore} this
*/
editorevent: true
+
});
// at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
getDocMarkup : function(){
// body styles..
var st = '';
- Roo.log(this.stylesheets);
// inherit styels from page...??
if (this.stylesheets === false) {
st = '<style type="text/css">' +
'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
'</style>';
- } else {
- Roo.each(this.stylesheets, function(s) {
- st += '<link rel="stylesheet" type="text/css" href="' + s +'" />'
- });
+ } else {
}
};
Roo.TaskMgr.start(task);
-
-
},
// private
var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
if (nodeName == '#text') {
- return currentElement.nodeValue;
+
+ return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
}
// text
if (currentElementChild.nodeName == '#text') {
var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
+ toadd = nopadtext ? toadd : toadd.trim();
if (!nopad && toadd.length > 80) {
innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
}
this.cblack.push(tag);
}, this);
+ },
+
+ setStylesheets : function(stylesheets)
+ {
+ if(typeof(stylesheets) == 'string'){
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : stylesheets
+ });
+
+ return;
+ }
+ var _this = this;
+
+ Roo.each(stylesheets, function(s) {
+ if(!s.length){
+ return;
+ }
+
+ Roo.get(_this.iframe.contentDocument.head).createChild({
+ tag : 'link',
+ rel : 'stylesheet',
+ type : 'text/css',
+ href : s
+ });
+ });
+
+
+ },
+
+ removeStylesheets : function()
+ {
+ var _this = this;
+
+ Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
+ s.remove();
+ });
}
// hide stuff that is not compatible
_this.navgroup.addItem(e);
});
+
this.first = this.navgroup.addItem({
tooltip: this.firstText,
cls: "prev",
icon : 'fa fa-backward',
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["first"]) }
});
cls: "prev",
icon : 'fa fa-step-backward',
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
});
//this.addSeparator();
cls: "next",
html : ' <i class="fa fa-step-forward">',
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["next"]) }
});
this.last = this.navgroup.addItem({
icon : 'fa fa-forward',
cls: "next",
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["last"]) }
});
//this.addSeparator();
this.loading = this.navgroup.addItem({
tooltip: this.refreshText,
icon: 'fa fa-refresh',
-
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
// private
updateInfo : function(){
if(this.displayEl){
- var count = this.ds.getCount();
+ var count = (typeof(this.getCount) == 'undefined') ? this.ds.getCount() : this.getCount();
var msg = count == 0 ?
this.emptyMsg :
String.format(
// private
onClick : function(which){
+
var ds = this.ds;
if (!ds) {
return;
}
+
switch(which){
case "first":
ds.load({params:{start: 0, limit: this.pageSize}});
clearTimeout(this.timeout);
}
- this.hoverState = 'in'
+ this.hoverState = 'in';
//Roo.log("enter - show");
if (!this.delay || !this.delay.show) {
this.show();
{
clearTimeout(this.timeout);
- this.hoverState = 'out'
+ this.hoverState = 'out';
if (!this.delay || !this.delay.hide) {
this.hide();
return
if (autoPlace) {
// fixme..
}
- var align = Roo.bootstrap.Tooltip.alignment[placement]
+ var align = Roo.bootstrap.Tooltip.alignment[placement];
this.el.alignTo(this.bindEl, align[0],align[1]);
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event initial
- * Fires when the picker initialized.
- * @param {Roo.bootstrap.LocationPicker} this
- * @param {Google Location} location
- */
- initial : true,
- /**
- * @event positionchanged
- * Fires when the picker position changed.
- * @param {Roo.bootstrap.LocationPicker} this
- * @param {Google Location} location
- */
- positionchanged : true,
- /**
- * @event resize
- * Fires when the map resize.
- * @param {Roo.bootstrap.LocationPicker} this
- */
- resize : true,
- /**
- * @event show
- * Fires when the map show.
- * @param {Roo.bootstrap.LocationPicker} this
- */
- show : true,
- /**
- * @event hide
- * Fires when the map hide.
- * @param {Roo.bootstrap.LocationPicker} this
- */
- hide : true
- });
+ this.addEvents({
+ /**
+ * @event initial
+ * Fires when the picker initialized.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Google Location} location
+ */
+ initial : true,
+ /**
+ * @event positionchanged
+ * Fires when the picker position changed.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Google Location} location
+ */
+ positionchanged : true,
+ /**
+ * @event resize
+ * Fires when the map resize.
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ resize : true,
+ /**
+ * @event show
+ * Fires when the map show.
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ show : true,
+ /**
+ * @event hide
+ * Fires when the map hide.
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ hide : true,
+ /**
+ * @event mapClick
+ * Fires when click the map.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ mapClick : true,
+ /**
+ * @event mapRightClick
+ * Fires when right click the map.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ mapRightClick : true,
+ /**
+ * @event markerClick
+ * Fires when click the marker.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ markerClick : true,
+ /**
+ * @event markerRightClick
+ * Fires when right click the marker.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ markerRightClick : true,
+ /**
+ * @event OverlayViewDraw
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewDraw : true,
+ /**
+ * @event OverlayViewOnAdd
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewOnAdd : true,
+ /**
+ * @event OverlayViewOnRemove
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewOnRemove : true,
+ /**
+ * @event OverlayViewShow
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Pixel} cpx
+ */
+ OverlayViewShow : true,
+ /**
+ * @event OverlayViewHide
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewHide : true
+ });
};
},
initEvents: function(ct, position)
- {
- if(!this.mapTypeId){
- this.mapTypeId = google.maps.MapTypeId.ROADMAP;
- }
-
+ {
if(!this.el.getWidth() || this.isApplied()){
return;
}
initial: function()
{
+ if(!this.mapTypeId){
+ this.mapTypeId = google.maps.MapTypeId.ROADMAP;
+ }
+
this.gMapContext = this.GMapContext();
- var _this = this;
+ this.initOverlayView();
+ this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
+
+ var _this = this;
+
google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
_this.setPosition(_this.gMapContext.marker.position);
});
+ google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
+ Roo.log('mapClick');
+ _this.fireEvent('mapClick', this, event);
+
+ });
+
+ google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
+ Roo.log('mapRightClick');
+ _this.fireEvent('mapRightClick', this, event);
+
+ });
+
+ google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
+ Roo.log('markerClick');
+ _this.fireEvent('markerClick', this, event);
+
+ });
+
+ google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
+ Roo.log('markerRightClick');
+ _this.fireEvent('markerRightClick', this, event);
+
+ });
+
this.setPosition(this.gMapContext.location);
this.fireEvent('initial', this, this.gMapContext.location);
},
+ initOverlayView: function()
+ {
+ var _this = this;
+
+ Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
+
+ draw: function()
+ {
+ Roo.log('OverlayView draw');
+ _this.fireEvent('OverlayViewDraw', _this);
+ },
+
+ onAdd: function()
+ {
+ Roo.log('OverlayView onAdd');
+ _this.fireEvent('OverlayViewOnAdd', _this);
+ },
+
+ onRemove: function()
+ {
+ Roo.log('OverlayView onRemove');
+ _this.fireEvent('OverlayViewOnRemove', _this);
+ },
+
+ show: function(cpx)
+ {
+ Roo.log('OverlayView show');
+ _this.fireEvent('OverlayViewShow', _this, cpx);
+ },
+
+ hide: function()
+ {
+ Roo.log('OverlayView hide');
+ _this.fireEvent('OverlayViewHide', _this);
+ }
+
+ });
+ },
+
+ fromLatLngToContainerPixel: function(event)
+ {
+ return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
+ },
+
isApplied: function()
{
return this.getGmapContext() == false ? false : true;
}
});
+
+Roo.apply(Roo.bootstrap.LocationPicker, {
+
+ OverlayView : function(map, options)
+ {
+ options = options || {};
+
+ this.setMap(map);
+ }
+
+
+});/*
+ * - LGPL
+ *
+ * Alert
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.Alert
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Alert class
+ * @cfg {String} title The title of alert
+ * @cfg {String} html The content of alert
+ * @cfg {String} weight ( success | info | warning | danger )
+ * @cfg {String} faicon font-awesomeicon
+ *
+ * @constructor
+ * Create a new alert
+ * @param {Object} config The config object
+ */
+
+
+Roo.bootstrap.Alert = function(config){
+ Roo.bootstrap.Alert.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
+
+ title: '',
+ html: '',
+ weight: false,
+ faicon: false,
+
+ getAutoCreate : function()
+ {
+
+ var cfg = {
+ tag : 'div',
+ cls : 'alert',
+ cn : [
+ {
+ tag : 'i',
+ cls : 'roo-alert-icon'
+
+ },
+ {
+ tag : 'b',
+ cls : 'roo-alert-title',
+ html : this.title
+ },
+ {
+ tag : 'span',
+ cls : 'roo-alert-text',
+ html : this.html
+ }
+ ]
+ };
+
+ if(this.faicon){
+ cfg.cn[0].cls += ' fa ' + this.faicon;
+ }
+
+ if(this.weight){
+ cfg.cls += ' alert-' + this.weight;
+ }
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ this.el.setVisibilityMode(Roo.Element.DISPLAY);
+ },
+
+ setTitle : function(str)
+ {
+ this.el.select('.roo-alert-title',true).first().dom.innerHTML = str;
+ },
+
+ setText : function(str)
+ {
+ this.el.select('.roo-alert-text',true).first().dom.innerHTML = str;
+ },
+
+ setWeight : function(weight)
+ {
+ if(this.weight){
+ this.el.select('.alert',true).first().removeClass('alert-' + this.weight);
+ }
+
+ this.weight = weight;
+
+ this.el.select('.alert',true).first().addClass('alert-' + this.weight);
+ },
+
+ setIcon : function(icon)
+ {
+ if(this.faicon){
+ this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]);
+ }
+
+ this.faicon = icon
+
+ this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]);
+ },
+
+ hide: function()
+ {
+ this.el.hide();
+ },
+
+ show: function()
+ {
+ this.el.show();
+ }
+
+});
+
+
\ No newline at end of file
projects / roojs1 / blobdiff