1 Attachment(s)
[CLOSED] Side Menu hidden
Hello.
I'm trying to develop a menu bar at left side that is hidden when the form is open, but is opened when a button is clicked,
like the menus shown in https://mobile.ext.net/#demo/menus
or the side menu shown in the ext.net examples page at top, right of ComboBox of EXT.Net versions: https://examples.ext.net/
I tried to use the same controls as in the Ext.Net mobile library (there, it was possible to put a side to Menu control), but
here it doesn't exists the Side property in Menu control.
I have tried to implement the Ext.ActionSheet control that exists in ExtJs:
https://docs-devel.sencha.com/extjs/...tionSheet.html, but it seems not possible to load that control with this library.
This is the error shown in Firefox 89.0 console
Attachment 25534
I'm using Visual Studio 2015, with EXT.Net 5.3, .Net Framework 4.6 and Windows 10.
It is possible to reproduce this effect?
This is the code that i'm trying now:
Code:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PruebaMenuResponsive2.aspx.vb" Inherits="websilon.PruebaMenuResponsive2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
Ext.define('KitchenSink.view.Menus', {
extend: 'Ext.Panel',
// requires: ['Ext.Menu'],
cls: 'demo-solid-background',
shadow: true,
padding: 20,
scrollable: true,
defaults: {
xtype: 'button',
cls: 'demobtn',
margin: '10 0'
},
items: [
{
xtype: 'component',
styleHtmlContent: true,
html: [
'<b>Ext.Menu</b> is a component which allows you to easily display sliding',
'menus from any side of the screen.<br /><br />You can show the menus by either tapping the buttons below,',
'or by swiping from the edge of the screen.'
].join('')
},
{
text: 'Toggle left menu (reveal)',
handler: function () {
Ext.Viewport.showMenu('left');
}
},
],
initialize: function () {
},
doDestroy: function () {
Ext.Viewport.removeMenu('left');
Ext.Viewport.removeMenu('right');
Ext.Viewport.removeMenu('bottom');
Ext.Viewport.removeMenu('top');
this.callParent();
},
getMenuCfg: function (side) {
return {
items: [{
text: 'Settings',
iconCls: 'x-fa fa-gear',
scope: this,
handler: function () {
Ext.Viewport.hideMenu(side);
}
}, {
text: 'New Item',
iconCls: 'x-fa fa-pencil',
scope: this,
handler: function () {
Ext.Viewport.hideMenu(side);
}
}, {
xtype: 'button',
text: 'Star',
iconCls: 'x-fa fa-star',
scope: this,
handler: function () {
Ext.Viewport.hideMenu(side);
}
}]
};
}
});
var menu = Ext.create('Ext.ActionSheet', {
items: [{
text: 'Settings',
iconCls: 'x-fa fa-gear',
scope: this,
handler: function () {
Ext.Viewport.hideMenu(side);
}
}, {
text: 'New Item',
iconCls: 'x-fa fa-pencil',
scope: this,
handler: function () {
Ext.Viewport.hideMenu(side);
}
}, {
xtype: 'button',
text: 'Star',
iconCls: 'x-fa fa-star',
scope: this,
handler: function () {
Ext.Viewport.hideMenu(side);
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.setMenu(menu, {
side: 'left',
// omitting the reveal config defaults the animation to 'cover'
reveal: true
});
Ext.create('KitchenSink.view.Menus', {
renderTo: Ext.getBody()
});
console.log('boo');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" id="RMLogin" ScriptMode="Debug"/>
</div>
</form>
</body>
</html>
Best Regards
