I am new to ext JS and I am tryin gto place 3 components in a FormPanel but I don't know ho wto align them in the center.
Here is my code
var durationForm = new Ext.FormPanel({
border : false,
labelAlign : 'top',
frame : true,
bodyStyle : 'padding-left:475px;',
items: [{
items: [{
rowWidth : .5,
layout :'column',
items:[{
columnWidth : .13,
layout : 'form',
items : [getNewLabel('<br/><font size="3">Duration: </font>')]
},{
columnWidth : .20,
layout : 'form',
items : [fromDate()]
},{
columnWidth : .17,
layout : 'form',
items : [toDate()]
}]
}]
}]
});
durationForm.render(Ext.getBody());
This shows output like this
But I want components to be align in the center of the panel. Anyone know how to do it?
I have solved this problem by using 'table' layout:
{
layout : 'fit', // parent panel should have 'fit' layout
items : [ // and only one item
{
xtype : 'panel',
border : false, // optional
layout : {
type : 'table',
columns : 1,
tableAttrs : {
style : {
width : '100%',
height : '100%'
}
},
tdAttrs : {
align : 'center',
valign : 'middle',
},
},
items : [ // a single container for nested components
{
xtype : 'panel',
layout : 'fit',
cellId : 'cell_id', // this one will be placed as id for TD
items : [
{}, {}, {} // nested components
]
}
]
}
]
}
{
//...
layout:'hbox',
layoutConfig: {
padding:'5',
pack:'center',
align:'middle'
},
items:[{
columnWidth : .13,
layout : 'form',
items : [getNewLabel(...)]
},{
columnWidth : .20,
layout : 'form',
items : [fromDate()]
},{
columnWidth : .17,
layout : 'form',
items : [toDate()]
}]
//...
}
See this
Just in case someone comes along looking for the answer like I did and couldn't find it here, use xtype:'splitter' between each item like so -
items:[{
xtype:'something'
},
{
xtype:'splitter'
},
{
xtype:'something-else'
}
}]
Related
I am developing an extjs and spring application. I got stuck in rendering view in new tab in center region of viewport. I have not able to create an instance of the view using ref in controller. please help and let me know where i am doing wrong..
Controller js
Ext.define('Book.controller.NewBook', {
extend : 'Ext.app.Controller',
views : ['book.NewBook'],
refs : [ {
ref : 'bookViewport',
selector : 'viewport' //whatever the xtype is of your viewport class
}, { ref : 'newBookForm',
selector : '#newBook panel',
autoCreate: true//whatever the xtype is of your viewport class
} ],
init : function() {
// add the components and events we listen to
this.control({
'viewport > panel' : {
render : this.onPanelRendered
},
'viewport' : {
afterrender : this.onNewBookLinkClick
}
});
},
onNewBookLinkClick : function() {
var view = this.getBookViewport();
var newBook = this.getNewBookForm();
alert(newBook.id);
Ext.get('tab1').on('click', function() {
var tabExists = false;
var p1=Ext.getCmp('panel').getLayout();
var p2=Ext.getCmp('panel');
var items = p2.items;
for (var i = 0; i < items.length; i++) {
alert(items[i].id);
if (items[i].id === 'NewBook') {
this.getViewport().panel.setActiveTab(i);
tabExists = true;
this.getViewport().panel.setActiveTab(i);
}
}
if (!tabExists) {
p2.insert(1, newBook);
p2.setActiveTab(0);
}
});
},
onPanelRendered : function() {
}
});
View
Ext.define('Book.view.book.NewBook', {
extend : 'Ext.form.Panel',
alias : 'widget.newBook',
config: {},
constructor: function (config) {
this.initConfig(config);
return this.callParent(arguments);
},
initComponent: function () {
Ext.apply(this, {
layout : 'vbox',
contentEl : 'center2',
title : 'New Book',
store : 'Books',
id : 'NewBook',
defaults : {
bodyPadding : 10
},
items : [ {
xtype : 'panel',
width : 900,
collapsible : true,
title : 'Book Details',
defaults : {
width : 230,
cls : 'form-field'
},
defaultType : 'textfield',
items : [ {
fieldLabel : 'Book Id',
name : 'bookId',
value : '',
// validator : function(event) {
// if (!(/[0-9]/.test(this.getValue()))) {
// return "This Field should be in Numbers only";
// }
// return true;
// }
} ]
}]
});
this.callParent(arguments);
}
});
ViewPort
Ext.define('Book.view.Viewport', {
extend: 'Ext.container.Viewport',
alias : 'widget.viewport',
requires: [
'Book.view.book.catCombo',
'Book.view.book.subCatCombo',
'Book.view.book.NewBook',
'Book.view.book.BookGrid',
'Book.view.book.SearchBook',
'Book.view.book.ModifyBook'
],
id : 'borderViewPort',
layout : 'border',
items : [
Ext.create('Ext.Component', {
region : 'north',
height : 0
}),
{
region : 'west',
stateId : 'navigation-panel',
id : 'west-panel',
title : 'Navigation Menu',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',
items : [ {
contentEl : 'west',
title : '<b>Books</b>',
html : '<div id="west" class="x-hide-display"><ul> <li>New Book</li> <li>Search Book</li> </ul></div>',
iconCls : 'nav'
}, {
title : 'Purchase Order',
iconCls : 'settings'
}, {
title : 'Total Sales',
iconCls : 'info'
} ]
},
panel = Ext.create('Ext.tab.Panel', {
region : 'center',
id : 'panel',
deferredRender : false,
activeTab : 0
}) ]
});
app.js
Ext.application({
name: 'Book',
models: ['Book'],
stores: ['Books','BookCategories','BookSubCategories'],
controllers: ['NewBook', 'SearchBook'],
autoCreateViewport: true,
launch: function() {
Ext.create('Book.view.Viewport');
}
}
);
Your center region config is incorrect since you have defined it as panel variable, but not actually made it a child of the viewport items.
Instead, use this approach:
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
},{
region: 'west',
stateId : 'navigation-panel',
id : 'west-panel',
title : 'Navigation Menu',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',
items : [ {
contentEl : 'west',
title : '<b>Books</b>',
html : '<div id="west" class="x-hide-display"><ul> <li>New Book</li> <li>Search Book</li> </ul></div>',
iconCls : 'nav'
}, {
title : 'Purchase Order',
iconCls : 'settings'
}, {
title : 'Total Sales',
iconCls : 'info'
}]
// the west region might typically utilize a TreePanel or a Panel with Accordion layout
},{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
items: [{
title: 'Tab 1'
},{
title: 'Tab 2'
}]
}]
});
This displays correctly, you should see how you can adapt this to your view definition.
The problem is solved by removing contentEl : 'center2', tag from my NewBook view.
contentEl uses the target element as its body content (the panel could still be rendered to any other element)
I am creating a Border layout using ExtJS4 MVC structure. I am defining north,west,center and south regions. All the regions are being displayed but the problem here is that, all the regions are starting at the top left corner of the screen so they are getting overlapped.
Can someone please help me get the border layout right,so that it fits the entire screen..??
Here is my code:
Border.js
Ext.define('IN.view.item.Border',{
extend : 'Ext.container.Container',
alias : 'widget.myborderlyt',
requires : [ 'Ext.layout.container.Border' ],
title : 'Border layout',
autoShow : true,
defaults : {
split : true,
width : 800,
height : 900
},
layout : 'border',
items : [
{
region : 'north',
xtype : 'panel',
title : 'North region title here',
html : 'Here is the north region..111111111111111111111111111'
} ,
{
region : 'west',
xtype : 'panel',
title : 'west region',
html : 'Here is west...1222221111111111',
width : 150
},
{
region : 'center',
xtype : 'panel',
html : 'Center region....aaaaaaaaaeeeeeeeeeeeeeeeeetttttttttccccccccc'
} ,
{
region : 'south',
height : 60,
html : "South region ..ggggggggggggggggggggggg"
}
]
});
app.js
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : 'IN',
appFolder : 'app',
controllers : [ 'Items' ],
launch : function() {
console.log('in LAUNCH-appjs');
Ext.create('Ext.container.Viewport', {
layout: 'border',
items : [ {
xtype : 'myborderlyt'
} ]
});
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items : [ {
xtype : 'myborderlyt'
} ]
});
In this code snippet, viewport's layout is 'border' but its item doesn't have a 'region' config.
This is what documentation says
Any Container using the Border layout must have a child item with
region:'center'. The child item in the center region will always be
resized to fill the remaining space not used by the other regions in
the layout.
So either change 'border' to 'fit' in viewport or add region config to 'myborderlyt'.
items : [ {
xtype : 'myborderlyt',
region : 'center'
} ]
I have a modal panel which will appear when a link is clicked with a listener config.
The link is placed inside a grid. The problem is when the link is clicked the modal is appearing with no data. Please help.
listeners : {
click : function() {
Ext.create('Ext.data.Store', {
storeId:'myStore',
fields:['qname'],
data:{'items':[
{ 'qname': 'Lisa'},
{ 'qname': 'Bart'},
{ 'qname': 'Homer'},
{ 'qname': 'Marge'}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.window.Window', {
title : 'Add Survey',
titleAlign : 'center',
id : 'surveyWindow',
height : 400,
width : 300,
//modal : true,
layout : 'fit',
closeAction:'close',
store:Ext.data.StoreManager.lookup('myStore'),
items : {
xtype : 'grid',
id :'addSurveyGrid',
border : false,
columns : [{
xtype : 'rownumberer'
},{
header : 'Survey Name',
sortable : false,
dataIndex : 'qname',
flex : 1
}]
}
}).show();
}
}
You are passing the store to the Window, not the grid. Fixed that for you.
Let's suppose that we have the following code:
Ext.create ( 'Ext.container.Viewport', {
layout : 'border',
items : [{
region : 'west',
xtype : 'panel',
collapsible : true,
id : 'panel1_id',
width : '45%'
}, {
region : 'center',
xtype : 'panel',
id : 'panel2_id',
width : '55%'
}]
});
As we can see, the first panel is collapsible. My question is:
is it possible to disable the panel's preview (when we click on the collapsed panel's header) when collapsed?
No, it is not collapased. You need to set collapsed: true for that.
Ext.create ( 'Ext.container.Viewport', {
layout : 'border',
items : [{
region : 'west',
xtype : 'panel',
collapsible : true, // this show the tool within the header
collapsed: true, // this collapses
floatable: false, // prevent floating on header-click when collapsed
id : 'panel1_id',
width : '45%'
},{
region : 'center',
xtype : 'panel',
id : 'panel2_id',
width : '55%'
}]
});
How can I set a textarea to always have the width and height of the parent panel that it is added to?
What I tried:
layout : 'fit',
items : [
{
xtype : 'panel',
title : 'XML definition',
lid : 'paneltextarea',
autoScroll: true,
autoWidth: true,
flex : 1
}
]
Into 'paneltextarea', this textarea will be added:
oTextarea = [{
xtype : 'textareafield',
name : 'message',
// value: strValue,
flex: 1,
border: 0,
style : { border: 0 },
lid: 'ietextarea'
}];
I forgot to set layout : 'fit' in the parent.