Develop Reference

Sencha 6.5 (modern) how to dynamically change the items in a menu in a title bar?

Well considering a grid I create in my application:
{
xtype: 'ordergrid',
itemId: 'ordergrid',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
}
}]
},
With ordergrid being defined with:
extend: 'Ext.grid.Grid',
xtype: 'ordergrid',
I wish to modify the items of the menu dynamically. I've first tried doing this through a store:
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
store: { type: 'status' }
Though this doesn't seem to work. Then I tried accessing this menu through a component query, during the init function of some controller:
Ext.define('BinkPortalFrontend.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
init: function () {
console.log('..... initializing ......');
const menus = Ext.ComponentQuery.query('ordergrid #status_menu');
const menu = menus[0];
menu.setItems([{
text: 'some',
value: 'some'
}, {
text: 'new',
value: 'mew'
}]);
},
};
However this returns an error: "Cannot read property 'setItems' of undefined"
Debugging shows the obvious problem: it doesn't find any menu.
What's more, even a "catch all" query like
Ext.ComponentQuery.query('menu');
or
Ext.ComponentQuery.query('#status_menu');
Shows an empty array: so what's going on? (I most definitely see the menu from its initial load).

There is one reason your menu is not created. Menu will created whenever button will tap or whenever getMenu() method get called.
If you want to get your menu using Ext.ComponentQuery.query(), so for this you need to do use initialize event of button and forcefully create menu using getMenu() method like below :-
{
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function(btn) {
Ext.defer(function() {
// This will print undefined because menu have not created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will print menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}
Another way you can use getMenu() method of button. It will return the menu component.
In this FIDDLE, I have created a demo using grid, button and menu. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Grid', {
title: 'Change menu items dynamically',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
itemId: 'statusbtn',
menu: {
itemId: 'status_menu',
defaults: {
// handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function (btn) {
Ext.defer(function () {
// This will undefined because menu has not been created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}, {
xtype: 'button',
align: 'right',
text: 'Change Items',
handler: function (btn) {
var newItems = [];
store.each(rec => {
newItems.push({
text: rec.get('name'),
value: rec.get('name')
})
});
/*
* You can also get menu using button
* btn.up('titlebar').down('#statusbtn').getMenu().setItems(newItems);
*/
Ext.ComponentQuery.query('#status_menu')[0].setItems(newItems);
Ext.toast('Menu items has been change. Please check', 2000);
}
}]
},
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 200,
layout: 'fit',
fullscreen: true
});
}
});
For more details about component you can also see this ComponentManager

Dropdown menu get object JSON

I want get object name from dropdown menu when item is selected. how to get object from event itemSelect? Thanks for attention.
Dropdown menu pic
XML code:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:u="sap.ui.unified">
<u:Menu items="{kepesertaanmodel>/}" id="menuEventingKepesertaan"
itemSelect="handleMenuItemPressKepesertaan">
<u:MenuItem
text="{kepesertaanmodel>name}"
icon="{kepesertaanmodel>icon}">
<u:Menu items="{kepesertaanmodel>sub/}" id="submenuEventingKepesertaan"
itemSelect="handleSubMenuItemPressKepesertaan">
<u:MenuItem
text="{kepesertaanmodel>name}"
icon="{kepesertaanmodel>icon}"/>
</u:Menu>
</u:MenuItem>
</u:Menu>
</core:FragmentDefinition>
Javascript code:
handleMenuItemPressKepesertaan: function(oEvent) {
alert(oEvent.getSource().getItems().getBindingContext().getObject().name);
}
JSON structure:
dropdownMenu: {
kepesertaan:[
{
name: "Menu1",
icon: "sap-icon://crop",
sub: [
{
name: "Submenu1-1",
icon: "sap-icon://create-session"
},
{
name: "Submenu1-2",
icon: "sap-icon://create-form"
}
]
},
{
name: "Menu2",
icon: "sap-icon://detail-view",
sub: [
{
name: "Submenu2-1",
icon: "sap-icon://add-activity"
},
{
name: "Submenu2-2",
icon: "sap-icon://action"
}
]
}
]
}
How to fix this problem?

Does this help:
oEvent.getParameter("item").getBinding("text").getValue("name")
You can also have a look at this snippet

CKEDITOR dialog - open second tab on button click

I have CKEDITOR dialog with two tabs:
- view one
- view two
Inside view one I have a button that should open view two if clicked by the user.
But I don't know how to do this. This is my CKEDITOR.dialog code:
CKEDITOR.dialog.add('placeholder', function(editor) {
var lang = editor.lang.placeholder,
generalLabel = editor.lang.common.generalTab,
validNameRegex = /^[^\[\]<>]+$/;
return {
title: 'some title',
minWidth: 300,
minHeight: 150,
contents: [{
id: 'initial-view',
label: 'view one',
title: generalLabel,
elements: [{
id: 'name-one',
style: 'width: 100%;',
type: 'html',
html: 'Organizational units'
}, {
type: 'button',
id: 'buttonId',
label: 'Click me',
title: 'My title',
setup: function(widget) {
},
onClick: function(widget) {
// this = CKEDITOR.ui.dialog.button
My code should go here........?
}
}]
}, {
id: 'organizational-unit-view',
label: 'view two',
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'list-of-vars',
style: 'width: 100%;',
type: 'html',
html: 'second view --- html goes here',
label: lang.name,
setup: function(widget) {
this.setValue(widget.data.name);
},
commit: function(widget) {
widget.setData('name', this.getValue());
}
}
]
}]
};
});
My question is how should I handle that button click? What method should I use? Basically how to open view two?

I found a solution. On click event is should use getDialog():
this.getDialog().selectPage('your-content-id);
Like this:
onClick: function(widget) {
this.getDialog().selectPage('organizational-unit-view');
}

Kendo Grid toolbar item not firing click function:

i have a few items in Kendo Grid Toolbar.
Everything works fine excepts last item called "test".
Click event not firing defined action.
Question is: How to solve that to fire another AngularJS function in the same Controller?
toolbar: [
{ template: kendo.template($("#preparedViewsToolbar").html()) },
{ name: "create" },
{ name: "save" },
{ name: "cancel" },
{
name: "test",
text: "testme",
click: function(e){
console.log("TEST");
}
}
]
Thanks for any help and advice.

This is because Kendo UI does not understand the click property on a toolbar item. It is not supported [reference]. Instead, you should define a template for the toolbar item, and in that template you can bind your click function.
JSBin example
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
console.log("Toolbar command is clicked!");
return false;
}
$("#grid").kendoGrid({
toolbar: [
{ name: 'create' },
{ name: 'save' },
{ name: 'cancel' },
{ template: kendo.template($("#template").html()) }
],
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>

var tableDIV = $("<div id='grid'> </div>");
$("body").append(tableDIV);
//set toolbar options and custom events.
var toolBar = [
{
name: "Add",
text: "Add new record",
events:{
click:function(e){
alert($(this).text());
}
}
}
];
//initialize grid with toolbar options.
tableDIV = tableDIV.kendoGrid({
toolbar: toolBar,
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
}).data("kendoGrid");
//now bind events here.
tableDIV.element.find(".k-header.k-grid-toolbar > a").each(function(i){
console.log(i,toolBar);
$(this).bind((toolBar[i].events != undefined ? toolBar[i].events : null));
});

List Component: How to detect which item was selected?

I can access a list (as a container of items) in a controller but I do not know how to access list items properties.
How to create the correct ComponentQuery rule? I tried 'list > item' but it does not work.
Each item has it's title but I get 'undefined' as output in selectSection.
Ext.define( 'UGP.controller.BeginList',
{
extend: 'Ext.app.Controller',
config:
{
views: [ 'BeginList' ],
control:
{
'list':
{
select: 'selectSection'
}
}
},
selectSection: function()
{
Ext.Msg.alert( 'title=' + this.title );
}
}
);
The BeginList.js with the list component:
Ext.define( 'UGP.view.BeginList',
{
extend: 'Ext.List',
config:
{
fullscreen: true,
itemTpl: '{title}',
data:
[
{ title: 'Chapter 1', id: 0, action: "selectSection" },
{ title: 'Chapter 2', id: 1, action: "selectSection" },
{ title: 'Chapter 3', id: 2, action: "selectSection" },
{ title: 'Chapter 4', id: 3, action: "selectSection" }
]
}
}
);

You can see in the select event documentation that it passes arguments. So you can change the signature of your selectSection function to this :
selectSection: function (list, record) {
Ext.Msg.alert( 'title=' + record.get( 'title' ) );
}
You can also take a look at the itemTap event which usually the one used to detect tap events on a list item.
Hope this helps