Tag: coding
ExtJS 2+ Navigation Plugin for creating simple site navigation.
I use the ExtJS library a lot. In using the library I found in 3.0 they support a grouptab panels. Unfortunately, I am still working on 2.2 and needed a similar solution that is compatible with both ExtJs 2.2 & Ext 3.0. My goal was to build a clean navigation similar to ExtJS 3.0 groupTabPanel option. What I came up with was small extension on the library that works with Ext2.2+ and will allow me to upgrade later without having to change any code. Below you an see an image of the example of NavPanel my first ExtJS extension.
NavPanel example screen shot.
Features
- Clean/Fast Navigation creation with minimal code.
- Can support multiple navigation panels on same page each target to different Panel.
- Supported by ExtJS 2.2+
- Syntax similar to other Ext Objects.
- Menu layout adjustable (including icon positioning)
Usage
Here is a simple code example usage of the extension:
Basic Example Usage
viewPt = new Ext.Viewport({
layout: 'border',
border: false,
items: [{
xtype: 'panel',
region: 'west',
border: false,
bodyStyle: 'background-color: rgb(40, 120, 50);',
width: 200,
items: [{
xtype: 'navpanel',
width: 150,
panelXAlign: 'right',
yOffset: 10,
menuItemAlign: 'left',
activePanel: true,
target: 'centerpanel',
defaultItem: 1,
items: [{
header: true,
text: 'My 1st ExtJS Ext',
iconCls: 'myspecial_header'
},{
text: 'Ext.ux.NavPanel',
icon: 'asterisk_yellow.png',
items: [{
xtype: 'panel',
width: 500,
height: 200,
style: 'padding: 10px;',
title: 'Sample Panel',
html: 'something special'
}]
}]
}]
},{
xtype: 'panel',
id: 'centerpanel',
style: 'padding: 10px',
height: 500,
width: 600,
border: false,
region: 'center'
}}
});
Files
This zipfile contains all the resources used in the included example file (example.html) and the NavPanel.js file itself. I did not minify the file and the code is commented to aid you along your way.
navpanel.zip
Example:
Here is a link to the example I put together demonstrating some of the different layouts and targeting.
navpanel example
Terms
Feel free to download and use however you want to. Realize this is my first true ExtJS extension built from scratch so there may be bugs that need addressed. Feel free to point them out and I will fix as time allows. All I ask if you do use this particular extension is that you leave a comment on this page on how you intend to use it or where you are going to use it, this is for my own curiosity. Enjoy!
Changelog
Feb 17 2010
** Fixed Bug with NavPanel Z-Index causing it to bleed through parent windows and masks.
PHP CSV Column Mapper
From time to time most programmers will run into a import/export problem where they need to take a dump of particular data and put it into another system. A fairly standard way is to get the export into CSV (Comma Separated Value) formatted file. Most system/companies can fairly easily take this type of data and convert it into their own. Recently I was asked by the owner of company called Next Level Fitness, who I had previously put together their website, to take a look at their account management setup.
Currently they had been using dated software (Quickchek) which I could not find much information about online. Their new setup was a more well known company called Helios who seems to focus in software for tanning salons. Anyways, Quickchek stored the data in Parabox .DB files. Using a tool called Exportizer was able to extract this data as CSV files. The problem now is column mapping similar data from one system to the next. This happens frequently in the land of data importing. Luckily Helios is using Access MDB files so using their interface I can import a CSV file right into the table. Now just getting a formatted CSV from CSV files I have from Quickchek. In doing this I decided it was just best to build a quick tool to m ap the CSV data I need moved for me.
Here is the link to the PHP column mapping tool I built. It’s not fancy but it does work. Leave fields blank you do not need exported.
How God coded our DNA
This is rather an old joke I am told but I had never seen it before. It is really nerdy some people who do not deal with coding may not understand the humor in it. For those of you who do deal with code it is pretty clever. A friend at work sent this to me and I felt it was warranted to appear on my blog. I am not going to explain it so if you do not get it....it's ok it's really a geek thing. Here are some revelations on why our DNA is on 30% useful. God raw code for human DNA Enjoy!Search
Recent
Topics
Comments
- Thank you, kind person. You have saved me a good deal of time. -- Adam Williams
IE8 Javascript external s[..] - Thanks for this code. I am using it with some modification to determine DST for any year, not just 2009. This has save -- Jonathan
Javascript: Figuring out [..] - I do not handle the 2AM switch over. This would be a minor bug. I checked your solution that would work I have never l -- ben
Javascript: Figuring out [..] - Your also doesn't seem to take into account the hour of the day. Daylight savings switch happens at 2AM... So there is -- Kevin
Javascript: Figuring out [..] - Matt corrected code has been posted. -- ben
Javascript: Figuring out [..]
Photos (view gallery)
