// actually if flexy:foreach is found, we really want to create
// multiple copies here...
- Roo.log('render');
- Roo.log(this);
- Roo.log(this[cntr]);
+ //Roo.log('render');
+ //Roo.log(this[cntr]());
cn.render(this[cntr](true));
}
// then add the element..
}
return cfg;
+ },
+
+ titleEl : function()
+ {
+ if(!this.el || !this.panel.length || !this.header.length){
+ return;
+ }
+
+ return this.el.select('.panel-title',true).first();
+ },
+
+ setTitle : function(v)
+ {
+ var titleEl = this.titleEl();
+
+ if(!titleEl){
+ return;
+ }
+
+ titleEl.dom.innerHTML = v;
+ },
+
+ getTitle : function()
+ {
+
+ var titleEl = this.titleEl();
+
+ if(!titleEl){
+ return '';
+ }
+
+ return titleEl.dom.innerHTML;
}
});
* @cfg {String} href a tag href
* @cfg {String} target (_self|_blank|_parent|_top) target for a href.
* @cfg {String} html the content of the link.
+ * @cfg {Boolean} preventDefault (true | false) default false
*
* @constructor
href: false,
target: false,
+ preventDefault: false,
getAutoCreate : function(){
onClick : function(e)
{
+ if(this.preventDefault){
+ e.preventDefault();
+ }
//Roo.log('img onclick');
this.fireEvent('click', this, e);
}
* @cfg {String} sortable Specifies that the table should be sortable
* @cfg {String} summary Specifies a summary of the content of a table
* @cfg {Number} width Specifies the width of a table
+ * @cfg {String} layout table layout (auto | fixed | initial | inherit)
*
* @cfg {boolean} striped Should the rows be alternative striped
* @cfg {boolean} bordered Add borders to the table
* @cfg {boolean} condensed Format condensed
* @cfg {boolean} responsive Format condensed
* @cfg {Boolean} loadMask (true|false) default false
+ * @cfg {Boolean} tfoot (true|false) generate tfoot, default true
+ * @cfg {Boolean} thead (true|false) generate thead, default true
+ * @cfg {Boolean} RowSelection (true|false) default false
+ * @cfg {Boolean} CellSelection (true|false) default false
*
* @cfg {Roo.bootstrap.PagingToolbar} footer a paging toolbar
this.footer.dataSource = this.ds;
this.footer = Roo.factory(this.footer);
}
+
+ /** @private */
+ this.addEvents({
+ /**
+ * @event cellclick
+ * Fires when a cell is clicked
+ * @param {Roo.bootstrap.Table} this
+ * @param {Roo.Element} el
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "cellclick" : true,
+ /**
+ * @event celldblclick
+ * Fires when a cell is double clicked
+ * @param {Roo.bootstrap.Table} this
+ * @param {Roo.Element} el
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "celldblclick" : true,
+ /**
+ * @event rowclick
+ * Fires when a row is clicked
+ * @param {Roo.bootstrap.Table} this
+ * @param {Roo.Element} el
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowclick" : true,
+ /**
+ * @event rowdblclick
+ * Fires when a row is double clicked
+ * @param {Roo.bootstrap.Table} this
+ * @param {Roo.Element} el
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowdblclick" : true,
+ /**
+ * @event rowclass
+ * Fires when a row is rendered, so you can change add a style to it.
+ * @param {Roo.bootstrap.Table} this
+ * @param {Object} rowcfg contains record rowIndex colIndex and rowClass - set rowClass to add a style.
+ */
+ 'rowclass' : true
+
+ });
};
Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
cm : false,
store : false,
loadMask : false,
+ tfoot : true,
+ thead : true,
+ RowSelection : false,
+ CellSelection : false,
+ layout : false,
+
getAutoCreate : function(){
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
if (this.striped) {
cfg.cls += ' table-striped';
}
+
if (this.hover) {
cfg.cls += ' table-hover';
}
cfg.cls += ' table-responsive';
}
-
-
-
if (this.cls) {
cfg.cls+= ' ' +this.cls;
}
if (this.width) {
cfg.width=this.width;
}
+ if (this.layout) {
+ cfg.style = (typeof(cfg.style) == 'undefined') ? ('table-layout:' + this.layout + ';') : (cfg.style + ('table-layout:' + this.layout + ';'));
+ }
if(this.store || this.cm){
- cfg.cn.push(this.renderHeader());
+ if(this.thead){
+ cfg.cn.push(this.renderHeader());
+ }
+
cfg.cn.push(this.renderBody());
- cfg.cn.push(this.renderFooter());
+
+ if(this.tfoot){
+ cfg.cn.push(this.renderFooter());
+ }
cfg.cls+= ' TableGrid';
}
-
return { cn : [ cfg ] };
},
-//
-// initTableGrid : function()
-// {
-// var cfg = {};
-//
-// var header = {
-// tag: 'thead',
-// cn : []
-// };
-//
-// var cm = this.cm;
-//
-// for(var i = 0, len = cm.getColumnCount(); i < len; i++){
-// header.cn.push({
-// tag: 'th',
-// html: cm.getColumnHeader(i)
-// })
-// }
-//
-// cfg.push(header);
-//
-// return cfg;
-//
-//
-// },
initEvents : function()
{
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
e.on('click', _this.sort, _this);
});
-// this.maskEl = Roo.DomHelper.append(this.el.select('.TableGrid', true).first(), {tag: "div", cls:"x-dlg-mask"}, true);
-// this.maskEl.enableDisplayMode("block");
-// this.maskEl.show();
+
+ this.el.on("click", this.onClick, this);
+ this.el.on("dblclick", this.onDblClick, this);
this.parent().el.setStyle('position', 'relative');
if (this.footer) {
this.footer.onRender(this.el.select('tfoot tr td').first(), null);
}
-
- // mask should be using Roo.bootstrap.Mask...
- /*
- var mark = {
- tag: "div",
- cls:"x-dlg-mask",
- style: "text-align:center",
- cn: [
- {
- tag: "div",
- style: "background-color:white;width:50%;margin:100 auto",
- cn: [
- {
- tag: "img",
- src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
- },
- {
- tag: "span",
- html: "Loading"
- }
-
- ]
- }
- ]
- }
-
- var size = this.el.getSize();
-
- this.maskEl = Roo.DomHelper.append(document.body, mark, true);
-
- this.maskEl.setSize(size.width, 300); // we will fix the height at the beginning...
- this.maskEl.enableDisplayMode("block");
- */
this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
this.store.on('load', this.onLoad, this);
this.store.on('beforeload', this.onBeforeLoad, this);
- // load should be trigger on render..
- //this.store.load();
+ },
+
+ onClick : function(e, el)
+ {
+ var cell = Roo.get(el);
+ var row = cell.findParent('tr', false, true);
+ var cellIndex = cell.dom.cellIndex;
+ var rowIndex = row.dom.rowIndex;
+
+ if(this.CellSelection){
+ this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
+ }
+
+ if(this.RowSelection){
+ this.fireEvent('rowclick', this, row, rowIndex, e);
+ }
+ },
+
+ onDblClick : function(e,el)
+ {
+ var cell = Roo.get(el);;
+ var row = cell.findParent('tr', false, true);
+ var cellIndex = cell.dom.cellIndex;
+ var rowIndex = row.dom.rowIndex;
+
+ if(this.CellSelection){
+ this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
+ }
+ if(this.RowSelection){
+ this.fireEvent('rowdblclick', this, row, rowIndex, e);
+ }
},
sort : function(e,el)
var c = {
tag: 'th',
+ style : '',
html: cm.getColumnHeader(i)
};
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';
+ c.style += ' width:' + config.width + 'px;';
}
header.cn.push(c)
var renders = [];
if(this.store.getCount() > 0){
- this.store.data.each(function(d){
+ this.store.data.each(function(d,rowIndex){
var row = {
tag : 'tr',
cn : []
})
}
+ var rowcfg = {
+ record: d,
+ rowIndex : rowIndex,
+ colIndex : i,
+ rowClass : ''
+ }
+
+ _this.fireEvent('rowclass', this, rowcfg);
+
var td = {
tag: 'td',
id: id,
+ cls : rowcfg.rowClass,
+ style: '',
html: (typeof(value) === 'object') ? '' : value
};
+ if(typeof(config.align) != 'undefined' && config.align.length){
+ td.style += ' text-align:' + config.align + ';';
+ }
+
if(typeof(config.width) != 'undefined'){
- td.style = 'width:' + config.width + 'px';
+ td.style += ' width:' + config.width + 'px;';
}
+
row.cn.push(td);
}
cfg.width=this.width
}
- Roo.log(cfg);
+
return cfg;
}
cfg.valign = this.valign;
}
- Roo.log(cfg);
-
return cfg;
}
initEvents : function()
{
this.el.on('submit', this.onSubmit, this);
-
+ this.el.on('keypress', function(e) {
+ if (e.getCharCode() != 13) {
+ return true;
+ }
+ e.preventDefault();
+ return false;
+ });
},
// private
* @cfg {Number} labelWidth set the width of label (0-12)
* @cfg {String} labelAlign (top|left)
* @cfg {Boolean} readOnly Specifies that the field should be read-only
+ * @cfg {String} align (left|center|right) Default left
*
*
* @constructor
labelWidth : 2,
labelAlign : false,
readOnly : false,
+ align : false,
parentLabelAlign : function()
{
};
+ if(this.align){
+ input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
+ }
+
if(this.maxLength && this.maxLength != Number.MAX_VALUE){
input.maxLength = this.maxLength;
}
* @extends Roo.bootstrap.TriggerField
* A combobox control with support for autocomplete, remote-loading, paging and many other features.
* @cfg {Boolean} append (true|false) default false
+ * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
* @constructor
* Create a new ComboBox.
* @param {Object} config Configuration options
hasQuery: false,
append: false,
loadNext: false,
+ autoFocus : true,
item: [],
// element that contains real text value.. (when hidden is used..)
},
"enter" : function(e){
- this.onViewClick();
+// this.onViewClick();
//return true;
+ this.collapse();
+
+ if(this.fireEvent("specialkey", this, e)){
+ this.onViewClick(false);
+ }
+
+ return true;
},
"esc" : function(e){
if(this.editable){
this.inputEl().dom.select();
}
- if(!this.selectByValue(this.value, true)){
+ if(!this.selectByValue(this.value, true) && this.autoFocus){
this.select(0, true);
}
}else{
- this.selectNext();
+ if(this.autoFocus){
+ this.selectNext();
+ }
if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
this.taTask.delay(this.typeAheadDelay);
}
}
this.store.load(options);
- this.expand();
+ /*
+ * this code will make the page width larger, at the beginning, the list not align correctly,
+ * we should expand the list on onLoad
+ * so command out it
+ */
+// this.expand();
}
}else{
this.selectedIndex = -1;
{
tag: 'th',
cls: 'prev',
- html: '<i class="icon-arrow-left"/>'
+ html: '<i class="fa fa-arrow-left"/>'
},
{
tag: 'th',
{
tag: 'th',
cls: 'next',
- html: '<i class="icon-arrow-right"/>'
+ html: '<i class="fa fa-arrow-right"/>'
}
]
place: function()
{
- this.picker().removeClass(['bottom', 'top']);
+ this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
- 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(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
-
- return;
+ var cls = ['bottom'];
+
+ if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top
+ cls.pop();
+ cls.push('top');
}
- this.picker().addClass('bottom');
+ cls.push('right');
+
+ if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left
+ cls.pop();
+ cls.push('left');
+ }
+
+ this.picker().addClass(cls.join('-'));
+
+ var _this = this;
+
+ Roo.each(cls, function(c){
+ if(c == 'bottom'){
+ _this.picker().setTop(_this.inputEl().getHeight());
+ return;
+ }
+ if(c == 'top'){
+ _this.picker().setTop(0 - _this.picker().getHeight());
+ return;
+ }
+
+ if(c == 'left'){
+ _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
+ return;
+ }
+ if(c == 'right'){
+ _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
+ return;
+ }
+ });
- this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
},
onFocus : function()
// old args format still supported... - xtype is prefered..
// created from xtype...
var ds = config.dataSource;
- var items = [];
+ this.toolbarItems = [];
if (config.items) {
- items = config.items;
- config.items = [];
+ this.toolbarItems = config.items;
+// config.items = [];
}
Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
- // supprot items array.
-
- Roo.each(items, function(e) {
- this.add(Roo.factory(e));
- },this);
-
-
-
-
-
};
Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
*/
refreshText : "Refresh",
+ buttons : false,
// private
onRender : function(ct, position)
{
this.navgroup.onRender(this.el, null);
// add the buttons to the navgroup
+ if(this.displayInfo){
+ Roo.log(this.el.select('ul.navbar-nav',true).first());
+ this.el.select('ul.navbar-nav',true).first().createChild({cls:'x-paging-info'});
+ this.displayEl = this.el.select('.x-paging-info', true).first();
+// var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info', preventDefault : true } );
+// this.displayEl = navel.el.select('span',true).first();
+ }
+
+ var _this = this;
+
+ if(this.buttons){
+ Roo.each(_this.buttons, function(e){
+ Roo.factory(e).onRender(_this.el, null);
+ });
+ }
+
+ Roo.each(_this.toolbarItems, function(e) {
+ _this.navgroup.addItem(e);
+ });
+
this.first = this.navgroup.addItem({
tooltip: this.firstText,
cls: "prev",
listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
- if(this.displayInfo){
- var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info' } );
- this.displayEl = navel.el.select('a',true).first();
- }
-
},
// private
-
\ No newline at end of file
+ /*
+ * - LGPL
+ *
+ * Graph
+ *
+ */
+
+
+/**
+ * @class Roo.bootstrap.Graph
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Graph class
+> Prameters
+ -sm {number} sm 4
+ -md {number} md 5
+ -graphtype {String} graphtype bar | vbar | pie
+ -g_x {number} x coodinator | centre x (pie)
+ -g_y {number} y coodinator | centre y (pie)
+ -g_r {number} radius (pie)
+ -g_height {number} height of the chart (respected by all elements in the set)
+ -g_width {number} width of the chart (respected by all elements in the set)
+ -{Array} values
+ -opts (object) options for the chart
+ o {
+ o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
+ o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
+ o vgutter (number)
+ o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
+ o stacked (boolean) whether or not to tread values as in a stacked bar chart
+ o to
+ o stretch (boolean)
+ o }
+ -opts (object) options for the pie
+ o{
+ o cut
+ o startAngle (number)
+ o endAngle (number)
+ }
+ *
+ * @constructor
+ * Create a new Input
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.Graph = function(config){
+ Roo.bootstrap.Graph.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // img events
+ /**
+ * @event click
+ * The img click event for the img.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
+};
+
+Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component, {
+
+ sm: 4,
+ md: 5,
+ graphtype: 'bar',
+ g_height: 250,
+ g_width: 650,
+ g_x: 50,
+ g_y: 50,
+ g_r: 30,
+ opts:{
+ //g_colors: this.colors,
+ g_type: 'soft',
+ g_gutter: '20%'
+
+ },
+
+ getAutoCreate : function(){
+
+ var cfg = {
+ tag: 'div',
+ html : null
+ }
+
+
+ return cfg;
+ },
+
+ onRender : function(ct,position){
+ Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
+ var r = {};
+ this.raphael = Raphael(this.el.dom),
+ data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
+ data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
+ data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
+ txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
+ /*
+ r.text(160, 10, "Single Series Chart").attr(txtattr);
+ r.text(480, 10, "Multiline Series Chart").attr(txtattr);
+ r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
+ r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
+
+ r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"});
+ r.barchart(330, 10, 300, 220, data1);
+ r.barchart(10, 250, 300, 220, data2, {stacked: true});
+ r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
+ */
+
+ // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
+ // r.barchart(30, 30, 560, 250, xdata, {
+ // labels : [55, 20, 13, 32, 5, 1, 2, 10,5 , 10],
+ // axis : "0 0 1 1",
+ // axisxlabels : xdata
+ // //yvalues : cols,
+
+ // });
+
+ },
+
+ load : function(graphtype,xdata,opts){
+ this.raphael.clear();
+ if(!graphtype) {
+ graphtype = this.graphtype;
+ }
+ if(!opts){
+ opts = this.opts;
+ }
+ switch(graphtype){
+ case 'bar':
+ this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts);
+ break;
+ case 'hbar':
+ this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts);
+ break;
+ case 'pie':
+ this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts);
+ break;
+
+ }
+ },
+
+ initEvents: function() {
+
+ if(!this.href){
+ this.el.on('click', this.onClick, this);
+ }
+ },
+
+ onClick : function(e)
+ {
+ Roo.log('img onclick');
+ this.fireEvent('click', this, e);
+ }
+
+});
+
+
+/*
+ * - LGPL
+ *
+ * numberBox
+ *
+ */
+
+
+/**
+ * @class Roo.bootstrap.dash.NumberBox
+ * @extends Roo.bootstrap.Component
+ * Bootstrap NumberBox class
+ * @cfg {number} sm 4
+ * @cfg {number} md 5
+ * @cfg {String} headline
+ * @cfg {String} title
+ * @cfg {String} more info url
+ * @cfg {String} more info text
+ * @cfg {Array} opts values
+ *
+ * @constructor
+ * Create a new Input
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.dash.NumberBox = function(config){
+ Roo.bootstrap.dash.NumberBox.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // img events
+ /**
+ * @event click
+ * The img click event for the img.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
+};
+
+Roo.extend(Roo.bootstrap.dash.NumberBox, Roo.bootstrap.Component, {
+
+ width: 200,
+ height: 150,
+ headline: '',
+ title: 'Title',
+ more_url: '',
+ more_text: '',
+
+ getAutoCreate : function(){
+
+ var cfg = {
+ tag: 'div',
+ cls: '',
+ html : null,
+ cn: [
+ {
+ tag: 'h',
+ cls: '',
+ html: this.headline ? this.headline : 'Headline'
+ },
+ {
+ tag: 'p',
+ cls: '',
+ html: this.title ? this.title : 'Title'
+ },
+ {
+ tag: 'div',
+ cls: '',
+ html : null,
+ cn: [{
+ tag: 'a',
+ href: this.more_url,
+ cls: '',
+ html: this.more_text
+ }]
+
+ }]
+ }
+
+
+ return cfg;
+ },
+
+ // onRender : function(ct,position){
+ // Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
+
+ // },
+
+ // load : function(graphtype,xdata){
+ // this.raphael.clear();
+ // if(!graphtype) {
+ // graphtype = this.graphtype;
+ // }
+ // switch(graphtype){
+ // case 'bar':
+ // this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,this.opts);
+ // break;
+ // case 'hbar':
+ // this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,this.opts);
+ // break;
+ // case 'pie':
+ // this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,this.opts);
+ // break;
+
+ // }
+ // },
+
+ initEvents: function() {
+
+ if(!this.href){
+ this.el.on('click', this.onClick, this);
+ }
+ },
+
+ onClick : function(e)
+ {
+ Roo.log('img onclick');
+ this.fireEvent('click', this, e);
+ }
+
+});
+
+
projects / roojs1 / blobdiff