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)
Related
I would like to put a red asterisk after a text . Is there a way to add directly css code in the js code? Like the parameter style for example but only for the asterisk.I'm working on Extjs 3.4
Here is the code.
{
xtype: 'label',
style: "font-size:11px;font-weight:bold;",
text: 'Note<span style="color:red">*</span> If any job applicant is failed,you can find it in the error log.',
// fieldLabel: 'Note<span style="color:red">*</span>: If any job applicant is failed,you can find it in the error log.',
}
,
If i use fieldLabel,the complete text printing only on left side.
and span is working for "fieldLable" but span is not working for "text".
Use html instead of text.
Ext.onReady(function() {
new Ext.FormPanel({
height: 100,
renderTo: Ext.getBody(),
items: [{
xtype: 'label',
style: "font-size:11px;font-weight:bold;",
html: 'Note<span style="color:red">*</span> If any job applicant is failed,you can find it in the error log.',
}]
});
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/3.4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/3.4.1.1/adapter/ext/ext-base-debug.js"></script><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/3.4.1.1/ext-all-debug.js"></script>
Add panel after label as:
{
xtype: 'label',
forId: 'myFieldId',
text: 'Note',
},{
xtype:'panel',
html:'<span style="color:red;">*</span> If any job applicant is failed,you can find it in the error log.'
}
Here is another solution. Using class and :before. fiddle
I am new in ExtJS and I am trying to display combobox inside panel but while adding below code inputbox is coming for Combo item.
here is the code
{
xtype: 'combobox',
fieldLabel: 'Rating',
name: 'rating',
store: [['1', '4']],
id: 'test',
forceSelection: false,
editable: true,
typeAhead: true,
selectOnFocus: true
},
Thanks for your answer but still its not working i am not sure where is the mistake.
Please help i have already wasted my one day for this
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ext-all.css" />
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ext-base.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ext-all.js"></script>
<title>Insert title here</title>
<head>
<title>Search Box Example 1</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- CSS styles for standard search box -->
</head>
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing#extjs.com
* http://www.extjs.com/license
*/
// some data used in the examples
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing#extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
var fs = new Ext.FormPanel({
frame: true,
title:'XML Form',
labelAlign: 'right',
labelWidth: 85,
width:340,
waitMsgTarget: true,
// configure how to read the XML Data
// reusable eror reader class defined at the end of this file
items: [
new Ext.form.FieldSet({
title: 'Contact Information',
autoHeight: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
width:190
}, {
fieldLabel: 'Last Name',
name: 'last',
width:190
}, {
fieldLabel: 'Company',
name: 'company',
width:190
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:190
},
new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'state',
store: ['1', '4'],
valueField:'abbr',
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:190
}),
new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 'dob',
width:190,
allowBlank:false
})
]
})
]
});
// simple button add
// explicit add
fs.render('form-ct');
fs.on({
actioncomplete: function(form, action){
if(action.type == 'load'){
submit.enable();
}
}
});
});
</script>
<div id="form-ct"></div>
</body>
</html>
You're store array of data is double nested, instead it should be ['1','4']. So only the one option was showing. I made a fiddle to demonstrate the combobox working.
I have a simple script and use extjs 4.1.1:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css">
</style>
<script type="text/javascript" src="js/ext-all.js"></script>
<script>
Ext.onReady(function() {
Ext.create('Ext.Panel', {
width: 200,
height: 200,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
defaults: {
frame: true,
width: 200,
height: 200
},
items: [test()]
})
})
function test() {
return Ext.createWidget('tabpanel', {
title: null,
rowspan: 2,
width: 100,
height: 200,
activeTab: 0,
items: [{
name: 'test',
title: 'test'
}]
})
}
</script>
</head>
<body></body>
</html>
This script crash IE9. Why ?
createWidget is deprecated in Ext4. Use Ext.create or Ext.widget instead.
return Ext.widget('tabpanel', {
Here is fiddle for it : http://jsfiddle.net/webfriend13/n2qyL/
return Ext.widget('tabpanel', {
As A1rPun pointed out, createWidget is deprecated in Ext4. Use Ext.create or Ext.widget instead.
I downloaded Ext JS 4.0.2a and I'm trying to do the Ext JS tutorial. I go the "essentials" example working, so I'm pretty sure I'm set up right. I'm trying to do the grid example here ...
http://www.sencha.com/learn/legacy/Tutorial:Getting_Productive
... but I can't get the grid to display.
My ExtStart.html looks like this:
<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
<div id="grid-example"></div>
</body>
</html>
and my ExtStart.js is exactly like on the tutorial site like this:
Ext.onReady(function() {
// sample static data for the store
var myData = [['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
// create the data store
var ds = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// manually load local data
ds.loadData(myData);
// create the colum Manager
var colModel = new Ext.grid.ColumnModel([
{header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: ds,
colModel: colModel,
height: 300,
width: 600,
title: 'My First Grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
});
Any ideas what I could be doing wrong? Sadly stumped. :(
rob
You are using ExtJS4 but are referring to a legacy documentation.
There have been quite a few changes to the components and how they need to be wired together between the version that document was written for and version 4 that you are using.
Here is the array grid (and other) example(s) for ExtJS 4. -
HTML
Javascript code
For example, you are using Ext.grid.GridPanel. This is no longer valid. (Use Ext.grid.Panel instead)
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