Develop Reference

Ext JS 6.5 Menu auto-hide

I am using Ext JS 6.5.3.57 . I have file Menu.js for view
Ext.define('Foo.view.menu.Menu', {
extend: 'Ext.Panel',
xtype: 'menu_foo',
requires: [
'Ext.menu.Menu'
],
autoSize: true,
bodyPadding: 20,
width: 230,
items: {
xtype: 'menu',
floated: false,
docked: 'left',
alwaysOnTop: true,
items: [{
text: 'System setup',
},{
text: 'Cash'
},{
text: 'regular item 3'
}]
}
})
File app.js
// File /Users/donhuvy/Desktop/vy_sencha/app.js
/*
* This file launches the application by asking Ext JS to create
* and launch() the Application class.
*/
Ext.application({
extend: 'Acc.Application',
name: 'Foo',
requires: [
// This will automatically load all classes in the Foo namespace
// so that application classes do not need to require each other.
'Foo.*'
],
// The name of the initial view to create.
//mainView: 'Foo.view.main.Main'
mainView: 'Foo.view.menu.Menu'
});
When I press on menu item, it hide automatically. How to avoid it hide after click on menu item?

There is hideOnClick config in Ext.menu.Item that is true by deafult
And autoHide config on Ext.menu.Menu that is true by default
If you set hideOnClick to false it won't hide it's owner menu
If you set autoHide to false it prevents the menu from auto-hiding when focus moves elsewhere
So just add following code to menu config
{
allowOtherMenus: true,
autoHide: false,
defaults:{
hideOnClick: false
}
}
Here is the Fiddle

Customizing the webix header

Is it possible to customize the webix UI header like the one in the image 1. I want to give an image, a title, a welcome user line with a logout button, and a menu bar to navigate to other pages? Please click on 1 you will get the image.

Yes, you can achieve that with a toolbar widget :
{
view:'toolbar',
css:'header',
elements: [
{ view: "label", label: "", width: 100, height: 38, css:'app-logo' },
{ view: "label", label: "My app" },
{},
{
view: "button",
type: "icon",
id: 'app:toolbar:current_user_menu',
icon: 'user',
borderless: true,
autowidth: true,
label: 'Jean bombeur'
}
]
}
Then customize app-logo css class to have a background image of your logo.
See demo snippet : http://webix.com/snippet/4f6131d3

You can format the header by providing your own html like below eg:
{id:"col1", header:"<input type='button' value='Do something' class='dummy_button'>"}
By adding styles (css), you can design it as per your requirement.

Calling a variable inside an items list of a container.Viewport / ExtJS and Geoext

I'm quite new inside JavaScript frameworks.
Recently, I've been working on a Man Machine Interface using Geoext, extJS and OpenLayers.
For the moment, I've a simple panel and I want it to display a map.
My code is like this :
(note that I'm not displaying there the OpenLayers code to make the map, but there is no point to do so)
var mappanel = Ext.create('GeoExt.panel.Map', {
title: "AZE TILE - AZE",
map: map,
center: '12.3046875,51.48193359375',
zoom: 6,
stateful: true,
stateId: 'mappanel',
});
And then, I have my Viewport :
Ext.create('Ext.container.Viewport', {
layout:'border',
id: 'BorderLayout',
defaults: {
collapsible: true,
split: true,
},
items: [
[...]
{
region:'center',
title:'Représentation',
xtype: 'tabpanel',
activeTab: 0,
split: false,
collapsible: false,
animCollapse: false,
margins: '5 0 5 0',
items: [
{
title: 'Tableau',
},
{
title: 'Carte', <- WHERE I WANT TO DISPLAY THE MAP CONTAINED IN THE PREVIOUS VARIABLE mappanel
},
{
title: 'Graphiques',
},
]
}
]
});
I don't know how to do this. I found an example in the Geoext2 website, but all they do is calling the variable like this :
items: [
mappanel
]
It is working but then, I can't add some more options to the items (like title).
I guess it is a simple work to get done but I can't figure out, forgive my newbiness :-) !

I don't know much about the GeoExt panel, nothing to be serious.
You can try to put your mappanel into another container:
items:[{
title: "AZE TILE - AZE",
items:[{
xtype: 'container',
items: [mappanel]
}]
}]
By the way your code:
items: [
{
mappanel
},
if mappanel is already an object, you don't have to use the curly brackets.

Easy answer by the way, I found it myself.
items: [
{
title: 'Tableau',
},
mappanel,
{
title: 'Graphiques',
},
]

Setting the icons of a node in TreePanel

ExtJS 4:
I've created a treepanel.
I wanted to set my own icons for its node so I used iconCls property for every node. Its working. But when I expand a node, it returns back to its normal 'Open Folder' icon.
var treeObject = {
text: "BANK OF AMERICA 1",
cls: "enterprise",
children: [
{
text: "core outputs",
cls: "businessUnit",
iconCls: 'abc'
}
],
iconCls: 'abc',
leaf: "false",
expanded: true,
type: "enterprise"
}
treePanel.setRootNode(treeObject);
Please suggest something to avoid this problem.

try to specify your css class like this to prevent override with the default classes of extjs
.x-grid-tree-node-expanded .x-tree-icon-parent.abc{
background: url(abc) x y no-repat !important;
}

Starting from Ext Js 4.0.6, you can use icon config on Ext.data.NodeInterface to set your node icons - just define a field named 'icon' on your model, use it for your treestore...
Ext.define('ModelForTreeNodes', {
extend: 'Ext.data.Model',
fields: [
{ name: 'icon', type: 'string', defaultValue: "Images/nodeicon.png" },
// other fields
],
// other config options
});
Then you can change the icon by simply setting the icon field on the node...and that's it.
var node = myTree.getStore().getNodeById(nodeId);
node.set('icon', 'Images/newIcon.png');

Sencha Touch: Toolbar inside of TabPanel

I'm new to Sencha Touch and just trying to put a Toolbar inside of a TabPanel.
I do that because the TabPanel will be my main navigation and the Toolbar will provide several content-related operations, such as creating a new homework or sth like that.
Here is my "solution", that crtly doesn't work. The TabPanel appears, and the "Hello World" do so, too, but there won't be any Toolbar.
var tapHandler = function(btn, evt) {
alert("Button "+btn.text+" tapped");
}
var HomeScreen = new Ext.Panel({
fullscreen: true,
dockedItems: [
{
xtype: "toolbar",
title: "buttons",
ui: "light",
dock: "bottom",
items: [
{ui: "action", text: "Add"}
],
defaults: {
handler: tapHandler
}
}
],
html: "Hello World"
});
new Ext.Application({
name: "Hello World",
launch: function() {
var tabPanel = new Ext.TabPanel({
fullscreen: true,
ui: 'dark',
sortable: true,
items: [
{
title: "Home",
html: "Loading..."
}
]
});
tabPanel.items.get(0).update(HomeScreen, true);
}
});
Do you have any solutions?
Greetings,
Martin

I think the problem here may well be that the update() method expects an HTML string and HomeScreen is an Ext.Panel.
If it were me, I'd be adding HomeScreen to the items collection in tabPanel either by using the variable like this:
items: [
HomePanel
]
Or by defining it inside the items array as an object:
items: [{
xtype: "panel",
html: "Hello world",
dockedItems: [{
// You toolbar definition
}]
}]
Or by using the TabPanel.add() method:
tabPanel.add(HomePanel);