}
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
* @param {Number} rowIndex
* @param {Roo.EventObject} e
*/
- "rowdblclick" : true
+ "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
});
};
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';
}
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){
if(this.thead){
// }
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.width) != 'undefined'){
- td.style += 'width:' + config.width + 'px;';
+ td.style += ' width:' + config.width + 'px;';
}
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
* @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.forceSelection){
this.inputEl().on('blur', this.doForce, this);
- }else{
- this.inputEl().on('blur', this.onBlur, this);
}
if(this.multiple){
}
Roo.bootstrap.ComboBox.superclass.onDestroy.call(this);
},
-
- onBlur : function(e)
- {
- this.fireEvent("blur", this, e);
- },
// private
fireKey : 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);
}
{
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"/>'
}
]
// 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 = 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",
-
\ 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