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.
Related
I'm using extjs and I want to customize the first row texts in a table to bold and increase the font size. I didnt find any unique property for rows. Is there any way to customize?
Solution:
You may try to use viewConfig config option of Ext.grid.Panel and Ext.tree.Panel. Below are working examples.
Working example (Grid Panel):
Data: customgrid.json
[
{Id : '1', Name: 'Name 1'},
{Id : '2', Name: 'Name 2'},
{Id : '3', Name: 'Name 3'},
{Id : '4', Name: 'Name 4'},
{Id : '5', Name: 'Name 5'},
{Id : '6', Name: 'Name 6'}
]
CSS: customgrid.css
.grid-firstrow .x-grid-cell {
font-weight: bold;
font-size: 18;
}
Grid: customgrid.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customgrid.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('testmodel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Id', type: 'string'},
{name: 'Name', type: 'string'}
]
});
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
loadTestData: function() {
var me = this;
me.store.load();
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.Store({
autoLoad: false,
proxy: {
url: 'customgrid.json',
type: 'ajax',
reader: {type: 'json'},
writer: {type: 'json'}
},
model: 'testmodel'
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Id', sortable : true, width : 50, dataIndex : 'Id'},
{header : 'Name', sortable : true, width : 100, dataIndex : 'Name'}
],
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'grid-firstrow';
} else {
css = '';
}
return css;
}
}
});
me.add(me.grid);
me.loadTestData();
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Working example (Tree Panel):
CSS: customtree.css
.tree-node .x-grid-cell-inner {
font-weight: bold;
font-size: 18px;
}
Tree: customtree.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customtree.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.TreeStore({
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
model: 'usersw_model'
});
me.tree = new Ext.tree.Panel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,
width: '100%',
flex: 1,
border: false,
rootVisible: false,
allowChildren: true,
store: me.store,
root: {
expanded: true,
text: 'Ext JS',
draggable: false,
id: 'root'
},
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'tree-node';
} else {
css = '';
}
return css;
}
}
});
me.add(me.tree);
var rootnode = me.tree.getRootNode();
var parent1node = rootnode.appendChild({
text: 'Parent1',
leaf: false
});
parent1node.appendChild({
text: 'Child1',
leaf: true
});
parent1node.appendChild({
text: 'Child2',
leaf: true
});
parent1node.appendChild({
text: 'Child3',
leaf: true
});
var parent2node = rootnode.appendChild({
text: 'Parent2',
leaf: false
});
parent2node.appendChild({
text: 'Child1',
leaf: true
});
parent2node.appendChild({
text: 'Child2',
leaf: true
});
parent2node.appendChild({
text: 'Child3',
leaf: true
});
var parent3node = rootnode.appendChild({
text: 'Parent3',
leaf: false
});
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
You'd use CSS for that:
tr:first-child {
font-weight: bold;
font-size: x-large;
}
or output the first row cells as th instead of td and style it this way:
th {
font-weight: bold;
font-size: x-large;
}
When a number field (or date field) is added to a form panel, the width of the number field is not adjusted to match the panel width. Here is a simple example showing that the text field is adjusted to fit the available space, but the number field is not. See this jsFiddle.
It looks like a bug in the Extjs picker layout. Does anyone have a work-around?
<head>
<link rel="stylesheet" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/resources/css/ext-all.css">
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.namespace('E2cc.settings');
E2cc.settings.getString = function(s) { return s; }
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
width: 200,
items: [{
xtype: 'textfield',
fieldLabel: 'Text',
border: 3,
style: {
borderColor: 'black',
borderStyle: 'solid',
}
}, {
xtype: 'numberfield',
fieldLabel: 'Number',
border: 3,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
name: 'date'
}],
renderTo: Ext.getBody()
});
});
</script>
</body>
I couldn't explain why it is rendered differently than a normal textefield, but a good pratice in extjs is to specify the width of your elements and not let extjs layout compute it for you. Add anchor: '100%' to your numberfield and it should be ok.
I think that if you want to defined some same values to all the fields you must define it in the dedatults property.
see your example modified
Ext.create('Ext.form.Panel', {
width: 200,
defaults : {
width: 200,
labelWidth : 70
},
items: [{
xtype: 'textfield',
fieldLabel: 'Text',
border: 3,
style: {
borderColor: 'black',
borderStyle: 'solid',
}
}, {
xtype: 'numberfield',
fieldLabel: 'Number',
border: 3,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
name: 'date'
}],
renderTo: Ext.getBody()
});
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)
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/
Below is the code corresponding to the screenshot that I added. If you refer to the data fields at the beginning of the code, you will see that the Labels on the Y-axis shows wrong.
and importing these libs, which is the same import in the sample chars that I found in this official chart preview link (the zip file is at the end of the article, and the bar chart in it is also wrong!!!):
<link rel="stylesheet" type="text/css" href="../../resources/css/ext.css" />
<script type="text/javascript" src="../../ext-core.js"></script>
<script type="text/javascript" src="../../ext-chart.js"></script>
<script type="text/javascript" src="Bar3.js"></script>
Then I imported the following libs (the same libs that they import in this sample):
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="Bar3.js"></script>
I got the correct result.
Ext.onReady(function () {
var chart;
var store1 = new Ext.data.JsonStore({
fields:['name', 'data1'],
data: [
{name:'Jan', data1: 2000},{name:'Feb', data1: 1800},
{name:'Mar', data1: 1500},{name:'Apr', data1: 1000}
]});
chart = new Ext.chart.Chart({
renderTo: Ext.get('graphDiv'),
width: 600,
height: 400,
animate: true,
shadow: true,
store: store1,
autoScroll: true,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits'
}, {
type: 'Category',
position: 'left',
fields: ['name'],
reverse: true,
title: 'Month of the Year'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
},
xField: 'name',
yField: 'data1'
}]
});
});
A known bug of extjs 4.0.0! Just an upgrade to 4.1.x will solve the problem.