I was trying to render a simple piechart using ExtJs 3.0 but could not. Below is the snippet:
<div id="ext_grid_panel">
<div id="blackout_tab">
<div id="grid_blackout_current"></div>
</div>
<div id="gls_tab">
<div id="gls_current"></div>
</div>
</div>
var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\',';
var mainGridPanel = new Ext.TabPanel({
id: 'maingridpanel',
renderTo: 'ext_grid_panel',
style: {width:'100%'},
tabWidth: 1000,
activeTab: 0,
items: [
{id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'},
{id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'}
]
});
if (!Ext.IsIE)
mainGridPanel.setWidth('100%');
Ext.getCmp('allTabPanel').on('activate', function() {
});
Ext.getCmp('glsTabPanel').on('activate', function() {
});
var pieChart = {
xtype : 'piechart',
store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}],
dataField : 'total',
categoryField : 'range'
};
var panelBlackoutCurrent = new Ext.Panel({
id: 'panelblackoutcurrent',
renderTo: 'grid_blackout_current',
items: [
pieChart
]
});
var panelglsCurrent = new Ext.Panel({
id: 'panelglscurrent',
renderTo: 'gls_current',
items: [
pieChart
]
});
When i inspect in firefox firebug, i see an object(.swf) is created but the piechart content is not there/rendered.
Quick guidance is highly appreciated as it is taking lot of time with no solution
You can use an example pie chart as a starting point:
http://www.extjs.com/deploy/dev/examples/chart/pie-chart.js
Here is the result: http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html
here come my version
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<div id="ext_grid_panel">
</div>
<script>
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
fields: ['total', 'range'],
autoLoad: true,
data: [
{
total: 42,
range:'20,000'
}
,{
total: 53,
range:'10,000'
}
]
});
var mainGridPanel = new Ext.TabPanel({
renderTo: 'ext_grid_panel',
//style: {width:'100%'},
width: '100%',
height: 400,
activeTab: 0,
plain: true,
items: [
{
id: 'panelglscurrent',
title: 'GPS',
layout: 'fit',
listeners: {
activate: function(){
}
},
items: [{
id: 'chart1',
xtype : 'piechart',
store : store,
dataField : 'total',
categoryField : 'range'
}]
},
{
id: 'panelblackoutcurrent',
title: 'All',
layout: 'fit',
listeners: {
activate: function(){
}
},
items: [
{
id: 'chart2',
xtype : 'piechart',
store : store,
dataField : 'total',
categoryField : 'range'
}
]
}
]
});
Ext.getCmp('panelglscurrent').on('activate', function() {
Ext.getCmp('panelglscurrent').doLayout(true);
});
Ext.getCmp('panelblackoutcurrent').on('activate', function() {
Ext.getCmp('panelblackoutcurrent').doLayout(true);
});
if (!Ext.IsIE)
mainGridPanel.setWidth('100%');
});
</script>
</body>
</html>
your sample had a few problems:
first you have to create a proper store passing the array of object to the pie chart is not enought
also you should wrap your code inside Ext.onReady or you can get some strange behaviour like element not rendering properly
make sure to include the plain: true on tabPanel with chart inside or the chart won't render properly
an general note
try to give good name at your variable (like mainGridPanel being actually a TabPanel)
intent properly your code, by experience it really become messy fast.
Also if you want to make the extjs component using full screen, you have better to use the viewport it would make everything resize nicely and make things more easy for you
Related
I am creating a reusable generic view, which is a container with border layout and empty north, west, and center containers.
I want to use this generic view, and dynamically define items for the north, west, and center containers.
As seen below, I am trying to do this via a custom config, and auto-generated "apply" functions.
But nothing is displaying in the UI.
What might I be doing wrong here?
I'm getting this error:
TypeError: items is undefined
len = items.length,
Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>APP</title>
<link rel="stylesheet" type="text/css" href="../../ext-4.2.1.883/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-4.2.1.883/ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'APP',
appFolder: '../simplemvcBorderLayout',
autoCreateViewport: true
});
Ext.define('APP.view.Viewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.appviewport',
autoScroll: true,
layout: 'fit',
requires: [
'view.Main'
],
items: [{
xtype: 'mainAppView',
northItems: [{
xtype: 'label',
text: 'here'
}],
westItems: [{
xtype: 'label',
text: 'here'
}],
centerItems: [{
xtype: 'label',
text: 'here'
}]
}]
});
Ext.define('APP.view.Main', {
extend: 'Ext.container.Container',
alias: 'widget.mainAppView',
autoScroll: true,
layout: 'border',
config: {
northItems: null,
westItems: null,
centerItems: null
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
applyNorthItems: function(northItems) {
this.northItems = northItems;
this.doLayout();
},
applyWestItems: function(westItems) {
this.westItems = westItems;
this.doLayout();
},
applyCenterItems: function(centerItems) {
this.centerItems = centerItems;
this.doLayout();
},
items: [
{
xtype: 'container',
itemId: 'appHeaderContainer',
region: 'north',
height: 60,
items: this.northItems
},
{
xtype: 'container',
itemId: 'appNavigationContainer',
region: 'west',
width: 85,
items: this.westItems
},
{
xtype: 'container',
itemId: 'appContentContainer',
region: 'center',
items: this.centerItems
}
]
});
Your code only adds references to objects, that's why nothing happens. In Ext.js you add items to containers by calling .add() on the parent. See here.
Basically you need to get the initial container for the region you want to add children and then call add() or remove() etc.
Items within containers that have been created are Mixed Collections, not just arrays of config objects.
Update
Here is a better way to do it (not tested though). First of all I would not use the config property to hold initial item configs. Initial configs can be on the class prototype (not necessary) or just added when the class is created (just document it in your code somehow). When adding child components to regions, they can always be created by their xtype. The .add() method takes a config object or a created component. Either way is fine.
Ext.define('APP.view.Main', {
extend: 'Ext.container.Container',
alias: 'widget.mainAppView',
layout: 'border',
northItems: null,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
itemId: 'appHeaderContainer',
region: 'north',
height: 60,
items: me.northItems
}
]
});
me.callParent(arguments);
},
applyNorthItems: function(northItems) {
this.down('#appHeaderContainer').add(northItems);
}
});
I did a little test regarding XSS attacks in ExtJS4. My HTML page looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-all-dev.js"></script>
<script type="text/javascript" src="testExtXSS.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
and testExtXSS.js looks like this:
Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(document.cookie)</script>Text field',
value: '<script>alert(document.cookie)</script>Text field'
}
]
});
formPanel.render('myDiv');
});
I expected the script tag in fieldLabel to be executed but it was not. When I looked at the HTML elements using Firebug and Chrome Developer Tools I could see the script element in the HTML tree.
Can anyone explain to me how ExtJS inserts this into the DOM and why it is not executed.
Thanks and best regards,
Ronald
This is because the ext template is injected using innerHTML, which is the fastest approach, but comes with a drawback that scripts don't get executed.
But you can just use update() method for Ext.dom.Element:
...
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(1)</script>Text field',
value: 'some val',
listeners: {
render: function(cmp) {
cmp.getEl().update(cmp.getEl().dom.innerHTML, true);
}
}
}
...
Screenshot: http://my.jetscreenshot.com/6795/20130813-pdeh-28kb
(Sorry for my english)
I'm new to Ext JS. I have a problem with height of Ext.tabPanel.
My Ext JS code:
HTML Code:
<div id="TabPanel"></div>
<script type="text/javascript">
Ext.onReady(function () {
var ex2 = new Ext.TabPanel({plain: true,renderTo: TabPanel,
items: [{title: 'Tab 1',
html: '<div>Hello</div>'}
{title: 'Tab 2',html:'<div">Hello</div>'}]});})
</script>
How can I extend my tab panel on maximum height?
Ext.create('Ext.tab.Panel', {
width: 500,
height: 700,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html : '<div>Hello from tab1</div>'
},
{
title: 'Tab 2',
html : '<div>Hello from tab2</div>'
}
],
renderTo : Ext.getBody()
});
You are rendering your tab into div, so add height=100% to the div attributes:
<div id="TabPanel" height="100%"></div>
Team,
How to align data in to view port. I have two panels and unable to achieve the desired effect. I am using extjs 3.4
I am facing the following problems:
Border are over lapping and it is coming very thick. Not able to leave space from top and left.
Not able to set height and it is expanding up to whole page.
Grid and panel width should be reduced I have only three columns
code.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<style type="text/css">
.add24 {
background-image: url(images/fiber_Cable.jpg) !important;
}
</style>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var baseParamsv = {
"pager":""
};
Ext.QuickTips.init();
var searchFormPanel = new Ext.FormPanel({
id: 'searchForm'
,region:'north'
,title:'Heading'
,layout:'table'
,bodyStyle:'padding:10px;'
,height:100
,width:200
,padding: '5 5 5 5'
,layoutConfig: {columns: 2}
,defaults: {ctCls:'padding3'}
});
searchFormPanel.add({xtype: 'label', text:'Search User:'});
searchFormPanel.add({xtype: 'label', text: ''});
searchFormPanel.add({xtype: 'textfield', id: 'search1', name: 'search1', value: '',enableKeyEvents: true});
searchFormPanel.add({xtype: 'button', id: 'go', cls: 'spacing3', text: 'Go!', handler:function() {} });
var gridColumnModel = new Ext.grid.ColumnModel([
{ header: "checked",sortable:true, menuDisabled:true, dataIndex:'checked',width:20,renderer:checkBoxRenderer},
{ header: "username",sortable:true, menuDisabled:true, dataIndex:'username',width:40,renderer:UserNameRenderer},
{ header: "emailid",sortable:true, menuDisabled:true, dataIndex:'emailid',width:30, renderer:emailidRenderer}
]);
var store = new Ext.data.JsonStore({
baseParams:baseParamsv,
fields: [
{name:'checked'},
{name:'username'},
{name:'emailid'}
],
root:'data',
totalProperty: 'total',
url:'data.json',
id:'offlineDataStoreId'
});
var dataGrid = new Ext.grid.GridPanel({
colModel:gridColumnModel
,region:'center'
,store:store
,stripeRows:true
,viewConfig: { autoFill:true, emptyText : 'No data found to display', forceFit: true, scrollOffset: 2 }
,layout:'fit'
,listeners: {
render: function(){
var initParams = Ext.apply({},baseParamsv);
Ext.apply(initParams, {
start:0,
limit:10
});
this.store.load({params:initParams});
}
}
});
function checkBoxRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return '<input type=checkbox name="check_box" value="'+record.get('emailid')+'">';
}
function UserNameRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return val;
}
function emailidRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return val;
}
var innerPanel = {
xtype: 'panel',
id: 'inner-panel',
layout: 'border',
region: 'center',
title:'Heading',
width:200,
bodyStyle:'padding:10px;',
padding: '5 5 5 5' ,
items :[dataGrid]
};
var viewPort = new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items:[searchFormPanel,innerPanel],
bodyStyle:'padding:10px;margin-top:10px',
renderTo:Ext.getBody()
});
viewPort.doLayout();
});
</script>
</body>
</html>
If you don't want to use whole the page, just use a panel instead of a Viewoprt:
var viewPort = new Ext.Panel({
layout: 'border',
width: 400,
height: 300,
title: 'Ext Layout Browser',
items:[searchFormPanel,innerPanel],
bodyStyle:'padding:10px;margin-top:10px',
renderTo:Ext.getBody()
});
Here you can see the result: http://jsfiddle.net/3CabN/6/
I wrote this Ext js application but I keep getting this error that says cannot call method 'create' in line 32. I took out some lines from the original code. Ext.onReady didnt work, the page would just be blank and the debuger didnt give any errors, but when i took out Ext.onReady() this error popped up
<html>
<head><title>Arrar Read</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:/Users/kevin/ext-3.4.0/ext-3.4.0 /resources/css/ext-all.css"/>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter /ext/ext-base-debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0ext-all.js"> </script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/ext-all- debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/pkgs/ext-core.js"></script>
<script type="text/javascript">
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
var nameRecord = Ext.data.Record.create([
{ name: 'name', mapping : 1},
{ name: 'state',mapping : 2}
]);
var arrayReader = new Ext.data.ArrayReader({},nameRecord); //creating a reader
var memoryProxy = new Ext.data.MemoryProxy(arrayD); //creating a memory proxy from the array
var store = new Ext.data.Store({ //create a store
reader : arrayReader,
proxy : memoryProxy
});
var colModel = new Ext.grid.ColumnModel([
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName'
},
{
header : 'State',
dataIndex : 'state'
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
});
var grid = new Ext.grid.GridPanel({ //create a gridpanel
title : 'First Grid',
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : colModel,
selModel : selModel
});
console.debug('everything executed');
</script>
</body>
</html>
I dont know if im missing some script files or not . can someone please help me
Here is an ExtJs 4 example: (working fiddle)
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'state', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Person',
data: arrayD
});
var grid = Ext.create('Ext.grid.GridPanel', { //create a gridpanel
title: 'First Grid',
renderTo: Ext.getBody(),
autoHeight: true,
width: 250,
store: store,
columns: [
{
header: 'Full Name',
sortable: true,
dataIndex: 'name'},
{
header: 'State',
dataIndex: 'state'
}
]
});
console.debug('everything executed');
You can download your own version and put it in a webserver or use one of these for js:
//for production
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
//for debug => isn't minified
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
//for development => isn't minified, logs errors and warnings to the console.
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-dev.js"></script>
for css use:
<link rel="stylesheet" type="text/css" href="htpp://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css"/>