PDA

View Full Version : Fit issue



robertoroberto
23 Jul 2009, 7:45 AM
Hi
I have some problem with fit contents into the panel (in a viewport)

I would like that the Grid will fit the screen (having the paging toolbar on bottom)

http://img43.imageshack.us/img43/3753/fitissue.th.jpg (http://img43.imageshack.us/i/fitissue.jpg/)

Any idea?

this is my code



var iUserMenuItems = [];
var myData = [['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', false], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', true], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', true], ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', false], ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am', false], ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', false], ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', false], ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', false], ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', false], ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', false], ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', false], ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', false], ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', false], ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', false], ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', false], ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', false], ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', false], ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', false], ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', false], ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', false], ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', false], ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', false], ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', false], ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', false], ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', false], ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', false], ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', false], ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', false], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [{
name: 'company'
},
{
name: 'price',
type: 'float'
},
{
name: 'change',
type: 'float'
},
{
name: 'pctChange',
type: 'float'
},
{
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
},
{
name: 'selected',
type: 'boolean'
}]
});
store.loadData(myData);
function buildWireframeAccordion() {
iABSMainPanel.removeAll(true);
var vTitlePanel = new Ext.Panel({
title: 'Sales Order Line Deliveries',
items: []
});
iABSMainPanel.add(vTitlePanel);
var vBreadCrumbsPanel = new Ext.Panel({
title: "Order 001 CNT 399393 Line 001 002",
collapsible: true,
border: false,
items: []
});
vTitlePanel.add(vBreadCrumbsPanel);
var vHeadersPanel = new Ext.Container({
autoHeight: true,
items: []
});
vBreadCrumbsPanel.add(vHeadersPanel);
var vHeader1Panel = new Ext.TabPanel({
activeTab: 0,
items: []
});
var vHeader1TabPanel = new Ext.Panel({
tabCls: 'right-tab',
// CHECK IT
title: 'Order',
layout: 'form',
items: [new Ext.form.TextField({
allowBlank: true,
fieldLabel: 'Company Code'
})]
});
vHeader1Panel.add(vHeader1TabPanel);
vHeadersPanel.add(vHeader1Panel);
var vHeader2Panel = new Ext.TabPanel({
activeTab: 0,
items: []
});
var vHeader2TabPanel = new Ext.Panel({
tabCls: 'right-tab',
// CHECK IT
title: 'Line',
layout: 'form',
items: [new Ext.form.TextField({
allowBlank: true,
fieldLabel: 'Warehouse Code'
})]
});
vHeader2Panel.add(vHeader2TabPanel);
vHeadersPanel.add(vHeader2Panel);
var vToolbarPanel = new Ext.Container({
autoHeight: true,
split: false,
items: []
});
var vGenericToolbar = defineToolbar("ABS_TOP_TOOLBAR", 50);
var vCustomToolbar = defineToolbar("ABS_CUSTOM_TOOLBAR", 26);
buildToolbars(vGenericToolbar, vCustomToolbar);
vToolbarPanel.add(vGenericToolbar);
vToolbarPanel.add(vCustomToolbar);
var vDataPanel = new Ext.Panel({
tbar: vToolbarPanel,
layout: 'fit',
items: []
});
buildDataGrid(vDataPanel, false);
vTitlePanel.add(vDataPanel);
iABSMainPanel.doLayout();
}
function defineSetupToolbar(aIDSetupToolbar) {
vSetupToolbar = new Ext.Toolbar({
id: aIDSetupToolbar,
autoHeight: true
});
vSetupToolbar.addButton(new Ext.Button({
text: "",
tooltip: "Prova",
handler: '',
icon: 'images/com/dat/abs/web/gear.png',
iconAlign: 'top',
scale: 'small'
}));
vSetupToolbar.addText({
text: 'View:'
});
vSetupToolbar.addField(new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: ['myId', 'displayText'],
data: [[1, 'item1'], [2, 'item2']]
}),
valueField: 'myId',
displayField: 'displayText'
}));
//QUESTO ELEMENTO INDICA ALLA TOOLBAR DI ALLINEARE GLI TIEM SUCCESSIVI SULLA DESTRA
vSetupToolbar.addItem('->');
vSetupToolbar.addItem(new Ext.Container({
autoHeight: true,
items: [new Ext.form.Label({
text: 'Position: Off, Sort: Off, Filter: Off'
})]
}));
return vSetupToolbar;
}
function defineToolbar(aIDToolbar, aHeight) {
return new Ext.Toolbar({
id: aIDToolbar,
height: aHeight,
items: []
});
}
function buildToolbars(aGenericToolbar, aCustomToolbar) {
var vObjectView = Ext.getCmp("ABS_COLLECTION_DETAIL");
var vObjectPanel = Ext.getCmp("ABS_COLLECTION_DETAIL_PANEL");
var vGrid = Ext.getCmp("ABS_COLLECTION_GRID");
aGenericToolbar.addButton(new Ext.Button({
id: "AAA2",
text: "create",
tooltip: "create",
handler: '',
icon: "images/com/dat/abs/web/new.png",
iconAlign: 'top',
scale: 'medium'
}));
aGenericToolbar.addButton(new Ext.Button({
id: "AAA",
text: "print",
tooltip: "print",
handler: '',
icon: "images/com/dat/abs/web/print.png",
iconAlign: 'top',
scale: 'medium'
}));
aGenericToolbar.addButton(new Ext.Button({
id: "AAA3",
text: "save",
tooltip: "save",
handler: '',
icon: "images/com/dat/abs/web/save.png",
iconAlign: 'top',
scale: 'medium'
}));
aGenericToolbar.addButton(new Ext.Button({
id: "AAA4",
text: "save&new",
tooltip: "save & new",
handler: '',
icon: "images/com/dat/abs/web/save_new.png",
iconAlign: 'top',
scale: 'medium'
}));
aCustomToolbar.addButton(new Ext.Button({
id: "BBB",
text: "additional",
tooltip: "additional",
handler: '',
iconAlign: 'top',
scale: 'medium'
}));
var vSplitButton = new Ext.SplitButton({
text: 'Options',
menu: new Ext.menu.Menu({
items: [ // these items will render as dropdown menu items when the arrow is clicked:
{
text: 'Item 1'
},
{
text: 'Item 2'
}]
})
});
aCustomToolbar.addButton(vSplitButton);
}
function buildDataGrid(aGridPanel) {
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
tbar: defineSetupToolbar("ABS_SETUP_TOOLBAR"),
columns: [{
id: 'company',
header: "Company",
width: 160,
sortable: true,
dataIndex: 'company'
},
{
header: "Price",
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
},
{
header: "Change",
width: 75,
sortable: true,
dataIndex: 'change'
},
{
header: "% Change",
width: 75,
sortable: true,
dataIndex: 'pctChange'
},
{
header: "Last Updated",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
header: "Selected",
dataIndex: 'selected',
editable: true
}],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
//autoHeight: true,
//autoWidth: true,
//height : 'auto',
//width : 'auto',
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
aGridPanel.add(grid);
}
var iABSMainPanel = null;
function buildUserCompanyBox() {
var vPanel = new Ext.Container({
width: '500',
border: false,
layout: 'form',
cls: 'topFields',
items: []
});
var vField1 = new Ext.form.DisplayField({
fieldLabel: "Field 1",
labelSeparator: '',
value: "AAA",
autoWidth: true,
autoHeight: true
});
vPanel.add(vField1);
var vField2 = new Ext.form.DisplayField({
fieldLabel: "Field 2",
labelSeparator: '',
value: "BBB",
autoWidth: true,
autoHeight: true
});
vPanel.add(vField2);
var vField3 = new Ext.form.DisplayField({
fieldLabel: "Field 3",
labelSeparator: '',
value: "CCC",
autoWidth: true,
autoHeight: true
});
vPanel.add(vField3);
return vPanel;
}
function buildSearchMenuPanel() {
var vSearchField = new Ext.form.ComboBox({
name: 'ABS_TextToSearch',
id: 'ABS_TextToSearch',
allowBlank: true,
enableKeyEvents: true,
disableKeyFilter: true,
hideTrigger: true,
labelSeparator: '',
labelStyle: 'display:none',
mode: 'local',
minChars: 3,
width: 200,
editable: true,
displayField: 'text',
valueField: 'text'
});
return new Ext.form.FormPanel({
labelWidth: 75,
labelAlign: 'top',
buttonAlign: 'left',
bodyStyle: 'padding:10px;padding-bottom:0px;',
border: false,
autoWidth: true,
autoHeight: true,
items: vSearchField
});
}
function buildFavoritesPanel() {
return new Ext.form.FormPanel({
title: "FAVORITES",
collapsible: true,
border: false,
id: 'ABS_target',
bodyStyle: 'font-size:13px',
items: []
});
}
function buildAccordionMenuItems() {
var vItems = buildMenuPanels();
vItems.push(new Ext.Panel({
id: 'ABS_recentMenu',
title: "Recents",
border: false
}));
return new Ext.Panel({
id: 'ABS_accordionMenu',
layout: 'accordion',
border: false,
layoutConfig: {
animate: true
},
items: vItems
});
}
Ext.onReady(function () {
// The main layout (beside the menus)
iABSMainPanel = new Ext.Container({
id: 'ABS_main-panel',
region: 'center',
// this is what makes this panel into a region within the containing layout
layout: 'fit',
margins: '2 5 5 0',
border: false,
items: []
});
buildWireframeAccordion();
var vView = new Ext.Viewport({
layout: 'border',
items: [iABSMainPanel]
});
vView.doLayout();
})


thanks

30 Jul 2009, 9:01 AM
Wow! you're doing all of that in the global namespace??

ok, if you expect your grid to fit, why are you assigning height and width?

Don't overnest! (Boy, i hope nige doesn't see this thread).

No need to secify a new container if you're using the viewport. Also, no need to call viewport.doLayout. It's wasteful.

No need to use a border layout if you're just going to use one item, use fit.

In all seriousness, following this has given me a little of a headache. I would highly suggest looking at some of the Ext JS widget source files and learn how to properly format your code so.

Look at the examples in the SDK. There are much better ways of achieving what you're looking to achieve.

robertoroberto
30 Jul 2009, 11:19 PM
Hi Garcia and TY

I'm really newbie of ExtJS....

can you explain me "
you're doing all of that in the global namespace" ?

Do you means JS function and attribute declared as global in JS ?
I'm doing some test to verify how can I build the layout.
My final version will be to create new ExtJS component according my business rule (extending std ExtJS class.. using plugins etc etc.....)

I fix the fit issue.. and I'm suign also your extension of the border layout in order to display a title in collapsed panel.... I believe this feature should be a standard one in the ExtJS... like many others done from the community and also from ExtJS team people...

I would appreciate if you give me some suggestion about this (attached ) example .
It is only a test case... I remove the doLayout on the Viewport.

I'm try to investigate also your comment
No need to secify a new container if you're using the viewport

In the Viewport actually I have only the center region... but at the end I will have also a west and north region

(of couse I will use external link.. e.g for ux extensions...)
Ty Again