I want to make a pdf report against the parameter of my grid value. I want to get the year from the accordion title as parameter number 1 and month name as parameter number 2. But I am not being able to do it. Can anyone please help me on this. Here is my code below :
Ext.define('Ext4Example.view.attendence.Timeperiod' ,{
extend: 'Ext.form.Panel',
alias : 'widget.timeperiod',
id: 'timeperiod',
region: 'west',
border: true,
width: 150,
height:395,
split: true,
defaults: {
// applied to each contained panel
//bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true,
activeOnTop: true,
hideCollapseTool : true
},
initComponent: function() {
var me = this;
me.items = me.maccord();
me.callParent(arguments);
},
mstore: function(year){
var data = [
[1, year, 'January' ],
[2, year, 'February' ],
[3, year, 'March' ],
[4, year, 'April' ],
[5, year, 'May' ],
[6, year, 'June' ],
[7, year, 'July' ],
[8, year, 'August' ],
[9, year, 'September'],
[10, year, 'October' ],
[11, year, 'November' ],
[12, year, 'December' ]
];
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'mstore',
fields: [
{name: 'id', type: 'int'},
{name: 'year', type: 'int'},
{name: 'month', type: 'string'}
],
data:data
});
return store;
},
mpanel: function(year){
var me = this,
mpanel = new Ext.grid.Panel({
border: false,
viewConfig: {
stripeRows: true
},
hideHeaders: true,
columns: [
{ text: 'month', dataIndex: 'month', flex: 1},
{ menuDisabled : true,
sortable : false,
xtype : 'actioncolumn',
width : 24,
items : [{
icon : "${resource(dir: 'images', file: 'PDF01001.png')}",
hide : true,
tooltip : 'Print PDF Report of this Month?',
handler : function(record) {
alert(record.data.month)
}
}]
}
],
listeners:{
selectionchange:function(model, records ) {
var store = Ext.data.StoreManager.lookup('Attendences');
var record = records[0];
store.load({
filters: [
{property:'month', value:record.data.id},
{property:'year', value:record.data.year}
]
});
}
},
store: me.mstore(year),
width: 150
});
return mpanel;
},
maccord: function(){
var year = ${(new Date()).format('yyyy')},
limit = year - 5,
me = this,
maccord = [];
for(year; year > limit ; year--){
maccord.push({
title: 'Year '+ year,
ident: 'accordion-panel',
items: me.mpanel(year)
});
}
return maccord;
}
});
The month and the year are in your record. You don't need to get the year from the accordion title. Your problem is, that the record is not the first param in the handler:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action-cfg-handler
items: [{
icon: 'test',
tooltip: 'Print PDF Report of this Month?',
scope: this,
handler: function(view, rowIndex, colIndex, item, e, record) {
alert(record.data.month + "/" + record.data.year);
}
}]
You can look at: http://jsfiddle.net/AMx6r/1279/
Related
I am new to EXTJS. Now im trying to develop simple pivot grid example. my code is:
Ext.onReady(function () {
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
fields: ['gender',
{ name: 'birthDecade', type: 'int' },
{ name: 'peoples', type: 'int' }
],
url: 'countries.json'
});
var pivotGrid = new Ext.grid.PivotGrid({
title: 'Number of people born per decade',
width: 600,
height: 91,
renderTo: 'docbody',
store: myStore,
aggregator: 'count',
topAxis: [
{
width: 80,
dataIndex: 'birthDecade'
}
],
leftAxis: [
{
dataIndex: 'gender'
}
],
});
});
JSON DATA :
[["Male","2010","1"],
["Female","1940","2"],
["Male","1960","3"],
["Female","1980","4"],
["Female","2000","5"],
["Male","2010","5"],
["Male","2030","6"],
["Female","1000","7"]]
And output is :
But i want to show data that i gave in json (3rd column.values-1,2,3,4,5,6,7). how to achieve it?.thanks in advance.
As u used count as aggregator its shows like that. in 2000 one female count is there . for same in 2010 two rows of male count there . So that it shows like that.
If u want to show some numbers in output u can use like this,
Ext.onReady(function () {
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
fields: ['gender',
{ name: 'birthDecade', type: 'int' },
{ name: 'peoples', type: 'int' }
],
url: 'countries.json'
});
var pivotGrid = new Ext.grid.PivotGrid({
title: 'Number of people born per decade',
width: 600,
height: 91,
renderTo: 'docbody',
store: myStore,
aggregator: 'sum',
measure: 'peoples',
topAxis: [
{
width: 80,
dataIndex: 'birthDecade'
}
],
leftAxis: [
{
dataIndex: 'gender'
}
],
});
});
As the number of records in the grid increases the time taken to update one row also increases.
Initially when I fetch 25 records the time taken to update is 2-3 seconds.
When I fetch 500 records on the same page time taken is 8-9 seconds.
Can anyone help me please so that I can avoid this. It is degrading the performance of the system.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function(){
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'bool' }
]
});
// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
eDate = Ext.Date,
now = new Date(),
s = new Date(now.getFullYear() - 4, 0, 1),
end = Ext.Date.subtract(now, Ext.Date.MONTH, 1),
getRandomInt = Ext.Number.randomInt,
generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() < end) {
var ecount = getRandomInt(0, 2);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start : eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(' ', '.') + '#sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.MONTH, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'DESC'
}]
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 135,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 130,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});
new Ext.window.Window({
width: 900,
height: 500,
title: 'Employee Salaries',
items: grid,
layout: 'fit',
closable: false
}).show();
});
I'm just started working with Ext js a week ago, and I would like to ask for help on how to make a relationship between two grid panel, I have the first panel to display categories and the second for sub-categories, so I want to : when I click on a category, it displays its subcategories in the second grid panel, and a message "please select a category if none is selected, for now I'm just displaying all subcategories in the second panel, here my code :
Ext.onReady(function() {
Ext.define('categorie', {
extend: 'Ext.data.Model',
fields: [
{name: 'id_categorie', type: 'string'},
{name: 'lib_categorie', type: 'string'},
],
idProperty: 'id_categorie'
});
Ext.define('sub-categorie', {
extend: 'Ext.data.Model',
fields: [
{name: 'id_sub-categorie', type: 'string'},
{name: 'lib_sub-categorie', type: 'string'},
{name: 'id_categorie', type: 'string' },
],
associations: [
{ type: 'belongsTo', model: 'categorie', primaryKey: 'id_sub-categorie', foreignKey: 'id_categorie' }
],
});
var categorieStore = Ext.create('Ext.data.Store', {
model: 'categorie',
pageSize : 15,
proxy: {
type: 'ajax',
url: 'ajax.php?mode=getCategories',
reader: {
type: 'json',
root: 'categories'
}
},
timeout : 90000,
extraParams : {
start : 0,
limit : 20
},
sorters: [ {
property : 'lib_categorie',
direction : 'ASC'
} ],
remoteSort : true,
autoDestroy : true,
simpleSortMode : true,
autoLoad: true
});
var subCategoriesStore = Ext.create('Ext.data.Store', {
model: 'sub-categorie',
pageSize : 15,
proxy: {
type: 'ajax',
url: 'ajax.php?mode=getSubCategories',
reader: {
type: 'json',
root: 'sub-categories'
}
},
timeout : 90000, // 90 secondes
extraParams : {
start : 0,
limit : 20
},
sorters: [ {
property : 'lib_sub-categorie',
direction : 'ASC'
} ],
remoteSort : true,
autoDestroy : true,
simpleSortMode : true,
autoLoad: true
});
var CategoriePanel = Ext.create('Ext.grid.Panel',{
title: 'Categories',
renderTo: 'categories_grid',
store: categorieStore,
columns: [
{
header : I18N.msgID,
tooltip : I18N.msgID,
align : 'left',
text: 'ID',
flex: 50,
dataIndex: 'id_categorie'
},
{
header : I18N.msgLib,
tooltip : I18N.msgLib,
align : 'left',
text: 'Lib',
flex: 50,
dataIndex: 'lib_categorie'
},
],
width: 400,
});
var subCategoriePanel = Ext.create('Ext.grid.Panel',{
title: 'subCategories',
renderTo: 'subcategories_grid',
store: subCategoriesStore,
columns: [
{
header : I18N.msgIDs,
tooltip : I18N.msgIDs,
align : 'left',
text: 'IDs',
flex: 50,
dataIndex: 'id_sub-categorie'
},
{
header : I18N.msgLibs,
tooltip : I18N.msgLibs,
align : 'left',
text: 'Libs',
flex: 50,
dataIndex: 'lib_sub-categorie'
},
],
width: 400,
});
You must add a listener to your categories grid:
listeners: {
itemclick: function ( this, record, item, index, e, eOpts ) {
// Select your catergory, find subcategories and load subcategories in your subcategories grid
}
}
i get my JSON object from my php code in this format (JSONlint ok) :
[
[1375653600000,3.20104,175.00,116.00,11.00,31.00],[...],[1376776800000,2.85625,10.00,1.00,0.00,8.00]
]
i Have to split in 5 different series:
[1375653600000, 3.201014]
[1375653600000, 175.00]
[1375653600000, 116.00]
[1375653600000, 11.00]
[1375653600000, 31.00]
...
and (obviously) each array is for a different highcharts series.
i follow this post to get an idea about split the JSON:
Retrieving JSON data for Highcharts with multiple series?
This is my code:
$(function() {
// See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
$.getJSON('grafico_nuovo.php?callback=?', function(data) {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2012, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
$('#container').highcharts('StockChart', {
chart : {
type: 'spline',
zoomType: 'xy'
},
navigator : {
adaptToUpdatedData: false,
series : {
data : data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'analisi consumi e temperature'
},
subtitle: {
text: 'Analisi test solo temperatura media'
},
rangeSelector : {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'week',
count: 1,
text: '1w'
},{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected : 2 // day
},
/*xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},*/
xAxis: {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000, // one hour
type: 'datetime',
dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
// minRange: 15*60*1000,
//maxZoom: 48 * 3600 * 1000,
labels: {
rotation: 330,
y:20,
staggerLines: 1 }
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
series: [{
name: 'val1',
data: []
}, {
name: 'val2',
data: []
},
{
name: 'val3',
data: []
},
{
name: 'val4',
data: []
},
{
name: 'val5',
data: []
}]
});
});
});
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var currentExtremes = this.getExtremes(),
range = e.max - e.min,
chart = $('#container').highcharts();
chart.showLoading('Loading data from server...');
$.getJSON('grafico_nuovo.php?start='+ Math.round(e.min) +
'&end='+ Math.round(e.max) +'&callback=?', function(data) {
val1 = [];
val2 = [];
val3 = [];
val4 = [];
val5 = [];
$.each(data, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
val4.push([value[0], value[4]]);
val5.push([value[0], value[5]]);
});
console.log('val1');
chart.series[0].setData(val1);
chart.series[1].setData(val2);
chart.series[2].setData(val3);
chart.series[3].setData(val4);
chart.series[4].setData(val5);
chart.hideLoading();
});
}
The navigator works fine (with little trouble after 3-4 clicks) but the other series doesn't show.
Everything should be ok, but i've probably missed something
I am stuck at this point since a long time. Please help me identify my error.
I am trying to show data in grid panel and since data is large I am also using Paging Toolbar. This is my code (I am not sure but I think problem is in store that I am creating).
var myData = {
record: [{
name: "Record 0",
column1: "0",
column2: "0"
}, {
name: "Record 1",
column1: "1",
column2: "1"
}, {
name: "Record 2",
column1: "2",
column2: "2"
},
]
};
var fields = [{
name: 'name',
mapping: 'name'
}, {
name: 'column1',
mapping: 'column1'
}, {
name: 'column2',
mapping: 'column2'
}
];
var store = new Ext.data.Store({
id: 'simpsonsStore',
fields: ['name', 'column1', 'column2'],
pageSize: 5, // items per page
data: myData,
reader: {
root: 'record',
type: 'json'
}
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Record Name",
width: 50,
sortable: true,
dataIndex: 'name'
}, {
header: "column1",
width: 50,
sortable: true,
dataIndex: 'column1'
}, {
header: "column2",
width: 50,
sortable: true,
dataIndex: 'column2'
}
];
store.load({
params: {
start: 0,
limit: 5
}
});
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: store,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 650,
height: 325,
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}
]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'column',
renderTo: Ext.getBody(),
items: [
grid
],
bbar: [
'->', {
text: 'Reset Example',
handler: function () {
gridStore.loadData(myData);
}
}
]
});
To start with the extraneous comma on your myData.record array will prevent this from running.
var myData = {
record : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" }**,**
]
};
Instead of dockedItems try setting pagination bar at grid bbar.
new Ext.PagingToolbar({
pageSize : 20,
store : store,
displayInfo : true
});