I'm trying to achieve arrow key navigation on the tabs in ExtJs 4.2.2, right now i have one of the tabs selected, i want to use keyboard arrows to navigate to other tabs.
here is what i have done. but its not working... i'm getting error 'next is not defined'
what am i doing wrong here.
var keyNav = new Ext.util.KeyMap({
binding: [{
key: Ext.EventObject.UP,
fn: function(){ this.next().focus() }
},{
key: Ext.EventObject.DOWN,
fn: function(){ this.prev().focus() }
}, {
key: Ext.EventObject.LEFT,
fn: function(){ this.prev().focus() }
}, {
key: Ext.EventObject.RIGHT,
fn: function(){ this.next().focus() }
}
],
scope: this
});
It seems that the this in the handler still does not refer to the tab. Try to put a debugger in it and see. It might be worth tying keynav through target property with your tab's.
I am trying to navigate to other pages from my SAP UI-5 App. (HTML's < a href /> )
I used sap.m.Link on my Toolbar to navigate to other pages , and it worked perfectly ;
new sap.m.Link(this.createId("Foo"),{
text: "Foo",
type: "Transparent",
href: myLink
}).addStyleClass("headerLink"),
However I am using VBox in a customTile where I have a text. I want to implement same functionality to my VBox aswell . How can I do it ?
Please note I can't use window.location.replace("http://mywebsite.com/nextPage.html"); because It disallows me to return back to last page I visited.
My customTile looks like this
var iconBox1 = new sap.m.VBox({
items: [
new sap.m.HBox({
items: [
new sap.m.Text({
text: "Foo" // I want to navigate after clicking on this Text or this Box generelly
}).addStyleClass("tileTextDashboard")
]
}).addStyleClass("textNumberConatainer")
]
});
var customTile1 = new sap.m.CustomTile(this.createId("tile1"), {
content: [
iconBox1
],
press: [oController.someFunction, oController]
}).addStyleClass("customTileDashboard");
EDIT : Problem solved !
In case someone has same problem, I am adding my solution :
var myLink= "https://foo.com";
var myLinkO= new sap.m.Link({
text: "text foo",
type: "Transparent",
href: myLink
}).addStyleClass("classFoo");
and now you only need to replace myLinkO in your items array in your VBox
I'm trying to build a custom plugin based on a stock TinyMCE 4 image plugin. It'll have two drop-downs. When user clicks the first one - I'd like to hide the second one (css style display: none;).
Here is a bit of code that adds drop-downs in the initializer:
targetTest1ListCtrl = {
name: 'test1',
type: 'listbox',
label: 'Test1',
values: buildValues('target_list', 'target', InputDataArray),
onClick: function(e) {
//code I'm looking for
},
};
generalFormItems.push(targetTest1ListCtrl);
targetTest2ListCtrl = {
name: 'test2',
type: 'listbox',
label: 'Test2',
values: buildValues('target_list', 'target', InputDataArray2)
};
generalFormItems.push(targetTest2ListCtrl);
Both drop-downs generate just fine, if I put alert in my onclick event - it's triggered perfectly fine, but in no way I can find how to access my test2 through the TinyMCE and change styling on it.
Found an answer:
sampleElement = win.find('#test2')[0];
sampleElement.hide();
Where #test2 is #+name of your Ctrl.
EDIT
I have a viewport that extends a TabPanel. In it, I set one of the tabBar buttons to load another TabPanel called subTabPanel. myApp.views.viewport.setActiveItem(index, options) works just fine. But myApp.views.subTabPanel.setActiveItem(index, options) only loads the appropriate panel card for a split second before it vanishes.
Strangely, it works just fine to make this call from within the subTabPanel's list item:
this.ownerCt.setActiveItem(index, options)
However, I want to avoid this, as I want such actions to live inside controllers so as to adhere to MVC.
Any thoughts on why the card disappears when called from the controller, but not when called from the containing subTabPanel?
(The subTabPanel card in question is an extension of Ext.Carousel.)
UPDATE
It looks like both subTabPanel and its carousel are being instantiated twice somehow, so that could be a big part of the problem...
The answer in this case was to prevent the duplicate creation of the subTabPanel and its carousel.
The viewport now looks like this:
myApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
listeners: {
beforecardswitch: function(cnt, newCard, oldCard, index, animated) {
//alert('switching cards...');
}
},
tabBar: {
ui: 'blue',
dock: 'bottom',
layout: { pack: 'center' }
},
items: [],
initComponent: function() {
//put instances of cards into myApp.views namespace
Ext.apply(myApp.views, {
subTabPanel: new myApp.views.SubTabPanel(),
tab2: new myApp.views.Tab2(),
tab3: new myApp.views.Tab3(),
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
myApp.views.productList,
myApp.views.tab2,
myApp.views.tab3
]
});
myApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
And I've since removed the duplicate creation of those TabPanel items from the items: property and moved their tabBar-specific properties into the view classes SubTabPanel, Tab2 and Tab3 (each of which are extensions of either Ext.TabPanel or Ext.Panel).
I got problem like this:
There is TabPanel with two tab. First is FormPanel, second is GridPanel.
And I've added listener to beforetabchange. When values in FormPanel are changed there should appear Ext.MessageBox.cofirm with question: 'Do you want save your changes?'.
And it's appear but under TabPanel.
It doesn't work with any type of message box.
This is little bit weird because, when I click on submit button in this form, there is wait message box and after changes are saved there is information box.
Any ideas?
edited
I've removed all config sets from tabPanel and formPanel which is first tab, so everything is default. Message box looks like that (right now):
Ext.MessageBox.confirm('Title','message',Ext.emptyFn);
I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel.
I've added plugin to tabPanel and on beforetabchange event I show this confirm message.
Funny thing is that I do exactly the same code in plugin which is added to submit button in formPanel and there everything works perfect.
edited
new Ext.TabPanel({
activeTab: 0,
id: 'tabPanel_id',
items: [
new Ext.form.FormPanel({
cls: 'xf-windowForm',
bodyCssClass: '',
autoHeight: false,
autoScroll: true,
border: false,
layout: 'form',
buttonAlign: 'center',
monitorValid: true,
labelAlign: 'right',
labelPad: 10,
defaults: {
msgTarget: 'under',
anchor: '100%'
},
id: 'formPanel_id',
title: translate('tab_title-general'),
items: [
new Ext.form.TextField({
fieldLabel: 'label',
name: 'name',
id: 'id'
})
],
buttons: [
new Ext.Button({
text: 'save',
type: 'submit',
formBind: true,
plugins: {
init: function (component) {
component.on({
click: function() {
Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
}
});
}
}
})
]
}),
new Ext.Panel()
],
plugins: {
init: function(component) {
component.on({
beforetabchange: function() {
Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
}
});
}
}
});
There is also gridPanel under this tabPanel.
And this message box in buttons plugin works fine (tab panel becomes grey and message box appears on top), but the second one, in tabpanels plugin, add another mask on grid and shows under the panel and above the grid.
edited
Ext.onReady(function(){
new Ext.Window({
initHidden: false,
width: 700,
title: 'WindowTitle',
items: [
new Ext.TabPanel({
items: [
new Ext.Panel({title: 'Title1'}),
new Ext.Panel({title: 'Title2'})
],
plugins: {
init: function(component) {
component.on({
beforetabchange: function(t,c,n) {
Ext.MessageBox.confirm('MessageBoxTitle', 'Confirm message.', Ext.emptyFn, component);
}
});
}
}
})
]
});
});
That's complete code where problem occurs.
Message box in window show event is displayed ok, but in tabPanel it's under the window.
I'm working on FF 4.0.1, but problem occurs also in IE 8 and Chrome 12.
I'm using Ext JS 3.3.1.
solution
z-index of windows must be decreased (ie. to 7000, default is 9000).
To do that I'm using Ext.WindowGroup.
windows = new Ext.WindowGroup();
windows.zseed = 7000;
//and in config properties in window:
manager:windows
Thank's everyone for help.
"I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel."
MessageBox isn't bound to an existing panel, its a singleton and is basically a shortcut to creating a window rendered to the body, as per source code:
http://dev.sencha.com/deploy/ext-3.3.1/docs/source/MessageBox.html#cls-Ext.MessageBox
Kevin is on to something with the z-index being a likely culprit, as I've fixed issues in the past with the Ext.Notifications ux having a lower z-index than the main content.
Try running your messagebox call from the console and see if it appears. That will help determine if your wait messagebox is closing out the confirm messagebox (note the mention of it being a singleton above) or something odd where you're not seeing some other javascript error thats causing your code to not be run. Then, if you don't see the messagebox when run from the console, try the isVisible() api call to see if it thinks its being displayed (which will likely narrow it down to a css issue).
Ext MessageBox doesn't block your code until the user does something the way an alert() does. As a result, it's going to pop up the message box, and then proceed to render the new tab that the user just clicked on. Perhaps when the new tab renders, the Ext window manager is putting that window on top, since it rendered most recently?
You could try using setTimeout to display the message box after a short delay. That will give the new tab a chance to be on top, and then the message box renders, hopefully on top of everything, since it was the most recent.
setTimeout will work, there was same issue like
page- button -
on click - window with grid -
click on grid item->there should be a message box on top,
but it was under the window,
then i tried
click on grid item-
setTimeOut(function(){ Ext.MessageBox.alert('MessageBoxTitle', 'Confirm message.')}, 200);
I have used following method. It is working for me.
beforetabchange: function(tabpanel, newTab, oldTab){
if (!tabpanel.allowAction){
Ext.Msg.confirm('Confirm', 'Your Message',function(btn) {
if (btn == 'yes') {
/* logic*/
tabpanel.allowAction = true;
this.setActiveTab(newTab.id);
}else{ /* logic */}
});
return false;
}
delete tabpanel.allowAction;
}
Ext.create('Ext.window.MessageBox', {
alwaysOnTop: true,
closeAction: 'destroy'
}).show({
title: 'Title',
buttons: Ext.Msg.OK,
message: 'Message'
});
This should make the MessageBox appear on top.
Look at the fourth example in this page.
http://docs.sencha.com/extjs/5.1.0/api/Ext.window.MessageBox.html