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
}]
});
Related
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)
I have an application created with Sencha Touch 2, I need to create a card layout with different views switched with a segmented button, (Following MVC concept) but It is not working..
My view:
config: {
layout: 'vbox',
items : [
{
xtype: 'header'
},
{
xtype: 'container',
layout: 'card',
items: [
{
xtype: 'container',
layout: 'vbox',
itemId: 'presence',
items: [
{
xtype: 'surveyHeaderBrands'
},
{
xtype: 'surveyEditorMatrix',
flex : 1
}
]
},
{
xtype: 'container',
layout: 'vbox',
itemId: 'auxiliaryFields',
items: [
{
xtype: 'button',
text: 'button'
}
]
},
{
xtype: 'container',
layout: 'vbox',
itemId: 'profiles',
items: [
{
xtype: 'button',
text: 'button2'
}
]
},
{
xtype: 'container',
layout: 'vbox',
itemId: 'photos',
items: [
{
xtype: 'button',
text: 'button3'
}
]
}
]
}
]
}
In the controller I don´t know what code should be the correct.. I have tested with this.control etcetera but It is not working... any clue, please!
Thank you
you can add ID to card container and then use setActiveItem on segmented button listener
Ext.getCmp("yourcardcontainerid").setActiveItem()
Example:
{
xtype: 'container',
layout: 'card',
id: 'mynewid',
items: [
{
xtype: 'container',
layout: 'vbox',
itemId: 'presence',
items: [
{
xtype: 'surveyHeaderBrands'
},
{
xtype: 'surveyEditorMatrix',
flex : 1
}
]
},
{
xtype: 'container',
layout: 'vbox',
itemId: 'auxiliaryFields',
items: [
{
xtype: 'button',
text: 'button'
}
]
},
]
}
then in your segmented button
xtype: 'button',
handler: function()
{
Ext.getCmp("mynewid").setActiveItem(1);
}
Definitely this is not the perfect answer since we are not using controller but it solve the problem.
I found the solution, I added 'flex:1' to the main container and now it is working..
Thank you for your help!
Newbie to ext.js: I am trying to understand what is this:
xtype: 'app-main'
means in my auto generated code. No documentation available. I guess this is a reference to so me alias, but I could not find it..
I used sencha cmd (latest may 2014 - ext.js 4.2.2) which autogenerated a number of files, which had xtype: 'app-main' in them...
Main.js
Ext.define('test12.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
xtype: 'app-main', <<<<-------
layout: {
type: 'border'
},
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Center Tab 1'
}]
}]
});
viewport.js
Ext.define('test12.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'test12.view.Main'
],
layout: {
type: 'fit'
},
items: [{
xtype: 'app-main'
}]
});
xtype is a config that allow you to instantiate the classes you define more easily
Example:
Ext.define('Myapp.view.MyCoolPanel',{
extend : 'Ext.panel.Panel',
xtype : 'coolpanel',
//some cool configs ...
});
//somewhere else
Ext.create('Ext.window.Window',{
//regular configs
items: [
{
xtype: 'coolpanel'
}
]
}).show();
see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-xtype
best regards
So, it seems that xtype: ... inside a Ext.defing( ... ) {
sets the new view to the xtype, in this case app-main.
Makes sense ;)
I have a window on which I want to put 4 grids like this
Grid1 Grid2
Grid3 Grid4
and I want the grids to auto resize on window resize.
It is simple to do this with combined hbox/vbox layout like I did in the example above:
Ext.onReady(function () {
var me = this;
me.store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
me.g1 = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
flex: 1,
store: me.store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
})
//g2,g3,g4 same with g1
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 600,
maximizable: true,
layout: 'fit',
items: [{
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[{
flex: 1,
xtype: 'container',
layout: 'hbox',
items:[me.g1, me.g2]
},{
flex: 1,
xtype: 'container',
layout: 'hbox',
items:[ me.g3, me.g4]
}]
}]
}]
}).show()
});
Everything works fine on chrome (the window opens in 1 sec), but on Internet Explorer, the window renders between 3-5 seconds, which is too much.
I also tried to float those 4 grids right and left and it rendered much better on IE, but that way I lose auto scroll on grids (unless I put each one in a fit container...) and when i click a record the grid goes up a number of pixels (~20px)
Any ideas on how to do this to work good on IE as well, without those 3-5 secs of rendering?
I am using ExtJs 4.0.7.
PS: The problem is not the loading of grid stores, they come on callback.
You definitely have more nesting than you need, which can significantly slow down the layout. Try getting rid of the 2 outer containers so it looks more like this:
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 600,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[{
flex: 1,
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[me.g1, me.g2]
},{
flex: 1,
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[me.g3, me.g4]
}]
}).show()
You might also consider initializing your window as hidden, then just show/hide it as you need it instead of re-creating it each time.
Following the answer on load an html file into a panel, I was able to load the HTML File taking the entire Panel, but how can I use that solution to load the file in a ITEM?
I have the following file Demo.js
Ext.define('Sencha.view.Demo', {
extend: 'Ext.Panel',
xtype: 'democard',
config: {
iconCls: 'search',
title: 'Demo',
styleHtmlContent: true,
scrollable: 'vertical',
layout: {
type: 'vbox'
},
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Demo'
},
{
xtype: 'fieldset',
width: "100%",
style: {float:'left'},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Text Label'
},{
xtype: 'button',
text: 'Press',
ui: 'confirm'
},{
width: '60px'
}]
},
{
> HERE I WANT TO INSERT THE HTML FILE <
}
]
}
});
I tried adding the following code in the marked area :
extend: 'HTMLPanel',
config: {
iconCls: 'home',
title: 'Holcim',
styleHtmlContent: true,
scrollable: 'vertical',
url: 'file.html',
}
But the 'file.html' will not show. How could I achieve this? I would like to include some HTML Files in some items.
Solved
Ok, going to use another another solution hope it helps. With this solution, I just have to write " html: loadURL('url') "