Web Page Load Speed

One of the things I've done in the past, especially for coding and ease of finding the information, I like to break up my css into separate files, into smaller more manageable files. Generally each class (php class) or section of the page is broken up into these files. I've also done a similar thing with my javascript files. However, one thing I've learnt lately is that loading 20 different files into the home page rather than 1 css file and 1 js file, causes a HUGE difference in load times.

Even white space in my code can cause a difference of seconds in loading a page. It starts to make sense why code that I download from the net is in one or two lines with very few spaces ;)

IE vs The Rest Of The World

You've just gotta love how you can create a web page and in almost EVERY web browser, it just works (so long as you've followed the standards) but with IE, most of the time, it just doesn't. And THEN, (and this is my favourite) it might work in 8, but probably have broken parts in 7 and MORE THAN LIKELY, just be absolutely stuffed in 6.

OK... so here's some of my little tidbits I've found for fixing some web pages in IE.

First off, Version 6.
1. Setting a height of 100% just WILL NOT WORK, unless you set the height of the parent div.
2. Remember, png's aren't supported until version 7. You will need to use something like a "iepngfix.htc" file to fix this issue.
3. position:fixed doesn't work. AT ALL. The work around here is to use an absolute.

Version 7.
1. clear:both doesn't work. The best solution is to set a min-height in the div BEFORE where the clear:both is called.

ExtJS Tabpanels and Forms

Three days, that's right, three days I've been googling and wrestling with this problem. How do I put a form, inside a tabpanel, inside a form, inside a tabpanel? No, I didn't write that too many times, what I'm after is a set of components inside a tabpanel inside a parent tabpanel. It's simply tabs inside tabs. Not something that I think is good practice, however, something I needed to do.

I pulled it apart to it's most primary issue, a form with a tabpanel in it with components inside a tab page. Here's the thing, YOU CAN'T. Well, not that I could find. The secret is, add the tabpanel to a panel NOT a formpanel. Apparently you can not nest form panels inside form panels. A FormPanel is a mixture of a Panel with form layout and a BasicForm object. You can only have one BasicForm in a hierarchy, so you need to just use normal panels in a form layout in children.

var ParentForm = new Ext.Panel({
labelAlign: 'side',
border: false,
frame: true,
autoHeight:true,
layout: 'column'});

var MyTabPanel = new Ext.TabPanel({
width:400,
height:300,
frame:true,
deferredRender:false
});

var MyTabSheet = new Ext.Panel({
title: 'New Tab',
autoHeight: true });

var MyTabSheetForm = new Ext.FormPanel({
labelAlign: 'side',
border: false,
frame: true,
width: 300,
layout: 'column',
height: 300,
items:[{
xtype:'textfield',
fieldLabel: 'Office Switch',
name: 'switch',
anchor:'95%'}]
});

// ---- add the tab sheet to the tab panel
MyTabPanel.add(MyTabSheet);

// ---- set the active tab
MyTabPanel.setActiveTab(0);

// ---- add the formpanel to the tabsheet
MyTabSheet.add(MyTabSheetForm);