Fiddle: https://fiddle.sencha.com/#fiddle/q02
Ext.define('EController', {
extend: 'Ext.app.ViewController',
alias: 'controller.test',
control: {
'#myAction': {
click: function() {
alert('My action')
}
}
}
});
var sellAction = Ext.create('Ext.Action', {
text: 'My action',
itemId: 'myAction'
});
var contextMenu = Ext.create('Ext.menu.Menu', {
items: [
sellAction
]
});
var grid = Ext.create('Ext.grid.Panel', {
controller:'test',
...................................
dockedItems: [{
xtype: 'toolbar',
items: [
sellAction
]
}],
Alert fires in toolbar button, but do not work in context menu.
How add same listener for context menu button and toolbar button? (Best way)
You can't. Simply because, unlike the toolbar, the context menu is not a part of the grid — it is just shown by the grid at e.getXY(). Therefore your control directive cannot reach the context menu.
An alternative would be to use action handlers instead of controller's control:
var sellAction = Ext.create('Ext.Action', {
text: 'My action',
itemId: 'myAction',
handler: function() {
alert('My action')
}
});
Fiddle fork: https://fiddle.sencha.com/#fiddle/q0d
Related
I want to detect clicks on my toolbar, alternatively focus of toolbar.
The use-case has been extracted from a LiveSearchGrid which has a toolbar, the one seen in the code. The code provided renders fine, but no detect of click, focus, or anything else. Just nothing.
See below:
<div id="toolbar"></div>
<script type="text/javascript">
Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'toolbar',
name: 'searchBar',
focusEl: 'toolbar',
listeners: {
focusenter: function () {
console.log('focusenter')
},
focus: function () {
console.log('focus')
}
},
items: [
{
xtype: 'tbtext',
html: 'Search',
listeners: {
focusenter: function () {
console.log('focusenter')
}
}
},
'Case Sensitive'
]
})
</script>
The following is plain JavaScript which solves my problem.
document.getElementById('toolbar').onclick = function () {
console.log('hello world');
}
What am I doing wrong?
You can set a DOM listener on the underlying Ext.Element using the element property of the listener config
Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'toolbar',
name: 'searchBar',
focusEl: 'toolbar',
listeners: {
click: {
element: 'element', // bind to the underlying element
fn: function() {
console.log('Toolbar element was clicked!');
}
},
focusenter: {
element: 'element', // bind to the underlying element
fn: function() {
console.log('Toolbar element was focused!');
}
}
},
items: []
});
That property can be set to element or bodyElement
I would like to ask if there is a possibility to only show a button in the toolbar whenever a if statement is true.
for my case i have a snippet here
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Pay!',
handler: function() {
console.log('haha');
}
}
]
}
a toolbar that has a button
but i only want to show the button pay whenever the grid is not empty(I also have a grid)
how is this possible.
THANKS!
You have to bind to all events that indicate changes of the row count. Most of them are store events:
xtype:'grid',
tbar:[{
xtype:'button',
itemId:'Test'
}],
buttonchange:function() {
this.down('button[itemId=Test]').setVisible(this.getStore().getCount()>0);
},
listeners:{
viewready:function(gridview) {
var grid = gridview.ownerCt;
grid.buttonchange();
store.on({
load: grid.buttonchange(),
add: grid.buttonchange(),
remove: grid.buttonchange(),
clear: grid.buttonchange(),
filterchange: grid.buttonchange(),
scope: grid
});
}
}
Since your grid data handled by a store you have to add store load event listener.
I create working fiddle for you.
If you are using ExtJs5/6+ you might be able to bind the visibility of your button to the store count.
Something like:
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Pay!',
bind: {
hidden: '{!storeCount}'
}
handler: function() {
console.log('haha');
}
}
]
}
And you need to set the storeCount yourself as the property is not accessible directly (see https://www.sencha.com/forum/showthread.php?286770-unable-to-bind-view-to-store-size)
Assuming you have yourStore declared in your ViewModel, in the ViewController you should be able to do
initViewModel: function(viewModel) {
viewModel.bind('{yourStore}', function(store) {
if(store) {
store.on('datachanged', function () {
this.set('storeCount', this.getCount()) // this is the viewModel as I set the scope of the function
});
}
}, viewModel);
}
here is part of toolbar (buttons are not previewed) as usual:
VIEW
Ext.define('TEST.view.desktop.Toolbar', {
extend: 'Ext.panel.Panel',
alias: 'widget.testtoolbarX',
initComponent: function() {
debugger;
var me = this;
Ext.applyIf(me, {
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
action: 'toolbarMouseOut',
iam trying to get action in controller, it works with buttons fine but not with whole toolbar
if i'm coding like this it works (but i dont need it)
CONTROLLER:
init: function() {
var me = this,
app = me.getApplication();
me.control({
'[xtype=testtoolbarX] button[action=toolbarMouseOut]': {
mouseout: me.onHideToolbar
},
I need it so, but iam not sure if toolbar is right name here. i tried everything and it still not going.
init: function() {
debugger;
var me = this,
app = me.getApplication();
me.control({
'[xtype=testtoolbarX] toolbar[action=toolbarMouseOut]': {
mouseout: me.onHideToolbar
},
please help me how can i react on MOUSEOUT in body of whole Toolbar??
As I mentioned in my comment, there's no mouseout event defined for the toolbar object itself. However, you can listen for that event on the el. Declaring it like this works:
{
xtype: 'toolbar',
dock: 'top',
listeners: {
el: {
mouseout: function() {
console.log('Mouseout on toolbar!');
}
}
},
items: []
}
i use a tab panel in extjs. I want to display an alert when clicked on a tab. But i am not sure how.
This is what i do now:
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'panel',
title: 'All',
items: [grid]
},
{
xtype: 'panel',
title: 'Closed'
},
{
xtype: 'panel',
title: 'Open'
}
],
listeners: {
click: function () {
alert('test');
}
}
}
How can is display All, Closed or Open when there is clicked on that tab?
There is no event for tab click in TabPanel, however you can bind into click event on each tab:
Ext.createWidget('tabpanel', {
items: [...],
listeners: {
render: function() {
this.items.each(function(i){
i.tab.on('click', function(){
alert(i.title);
});
});
}
}
});
Notice: this is ExtJS 4 based code.
I manage to do this by using tabchange event. In example below I used newCard.xtype property where value of xtype (i.e. task-archive) is just my panel with controls and corresponding xtype property.
Ext.define('ComplexBrigade.controller.taskArchive.TaskArchive', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'#tabWorks': {
tabchange: this.doTest
}
});
},
doTest: function ( tabPanel, newCard, oldCard, eOpts) {
switch (newCard.xtype) {
case "task-archive":
console.log("task-archive");
break;
case "task-creation":
console.log("task-creation");
break;
}
}
});
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?