We Keep Coding

How in one tab Ext.tab.Panel output two Ext.grid.Panel. Extjs

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

ExtJS how to reference region panel in viewport

Hi I have a problem about extjs viewport. I created a button and tried to reference to east panel but It seems a wrong way to access panel. Chrome developer tools showed a message "Uncaught TypeError: Cannot read property 'get' of undefined"
I google this thread
but my code is still not work.
my viewport:
var viewport = Ext.define('Fiddle.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [{
// xtype: 'container',
// itemId: 'header',
region: 'north',
//html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margin: '0 0 5 0',
items: [{
xtype: 'button',
text: 'collapse',
handler: function() {
var east = viewport.items.get('e');
if (!!east.collapsed) {
east.expand();
} else {
east.collapse();
}
}
}]
}, {
region: 'east',
title: 'east Panel',
itemId: 'e',
//collapsible: true,
//collapseMode: 'mini',
floatable: false,
html: 'Information goes here',
split: true,
placeholder:{
width:20,
items:[{
xtype:'button',
}]
}
}, {
region: 'center',
xtype: 'container',
layout: 'fit',
items: {
html: 'Center'
}
}]
})
Fiddle

Instead of viewport.items.get('e'), use down:
viewport.down('#e')
Update:
In your code sample, viewport is referencing the viewport class, not instance. To access the instance from the button clicked, use:
b.up('viewport').down('#e')
Full example: https://fiddle.sencha.com/#fiddle/rl2

Avoid using itemId's. Doesn't
b.up('viewport').down('container[region=east]');
do the trick?

Trying to pop-up window that contains a form, but form not shown - extjs 5

I am trying to display a pop-up window that contains a form in extjs 5, using django-rest as backend. I manage to get the pop-up window shown, but the form inside it is not shown. If I put just an html tag instead of the form, the tag contents are shown. I am very confused as I can't make it work to show the form. Any help would be so much appreciated. The codes are:
Controller:
Ext.define('MyApp.controller.Manage', {
extend: 'Ext.app.Controller',
views: ['Manage'],
// controller initialisation
init: function() {
// save scope
var manageController = this;
console.log('manage controller started');
// instanciate view class but hide initially
this.view = this.getView('Manage').create().hide();
// Request manage variables (lastDayUpd)
Ext.Ajax.request({
url: '/api/manage/',
method: 'GET',
success: function(response, options){
console.log('got last day upd');
// Decode response
var res = Ext.util.JSON.decode(response.responseText).results[0].lastDayUpd;
console.log(res);
// Get manage panel from container
var cp = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('lastDayUpd');
// Set data to display last day updated
cp.setConfig('html', ('Last day updated: '+res));
},
failure: function(response, options) {
console.log('not got last day upd');
}
});
this.control({
// register for the logout-click
'#logoutButton': {
click: function() {
// mask the complete viewport
this.view.mask('Logout…')
// ask the login-controller to perform the logout in the backend
MyApp.getApplication().getController('Login').performLogout(function(success) {
if(!success) {
// return WITHOUT unmasking the main app, keeping the app unusable
return Ext.Msg.alert('Logout failed', 'Close and restart the Application')
}
// unmask and hide main viewport and all content
this.view.unmask();
this.view.hide();
// relaunch application
MyApp.getApplication().launch();
});
}
},
// register for click in the navigation tree
'#navTree': {
itemclick: function(tree, node) {
// ignore clicks on group nodes
// TODO: pass click on to first sub-item
// ignore clicks on non-leave nodes (groups)
if(!node.data.leaf)
return;
// pass the id of the clicked node to the content-panel
// enable the corresponding content view
this.getContentPanel().setActiveItem(node.data.itemId);
}
},
// Show update form to perform update
'#updButton': {
click: function(){
//alert('Clicked');
//navigationController.getController('Manage').view.show()
this.showUpdateForm();
}
}
});
},
showUpdateForm: function(){
// Get manage panel from container
var form = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('updateDaskalosBox').show();
console.log('form is:');
console.log(form);
console.log('show update form');;
},
});
View:
Ext.define('MyApp.view.Manage', {
layout: 'border',
extend: 'Ext.container.Container',
renderTo: Ext.getBody(),
id: "manageContainer",
// todo: not resizing correctly
width: '100%',
height: '100%',
items: [{
region: 'west',
xtype: 'treepanel',
itemId: 'navTree',
width: 150,
split: true,
rootVisible: false,
title: 'Navigation',
tbar: [
{ text: 'Logout', itemId: 'logoutButton' }
]
},
{
region: 'center',
xtype: 'container',
itemId: 'manageContentPanel',
layout: {
type: 'border',
//columns: 3,
//deferredRender: true
},
items: [
{
itemId: 'lastDayUpd',
title: 'Manage Daskalos',
xtype: 'panel',
buttons: [
{
text: 'Update',
itemId: 'updButton'
},
{
text: 'Back',
itemId: 'backButton',
}
],
html: 'Last Day Updated: '
},
{
xtype: 'messagebox',
itemId: 'updateDaskalosBox',
layout: 'fit',
title: 'Update daskalos',
//html: 'A pop up',
//floating: true,
//closable : true,
items: [
{
xtype: 'panel',
itemId: 'updateDaskalosPanel',
//layout: 'fit',
items: [
{
xtype: 'form',
itemId: 'updateDaskalosForm',
//url: '', // to fill
layout: 'fit',
//renderTo: 'updateForm',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 100
},
buttons: [
{
text: 'Update',
itemId: 'updButton',
formBind: true,
},
{
text: 'Cancel',
itemId: 'cancelButton',
}
],
items: [
//Just one field for now to see if it works
//{
//xtype: 'datefield',
////anchor: '100%',
//fieldLabel: 'From',
////name: 'from_date',
////maxValue: new Date() // limited to the current date or prior
//},
{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}
],
},
],
},
],
},
]
}
],
});
After controller initialization, I want when the user clicks the update button to pop up a window that contains a form to post data to the server. The pop-up is thrown, but the form inside the panel that the window contains as child item seems that has the problem. Does anyone see what I miss here?
Thanks for the help! Babis.

Why you dont just create a window containing a form? Your "pop-up window" is a messagebox, that you abuse. There is also no need to put a form in a panel. A form extends from panel.
// you have some trailing commas in your code

Ext.define('MyApp.view.Manage', {
extend: 'Ext.window.Window',
alias : 'widget.manage',
requires: ['Ext.form.Panel'],
height: 300,
width: 600,
layout: 'fit',
resizable: false,
autoShow: true,
animCollapse:false,
iconCls: 'icon-grid',
initComponent: function() {
this.items = [{
xtype: 'form',
/*
*
* Start you code for form
*/
}];
this.callParent(arguments);
}
});
You want a form in a window, but can you tell why are you extending container ??

How To get reference of the Collapse Tool of Panel

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.

ExtJS 3.4: Render buttons in hidden tabpanel

In ExtJs 3.4 I have a TabPanel with two tabs, the second tab contains a FormPanel, what contains a ButtonGroup. If the second tab is active, when I load the page, then everything is good, but when the first tab is active and I switch to the second, then there is no button in the button group, just the label. Here is the code:
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width:500,
forceLayout: true,
activeTab: 0,
deferredRender: false,
defaults:{autoHeight: true},
items:[
{contentEl:'tab1', title: 'Tab1'},
{contentEl:'tab2', title: 'Tab2'}
]
});
var form = new Ext.form.FormPanel({
width : 400,
autoHeight: true,
renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [
{
xtype: 'buttongroup',
fieldLabel: 'Label',
items:
[
{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
},
{
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}
]
}
]
});
I set the deferredRender: false and forceLayout: true, also tried the hideMode: 'offsets', but these didn't help.

Well, I add the hideMode: 'offsets' to the defaults of the TabPanel and it works fine. I did the same a few years ago without significant result.

Remove renderTo: 'form' and look at the working code here:
var form = new Ext.form.FormPanel({
width: 400,
autoHeight: true,
//renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [{
xtype: 'buttongroup',
fieldLabel: 'Label',
items: [{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
}, {
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}]
}]
});
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width: 500,
forceLayout: true,
activeTab: 0,
//deferredRender: false,
height: 300,
defaults: {
autoHeight: true
},
items: [{
contentEl: 'tab1',
title: 'Tab1'
}, {
//contentEl: 'tab2',
title: 'Tab2',
items: [form]
}]
});