Tag: example code
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 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.
Display Sample Code in Wordpress Post using plugins.
As noted in an earlier post I have repurposed my blog site to a more techinical site. In doing so the first hurdle I encountered was trying to get my code to display correctly and having my examples work correctly.
The Goal: I want to be able to show code examples in a clean format without and encoding of the characters and I want the spacing preserved. I also want to be able to attach any JavaScript examples to my post to show the code actually working.
The Problem: Wordpress has certain filters and encodig in place that will replace and alter characters to make the text web viewable. Even if you are entering code you want to run directly in the HTML portion of the editor this is not untouched by the wordpress formatter. I found it would replace certain characters I did not want it to and made my code look terrible, not something you want when illustrating code to others.
The Solution: After spending some time investigating possible solutions and reading the formatting code (which is the file wordpress/wp-includes/formatting.php) I found a few plugins that seem to address the issue. The first plugin I found helpful for preserving the spacing and code I want to illustrate to others.
Plugin: Coffee2Code's Preserve Code Formatting - This pluging will preserve code you stick into the <pre> or <code> tag.
I configured the program to only look for the <code> tag since I would be using the styling suggested by Sohtanaka .
This solved the issue with preserving the look of the code and giving it a distinct look. I am sure there are more ways to style the code but this was simple enough for me to add and read. The next problem was to deal with the fact that Wordpress was replacing certain characters of my JavaScript demo. In particular I was using an 'and' operator (&&) and it was character encoding it wrong breaking my JavaScript. To solve this I added another plugin.
Plugin: Text Control - This plugin essentially turns the formatting of Wordpress off or if you choose can specify the type of formatting you want. It also allows you to specify the character encoding used by the page. When I am adding code that Iw ant to be run I do not want any encoding to happen, otherwise I risk my demo code breaking.
I installed the plugin and noticed it does work like it should except for one situation, '&&' the and operator. I decided to add a simple solution that handles this edge case directly into the plugin code. While this is not the most elegant solutions it did fix my issues. Here is the code I added.
Add this to line 82:
$text = preg_replace('/\&\&/', '&&', $text);
This fixed all my issues I have encountered so far. I hope this aids others that have ran into this problem as well.
DO NOT UPDATE Coffe2Code Plugin it makes things much worse. I had to revert back to 0.9 to get things working again.
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)
