I have a menu(panel) and when I expand a collapsible menu within a layout it compresses the content of the panel next to it. How to expand it over the content? Here my menu code.
Ext.define('*****.view.main.MainMenu', {
extend: 'Ext.panel.Panel',
alias: 'widget.main.MainMenu',
title: 'Menu',
collapsed: true,
dock: 'left',
minWidth: 140,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
collapseDirection: 'left',
collapsible: true,
titleAlign: 'center',
titleCollapse: false,
items: [
{
}
]
});
me.callParent(arguments);
}
});
You can make it floating, you can change it into a window (which is a specialized panel that is resizeable and floatingby default), you can change the layout of the parent container, you can wrap these two panels into a tabpanel to show one panel at a time, accordion might work for you as well if you need to see only one at a time. Check out examples from Sencha website to see different combinations.
How about something like this?
Ext.onReady(function () {
Ext.define('MainMenu', {
extend: 'Ext.panel.Panel',
title: 'Menu',
collapsed: true,
titleCollapse: false,
hideCollapseTool: true,
minWidth: 140,
region: 'west'
});
var menu = Ext.create('MainMenu');
var otherPanel = Ext.create('Ext.panel.Panel', {
title: 'Other Panel',
region: 'center'
});
var panel = Ext.create('Ext.panel.Panel', {
height: 300,
width: 500,
renderTo: Ext.getBody(),
layout: 'border',
items: [
menu,
otherPanel
]
});
});
Related
Ext.define('rgpd.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margin: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
here is my viewport.
it's loaded in the browser i checked from network console tab, I added a console.log("test") call and it appears; but a blank page is rendered on the browser. Why ? The content of the class definition comes from ExtJS document (I use ExtJS 6.0)
i found out the problem comes from my controller but i don't know why
Ext.define('rgpd.controller.cMain', {
extend: 'Ext.app.Controller',
models: [
'mExemple',
'mCorpsMetier',
'mUtilisateur'
],
stores: [
'sExemple',
'sCorpsMetier',
'sUtilisateur'
],
views: [
'Exemple.View',
'CorpsMetier.View'
],
init: function() {
this.control({
});
},
onLaunch: function() {
},
});
Fiddle
Works perfectly. The question is how do you insert component in your parent view. You create instance and attach it or link component with 'xtype' in your view? Provide more code and we will see.
I have a collapsible panel and when I open it in IE (v 11)/Edge, it collapses again. The code is working fine in Chrome, Firefox.
I created a sample, you can try in sencha fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
this.container = new Ext.panel.Panel({
width: '100%',
height: 500,
title: 'Main',
layout: 'border',
renderTo: Ext.getBody()
});
this.container.add({
xtype:'panel',
region: 'east',
width: 300,
collapsible: true,
collapsed: true,
title: 'Collapsible'
});
}
});
If I add something on the 'center' region, it works fine (also gives a JS error while center is undefined)
Ext.application({
name: 'Fiddle',
launch: function() {
this.container = new Ext.panel.Panel({
width: '100%',
height: 500,
title: 'Main',
layout: 'border',
renderTo: Ext.getBody()
});
this.container.add({
xtype: 'panel',
region: 'center',
title: 'Center',
});
this.container.add({
xtype: 'panel',
region: 'east',
width: 300,
collapsible: true,
collapsed: true,
title: 'Collapsible'
});
}
});
UPDATE
By overriding Ext.panel.Panel's placeholderExpand function and replacing the center.hidden = false; row with center && center.hidden = false; the problem is resolved. (Maybe they forgot to check, where hidden is set to true, there is a check)
I have a problem with ExtJs sizes and scrolling. Here is a simple example: https://fiddle.sencha.com/#fiddle/ucd
Ext.onReady(function() {
var win = new Ext.Window({
id: 'win',
layout: 'fit',
closable: true,
bodyPadding: 5,
renderTo: Ext.getBody(),
items: {
xtype: "form",
defaultAnchor: "100%",
items: [{
xtype: "panel",
layout: "fit",
overflowY: "scroll",
//overflowY: "auto",
layout: 'hbox',
items: [{
xtype: "fieldset",
margin: 5,
padding: 5,
labelWidth: 140,
defaultAnchor: "100%",
collapsible: true,
title: "groupbox",
items: [{
itemId: "SNAME",
xtype: "textfield",
margin: 5,
fieldLabel: "Name:",
}],
}],
}]
}
});
win.show();
});
Problem:
It's a side issue. I don't understand, why overflowY: 'auto' won't work. It works in my local project, and in this Fiddle scrolling behaves as hidden. May I be need to call doLayout() or something on resize event. So I did overflow: "scroll".
You can see that ExtJs doesn't leave place for the scrollbar and it cover the fieldset. Why? How resolve this?
In my local project overflow: 'auto' works. And scrollbars always appears, because innerct panel div have same size as body div panel. So scrolling behaves as on set overflow: 'scroll'. And fieldset right border is hidden by scroll.
You are way overnesting. You are putting a container in a container in a container and all with there own layout calculations. Besides that your dom (which is always expensive to render) is way to big, the layout manager of ExtJs is way to busy and I can't tell what is going wrong because all of this.
Take a look at this code. It has exactly the same result, is much cleaner and your dom is much smaller.
Ext.onReady(function() {
new Ext.form.Panel({
id: 'form',
closable: true,
floating: true,
bodyPadding: 10,
width: 500,
items: [{
xtype: "fieldset",
padding: 5,
labelWidth: 140,
layout: 'anchor',
defaults: {
xtype: "textfield",
anchor: '100%',
margin: 5
},
collapsible: true,
title: "groupbox",
items: [{
name: "SNAME",
fieldLabel: "Name:"
}]
}],
renderTo: Ext.getBody()
});
});
I have a west region panel in a border layput that uses dockedItems. This panel is initially empty. If I dont specify any height for this panel, the dockedItem are placed one below the other. I want the panel to use entire available height and dock the items at the top and bottom of the panel. How can I do this?
JSFiddle: https://jsfiddle.net/kavitaC/rtopn7fd/
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
renderTo:Ext.getBody(),
title: 'My Form',
//height: 800,
layout: 'fit',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'filefield',
buttonOnly: true
}
]
},
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'filefield',
buttonOnly: true
}
]
}
]
});
me.callParent(arguments);
}
});
Ext.application({
name:'App',
launch:function(){
var form = Ext.create('MyForm');
}
});
Panels will not take the full available height by default. You need to use viewport for that purpose.
See example: https://fiddle.sencha.com/#fiddle/s6h
I am new to ext-js and i have a Tree Panel which has a collapse Tool for collapse/Expand
of panel on click of the collapse tool.
I wanted to know how can i get the reference to that Collapse Tool button present in the
panel's title.
I want to click the collapse tool by using click event so that the panel will collapse/expand.
please help me in finding solution.
This is the fiddle link
Ext.define('project.view.navigation', {
extend: 'Ext.tree.Panel',
alias: 'widget.navigation',
requires: [
'Ext.tree.View'
],
width: 295,
animCollapse: true,
collapsed: true,
collapsible: true,
title: 'Menu',
titleCollapse: false,
store: 'navigationStore',
rootVisible: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
}
});
me.callParent(arguments);
}
});
I have done it using Sencha Architect 3.0
This Tree Panel is present in the west region of viewport in Border Layout.
The code For main Viewport is as shown below
Ext.define('projectName.view.mainView', {
extend: 'Ext.container.Viewport',
requires: [
'projectName.view.header',
'projectName.view.navigation',
'projectName.view.searchContent',
'projectName.view.content',
'projectName.view.footer',
'Ext.tree.Panel'
],
itemId: 'mainView',
layout: 'border',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
region: 'center',
cls: 'mainContainer',
layout: 'border',
items: [
{
xtype: 'appHeader',
height: 100,
region: 'north'
},
{
xtype: 'navigation',
region: 'west'
},
{
xtype: 'searchContent',
region: 'west'
},
{
xtype: 'content',
region: 'center'
},
{
xtype: 'footer',
region: 'south'
}
]
}
]
});
me.callParent(arguments);
}
});
You can just call the collapse() method on the panel itself. Check out the documentation for it:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Panel-method-collapse
For example, if panel was a reference to your tree panel:
panel.collapse();
This would collapse the panel using the collapse config options you already set in your panel definition.