here is my tab's code containing the pie chart
{
xtype: 'container',
title: 'Chart',
iconCls: 'chart',
itemId: 'chart_Tab',
layout: {
type: 'fit'
},
items: [
{
xtype: 'polar',
autoDestroy: false,
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'elementstore',
series: [
{
type: 'pie',
xField: 'numValue'
}
],
interactions: [
{
type: 'rotate'
}
]
}
]
},
Problem is, it does show anything, but does not crash either...
I checked my store is full of model to display.
Here is the output of this chart... All there is is the ''gpl sencha generated label'' no chart at all... so im guessing something is wrong but I cant put my finger on it, + there is absolutly NO working exemple of that from the sencha team...
Still not working would someone has anny idea on why?
Try changing
store: 'elementstore',
To
`store: elementstore,`,
Charts files are not included with the free version of Sencha Touch, nor in the trial version.
If you run it in a local sever (app.html) and not index.html, you won't see anything.
Related
Learning ExtJS5 I have a problem with grid. I have such panel description:
{
xtype: 'tabpanel',
items: [
{
title: 'Texts',
xtype: 'gridpanel',
reference: 'textGrid',
store: Ext.create('Ext.data.Store', {
fields: ['active', 'textValue'],
data: {
items: [
{active: true, textValue: 'test'},
{active: false, textValue: 'no test'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}),
columns: [
{ xtype: 'checkcolumn',
text: 'Enable', dataIndex: 'active', width: 100,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
},
{ text: 'Value', dataIndex: 'textValue', flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
plugins: {
ptype: 'rowediting',
clicksToEdit: 1
}
},
{
title: 'Images',
xtype: 'gridpanel'
}
]
}
But it's rendered wrong. I don't see a checkbox and area for text column is too small. There're no any errors in firebug console.
What's wrong with code?
Thanks.
I had this problem too and it looks like this sometimes happens when there are requires missing in your classes.
Look into the console for warnings like these:
[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') above Ext.onReady
And add the missing classes to the requires array of the class that uses them like this:
Ext.define('Test.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Ext.layout.container.Border',
'Ext.tab.Panel'
],
...
Styles are missing.
If you created the proyect with Sencha Command (you are loading proyect with microloader bootstrap, see your index.html), then you must be sure you have defined all requires of the components that you used on your app and launch this command from the root directory:
sencha app build
This command compile the css that will be use on your app (among other things). You can try too:
sencha app refresh
And a latest two command if the latest don't work (use both):
sencha app clean
sencha app build
Hope it work
I'm using Sencha Architect 3.0.1.
I'm trying to use a Model, a TreeStore, and a TreePanel.
The Model:
Ext.define('User.model.ModelClientList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id' }, { name: 'name' }, { name: 'status' } ],
proxy: {
type: 'direct',
directFn: 'UserClient.listClient',
reader: { type: 'json',root: 'data'}
}
});
The TreeStore:
Ext.define('User.store.StoreClientList', {
extend: 'Ext.data.TreeStore',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'User.model.ModelClientList',
storeId: 'StoreClientList'
}, cfg)]);
}
});
And the TreePanel:
{
xtype: 'treepanel',
height: 250,
itemId: 'MainClient',
width: 400,
title: 'Clients',
hideHeaders: false,
store: 'StoreClientList',
rootVisible: false,
viewConfig: {loadMask: true},
columns: [
{xtype: 'treecolumn',dataIndex: 'name',text: '..'},
{xtype: 'gridcolumn', dataIndex: 'status', text: '..'}
]
}
The json request to UserClient.listClient returns this:
{
"data":[
{"id":1,"name":"Pluto","status":3,"children":[
{"id":35,"name":"Mela","status":2,"leaf":true},
{"id":36,"name":"Pera","status":1,"leaf":true},
{"id":37,"name":"Arancia","status":1,"leaf":true}]},
{"id":2,"name":"Pippo","status":1,"leaf":true},
{"id":3,"name":"Paperino","status":2,"leaf":true}],
"success":true
}
Now, can someone explain me:
(1) Why, when I click on [+] icon of the first node the application does another ajax request instead of expanding what already got from the previous request
(2) Given this initial view:
Why when I click on the [+] it starts going crazy like this:
It was clearly a problem of Sencha Architect.
I rewrote from scratch in a new project the same architecture and now it works as expected.
Also, I noticed that something was going wrong with Architect becouse of simple operation made it show incomprehensible and undebuggable errors (like "Cannot set property 'DirectCfg' of null").
Unfortunately I cannot state that Sencha Architect is mature for large and complex project.. probably not even for small project. what a pity
I'm trying to add an chart to my Sencha Touch app.
I have added a view like this and inserted a chart how I saw it on a couple of sites:
Ext.define('dergraph.view.Graph', {
extend: 'Ext.Container',
xtype: 'graph',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',
layout: 'fit',
items: [
{
xtype: 'chart',
animate: true,
store: 'dergraph.store.PhoneBook',
legend: {
position: 'right'
},
axes: [{
type: 'Category',
fields: ['firstName'],
position: 'bottom', //x-axis
title: 'Category'
}, {
type: 'Numeric',
fields: ['value'],
position: 'left', //y-axis
title: 'Value'
}]
}
]
}
});
But now I got in an Error in the Console of the browser: Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: axis.Category.
This is my require-part in the app.js:
requires: [
'Ext.MessageBox',
'Ext.dataview.List',
'Ext.chart.Chart',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category'
],
Can somebody help me with this?
The type, xtype, etc. are case-sensitive, and the ones in the library are all lowercase.
So change type: 'Category' to type: 'category', and type: 'Numeric' to type: 'numeric', and your code will run.
You should also read the doc about xtype. This option is used to indicate the type of component to create without having to use the new keyword yourself (allowing lazy initialization). The xtype option is only meaningful in the context of an object you want to instantiate, not one you define. So this line in your code has no effect:
xtype: 'graph',
did you include the Sencha Touch 2 Charts 2 Beta here? And if so, how exactly did you do that? Please start from the point after you downloaded it - I'm a rookie :)
I have a basic grid with a toolbar but want to use a plugIn for the toolbar. I can get the code working just fine when writing it manually, but I want to be able to use Architect 2. Here is a snippet...
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
}
]
}
plugins: new Ext.ux.ProgressBarPager() is the line that I cannot add using Architect 2. I cannot find the plugins property anywhere on the config panel. Any idea on how to add the plugin?
I think what you can do is override your pagingtoolbar and do something like this:
Ext.define('MyApp.view.override.ProgressBarPager.PagingToolbar', {
requires: 'MyApp.view.ProgressBarPager.PagingToolbar'
}, function() {
Ext.override(MyApp.view.ProgressBarPager.PagingToolbar, {
initComponent: function () {
this.plugins = [new Ext.ux.ProgressBarPager()];
this.callParent(arguments);
}
});
});
I know the question was for an earlier version of SA. In SA 4.2.3 you can add a component property that doesn't appear in the configs list by typing the property name in the editor above the config and pressing enter. Then you can change the type of the property value to whatever suits your needs. Using this method you can add the plugins property, then you can make it of type Array, then you edit the value and you can enter something like [{ptype: 'datatip'}] or in your case [new Ext.ux.ProgressBarPager()]
I am unable to render google pie chart in my border layout of the interface. Though the pie chart works fine on separate html page.
The div is as follows:
The javascript code looks like this:
{
title: 'View Interactive Reports',
ContentEl: "pChartMap",
plain: true,
bodyStyle: 'padding:5px',
border: false,
autoScroll: true
}
I am not sure about the ContentEl thing. It works fine, if there is simple text there but since the google chart is based on google visualisation api and an AJAX call where there is a function call as:
google.setOnLoadCallback(createChart);
Any ideas how to render this will be appreciated.
Cheers
Ali
Have you check this? http://www.sencha.com/blog/2008/10/13/google-visualization/
Sadly the example page is broken, but is just because the sencha site has not the 2.2 source of ExtJS anymore; or at least not there where the sample expect it; but if you download the page and use ExtJS 2.3.0 it will work.
Anyway, you only need to download this js: http://dev.sencha.com/playpen/google-visualization/GVisualizationPanel.js
And then just use the Ext.ux.GVisualizationPanel. Here is an example I tested:
Ext.onReady(function() {
var lineChartDs = new Ext.data.SimpleStore({
fields: [
{name: 'yr', type: 'string'}
,{name: 'sales', type: 'int'}
,{name: 'expenses', type: 'int'}
],
data: [['2004',1000,400],['2005',1170,460],['2006',860,580],['2007',1030,540]]
});
var lineChart = new Ext.ux.GVisualizationPanel({
id: 'lineChart',
visualizationPkg: 'linechart',
title: 'Company Performance Sample',
store: lineChartDs,
columns: [
{dataIndex: 'yr', label: 'Year'}
,{dataIndex: 'sales', label: 'Sales'}
,{dataIndex: 'expenses', label: 'Expenses'}
]
})
new Ext.Viewport({
layout: 'fit',
items: [lineChart]
});
});