Alien-Web-ExtJS-V3
view release on metacpan or search on metacpan
share/ext-all-debug-w-comments.js view on Meta::CPAN
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
}
},
/**
* @cfg {String} url
* The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should
* be modified to point to the local charts resource.
*/
/**
* @cfg {Object} extraStyle
* Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to <tt>null</tt>.
* For a detailed list of the options available, visit the YUI Charts site
* at <a href="http://developer.yahoo.com/yui/charts/#basicstyles">http://developer.yahoo.com/yui/charts/#basicstyles</a><br/>
* Some of the options availabe:<br />
* <ul style="padding:5px;padding-left:16px;list-style-type:inherit;">
* <li><b>padding</b> - The space around the edge of the chart's contents. Padding does not increase the size of the chart.</li>
* <li><b>animationEnabled</b> - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.</li>
* <li><b>font</b> - An Object defining the font style to be used in the chart. Defaults to <tt>{ name: 'Tahoma', color: 0x444444, size: 11 }</tt><br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>name</b> - font name</li>
* <li><b>color</b> - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>
* <li><b>size</b> - font size in points (numeric portion only, ie: 11)</li>
* <li><b>bold</b> - boolean</li>
* <li><b>italic</b> - boolean</li>
* <li><b>underline</b> - boolean</li>
* </ul>
* </li>
* <li><b>border</b> - An object defining the border style around the chart. The chart itself will decrease in dimensions to accomodate the border.<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>
* <li><b>size</b> - border size in pixels (numeric portion only, ie: 1)</li>
* </ul>
* </li>
* <li><b>background</b> - An object defining the background style of the chart.<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>
* <li><b>image</b> - an image URL. May be relative to the current document or absolute.</li>
* </ul>
* </li>
* <li><b>legend</b> - An object defining the legend style<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>display</b> - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".</li>
* <li><b>spacing</b> - an image URL. May be relative to the current document or absolute.</li>
* <li><b>padding, border, background, font</b> - same options as described above.</li>
* </ul></li>
* <li><b>dataTip</b> - An object defining the style of the data tip (tooltip).<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>padding, border, background, font</b> - same options as described above.</li>
* </ul></li>
* <li><b>xAxis and yAxis</b> - An object defining the style of the style of either axis.<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>color</b> - same option as described above.</li>
* <li><b>size</b> - same option as described above.</li>
* <li><b>showLabels</b> - boolean</li>
* <li><b>labelRotation</b> - a value in degrees from -90 through 90. Default is zero.</li>
* </ul></li>
* <li><b>majorGridLines and minorGridLines</b> - An object defining the style of the style of the grid lines.<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>color, size</b> - same options as described above.</li>
* </ul></li></li>
* <li><b>zeroGridLine</b> - An object defining the style of the style of the zero grid line.<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>color, size</b> - same options as described above.</li>
* </ul></li></li>
* <li><b>majorTicks and minorTicks</b> - An object defining the style of the style of ticks in the chart.<br/>
* <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
* <li><b>color, size</b> - same options as described above.</li>
* <li><b>length</b> - the length of each tick in pixels extending from the axis.</li>
* <li><b>display</b> - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".</li>
* </ul></li></li>
* </ul>
*/
extraStyle: null,
/**
* @cfg {Object} seriesStyles
* Contains styles to apply to the series after a refresh. Defaults to <tt>null</tt>.
*/
seriesStyles: null,
/**
* @cfg {Boolean} disableCaching
* True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
*/
disableCaching: Ext.isIE || Ext.isOpera,
disableCacheParam: '_dc',
initComponent : function(){
Ext.chart.Chart.superclass.initComponent.call(this);
if(!this.url){
this.url = Ext.chart.Chart.CHART_URL;
}
if(this.disableCaching){
this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));
}
this.addEvents(
'itemmouseover',
'itemmouseout',
'itemclick',
'itemdoubleclick',
'itemdragstart',
'itemdrag',
'itemdragend',
/**
* @event beforerefresh
* Fires before a refresh to the chart data is called. If the beforerefresh handler returns
* <tt>false</tt> the {@link #refresh} action will be cancelled.
* @param {Chart} this
*/
'beforerefresh',
/**
* @event refresh
* Fires after the chart data has been refreshed.
* @param {Chart} this
*/
'refresh'
);
this.store = Ext.StoreMgr.lookup(this.store);
},
/**
* Sets a single style value on the Chart instance.
*
* @param name {String} Name of the Chart style value to change.
* @param value {Object} New value to pass to the Chart style.
*/
setStyle: function(name, value){
this.swf.setStyle(name, Ext.encode(value));
},
/**
* Resets all styles on the Chart instance.
*
* @param styles {Object} Initializer for all Chart styles.
*/
setStyles: function(styles){
this.swf.setStyles(Ext.encode(styles));
},
/**
* Sets the styles on all series in the Chart.
*
* @param styles {Array} Initializer for all Chart series styles.
*/
setSeriesStyles: function(styles){
this.seriesStyles = styles;
var s = [];
Ext.each(styles, function(style){
s.push(Ext.encode(style));
});
this.swf.setSeriesStyles(s);
},
setCategoryNames : function(names){
this.swf.setCategoryNames(names);
},
setLegendRenderer : function(fn, scope){
var chart = this;
scope = scope || chart;
chart.removeFnProxy(chart.legendFnName);
chart.legendFnName = chart.createFnProxy(function(name){
return fn.call(scope, name);
});
chart.swf.setLegendLabelFunction(chart.legendFnName);
},
setTipRenderer : function(fn, scope){
var chart = this;
scope = scope || chart;
chart.removeFnProxy(chart.tipFnName);
chart.tipFnName = chart.createFnProxy(function(item, index, series){
var record = chart.store.getAt(index);
return fn.call(scope, chart, record, index, series);
});
chart.swf.setDataTipFunction(chart.tipFnName);
},
setSeries : function(series){
this.series = series;
this.refresh();
},
/**
* Changes the data store bound to this chart and refreshes it.
* @param {Store} store The store to bind to this chart
*/
bindStore : function(store, initial){
if(!initial && this.store){
if(store !== this.store && this.store.autoDestroy){
this.store.destroy();
}else{
this.store.un("datachanged", this.refresh, this);
this.store.un("add", this.delayRefresh, this);
this.store.un("remove", this.delayRefresh, this);
this.store.un("update", this.delayRefresh, this);
this.store.un("clear", this.refresh, this);
}
}
if(store){
store = Ext.StoreMgr.lookup(store);
store.on({
scope: this,
datachanged: this.refresh,
add: this.delayRefresh,
remove: this.delayRefresh,
update: this.delayRefresh,
clear: this.refresh
});
}
this.store = store;
if(store && !initial){
this.refresh();
}
},
onSwfReady : function(isReset){
Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
var ref;
this.swf.setType(this.type);
if(this.chartStyle){
this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle));
}
if(this.categoryNames){
this.setCategoryNames(this.categoryNames);
}
if(this.tipRenderer){
ref = this.getFunctionRef(this.tipRenderer);
this.setTipRenderer(ref.fn, ref.scope);
}
if(this.legendRenderer){
ref = this.getFunctionRef(this.legendRenderer);
this.setLegendRenderer(ref.fn, ref.scope);
}
if(!isReset){
this.bindStore(this.store, true);
}
this.refresh.defer(10, this);
},
delayRefresh : function(){
if(!this.refreshTask){
this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);
}
this.refreshTask.delay(this.refreshBuffer);
},
refresh : function(){
if(this.fireEvent('beforerefresh', this) !== false){
var styleChanged = false;
// convert the store data into something YUI charts can understand
var data = [], rs = this.store.data.items;
for(var j = 0, len = rs.length; j < len; j++){
data[j] = rs[j].data;
}
//make a copy of the series definitions so that we aren't
//editing them directly.
var dataProvider = [];
var seriesCount = 0;
var currentSeries = null;
var i = 0;
if(this.series){
seriesCount = this.series.length;
for(i = 0; i < seriesCount; i++){
currentSeries = this.series[i];
var clonedSeries = {};
for(var prop in currentSeries){
if(prop == "style" && currentSeries.style !== null){
clonedSeries.style = Ext.encode(currentSeries.style);
styleChanged = true;
//we don't want to modify the styles again next time
//so null out the style property.
// this causes issues
// currentSeries.style = null;
} else{
clonedSeries[prop] = currentSeries[prop];
}
}
dataProvider.push(clonedSeries);
}
}
if(seriesCount > 0){
for(i = 0; i < seriesCount; i++){
currentSeries = dataProvider[i];
if(!currentSeries.type){
currentSeries.type = this.type;
}
currentSeries.dataProvider = data;
}
} else{
dataProvider.push({type: this.type, dataProvider: data});
}
this.swf.setDataProvider(dataProvider);
if(this.seriesStyles){
this.setSeriesStyles(this.seriesStyles);
}
this.fireEvent('refresh', this);
}
},
// private
createFnProxy : function(fn){
var fnName = 'extFnProxy' + (++Ext.chart.Chart.PROXY_FN_ID);
Ext.chart.Chart.proxyFunction[fnName] = fn;
return 'Ext.chart.Chart.proxyFunction.' + fnName;
},
// private
removeFnProxy : function(fn){
if(!Ext.isEmpty(fn)){
fn = fn.replace('Ext.chart.Chart.proxyFunction.', '');
delete Ext.chart.Chart.proxyFunction[fn];
}
},
// private
getFunctionRef : function(val){
if(Ext.isFunction(val)){
return {
fn: val,
scope: this
};
}else{
return {
fn: val.fn,
scope: val.scope || this
};
}
},
// private
onDestroy: function(){
if (this.refreshTask && this.refreshTask.cancel){
this.refreshTask.cancel();
}
Ext.chart.Chart.superclass.onDestroy.call(this);
this.bindStore(null);
this.removeFnProxy(this.tipFnName);
this.removeFnProxy(this.legendFnName);
}
});
Ext.reg('chart', Ext.chart.Chart);
Ext.chart.Chart.PROXY_FN_ID = 0;
Ext.chart.Chart.proxyFunction = {};
/**
* Sets the url to load the chart from. This should be set to a local resource.
* @static
* @type String
*/
Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.8.2/build/charts/assets/charts.swf';
/**
* @class Ext.chart.PieChart
* @extends Ext.chart.Chart
* @constructor
* @xtype piechart
*/
Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {
type: 'pie',
onSwfReady : function(isReset){
Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);
this.setDataField(this.dataField);
this.setCategoryField(this.categoryField);
},
setDataField : function(field){
this.dataField = field;
this.swf.setDataField(field);
},
setCategoryField : function(field){
this.categoryField = field;
this.swf.setCategoryField(field);
}
});
Ext.reg('piechart', Ext.chart.PieChart);
/**
* @class Ext.chart.CartesianChart
* @extends Ext.chart.Chart
* @constructor
* @xtype cartesianchart
*/
Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {
onSwfReady : function(isReset){
Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);
this.labelFn = [];
if(this.xField){
this.setXField(this.xField);
}
if(this.yField){
this.setYField(this.yField);
}
if(this.xAxis){
this.setXAxis(this.xAxis);
}
share/ext-all-debug-w-comments.js view on Meta::CPAN
*
* @property calculateCategoryCount
* @type Boolean
*/
calculateCategoryCount: false
});
/**
* @class Ext.chart.Series
* Series class for the charts widget.
* @constructor
*/
Ext.chart.Series = function(config) { Ext.apply(this, config); };
Ext.chart.Series.prototype =
{
/**
* The type of series.
*
* @property type
* @type String
*/
type: null,
/**
* The human-readable name of the series.
*
* @property displayName
* @type String
*/
displayName: null
};
/**
* @class Ext.chart.CartesianSeries
* @extends Ext.chart.Series
* CartesianSeries class for the charts widget.
* @constructor
*/
Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {
/**
* The field used to access the x-axis value from the items from the data
* source.
*
* @property xField
* @type String
*/
xField: null,
/**
* The field used to access the y-axis value from the items from the data
* source.
*
* @property yField
* @type String
*/
yField: null,
/**
* False to not show this series in the legend. Defaults to <tt>true</tt>.
*
* @property showInLegend
* @type Boolean
*/
showInLegend: true,
/**
* Indicates which axis the series will bind to
*
* @property axis
* @type String
*/
axis: 'primary'
});
/**
* @class Ext.chart.ColumnSeries
* @extends Ext.chart.CartesianSeries
* ColumnSeries class for the charts widget.
* @constructor
*/
Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {
type: "column"
});
/**
* @class Ext.chart.LineSeries
* @extends Ext.chart.CartesianSeries
* LineSeries class for the charts widget.
* @constructor
*/
Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {
type: "line"
});
/**
* @class Ext.chart.BarSeries
* @extends Ext.chart.CartesianSeries
* BarSeries class for the charts widget.
* @constructor
*/
Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {
type: "bar"
});
/**
* @class Ext.chart.PieSeries
* @extends Ext.chart.Series
* PieSeries class for the charts widget.
* @constructor
*/
Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {
type: "pie",
dataField: null,
categoryField: null
});/**
* @class Ext.menu.Menu
* @extends Ext.Container
* <p>A menu object. This is the container to which you may add menu items. Menu can also serve as a base class
share/ext-all-debug-w-comments.js view on Meta::CPAN
* <pre><code>
var form = new Ext.FormPanel({
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 700,
renderTo: document.body,
layout:'column', // arrange items in columns
defaults: { // defaults applied to items
layout: 'form',
border: false,
bodyStyle: 'padding:4px'
},
items: [{
// Fieldset in Column 1
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
autoHeight:true,
defaults: {
anchor: '-20' // leave room for error icon
},
defaultType: 'textfield',
items :[{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}
]
},{
// Fieldset in Column 2 - Panel inside
xtype:'fieldset',
title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
autoHeight:true,
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true, // fieldset initially collapsed
layout:'anchor',
items :[{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 100
}]
}]
});
* </code></pre>
* @constructor
* @param {Object} config Configuration options
* @xtype fieldset
*/
Ext.form.FieldSet = Ext.extend(Ext.Panel, {
/**
* @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just
* in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
* to <tt>false</tt>).
* <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
* If <tt>true</tt> is specified, the default DomHelper config object used to create the element
* is:</p><pre><code>
* {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
* </code></pre>
*/
/**
* @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
* (defaults to <tt>'[checkbox id]-checkbox'</tt>).
*/
/**
* @cfg {Boolean} collapsible
* <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
* rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
* button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.
*/
/**
* @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
/**
* @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see
* {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
* This property cascades to child containers.
*/
/**
* @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
*/
baseCls : 'x-fieldset',
/**
* @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).
*/
layout : 'form',
/**
* @cfg {Boolean} animCollapse
* <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the
* animation (defaults to <tt>false</tt>).
*/
animCollapse : false,
// private
onRender : function(ct, position){
if(!this.el){
this.el = document.createElement('fieldset');
this.el.id = this.id;
if (this.title || this.header || this.checkboxToggle) {
this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';
}
}
Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
if(this.checkboxToggle){
var o = typeof this.checkboxToggle == 'object' ?
this.checkboxToggle :
{tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
this.checkbox = this.header.insertFirst(o);
this.checkbox.dom.checked = !this.collapsed;
this.mon(this.checkbox, 'click', this.onCheckClick, this);
}
},
// private
onCollapse : function(doAnim, animArg){
if(this.checkbox){
this.checkbox.dom.checked = false;
}
Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
},
// private
onExpand : function(doAnim, animArg){
if(this.checkbox){
this.checkbox.dom.checked = true;
}
Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
},
/**
* This function is called by the fieldset's checkbox when it is toggled (only applies when
* checkboxToggle = true). This method should never be called externally, but can be
* overridden to provide custom behavior when the checkbox is toggled if needed.
*/
onCheckClick : function(){
this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
}
/**
* @cfg {String/Number} activeItem
* @hide
*/
/**
* @cfg {Mixed} applyTo
* @hide
*/
/**
* @cfg {Boolean} bodyBorder
* @hide
*/
/**
* @cfg {Boolean} border
* @hide
*/
/**
* @cfg {Boolean/Number} bufferResize
* @hide
( run in 0.366 second using v1.01-cache-2.11-cpan-fa01517f264 )