We Keep Coding

Is It right way to create side collapsible panel navigation in extjs

Ext.application({
name: 'Fiddle',
launch: function() {
var mainView = new Ext.panel.Panel({
xtype: 'panel',
//title: 'Container',
layout: 'border',
itemId: 'bigContainer',
height: '100vh',
items: [{
xtype: 'panel',
//title: 'Left Panel',
itemId: 'menuLeftPanel',
region: 'west',
scrollable: true,
//width: 300,
//height: 900,
dockedItems:
[{
xtype: 'tabpanel',
collapseMode: 'header',
//animCollapse: 200,
dock: 'left',
id: 'moduleTas',
itemId: 'moduleTabs',
width: 400,
collapsible: true,
headerPosition: 'left',
hideCollapseTool: true,
//activeTab: 0,
tabBarHeaderPosition: 0,
tabRotation: 0,
items: [{
xtype: 'panel',
scrollable: 'y',
tabConfig: {
xtype: 'tab',
iconCls: 'x-fa fa-home',
tooltip: "Home",
listeners:
{
click: function(btn, e, eOpts)
{
var tab = Ext.getCmp('moduleTas');
tab.toggleCollapse();
}
}
},
},
]
},
]
}],
renderTo: Ext.getBody()
});
}
});

Sencha provides an "Admin Dashboard" example application when you download the framework, that implements collapsible side navigation. All the source code for the below layout (and every component found in the kitchen sink) can be found in the framework download.
Admin Dashboard
Admin Dashboard Source Code
This isn't something you should be recreating yourself (defeats the point of using a framework like Extjs)

How do I hide toolbar items from initcomponent

I have a button inside ExtJs toolbar as below
Ext.define('Member.view.members.MembersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
initComponent: function() {
Ext.getCmp('pinReset').hidden = true;
this.callParent();
}
});
I want the button to appear hidden after render. I thought Ext.getCmp('pinReset').hidden = true; will do since I have assigned the button an id. Getting the following error 'Cannot set property 'hidden' of undefined' on Chrome developer tools.
Extjs Version: 5.1

initComponent is called before the rendering.So it is not able to find the button.You can use 'afterrender' event instead for this.
Add following code instead of initComponent:
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
Working Code:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.grid.Panel', {
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
renderTo:Ext.getBody(),
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
});
}
});
<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>

You are using initComponent instead of afterRender in your codesnippet. Is that correct?
I would use the reference-property and use it like this:
items: [
{
xtype: 'button'
reference: 'myButton'
}
]
...
afterRender: function() {
this.lookupReference('myButton').setHidden(true);
this.callParent();
}

Losing scope in combobox ExtJS 4.2

I have a popup window with a combobox and a few buttons. The idea is to make a selection in the combobox and then either save the selection to a store or cancel. I have done this before and never had any problems, but with this code I get Uncaught TypeError: Cannot call method 'apply' of undefined whenever I try to interact with the combo. It seems to me like ExtJS is trying to run code meant for the store on the combobox.
I load the popup window with Ext.create('Account.Window.Reuse');
The definitions:
Ext.define('SimpleAccount', {
extend: 'Ext.data.Model',
idProperty: 'AccountID',
fields: [ {
name: 'AccountID',
type: 'int',
useNull: true
}, 'Name']
});
var userAccountReuseStore = Ext.create('Ext.data.Store', {
model: 'SimpleAccount',
storeId: 'userAccountReuseStore',
data: [{"AccountID":"1", "Name":"FirstAccount"},
{"AccountID":"2", "Name":"SecondAccount"},
{"AccountID":"3", "Name":"ThirdAccount"}]
});
Ext.define('Account.Reuse.ComboBox', {
extend: 'Ext.form.ComboBox',
alias: 'widget.accountReuseComboBox',
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
})
}
});
Ext.define('Account.Reuse.Fieldset', {
extend: 'Ext.form.FieldSet',
alias: 'widget.accountReuseFieldset',
initComponent: function(){
Ext.apply(this, {
items: [
{
xtype: 'label',
cls: 'text-important',
margin: '0 0 10 0',
style: 'display: block',
text: 'Only attach an account you have permission to use. After attaching the account you will not be able to use, remove, or edit it until approved by SCSAM'
},
{
xtype: 'accountReuseComboBox',
store: userAccountReuseStore
}
]
});
this.callParent();
}
});
Ext.define('Account.Reuse.Details', {
extend: 'Ext.form.Panel',
alias: 'widget.accountReuseDetails',
initComponent: function(){
Ext.apply(this, {
plain: true,
border: 0,
bodyPadding: 5,
fieldDefaults: {
labelWidth: 55,
anchor: '100%'
},
layout: {
type: 'vbox',
align: 'stretch',
flex: 1
},
items: [
{
xtype: 'accountReuseFieldset',
defaults: {
labelWidth: 89,
anchor: '100%',
layout: {
type: 'vbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 0},
align: 'stretch'
}
},
title: 'Details',
collapsible: false
}]
});
this.callParent();
}
});
Ext.define('Account.Window.Reuse', {
extend: 'Ext.window.Window',
alias: 'widget.accountWindowReuse',
initComponent: function(){
Ext.apply(this, {
title: 'Account Details',
width: 400,
autoShow: true,
modal: true,
layout: {
type: 'fit',
align: 'stretch' // Child items are stretched to full width
},
items: [{
xtype: 'accountReuseDetails',
id: 'attachAccountReuseForm'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'Attach',
id: 'saveButton',
handler: function(){
var rec = this.up('accountWindowReuse').down('accountReuseDetails').getValues();
var store = Ext.getStore('userAccountReuseAttachStore');
store.add(rec);
this.up('window').close();
}
},{
minWidth: 80,
text: 'Cancel',
handler: function(){
this.up('window').close();
}
}]
}]
});
this.callParent();
}
});

It looks like you forget call parent in your Account.Reuse.ComboBox initComponent function so combobox is not initialized properly.
Your Account.Reuse.ComboBox initComponent function should look like this:
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
});
this.callParent();
}

Switch view with ExtJS

It looks pretty easy but I'm unable to do it. I want to change the view after click on login button, this is my code:
app.js
Ext.require ('Ext.container.Viewport');
Ext.application({
name: 'MyApp',
appFolder: 'app',
views: [
'Login',
'Main'
],
controllers:[
'Login'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'loginView'
}]
});
}
});
Login.js (View)
Ext.define('MyApp.view.Login' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.loginView',
title: 'MyApp',
layout: {
type: 'hbox',
pack: 'center',
padding: 50
},
defaults: {
border: false,
width: 400,
height: 400
},
items: [{
xtype: 'panel',
html: '<img src="resources/img/img.jpg" />'
}, {
xtype: 'loginForm'
}]
});
Ext.define('MyApp.view.LoginForm', {
extend: 'Ext.form.Panel',
alias: 'widget.loginForm',
title: 'PSSP',
bodyPadding: 5,
layout: 'anchor',
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
anchor: '100%',
margins: '0 0 10 0',
allowblank: false,
xtype: 'textfield',
},
items: [{
fieldLabel: 'User',
name: 'username',
itemId: 'username',
}, {
fieldLabel: 'Password',
name: 'password',
itemId: 'password',
inputType: 'password',
}],
buttons:[{
text: 'Login',
listeners: {
click: function() {
var username = this.up('form').down('#username').getValue();
var password = this.up('form').down('#password').getValue();
this.fireEvent('login', username, password);
//Ext.Msg.alert('Datos', 'User: ' + username + '<br>Password: ' + password);
}
}
}]
});
Login.js (Controller)
Ext.define('MyApp.controller.Login', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'loginView button': {
login: this.loginUser
}
});
},
loginUser: function(username, password) {
// check if the username and password is valid
Ext.create('Ext.container.Viewport', {
items:[{
xtype: 'mainView'
}]
});
}
});
Main.js (View)
Ext.define('MyApp.view.Main' , {
extend: 'Ext.container.Viewport',
alias : 'widget.mainView',
layout: 'border',
items: [{
region: 'north',
title: 'MyApp'
}, {
region: 'west',
width: 250,
html: 'WEST'
//xtype: 'westView'
}, {
region: 'east',
width: 250,
html: 'EAST'
//xtype: 'eastView'
}, {
region: 'center',
html: 'CENTER'
//xtype: 'centerView'
}]
});
What I have to change to load MainView when I click on login button??? Now, when I click on it, Chrome shows this error:
Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong.
What's wrong in my code?
Thanks!

This is how I do it: The basic idea is to have a parent container (I prefer a Viewport, as it's the whole viewable browser area). Set its layout to card. It will contain 2 views, a Login View and a Main View. In your Controller, use setActiveItem to set the current view:
Ext.getCmp('ViewportID').getLayout().setActiveItem('ViewIndex');
You can reference to the Viewport however you like (personally I use ref in Controller).
Also I see that you're trying to create 2 Viewport. This is impossible because there can be only 1 Viewport at a time. See the docs for more detail.

ExtJs 4 MVC Nested Layouts

I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.
When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.
This is my background layout code:
Ext.define('DEMO.view.BackgroundLayout', {
extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [
'DEMO.view.Main'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});
The main layout is this:
Ext.define('DEMO.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainview',
requires: [
'DEMO.view.MyGridPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
console.log('bb');
Ext.applyIf(me, {
items: [
{
xtype: 'mygridpanel',
region: 'center',
forceFit: false
},
{
xtype: 'container',
height: 38,
forceFit: false,
region: 'north',
items: [
{
xtype: 'button',
height: 34,
id: 'btnLogout',
action: 'logout',
text: 'Logout'
}
]
}
]
});
me.callParent(arguments);
}
});
As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:
Ext.define('DEMO.view.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
border: '',
height: 106,
title: 'My Grid Panel',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Sales',
text: 'Sales'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
disabled: true,
id: 'btnDelete',
allowDepress: false,
text: 'Delete'
},
{
xtype: 'button',
disabled: true,
id: 'btnEdit',
allowDepress: false,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
What I'm doing wrong?.
Thanks in advance,
Leonardo.