I have the working code here:
var panel = Ext.create('Ext.tab.Panel', {
width: 500,
height: 300,
activeTab: 1, //sets active tab (2nd)
title: 'Specific Data',
floating: true, // make this panel an absolutely-positioned floating component
items: [{
title: 'Tab 1',
html: 'data data data'
}, {
title: 'Tab 2',
html: 'different data'
}]
});
I'm trying to add a toolbar (or buttons, not sure which I should use) to add a simple 'close window' command. Any help?
Here's an example of adding a close button to the panel header. You can use the tools config property. The Ext docs for this explain the many options.
There's also a fiddle saved here: http://jsfiddle.net/cfarmerga/JVMUG/1/
var panel = Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
activeTab: 1, //sets active tab (2nd)
title: 'Specific Data',
floating: true, // make this panel an absolutely-positioned floating component
items: [{
title: 'Tab 1',
html: 'data data data',
// to enable closing of a tab
closable: true
}, {
title: 'Tab 2',
html: 'different data'
}],
tools: [
{ type: 'close', handler: function () { this.up('panel').close() } }
]
});
Have you explored the docs at all? This is very common functionality that you should be able to find very easily in Sencha's API docs. See here for this particular issue: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-tbar
Related
I have a tab panel in Ext Js 4 and having several tabs. I have independent panels for each tabs and that is linked to the Tabs through xtype.
Now the problem is that all the api calls of each tab are going to do servers as soon as the tab panel loads which is not fulfilling my requirement. I want to reload everything for the tab again as soon as the respective tab will be activated.
Ext.define('Test.AbcTabPanel', {
extend: 'Ext.tab.Panel',
alias: ['widget.abcTabPanel'],
requires: [
'Test.Test1Panel',
'Test.Test2Panel'
],
width: '100%',
activeTab: 'test1',
initComponent: function () {
var me = this;
me.items = [{
title: 'Test 1',
itemId: 'test1',
flex: 1,
border: true,
items: {
xtype: 'test1Panel',
form: me
}
}, {
title: 'Test 2',
itemId: 'test2',
flex: 1,
tabConfig: {
tooltip: 'Test 2'
},
items: {
xtype: 'Test2Panel'
}
}
};
me.callParent();
}
});
You can use beforetabchange or tabchange events to trigger appropriate api calls of the tabs.
I want to implement a route for my basic view in ExtJS so that when display it (on a button click) the URL changes and when i want to return back to the initial view it works by displaying the right view.
Giving my view class :
Ext.define('Traccar.view.newDashboard', {
extend: 'Ext.Container',
alias: 'widget.newDashboard',
id: 'geoAfricaDashboard',
routes : {
'dashboard' : ''
},
layout: {
type: 'border',
align: 'stretch '
},
height: 620,
style: {
'backgroundColor': '#909090 !important'
},
items: [{
// xtype: 'panel' implied by default
title: 'Geo-Africa Administration',
region: 'west',
xtype: 'panel',
//margin: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
items: [{
xtype: 'treelist',
store: {
root: {
expanded: true,
children: [{
text: 'Options',
leaf: true,
iconCls: 'fas fa-address-book'
}, {
text: 'Administration',
expanded: true,
iconCls: 'far fa-id-badge',
children: [{
text: 'Configuration',
leaf: true,
iconCls: 'fas fa-address-card'
}, {
text: 'User',
leaf: true,
iconCls: 'fas fa-child'
}]
}]
}
},
renderTo: Ext.getBody()
}]
}, {
xtype: 'basic-panels'
// width: '100%'
}]
Which i render on button click like so :
var dash = Ext.create('widget.newDashboard', {
renderTo: Ext.getBody(),
hideMode: 'visibility'
});
dash.show();
How can i assign a route URI to that view in ExtJS (6.2.0)?
Thank you for the great help ?
PS : i tried with
routes : {
'dashboard' : ''
},
or else this.redirectTo("dashboard"); But neither works.
The route is similar to firing an event. The end result is a function is called. The hash is passed to the function based on how the route is setup. You can either call a different function for each hash or you can use the hash, or other parts of the URI to determine what to do.
Router Documentation This web page describes how the router is used. It is a very quick read.
A common way the examples (admin dashboard, coworkee app) do it by having the hash be the xtype for the panel (view) you want to display.
So your main panel extends 'Ext.navigation.View'. Then based on the hash you create a new instance of the view, add it to the main panel and make it the active item. You can also check to see if the xtype has already been added to the navigation view and just make it the active panel.
Fiddle showing use of router (this is not mine). Here is a fiddle that shows how to use a router. I would recommend reading the docs first. THe sencha docs are actually pretty good and you can learn how to use the Extjs library as it was intended and really speed up your development.
See fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/1u71
How to align "test" button to left on Extjs header?
When we delete the 'title' it renders as div tag with   content.
Please update solution because i have used "floating: true" which is moving the test button to left but complete header is in middle of page!
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
collapsible: true,
renderTo: Ext.getBody(),
header: {
titlePosition: 0,
title: "title",
items: [{
xtype: 'button',
text: 'test',
cls: 'lefty'
}]
}
});
});
}
});
Set titlePosition: 1 on your header. That will mean the button will go first, then the title, then the tools.
Added tbspacer block after the button xtype block to move button position to left. width is % value for responsive design.(You can keep title or remove)
header: {
items: [
{
xtype: 'button',
text: 'test ONE',
cls: 'lefty'
},
{
xtype:'tbspacer',
width: '80%' //change percentage to desired button position
},
{
xtype: 'button',
text: 'test TWO',
cls: 'lefty'
},
],
}
You can use config titlePosition to order items in header panel.
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);
}
}
}]
});
}
});
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'