I am new to ExtJS, I want to render a panel with content of 'div', years ago I tried ExtJS, and I rembmer I can use:
renderTo:'divID'
But now I am using Ext4,seems not working:
<script type="text/javascript">
Ext.onReady(function() {
var panel = new Ext.Panel({
width:'100%',
height:'90%',
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Header',
region: 'north',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
renderTo:'header-div'
},{
title: 'Footer',
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0'
},{
title: 'Navigation',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250
},{
title: 'Main Content',
collapsible: false,
region:'center',
margins: '5 0 0 0',
renderTo: 'content-div'
}]
});
});
</script>
</head>
<body>
<div id="header-div">Header Content</div>
<div id="content-div"></div>
</body>
I don't how to feed each panel with jsp stuff.
Anyone can help me? Thanks.
Your header-panel definition should look like:
....
{
title: 'Header',
region: 'north',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
html: Ext.get("header-div").getHTML()
}
...
This will put the html-content of the div with the id header-div into the panel. To prevent doubling your content, you should also remove the header-div after the whole creation of the Ext.Panel-stuff:
Ext.get("header-div").remove();
Related
Im attempting to add this code to my website, built with sandvox, via the insert 'Raw HTML' function. Once I add the code, I simply see a blank box on my site. Im hoping that there is some way I can get a bit of help. Thank you for any help.
<html>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Prevalence of Performance Enhancing Drug Use By Sport'
},
subtitle: {
text: 'Source: getfast'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Prevalence (%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>'
},
series: [{
name: 'Prevalence',
data: [
['WADA All Pros', 2],
['Child Athletes', 4],
['HS Football', 6.3],
['HS Seniors All Sports', 6.6],
['Amatuer Weight-lifters', 8.2],
['American Football', 9],
['Baseball', 9.4],
['Research Estimate All Pros', 10.2],
['Top 100 Sprinters (running)', 40],
['Professional Bodybuilders', 54],
['Tour de France Winners', 79],
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: -15,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
</hmtl>
place jQuery script before highcharts js, and don't forget close your <script> tag
<html>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Prevalence of Performance Enhancing Drug Use By Sport'
},
subtitle: {
text: 'Source: getfast'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Prevalence (%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>'
},
series: [{
name: 'Prevalence',
data: [
['WADA All Pros', 2],
['Child Athletes', 4],
['HS Football', 6.3],
['HS Seniors All Sports', 6.6],
['Amatuer Weight-lifters', 8.2],
['American Football', 9],
['Baseball', 9.4],
['Research Estimate All Pros', 10.2],
['Top 100 Sprinters (running)', 40],
['Professional Bodybuilders', 54],
['Tour de France Winners', 79],
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: -15,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
</script>
</hmtl>
You are missing a closing </script> tag at the end of your Highcharts script. Adding that closing tag and ensuring that jQuery is loaded before loading the Highcharts script should work great.
So it should be:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
<!-- your Highcharts script here... -->
</script>
</head>
<body>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>
A working example can be seen here.
I am working in extjs4. i have activation view form as-
For entering key i have taken item as-
{
margin:'5 5 5 5',
xtype: 'fieldcontainer',
fieldLabel: 'Enter key',
layout: 'hbox',
combineErrors: true,
defaults: {
hideLabel: true
},
items: [{xtype: 'textfield', fieldLabel: 'a', name: 'a', width: 80, allowBlank:false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'b', name: 'b', width: 80, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'c', name: 'c', width: 80, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'd', name: 'd', width: 80, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'e', name: 'e', width: 80, allowBlank: false, margins: '0 5 0 0'}]},
I want to restrict number of characters in each block to 5. And after entering 5 char in first block,i want to set focus to next block automatically. So how to implement this in extjs4
You can add key listeners. You will have configure your textfield something like this:
{
xtype: 'textfield',
//...other props...
name: 'a',
maxLength: 5,
enableKeyEvents: true,
enforceMaxLength: true,
listeners: {
keyup: function(f, e) {
if (f.getValue().length == 5)
{
var nextField = f.next();
if (nextField && Ext.isFunction(nextField.focus)) {
nextField.focus();
}
}
}
}
}
You could even enableKeyEvents, maxLength, enforceMaxLength, and the listeners to your defaults, if they are the same for all the fields.
can anybody tell how to change color of bar in column chart .I have tried with style but its not working
style : {
fill : ['red', 'green'],
width : 30
},
Thanks
Use color renderer function for series onReady method like this on custom example;
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
style: 'background:#fff',
shadow: false,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'bar',
axis: 'bottom',
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
},
xField: 'name',
yField: ['data1'],
//color renderer
renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color
});
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Renderer',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
items: chart
});
});
Good Luck!
So I'm using ExtJS 4.1. I have a viewport that contains two items. They are stacked correctly but I want to put some space between them. Margins don't seem to work.
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.onReady(function() {
Ext.QuickTips.init();
window.formPanel = Ext.widget({
bodyPadding: '5 5 0',
collapsible: false,
defaultType: 'textfield',
frame: true,
id: 'formPanel',
layout: 'form',
renderTo: '',
title: 'Spring Demo 3 (Lookup Transfer Request)',
url: contextPath + '/users/ajax',
width: 450,
xtype: 'form',
buttons: [{
text: 'Check Status',
scope: this,
handler: function() {
formPanel.getForm().submit({
success: function(res, req) {
}
});
}
}],
fieldDefaults: {
msgTarget: 'side',
labelWidth: 105
},
items: [{
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'Username',
name: 'username',
value: ''
}, {
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'TXID',
name: 'txid',
value: ''
}]
});
window.resultsPanel = Ext.widget({
items: [{
id: 'labMessage',
margin: '0 0 0 10',
text: 'Waiting....',
xtype: 'label'
}],
title: 'Results',
xtype: 'panel'
});
window.viewPort = Ext.widget({
items: [formPanel, resultsPanel],
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
margins: '10 10 10 10',
padding: '10 10 10 10',
renderTo: 'container',
xtype: 'viewport'
});
});
The Ext.layout.container.VBox layout has the padding and defaultMargins configs that will apply the respective styles to child components. I have no idea why the naming is inconsistent, but that's what the docs say.
Looking at your sample code, it looks like you're applying your margins to the wrong components. If you want spacing between your panels, put the margin/padding settings on the panels themselves instead of on their container.
window.resultsPanel = Ext.widget({
xtype: "panel",
title: "Results",
margin: "10 0 0 0", // Same as CSS ordering (top, right, bottom, left)
items: [{
xtype: "label",
id: "labMessage",
margin: "0 0 0 10",
text: "Waiting..."
}]
});
This My Code, but only the tree panel is displayed(please help me):
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name']
});
var tree = Ext.create('Ext.tree.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300, region: 'east',
columns: [
{dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'}
],
store: {
model: 'User',
root: {
name: 'Rumah',
children: [
{name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]},
{name: 'Gavin Ripharbowo', children: []}
]
}
},
viewConfig: {
plugins: {
ddGroup: 'user-dd',
ptype: 'treeviewdragdrop'
}
}
});
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: 'Page Title',
autoHeight: true,
border: false, width:100, height:100,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: false,
html: '<h1 class="x-panel-header">Page Title</h1>',
title: 'Navigation',
width: 150, height:100, items:'tree'
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: [{
title: 'First Tab',
html: 'For A While',
},{ title: 'Second Tab', html : 'The Second Tab Content' }]
}] }) })
This is why:
renderTo: Ext.getBody(),
Just get rid of this line in the tree definition, and add it normally to the viewport. For example:
{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: tree
}
(You might have to add the renderTo to the viewport definition)
by this, i can insert treepanel to viewport
<html>
<head>
<title> <Getting Started Example </title>
<link rel ="stylesheet" type="text/css"
href="resources/css/ext-all.css" />
<script src="extjs/adapter/ext/ext-base.js"> </script>
<script src="ext-all-debug.js"> </script>
<script src="/src/tree/Panel.js"> </script>
<script src="/src/windows/Window.js"> </script>
<script src="/src/panel/Panel.js"> </script>
<script type="text/javascript" src="reorder.js"></script>
<script>
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name']
});
var tpanel = new Ext.create('Ext.tree.Panel', {
height: 100,
renderTo: Ext.getBody(),
width: 200,
region: 'west',
columns: [
{dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'}
],
store: {
model: 'User',
root: {
name: 'Rumah',
children: [
{name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]},
{name: 'Gavin Ripharbowo', children: []}
]
}
},
viewConfig: {
plugins: {
ddGroup: 'user-dd',
ptype: 'treeviewdragdrop'
}
}
});
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
width:100,
height:100,
margins: '0 0 5 0'
}, tpanel, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: [{
title: 'First Tab',
html: 'The first tab\'s content. Others may be added dynamically',
},{
title: 'Second Tab',
html : 'Tab berfungsi untuk sdfkjdf'
}]
}]
});
})
</script>
</head>
<body>
</body>