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>
Related
I have a tabpanel consisting of 3 tabs. 3rd tab shows external vendor contents. I also have a text box and enter button. based on value entered in text box, I need to refresh contents of 3rd tab.
{//second tab end, third tab starts
id: 'test',
title: "Test3",
layout: "fit",
html: iframebody,
listeners: {
'render': function(){
var e = document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = msaJs;
e.appendChild(s);
},
'show': function(panel){
//var tickerValue1 = Ext.getCmp('tabpanel').getActiveTab().html;
theurl = 'http://example.com?ticker=' +ticker+';
iframebody = '<iframe width=100% height=100% src='+theurl+'></iframe>';
var tab1= Ext.getCmp('tabpanel').setActiveTab(2);
alert(Ext.getCmp('tabpanel').getActiveTab().html);
Ext.getCmp('tabpanel').getActiveTab().html=iframebody;
alert(Ext.getCmp('tabpanel').getActiveTab().html);
Ext.getCmp('tabpanel').getActiveTab().getUpdater().refresh();
},//show listener ended
Now, when I press enter, tab doesnt get refreshed with new ticker eventhough the alert message shows updated html for the tab. Any help would be highly appreciated.
If you are using same origin in iframe then you can use directly like below :-
iframe.contentWindow.location.reload();
For ExtJS 3.x, you need to use iframe.src for refresh after getting iframe dom. If you have provided some id to iframe then you can access like below
Ext.get('iframe')//example id:'iframe'
In this FIDDLE, I have created a demo using TabPanel and KeyNav. I hope this will help you or guide you to achieve your requirement.
Code Snippet ExtJS 3.X
Ext.onReady(function () {
var tabs = new Ext.TabPanel({
height: window.innerHeight,
fullscreen: true,
renderTo: document.body,
activeTab:0,
items: [{
title: 'Tab 1',
html: 'tab1'
}, {
title: 'Tab 2',
html: 'tab2'
}, {
title: 'Tab 3',
itemId: 'tab3',
padding: '20 20 0 20',
items: [new Ext.BoxComponent({
id: 'iframe',
height: '100%',
width: '100%',
autoEl: {
tag: 'iframe',
src: 'https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=eiffel+tower&aq=&sll=41.228249,-80.661621&sspn=11.149099,23.269043&ie=UTF8&hq=&hnear=Eiffel+Tower,+5+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&t=h&ll=48.858186,2.294512&spn=0.002471,0.00456&z=17&output=embed',
style: 'width: 100%; border: none'
}
})],
bbar: [{
text: 'Refresh UxIframe',
id: 'refresh',
handler: function () {
Ext.get('iframe').dom.src += '';
}
}],
listeners: {
afterrender: function (panel) {
panel.keynav = new Ext.KeyNav(Ext.getBody(), {
scope: panel,
enter: function () {
Ext.getCmp('refresh').handler()
}
});
}
}
}]
});
});
Here In this FIDDLE I have created same demo with 6.5 version. So for new version it will also help you/other folks. In newer versions here component uxiframe and uxiframe have load() method. So we can use this and refresh the iframe.
Code Snippet ExtJS 6.X
Ext.application({
name: 'Fiddle',
requires: ['Ext.ux.IFrame'],
launch: function () {
Ext.create('Ext.tab.Panel', {
height: window.innerHeight,
fullscreen: true,
renderTo: document.body,
activeTab:0,
items: [{
title: 'Tab 1',
html: 'Tab 1'
}, {
title: 'Tab 2',
html: 'Tab 2'
}, {
title: 'Tab 3',
itemId: 'tab3',
padding: '20 20 0 20',
items: {
xtype: 'uxiframe',
height: '100%',
width: '100%',
src: 'https://docs.sencha.com/extjs/6.5.2/index.html'
},
bbar: [{
text: 'Refresh UxIframe',
itemId: 'refresh',
handler: function () {
var uxiframe = this.up('#tab3').down('uxiframe');
uxiframe.load(uxiframe.src);
}
}],
listeners: {
afterrender: function (panel) {
panel.keynav = Ext.create('Ext.util.KeyNav', {
target: Ext.getBody(),
scope: panel,
enter: function () {
this.down('#refresh').fireHandler()
}
});
panel.focus(true);
}
}
}]
});
}
});
It is not showing any errors nor rendering any UI. I want to add number field dynamically.
var numberField= Ext.create('Ext.form.Panel', {
cls: 'questionRows',
hidden: show,
itemId: item.HealthNeedsDetailsGuid,
id: item.HealthNeedsDetailsGuid,
items: [{
xtype: 'field',
html: item_index + ') ' + item.HealthNeedsQuestion
}, {
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
clearIcon: false,
width: 400,
value: 99,
maxValue: 99,
minValue: 0
}]
});
In sencha touch, Ext.form.Panel is a scrollable item, so it will not be shown untill you specify a height or make scrollable property as null.
To show the number field on the entire screen, you can give fullscreen:true property in Ext.form.Panel. Like this:
Ext.application({
launch : function() {
var numberField= Ext.create('Ext.form.Panel', {
cls: 'questionRows',
fullscreen:true,
items: [{
xtype: 'field',
html: 'Field Html here'
}, {
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
clearIcon: false,
width: 400,
value: 99,
maxValue: 99,
minValue: 0
}]
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css">
<script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all-debug.js"></script>
OR
To add it to an existing component call add() from existing component and give numberField as its parameter mainPanel.add(numberField);.
In numberField either give height property or scrollable:null property to the Ext.form.Panel. Like this:
Ext.application({
launch : function() {
var numberField= Ext.create('Ext.form.Panel', {
cls: 'questionRows',
height:344,
items: [{
xtype: 'field',
html: 'Field Html here'
}, {
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
clearIcon: false,
width: 400,
value: 99,
maxValue: 99,
minValue: 0
}]
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
items: {
html: 'Main Panel'
}
});
//now we add the numberField inside the main panel
mainPanel.add(numberField);
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css">
<script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all-debug.js">
</script>
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'm teaching myself extjs and I am working with tabs. I can't figure out how to resize the whole container, not just the tabs, but where the data for each tab will show...I tried width: 400 but that made no change
Here's my code so far:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.require('Ext.container.Viewport');
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'tabpanel',
width: 400,
activeTab: 0, // index or id
items:[{
title: 'Tab 1',
html: 'This is tab 1 content.'
},{
title: 'Tab 2',
html: 'This is tab 2 content.'
},{
title: 'Tab 3',
html: 'This is tab 3 content.'
}]
}]//end of viewport
});
}
});
Can someone give me a snippet for this? Thanks.
You use layout : 'fit' so the tabpanel can't get width property try layout : 'form'
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