I want to remove the active tab from sencha ext.
Assume that am into controller file of the view.
Note: I have used remove() as well as destroy().
destroy() function works fine but tab header is not getting removed.
coseResultTab() {
this.getView().destroy();
}
Before Clicking on Cancel button:
After Clicking on Cancel button
You should destroy the active tab in your tabpanel, eg:
Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
destroyTab: function() {
this.getView().down('tabpanel').getActiveTab().destroy();
}
});
View
Ext.create('Ext.Panel', {
width: 400,
height: 400,
renderTo: document.body,
title: 'Panel',
id: 'myPanel',
controller: 'myview',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Foo',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}, {
title: 'Bar',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}]
}]
});
Fiddle
I enhanced the answer from Matheus to meet the requirement a bit more:
not destroying the entire tab, but only the content
setting the button handler without the use of getController (please try not to use this, as it is considered bad practice by Sencha)
removed the outer panel which only added a title
Fiddle
You can also remove it using the tab bar using closeTab() which pretty much just runs a tabs.remove(tabRefOrObj);
https://docs.sencha.com/extjs/6.5.3/modern/Ext.tab.Bar.html#method-closeTab
Related
Using ExtJS7.x with the modern toolkit.
For various reasons, I'm trying to data-bind the titles of panels in a TabPanel, this seems to work fine, if not for a single caveat. The binding only applies as soon as the tab becomes active. Trawling around the official forums I found that this was previously marked as a bug in ExtJS6 years ago, and was reported as being fixed. And yet I still run into similar behavior in 7.
Basic overview of what I'm trying to do:
{
xtype: 'tabpanel',
defaults: {
iconAlign: 'left',
},
items: [
{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: '{anonymous.overview.title}'
}
},{
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
bind: {
title: 'Test'
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}
]
}
Available here in fiddle format.
Binding a hard-coded string here for testing purposes. It'll be a more variable string eventually, but I was trying to figure out if it was an issue with the timing of the data being available in the ViewModel since the strings get loaded from an external source (doesn't seem to be)
The first tab correctly has it's title overwritten by the data in the binding, as it is automatically activated. The second one however, just has an icon and no title, until it is clicked.
I've tried to sneakily force all panels to activate in a beforeShow event handler, but this doesn't trigger the binding. Which leads to the question. Does anyone have a reasonable workaround or fix for this issue? I've tried to reverse-engineer the override provided for ExtJS6, but haven't had any luck making it work.
Or am I just being a dingus and am I doing something wrong here?
Try to use tab config property to bind the title, something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
viewModel: {
data: {
someTabTitle: 'Some Tab Title'
}
},
defaults: {
iconAlign: 'left',
},
items: [{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: 'Test 1'
}
}, {
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
tab: {
bind: {
title: '{someTabTitle}'
}
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}]
});
}
});
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.
I can add my own button to the built-in tools "Help" etc on the panel header:
tools:[
{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
// show help here
}
}],
header: {
layout: {
type: 'hbox',
align: 'right'
},
items: [{
xtype: 'button',
text: 'test'
}]
} ...
but button 'test' appears far left before the panel title ... header layout hbox right obviously not the way to do it :-). Button 'test' just a placeholder - I want to eventually add a menu button - so another css tool would not work - is there a simple way of doing this or do I need to use dom element positiong etc? tia.
If you're using ExtJS 4.2, you can use the titlePosition property to accomplish this. See http://jsfiddle.net/U8MSd/
tools: [{
type: 'help',
tooltip: 'Get Help',
handler: function (event, toolEl, panel) {
// show help here
}
}],
header: {
titlePosition: 0,
items: [{
xtype: 'button',
text: 'test'
}]
}
I have a little problem here with Sencha Touch 2:
My App has 2 views/lists: news and events. Both have detail views.
On the news list Iam showing an filter and sort button and on the events list Iam want to show only the filter button.
When I click on an item, the nav controller automatically adds an back button.
What I do atm is:
- when the user clicks an item in the list: hide all buttons
- when the user clicks the back button: show all buttons
And thats the problem... I cannot see if it was the back button on the news detail view or the events detail view.
In my controller I have:
"mainnav[id=mainNav]": {
back: 'showButtons',
},
when I try:
"panel[id=newsDetail]": {
back: 'showButtons',
},
the event gets not triggered.
So how can I know is it was the news or events back button?
Thanks!
Edit: Its not easy to explain... here is some more information:
The "mainNav" is a navigation view and the back button gets added to its toolbar.
Ext.define('MyApp.view.MainNav', {
extend: 'Ext.navigation.View',
alias: 'widget.mainnav',
config: {
id: 'mainNav',
maxWidth: '350px',
items: [
{
xtype: 'tabpanel',
layout : {
type : 'card'
},
...
items: [
{
xtype: 'list',
title: 'News',
id: 'newsList',
store: 'newsStore',
grouped: true,
onItemDisclosure: true,
...
{
xtype: 'list',
title: 'Events',
iconCls: 'team',
id: 'eventList',
store: 'eventStore',
onItemDisclosure: true,
...
tabBar: {
docked: 'bottom'
}
...
and the navigation bar with its buttons:
navigationBar: {
minWidth: '',
width: '',
id: 'navBar',
layout: {
align: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
id: 'settingsButton',
align: 'left',
iconCls: 'settings6',
iconMask: true
},
{
xtype: 'button',
id: 'filterbutton',
align: 'right',
iconCls: 'list',
iconMask: true
}
]
},
What iam trying to do now:
"mainnav[id=mainNav]": {
back: 'showButtons',
},
get triggered when the user hits the back button (doesnt matter if he id in newsDetail or eventsDetail) but I want to know which view the user sees after he taps the back button.
If he sees the news list then I want to show both buttons (filter and seetings) but is he sees the events list I only want to show one button.
I need something like:
showButtons: function(component, options) {
if(Ext.getCmp(backButton).down().getId() == 'newsList'){
//show 2 buttons
}else{
//show one button
}
}
Sorry if the answer is confusing... I dont know how I could explain it better.
Anyway, I would appreciate any help/idea!
A panel doesn't have a back event. So it will never get fired.
mainnav is a custom xtype you defined right? Else that selector is wrong as well.
Got a solution:
var activePanel = Ext.getCmp('MainTabPanel').getActiveItem();
var activeItem = activePanel.getItemId();
if(activeItem == 'newsList'){
this.filterNewsStore();
Ext.getCmp('showSettingsButton').show();
Ext.getCmp('filterButton').show();
}
if(activeItem == 'eventList'){
this.filterEventsStore();
Ext.getCmp('showSettingsButton').hide();
Ext.getCmp('filterButton').show();
}
I call this code when the back button gets fired.
Iam design menu in ExtJs using Ext.Toolbar,
var ToolBar = new Ext.Toolbar({
id: 'ToolBar',
renderTo: 'divtoolbar',
items: [
{ xtype: 'spacer', width: 50 },
{ xtype: 'tbbutton', text: 'Home', handler: function () { window.location = '#Url.Content("~/Home/Home/")'; } },
{ xtype: 'tbseparator' },
{ xtype: 'tbbutton', text: 'Calendar', handler: function () { window.location = '#Url.Content("~/calendar/eventCalendar/")'; } },
{ xtype: 'tbseparator' },
{ xtype: 'tbbutton', text: 'Locations' }
]
............
how to change or highlite clicked tbbutton
thanks in advance
You need to make use of the addClass method available with the button. Create a CSS style for the visited button and call addClass method in handler. Here is an example:
handler: function(b,e) {
this.addClass('className');
}
But in your case, I see that you are navigating away from the page. In such cases you will have to store the visited buttons in a cookie or use HTML5 storage.
I wonder why you are making a multipage ExtJS application and not following the single page approach?