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

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)

Related

Sencha Ext Panel Fill Browser

I have the following application and it fills the screen no problem horizontally. I would like it to fill out vertically as well.
var missionsPanel = new Ext.panel.Panel
(
{
title: 'Active Missions', width: '35%', renderTo: Ext.getBody(), layout: { type: 'vbox', align: 'stretch', padding: 5}
}
);
resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'ISR Toolkit v3.0',
renderTo: Ext.getBody(),
layout: { type: 'hbox', align: 'fit', padding: 5 },
items:
[ missionsPanel, { xtype: 'splitter' },
{ title: 'Person Details', bodyPadding: 5, flex: 2,
items:
[
{ itemId: 'txtName', fieldLabel: 'Name:', xtype: 'textfield'},
{ itemId: 'txtAge', fieldLabel: 'Age', xtype: 'textfield'},
{ itemId: 'btnShow', xtype: 'button', height: '60', width: 125, align: 'right', text: 'Show Data', handler: createNewMissionWindow }
]
}
]
});
I am sure it's something small I a missing.
The easiest way would be to create a Viewport with a fit layout, and the only item being your panel (removing the renderTo configs, as well as any height/width).

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();
}

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]
}]
});

Ext JS 4.2.1 Layout run failed

I just want to create a layout where i've defined my custom application header.. and them some content beneath.. e.g. a border layout...
Ext.define('app.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border',
'Ext.layout.container.Anchor',
'Ext.form.field.Text'
],
xtype: 'app-main',
layout: { type: 'anchor' },
items: [
{ xtype: 'app-header' },
{
//xtype: 'container',
layout: 'border',
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
}, {
region: 'center',
xtype: 'tabpanel',
items: [{ ...
this code is always returning the error Layout run failed... When i change the layout of my second item which should be a border it works.. Somehow it doesnt get along with the border layout...
Can someone tell me why? A hint for a solution would be nice too :)
I am an ext js layout newb :(
To create a header with a top header:
new Ext.container.Viewport({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'app-header'
}, {
flex: 1,
layout: 'border',
xtype: 'container',
items: [] // border stuff
}]
});

Extjs 4: use ux.center

I'm having trouble using the custom layout ux.center. Am I doing the Ext.Loader or the Ext.require wrong? The Center.js file is under /var/www/application/ux/layout/Center.js and this file (app.js) is under /var/wwww/application/app.js
Ext.Loader.setPath('Ext.ux', '/var/www/application/ux');
Ext.require('Ext.ux.layout.Center');
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.container.Viewport', {
width: 1150,
height: 'auto',
autoScroll: 'true',
layout: 'anchor',
items:[{xtype: 'userpanel'},
{
xtype: 'panel',
width: 1150,
layout:'ux.center',
items:[{
xtype: 'panel',
width: 1150,
widthRatio: .75,
items: [{
xtype: 'userbutton',
action: '',
text: 'Print'
},
{
xtype: 'userbutton',
action: '',
text: 'Download'
},
{
xtype: 'userbutton',
action: 'chart',
text: 'Chart!'
}]
}]}]
});
}});
Thank you for any tips on getting this layout to work
You should run Ext.application method after extjs loads /var/www/application/ux/layout/Center.js script. To do this, just add a callback using Ext.onReady
Ext.Loader.setPath('Ext.ux', '/var/www/application/ux');
Ext.require('Ext.ux.layout.Center');
Ext.onReady(function () {
Ext.application({ ... });
});
But the right way is using "requires" configuration property
Ext.application({
requires: ['Ext.ux.layout.Center'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.container.Viewport', {
width: 1150,
height: 'auto',
autoScroll: 'true',
layout: 'anchor',
items:[{xtype: 'userpanel'},
{
xtype: 'panel',
width: 1150,
layout:'ux.center',
items:[{
xtype: 'panel',
width: 1150,
widthRatio: .75,
items: [{
xtype: 'userbutton',
action: '',
text: 'Print'
},
{
xtype: 'userbutton',
action: '',
text: 'Download'
},
{
xtype: 'userbutton',
action: 'chart',
text: 'Chart!'
}]
}]}]
});
}});
Also you can read following material http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Application
You can also create your own class for viewport and put it in the [appFolder]/view/ folder
Ext.define('AM.view.Viewport', {
extend: 'Ext.view.Viewport',
requires: ['Ext.ux.layout.Center'],
width: 1150,
height: 'auto',
autoScroll: 'true',
layout: 'anchor',
initComponent: function () {
this.items = [{
xtype: 'userpanel'
}, {
xtype: 'panel',
width: 1150,
layout:'ux.center',
items:[{
xtype: 'panel',
width: 1150,
widthRatio: .75,
items: [{
xtype: 'userbutton',
action: '',
text: 'Print'
}, {
xtype: 'userbutton',
action: '',
text: 'Download'
}, {
xtype: 'userbutton',
action: 'chart',
text: 'Chart!'
}]
}]
}];
this.callParent();
}
});
And use Ext.app.Application config property autoCreateViewport. It will load [appFolder]/view/Viewport.js script and use it as viewport
Ext.application({
name: 'AM',
appFolder: **insert you app folder path here**, // in you case it will be 'application'
controllers: ['Users'],
autoCreateViewport: true
});

Categories