PDA

View Full Version : I don't understand anything about layouts



aneriel
4 Aug 2010, 1:30 PM
I've been at this for the past 2 hours today, and at least 10 hours total ..so forgive my frustration ..but F#ck. Is there any documentation regarding the proper way to do things with layouts, besides the API? Take a look at this


items: [{
region: 'center',
layout: 'fit',
bodyStyle: 'padding-top: 3px; background-color: #999999;',
items: [{
xtype: 'panel',
layout: 'fit',
border: false,
items: [tabs]
}],

tbar: [{
xtype: 'toolbar',
border: false,
items: [{
text: 'Add Applicant',
iconCls: 'icon-add',
width: 100,
handler: function() {
createWin("");
}
}, '-', {
text: 'Remove Applicant',
iconCls: 'icon-delete',
width: 100,
handler: deleteTheRow
}, '-', {
text: 'Generate Resumes',
tooltip: 'This option will generate Printable/Emailable Resumes. <br /><Br /> You must select at least one applicant. <br /><br /> You can select multiple by holding down CTRL while making your selection',
handler: function() {
outputToPDF('resumes');
}
}, '-', {
text: 'Merge Records',
tooltip: 'This will merge two records into one',
handler: mergeRecords
}, {
text: 'Print Grid',
tooltip: 'This will print what you have displayed in the grid. <br /><br /> Not all fields will be printed <br /><br />',
handler: function() {
outputToPDF('grid');
}
}]
}]
}, {
region: 'west',
xtype: 'panel',
layout: 'fit',
border: false,
width: 250,
minWidth: 250,
collapsible: true,
collapsed: false,
split: true,
/**Begin setting up WEST region on applicant_tracking**/
items: [{
xtype: 'panel',
border: false,
bodyStyle: 'border: 2px solid #999999',
//Quick Search
items: [{
xtype: 'panel',
border: false,
bodyStyle: 'background-color: #999999;',
padding: '5px 5px 7px 5px',
items: [{
xtype: 'panel',
border: true,
title: 'Quick Search',
padding: '5px 5px 5px 5px',
items: [
new Ext.app.SearchField({
store: _ds,
id: 'search_field',
width: '90%'
})
]
}]
//Filters
}, {
title: 'Filters',
xtype: 'panel',
layout: 'fit',
collapsible: true,
border: false,
items: [{
xtype: 'panel',
padding: '2px',
items: [{
xtype: 'fieldset',
title: 'General',
collapsible: true,
items: [genfilterPanel]
}, {
xtype: 'panel',
layout: 'anchor',
items: [tree]
}]
}]
}]
}]
}]
});

I'm loving this ext stuff, but things that would take me 10 minutes with nested tables are causing me to cuss and pull my hair out. I cannot for the life of me get things to properly give me 100% height. I've have scoured the forums, examples ..you name it and i've been through it. My head hurts from reading so much stuff ..though i have picked up excellent ideas here and there, but nothing I have found has helped, what I would think, would be an easy thing to do. ..at least nothing i've understood thus far.

My issue lies in the west region. I cannot get my filter section to go the rest of the way so my Skills tree will touch the bottom of my window. I've tried everything i can think of and there's no telling what i've left in the above code that is just wrong. I have resigned myself to just changing layout types here and there with no general direction.

Help please!

GoneIn20Seconds
4 Aug 2010, 3:15 PM
Sorry to hear about the frustration. ExtJs does have a very steep learning curve. I've been on ExtJs for about a year and am still learning a lot, so hopefully I'm right in saying that all components have a default layout. So every time you create something with an "xtype" it will take on it's default layout unless you specify it to be otherwise.

So, in your code it looks like you are trying to stack components on top of each other. You might want to try the vbox layout. I've taken you code and modified it a bit. My changes are in red. I hope this helps.



items: [{
region: 'center',
layout: 'fit',
bodyStyle: 'padding-top: 3px; background-color: #999999;',
items: [{
xtype: 'panel',
layout: 'fit',
border: false,
items: [tabs]
}],

tbar: [{
xtype: 'toolbar',
border: false,
items: [{
text: 'Add Applicant',
iconCls: 'icon-add',
width: 100,
handler: function() {
createWin("");
}
}, '-', {
text: 'Remove Applicant',
iconCls: 'icon-delete',
width: 100,
handler: deleteTheRow
}, '-', {
text: 'Generate Resumes',
tooltip: 'This option will generate Printable/Emailable Resumes. <br /><Br /> You must select at least one applicant. <br /><br /> You can select multiple by holding down CTRL while making your selection',
handler: function() {
outputToPDF('resumes');
}
}, '-', {
text: 'Merge Records',
tooltip: 'This will merge two records into one',
handler: mergeRecords
}, {
text: 'Print Grid',
tooltip: 'This will print what you have displayed in the grid. <br /><br /> Not all fields will be printed <br /><br />',
handler: function() {
outputToPDF('grid');
}
}]
}]
}, {
region: 'west',
xtype: 'panel',
layout: 'fit',
border: false,
width: 250,
minWidth: 250,
collapsible: true,
collapsed: false,
split: true,
/**Begin setting up WEST region on applicant_tracking**/
items: [{
xtype: 'panel',
border: false,
bodyStyle: 'border: 2px solid #999999',
layout: "vbox",
layoutConfig: {
align: "stretch",
pack: "start"
},
//Quick Search
items: [{
xtype: 'panel',
height: 75,
border: false,
bodyStyle: 'background-color: #999999;',
padding: '5px 5px 7px 5px',
items: [{
xtype: 'panel',
border: true,
title: 'Quick Search',
padding: '5px 5px 5px 5px',
items: [
new Ext.app.SearchField({
store: _ds,
id: 'search_field',
width: '90%'
})
]
}]
//Filters
}, {
title: 'Filters',
flex: 1,
xtype: 'panel',
layout: 'fit',
collapsible: true,
border: false,
items: [{
xtype: 'panel',
padding: '2px',
//not sure what you are doing here. You might want to use the vbox layout again though
items: [{
xtype: 'fieldset',
title: 'General',
collapsible: true,
items: [genfilterPanel]
}, {
xtype: 'panel',
layout: 'anchor',
items: [tree]
}]
}]
}]
}]
}]


Good luck.

Elijah
4 Aug 2010, 5:05 PM
Strongly recommend you buy this book. The print is not out yet but you can get the early edition in PDF format. It has been a huge help for me.

ExtJS in Action http://www.manning.com/garcia/

aneriel
5 Aug 2010, 9:33 AM
Ok, here is what I ended up with


region: 'west',
xtype: 'panel',
layout: 'fit',
border: false,
width: 250,
minWidth: 250,
collapsible: true,
collapsed: false,
/**Begin setting up WEST region on applicant_tracking**/
items: [{
xtype: 'panel',
border: false,
bodyStyle: 'border: 2px solid #999999',
layout: 'vbox',
layoutConfig: {
align: 'stretch',
pack: 'start'
},
//Quick Search
items: [{
xtype: 'panel',
height: 75,
border: false,
bodyStyle: 'background-color: #999999;',
items: [{
xtype: 'panel',
border: true,
title: 'Quick Search',
padding: '5px 5px 5px 5px',
items: [
new Ext.app.SearchField({
store: _ds,
id: 'search_field',
width: '90%'
})
]
}]
//Filters
}, {
flex: 1,
xtype: 'panel',
layout: 'accordion',
border: false,
items: [{
title: 'Filters',
xtype: 'panel',
padding: '2px',
items: [{
xtype: 'fieldset',
title: 'General',
collapsible: true,
items: [genFilterPanel]
}, {
activeTab: 0,
xtype: 'tabpanel',
id: 'skillFilterPanel',
height: 150,
autoScroll: true,
items: [tree]

}]
}, {
title: 'Options',
xtype: 'panel',
layout: 'fit'
}]
}]
}]
}]
});

Thanks for the help with the Vbox. In the end I had to set an actual height though as I needed it to autoscroll and it wouldn't without it. And I had to use to http://examples.extjs.eu/?ex=gridincard this for proper formatting. If I would have put a 'panel' next after my tabpanel (which I was doing yesterday), it would cause it NOT to work again. I didn't even think about using 'title' under my tree for the title of the Tab. But it ended up working out.

I added some listeners to handle resizing of the window and all seems to be working on my machine. We'll see when my HR manager starts using it on her smaller resolution screen ..

And I did buy the book, but unfortunately i am so slammed from all directions (work and personal life) that I don't have time to read all of it. I'm hoping after this month I can sit back down and start on it again as what I'm programming is going to be an extremely large application and I would like to do things correctly from the start ..which probably won't matter seeing how i'm the IT/programming/fix the fax, copier, anything else electronics guy at work which means i'm constantly cutting corners and doing maintenance, aka taping until an actual disaster, comes and the upper management finally has their f#cking eyes opened to the fact we need more IT personal in here ..lol, but that's a different story....thanks for the help.

aneriel
5 Aug 2010, 9:34 AM
Oh ..and love this/couldn't agree more:


When it comes to new technologies, a week of training is worth 3 months of drudgery.