I am having some difficulty w/ EXT generated elements placement. I have not used any layouts in the past, and now, that I need it, it's all an uphill battle :-)
I have a grid and want to have 4 buttons below this grid vertically/horizontally centered
I have the following issues:
#1. How do center those buttons
#2. If I do not render the grid to a pre-defined on my page, then all grid loses
autofit and all columns end up w/ equal width
#3. Even w/ 'bodyBorder: false', i still have border around 'controlPanel'
Thanks for your help,
mike
This is what I am trying to achieve.
++++++++++++++++++++++++++++++++++
Adaptive Grid-Based Document Layout::
File Format: PDF/Adobe Acrobat - View as HTMLparticular layout.Other approacheshaveinvolvedcreatinganun-. derlying grid for page layoutautomatically by looking atthe. page‘scontent[Feiner 2:99] or
http://grail.cs.washington.edu/pub/papers/Jacobs2003.pdfHOME |
GUUUI - GoLive - the interaction designer's hammer and nail::
In worst cases it can lead to false assumptions about usability problems, With its unique layout grid, we can drag and drop page elements onto pages
http://www.guuui.com/issues/03_04.phpHOME |
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
Subtraction 7.1: Grid Computing… and Design::
The layout grid I used for Subtraction Six.5 was improvised and inconsistent — I The high-contrast is ofcourse nonesense, that’s only on this demo page,
http://www.subtraction.com/2004/12/31/grid-computiHOME |
Gridding the 960 ~ Authentic Boredom::
That YUI Grid Builder is amazing! Though I’m having problems in downloading the CSS that it produces. I’ve created a layout I’ve always wanted but never
http://www.cameronmoll.com/archives/2006/12/gridding_the_960/HOME |
++++++++++++++++++++++++++++++++++
b1 b2 b3 b4
var grid = new Ext.grid.GridPanel({
id: 'gridDiv',
//renderTo: 'campaignGrid',
width: 940,
height: 400,
frame: true,
store: ds,
cm: cm,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
autoScroll:true,
layout: 'fit',
loadMask: true,
stripeRows: true,
viewConfig: {
autoFill: true,
forceFit: true
},
tbar: new Ext.PagingToolbar( {
pageSize: pSize,
store: ds,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display",
items:
}),
region: 'center'
});
var control = new Ext.Panel({
region: 'south',
// renderTo: 'campaignControl',
collapsible: false,
margins:'5 5 5 5',
width: 940,
height: 50,
layout: 'table',
frame: false,
bodyBorder: false,
layoutConfig: {
columns: 4
},
items: [
{
xtype: 'button',
text: 'Activate'
}, {
xtype: 'button',
text: 'Create'
}, {
xtype: 'button',
text: 'Modify'
}, {
xtype: 'button',
text: 'Delete'
}
]
});
var campPanel = new Ext.Panel({
width: 940,
height: 450,
layout: 'border',
bodyBorder: false,
frame: false,
renderTo: 'grid-panel',
items: [
grid
,control
]
});
Ext.panel has a 'buttonAlign' config property. You are probably also more interested in the 'border' config option rather than 'bodyBorder'.
Thanks!
:) I just suggested putting them in.
When changing content and changing out panels, I find it easier to have the layout prebuilt, and then change out panels within that layout.
But Animal is an animal. We may want to listen to him... :)
Thanks guys.
border is ok now. but I did not had much success w/ buttons placement.
If I add my buttons using items property (see attachment #1)
Considering the layout is 'table', I tried
defaults: {
bodyStyle:'padding:15px 20px'
}
applied to control panel, still had no effect.
If I use buttons property, then I get what I want position wised
but blank panel leaves a few pixel clearance between grid panel and buttons panel.
(attachment #2)
Is there settings to set buttons panel background to some diff. color?
As a rule, I always create a layout using Panels, and then add widgets into them.
It adds a bit of code and a bit of overhead, but it makes many things easier. This should solve the rendering problem.
Sorry I don't have a solution for your centering buttons problem.
var campPanel = new Ext.Panel({
width: 940,
height: 450,
layout: 'border',
bodyBorder: false,
frame: false,
renderTo: 'grid-panel',
items: [
new Ext.Panel({
layout: 'fit',
items: [grid]
}),
new Ext.Panel({
layout: 'fit',
items: [control]
})
]
});
Better would be removing the redundant layout:'fit' Panels:
var campPanel = new Ext.Panel({
width: 940,
height: 450,
layout: 'border',
bodyBorder: false,
baseCls: 'plain',
frame: false,
renderTo: 'grid-panel',
items: [ grid, control ]
});
 Where's The Advantage In Windows Genuine Advantage?
 Stocks Bounce After S&P Joins Bear Market
|
page layout/grid problem