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 :)
Related
I don't know if this is a configuration issue in my app because I have done the same thing on one server which works perfectly. On a different web server I am trying to set up I am just trying to get an example working and I'm running into some extremely odd behavior. For some reason whenever the store loads it does a get request for a file that has the same name as the model name of the store. I don't understand why it's requesting a model file when the model is defined in the same file!? I didn't always have the model or store defined in the same file, they were in the proper directory structure but I moved them into one file to troubleshoot this issue and rule out possibilities but it's the same result, so for simplicity it's in the same file:
Ext.define('FPTModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'f1', type: 'int'},
{name: 'f2', type: 'string'},
]
});
Ext.define('appName.view.main.Main', {
extend: 'Ext.container.Container',
requires: [...my controller and viewModel are here...],
xtype: 'app-main',
initComponent: function() {
var myStore = Ext.create('Ext.data.Store', {
model: 'FPTModel',
data: [
{f1: 1, f2: 'someData'},
{f1: 2, f2: 'some more data'},
],
autoLoad: true
});
this.testStore = myStore;
this.callParent();
},
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'tab 1',
xtype: 'container',
layout: 'vbox',
items: [{
xtype: 'grid',
height: 300,
width: '100%',
columns: [
{header: 'Field 1', dataIndex: 'f1' },
{header: 'Field 2',dataIndex: 'f2'},
],
store: this.testStore
}]
}]
}]
});
When the page loads everything is fine and there are no errors. Whenever the store loads I see a GET request go out for https://my.site/FPTModel?_dc=1432862899334&page=1&start=0&limit=25
I know this is happening when the store loads because when I remove the autoLoad it doesn't send the get request and if I call testStore.load anywhere it does the get request.
This get request returns 404 obviously because that file doesn't exist. I don't understand why it's trying to load the model file from the server's root directory, or at all, when it's already defined. When I had this defined in it's proper directory structure (appName.model.FPTModel) then the get request was for .../appName.model.FPTModel...
I have been using extjs for about 2 years now and I have never seen anything like this.... Hoping someone out there can shed some light on this as it's driving me crazy. I hope there is something simple that I am missing somewhere...
This is because you do an Ext.define on the model.
Then Extjs is going to look in namespace of your app and tries to find the model FPTModel as an FPTModel.js file, because you used just "FPTModel", in the root of your app.
You should use Ext.create to create the model as a variable result and use that variable (containing the model object) in in your store. Or you should create an additional file with the model description in folder: appName/model/ and refer to it in the store.
But then you have to add a require config setting in your store to the model. Something like
require: ['appName.model.FPTModel']
You don't have to do this if you have add the model and store to the requires of your application.js in your app.
If you have no further needs for the model I would include the fields in the store definition.
I have done some restructuring of your object (not complete). I have added some panels for clarity. Don't use a border layout if you don't need one and avoid overdoing layouts and unneccessary nesting of panels.
I have added the function getGridStore which you can call with this.getGridStore(), to avoid functions like this.teststore = myStore.
So if you have to reload the store you simply do: this.getGridStore().load(), or in the application or view controller something like: this.getMainPanel.getGridStore().load().
The autoLoad config is not required, because the store already holds the data. It is only required if you load the data from a proxy (server).
Ext.define('appName.view.main.Main', {
extend: 'Ext.panel.Panel',
layout: 'border',
requires: [],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
initComponent: function () {
var myModel = Ext.create('Ext.data.Model', {
fields: [
{name: 'f1', type: 'int'},
{name: 'f2', type: 'string'},
]
});
var myStore = Ext.create('Ext.data.Store', {
model: myModel,
data: [
{f1: 1, f2: 'someData'},
{f1: 2, f2: 'some more data'},
],
autoLoad: true
});
Ext.applyIf(this, {
items: [{
region: 'center',
title: 'Center Panel',
flex: 3,
xtype: 'tabpanel',
items: [{
title: 'tab 1',
xtype: 'gridpanel',
layout: 'fit', // maybe not even neccessary
columns: [
{header: 'Field 1', dataIndex: 'f1'},
{header: 'Field 2', dataIndex: 'f2'},
],
store: myStore
}, {
xtype: 'panel',
html: 'Some other tab',
layout: 'fit'
}]
}, {
xtype: 'panel',
region: 'east',
flex: 1,
html: 'East panel',
title: 'East Panel'
}]
});
this.callParent();
},
getGridStore: function() {
return this.down('gridpanel').getStore();
}
});
Because you're specifying autoLoad, which is triggering the store to send a load request. Since you've not provided a URL for the proxy, it defaults to the name of the model. Remove autoLoad, it's redundant.
I am using the lastest sencha cmd for the build with ext-5.0.1.
Everythings look good during the development status (http://www.imageupload.co.uk/5Med) but after the build.
All the textfields collapsed like shown (http://www.imageupload.co.uk/5MeQ), and have no response to the changes in width, minWidth, flex... etc.
And also the properties y and x are not functioning.
If someone had had similar situation before, please help, thx
My cmd is v5.0.3.324
Here are part of my code:
In my Main.js:
Ext.define('ExtTest2.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'ExtTest2.view.main.MainController',
'ExtTest2.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'fit'
},
itemId:'Stage'
});
MainController.js:
Ext.define('ExtTest2.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
init: function(){
this.Start();
},
Start: function(){
var data = {
itemId: "Page_Login",
xtype: "panel",
items: [
{
padding: 30,
layout:{
type: 'vbox',
align: 'center'
},
xtype: "fieldset",
y: "30%",
height: 150,
items: [
{
xtype: "textfield",
itemId: "Textfield_Username",
fieldLabel: "用戶名稱",
labelStyle: "color:#FFFFFF"
},
{
fieldLabel: "密碼",
itemId: "Textfield_Password",
labelStyle: "color:#FFFFFF",
xtype: "textfield"
},
{
itemId: "Button_Login",
text: "登入",
width: 100,
xtype: "button"
}
]
}
]
};
var container = Ext.ComponentQuery.query('#Stage')[0];
container.removeAll();
container.add(data);
container.updateLayout();
}
});
It is overnested because you add unnecessary container to app-main containing the fields.
It is very unusual to manipulate views from view controller like that - create a class for the fieldset, give it an alias (xtype) and simply instantiate that. Cramming controller handlers together with view definitions shall inevitably lead to Spaghetti Code.
You use vbox layout, without any flex or height to hold form fields. Form fields behave best in anchor layout that is the default for Ext.form.Panel.
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
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.