Tag: programming
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.
IE8 Javascript external script execution order solution.
The lack of posts lately has been due to the fact that I have had way too much going on around me. Fixing up one house to sell and adding a new room into my house has kept my out of work time to a minimum. That being said I came across an interesting problem the other day that I felt needed a small post about.Problem:
Many ad serving networks rely on JavaScript to deliver their ad code to the page. The method typically employed to generate the code to the page is document.write('the ad code'); Well this is fine if the code is all present on the page and not relying on external scripts. What happens though when the ad itself relies on an external script in and embeds code inline. For example:
<script language='javascript'>
document.write('<scr' + 'ipt type="text/javascript" src="http://domain.com/generated_external_script.php?param1=foo¶m2=foobar"></script>');
document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">insertAdInto("ad-placeholder");</scr' + 'ipt'>');
</script>Solution:
I tried different solutions one involving the use of "defer" attribute as part of the script tag. (Which did not work). I decided to simply suffer the gross solution. Using the setInterval() method I need to keep checking the function until it exists. So it looks something like this.
document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">insertAdInto("ad-placeholder");</scr' + 'ipt'>');
</script>document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">nmSpace_itvlId = setInterval(function(){ if(typeof insertAdInto == "function"){ insertAdInto("ad-placeholder"); clearTimeout(nmSpace_itvlId); }}, 100);
</scr' + 'ipt'>');
</script>
nmSpace_itvlId = setInterval(function(){
if(typeof insertAdInto == "function"){
insertAdInto("ad-placeholder");
clearTimeout(nmSpace_itvlId);
}
}, 100);
MySQL 5.0 Triggers example usage setting fields conditionally.
MySQL 5.0 added Triggers as a feature. Though the documentation is there and usage is similar to triggers in other database systems, I am putting up my example for those who may be looking to do simple item tracking using a start and end time. In my simple example I want to update some timestamps on my data and deal with handling an item in my databases status.
CREATE TABLE test (
'id' INT(10) NOT NULL AUTO_INCREMENT,
'name' VARCHAR(100) DEFAULT NULL,
'created' DATETIME DEFAULT NULL,
'updated' DATETIME DEFAULT NULL,
'start' DATE DEFAULT NULL,
'end' DATE DEFAULT NULL,
'status' varchar(10) DEFAULT 'active',
PRIMARY KEY('id')
);
In this sample table you could add more fields with the data you need to store. For my purposes this will serve just fine for illustrating the triggers I intend to implement. In the table above start and end represent the date item is in an active state.
Triggers:
delimiter //
/* Insert Trigger for new items */
CREATE TRIGGER 't_insert_item' BEFORE INSERT ON 'test'
FOR EACH ROW BEGIN
SET NEW.updated = NOW();
SET NEW.created = NOW();
SET NEW.status = 'active';
IF NEW.start > DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
SET NEW.status = 'future';
END IF;
IF NEW.end < DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
SET NEW.status = 'past';
END IF;
END
//
/* Update trigger for existing */
CREATE TRIGGER 't_update_item' BEFORE UPDATE ON 'test'
FOR EACH ROW BEGIN
SET NEW.updated = NOW();
SET NEW.status = 'active';
IF NEW.start > DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
SET NEW.status = 'future';
END IF;
IF NEW.end < DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
SET NEW.status = 'past';
END IF;
END
//
delimiter ;
With these triggers when I am inserting new items or existing items are being rescheduled I no longer have to worry about timestamping UPDATE statements or adjusting the item’s status in the system. I can also do faster simpler searches on items. It could allow for a one query command to update all item’s status in the system.
UPDATE test SET updated = DATE_FORMAT('%Y-%m-%d') WHERE status <> 'past';
This updates all the active ads and future ads with a new timestamp and updates their status automatically.
I hope this information is of use to someone and if you have questions about triggers in general feel free to comment. I hope to get back to working on combining my 2 previous posts PHP Flickr Parser and ExtJS Image Effects into a combined example.
PHP Flickr Image RSS Feed Parser.
Updated Sept 18, 2009 Flickr changed their feed so code has been altered to continue working.
In an earlier posted an example on how to use ExtJS to do some simple effects to move images around the screen. That is great and fun and all but it really has no value unless you can apply it. In that example I used some static URL to images since the focus was on getting things moving.
Taking things a step further I decided it would be better to take that simple example and actually make it of use to someone. Flickr is a pretty commonly used site to upload photos to so I decided to focus on shifting my small example to pull photos from Flickr’s RSS feed. This would allow the app to use just change as the feed changes. Doing this did not take long.
Using Anis uddin Ahmad’s PHP lightweight feed parser allowed me to build a rather quick parser to grab photos from Flickr. 10 minutes later I had my parser working grabbing just the photo URL’s from Flickrs RSS feed. Here is the code and below an example of it working.
<?php
include('FeedParser.php');
$sURL = "http://api.flickr.com/services/feeds/photoset.gne?set=72157618659871441&nsid=41823576@N00&lang=en-us";
$Parser = new FeedParser();
$Parser->parse($sURL);
$channels = $Parser->getChannels();
$items = $Parser->getItems();
foreach($items as $item){
$sContent = $item['CONTENT'];
preg_match("#\s?src=\"(http://(.+)\.jpg)\"(\w)*#", $sContent, $aMatches); // updated!
$sImgSrc = $aMatches[1];
echo "<img src='{$sImgSrc}'/><br>";
}
?>
In the future I will bring the two ideas together to have a more interactive example of what is turning out to be a simple photo gallery project.
Javascript: Figuring out daylight savings time.
Updated 11/2/2009: Fixed bug with code pointed out by comment.A while back I had been dealing with the different timezones across the US. I needed to know whether or not the central timezone was in daylight savings time or not using my current timestamp from my computer. While this ultimately ended up not mattering because I switched everything to a GMT timestamp and use that for comparisons I did write a small bit of javascript code to determine this information for me. So below you will see the rough code I hacked together which should accurately determine if we are currently in daylight savings time based on the current dates set by the US government.
function isDaylight() {
// 2nd sunday of march
oDate = new Date();
var dstStartDate = new Date();
dstStartDate.setMonth(2);
dstStartDate.setDate(1);
dstStartDate.setYear(2009);
dateIdx = dstStartDate.getDay() ? 8 - dstStartDate.getDay() : 1;
dstStartDate.setDate(dateIdx + 7);
// first sunday of november
var dstEndDate = new Date();
dstEndDate.setMonth(10);
dstEndDate.setDate(1);
dstEndDate.setYear(2009);
dateIdx = dstEndDate.getDay() ? 8 - dstEndDate.getDay() : 1;
dstEndDate.setDate(dateIdx);
if ((oDate.getMonth() > dstStartDate.getMonth()) && (oDate.getMonth() < dstEndDate.getMonth())) {
bInDST = true;
} else if (oDate.getMonth() == dstStartDate.getMonth()) {
if (oDate.getDate() >= dstStartDate.getDate()) {
bInDST = true;
} else {
bInDST = false;
}
} else if (oDate.getMonth() == dstEndDate.getMonth()) {
if (oDate.getDate() < dstEndDate.getDate()) {
bInDST = true;
} else {
bInDST = false;
}
} else {
bInDST = false;
}
return bInDST;
}
Show Me
Click the button to see the code working.
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!Starting a site on a small budget.
This is yes another boring email to people who read this blog for stories and rants. Still I wanted to pass along some helpful information when it comes to starting your own website either for for fun to supplement a small business you may want to move to the online world. First off you need to decide what type of site you wish to have. If it is a personal site then you are not going to need a lot to get things going. Really it would be compromised of a blog, some link to sites you are a member of, a photo gallery, video gallery (if doing videos), maybe even a schedule or goals list. Who knows what you really want to put on there. If you have a hobby then feature that. If you have a sports team then center around that. Really the sky is the limit. My site has dramatically changed throughout the years and I finally decided to center around a blog format. Pretty common format these days but I wanted more control in case I decided to add more pieces. The advantage of owning your own site as opposed to using existing web app online is you have total control. That could also be stated as a disadvantage for you have to pay for it and maintain it on your own. I recommend only taking the plunge into owning your own site if you want to have your own space on the internet and you want to learn and be creative online. Small businesses really should focus on what their niche is. Whether you are selling services to clean dog poop or selling state of the art nose hair clippers you need to focus on that. Your first page should be able to let the visitor know exactly what your business does with out having to drill into a about us or looking at your products. Either by using a slogan or a graphic the instantly suggests your business type. Simple is better if things are easy to find then people will click on them. Label your navigation and sections very clearly but do not bloat. Assume every person who visits your site is only going to hit the front page. Ask yourself what three things do I want to immediately portray about my business. You do not need a fancy website to be effective clean and simple is much more effective. Ok so where does one begin? First you pick a domain name. This is how your site will be reached online. Once a domain is taken or essentially purchased it is owned and you can not choose it. Try to keep you your domain small yet makes sense for intent. Personal sites do not need to worry about this as much for you are not out to make money. Business sites however need to try and avoid abbreviating too much unless you often do with your clients. Abbreviated domain names tend to be easier to forget in my experience. You can register your domain with domain registers like GoDaddy They handle domain registration and here you can check to see if your domain is available. Try both .net and .com. Domain registration typically cost about $6-$9 / year. If you are ready register the domain and save your username and password information. Next we need to select a hosting provider. There are many different hosting options online and many different options. Since we are wanting a somewhat simple site lets just start small. Linux Hosting is generally cheaper and easier to find. You will want to have MySQL and PHP support since these probably the most common supported options for a small budget. This will also allow you to use most free software available for download and use on your website. If they have a product like CPanel this can also simplify adding tools and managing your site yourself. I personally use bargainvault.com because they have a hosting package which fits the needs above for $12 / year. Sign up for this package and save your username and password. If you know you are going to be generating a lot of traffic of the start bump your package up to the more expensive packages to ensure you have the needed space and bandwidth to support a larger site with more visitors. I have also heard bluehost and gator are good providers also but I have no experience with them. Upon registering they will send you information about their servers. There will be a nameserver and a few IP addresses which basically locate your site online. At this point you will need to take this information and login to godaddy. Point their nameservers to the servers provided by your host. This will allow people to type in your domain and reach your website. Now you are setup you have your own home on the internet and you have only spent at most $25 by this point. So what now? You are going to need some software and such to manage your website. You will need an FTP program (see my suggested software list post for suggestions). If you are starting a personal page and want to use a blog I highly recommend wordpress it is easy to install through the CPanel admin (typically yourdomain.com/cpanel/). You can also install a message board (phpBB) or a variety of other software that CPanel will automatically install for you no FTP needed. If you want to actually start building and experimenting yourself start off with something that will do the coding for you and assist you visually. There is a lot of pieces to the web. One of the better programs (that is not free) is Dreamweaver. You can download a 30 day trial. This will allow you to visually create your website without having to know any true code. At first I would stick with the prebuilt software packages you can install from CPanel. Drupal is another free software pack you can install that is a CMS or content management system. It will allow you to control how your website looks and what type of content is present on your home page. It is actively supported and there are many extension to do all kinds of interesting stuff to your homepage without learning any code. This is just a quick few notes to getting going I hope they have helped. There is a lot of different aspects to owning a site and many different things you can do. I hope this small bit of information encourages you to give it a try.My suggested free software list! (Advanced and Home)
Ok it's that time again for a techy like email to help my fellow computer users. I have worked hard to compile some suggested software that cost you nothing! I have many of these installed on my own computer at home and recommend them. I am going to cover a variety of different types of applications from plain old home user to more advance user suggestions. From anti-virus to developer frameworks. I am only going to worry about stand alone applications in this case. I will save web application for another time. Let's get started... Anti-Virus: Avast! This is completely free anti-virus software with active monitoring. It can be somewhat resource heavy to run everything so you may want to turn off certain features. I use this and recommend this. Microsoft Word Substitute: Open Office if you have used Microsoft Office this is a simliar type product. It will even open most Office type documents. It has it's own version of Word, Excel, Access, and Powerpoint. It is different but has an active community of people working on it and is updated often. Better then paying $600. Digital Graphics: The Gimp modeled after Abode Photoshop except without the $800 price tag. I will say I do not like the Gimp in comparison to Photoshop...there to pay for software. Still it is a lot better then nothing. If coming from Photoshop you will notice the commands are a little clunk to get around and the layer system is so-so. There are a lot of plugins you can download for free to do some pretty nifty filters if you are into that sort of thing. There is also a fair amount of supported brushes you can find by googling Gimp Brushes. Web Browser: Mozilla FireFox in my opinion far and away better then IE. Especially if you are a web developer. If you are running vista you will notice IE runs faster and FireFox sometimes hits some random hang ups. Still I have found the multiple plugins you can get for FireFox the huge advantage. Plugins: Tab Preview - shows a small image of your browser tabs. Web Developer Toolkit - (For web developers) Allows you some in depth controls your webpage. FireBug - a Must have for developers who want to really dig in deep to code. Javascript programming this is a must. I also like it for drilling down on myspace pages to figure out what CSS classes and div ids I can control. Compressions and Decompression Tool: If you do a lot of downloading online. You will learn to love this tool. It will compress almost every file type I have ever come across. It is called IZarc and it is completely free...at the moment. Pitch WinZip and get this. IZarc Best Text Editor: PSPad simply one of the best free editors for developing code and in general a good basic text editor. I use this one almost daily. FTP Client: Filezilla simple to use FTP. Pretty much a good stand by if you are going to be transferring a lto of files up or down from the web via FTP Online Video Encoder: Riva Encoder will take your home movies and encode them to FLV which is the most popular web format in existence right now. It has some nice features which will allow you to decide on the compression of the video. Spyware Removal: AdAware I have always liked their software and it seems to be effective for me. It will update itself and scan relatively quickly using it's smart scan feature. I would recommend setting this to run at least once a week to stay on top of things. Disk Cleanup Software: SequiaView is a small program that lets you see where your hard drive usage is and allows you to clean some house. I have not used this one much but from what I can tell it does a good job. This is no longer working I have been informed. Base on Daniels Recommendation: Diskkeeper Pro: Defragging software. I have not taken the time to try this out but if you post a comment and let us know how it was. Disk Defrag: Ultra Defrag If you are not familiar with deframentation let me basically say its when your hard drive is a mess. Just like as you live longer in a house and more and more stuff accumulate you have to try and reorganize it in the space you have available in your home. If you do not stuff ends up everywhere and find stuff becomes a slow tedious process. This is the same as a computer. As you fill up that hard drive the computer fills up space. Software like this is like spring cleaning it goes in and reorganizes things so they are easier to find. Which makes things run faster! Well thats the list for now. Thanks for readingSearch
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)
