This progress bar pager EXTJS grid works in EXTJS5 but not in EXTJS 4.So,how can i make it work in EXTJS 4.
This is a simple extJS 4 grid with pagination support.I want my EXTJS 4 grid to support pagination.How to make my EXTJS 4 grid with pagination?
My current code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="jszip.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.define('Ext.ux.ProgressBarPager', {
requires: ['Ext.ProgressBar'],
/**
* #cfg {Number} width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 200,
/**
* #cfg {String} defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
/**
* #cfg {Object} defaultAnimCfg
* <p>A {#link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
*/
defaultAnimCfg : {
duration: 1000,
/*easing: 'bounceOut' */
},
/**
* Creates new ProgressBarPager.
* #param {Object} config Configuration options
*/
constructor : function(config) {
if (config) {
Ext.apply(this, config);
}
},
//public
init : function (parent) {
var displayItem;
if (parent.displayInfo) {
this.parent = parent;
displayItem = parent.child("#displayItem");
if (displayItem) {
parent.remove(displayItem, true);
}
this.progressBar = Ext.create('Ext.ProgressBar', {
text : this.defaultText,
width : this.width,
animate : this.defaultAnimCfg,
style: {
cursor: 'pointer'
},
listeners: {
el: {
scope: this,
click: this.handleProgressBarClick
}
}
});
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
Ext.apply(parent, this.parentOverrides);
}
},
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]- box.x,
pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
parent.store.loadPage(newPage);
},
// private, overriddes
parentOverrides : {
// private
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
var count = this.store.getCount(),
pageData = this.getPageData(),
message = count === 0 ?
this.emptyMsg :
Ext.String.format(
this.displayMsg,
pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
),
percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
}
}
}
});
Ext.onReady(function() {
function JSONToCSVConvertor(counter)
{
var zip = new JSZip();
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var CSV = '';
var row1="Sample v/s Feature"+',';
for(var p=0;p<Object.keys(counter.levels[i].samples).length;p++)
{
row1 += counter.levels[i].samples[p].name + ',';
}
row1.slice(0, row1.length - 1);
CSV += row1 + '\r\n';
var row2="";
for(var k=0;k<Object.keys(counter.levels[i].samples[0].features).length;k++)
{
row2 +=counter.levels[i].samples[0].features[k].name + ',';
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
row2 +=counter.levels[i].samples[j].features[k].count+ ',';
}
row2 +='\n';
row2.slice(0, row2.length - 1);
}
CSV += row2 + '\r\n\n';
var fileName = "";
var title=counter.levels[i].name;
fileName += title.replace(/ /g,"_");
zip.file(title+".csv", CSV);
/* var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);*/
}
/* var content = zip.generate({type:"blob"});
saveAs(content, "example.zip");*/
content = zip.generate();
location.href="data:application/zip;base64," + content;
}
var familyTable;
var classTable;
var orderTable;
var phylumTable;
var superkingdomTable;
var genusTable;
var panelHeader;
var counter = {"workflowName":"Workflow-1","levels":[{"name":"family","samples":[{"name":"1660SH_3","features":[{"count":3,"name":"Bacteroidaceae"}],"bacteriaIdList":["Bacteroidaceae"]},{"name":"1660SH_4","features":[{"count":3,"name":"Bacteroidaceae"}],"bacteriaIdList":["Bacteroidaceae"]}]},{"name":"genus","samples":[{
"name": "1660SH_3",
"features": [{
"count": 8,
"name": "Bacteroidia"
}, {
"count": 9,
"name": "Bacteroidiaa"
},
{
"count": 10,
"name": "Bacteroidiab"
},
{
"count": 11,
"name": "Bacteroidiac"
}]
}, {
"name": "1660SH_4",
"features": [{
"count": 5,
"name": "Bacteroidia"
}, {
"count": 6,
"name": "Bacteroidiaa"
},
{
"count": 7,
"name": "Bacteroidiab"
},
{
"count": 8,
"name": "Bacteroidiac"
}]
}]},{"name":"class","samples":[{"name":"1660SH_3","features":[{"count":8,"name":"Bacteroidia"}],"bacteriaIdList":["Bacteroidia"]},{"name":"1660SH_4","features":[{"count":8,"name":"Bacteroidia"}],"bacteriaIdList":["Bacteroidia"]}]},{"name":"order","samples":[{"name":"1660SH_3","features":[{"count":3,"name":"Bacteroidales"}],"bacteriaIdList":["Bacteroidales"]},{"name":"1660SH_4","features":[{"count":3,"name":"Bacteroidales"}],"bacteriaIdList":["Bacteroidales"]}]},{"name":"phylum","samples":[{"name":"1660SH_3","features":[{"count":1,"name":"Deinococcus-Thermus"},{"count":8,"name":"Bacteroidetes"}],"bacteriaIdList":["Bacteroidetes","Deinococcus-Thermus"]},{"name":"1660SH_4","features":[{"count":1,"name":"Deinococcus-Thermus"},{"count":8,"name":"Bacteroidetes"}],"bacteriaIdList":["Bacteroidetes","Deinococcus-Thermus"]}]},{"name":"superkingdom","samples":[{"name":"1660SH_3","features":[{"count":9,"name":"Bacteria"}],"bacteriaIdList":["Bacteria"]},{"name":"1660SH_4","features":[{"count":9,"name":"Bacteria"}],"bacteriaIdList":["Bacteria"]}]}],"projectId":"1455523890090","isBinstat":false,"executionName":"exe-2","projectName":"Project-1"};
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var field=[];
var columnList = [];
var minwidth=0.05*Ext.getBody().getViewSize().width;
var noofitems=Object.keys(counter.levels[i].samples).length;
var actualwidth=(0.54*Ext.getBody().getViewSize().width)/noofitems;
if(minwidth>actualwidth)
{
actualwidth=minwidth;
}
columnList.push({
header: "Sample v/s Feature",
dataIndex : "Sample v/s Feature",
width:0.1*Ext.getBody().getViewSize().width,
columnLines: true,
locked:true});
field.push("Sample v/s Feature");
for(var p=0;p<Object.keys(counter.levels[i].samples).length;p++)
{
columnList.push({
header: counter.levels[i].samples[p].name,
dataIndex : counter.levels[i].samples[p].name,
width:actualwidth,
columnLines: true});
field.push(counter.levels[i].samples[p].name);
}
var mydata=[];
for(var p=0;p<Object.keys(counter.levels[i].samples[0].features).length;p++)
{
var s=[];
s["Sample v/s Feature"]='<b>'+counter.levels[i].samples[0].features[p].name+'</b>';
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
s[counter.levels[i].samples[j].name]=counter.levels[i].samples[j].features[p].count;
}
mydata.push(s);
}
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 2,
fields: field,
data: [] ,
data: {
count:mydata.length,
data:mydata
},
proxy:{
type:"memory",
enablePaging: true,
data:mydata,
reader: {
type: 'json',
root: 'data',
}
}
});
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: 2,
}
});
var table = Ext.create('Ext.grid.Panel', {
hidden:true,
id : counter.levels[i].name+'_ID',
store: store,
columns: columnList,
columnLines: true,
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.5*Ext.getBody().getViewSize().height,
bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager(),
listeners: {
afterrender: {
fn: function(component) {
component.down("#refresh").hide();
}
}
}
},
});
if(counter.levels[i].name=='family')
{
/*var panelHeader='<center>Family</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
familyTable = table;
}
else if(counter.levels[i].name=='order')
{ /*var panelHeader='<center>Order</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
orderTable=table;
}
else if(counter.levels[i].name=='phylum')
{
/*var panelHeader='<center>Phylum</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader);*/
phylumTable=table;
}
else if(counter.levels[i].name=='class')
{
/*var panelHeader='<center>Class</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
classTable=table;
}
else if(counter.levels[i].name=='genus')
{
/* var panelHeader='<center>Genus</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
genusTable=table;
}
else if(counter.levels[i].name=='superkingdom')
{
/* var panelHeader='<center>Superkingdom</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader);*/
superkingdomTable=table;
}
}
Ext.getCmp('genus_ID').show();
var panel1= {
xtype:'panel',
layout:'vbox',
width:0.16*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
title:'<center>Levels</center>',
items:[{
xtype:'button',
text:'Genus',
id:'button1',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Genus</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').show();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Family',
id:'button2',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Family</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').show();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
}
,
{
xtype:'button',
text:'Class',
id:'button3',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Class</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').show();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Order',
id:'button4',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Order</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').show();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Phylum',
id:'button5',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Phylum</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').show();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Superkingdom',
id:'button6',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>SuperKingdom</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').show();
}
},
{
xtype:'button',
text:'Export to CSV',
id:'button7',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
JSONToCSVConvertor(counter, 'GeMS_Report', true);
}
}
],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var tablepanel= {
title:'<center>Genus</center>',
id:'tablepanel',
style: 'border: solid Blue 1px',
xtype:'panel',
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.538*Ext.getBody().getViewSize().height,
layout:'vbox',
closable:true,
closeAction:'hide',
items:[genusTable,familyTable,classTable,orderTable,phylumTable,superkingdomTable],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var sidepanel={
header:false,
id:'sidepanel',
bodyStyle: "background-image:url(http://png.clipart.me/graphics/thumbs/120/seamless-geometric-checked-texture-vector-art_120465088.jpg);padding: 120px;",
width:0.84*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
items:[tablepanel]
}
var cumulative = Ext.create('Ext.panel.Panel', {
id:'main',
title: '<center>Cumulative Report</center>',
layout:'hbox',
width:Ext.getBody().getViewSize().width,
height: 0.965*Ext.getBody().getViewSize().height,
renderTo: Ext.getBody(),
items: [panel1,sidepanel],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
});
});
</script>
</head>
<body>
</body>
</html>
I have changed your code to use paging. important changes: generate data (s) before creating store to add it in code not by method "add". I have added reader to reader count (total count of records used by paging plugin). also addeddockedItems pagingtoolbar to actually use paging toolbar and here is code, it must work
Ext.onReady(function() {
var field = [];
var columnList = [];
var counter = {
"levels":
[{
"name": "class",
"samples": [{
"name": "1660SH_3",
"features": [{
"count": 8,
"name": "Bacteroidia"
}, {
"count": 9,
"name": "Bacteroidiaa"
}]
}, {
"name": "1660SH_4",
"features": [{
"count": 5,
"name": "Bacteroidia"
}, {
"count": 6,
"name": "Bacteroidiaa"
}]
}]
}, ]
};
columnList.push({
header: "Sample v/s Feature",
dataIndex: "Sample v/s Feature",
width: 0.1 * Ext.getBody().getViewSize().width,
columnLines: true,
locked: true
});
field.push("Sample v/s Feature");
for (var p = 0; p < Object.keys(counter.levels[0].samples).length; p++) {
columnList.push({
header: counter.levels[0].samples[p].name,
dataIndex: counter.levels[0].samples[p].name,
flex: 1,
columnLines: true
});
field.push(counter.levels[0].samples[p].name);
}
if (counter.levels[0].name == 'class') {
for (var p = 0; p < Object.keys(counter.levels[0].samples[0].features).length; p++) {
var s = {};
s["Sample v/s Feature"] = '<b>' + counter.levels[0].samples[0].features[p].name + '</b>';
for (var j = 0; j < Object.keys(counter.levels[0].samples).length; j++) {
s[counter.levels[0].samples[j].name] = counter.levels[0].samples[j].features[p].count;
}
}
var Grid7Store = new Ext.data.ArrayStore({
fields: field,
data: {
count:s.length,
data:s
},
proxy:{
type:"memory",
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
}
});
var classTable = Ext.create('Ext.grid.Panel', {
style: 'border: solid Blue 1px',
id: 'family',
renderTo: Ext.getBody(),
store: Grid7Store,
columns: columnList,
columnLines: true,
width: Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height,
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: Grid7Store
}
]
});
}
});
as I know your data and store must look like: here is fillde linki
var myData = [
count:5,
data:[
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
]
];
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 5,
buffered: true,
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
}
});
I had same problem you have now. you Have 2 solutions. first one is to reconfigure grid with grid's grid.reconfigure() method or delete old one and create new one with new store, new total property, new data and second one is a little hard to explain taking into consideration my knowledge in English but I will try. first of all you must not parse json manually and you should not add it to store with add method, instead store must be always loaded by its proxy settings. and the important part. each new page response must have total property more by one than page size ... ok it's more difficult to explain than I thought. here is example
store proxy configuration:
Ext.define('ExtMVC.store.myStore', {
extend: 'Ext.data.Store',
storeId: 'MyStore',
pageSize : 100,
autoLoad:true,
proxy: {
type: 'ajax',
url: 'ajax/?getData',
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
},
fields: [{
name: 'company'
}, {
name: 'price'
}, {
name: 'change'
}, {
name: 'pctChange'
}, {
name: 'lastChange'
}]
});
server configuration: example is in php
<?php
session_name("test");
session_start();
$page = $_REQUEST["page"];
$start = $_REQUEST["start"];
$data = [];
for ($i=0; $i < $start+100; $i++) {
$data[]=["ipsa".$i, "ut".$i, "dignissimos".$i, "recusandae".$i, "quae".$i];
}
$_SESSION["start"] = $start+1;
echo json_encode(["count"=>$start+101,"data"=>$data]);
?>
Related
I want to display a Search Toolbar whenever the grid is in focus. After reading the API, I found listener focusleave. This does the job but it does not allow you to click on the toolbar once it is shown. You can enter into the toolbars input field, but clicking the toolbar triggers focusleave. Interestingly, if you set draggable it behaves correctly, but drags. Listening for hide is possible, also, but does not give any additional functionality. See below.
extend: 'Ext.grid.Panel',
requires: [
'Ext.toolbar.TextItem',
'Ext.form.field.Checkbox',
'Ext.form.field.Text',
'Ext.ux.statusbar.StatusBar'
],
matchCls: 'x-livesearch-match',
defaultStatusText: 'No Results Found',
initComponent: function() {
var me = this;
me.tbar = Ext.create('Ext.toolbar.Toolbar', {
name: 'searchBar',
listeners: {
click: {
element: 'el',
fn: function() {
console.log('Toolbar element was clicked!');
}
}
},
items: [
{
xtype: 'tbtext',
html: 'Search'
},
{
xtype: 'textfield',
name: 'searchField',
hideLabel: true,
width: 200,
listeners: {
change: {
fn: me.onTextFieldChange,
scope: this,
buffer: 500
},
}
}
]
})
me.bbar = new Ext.ux.StatusBar({
defaultText: me.defaultStatusText,
name: 'searchStatusBar'
});
me.callParent(arguments);
},
// afterRender override: it adds textfield and statusbar reference and start monitoring
// keydown events in textfield input
afterRender: function() {
var me = this;
me.callParent(arguments);
me.textField = me.down('textfield[name=searchField]');
me.statusBar = me.down('statusbar[name=searchStatusBar]');
me.searchBar = me.down('toolbar[name=searchBar]');
me.view.on('cellkeydown', me.focusTextField, me);
me.statusBar.hide();
me.searchBar.hide();
this.showingSearchBar = false;
},
displaySearchBar: function () {
var me = this;
me.statusBar = me.down('statusbar[name=searchStatusBar]');
me.searchBar = me.down('toolbar[name=searchBar]');
me.statusBar.show();
me.searchBar.show();
},
hideSearchBar: function () {
var me = this;
me.statusBar = me.down('statusbar[name=searchStatusBar]');
me.searchBar = me.down('toolbar[name=searchBar]');
me.statusBar.hide();
me.searchBar.hide();
},
});
Ext.onReady(function() {
var myData, store;
Ext.QuickTips.init();
// sample static data for the store
myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
// create the data store
store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
],
data: myData
});
// create the Grid, see Ext.
Ext.create('Ext.ux.LiveSearchGridPanel', {
store: store,
columnLines: true,
columns: [
{
text: 'Company',
flex: 1,
sortable: false,
dataIndex: 'company'
},
{
text: 'Price',
width: 75,
sortable: true,
formatter: 'usMoney',
dataIndex: 'price'
},
{
text: 'Change',
width: 86,
sortable: true,
dataIndex: 'change'
},
{
text: '% Change',
width: 110,
sortable: true,
dataIndex: 'pctChange'
},
{
text: 'Last Updated',
width: 126,
sortable: true,
formatter: 'date',
dataIndex: 'lastChange'
}
],
listeners: {
cellcontextmenu : function () {
console.log('this')
},
select: function () {
console.log('focused')
this.displaySearchBar();
},
focusleave: function (object, e, eOpts) {
console.log('blur')
this.hideSearchBar();
}
},
height: 375,
width: Ext.themeName === 'neptune-touch' || Ext.themeName === 'crisp' ? 700 : 670,
title: 'Live Search Grid',
renderTo: 'grid-{id}',
viewConfig: {
stripeRows: true,
focusEl: 'grid-{id}',
},
});
});
Here, you can see, if the toolbar is shown the console.log for the click is never fired. By commenting out this.hideSearchBar(); it then fires.
Bonus points: I tried to use another method for displaying the search bar and tried CMD+F (key 70). See below.
console.log('key down', td)
if (e.getKey() == 70) {
if (this.showingSearchBar == false) {
this.displaySearchBar();
this.showingSearchBar = true;
} else {
this.hideSearchBar();
this.showingSearchBar = false;
}
}
}
This works, but the UI fails again because pressing CMD+F causes the focus to be lost. Hence, the next CMD+F doesn't trigger. A simple re-focus of the cell should fire the event however after running .focus() on all the parameters nothing worked.
If anybody could point me in the right direction that would be great.
Edit: 2 problems 1) how to not blur when a grid panel is selected and 2) how to retrieve the focused element based on click
json file:
[{
"key_as_string": "2017-05-09",
"doc_count": 1874
}, {
"key_as_string": "2017-05-10",
"doc_count": 2680
}, {
"key_as_string": "2017-05-11",
"doc_count": 2717
}, {
"key_as_string": "2017-05-12",
"doc_count": 2147
}, {
"key_as_string": "2017-05-13",
"doc_count": 984
}, {
"key_as_string": "2017-05-14",
"doc_count": 1302
}, {
"key_as_string": "2017-05-15",
"doc_count": 2217
}
I couldn't know how to use object data on the HighChart
when i use it
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data = data;
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
then It dosen't work anything:
so I wonder how to use object data set
(key_as_string vlaue ,match x-value)
(doc_count vlaue ,match y-value)
I can draw only y.value by making only number array
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data =[];
data.forEach(function(item){
options.series[0].data.push(item.doc_count)
})
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
chart option setting
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Daily New User'
},
subtitle: {
text: ' 2017-05-09 ~2017-06-08'
},
yAxis: {
title: {
text: 'Number of new Users'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}: {point.y}명',
// maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.key_as_string) + ':<br/> ' +
// this.doc_count + ' visits'
},
plotOptions: {
series: {
allowPointSelect: true
}
},
series: [{},{},{}]
};
You can pass custom data by setting data array with json. for x-axis point, use name key and for y-axis point, use y key.
Try this:
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data =[];
data.forEach(function(item){
options.series[0].data.push({name:key_as_string,y:item.doc_count})
})
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
and updated highchart configuration to this:
xAxis: {
type: 'category'
}
I have a grid in which pagination implemented using xtype: 'pagingtoolbar'.When i include
bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager(),
listeners: {
afterrender: {
fn: function(component) {
component.down("#refresh").hide();
}
}
}
}
in my code .My grid comes like this
But when I comment out/exclude the paging toolbar code,my grid comes like as required but without pagination....How to make pagination working for my grid?
My Current code is
Ext.define('Ext.ux.ProgressBarPager', {
requires: ['Ext.ProgressBar'],
/**
* #cfg {Number} width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 225,
/**
* #cfg {String} defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
/**
* #cfg {Object} defaultAnimCfg
* <p>A {#link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
*/
defaultAnimCfg : {
duration: 1000,
easing: 'bounceOut'
},
/**
* Creates new ProgressBarPager.
* #param {Object} config Configuration options
*/
constructor : function(config) {
if (config) {
Ext.apply(this, config);
}
},
//public
init : function (parent) {
var displayItem;
if (parent.displayInfo) {
this.parent = parent;
displayItem = parent.child("#displayItem");
if (displayItem) {
parent.remove(displayItem, true);
}
this.progressBar = Ext.create('Ext.ProgressBar', {
text : this.defaultText,
width : this.width,
animate : this.defaultAnimCfg,
style: {
cursor: 'pointer'
},
listeners: {
el: {
scope: this,
click: this.handleProgressBarClick
}
}
});
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
Ext.apply(parent, this.parentOverrides);
}
},
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]- box.x,
pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
parent.store.loadPage(newPage);
},
// private, overriddes
parentOverrides : {
// private
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
var count = this.store.getCount(),
pageData = this.getPageData(),
message = count === 0 ?
this.emptyMsg :
Ext.String.format(
this.displayMsg,
pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
),
percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
}
}
}
});
function getcumulative()
{
var familyTable;
var classTable;
var orderTable;
var phylumTable;
var superkingdomTable;
var genusTable;
var counter = JSON.parse(reportData);
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var field=[];
var columnList = [];
var minwidth=0.05*Ext.getBody().getViewSize().width;
var noofitems=Object.keys(counter.levels[i].samples).length;
var actualwidth=(0.54*Ext.getBody().getViewSize().width)/noofitems;
if(minwidth>actualwidth)
{
actualwidth=minwidth;
}
columnList.push({
xtype:'gridcolumn',
text: "Sample v/s Feature",
dataIndex : "Sample v/s Feature",
width:0.1*Ext.getBody().getViewSize().width,
columnLines: true,
locked:true});
field.push("Sample v/s Feature");
for(var p=0;p<Object.keys(counter.levels[i].samples).length;p++)
{
columnList.push({
xtype:'gridcolumn',
header: counter.levels[i].samples[p].name,
dataIndex : counter.levels[i].samples[p].name,
width:actualwidth,
columnLines: true});
field.push(counter.levels[i].samples[p].name);
}
var mydata=[];
for(var p=0;p<Object.keys(counter.levels[i].samples[0].features).length;p++)
{
var s=[];
s.push('<b>'+counter.levels[i].samples[0].features[p].name+'<b>');
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
s.push(counter.levels[i].samples[j].features[p].count);
}
mydata.push(s);
}
var Store1 = new Ext.create('Ext.data.Store', {
autoLoad: false,
pageSize : 2,
fields: field,
data: {
count:mydata.length,
data:mydata
},
proxy:{
type:"memory",
enablePaging: true,
data:mydata,
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
}
});
/*store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: 2
}
});*/
var table = Ext.create('Ext.grid.Panel', {
hidden:true,
id : counter.levels[i].name+'_ID',
store: Store1,
columns: columnList,
columnLines: true,
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.5*Ext.getBody().getViewSize().height,
/* bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: Store1,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager(),
listeners: {
afterrender: {
fn: function(component) {
component.down("#refresh").hide();
}
}
}
}*/
});
if(counter.levels[i].name=='family')
{
familyTable = table;
}
else if(counter.levels[i].name=='order')
{
orderTable=table;
}
else if(counter.levels[i].name=='phylum')
{
phylumTable=table;
}
else if(counter.levels[i].name=='class')
{
classTable=table;
}
else if(counter.levels[i].name=='genus')
{
genusTable=table;
}
else if(counter.levels[i].name=='superkingdom')
{
superkingdomTable=table;
}
}
Ext.getCmp('genus_ID').show();
var panel1= {
xtype:'panel',
layout:'vbox',
width:0.16*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
title:'<center>Levels</center>',
items:[{
xtype:'button',
text:'Genus',
id:'button1',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Genus</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').show();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Family',
id:'button2',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Family</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').show();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
}
,
{
xtype:'button',
text:'Class',
id:'button3',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Class</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').show();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Order',
id:'button4',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Order</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').show();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Phylum',
id:'button5',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Phylum</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').show();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Superkingdom',
id:'button6',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>SuperKingdom</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').show();
}
},
{
xtype:'button',
text:'Export to CSV',
id:'button7',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
JSONToCSVConvertor(counter, 'GeMS_Report', true);
}
}
],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var tablepanel= {
xtype:'panel',
title:'<center>Genus</center>',
id:'tablepanel',
style: 'border: solid Blue 1px',
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.538*Ext.getBody().getViewSize().height,
closable:true,
closeAction:'hide',
items:[genusTable,familyTable,classTable,orderTable,phylumTable,superkingdomTable],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var sidepanel={
xtype:'panel',
header:false,
id:'sidepanel',
bodyStyle: "padding: 120px;",
width:0.84*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
items:[tablepanel]
}
var cumulative = {
xtype:'panel',
id:'main',
title: '<center>Cumulative Report</center>',
layout:'hbox',
width:Ext.getBody().getViewSize().width,
height: 0.965*Ext.getBody().getViewSize().height,
renderTo: Ext.getBody(),
items: [panel1,sidepanel],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
return cumulative;
}
function JSONToCSVConvertor(counter)
{
var zip = new JSZip();
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var CSV = '';
var row1="Sample v/s Feature"+',';
for(var p=0;p<Object.keys(counter.levels[i].samples).length;p++)
{
row1 += counter.levels[i].samples[p].name + ',';
}
row1.slice(0, row1.length - 1);
CSV += row1 + '\r\n';
var row2="";
for(var k=0;k<Object.keys(counter.levels[i].samples[0].features).length;k++)
{
row2 +=counter.levels[i].samples[0].features[k].name + ',';
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
row2 +=counter.levels[i].samples[j].features[k].count+ ',';
}
row2 +='\n';
row2.slice(0, row2.length - 1);
}
CSV += row2 + '\r\n\n';
var fileName = "";
var title=counter.levels[i].name;
fileName += title.replace(/ /g,"_");
zip.file(title+".csv", CSV);
/* var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);*/
}
var content = zip.generate({type:"blob"});
saveAs(content, "Cumulative_Levels_Report.zip");
/*var content = zip.generate({type:"base64"});
window.location.href="data:application/zip;base64," + content;*/
}
Below, there are two examples (A and B). The first, A, works corectly, but the chart is managed by a container. I feel that this isn't necessary. I want to directly extend the Cartesian chart instead of adding it to a
Container. I have tried to do so in the second Example, B, but I have been unsuccessful.
Example A
This example works just fine. It is derived from Sencha's ExtJS5 Multi-axis column chart example of their kitchen sink.
Demo # JSFiddle
var climateData = getClimateData();
Ext.define('ChartApp.mixins.reader.DynamicReaderMixin', {
extend : 'Ext.Mixin',
readRecords : function(data) {
var me = this;
var rootData = data;
console.log(data);
this.callParent(arguments);
}
});
Ext.define('ChartApp.data.reader.DynamicChartReader', {
extend : 'Ext.data.reader.Json',
alias : 'widget.dynamicChartReader',
xtype : 'dynamicChartReader',
mixins : {
dynamicReader : 'ChartApp.mixins.reader.DynamicReaderMixin'
},
config : {
xField : null
},
readRecords : function(data) {
console.log('Reading records...');
if (data.metaData == null) {
data = this.mixin.dynamicReader.readRecords.call(this, data);
}
return this.callParent([data]);
}
});
Ext.define("ChartApp.model.Climate", {
extend: "Ext.data.Model",
fields: ["month", "high", "low", {
name: "highF",
calculate: function (b) {
return toFaherenheit(b.high);
}
}, {
name: "lowF",
calculate: function (b) {
return toFaherenheit(b.low);
}
}],
});
Ext.define("ChartApp.store.Climate", {
extend: "Ext.data.Store",
alias: "store.climate",
model : "ChartApp.model.Climate",
counter: 0,
generateData: function () {
var h = this.config.data,
e, j, g = [];
for (e = 0; e < h.length; e++) {
g.push({
month: h[e].month,
high: 20 + Math.random() * 20,
low: Math.random() * 20
})
}
return g
},
refreshData: function () {
this.setData(this.generateData())
}
});
Ext.define('ChartApp.view.charts.column.MultiAxis', {
extend: 'Ext.container.Container',
xtype: 'column-multi-axis',
width: 650,
height: 500,
initComponent: function () {
var me = this;
var highSeries = {
type: 'line',
xField: 'month',
yField: ['highF'],
yAxis: 'fahrenheit-axis',
style: {
lineWidth: 2,
fillStyle: '#115fa6',
strokeStyle: '#115fa6',
fillOpacity: 0.6,
miterLimit: 3,
lineCap: 'miter'
},
colors : [ '#115fa6' ],
title : ['High'],
tooltip: {
trackMouse: true,
style: 'background: #444; color: #FFF',
renderer: function(storeItem, item) {
var title = item.series.getTitle()[0];
this.setHtml(title + ' for '
+ storeItem.get('month') + ': '
+ storeItem.get(item.field).toFixed(2) + '°');
}
}
},
lowSeries = Ext.apply({}, {
yField: ['lowF'],
style: {
lineWidth: 2,
fillStyle: '#ff8800',
strokeStyle: '#884400',
fillOpacity: 0.6,
miterLimit: 3,
lineCap: 'miter'
},
colors : [ '#ff8800' ],
title : ['Low'],
}, highSeries);
me.items = [{
xtype: 'cartesian',
legend : {
hidden : true
},
store: {
type: 'climate',
reader: {
xtype : 'dynamicChartReader'
}
},
insetPadding: 10,
innerPadding: {
left: 20,
right: 20
},
interactions: 'crosszoom',
axes: [{
type: 'numeric',
id: 'fahrenheit-axis',
adjustByMajorUnit: true,
position: 'left',
titleMargin: 20,
minimum: 32,
grid: true,
title: {
text: 'Temperature in °F',
fontSize: 14
},
listeners: {
rangechange: function (range) {
var cAxis = this.getChart().getAxis('celsius-axis');
if (cAxis) {
cAxis.setMinimum(toCelcius(range[0]));
cAxis.setMaximum(toCelcius(range[1]));
}
}
}
}, {
id: 'celsius-axis',
type: 'numeric',
titleMargin: 20,
position: 'right',
title: {
text: 'Temperature in °C',
fontSize: 14,
fillStyle: 'red'
}
}, {
id: 'months-axis',
type: 'category',
position: 'bottom',
title: {
text: 'Months'
}
}, {
position: 'top',
linkedTo: 'months-axis',
title: {
text: 'Climate data for Redwood City, California',
fontSize: 16,
fillStyle: 'green'
},
titleMargin: 20
}],
series: [ highSeries, lowSeries ]
}];
this.callParent();
},
getChart : function() {
return this.down('cartesian');
},
getStore : function() {
return this.getChart().getStore();
},
getLegendStore : function() {
return this.getChart().getLegendStore();
}
});
Ext.define('ChartApp.chart.Legend', {
extend : 'Ext.chart.Legend',
xtype: 'extendedlegend',
docked : 'left',
tpl: [
'<div class="', Ext.baseCSSPrefix, 'legend-container">',
'<tpl for=".">',
'<div class="', Ext.baseCSSPrefix, 'legend-item">',
'<input type="checkbox" class="', Ext.baseCSSPrefix, 'legend-item-check" checked="true" />',
'<span ',
'class="', Ext.baseCSSPrefix,
'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ',
'style="background:{mark};">',
'</span>{name}',
'</div>',
'</tpl>',
'</div>'
],
initComponent : function() {
var me = this;
me.callParent(arguments);
},
onItemClick: function (record, item, index, e) {
var target = e.getTarget();
var disabled = record.get('disabled');
if (this.isCheckBox(target)) {
target.checked = !disabled;
console.log(target.checked);
this.callParent(arguments);
}
},
isCheckBox : function(element) {
return element && element.tagName.toLowerCase() === 'input' && element.type === 'checkbox';
}
});
Ext.define('ChartApp.components.ChartContainer', {
extend : 'Ext.container.Container',
alias : 'widget.chartcontainer',
referenceHolder: true,
height : 600,
width : 800,
layout: 'border',
items: [{
region : 'west',
title : 'Legend',
items : [{
xtype : 'extendedlegend',
reference : 'chartLegend',
}],
width : 180,
minHeight : 550,
collapsible : true,
collasped : false,
split : true,
animCollapse : true
}, {
region : 'center',
reference : 'chartWrapper',
layout : 'fit',
margins : '5 5 0 0',
items : [{
xtype : 'column-multi-axis',
reference : 'chart',
layout : 'fit'
}]
}],
initComponent : function() {
var me = this;
me.callParent(arguments);
var chart = me.lookupReference('chart');
chart.getStore().loadData(climateData);
var legend = me.lookupReference('chartLegend');
legend.setStore(chart.getLegendStore());
}
});
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title : 'Dual Axis Example',
layout : 'fit',
items : [{
xtype : 'chartcontainer'
}],
renderTo: Ext.getBody(),
});
});
function toCelcius(faherenheit) {
return (faherenheit - 32) / 1.8;
};
function toFaherenheit(celcius) {
return (celcius * 1.8) + 32;
};
function getClimateData() {
return [
{ month: "Jan", high: 14.7, low: 5.6 },
{ month: "Feb", high: 16.5, low: 6.6 },
{ month: "Mar", high: 18.6, low: 7.3 },
{ month: "Apr", high: 20.8, low: 8.1 },
{ month: "May", high: 23.3, low: 9.9 },
{ month: "Jun", high: 26.2, low: 11.9 },
{ month: "Jul", high: 27.7, low: 13.3 },
{ month: "Aug", high: 27.6, low: 13.2 },
{ month: "Sep", high: 26.4, low: 12.1 },
{ month: "Oct", high: 23.6, low: 9.9 },
{ month: "Nov", high: 17.0, low: 6.8 },
{ month: "Dec", high: 14.7, low: 5.8 }
];
}
Example B
In this example the column-multi-axis directly extend the cartesian chart. For some reason unknown to me, in the chartcontainer's initComponent, after the call to this.callParent(), the store is still a config on the chart.
Demo # JSFiddle
var climateData = getClimateData();
Ext.define('ChartApp.mixins.reader.DynamicReaderMixin', {
extend : 'Ext.Mixin',
readRecords : function(data) {
var me = this;
var rootData = data;
console.log(data);
this.callParent(arguments);
}
});
Ext.define('ChartApp.data.reader.DynamicChartReader', {
extend : 'Ext.data.reader.Json',
alias : 'widget.dynamicChartReader',
xtype : 'dynamicChartReader',
mixins : {
dynamicReader : 'ChartApp.mixins.reader.DynamicReaderMixin'
},
config : {
xField : null
},
readRecords : function(data) {
console.log('Reading records...');
if (data.metaData == null) {
data = this.mixin.dynamicReader.readRecords.call(this, data);
}
return this.callParent([data]);
}
});
Ext.define("ChartApp.model.Climate", {
extend: "Ext.data.Model",
fields: ["month", "high", "low", {
name: "highF",
calculate: function (b) {
return toFaherenheit(b.high);
}
}, {
name: "lowF",
calculate: function (b) {
return toFaherenheit(b.low);
}
}],
});
Ext.define("ChartApp.store.Climate", {
extend: "Ext.data.Store",
alias: "store.climate",
model : "ChartApp.model.Climate",
counter: 0,
generateData: function () {
var h = this.config.data,
e, j, g = [];
for (e = 0; e < h.length; e++) {
g.push({
month: h[e].month,
high: 20 + Math.random() * 20,
low: Math.random() * 20
})
}
return g
},
refreshData: function () {
this.setData(this.generateData())
}
});
Ext.define('ChartApp.view.charts.column.MultiAxis', {
extend: 'Ext.chart.CartesianChart',
xtype: 'column-multi-axis',
width: 650,
height: 500,
initComponent: function () {
var me = this;
var highSeries = {
type: 'line',
xField: 'month',
yField: ['highF'],
yAxis: 'fahrenheit-axis',
style: {
lineWidth: 2,
fillStyle: '#115fa6',
strokeStyle: '#115fa6',
fillOpacity: 0.6,
miterLimit: 3,
lineCap: 'miter'
},
colors : [ '#115fa6' ],
title : ['High'],
tooltip: {
trackMouse: true,
style: 'background: #444; color: #FFF',
renderer: function(storeItem, item) {
var title = item.series.getTitle()[0];
this.setHtml(title + ' for '
+ storeItem.get('month') + ': '
+ storeItem.get(item.field).toFixed(2) + '°');
}
}
},
lowSeries = Ext.apply({}, {
yField: ['lowF'],
style: {
lineWidth: 2,
fillStyle: '#ff8800',
strokeStyle: '#884400',
fillOpacity: 0.6,
miterLimit: 3,
lineCap: 'miter'
},
colors : [ '#ff8800' ],
title : ['Low'],
}, highSeries);
Ext.apply(me, {
legend : {
hidden : true
},
store: {
type: 'climate',
reader: {
xtype : 'dynamicChartReader'
}
},
insetPadding: 10,
innerPadding: {
left: 20,
right: 20
},
interactions: 'crosszoom',
axes: [{
type: 'numeric',
id: 'fahrenheit-axis',
adjustByMajorUnit: true,
position: 'left',
titleMargin: 20,
minimum: 32,
grid: true,
title: {
text: 'Temperature in °F',
fontSize: 14
},
listeners: {
rangechange: function (range) {
var cAxis = this.getChart().getAxis('celsius-axis');
if (cAxis) {
cAxis.setMinimum(toCelcius(range[0]));
cAxis.setMaximum(toCelcius(range[1]));
}
}
}
}, {
id: 'celsius-axis',
type: 'numeric',
titleMargin: 20,
position: 'right',
title: {
text: 'Temperature in °C',
fontSize: 14,
fillStyle: 'red'
}
}, {
id: 'months-axis',
type: 'category',
position: 'bottom',
title: {
text: 'Months'
}
}, {
position: 'top',
linkedTo: 'months-axis',
title: {
text: 'Climate data for Redwood City, California',
fontSize: 16,
fillStyle: 'green'
},
titleMargin: 20
}],
series: [ highSeries, lowSeries ]
});
this.callParent();
}
});
Ext.define('ChartApp.chart.Legend', {
extend : 'Ext.chart.Legend',
xtype: 'extendedlegend',
docked : 'left',
tpl: [
'<div class="', Ext.baseCSSPrefix, 'legend-container">',
'<tpl for=".">',
'<div class="', Ext.baseCSSPrefix, 'legend-item">',
'<input type="checkbox" class="', Ext.baseCSSPrefix, 'legend-item-check" checked="true" />',
'<span ',
'class="', Ext.baseCSSPrefix,
'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ',
'style="background:{mark};">',
'</span>{name}',
'</div>',
'</tpl>',
'</div>'
],
initComponent : function() {
var me = this;
me.callParent(arguments);
},
onItemClick: function (record, item, index, e) {
var target = e.getTarget();
var disabled = record.get('disabled');
if (this.isCheckBox(target)) {
target.checked = !disabled;
console.log(target.checked);
this.callParent(arguments);
}
},
isCheckBox : function(element) {
return element && element.tagName.toLowerCase() === 'input' && element.type === 'checkbox';
}
});
Ext.define('ChartApp.components.ChartContainer', {
extend : 'Ext.container.Container',
alias : 'widget.chartcontainer',
referenceHolder: true,
height : 600,
width : 800,
layout: 'border',
items: [{
region : 'west',
title : 'Legend',
items : [{
xtype : 'extendedlegend',
reference : 'chartLegend',
}],
width : 180,
minHeight : 550,
collapsible : true,
collasped : false,
split : true,
animCollapse : true
}, {
region : 'center',
reference : 'chartWrapper',
layout : 'fit',
margins : '5 5 0 0',
items : [{
xtype : 'column-multi-axis',
reference : 'chart',
layout : 'fit'
}]
}],
initComponent : function() {
var me = this;
me.callParent(arguments);
var chart = me.lookupReference('chart');
console.log(chart.getStore()); // Still a config
chart.getStore().loadData(climateData);
var legend = me.lookupReference('chartLegend');
legend.setStore(chart.getLegendStore());
}
});
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title : 'Dual Axis Example',
layout : 'fit',
items : [{
xtype : 'chartcontainer'
}],
renderTo: Ext.getBody(),
});
});
function toCelcius(faherenheit) {
return (faherenheit - 32) / 1.8;
};
function toFaherenheit(celcius) {
return (celcius * 1.8) + 32;
};
function getClimateData() {
return [
{ month: "Jan", high: 14.7, low: 5.6 },
{ month: "Feb", high: 16.5, low: 6.6 },
{ month: "Mar", high: 18.6, low: 7.3 },
{ month: "Apr", high: 20.8, low: 8.1 },
{ month: "May", high: 23.3, low: 9.9 },
{ month: "Jun", high: 26.2, low: 11.9 },
{ month: "Jul", high: 27.7, low: 13.3 },
{ month: "Aug", high: 27.6, low: 13.2 },
{ month: "Sep", high: 26.4, low: 12.1 },
{ month: "Oct", high: 23.6, low: 9.9 },
{ month: "Nov", high: 17.0, low: 6.8 },
{ month: "Dec", high: 14.7, low: 5.8 }
];
}
Store does not yet exist at this point - better to say there was no attempt to run setStore() yet. If you really need it at that point try to call:
chart.setStore(chart.getStore());
That should call the underlying setter's methods that are responsible for store creation.
I have these two grids defined in a page. I cannot resize the colums in fireFox. Here is the code, the code has been straightway picked from the extjs examples.
Ext.onReady(function() {
//console.log("ExtOnReady()");
Ext.QuickTips.init();
Ext.MessageBox.maxWidth = 300;
Ext.Ajax.timeout = 12000000;
Ext.QuickTips.init();
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
/**
* Custom function used for column renderer
* #param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* Custom function used for column renderer
* #param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
}
}]
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
forceFit:true,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
var grid1 = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
}
}]
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
forceFit:true,
stateId: 'grid'
});
var viewP = new Ext.Viewport({
autoScroll:true,
items : [grid,grid1]
});
});