I have a border layout with a grid and a panel, the grid is in 'center', the panel is in 'south'.
The handle to resize the regions appears to work, but upon releasing the mouse, no change occurs, and the panels remain where they are.
var content = new Ext.grid.GridPanel({
id: 'bug-grid',
border: false,
view: new Ext.grid.GroupingView(),
region: 'center',
plugins: [filters],
store: bugStore,
colModel: columnModel,
trackMouseOver:false,
loadMask: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners: {
rowclick: {
fn: function(grid, rowIndex, event) {
var bug_id = grid.store.getAt(rowIndex).id;
Ext.getCmp('activity-panel').load(activity_lines_path(bug_id));
}
}
},
bbar: new Ext.PagingToolbar({
plugins: [filters],
pageSize: pageSize,
store: bugStore,
displayInfo: true,
displayMsg: 'Displaying bugs {0} - {1} of {2}',
emptyMsg: "No bugs to display"
})
});
var activity = new Ext.Panel({
id: 'activity-wrapper-panel',
region: 'south',
items: getActivityPanel(),
autoHeight: true,
bodyBorder: false,
border: false
});
var page = new Ext.Panel({
id: 'page',
layout: 'border',
defaults: {
split: true,
frame: true
},
items: [content, activity],
renderTo: 'application',
height: 800
});
I had autoHeight: true set, where they shouldn't have been. Removing that fixed the issue.
Related
I have a layout that I need to put side by side. The layout comprise of :
1- Combobox
2- multiselect combo
3-Textfield
Now I'm using the layout property of the container and setting it to vbox for the main cont and hbox for the inside container. Now for some reason my multisselect combo box is breaking when I try to select multiple options here.
attached is the gif for it.
below is the code:
var $cls = NS.AAA = function(cfg) {
$cls.superclass.constructor.call(this, Ext.apply({
height: 45,
layout: {
type: 'vbox',
align: 'stretch',
pack: 'center'
}
//end of xtype container
}, cfg));
};
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
}),
new ux.form.datepicker.SuperDateField({
anchor: '0',
ref: "../date",
cls: "purge-date",
hideTrigger2: true,
includeFutureOptions: false,
simpleMode: true,
isDateRange: true,
hidden: true
}),
new Qx.form.MultiSelectComboBox({
allowCommaInQuery: true,
anchor: '-5',
displayField: 'value',
valueField: 'value',
hideRefreshLabel: true,
ref: "../multiComboRegions",
refreshable: false,
mode: 'local',
emptyText: $L('Select Regions'),
enableCopyPaste: false,
anyMatch: true,
caseSensitive: false,
value: ["name"],
cacheSizes: false,
hidden: true,
store: this.multiCombo = new Ext.data.ArrayStore({
fields: ['value'],
data: this.tokenValues,
expandData: true,
}),
}),// end of multiSelect
}]
}); // end of filteritem
}
},
Any idea why this could be happening and how to fix this?
I have a window and a dataview inside it-
if (!win) {
var dataview = new Ext.DataView({
});
var win = new Ext.Window({
...
...
items: dataview
});
this.win=win;
}
var dview = this.win.items.itemAt(0);
dview.title = 'My view';
this.win.show();
However, the title do not display at first when window is shown but displays in second run. I am thinking of reloading window before showing. Any help?
Within items u can use:
xtype: 'dataview',
title: '',
Ext.define('PowerTrainCopy', {
extend: 'Ext.Window',
id: 'copyPTWin',
height:450,
width: 1110,
modal:true,
title: 'Copy Powertrain',
//plain: true,
border: true,
resizable: true,
draggable: true,
closable: true,
buttonAlign: 'center',
items: []
});
copyPTWin = Ext.create('PowerTrainCopy');
copyPTWin.show();
My viewport fits all browser but I want this to fit only 80% of browser's width. How can I do it?
This is my code below maybe you want to see it.
This is my viewport code:
var view = new Ext.Viewport({
layout: 'border',
autoScroll: true,
border: true,
items:[header,menuBar
,{
region: 'south',
collapsible: false,
padding: '25 25 25 25' ,
html:'Sanguis Team 2012',
border: true,
height: 100
},content
]
});
Ext.onReady(function(){
//var topHTML = '<img style="margin-left: 5px" src="Google_maps_logo.png" alt="logo" height="60" width="380">';
//Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
var item1 = new Ext.Panel({
title: 'Kan Bağışı',
collapsible : true,
collapsed: true,
padding: '5 5 5 5' ,
html: 'Nerede Kan verebilirim?<br/>' +
'Kan Bağışlama Süreci'
});
var item2 = new Ext.Panel({
title: 'Kan Hakkında',
collapsed: true,
padding: '5 5 5 5' ,
collapsible : true,
html: 'Kanın Yapısı ve Görevleri Nelerdir?<br/>' +
'Kan Bağışlarım Nerede kullanılıyor<br/>'+
'Kan Grupları Hakkında Bilgiler<br/>'+
'Kana Yapılan Testler<br/>'+
'Dünya ve Türkiyede Kan Bağışı'
});
var item3 = new Ext.Panel({
title: '<a style="color: #FFFFFF;" href="#">Sıkça Sorulan Sorular</a>',
collapsible :false,
titleCollapse: false
});
var item4 = new Ext.Panel({
title: 'Site Kullanımı',
collapsed: true,
padding: '5 5 5 5' ,
collapsible : true,
html: 'Site Nasıl Çalışmaktadır<br/>' +
'Kan İsteğinde Nasıl Bulunabilirim?<br/>'
});
var item5 = new Ext.Panel({
padding: '5 5 5 5' ,
title: 'Kullanıcı Girişi',
bodyStyle : 'padding : 10px',
layout : 'form',
items: [
{
xtype: 'field',
fieldLabel: 'E-posta',
width: 100
},{
xtype: 'field',
fieldLabel: 'Şifre',
inputType:'password',
width: 100
},
{
xtype: 'button',
text: 'Giriş',
style: {
marginLeft: '170px'
},
align: 'right',
handler : function(btn){
Ext.MessageBox.alert('','kontrol yapılacak!!');
}
},
{
border : false,
html:'Şifremi Unuttum'
}
]
});
var item6 =new Ext.Panel({
border: false,
html: '<img src="../images/kaydol.jpg" />'
});
var menuBar = new Ext.Panel({
//layout: 'accordion',
autoScroll: true,
defaults: {autoScroll: true},
region: 'west',
width: 310,
defaults: {
hideCollapseTool : false,
//border: true
},
layoutConfig: {
// titleCollapse: false,
animate: true,
// activeOnTop: true,
autoScroll: true
},
margins:'5 0 5 5',
split:false,
items: [item1, item2, item4, item3, item5,item6]
});
var content = new Ext.Panel({
region: 'center',
autoScroll: true,
margins:'5 5 5 0',
layoutConfig : {
align : 'stretch'
},
html:'Ajax content will come here'
});
var header=new Ext.Panel({
renderTo: document.body,
layout: 'fit',
region: 'north',
html: '<p align="center"><img src="../images/banner.jpg" align="middle"/></p>',
height:150,
tbar: [
{
text: '<b>Ana Sayfa</b>',
iconCls: 'bmenu',
handler: function(){ alert('blah'); }
},
{
text: '<b>Hakkımızda</b>',
iconCls: 'bmenu',
handler: function(){ alert('blah'); }
},
{
text: '<b>Duyurular</b>',
iconCls: 'bmenu',
handler: function(){
}
},
{
text: '<b>İletişim</b>',
iconCls: 'bmenu', // <-- icon
handler: function(){ alert('blah'); }
}]
});
var view = new Ext.Viewport({
layout: 'border',
autoScroll: true,
border: true,
items:[header,menuBar
,{
region: 'south',
collapsible: false,
padding: '25 25 25 25' ,
html:'<br/><br/><p align="center"><b>Sanguis Team 2012</b></p>',
border: true,
height: 100
},content
]
});
/*var templates = new Ext.Window({
width:900,
height:700,
id:'Templates',
resizable:false,
//layout:'border',
//border:true,
closable:false,
title:'Plantillas',
items:view
});
templates.show();*/
// view.render('anasayfa');
});
There is no maxwidth property on viewport, as viewport is always the size of the window.
This works:
use a viewport, set its layout to anchor
add a container to viewport
set its anchor property to '80% 100%'
put whatever you want inside the container. you can give the container border layout if you want
I want a specific height(600px,etc) of the middle content on page load:
Right now I have something similar to:
[_____________Header________________]
[Left Sidebar] [Middle Content Panel] [Right Sidebar]
[_____________Footer_________________]
Part of the code:
var viewport = new Ext.Viewport({
layout: 'border',
id: 'parent_container',
items: [{
region: 'north',
contentEl: 'header',
border: false
}, {
region: 'west',
id: 'left_sidebar_panel',
split: true,
width: 200,
minSize: 200,
maxSize: 400,
autoScroll: true,
contentEl: 'sidebar_container',
border: false
},{
region: 'center',
id: 'middle_content_panel',
layout: 'border',
border: false,
items: [{
region: 'north',
contentEl: 'main_content_header',
border: false
}...
Is there anyway to force middle_content_panel to have a specific height on page load/window expand? Or a way to grab the height of it with javascript some other way.
First you have to define your center content as variable
For example: var center= new Ext.Panel({
...
});
You can use setHeight Method center.setHeight(600);
From Documentation:
I'm about to go crazy.
I have my panels configured as follows:
accordion = new Ext.Panel({
id: 'accordionPanel',
title: 'Options',
region: 'center',
animCollapse: true,
border: false,
minWidth: 150,
maxWidth: 400,
autoScroll: true,
autoHeight: true,
layout: 'accordion',
layoutConfig: {
animate: true
}
});
var panelOne = new Ext.Panel({
region: 'center',
layout: 'border',
defaults: {
collapsible: true,
split: true
},
items: [{
title: 'Navigation',
region: 'west',
margins: '5 0 0 0',
animCollapse: true,
autoScroll: true,
autoHeight: true,
width: 200,
minWidth: 150,
maxWidth: 400,
layout: 'border',
layoutConfig: {
animate: true
},
items: [
Ext.Panel({
region: 'north',
border: false,
collapsible: false,
height: 65,
align: 'center',
html: myHtmlSource
}),
accordion
]
}, {
title: 'Main Content',
region: 'center',
layout: 'absolute',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
},
items: [someWindows],
collapsible: false,
margins: '5 0 0 0'
}]
});
viewport = new Ext.Viewport({
layout: 'border',
id: 'viewport',
items: [panelOne]
})
accordionPanel has a bunch of grids like this one inside of it:
var myGrid = new Ext.grid.Panel({
id: 'myGrid',
layout: 'anchor',
border: false,
title: 'My Grid',
width: 412,
store: store,
heigth: 300,
frame: false,
columns: [myColumns],
.....
});
Each of those grids is a separate accordion tab.
Now my problem is that those grids never display scrolls.
Just to be clear, this looks like the border layout that is displayed here.
Except that the navigation panel has an accordion inside of it with multiple grids in it.
Can't think of anything else to try.
Anyone?