I have this pie chart in sencha
{
xtype: 'polar',
height: 600,
id: 'genderPieChart',
padding: 5,
title: 'Chart showiing the number of Males and Females ',
colors: [
'#115fa6',
'#94ae0a'
],
store: 'GenderStore',
series: [
{
type: 'pie',
xField: 'counter',
yField: 'types'
}
],
interactions: [
{
type: 'rotate'
}
],
legend: {
xtype: 'legend',
itemSelector: 'div',
itemTpl: Ext.create('Ext.XTemplate',
'',
{
definitions: [
'Male, Female'
]
}
)
}
}
I need to add a legend to it using the fielfd from my model, the model being
Ext.define('Qvidi.model.MyModel', {
extend: 'Ext.data.Model',
alias: 'model.MyModel',
requires: [
'Ext.data.field.Integer'
],
fields: [
{
name: 'types'
},
{
type: 'int',
name: 'counter'
}
]
});
as you can see I did add the legend in the first block of code, but I need it to be configured, and i don't know how, tried everything i could think of, so far unsuccessful
Related
Hello I am making a piechart in EXTJS. The legends of these charts are not displaying properly they are being cut off. Therefore i am making a piechart in one panel and just under that i am making another panel which would contain the legends.
My question is how do I connect the pie chart in one panel and showing the legend of this pie chart in another panel.
I am using EXTJS 4.2
I am made 2 panels one is under the other in a vbox positioning.
Hope this will help you:
View
layout: {
type: 'vbox',
align: 'stretch'
},
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'top',
ui: 'tools',
items: [
{
xtype: 'tbspacer',
flex: 1
},
{
xtype: 'label',
html: '<span style="font-weight:bold">Sales by Category</span>'
},
{
xtype: 'tbspacer',
flex: 1
},
{
xtype: 'button',
iconCls: 'x-fa fa-download',
text: 'Download',
listeners: {
click: 'onDownloadButtonClick'
}
}
]
}
],
items: [
{
xtype: 'polar',
reference: 'salesByCategoryChartRef',
flex: 1,
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111',
'#009900',
'#6600cc'
],
insetPadding: '10',
innerPadding: 10,
bind: {
store: '{currentCategoryStore}'
},
series: [
{
type: 'pie',
highlight: true,
label: {
field: 'description',
display: 'none',
font: '12px Arial',
contrast: true
},
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
},
angleField: 'sales'
}
],
interactions: [
{
type: 'rotate'
}
],
legend: {
xtype: 'legend',
docked: 'right'
}
}
],
Controller:
onSeriesTooltipRender: function(tooltip, record, item) {
var html = 'Code: ' + record.get('code') +' <br/> Description: ' +
record.get('description') + '<br/> Sale: ' + record.get('sales') + '%';
tooltip.setHtml(html);
},
onDownloadButtonClick: function(button, e, eOpts) {
if (Ext.isIE8) {
Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.');
return;
}
var chart = this.lookupReference('salesByCategoryChartRef');
if (Ext.os.is.Desktop) {
chart.download({
filename: 'Sales by Category'
});
} else {
chart.preview();
}
},
Here is the output
PIE Chart
I'm trying to become familiar with Ext JS 5. I took a sencha generated app as
the start point and modified it to see a grid of one line.
But the page is simply blank.
Can anyone, please, show me what am I doing wrong?
I am not familiar with the MVVM pattern but I want to learn it.
Here's my set of files:
And here are the JS sources.
Applications.js
Ext.define('Admin.Application', {
extend: 'Ext.app.Application',
name: 'Admin'
});
Base.js (base class for models)
Ext.define('Admin.model.Base', {
extend: 'Ext.data.Model',
schema: {
namespace: 'Admin.model'
}
});
Item.js (a simple model)
Ext.define('Admin.model.Item', {
extend: 'Admin.model.Base',
fields: [
{ name: 'id', type: 'int' },
{ name: 'title', type: 'string' }
]
});
ItemList.js (a store of items that I want to show in a grid)
Ext.define('Admin.store.ItemList', {
extend: 'Ext.data.Store',
alias: 'store.itemlist',
model: 'Admin.model.Item',
data: [{id: 1, title: 'title1'}]
});
ItemListGrid.js (the panel with the grid)
Ext.define('Admin.view.main.ItemListGrid', {
extend: 'Ext.grid.Panel',
requires: [
'Admin.store.ItemList'
],
alias: 'widget.itemlistgrid',
bind: {
store: '{itemlist}',
title: '<b>Some title</b>',
columns: [{
text: 'id',
dataIndex: 'id'
},{
text: 'title',
dataIndex: 'title'
}]
}
});
Main.js
Ext.define('Admin.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Admin.view.main.MainController',
'Admin.view.main.MainModel',
'Admin.view.main.ItemListGrid'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
//region: 'west',
width: '100%',
items: [{
xtype: 'itemlistgrid'
}]
}]
});
MainController.js
Ext.define('Admin.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main'
});
MainModel.js
Ext.define('Admin.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Admin'
},
bind: {
store: '{itemlist}'
}
});
The sencha app build builds the app without errors. But I don't see the grid.
Before this I tried the default generated app and it showed in my browser OK.
Thank you.
Here's the exact answer to my question https://www.sencha.com/forum/showthread.php?299703-ExtJS-5-first-steps-cannot-see-a-simple-grid-with-one-store&p=1095022&viewfull=1#post1095022
I am getting pretty desperate about this code and have no idea why it is not working. I am trying to load list from json file. He is my code:
views:
main view
Ext.define('Alerts.view.Main', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar',
items: [{
xtype: 'button',
text: 'Alerts',
id: 'alertsButton',
handler : function(){
//alert('tap')
var pnl = Ext.getCmp('hiddenPanel');
pnl.showBy(this,"tl-bl");
}
}]
},
{
xtype: 'AlertsList'
},
{
xtype: 'panel',
id: 'hiddenPanel',
// We give it a left and top property to make it floating by default
left: 0,
top: 40,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Make it hidden by default
hidden: true,
// Set the width and height of the panel
width: 400,
height: 400,
// Here we specify the #id of the element we created in `index.html`
contentEl: 'content',
// Style the content and make it scrollable
styleHtmlContent: true,
scrollable: true,
// Insert a title docked at the top with a title
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Add new',
items: [{
iconCls: 'add',
iconAlign : 'right',
id: 'newIcon',
handler : function(){
alert('icon')
//var pnl = Ext.getCmp('hiddenPanel');
//pnl.showBy(this,"tl-bl");
}
}]
}
]
}
]
}
});
AlertsList view:
Ext.define('Alerts.view.AlertsList', {
extend: 'Ext.Container',
requires: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
fullscreen: true,
title: 'list',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'Alert',
itemTpl: '<h1>item<h1>{name}',
}
]
}
});
model:
Ext.define('Alerts.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
store:
Ext.define("Alerts.store.Alert", {
extend: 'Ext.data.Store',
config: {
model: "Alerts.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url : "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
When i run the code, app loads fine, without any warns/errors - console is clear.
The main reason of the wrong behavior is that the store was not created before. Try to add the following changes. Add alias: 'store.alerts' to Alert store. Then use it as store: {type: 'alerts'} in the AlertsList. As mentioned here, this creates a store instance for you. Also I found some issues with the app layout, so I attach here short version of your code with my changes:
Ext.define('Test.view.Main', {
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar'
}, {
xtype: 'AlertsList'
}]
}
});
Ext.define('Test.view.AlertsList', {
extend: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
store: {
type: 'alerts'
},
itemTpl: '<h1>item<h1>{name}',
}
});
Ext.define('Test.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
Ext.define("Test.store.Alert", {
extend: 'Ext.data.Store',
alias: 'store.alerts',
config: {
model: "Test.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url: "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
I can't figure out why my customer renderer for my grouped-column grid isn't being called.
Ext.define('PT.view.deal.YearCol', {
extend: 'Ext.grid.column.Column',
alias: 'widget.yearcolumn',
columns: [
{
text: 1,
renderer: function(v, m, r) {
console.log('renderer called'); // THIS IS NEVER CALLED!!!!!!!!
return custom(r);
}
},
...
]
});
Ext.define('PT.view.deal.QuarterlyGrid', {
extend: 'Ext.grid.Panel',
columns: [
{
text: 'Item Number',
dataIndex: 'Item_Number'
},
{
xtype: 'yearcolumn',
text: 2013
},
...
]
});
The grid columns/headers are displayed correctly, but the grid data isn't rendered. Why is that function not being called?
What version are you using? This works ok for me in 4.2.0:
Ext.define('PT.view.deal.YearCol', {
extend: 'Ext.grid.column.Column',
alias: 'widget.yearcolumn',
columns: [{
text: 1,
renderer: function(v, m, r) {
return r.get('foo');
}
}]
});
Ext.define('Grid', {
extend: 'Ext.grid.Panel',
columns: [{
text: 'Item Number',
dataIndex: 'Item_Number'
}, {
xtype: 'yearcolumn',
text: 2013
}]
});
Ext.onReady(function() {
new Grid({
width: 200,
height: 200,
renderTo: document.body,
store: {
fields: ['Item_Number', 'foo'],
data: [{
Item_Number: 1,
foo: 2
}]
}
});
});
I was creating Tree Panel similar to TreeGrid example with drag'n'drop. The only problem is that items are correctly shown in tree panel in Firefox browser whereas in Chromium tree grid is empty. How's that possible?
JSON data sent to server:
{"text":".","children": [
{
"id":null,
"name":"en",
"visible":false,
"expanded":true,
"leaf":false,
"children":{
"id":5,
"name":"/",
"visible":false,
"expanded":true,
"leaf":true,
"children":[]
}
}]
}
Model
Ext.define('Example.model.WebTreeItem', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id', type: 'int', defaultValue: 0},
{name: 'visible', type: 'boolean' },
{name: 'name', type: 'string' }
]
});
Store
Ext.define('Example.store.WebTreeItems', {
extend: 'Ext.data.TreeStore',
model: 'Example.model.WebTreeItem',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read : 'getlist.json'
},
reader: {
type: 'json'
}
}
});
View
Ext.define('Example.view.webitem.Tree', {
extend: 'Ext.tree.Panel',
alias : 'widget.webtreeitem',
title : 'Web items',
store: 'WebTreeItems',
rootVisible: false,
multiSelect: true,
singleExpand: false,
collapsible: true,
selModel: Ext.create('Ext.selection.CheckboxModel'),
height: 800,
renderTo: 'webstructure-tree',
columns: [{
xtype: 'treecolumn',
text: 'Name',
flex: 2,
sortable: true,
dataIndex: 'name'
},{
xtype: 'booleancolumn',
text: 'Visible',
flex: 1,
dataIndex: 'visible',
sortable: false
}],
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
}]
});
Dependencies are loaded automatically using
Ext.Loader.setConfig({enabled:true});
Ext.application({
...
});
Any suggestion will be highly appreciated.
Well I thought that I was sending aforementioned JSON, but in fact I was sending something like this (quoted response with escaped quotes) and Chromium couldn't read it correctly
"{\"text\":\".\",\"children\": [
{
\"id\":null,
\"name\":\"en\",
\"visible\":false,
\"expanded\":true,
\"leaf\":false,
\"children\":{
\"id\":5,
\"name\":\"/\",
\"visible\":false,
\"expanded\":true,
\"leaf\":true,
\"children\":[]
}
}]
}"