return ret;
},
+
addxtypeChild : function (tree, cntr, is_body)
{
Roo.debug && Roo.log('addxtypeChild:' + cntr);
// multiple copies here...
//Roo.log('render');
//Roo.log(this[cntr]());
- cn.render(this[cntr](true));
+ // some elements do not have render methods.. like the layouts...
+ cn.render && cn.render(this[cntr](true));
}
// then add the element..
}
{
Roo.log('img onclick');
this.fireEvent('click', this, e);
+ },
+ /**
+ * Sets the url of the image - used to update it
+ * @param {String} url the url of the image
+ */
+
+ setSrc : function(url)
+ {
+ this.src = url;
+ this.el.select('img', true).first().dom.src = url;
}
+
+
});
xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
}
- if(this.el.getStyle('top').slice(-1) != "%"){
+ if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
this.el.setXY(xy);
}
* @cfg {String} buttonPosition (left|right|center) default right
* @cfg {Boolean} animate default true
* @cfg {Boolean} allow_close default true
+ * @cfg {Boolean} fitwindow default false
+ * @cfg {String} size (sm|lg) default empty
+ *
*
* @constructor
* Create a new Modal Dialog
animate : true,
+ fitwindow: false,
+
// private
+ dialogEl: false,
bodyEl: false,
footerEl: false,
titleEl: false,
closeEl: false,
+ size: '',
+
onRender : function(ct, position)
{
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
-
+ this.dialogEl = this.el.select('.modal-dialog',true).first();
this.bodyEl = this.el.select('.modal-body',true).first();
this.closeEl = this.el.select('.modal-header .close', true).first();
this.footerEl = this.el.select('.modal-footer',true).first();
html : '×'
});
}
+
header.push(title);
+ var size = '';
+
+ if(this.size.length){
+ size = 'modal-' + this.size;
+ }
+
var modal = {
cls: "modal",
style : 'display: none',
cn : [
{
- cls: "modal-dialog",
+ cls: "modal-dialog " + size,
cn : [
{
cls : "modal-content",
if (this.allow_close) {
this.closeEl.on('click', this.hide, this);
}
+ Roo.EventManager.onWindowResize(this.resize, this, true);
- var _this = this;
-
- window.addEventListener("resize", function() { _this.resize(); } );
-
+
},
resize : function()
{
- this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ if (this.fitwindow) {
+ var w = this.width || Roo.lib.Dom.getViewportWidth(true) - 30;
+ var h = this.height || Roo.lib.Dom.getViewportHeight(true) - 60;
+ this.setSize(w,h);
+ }
+ },
+
+ setSize : function(w,h)
+ {
+ if (!w && !h) {
+ return;
+ }
+ this.resizeTo(w,h);
},
show : function() {
//}
Roo.get(document.body).addClass("x-body-masked");
- this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
this.maskEl.show();
this.el.setStyle('zIndex', '10001');
this.fireEvent('show', this);
-
+ this.resize();
+
+ (function () {
+ this.items.forEach( function(e) {
+ e.layout ? e.layout() : false;
+
+ });
+ }).defer(100,this);
},
hide : function()
{
// skip.. ?? why??
- this.el.select('.modal-dialog',true).first().setWidth(w);
+ this.dialogEl.setWidth(w);
if (this.diff === false) {
- this.diff = this.el.select('.modal-dialog',true).first().getHeight() - this.el.select('.modal-body',true).first().getHeight();
+ this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight();
}
- this.el.select('.modal-body',true).first().setHeight(h-this.diff);
+ this.bodyEl.setHeight(h-this.diff);
},
* @cfg {Boolean} headerShow (true|false) generate thead, default true
* @cfg {Boolean} rowSelection (true|false) default false
* @cfg {Boolean} cellSelection (true|false) default false
+ * @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header
* @cfg {Roo.bootstrap.PagingToolbar} footer a paging toolbar
*
Roo.bootstrap.Table = function(config){
Roo.bootstrap.Table.superclass.constructor.call(this, config);
+
+
// BC...
- this.rowSelection = (typeof(config.RowSelection) != 'undefined') ? config.RowSelection : this.rowSelection;
- this.cellSelection = (typeof(config.CellSelection) != 'undefined') ? config.CellSelection : this.cellSelection;
+ this.rowSelection = (typeof(config.rowSelection) != 'undefined') ? config.rowSelection : this.rowSelection;
+ this.cellSelection = (typeof(config.cellSelection) != 'undefined') ? config.cellSelection : this.cellSelection;
this.headerShow = (typeof(config.thead) != 'undefined') ? config.thead : this.headerShow;
this.footerShow = (typeof(config.tfoot) != 'undefined') ? config.tfoot : this.footerShow;
-
+ this.sm = this.sm || {xtype: 'RowSelectionModel'};
if (this.sm) {
+ this.sm.grid = this;
this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
this.sm = this.selModel;
this.sm.xmodule = this.xmodule || false;
}
+
if (this.cm && typeof(this.cm.config) == 'undefined') {
this.colModel = new Roo.grid.ColumnModel(this.cm);
this.cm = this.colModel;
summary: false,
width: false,
striped : false,
+ scrollBody : false,
bordered: false,
hover: false,
condensed : false,
layout : false,
// Roo.Element - the tbody
- mainBody: false,
+ mainBody: false,
+ // Roo.Element - thead element
+ mainHead: false,
- getAutoCreate : function(){
+ container: false, // used by gridpanel...
+
+ getAutoCreate : function()
+ {
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
cfg = {
cls : 'table',
cn : []
};
-
+ if (this.scrollBody) {
+ cfg.cls += ' table-body-fixed';
+ }
if (this.striped) {
cfg.cls += ' table-striped';
}
if(this.footerShow){
cfg.cn.push(this.renderFooter());
}
-
- cfg.cls+= ' TableGrid';
+ // where does this come from?
+ //cfg.cls+= ' TableGrid';
}
return { cn : [ cfg ] };
if(!this.store || !this.cm){
return;
}
+ if (this.selModel) {
+ this.selModel.initEvents();
+ }
+
//Roo.log('initEvents with ds!!!!');
this.mainBody = this.el.select('tbody', true).first();
+ this.mainHead = this.el.select('thead', true).first();
+
+
var _this = this;
if (this.footer) {
this.footer.parentId = this.id;
this.footer.onRender(this.el.select('tfoot tr td').first(), null);
- }
+ }
this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
this.store.on('beforeload', this.onBeforeLoad, this);
this.store.on('update', this.onUpdate, this);
this.store.on('add', this.onAdd, this);
+ this.store.on("clear", this.clear, this);
this.el.on("contextmenu", this.onContextMenu, this);
+ this.mainBody.on('scroll', this.onBodyScroll, this);
+
+
},
onContextMenu : function(e, t)
if(e.getTarget().nodeName.toLowerCase() != 'th'){
cell = Roo.get(t).findParent('th', false, true);
+ if (!cell) {
+ Roo.log("failed to find th in thead?");
+ Roo.log(e.getTarget());
+ return;
+ }
}
var cellIndex = cell.dom.cellIndex;
if(e.getTarget().nodeName.toLowerCase() != 'td'){
cell = Roo.get(t).findParent('td', false, true);
+ if (!cell) {
+ Roo.log("failed to find th in tbody?");
+ Roo.log(e.getTarget());
+ return;
+ }
}
var row = cell.findParent('tr', false, true);
},
-
+
onDblClick : function(e,el)
{
var cell = Roo.get(el);
- if(!cell || (!this.CellSelection && !this.RowSelection)){
+ if(!cell || (!this.cellSelection && !this.rowSelection)){
return;
}
var cellIndex = cell.dom.cellIndex;
var rowIndex = this.getRowIndex(row);
- if(this.CellSelection){
+ if(this.cellSelection){
this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
}
- if(this.RowSelection){
+ if(this.rowSelection){
this.fireEvent('rowdblclick', this, row, rowIndex, e);
}
},
var sort = col.attr('sort');
var dir = 'ASC';
- if(col.hasClass('glyphicon-arrow-up')){
+ if(col.select('i', true).first().hasClass('glyphicon-arrow-up')){
dir = 'DESC';
}
};
var cm = this.cm;
+ this.totalWidth = 0;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
var hh = '';
+ if(typeof(config.sortable) != 'undefined' && config.sortable){
+ c.cls = 'sortable';
+ c.html = '<i class="glyphicon"></i>' + c.html;
+ }
+
if(typeof(config.lgHeader) != 'undefined'){
hh += '<span class="hidden-xs hidden-sm hidden-md">' + config.lgHeader + '</span>';
}
c.sort = config.dataIndex;
}
- if(typeof(config.sortable) != 'undefined' && config.sortable){
- c.cls = 'sortable';
- }
+
if(typeof(config.align) != 'undefined' && config.align.length){
c.style += ' text-align:' + config.align + ';';
if(typeof(config.width) != 'undefined'){
c.style += ' width:' + config.width + 'px;';
+ this.totalWidth += config.width;
+ } else {
+ this.totalWidth += 100; // assume minimum of 100 per column?
}
if(typeof(config.cls) != 'undefined'){
var ds = this.store;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
- e.removeClass(['glyphicon', 'glyphicon-arrow-up', 'glyphicon-arrow-down']);
-
- if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
- e.addClass(['glyphicon', 'glyphicon-arrow-up']);
- }
-
- if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
- e.addClass(['glyphicon', 'glyphicon-arrow-down']);
+ e.select('i', true).removeClass(['glyphicon-arrow-up', 'glyphicon-arrow-down']);
+ if (_this.store.sortInfo) {
+
+ if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
+ e.select('i', true).addClass(['glyphicon-arrow-up']);
+ }
+
+ if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
+ e.select('i', true).addClass(['glyphicon-arrow-down']);
+ }
}
});
//if(this.loadMask){
// this.maskEl.hide();
//}
+
+ this.autoSize();
},
onUpdate : function(ds,record)
{
this.refreshRow(record);
+ this.autoSize();
},
onRemove : function(ds, record, index, isUpdate){
index = ds.indexOf(record);
}
this.insertRow(ds, index, true);
+ this.autoSize();
this.onRemove(ds, record, index+1, true);
+ this.autoSize();
//this.syncRowHeights(index, index);
//this.layout();
this.fireEvent("rowupdated", this, index, record);
getSelectionModel : function(){
if(!this.selModel){
- this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
+ this.selModel = new Roo.bootstrap.Table.RowSelectionModel({grid: this});
}
return this.selModel;
},
});
return rowIndex;
+ },
+ /**
+ * Returns the grid's underlying element = used by panel.Grid
+ * @return {Element} The element
+ */
+ getGridEl : function(){
+ return this.el;
+ },
+ /**
+ * Forces a resize - used by panel.Grid
+ * @return {Element} The element
+ */
+ autoSize : function()
+ {
+ //var ctr = Roo.get(this.container.dom.parentElement);
+ var ctr = Roo.get(this.el.dom);
+
+ var thd = this.getGridEl().select('thead',true).first();
+ var tbd = this.getGridEl().select('tbody', true).first();
+ var tfd = this.getGridEl().select('tfoot', true).first();
+
+ var cw = ctr.getWidth();
+
+ if (tbd) {
+
+ tbd.setSize(ctr.getWidth(),
+ ctr.getHeight() - (thd.getHeight() + (tfd ? tfd.getHeight() : 0))
+ );
+ var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
+ cw -= barsize;
+ }
+ cw = Math.max(cw, this.totalWidth);
+ this.getGridEl().select('tr',true).setWidth(cw);
+ // resize 'expandable coloumn?
+
+ return; // we doe not have a view in this design..
+
+ },
+ onBodyScroll: function()
+ {
+
+ //Roo.log("body scrolled');" + this.mainBody.dom.scrollLeft);
+ this.mainHead.setStyle({
+ 'position' : 'relative',
+ 'left': (-1* this.mainBody.dom.scrollLeft) + 'px'
+ });
+
+
}
-
});
* @cfg {String} labelAlign (top|left)
* @cfg {Boolean} readOnly Specifies that the field should be read-only
* @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
+ * @cfg {String} indicatorpos (left|right) default left
* @cfg {String} align (left|center|right) Default left
* @cfg {Boolean} forceFeedback (true|false) Default false
formatedValue : false,
forceFeedback : false,
+ indicatorpos : 'left',
+
parentLabelAlign : function()
{
var parent = this;
},
- getAutoCreate : function(){
-
+ getAutoCreate : function()
+ {
var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
var id = Roo.id();
autocomplete : this.autocomplete || 'new-password'
};
-
if(this.align){
input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
}
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]) {
};
if (align ==='left' && this.fieldLabel.length) {
-
+
+ cfg.cn = [
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+ {
+ tag: 'label',
+ 'for' : id,
+ cls : 'control-label col-sm-' + this.labelWidth,
+ html : this.fieldLabel
+
+ },
+ {
+ cls : "col-sm-" + (12 - this.labelWidth),
+ cn: [
+ inputblock
+ ]
+ }
+
+ ];
+
+ if(this.indicatorpos == 'right'){
cfg.cn = [
-
{
tag: 'label',
'for' : id,
cls : 'control-label col-sm-' + this.labelWidth,
html : this.fieldLabel
-
+
+ },
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
},
{
cls : "col-sm-" + (12 - this.labelWidth),
inputblock
]
}
-
+
];
+ }
+
} else if ( this.fieldLabel.length) {
- cfg.cn = [
-
+ cfg.cn = [
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+ {
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+
+ inputblock
+
+ ];
+
+ if(this.indicatorpos == 'right'){
+
+ cfg.cn = [
{
tag: 'label',
- //cls : 'input-group-addon',
+ //cls : 'input-group-addon',
html : this.fieldLabel
-
+
},
-
- inputblock
-
- ];
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+
+ inputblock
+
+ ];
+
+ }
} else {
- cfg.cn = [
-
- inputblock
-
- ];
+ cfg.cn = [
+
+ inputblock
+
+ ];
};
cfg.cls += ' navbar-form';
}
+ if (this.parentType === 'NavGroup') {
+ cfg.cls += ' navbar-form';
+ cfg.tag = 'li';
+ }
+
return cfg;
},
return this.inputEl();
},
+ indicatorEl : function()
+ {
+ var indicator = this.el.select('i.roo-required-indicator',true).first();
+
+ if(!indicator){
+ return false;
+ }
+
+ return indicator;
+
+ },
+
setDisabled : function(v)
{
var i = this.inputEl().dom;
this.inputEl().on("blur", this.onBlur, this);
this.inputEl().relayEvent('keyup', this);
+
+ this.indicator = this.indicatorEl();
+
+ if(this.indicator){
+ this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
+ this.indicator.hide();
+ }
// reference to original value for reset
this.originalValue = this.getValue();
}
if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
this.inputEl().on("keypress", this.filterKeys, this);
+ } else {
+ this.inputEl().relayEvent('keypress', this);
}
/* if(this.grow){
this.el.on("keyup", this.onKeyUp, this, {buffer:50});
return;
}
- var label = this.el.select('label', true).first();
- var icon = this.el.select('i.fa-star', true).first();
-
- if(label && icon){
- icon.remove();
+ if(this.indicator){
+ this.indicator.hide();
}
this.el.removeClass(this.invalidClass);
return;
}
- var formGroup = this.el.findParent('.form-group', false, true);
-
- if(formGroup){
-
- var label = formGroup.select('label', true).first();
- var icon = formGroup.select('i.fa-star', true).first();
-
- if(label && icon){
- icon.remove();
- }
+ if(this.indicator){
+ this.indicator.hide();
}
this.el.addClass(this.validClass);
return;
}
- var formGroup = this.el.findParent('.form-group', false, true);
-
- if(formGroup){
- var label = formGroup.select('label', true).first();
- var icon = formGroup.select('i.fa-star', true).first();
-
- if(!this.getValue().length && label && !icon){
- this.el.findParent('.form-group', false, true).createChild({
- tag : 'i',
- cls : 'text-danger fa fa-lg fa-star',
- tooltip : 'This field is required',
- style : 'margin-right:5px;'
- }, label, true);
- }
+ if(this.indicator){
+ this.indicator.show();
}
-
this.el.addClass(this.invalidClass);
if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
combobox.cls += ' roo-select2-container-multi';
}
- if (align ==='left' && this.fieldLabel.length) {
+ if (align ==='left' && this.fieldLabel.length && this.labelWidth) {
// Roo.log("left and has label");
+ cfg.cn = [
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+ {
+ tag: 'label',
+ 'for' : id,
+ cls : 'control-label col-sm-' + this.labelWidth,
+ html : this.fieldLabel
+
+ },
+ {
+ cls : "col-sm-" + (12 - this.labelWidth),
+ cn: [
+ combobox
+ ]
+ }
+
+ ];
+
+ if(this.indicatorpos == 'right'){
cfg.cn = [
-
{
tag: 'label',
'for' : id,
cls : 'control-label col-sm-' + this.labelWidth,
html : this.fieldLabel
-
+
+ },
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
},
{
cls : "col-sm-" + (12 - this.labelWidth),
combobox
]
}
-
+
];
+ }
+
} else if ( this.fieldLabel.length) {
// Roo.log(" label");
- cfg.cn = [
-
+ cfg.cn = [
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+ {
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+
+ combobox
+
+ ];
+
+ if(this.indicatorpos == 'right'){
+
+ cfg.cn = [
{
- tag: 'label',
- //cls : 'input-group-addon',
- html : this.fieldLabel
-
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
},
combobox
-
+
];
+ }
+
} else {
// Roo.log(" no label && no align");
};
Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
+
/**
* Load data from the requested source (in this case an in-memory
* data object passed to the constructor), read the data object into
* in order for a value to be mapped.
*/
valueField: undefined,
-
+ /**
+ * @cfg {String} modalTitle The title of the dialog that pops up on mobile views.
+ */
+ modalTitle : '',
/**
* @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
combobox.cn.push(feedback);
}
- if (align ==='left' && this.fieldLabel.length) {
+ if (align ==='left' && this.fieldLabel.length && this.labelWidth) {
// Roo.log("left and has label");
+ cfg.cn = [
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+ {
+ tag: 'label',
+ 'for' : id,
+ cls : 'control-label col-sm-' + this.labelWidth,
+ html : this.fieldLabel
+
+ },
+ {
+ cls : "col-sm-" + (12 - this.labelWidth),
+ cn: [
+ combobox
+ ]
+ }
+
+ ];
+
+ if(this.indicatorpos == 'right'){
+
cfg.cn = [
-
{
tag: 'label',
'for' : id,
cls : 'control-label col-sm-' + this.labelWidth,
html : this.fieldLabel
-
+
+ },
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
},
{
cls : "col-sm-" + (12 - this.labelWidth),
combobox
]
}
-
+
];
+
+ }
+
+
} else if ( this.fieldLabel.length) {
// Roo.log(" label");
cfg.cn = [
-
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
{
tag: 'label',
//cls : 'input-group-addon',
combobox
];
+
+ if(this.indicatorpos == 'right'){
+
+ cfg.cn = [
+ {
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+
+ combobox
+
+ ];
+
+ }
} else {
close.hide();
}
+ this.validate();
+
},
/**
if(close){
(v && (v.length || v * 1 > 0)) ? close.show() : close.hide();
}
+
+ this.validate();
},
/**
* @property {Object} the last set data for the element
}
this.setValue(this.originalValue);
- this.clearInvalid();
+ //this.clearInvalid();
this.lastData = false;
if (this.view) {
this.view.clearSelections();
}
+
+ this.validate();
},
// private
findRecord : function(prop, value){
Roo.get(document).un('keydown', this.listKeyPress, this);
}
this.fireEvent('collapse', this);
+
+ this.validate();
},
// private
}
this.store.fireEvent("datachanged", this.store);
+
+ this.validate();
},
clearItem : function()
};
var combobox = {
- cls: 'roo-select2-container input-group',
+ cls: 'roo-select2-container input-group roo-touchview-combobox ',
cn: [
box
]
};
+ if(!this.multiple && this.showToggleBtn){
+
+ var caret = {
+ tag: 'span',
+ cls: 'caret'
+ };
+
+ if (this.caret != false) {
+ caret = {
+ tag: 'i',
+ cls: 'fa fa-' + this.caret
+ };
+
+ }
+
+ combobox.cn.push({
+ tag :'span',
+ cls : 'input-group-addon btn dropdown-toggle',
+ cn : [
+ caret,
+ {
+ tag: 'span',
+ cls: 'combobox-clear',
+ cn : [
+ {
+ tag : 'i',
+ cls: 'icon-remove'
+ }
+ ]
+ }
+ ]
+
+ })
+ }
+
if(this.multiple){
combobox.cls += ' roo-select2-container-multi';
}
cfg.cn = combobox;
- if(this.fieldLabel.length){
+ if(this.fieldLabel.length && this.labelWidth){
var lw = align === 'left' ? ('col-sm' + this.labelWidth) : '';
var cw = align === 'left' ? ('col-sm' + (12 - this.labelWidth)) : '';
cfg.cn = [
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
{
tag: 'label',
cls : 'control-label ' + lw,
]
}
];
+
+ if(this.indicatorpos == 'right'){
+ cfg.cn = [
+ {
+ tag: 'label',
+ cls : 'control-label ' + lw,
+ html : this.fieldLabel
+
+ },
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ },
+ {
+ cls : cw,
+ cn: [
+ combobox
+ ]
+ }
+ ];
+ }
}
var settings = this;
this.originalValue = this.getValue();
+ this.triggerEl = this.el.select('span.dropdown-toggle',true).first();
+
this.inputEl().on("click", this.showTouchView, this);
+ this.triggerEl.on("click", this.showTouchView, this);
this.touchViewFooterEl.select('.roo-touch-view-cancel', true).first().on('click', this.hideTouchView, this);
this.touchViewFooterEl.select('.roo-touch-view-ok', true).first().on('click', this.setTouchViewValue, this);
this.touchViewHeaderEl.hide();
- if(this.fieldLabel.length){
- this.touchViewHeaderEl.dom.innerHTML = this.fieldLabel;
+ if(this.modalTitle.length){
+ this.touchViewHeaderEl.dom.innerHTML = this.modalTitle;
this.touchViewHeaderEl.show();
}
this.touchViewEl.show();
this.touchViewEl.select('.modal-dialog', true).first().setStyle('margin', '0px');
- this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize(
+ Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
- if(this.fieldLabel.length){
+ if(this.modalTitle.length){
bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
}
row.select('.roo-combobox-list-group-item-value', true).first().dom.innerHTML = cfg.html;
}
}
-
- if(!this.multiple && this.valueField && typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue()){
+ row.removeClass('selected');
+ if(!this.multiple && this.valueField &&
+ typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue())
+ {
+ // radio buttons..
row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
+ row.addClass('selected');
}
- if(this.multiple && this.valueField && typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1){
+ if(this.multiple && this.valueField &&
+ typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1)
+ {
+
+ // checkboxes...
row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
this.tickItems.push(d.data);
}
var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
- if(this.fieldLabel.length){
+ if(this.modalTitle.length){
bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
}
* @cfg {Boolean} autoslide (true|false) auto slide .. default false
* @cfg {Boolean} slideOnTouch (true|false) slide on touch .. default false
* @cfg {Number} timer auto slide timer .. default 0 millisecond
+ * @cfg {Boolean} showarrow (true|false) show arrow default true
*
* @constructor
* Create a new TabGroup
autoslide : false,
slideFn : false,
slideOnTouch : false,
+ showarrow : true,
getAutoCreate : function()
{
cfg.cls += ' carousel slide';
cfg.cn = [{
- cls : 'carousel-inner'
+ cls : 'carousel-inner',
+ cn : []
}];
if(this.bullets && !Roo.isTouch){
if(this.bullets_cls){
bullets.cls = bullets.cls + ' ' + this.bullets_cls;
}
- /*
- for (var i = 0; i < this.bullets; i++){
- bullets.cn.push({
- cls : 'bullet bullet-' + i
- });
- }
- */
+
bullets.cn.push({
cls : 'clear'
});
- cfg.cn[0].cn = bullets;
+ cfg.cn[0].cn.push(bullets);
+ }
+
+ if(this.showarrow){
+ cfg.cn[0].cn.push({
+ tag : 'div',
+ class : 'carousel-arrow',
+ cn : [
+ {
+ tag : 'div',
+ class : 'carousel-prev',
+ cn : [
+ {
+ tag : 'i',
+ class : 'fa fa-chevron-left'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ class : 'carousel-next',
+ cn : [
+ {
+ tag : 'i',
+ class : 'fa fa-chevron-right'
+ }
+ ]
+ }
+ ]
+ });
}
+
}
return cfg;
initEvents: function()
{
- if(Roo.isTouch && this.slideOnTouch){
+ if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
this.el.on("touchstart", this.onTouchStart, this);
}
}, this.timer);
}
+ if(this.showarrow){
+ this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
+ this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
+ }
+
+
},
onTouchStart : function(e, el, o)
* @cfg {String} html panel content
* @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
* @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
+ * @cfg {String} href click to link..
*
*
* @constructor
html: false,
tabId: false,
navId : false,
+ href : '',
getAutoCreate : function(){
var cfg = {
tag: 'div',
// item is needed for carousel - not sure if it has any effect otherwise
- cls: 'tab-pane item',
+ cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
html: this.html || ''
};
}
}
+ if(this.href.length){
+ this.el.on('click', this.onClick, this);
+ }
+
},
-
onRender : function(ct, position)
{
// Roo.log("Call onRender: " + this.xtype);
}
this.fireEvent('changed', this, state);
+ },
+
+ onClick: function(e)
+ {
+ e.preventDefault();
+
+ window.location.href = this.href;
}
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;
+ this.hasInput = this.component && this.inputEl().length;
if (typeof(this.minViewMode === 'string')) {
switch (this.minViewMode) {
remove: function()
{
this.picker().remove();
+ },
+
+ validateValue : function(value)
+ {
+ if(value.length < 1) {
+ if(this.allowBlank){
+ return true;
+ }
+ return false;
+ }
+
+ if(value.length < this.minLength){
+ return false;
+ }
+ if(value.length > this.maxLength){
+ return false;
+ }
+ if(this.vtype){
+ var vt = Roo.form.VTypes;
+ if(!vt[this.vtype](value, this)){
+ return false;
+ }
+ }
+ if(typeof this.validator == "function"){
+ var msg = this.validator(value);
+ if(msg !== true){
+ return false;
+ }
+ }
+
+ if(this.regex && !this.regex.test(value)){
+ return false;
+ }
+
+ if(typeof(this.parseDate(value)) == 'undefined'){
+ return false;
+ }
+
+ if (this.endDate !== Infinity && this.parseDate(value).getTime() > this.endDate.getTime()) {
+ return false;
+ }
+
+ if (this.startDate !== -Infinity && this.parseDate(value).getTime() < this.startDate.getTime()) {
+ return false;
+ }
+
+
+ return true;
}
});
tag: 'input',
id : id,
type : this.inputType,
- value : this.inputType == 'radio' ? this.inputValue : ((!this.checked) ? this.valueOff : this.inputValue),
+ value : this.inputValue,
cls : 'roo-' + this.inputType, //'form-box',
placeholder : this.placeholder || ''
};
+
+ var hidden = {
+ tag: 'input',
+ type : 'hidden',
+ cls : 'roo-hidden-value',
+ value : this.checked ? this.valueOff : this.inputValue
+ };
+
if (this.weight) { // Validity check?
cfg.cls += " " + this.inputType + "-" + this.weight;
}
if(this.checked){
input.checked = this.checked;
+
}
+
if (this.name) {
- input.name = this.name;
+ hidden.name = this.name;
+ input.name = '_hidden_' + this.name;
}
if (this.size) {
}
});
- var inputblock = input;
+ var inputblock = {
+ tag: 'span',
+ cn : [
+ input,
+ hidden
+ ]
+ };
if (this.before || this.after) {
}
inputblock.cn.push(input);
+ inputblock.cn.push(hidden);
if (this.after) {
inputblock.cn.push({
{
return this.el.select('input.roo-' + this.inputType,true).first();
},
+ hiddenEl: function ()
+ {
+ return this.el.select('input.hidden-value',true).first();
+ },
labelEl: function()
{
this.inputEl().dom.checked = state;
- this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
+
+ this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
if(suppressEvent !== true){
this.fireEvent('check', this, state);
return this.getGroupValue();
}
- return this.inputEl().getValue();
+ return this.hiddenEl() ? this.hiddenEl().dom.value : this.value;
},
validateRadio : function()
{
+ if(this.allowBlank){
+ return true;
+ }
+
var valid = false;
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
group[i].el.findParent('.form-group', false, true).addClass(this.invalidClass);
}
+ },
+
+ disable : function()
+ {
+ if(this.inputType != 'radio'){
+ Roo.bootstrap.CheckBox.superclass.disable.call(this);
+ return;
+ }
+
+ var _this = this;
+
+ if(this.rendered){
+ Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
+ _this.getActionEl().addClass(this.disabledClass);
+ e.dom.disabled = true;
+ });
+ }
+
+ this.disabled = true;
+ this.fireEvent("disable", this);
+ return this;
+ },
+
+ enable : function()
+ {
+ if(this.inputType != 'radio'){
+ Roo.bootstrap.CheckBox.superclass.enable.call(this);
+ return;
+ }
+
+ var _this = this;
+
+ if(this.rendered){
+ Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
+ _this.getActionEl().removeClass(this.disabledClass);
+ e.dom.disabled = false;
+ });
+ }
+
+ this.disabled = false;
+ this.fireEvent("enable", this);
+ return this;
}
+
});
Roo.apply(Roo.bootstrap.CheckBox, {
});
Roo.bootstrap.Table.RowSelectionModel.superclass.constructor.call(this);
this.locked = false;
-};
+ };
Roo.extend(Roo.bootstrap.Table.RowSelectionModel, Roo.bootstrap.Table.AbstractSelectionModel, {
/**
singleSelect : false,
// private
- initEvents : function(){
-
- if(!this.grid.enableDragDrop && !this.grid.enableDrag){
- this.grid.on("mousedown", this.handleMouseDown, this);
- }else{ // allow click to work like normal
- this.grid.on("rowclick", this.handleDragableRowClick, this);
- }
+ initEvents : function()
+ {
+ //if(!this.grid.enableDragDrop && !this.grid.enableDrag){
+ // this.growclickrid.on("mousedown", this.handleMouseDown, this);
+ //}else{ // allow click to work like normal
+ // this.grid.on("rowclick", this.handleDragableRowClick, this);
+ //}
+ //this.grid.on("rowdblclick", this.handleMouseDBClick, this);
+ this.grid.on("rowclick", this.handleMouseDown, this);
+
this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
"up" : function(e){
if(!e.shiftKey){
},
scope: this
});
-
+ this.grid.store.on('load', function(){
+ this.selections.clear();
+ },this);
+ /*
var view = this.grid.view;
view.on("refresh", this.onRefresh, this);
view.on("rowupdated", this.onRowUpdated, this);
view.on("rowremoved", this.onRemove, this);
+ */
},
// private
- onRefresh : function(){
- var ds = this.grid.dataSource, i, v = this.grid.view;
+ onRefresh : function()
+ {
+ var ds = this.grid.store, i, v = this.grid.view;
var s = this.selections;
s.each(function(r){
if((i = ds.indexOfId(r.id)) != -1){
* @param {Array} records The records to select
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
- selectRecords : function(records, keepExisting){
+ selectRecords : function(records, keepExisting)
+ {
if(!keepExisting){
this.clearSelections();
}
- var ds = this.grid.dataSource;
+ var ds = this.grid.store;
for(var i = 0, len = records.length; i < len; i++){
this.selectRow(ds.indexOf(records[i]), true);
}
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
selectLastRow : function(keepExisting){
- this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
+ //this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
+ this.selectRow(this.grid.store.getCount() - 1, keepExisting);
},
/**
* Selects the row immediately following the last selected row.
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
- selectNext : function(keepExisting){
- if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
+ selectNext : function(keepExisting)
+ {
+ if(this.last !== false && (this.last+1) < this.grid.store.getCount()){
this.selectRow(this.last+1, keepExisting);
this.grid.getView().focusRow(this.last);
}
/**
* Clears all selections.
*/
- clearSelections : function(fast){
+ clearSelections : function(fast)
+ {
if(this.locked) {
return;
}
if(fast !== true){
- var ds = this.grid.dataSource;
+ var ds = this.grid.store;
var s = this.selections;
s.each(function(r){
this.deselectRow(ds.indexOfId(r.id));
return;
}
this.selections.clear();
- for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
+ for(var i = 0, len = this.grid.store.getCount(); i < len; i++){
this.selectRow(i, true);
}
},
* @return {Boolean}
*/
isSelected : function(index){
- var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
+ var r = typeof index == "number" ? this.grid.store.getAt(index) : index;
return (r && this.selections.key(r.id) ? true : false);
},
return (this.selections.key(id) ? true : false);
},
+
// private
- handleMouseDown : function(e, t){
- var view = this.grid.getView(), rowIndex;
- if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
+ handleMouseDBClick : function(e, t){
+
+ },
+ // private
+ handleMouseDown : function(e, t)
+ {
+ var rowIndex = this.grid.headerShow ? t.dom.rowIndex - 1 : t.dom.rowIndex ; // first row is header???
+ if(this.isLocked() || rowIndex < 0 ){
return;
};
if(e.shiftKey && this.last !== false){
var last = this.last;
this.selectRange(last, rowIndex, e.ctrlKey);
this.last = last; // reset the last
- view.focusRow(rowIndex);
+ t.focus();
+
}else{
var isSelected = this.isSelected(rowIndex);
- if(e.button !== 0 && isSelected){
- view.focusRow(rowIndex);
- }else if(e.ctrlKey && isSelected){
+ //Roo.log("select row:" + rowIndex);
+ if(isSelected){
this.deselectRow(rowIndex);
- }else if(!isSelected){
- this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
- view.focusRow(rowIndex);
+ } else {
+ this.selectRow(rowIndex, true);
}
+
+ /*
+ if(e.button !== 0 && isSelected){
+ alert('rowIndex 2: ' + rowIndex);
+ view.focusRow(rowIndex);
+ }else if(e.ctrlKey && isSelected){
+ this.deselectRow(rowIndex);
+ }else if(!isSelected){
+ this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
+ view.focusRow(rowIndex);
+ }
+ */
}
this.fireEvent("afterselectionchange", this);
},
* @param {Number} row The index of the row to select
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
- selectRow : function(index, keepExisting, preventViewNotify){
- if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) {
+ selectRow : function(index, keepExisting, preventViewNotify)
+ {
+ if(this.locked || (index < 0 || index > this.grid.store.getCount())) {
return;
}
if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
if(!keepExisting || this.singleSelect){
this.clearSelections();
}
- var r = this.grid.dataSource.getAt(index);
+
+ var r = this.grid.store.getAt(index);
+ //console.log('selectRow - record id :' + r.id);
+
this.selections.add(r);
this.last = this.lastActive = index;
if(!preventViewNotify){
- this.grid.getView().onRowSelect(index);
+ var proxy = new Roo.Element(
+ this.grid.getRowDom(index)
+ );
+ proxy.addClass('bg-info info');
}
this.fireEvent("rowselect", this, index, r);
this.fireEvent("selectionchange", this);
* Deselects a row.
* @param {Number} row The index of the row to deselect
*/
- deselectRow : function(index, preventViewNotify){
+ deselectRow : function(index, preventViewNotify)
+ {
if(this.locked) {
return;
}
if(this.lastActive == index){
this.lastActive = false;
}
- var r = this.grid.dataSource.getAt(index);
+
+ var r = this.grid.store.getAt(index);
+ if (!r) {
+ return;
+ }
+
this.selections.remove(r);
+ //.console.log('deselectRow - record id :' + r.id);
if(!preventViewNotify){
- this.grid.getView().onRowDeselect(index);
+
+ var proxy = new Roo.Element(
+ this.grid.getRowDom(index)
+ );
+ proxy.removeClass('bg-info info');
}
this.fireEvent("rowdeselect", this, index);
this.fireEvent("selectionchange", this);
g.startEditing(newCell[0], newCell[1]);
}
}
-});/*
+});
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
}
//Roo.log(ev);
+
+ if(!el || el.dom == document){
+ return;
+ }
+
var bindEl = el;
// you can not look for children, as if el is the body.. then everythign is the child..
if(xy[0] + this.el.getWidth() > Roo.lib.Dom.getViewWidth()){
placement = 'left';
}
+
+ var scroll = Roo.select('body', true).first().getScroll();
+
+ if(xy[1] > Roo.lib.Dom.getViewHeight() + scroll.top - this.el.getHeight()){
+ placement = 'top';
+ }
+
}
align = Roo.bootstrap.Tooltip.alignment[placement];
/**
* @cfg {Number} gutter gutter width..
*/
- gutter : 10,
+ gutter : 10,
+
+ /**
+ * @cfg {Number} maxCols maximum number of columns
+ */
+
+ maxCols: 0,
/**
* @cfg {Boolean} isAutoInitial defalut true
this.cols = Math.max( cols, 1 );
+ this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
+
var totalBoxWidth = this.cols * boxWidth - this.padWidth;
var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
b.el.setWidth(width);
b.el.setHeight(height);
+ // iframe?
+ b.el.select('iframe',true).setSize(width,height);
}, this);
*/
columnWidth : 0,
+
+ /**
+ * @cfg {Number} maxCols maximum number of columns
+ */
+
+ maxCols: 0,
/**
* @cfg {Number} padHeight padding below box..
*/
var mathMethod = excess && excess < 1 ? 'round' : 'floor';
cols = Math[ mathMethod ]( cols );
this.cols = Math.max( cols, 1 );
-
+ this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
// padding positioning..
var totalColWidth = this.cols * this.columnWidth;
* @cfg {String} bgimage
*/
bgimage : '',
+ /**
+ * @cfg {String} videourl
+ */
+ videourl : '',
/**
* @cfg {String} cls
*/
cls: 'masonry-brick-text',
html: this.html
});
+ }
+ if (!this.title.length && !this.html.length) {
+ cfg.cn[0].cls += ' hide';
}
if(this.bgimage.length){
src: this.bgimage
});
}
-
+ if(this.videourl.length){
+ var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
+ // youtube support only?
+ cfg.cn.push({
+ tag: 'iframe',
+ cls: 'masonry-brick-image-view',
+ src: vurl,
+ frameborder : 0,
+ allowfullscreen : true
+ });
+
+
+ }
return cfg;
},
this.el.on('touchstart', this.onTouchStart, this);
this.el.on('touchmove', this.onTouchMove, this);
this.el.on('touchend', this.onTouchEnd, this);
+ this.el.on('contextmenu', this.onContextMenu, this);
} else {
this.el.on('mouseenter' ,this.enter, this);
this.el.on('mouseleave', this.leave, this);
onClick: function(e, el)
{
- alert('click');
-
if(!Roo.isTouch){
return;
}
var time = this.endTimer - this.startTimer;
- alert(time);
+ //alert(time);
if(time < 1000){
return;
{
// e.preventDefault();
+ this.touchmoved = false;
+
if(!this.bgimage.length || !this.html.length){
return;
}
this.timer = new Date().getTime();
- this.touchmoved = false;
},
onTouchMove: function(e, el)
this.touchmoved = true;
},
+ onContextMenu : function(e,el)
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ },
+
onTouchEnd: function(e, el)
{
// e.preventDefault();
if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
+
+ this.leave(e,el);
+
return;
}
cls: 'roo-brick-text',
html: this.html
});
+ } else {
+ cn.cls += ' hide';
}
if(this.bgimage.length){
Roo.bootstrap.layout.Manager = function(config)
{
Roo.bootstrap.layout.Manager.superclass.constructor.call(this);
- this.el = Roo.get(config.el);
- // ie scrollbar fix
- if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
- document.body.scroll = "no";
- }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
- this.el.position('relative');
- }
- this.id = this.el.id;
- this.el.addClass("roo-layout-container");
+
+
+
+
/** false to disable window resize monitoring @type Boolean */
this.monitorWindowResize = true;
this.regions = {};
"regionexpanded" : true
});
this.updating = false;
- Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+
+ if (config.el) {
+ this.el = Roo.get(config.el);
+ this.initEvents();
+ }
+
};
Roo.extend(Roo.bootstrap.layout.Manager, Roo.bootstrap.Component, {
updating : false,
+
+ onRender : function(ct, position)
+ {
+ if(!this.el){
+ this.el = Roo.get(ct);
+ this.initEvents();
+ }
+ },
+
+
+ initEvents: function()
+ {
+
+
+ // ie scrollbar fix
+ if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
+ document.body.scroll = "no";
+ }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
+ this.el.position('relative');
+ }
+ this.id = this.el.id;
+ this.el.addClass("roo-layout-container");
+ Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+ if(this.el.dom != document.body ) {
+ this.el.on('resize', this.layout,this);
+ this.el.on('show', this.layout,this);
+ }
+
+ },
+
/**
* Returns true if this layout is currently being updated
* @return {Boolean}
if(this.updating) {
return;
}
+
+ // render all the rebions if they have not been done alreayd?
+ Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
+ if(this.regions[region] && !this.regions[region].bodyEl){
+ this.regions[region].onRender(this.el)
+ }
+ },this);
+
var size = this.getViewSize();
var w = size.width;
var h = size.height;
this.add(region, ret);
nb = {}; /// find first...
break;
- /*
- case 'GridPanel':
+ case 'Grid':
+
// needs grid and region
//var el = this.getRegion(region).el.createChild();
- var el = this.el.createChild();
+ /*
+ *var el = this.el.createChild();
// create the grid first...
+ cfg.grid.container = el;
+ cfg.grid = new cfg.grid.xns[cfg.grid.xtype](cfg.grid);
+ */
- var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
- delete cfg.grid;
if (region == 'center' && this.active ) {
cfg.background = false;
}
- ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
+
+ ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
this.add(region, ret);
+ /*
if (cfg.background) {
+ // render grid on panel activation (if panel background)
ret.on('activate', function(gp) {
if (!gp.grid.rendered) {
- gp.grid.render();
+ // gp.grid.render(el);
}
});
} else {
- grid.render();
+ // cfg.grid.render(el);
}
+ */
break;
- */
- case 'Border': // it can get called on it'self...
+
+ case 'Border': // it can get called on it'self... - might need to check if this is fixed?
+ // it was the old xcomponent building that caused this before.
+ // espeically if border is the top element in the tree.
ret = this;
break;
return null;
- // GridPanel (grid, cfg)
-
+
}
this.beginUpdate();
// add children..
* @cfg {Boolean} split To show the splitter
* @cfg {Boolean} toolbar xtype configuration for a toolbar - shows on right of tabbar
*
+ * @cfg {string} cls Extra CSS classes to add to region
+ *
* @cfg {Roo.bootstrap.layout.Manager} mgr The manager
* @cfg {string} region the region that it inhabits..
*
*/
Roo.bootstrap.layout.Region = function(config)
{
-
+ this.applyConfig(config);
+
var mgr = config.mgr;
var pos = config.region;
config.skipConfig = true;
Roo.bootstrap.layout.Region.superclass.constructor.call(this, config);
- var dh = Roo.DomHelper;
- /** This region's container element
- * @type Roo.Element */
- this.el = dh.append(mgr.el.dom, {tag: "div", cls: "roo-layout-region roo-layout-panel roo-layout-panel-" + this.position}, true);
- /** This region's title element
- * @type Roo.Element */
-
- this.titleEl = dh.append(this.el.dom,
- {
- tag: "div",
- unselectable: "on",
- cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
- children:[
- {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "},
- {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
- ]}, true);
-
- this.titleEl.enableDisplayMode();
- /** This region's title text element
- * @type HTMLElement */
- this.titleTextEl = this.titleEl.dom.firstChild;
- this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
- /*
- this.closeBtn = this.createTool(this.tools.dom, "roo-layout-close");
- this.closeBtn.enableDisplayMode();
- this.closeBtn.on("click", this.closeClicked, this);
- this.closeBtn.hide();
-*/
- this.createBody(config);
+
+ if (mgr.el) {
+ this.onRender(mgr.el);
+ }
+
this.visible = true;
this.collapsed = false;
-
- if(config.hideWhenEmpty){
- this.hide();
- this.on("paneladded", this.validateVisibility, this);
- this.on("panelremoved", this.validateVisibility, this);
- }
- this.applyConfig(config);
+ this.unrendered_panels = [];
};
Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
-
-
+ position: '', // set by wrapper (eg. north/south etc..)
+ unrendered_panels : null, // unrendered panels.
createBody : function(){
/** This region's body element
* @type Roo.Element */
});
},
+ onRender: function(ctr, pos)
+ {
+ var dh = Roo.DomHelper;
+ /** This region's container element
+ * @type Roo.Element */
+ this.el = dh.append(ctr.dom, {
+ tag: "div",
+ cls: (this.config.cls || '') + " roo-layout-region roo-layout-panel roo-layout-panel-" + this.position
+ }, true);
+ /** This region's title element
+ * @type Roo.Element */
+
+ this.titleEl = dh.append(this.el.dom,
+ {
+ tag: "div",
+ unselectable: "on",
+ cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
+ children:[
+ {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "},
+ {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
+ ]}, true);
+
+ this.titleEl.enableDisplayMode();
+ /** This region's title text element
+ * @type HTMLElement */
+ this.titleTextEl = this.titleEl.dom.firstChild;
+ this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
+ /*
+ this.closeBtn = this.createTool(this.tools.dom, "roo-layout-close");
+ this.closeBtn.enableDisplayMode();
+ this.closeBtn.on("click", this.closeClicked, this);
+ this.closeBtn.hide();
+ */
+ this.createBody(this.config);
+ if(this.config.hideWhenEmpty){
+ this.hide();
+ this.on("paneladded", this.validateVisibility, this);
+ this.on("panelremoved", this.validateVisibility, this);
+ }
+ if(this.autoScroll){
+ this.bodyEl.setStyle("overflow", "auto");
+ }else{
+ this.bodyEl.setStyle("overflow", this.config.overflow || 'hidden');
+ }
+ //if(c.titlebar !== false){
+ if((!this.config.titlebar && !this.config.title) || this.config.titlebar === false){
+ this.titleEl.hide();
+ }else{
+ this.titleEl.show();
+ if(this.config.title){
+ this.titleTextEl.innerHTML = this.config.title;
+ }
+ }
+ //}
+ if(this.config.collapsed){
+ this.collapse(true);
+ }
+ if(this.config.hidden){
+ this.hide();
+ }
+
+ if (this.unrendered_panels && this.unrendered_panels.length) {
+ for (var i =0;i< this.unrendered_panels.length; i++) {
+ this.add(this.unrendered_panels[i]);
+ }
+ this.unrendered_panels = null;
+
+ }
+
+ },
+
applyConfig : function(c)
{
/*
this.autoScroll = c.autoScroll || false;
- if(this.autoScroll){
- this.bodyEl.setStyle("overflow", "auto");
- }else{
- this.bodyEl.setStyle("overflow", c.overflow || 'hidden');
- }
- //if(c.titlebar !== false){
- if((!c.titlebar && !c.title) || c.titlebar === false){
- this.titleEl.hide();
- }else{
- this.titleEl.show();
- if(c.title){
- this.titleTextEl.innerHTML = c.title;
- }
- }
- //}
+
+
this.duration = c.duration || .30;
this.slideDuration = c.slideDuration || .45;
this.config = c;
- if(c.collapsed){
- this.collapse(true);
- }
- if(c.hidden){
- this.hide();
- }
+
},
/**
* Returns true if this region is currently visible.
*/
updateBox : function(box)
{
+ if (!this.bodyEl) {
+ return; // not rendered yet..
+ }
+
this.box = box;
if(!this.collapsed){
this.el.dom.style.left = box.x + "px";
w += this.config.adjustments[0];
}
}
- if(h !== null){
+ if(h !== null && h > 0){
this.el.setHeight(h);
h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
h -= this.el.getBorderWidth("tb");
initTabs : function()
{
- this.bodyEl.setStyle("overflow", "hidden");
+ //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
+
var ts = new Roo.bootstrap.panel.Tabs({
el: this.bodyEl.dom,
tabPosition: this.bottomTabs ? 'bottom' : 'top',
ts.maxTabWidth = this.config.maxTabWidth || 250;
ts.preferredTabWidth = this.config.preferredTabWidth || 150;
ts.monitorResize = false;
- ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+ //ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden"); // this is set in render?
ts.bodyEl.addClass('roo-layout-tabs-body');
this.panels.each(this.initPanelAsTab, this);
},
initPanelAsTab : function(panel){
var ti = this.tabs.addTab(
panel.getEl().id,
- panel.getTitle(), null,
+ panel.getTitle(),
+ null,
this.config.closeOnTab && panel.isClosable()
);
if(panel.tabTip !== undefined){
* @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
* @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
*/
- add : function(panel){
+ add : function(panel)
+ {
if(arguments.length > 1){
for(var i = 0, len = arguments.length; i < len; i++) {
this.add(arguments[i]);
}
return null;
}
+
+ // if we have not been rendered yet, then we can not really do much of this..
+ if (!this.bodyEl) {
+ this.unrendered_panels.push(panel);
+ return panel;
+ }
+
+
+
+
if(this.hasPanel(panel)){
this.showPanel(panel);
return panel;
}
panel.setRegion(this);
this.panels.add(panel);
- if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+ /* if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+ // sinle panel - no tab...?? would it not be better to render it with the tabs,
+ // and hide them... ???
this.bodyEl.dom.appendChild(panel.getEl().dom);
if(panel.background !== true){
this.setActivePanel(panel);
this.fireEvent("paneladded", this, panel);
return panel;
}
+ */
if(!this.tabs){
this.initTabs();
}else{
applyConfig : function(config){
Roo.bootstrap.layout.Split.superclass.applyConfig.call(this, config);
+ },
+
+ onRender : function(ctr,pos) {
- if(config.split){
- if(!this.split){
-
-
- var splitEl = Roo.DomHelper.append(this.mgr.el.dom, {
- tag: "div",
- id: this.el.id + "-split",
- cls: "roo-layout-split roo-layout-split-"+this.position,
- html: " "
- });
- /** The SplitBar for this region
- * @type Roo.SplitBar */
- // does not exist yet...
- Roo.log([this.position, this.orientation]);
-
- this.split = new Roo.bootstrap.SplitBar({
- dragElement : splitEl,
- resizingElement: this.el,
- orientation : this.orientation
- });
-
- this.split.on("moved", this.onSplitMove, this);
- this.split.useShim = config.useShim === true;
- this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
- if(this.useSplitTips){
- this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
- }
- //if(config.collapsible){
- // this.split.el.on("dblclick", this.collapse, this);
- //}
- }
- if(typeof config.minSize != "undefined"){
- this.split.minSize = config.minSize;
- }
- if(typeof config.maxSize != "undefined"){
- this.split.maxSize = config.maxSize;
- }
- if(config.hideWhenEmpty || config.hidden || config.collapsed){
- this.hideSplitter();
+ Roo.bootstrap.layout.Split.superclass.onRender.call(this, ctr,pos);
+ if(!this.config.split){
+ return;
+ }
+ if(!this.split){
+
+ var splitEl = Roo.DomHelper.append(ctr.dom, {
+ tag: "div",
+ id: this.el.id + "-split",
+ cls: "roo-layout-split roo-layout-split-"+this.position,
+ html: " "
+ });
+ /** The SplitBar for this region
+ * @type Roo.SplitBar */
+ // does not exist yet...
+ Roo.log([this.position, this.orientation]);
+
+ this.split = new Roo.bootstrap.SplitBar({
+ dragElement : splitEl,
+ resizingElement: this.el,
+ orientation : this.orientation
+ });
+
+ this.split.on("moved", this.onSplitMove, this);
+ this.split.useShim = this.config.useShim === true;
+ this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
+ if(this.useSplitTips){
+ this.split.el.dom.title = this.config.collapsible ? this.collapsibleSplitTip : this.splitTip;
}
+ //if(config.collapsible){
+ // this.split.el.on("dblclick", this.collapse, this);
+ //}
+ }
+ if(typeof this.config.minSize != "undefined"){
+ this.split.minSize = this.config.minSize;
}
+ if(typeof this.config.maxSize != "undefined"){
+ this.split.maxSize = this.config.maxSize;
+ }
+ if(this.config.hideWhenEmpty || this.config.hidden || this.config.collapsed){
+ this.hideSplitter();
+ }
+
},
getHMaxSize : function(){
config.cursor = 'n-resize';
Roo.bootstrap.layout.Split.call(this, config);
+
+
if(this.split){
this.split.placement = Roo.bootstrap.SplitBar.TOP;
this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
Roo.extend(Roo.bootstrap.layout.North, Roo.bootstrap.layout.Split,
{
orientation: Roo.bootstrap.SplitBar.VERTICAL,
+
+
+
getBox : function(){
if(this.collapsed){
return this.collapsedEl.getBox();
this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
this.split.el.addClass("roo-layout-split-h");
}
- var size = config.initialSize || config.width;
- if(typeof size != "undefined"){
- this.el.setWidth(size);
- }
+
};
Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, {
orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
+
+ onRender: function(ctr, pos)
+ {
+ Roo.bootstrap.layout.West.superclass.onRender.call(this, ctr,pos);
+ var size = this.config.initialSize || this.config.width;
+ if(typeof size != "undefined"){
+ this.el.setWidth(size);
+ }
+ },
+
getBox : function(){
if(this.collapsed){
return this.collapsedEl.getBox();
this.closable = false;
this.loaded = false;
this.active = false;
- if(typeof config == "string"){
- this.title = config;
- }else{
- Roo.apply(this, config);
- }
- /*
- if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+
+
+ if (config.toolbar && !config.toolbar.el && config.toolbar.xtype) {
+
+ this.toolbar = new config.toolbar.xns[config.toolbar.xtype](config.toolbar);
+
this.wrapEl = this.el.wrap();
- this.toolbar.container = this.el.insertSibling(false, 'before');
- this.toolbar = new Roo.Toolbar(this.toolbar);
+ var ti = [];
+ if (config.toolbar.items) {
+ ti = config.toolbar.items ;
+ delete config.toolbar.items ;
+ }
+
+ var nitems = [];
+ this.toolbar.render(this.wrapEl, 'before');
+ for(var i =0;i < ti.length;i++) {
+ // Roo.log(['add child', items[i]]);
+ nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
+ }
+ this.toolbar.items = nitems;
+ this.toolbar.el.insertBefore(this.wrapEl.dom.firstChild);
+ delete config.toolbar;
+
}
-
+ /*
// xtype created footer. - not sure if will work as we normally have to render first..
if (this.footer && !this.footer.el && this.footer.xtype) {
if (!this.wrapEl) {
}
*/
+
+ if(typeof config == "string"){
+ this.title = config;
+ }else{
+ Roo.apply(this, config);
+ }
+
if(this.resizeEl){
this.resizeEl = Roo.get(this.resizeEl, true);
}else{
this.resizeEl.setStyle("overflow", "auto");
} else {
// fix randome scrolling
- this.el.on('scroll', function() {
- Roo.log('fix random scolling');
- this.scrollTo('top',0);
- });
+ //this.el.on('scroll', function() {
+ // Roo.log('fix random scolling');
+ // this.scrollTo('top',0);
+ //});
}
content = content || this.content;
if(content){
\*/
});
+/**
+ * @class Roo.bootstrap.panel.Grid
+ * @extends Roo.bootstrap.panel.Content
+ * @constructor
+ * Create a new GridPanel.
+ * @cfg {Roo.bootstrap.Table} grid The grid for this panel
+ * @param {Object} config A the config object
+
+ */
+
+
+
+Roo.bootstrap.panel.Grid = function(config)
+{
+
+
+ this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
+ {tag: "div", cls: "roo-layout-grid-wrapper roo-layout-inactive-content"}, true);
+
+ config.el = this.wrapper;
+ //this.el = this.wrapper;
+
+ if (config.container) {
+ // ctor'ed from a Border/panel.grid
+
+
+ this.wrapper.setStyle("overflow", "hidden");
+ this.wrapper.addClass('roo-grid-container');
+
+ }
+
+
+ if(config.toolbar){
+ var tool_el = this.wrapper.createChild();
+ this.toolbar = Roo.factory(config.toolbar);
+ var ti = [];
+ if (config.toolbar.items) {
+ ti = config.toolbar.items ;
+ delete config.toolbar.items ;
+ }
+
+ var nitems = [];
+ this.toolbar.render(tool_el);
+ for(var i =0;i < ti.length;i++) {
+ // Roo.log(['add child', items[i]]);
+ nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
+ }
+ this.toolbar.items = nitems;
+
+ delete config.toolbar;
+ }
+
+ Roo.bootstrap.panel.Grid.superclass.constructor.call(this, config);
+ config.grid.scrollBody = true;;
+ config.grid.monitorWindowResize = false; // turn off autosizing
+ config.grid.autoHeight = false;
+ config.grid.autoWidth = false;
+
+ this.grid = new config.grid.xns[config.grid.xtype](config.grid);
+
+ if (config.background) {
+ // render grid on panel activation (if panel background)
+ this.on('activate', function(gp) {
+ if (!gp.grid.rendered) {
+ gp.grid.render(el);
+ gp.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");
+
+ }
+ });
+
+ } else {
+ this.grid.render(this.wrapper);
+ this.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");
+
+ }
+ //this.wrapper.dom.appendChild(config.grid.getGridEl().dom);
+ // ??? needed ??? config.el = this.wrapper;
+
+
+
+
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+
+ var ctr = this.grid.getView().getFooterPanel(true);
+ this.footer.dataSource = this.grid.dataSource;
+ this.footer = Roo.factory(this.footer, Roo);
+ this.footer.render(ctr);
+
+ }
+
+
+
+
+
+};
+
+Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, {
+ getId : function(){
+ return this.grid.id;
+ },
+
+ /**
+ * Returns the grid for this panel
+ * @return {Roo.bootstrap.Table}
+ */
+ getGrid : function(){
+ return this.grid;
+ },
+
+ setSize : function(width, height){
+ if(!this.ignoreResize(width, height)){
+ var grid = this.grid;
+ var size = this.adjustForComponents(width, height);
+ var gridel = grid.getGridEl();
+ gridel.setSize(size.width, size.height);
+ /*
+ var thd = grid.getGridEl().select('thead',true).first();
+ var tbd = grid.getGridEl().select('tbody', true).first();
+ if (tbd) {
+ tbd.setSize(width, height - thd.getHeight());
+ }
+ */
+ grid.autoSize();
+ }
+ },
+
+
+
+ beforeSlide : function(){
+ this.grid.getView().scroller.clip();
+ },
+
+ afterSlide : function(){
+ this.grid.getView().scroller.unclip();
+ },
+
+ destroy : function(){
+ this.grid.destroy();
+ delete this.grid;
+ Roo.bootstrap.panel.Grid.superclass.destroy.call(this);
+ }
+});
+
/**
* @class Roo.bootstrap.panel.Nest
* @extends Roo.bootstrap.panel.Content
if(!this.ignoreResize(width, height)){
var size = this.adjustForComponents(width, height);
var el = this.layout.getEl();
- el.setSize(size.width, size.height);
+ if (size.height < 1) {
+ el.setWidth(size.width);
+ } else {
+ el.setSize(size.width, size.height);
+ }
var touch = el.dom.offsetWidth;
this.layout.layout();
// ie requires a double layout on the first pass
createStripElements : function(stripEl, text, closable)
{
var td = document.createElement("li"); // was td..
- stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
- //stripEl.appendChild(td);
+
+
+ //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
+
+
+ stripEl.appendChild(td);
/*if(closable){
td.className = "x-tabs-closable";
if(!this.closeTpl){
projects / roojs1 / blobdiff