Extjs chart picking wrong Store? - javascript

I am trying to draw two charts side by side which will use same store by passing different parameters but both charts are using second store's value. I can see response in Chrome console, it is proper with two requests and different response; below is my code.
Ext.define('testUtility.view.BarChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.barChart',
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: ['name', 'data'],
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data/store1',
reader: {
type: 'json',
root: 'Data'
},
filterParam: undefined,
groupParam: undefined,
pageParam: undefined,
startParam: undefined,
sortParam: undefined,
limitParam: undefined
}
}),
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Master'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
});
app.js
Ext.application({
requires: [
'Ext.container.Viewport'
],
name: 'BAR Chart ',
launch: function() {
var chart1 = Ext.create('testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%'
});
var store1 = chart1.getStore();
store1.proxy.extraParams = {
id: chart1.id
};
store1.load();
var chart2 = Ext.create('testUtility.view.BarChart', {
id: 'chart2',
height: 300,
width: '50%'
});
var store2 = chart2.getStore();
store2.proxy.extraParams = {
id: chart2.id
};
store2.load();
}
});
Both charts shows data from store whichever is loaded later.

Both of your stores are one and the same, when you call them in your definition. You should call the store when creating the instance of the class like so:
var chart1 = Ext.create( 'testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%',
store: store1
} );
It is good practice to define your own store:
Ext.define( 'testUtility.store.BarChart', {
extend: 'Ext.data.Store',
...
} );
And then just use it before the first part of the code:
var store1 = Ext.create( 'testUtility.store.BarChart', { options } );
Your options including the extraparams, different for the 2 stores.

Related

ExtJS 5 grid filtering and sorting breaks in IE9

I am trying to add filtering to a simple ExtJS 5 Grid. I am using a simple example provided by the installation and looks like it is working fine, except in IE when I try to do filtering all the records get wiped.
Has anyone seen this issue? Here is the code that I am using.
`$("#SearchEmployees").click(function () {
var criteria = $("#employeeName").val();
if (criteria == '' || criteria == null) {
alert("Please apply search criteria.");
return;
}
var baseurl = $("#hdnUrlSearch").val();
var data = (function () {
$("#employeesSearchGrid").empty();
$.ajax({
type: "POST",
url: baseurl,
dataType: "json",
data: { employeeName: criteria },
async: false
}).done(function (retData) {
data = retData;
}).fail(function (xhr) {
alert(xhr.responseText);
});
return data;
})();
Ext.define('EmployeeSearch', {
extend: 'Ext.data.Model',
fields: [
'FullName',
'DepartmentName',
'PhoneNumber',
'EmailAddr'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'EmployeeSearch',
proxy: {
type: 'ajax'
},
data: data
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
forceFit: true,
columns: [{
header: 'Name',
dataIndex: 'FullName',
flex: 1,
filter: 'string',
width: 440
}, {
header: 'Department',
dataIndex: 'DepartmentName',
filter: 'string',
flex: 1,
width: 200
}, {
header: 'Direct Phone',
dataIndex: 'PhoneNumber',
filter: 'string',
flex: 1,
width: 240
}, {
header: 'Notification Email',
dataIndex: 'EmailAddr',
flex: 1,
filter: 'string'
}],
renderTo: 'employeesSearchGrid',
frame: true,
plugins: ['gridfilters']
});
});`
The issue was fixed by adding height of the grid. Once I did that filtering and sorting got fixed. Here is how my grid looks like now:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
text: 'Name',
dataIndex: 'FullName',
flex: 1,
width: 440,
sortable: true,
filter: 'string'
}, {
text: 'Department',
dataIndex: 'DepartmentName',
flex: 1,
width: 200,
sortable: true,
filter: 'string'
}, {
text: 'Direct Phone',
dataIndex: 'PhoneNumber',
flex: 1,
width: 240,
sortable: true,
filter: 'string'
}, {
text: 'Notification Email',
dataIndex: 'EmailAddr',
flex: 1,
sortable: true,
filter: 'string'
}],
forceFit: true,
split: true,
renderTo: 'employeesSearchGrid',
height: 210,
frame: true,
plugins: ['gridfilters']
});

ExtJS: build app testing with chart failed

I have a problem by building a testing app with charts. I've build with sencha cmd an app and developed my app. Now I tried to build a testing app with sencha cmd and now I get the error
Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: series.bar
the
Store:
Ext.define('test.store.statisticKey', {
extend: 'Ext.data.Store',
model: 'test.model.statisticKey',
autoLoad: true,
autoSync: true,
id: 'storestatisticKey',
proxy: {
type: 'ajax',
url: '../getStatisticKey.php',
reader: {
type: 'json',
root: 'data'
}
}
});
the code for my Chart:
Ext.define('test.view.Chart1', {
extend: 'Ext.chart.Chart',
alias: 'widget.Chart1',
width: 350,
height: 300,
animate: true,
id: 'statisticKeyID',
store: 'statisticKey',
border: 0,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['count'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['key']
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('key') + ': ' + storeItem.get('count') + ' Patienten');
}
},
label: {
display: 'insideEnd',
field: 'count',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'key',
yField: ['count']
}]
});
In my Dev-System all is fine but when I build a test system I get the error and no Chart is shown.
Thx for the Help
See if you get "synchronous" warnings in console while developing and fix them if yes.
If still in trouble try
sencha ant clean
before building.

EXTJS 4.2 Adding new entries to store/grid

I am having trouble adding new entries to a store / grid in ExtJS 4.2. The create action runs on the server and returns a generated id for the new record. I can start on edit on the row that does not show up in the grid. The error I get after syncing is: Uncaught TypeError: Cannot read property 'parentNode' of null.
projectStore.js:
var projectStore = Ext.create('Ext.data.Store', {
model: 'ProjectModel',
storeId: 'projectStore',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
create: webPath+'server.php?action=createProjectStore',
read: webPath+'server.php?action=readProjectsStore',
update: webPath+'server.php?action=updateProjectStore',
destroy: webPath+'server.php?action=destroyProjectStore'
},
extraParams: {
token: userDetails.token,
userName: userDetails.UserName
},
reader: {
type: 'json',
successProperty: 'success',
idProperty: "ProjectID",
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true,
allowSingle: false
},
listeners: {
exception: function(proxy, response, operation){
// Ext.MessageBox.show({
// title: 'REMOTE EXCEPTION',
// msg: operation.getError(),
// icon: Ext.MessageBox.ERROR,
// buttons: Ext.Msg.OK
// });
operation.records[0].reject();
}
},
onUpdateRecords: function(records, operation, success) {
console.log(records);
}
}
});
projectModel.js:
Ext.define('ProjectModel', {
extend: 'Ext.data.Model',
idProperty: 'ProjectID',
fields: [ {
name: 'ProjectID',
type: 'int'
}, 'AccountName', 'AccountID', 'ProjectName', 'Deleted']
});
userProfileProjects.js
Ext.require([
'Ext.grid.Panel',
'Ext.form.*',
'Ext.window.Window',
'Ext.data.*'
]);
$(document).data('mcal.userAccountFixPopupOpen', false);
$(document).data('mcal.newProjectRecord', false);
var userProfileProjectRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});
Ext.define('User.Project.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.userProjectsGrid',
initComponent: function(){
this.editing = userProfileProjectRowEditing;
this.onRemoveProject = function(grid, rowIndex, colIndex) {
grid.getStore().removeAt(rowIndex);
}
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
items: ['->',
{
text: 'Add Project',
handler : function() {
userProfileProjectRowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('ProjectModel', {
ProjectName: 'New Project'
});
projectStore.insert(0, r);
$(document).data('mcal.newProjectRecord', true);
userProfileProjectRowEditing.startEdit(0, 0);
}
},
{
iconCls: 'icon-refresh',
text: 'Refresh',
scope: this,
handler: this.onRefresh
}]
}],
columns: [
{
text: 'Account',
width: 115,
sortable: true,
hidden: false,
dataIndex: 'AccountID',
renderer: function(value){
var accountID = userAccountTimeLimitedStore.getAt(userAccountTimeLimitedStore.find('key', value));
return accountID.get('AccountName');
},
editor: {
xtype: 'combobox',
valueField: 'key',
displayField: 'AccountName',
triggerAction: 'all',
queryMode: 'local',
store: userAccountTimeLimitedStore
},
flex: 1
},
{
text: 'Project',
width: 115,
sortable: true,
dataIndex: 'ProjectName',
field: {
type: 'textfield'
},
flex: 1,
hidden: false
},
{
xtype:'actioncolumn',
text: 'Delete',
width:45,
align: 'center',
editRenderer: function(){ return ''},
items: [{
icon: webPath+'/images/remove.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: this.onRemoveProject
}]
}
],
selType: 'rowmodel',
plugins: [this.editing]
});
this.callParent();
},
onRefresh: function(){
this.store.reload();
}
});
function initUserProjectGrid(){
window.main = Ext.create('Ext.container.Container', {
padding: '0 0 0 0',
width: 380,
height: 200,
renderTo: Ext.get('userProjectGridDiv'),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
itemId: 'userProfileProjectGrid',
xtype: 'userProjectsGrid',
title: 'Projects',
flex: 1,
store: 'projectStore'
}]
});
// main.getComponent('userProfileProjectGrid').editing.editor.form.findField('AccountName').disable();
var localEdit = main.getComponent('userProfileProjectGrid').editing;
localEdit.on('beforeedit', function(editor, context, eOpts){
if($(document).data('mcal.newProjectRecord') != true){
localEdit.editor.form.findField('AccountID').disable();
}else{
localEdit.editor.form.findField('AccountID').enable();
}
});
localEdit.on('afteredit', function(){
$(document).data('mcal.newProjectRecord', false);
});
}

EXTJS4: App is not loading when TreeView is embed

My App works fine, if the TreeView "TreeCreateMenu" is not embed. Since it is embed, the app stocks at the Browser-Web-Console at the Point from the extjs-directory "Trigger.js". But no error is displayed!
Here are my files:
The Viewport:
Ext.define('App.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'App.view.Settings',
'App.view.Footer',
'App.view.TreeMenu',
'App.view.tree.TreeCreateMenu',
],
layout: 'border',
items: [
{
region: 'north',
border: false,
margin: '0 0 1 0',
split: true,
items: [{xtype: 'settings'}]
}, {
region: 'west',
collapsible: true,
title: 'Menu',
width: 250,
layout: 'vbox',
items: [
{
xtype: 'treemenu',
height: 600,
minSize: 600,
maxSize: 600,
layout: 'fit',
flex: 1
},
{
title: 'Create',
layout: 'fit',
border: '1 0 0 0',
width: 250,
height: 100,
items: [{xtype: 'treecreatemenu'}]
}
]
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
layout: 'fit',
height: 20,
items: [{xtype: 'footertoolbar'}]
}, {
region: 'center',
id:'region_center',
layout: 'fit',
border: '1 0 0 0',
items: []
}
],
initComponent: function() {
this.callParent();
}
});
The Controller of TreeCreateMenu
Ext.define('App.controller.tree.TreeCreateMenu', {
extend: 'Ext.app.Controller',
views: ['tree.TreeCreateMenu'],
models: ['tree.TreeCreateMenu'],
stores: ['tree.TreeCreateMenu'],
onLaunch: function() {},
refs: [{
selector: 'tree',
ref: 'treecreatemenu'
}],
init: function() {
this.control({
'treecreatemenu': {
itemclick: function(view, node, rec, item, index, e ) {}
}
});
}
});
The model:
Ext.define('App.model.tree.TreeCreateMenu', {
extend: 'Ext.data.Model',
displayField: 'text',
fields: [
{name: 'text', type: 'string', leaf:false},
{name: 'value', type: 'string', leaf:false},
]
});
The store: (Response is correct, because i displayed it at the TreeMenu.js in the Viwport)
Ext.define('App.store.tree.TreeCreateMenu', {
extend: 'Ext.data.TreeStore',
requires: 'App.model.tree.TreeCreateMenu',
model: 'App.model.tree.TreeCreateMenu',
AutoLoad: false,
nodeParam: 'value',
proxy: {
type: 'ajax',
url: 'bin/app/ajax.php',
extraParams: {
action:'getTreeCreateMenu'
},
reader: {
type: 'json',
root: 'children'
},
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
}
}
});
And my View:
Ext.define('App.view.tree.TreeCreateMenu', {
extend: 'Ext.tree.Panel',
alias: 'widget.treecreatemenu',
//store: 'tree.TreeCreateMenu',
rootVisible: false,
bodyStyle: 'border:none;',
padding:'5,0,0,0'
});
So nothing special...but it doesn't work and I have absolutely no idea! Someone can help me with this please? THANKS!!

How to show grid in window with ExtJs?

Thare is problem in my ExtJs app.
I want to show grid in window. I says:
Column Model:
var markCm = new Ext.grid.ColumnModel({
columns:[{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
},{
header: 'Дата',
dataIndex: 'mark_date',
width: 30
},{
header: 'Статус',
dataIndex: 'status',
width: 30
}],
defaults: {
flex: 1
}
});
console.log("1");
Grid:
var markGrid = new Ext.grid.GridPanel({
//store: markStore,
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
Window:
console.log("2");
var markWin = new Ext.Window({
id: 'markWindow',
layout: 'fit',
title:'Спискок маркеров',
autoScroll:false,
//width:600,
items:[markGrid],
listeners:{
}
});
console.log("3");
markWin.show();
console.log("4");
And in firebug i see:
1
2
3
TypeError: this.ds is undefined
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...
Whats can be wrong?
UPDATE
I try add store like in this example
var markGrid = new Ext.grid.GridPanel({
store: Ext.create('Ext.data.ArrayStore', {}),
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
and get error:
1
TypeError: d[a] is not a constructor
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...
You are missing a store. Every grid needs a store. (this.ds is undefined => ds is probably dataStore)
I don't know what version you are working with. (check that by typing Ext.versions.extjs.version in the console)
In case you are working with latest ExtJS version (4.x) it is preferred to use Ext.define and Ext.create instead of using the 'new' keyword :)
Here is a working fiddle
Ext.onReady(function () {
Ext.define('MyApp.model.Mark', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'annotation',
type: 'string'
}, {
name: 'mark_date',
type: 'date'
}, {
name: 'status',
type: 'string'
}]
});
Ext.define('MyApp.store.Marks', {
extend: 'Ext.data.Store',
//best to require the model if you put it in separate files
requires: ['MyApp.model.Mark'],
model: 'MyApp.model.Mark',
storeId: 'markStore',
data: {
items: [{
id: 1,
annotation: "Test",
mark_date: "2013-04-24 9:28:00",
status: "Done"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
itemId: 'markGrid',
store: Ext.create('MyApp.store.Marks'),
loadMask: true,
width: 400,
columns: [{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
flex: 1
}, {
header: 'Дата',
dataIndex: 'mark_date',
width: 30,
flex: 1
}, {
header: 'Статус',
dataIndex: 'status',
width: 30,
flex: 1
}]
});
var window = Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
items: [grid]
});
window.show();
});
UPDATE
You are using an example from Ext 4.x => Ext.data.ArrayStore
can't be created via Ext.create but use the new keyword in Ext versions < 4.x :)
http://jsfiddle.net/Vandeplas/BZUxa/
Ext.onReady(function () {
var markCm = new Ext.grid.ColumnModel({
columns: [{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
}, {
header: 'Дата',
dataIndex: 'mark_date',
width: 30
}, {
header: 'Статус',
dataIndex: 'status',
width: 30
}],
defaults: {
flex: 1
}
});
var markGrid = new Ext.grid.GridPanel({
store: new Ext.data.ArrayStore({}),
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows: true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
var markWin = new Ext.Window({
id: 'markWindow',
layout: 'fit',
title: 'Спискок маркеров',
autoScroll: false,
//width:600,
items: [markGrid],
listeners: {}
});
markWin.show();
});

Categories