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.
Related
How to make that in Ext.tab.Panel in tab Mytab1 two Ext.grid.Panel were loaded?
In the app.js file, I get the Ext.tab.Panel:
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'BookApp',
appFolder: 'static/hello_extjs',
controllers: ['Books'],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'north',
xtype: 'maintab'
}
]
});
}
});
In Ext.tab.Panel I do not know how to correctly form items Mytab1 that would load two Ext.grid.Panel:
Ext.define('BookApp.view.MainTab', {
extend: 'Ext.tab.Panel',
xtype: 'maintab',
alias: 'widget.maintab',
title: 'Панель вкладок',
items: [
{
items: //How to do what would be displayed two grids
title: 'Mytab1',
border: false,
layout: 'fit',
header: false
},
{
items: 'booklist',//What exactly is necessary to point out that one grid
title: 'Mytab2',
border: false,
layout: 'fit',
header: false
}
]
});
You have to put your grids in items and call them from xtype property: FIDDLE
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 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 have this weird issue with ExtJS 4.2.1.
I have a controller whose listeners catch events from a view that it shouldn't.
Here's said controller:
Ext.define('Customer_Portal_UI.controller.NavigationMenu', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'panel': {
render: function (panel) {
panel.body.on('click', function (panel, e) {
alert('onclick');
});
}
}
});
}
});
It 'controls' this view:
Ext.define('Customer_Portal_UI.view.NavigationMenu', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationmenu',
region: 'west',
layout: 'fit',
ui: 'cssmenu',
loader: {
autoLoad: true,
url: '/resources/notloggedin.html'
}
});
But it also catches panel clicks from this view:
Ext.define("Customer_Portal_UI.view.MainContent", {
extend: 'Ext.form.Panel',
alias: 'widget.maincontent',
region: 'center',
layout: 'card',
border: false,
activeItem: 0,
requires: ['Ext.grid.Panel'],
initComponent: function () {
this.items = [
{
xtype: 'panel',
title: ''
},
{
xtype: 'gridpanel',
id: 'contactlistgrid',
store: Ext.data.StoreManager.lookup('contactStore'),
columns: [
....
],
features: [{
ftype: 'grouping',
groupHeaderTpl: ['{columnName}: {name} - ({rows.length} employees)'],
hideGroupedHeader: true,
startCollapsed: false
}],
viewConfig: { id: 'contactlistgridview' }
},
{
xtype: 'gridpanel',
id: 'caselistgrid',
store: Ext.data.StoreManager.lookup('caseStore'),
columns: [
{ text: 'Title', dataIndex: 'title' },
{ text: 'Description', dataIndex: 'description' },
{ text: 'Ticket number', dataIndex: 'ticketnumber' }
],
viewConfig: { id: 'caselistgridview' }
}
]
this.callParent(arguments);
}
});
Do you see any obvious reasons why it would do this ? panel is indeed the panel I'm clicking and not the document body, which could have explained why.
Note that's in not catching clicks from other panels, just from the MainContent view, which it should not...
Thanks.
The fix was two fold as shown in here:
http://www.fusioncube.net/index.php/sencha-extjs-4-make-any-component-fire-a-click-event/comment-page-1
Then I was able to listen to 'click' for 'panel' (there's only one panel within the view) within my controller without having to refine my selector.
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
]
});
});