If I show an ExtJS context menu on ExtJS panel after text selection, it hides or deselects the text selection or window selection. How can I keep the selection when the context menu is shown?
listeners: {
afterrender: function(comp) {
comp.getEl().on('contextmenu', function(e,src) {
//stop default browser context menu appearing
e.stopEvent();
contextMenu = new Ext.menu.Menu({
items: [{
text: "Show On Map",
iconCls: 'map',
handler: function(a,b,c) {
alert(this.id);
}
}]
});
contextMenu.showAt([e.getPageX(),e.getPageY()]);
});
}
}
var contextMenu = Ext.create('Ext.menu.Menu', {
items: [{
id:'zoom',
text: 'Zoom in',
layout: {
align: 'left'
},
handler: function() {
alert('You clicked the Zoom in button!');
}
},
{
text: 'Zoom out',
align: 'left'
},
{
text: 'Add Marker',
align: 'left'
}
]
});
map.div.oncontextmenu = function noContextMenu(e) {
if (OpenLayers.Event.isRightClick(e)){
contextMenu.showAt(e);
}
return false; //cancel the right click of brower
};
Related
Can anybody tell How to implement back button functionality in sencha
Thanks
Use Navigationview component.NavigationView auto add Back button on top toolbar and handles functionality of Back.
config: {
title:'Home',
layout:'fit',
items:[
{
xtype:'titlebar',
title:'Home',
docked:'top',
items: [
{
xtype: 'button',
text: 'Logout',
align: 'right',
initialize: function () {
this.element.on({
tap: function () { Ext.Viewport.setActiveItem(Ext.widget('home'));
}
});
}
}
]
},
}
}
});
I have this code which creates a floating panel centered to the screen:
Ext.define('myapp.view.ButtonNav', {
extend: 'Ext.Container',
xtype: 'myapp_buttonnav',
config: {
fullscreen: false,
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Button 1',
listeners: {
tap: function () {
var panel = Ext.Viewport.add({
xtype: 'panel',
defaultType: 'button',
baseCls: 'btn1_cont',
centered: true,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
baseCls: 'btn1',
text: 'HOME PAGE',
handler: function() {
Ext.Viewport.setActiveItem({
xtype: 'myapp_homepage'
});
panel.destroy();
}
}
],
top: // SET TOP TO SOURCE BUTTON
left: // SET LEFT TO SOURCE BUTTON
});
}
}
},
]
}
});
As you can see, it is a container, with a button which when clicked shows a floating panel.
How do i position the floating panel centered to the button that triggered the floating panel?
If I understand correctly, you need to use the showBy function like so :
myPanel.showBy(myButton);
It will show the panel next to the button and you can choose the alignment as well.
You can take a look at the documentation
How to get the button
If you take a look at the tap listener signature : http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap
You can see that the first parameter is the button itself so :
listeners: {
tap: function (myButton, myEvent) {
... // create your panel
myPanel.showBy(myButton);
}
}
Hope this helps
I have a tabpanel, and a button on the 1st tab. When i click on that button, i need to setfocus to the 2nd tab and activate it (as in show content that belongs to that tab). My code is as follows, and i unable to setFocus or activate that tab from the Button click event.
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
height: 250,
width: 400,
activeTab: 0,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
title: 'Tab 1',
items: [{
xtype: 'button',
text: 'MyButton',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}]
}, {
xtype: 'panel',
title: 'Tab 2'
}, {
xtype: 'panel',
title: 'Tab 3'
}]
});
me.callParent(arguments);
},
onButtonClick: function (button, e, options) {
// Set Focus, and activate the 2nd tab
}
});
Find the container of the tab panel. to get the container you can use Ext.getCmp
Ext.getCmp('center-region').setActiveTab('your-tab-name');
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-method-setActiveTab
There are also several examples of setting the active tab at the class level documentation.
forum member
I am having some problems in displaying different panel on the center area of border layout window.
Consider I am having border layout window with east side containing different button, which on click will display the grid on the center of the layout window.
my window is shown below with east containing buttons and center is empty.
my updated controller code is given below
Ext.define('rms.controller.companymgt.CompanyMgtController',{
extend: 'Ext.app.Controller',
stores:['companyStore'],
models:['companyModel'],
views: [
'companymgt.companyMain',
'companymgt.companyView',
'companymgt.companyDetail',
'companymgt.companyAdd',
'companymgt.fileUpload'
,'companymgt.departmentDetail',
'companymgt.designationDetail',
'companymgt.groupDetail'
],
refs: [{
ref: 'companyMain',
autoCreate: true,
selector: 'companymain',
xtype: 'companymain'
},{
ref: 'companyAdd',
autoCreate: true,
selector: 'companyadd',
xtype: 'companyadd'
},{
ref: 'fileUpload',
autoCreate: true,
selector: 'fileupload',
xtype: 'fileupload'
},{
ref: 'departmentDetail',
autoCreate: true,
selector: '#departmentdetail',
xtype: 'departmentdetail'
},{
ref: 'designationDetail',
autoCreate: true,
selector: '#designationdetail',
xtype: 'designationdetail'
},{
ref: 'groupDetail',
autoCreate: true,
selector: '#groupdetail',
xtype: 'groupdetail'
},{
ref: 'companyDetail',
autCreate: true,
selector: '#companydetail',
xtype: 'companydetail'
}],
init: function() {
this.control({
'#companyview button[action=company-view]': {
click: this.createCompanyview
},
'#companyview button[action=department-view]': {
click: this.createDepartmentview
},
'#companyview button[action=designation-view]': {
click: this.createDesignationview
},
'#companyview button[action=group-view]': {
click: this.createGroupview
},
'#companyview button[action=file-view]': {
click: this.createFilemgtview
},
'#companydetailtoolbar #mnuDept': {
click: this.createDepartmentnew
},
'#companydetailtoolbar #mnuExcel': {
click: this.exportExcel
},
'#companydetailtoolbar #mnuCSV': {
click: this.exportCSV
}
});
},
createCompanyview: function(btn) {
alert('company view clicked');
},
createDepartmentview: function(btn) {
alert('department view clicked');
var departmentCard = this.getDepartmentDetail();
var mainComp = this.getCompanyMain();
mainComp.getLayout().setActiveItem('departmentCard');
},
createDesignationview: function(btn) {
alert('designation view clicked');
},
createGroupview: function(btn) {
alert('group view clicked');
},
createFilemgtview: function(btn) {
alert('FILE MGT WINDOW');
this.getFileUpload().show();
},
createDepartmentnew: function(obj) {
this.getCompanyAdd().show();
}
});
my main view code is given below
Ext.define('rms.view.companymgt.companyMain', {
extend: 'rms.model.desktopmgt.Module',
alias: 'widget.companymain',
requires: ['rms.view.companymgt.companyView','rms.view.companymgt.companyDetail'],
id: 'companymain',
init: function() {
this.launcher = {
text: 'Company Management System',
iconCls: 'project-mini-icon',
handler: this.createWindow,
scope: this
};
},
createWindow: function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('companymgt-win');
if(!win){
win = desktop.createWindow({
id: 'companymgt-win',
title: 'Company Management System',
height: 566,
width: 900,
layout: 'border',
constrain: true,
modal: true,
closeAction: 'destroy',
items: [{
region: 'west',
collapsible: true,
//html: 'MAIN VIEW',
xtype: 'companyview',
flext:1
},{
region: 'center',
collapsible: true,
//html: 'DETAIL VIEW',
xtype: 'companydetail',
flex:3
}]
});
}
win.show();
return win.setPosition(100,100);
}
});
when the company button is clicked I get the alert window.
But based on the button click I want to open different detail view to the center layout of the window.
Please suggest me some solution, so I can view different window on the border layout of the window as shown above.
I would go with a card layout. The easiest thing would be to give each component an itemId. Then in your controller you would have:
, refs: [
{
ref: 'mainCardComponent'
, selector: '#mainCardComponent'
},
{
ref: 'companyCard'
, selector: '#companyCard'
},
{
ref: 'departmentCard'
, selector: '#departmentCard'
}...
Then you can reference using get... within the scope of your controller like:
var companyCard = this.getCompanyCard();
To swap out the cards, you would do something like:
var mainComp = this.getMainCardComponent();
mainComp.getLayout().setActiveItem('companyCard');
You have two options:
Make center piece a container and remove old/add new stuff to it when needed.
If you have limited number of content pages make center piece layout 'card' and create all pages at once. Only one will be visible. You can change visibility when user click certain button.
i have a carousel with 3 items and i have 1 toolbar. But how can i change the title of the toolbar depending on which item the carousel is showing? for example:
var theCarousel = new Ext.Carousel({
ui: 'dark',
direction: 'horizontal',
defaults: { cls: 'card', layout:'fit' },
items: [
{
html:'<b>I'm big</b>'
},
{
html:'<i>I'm oblique</i>'
},
{
html:'<u>I'm underlined</u>'
}
});
var toolbar = new Ext.Toolbar({
title: 'iToolbar' ,
dock: 'top',
items:[
{
text:'back',
ui:'back'
},{xtype: 'spacer'},
{
text:'Help',
ui:'help'
}
]
});
var panel = new Ext.Panel({
fullscreen: true,
layout: {
type : 'fit',
align: 'top'
},
defaults: {
flex: 1
},
items: [ theCarousel ],
dockedItems: [ toolbar ]
});
panel.show();
so when i am at the item 'I'm oblique' i want the title of the toolbar to show 'I'm oblique'
Anny ideas on how to do this? Ty, Already!
When each new card is revealed, Ext.Carousel fires an cardSwitch event. The handler of this event will receive the new card component as the second parameter. You can do
panel.setTitle(newCard.getYourTitle());
in the handler.