the singularity of being and nothingness
existdissolve
This user hasn't shared any biographical information
Homepage: http://existdissolve.com
Jabber/GTalk: existdissolve
Posts by existdissolve
ExtJS: Selecting Radio Buttons
Aug 14th
As you develop your ExtJS application, you’ll inevitably need to use a good ol’ radio button. Whether you’re using radio buttons as part of a larger form, or just a one-off for a special purpose, ExtJS has some powerful ways to use them…if you know how.
Let’s say we have a simple form for adding cars to our imaginary application. First, let’s create a model to define our data:
Ext.define("Cars.model.Car"), {
extend: "Ext.data.Model",
fields: [
{name: "make", type:"string"},
{name: "model", type: "string"},
{name: "color", type: "string"}
]
});
Okay, nothing to out of the ordinary here. We’ve defined a simple model for our “car” data, and for each car we’ll enter the make, model, and specify the color.
Now let’s make our form for entering this data:
Ext.define("Cars.view.cars.CarForm", {
extend: "Ext.form.Panel",
alias: "widget.carform",
title: "Enter Car Details",
items: [
{
xtype: "textfield",
name: "make",
fieldLabel: "Make of Car"
},
{
xtype: "textfield",
name: "model",
fieldLabel: "Model of Car"
},
{
xtype: "radiogroup",
fieldLabel: "Color",
id: "colorgroup",
defaults: {xtype: "radio",name: "color"},
items: [
{
boxLabel: "Red",
inputValue: "red",
},
{
boxLabel: "Silver",
inputValue: "silver",
},
{
boxLabel: "Blue",
inputValue: "blue",
}
]
}
]
});
Pretty simple stuff here as well. One thing to point out, however, More >
ExtJS 4: ComponentQuery Selectors in a Controller
Aug 6th
In ExtJS 4, you can do some pretty powerful stuff inside your controllers using ComponentQuery. In the following example, I have a simple grid panel view, and I’m using ComponentQuery in my controller to handle itemcontextmenu events within the grid:
views/Bookmarks.jsExt.define("ME.view.bookmarks.List", {
extend: "Ext.grid.Panel",
alias: "widget.bookmarks",
store: "Bookmarks",
scroll: "vertical",
title: "My Bookmarks",
initComponent: function() {
this.columns = [
{
text: "Bookmark",
dataIndex: "title",
flex: 1,
renderer: function(value,meta) {
meta.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},
{
text: "Created",
dataIndex: "created",
xtype: "datecolumn",
format: "m-d-y",
hidden: true
}
];
this.callParent(arguments);
}
});
controllers/Bookmarks.js
Ext.define("ME.controller.Bookmarks", {
extend: "Ext.app.Controller",
stores: ["Bookmarks"],
models: ["Bookmark"],
views: ["bookmarks.List"],
init: function() {
this.control({
"bookmarks": {
itemcontextmenu: function(view,record,item,index,e) {
var me = this;
var r = record.data;
e.stopEvent();
if (!item.ctxMenu) {
item.ctxMenu = new Ext.menu.Menu({
items : [
{
text: "Delete Forever",
icon: "images/delete.png",
handler:function(btn) {
me.deletebookmark(record,item);
}
}
],
defaultAlign: "tl"
});
}
item.ctxMenu.showBy(item);
}
}
});
}
});
First things first. You’ll notice this bit in the view:
alias: "widget.bookmarks"
This allows me to define my class as a custom xtype. This is important because you can use ComponentQuery to select components by xtype. With this in mind, I can now use the alias of my More >
ExtJS 4: A Textfield, a Grid, and Some Keystroke Interception
Aug 2nd
Recently, I’ve been working pretty furiously on the rewrite of Gloss, my first serious ExtJS application. I wrote Gloss in ExtJS 3, but wanted to give it a much-needed overhaul now that ExtJS 4 is out.
One of the more useful features of Gloss (well, I think it is at least) is the search functionality. In my rework, I’ve been trying to solidify some of the keyboard navigation to allow for a more fluid experience.
Ideally, I want the flow to go something like this:
- Enter a search, with as-you-type results
- When the full list of results is returned, be able to TAB from search text field to first row in the list of results
- Be able to TAB or DOWN ARROW to the next result in the list
- When focused on the desired result, be able to strike ENTER or SPACE to load the record
I’ll start with the last two: navigating inside the grid panel itself.
Grid NavigationWith ExtJS 4, this is stupid easy. In my Search controller, I have some listeners set up. They’re keyed in on the “itemkeydown” event of the grid.
Ext.define("Gloss.controller.Search", {
extend: "Ext.app.Controller",
init: function() {
this.control({
"searchgrid *": {
itemkeydown: function(grid,rec,item,idx,e,opts) {
if(e.keyCode==13 || e.keyCode==32) {
... do some stuff More > 
How I Got Started in ColdFusion
Aug 1st
This is my contribution to the thread started over at Ray Camden’s site. If you’re a CF developer, be sure to share your thoughts too!
Like all good stories, this one begins with bourbon and cheap cigars.
Years ago, I was in a poker society with my best friends in the world. We were liturgically serious about our poker, going so far as to create the framework for member rules, organizational bylaws, and the like.
At some point, it became apparent that our group needed a website–just some place online where we could store information for our organization. Though I had no idea how to do it, I volunteered to create the website. A ridiculous number of hours–and a hacked together Photoshop-to-HTML export–later, our website was born.
It was hacky, impossible to maintain, and *not* secure (despite my lame attempt to create a login). Yet through the process, I discovered that I LOVED making websites.
Fast-forward a year and a half, and I landed my first job as a web designer. I was laughably under-qualified, but I got my shot and I threw all my energy into it. I had a lot of success, and felt good about my decision. Even after moving from a “hobby” to More >
ExtJS Quickie: Full Width Text Fields
Jul 17th
Ok, so a lot of posts I make are not so much about “hey, look at this cool thing I figured out” as much as it is saving a reminder of myself for how to do something when I inevitably forget it later on 🙂
So for today’s example, the problem I was having was how to make a textfield fill up 100% width of a panel. I think in earlier versions of ExtJS, there was an “autoWidth” option, but alas, it doesn’t work in ExtJS 4. Moreover, using “width: ‘100%'” doesn’t work either, since the width option expects a numeric value.
Turns out, this is pretty stupid and simple. Here’s a quick example:
Ext.define("Gloss.view.search.Form", {
extend: "Ext.form.Panel",
alias: "widget.searchform",
frame: true,
items: [
{
xtype: "textfield",
anchor: "100%"
}
],
initComponent: function() {
this.callParent(arguments);
}
});
As you can see, adding in the “anchor: 100%” solves the issue quite nicely. Now, as the container is resized, the textfield will resize as well.
Share this: ItemClick and ItemContextMenu
Jul 8th
Custom context menus are one of the features of ExtJS that I love. They are stupid simple to add in, and ridiculously customizable–they can really add some value to your app and help preserve real estate if you have a lot of embedded actions that need to happen.
For example, in one of my controllers, I’m looking for the “itemcontextmenu” event on a grid:
this.control({
"bookmarks": {
itemclick: function(...) {
....
},
itemcontextmenu: function(view,record,item,index,e) {
var me = this;
var r = record.data;
e.stopEvent();
if(item.ctxMenu) {
item.ctxMenu = new Ext.menu.Menu({
items: [
{
text: "Delete This Thing",
icon: "images/delete.png",
handler: function(btn) {
me.deletebookmark(record,item);
}
}
]
});
}
}
})
One of the issues I was running into, however, was that whenever I would “right” click using my Mac’s “magic mouse” (e.g., Ctrl+click), both the itemclick AND itemcontextmenu events would fire.
To debug this, I took a quick peek at the “event” object passed on both methods. This object provides a bunch of information about the event that was fired, including:
- any keys that triggered the event
- whether Ctrl was pressed
- whether Shift was pressed
- what “type” of event (e.g., “click” for a mouse event)
Armed with this information, I was able to adjust my “itemclick” listener a bit, More >
Adding QTips to GridPanel Rows in ExtJS 4.0
Jul 4th
Need to add a custom tooltip (quick tip) to rows in a GridPanel in ExtJS 4.0? Super easy. In your column definitions, simply add a rendered, passing a custom function.
this.columns = [ { text: “Bookmark”, dataIndex: “title”, flex: 1, renderer: function(value,metaData,record,colIndex,store,view) { metaData.tdAttr = ‘data-qtip=”‘ + value + ‘”‘; return value; } }…
A couple notes:
- Make note of the “metaData” object. I think in earlier versions, the “tdAttr” was just “attr”…so if you’re upgrading, you might have to make a slight change
- Notice the namespace for the qtip. In earlier versions of ExtJS, it was “ext:qtip”, but has been changed to “dadta-qtip”…no biggie, but a headache if you didn’t read the docs 🙂
That’s it! With such a slight modification, you get a nice tooltip generated for each row in your grid. Enjoy.
Share this:
If You Want a Good Zombie Movie, Follow the Rules
Jun 1st
Over the last month or so, I’ve watched a BUNCH of zombie movies. From absolute classics like Night of the Living Dead, to foreign offerings like The Horde, I’ve seen the good, the bad, and the terrible in the way of zombie movies. While this is to be expected of all movie genres (but perhaps especially those which tend to hover around the B-movie monicker), for me, it’s not the typical things that make zombie movies great or awful. Some movies live and die on acting, special effects, and plot. While these are certainly not un-important in a zombie flick, they don’t sit on the top of the list in my book. Rather, what makes a great zombie movie is one which follows the rules of zombie movies.
The RulesOk, first of all, I don’t think there are *really* any hard-and-fast zombie rules. Sure, some will argue about whether zombies should be able to run, or whether they should be intelligent enough to organize efforts on a minimal level, or whether they should have enough dexterity to turn a doorknob. But in my thinking, trying to pigeon-hole such an expansive field of horror-creature is just wrong.
So these are not the More >
Some Thoughts on ExtJS 4
May 26th
Very recently, Sencha released the newest version of ExtJS–4.0. This release was significant, in addition to other important changes, because ExtJS 4 signals a real shift in how Sencha is pushing developers to use ExtJS. Before, you could really kind of hack together ExtJS apps, regardless of how well your efforts aligned with “best practices.” The same is still true, I suppose, but ExtJS 4 is now all about MVC…and they are quite vocal about it.
By this, I mean that this rework of the framework has been explicitly designed, optimized and advertised to be used in a very particular MVC-ish way. There are even some fairly involved (but still inadequate, IMO) tutorials that describe the “preferred” way for designing a full-on MVC ExtJS 4 app, and the SDK comes with some tools baked in that will even build out the “preferred” structure for you.
So it just so happened that mere weeks after the release, I had the opportunity to develop a new app, and I decided to take the dive into ExtJS 4. Here are my thoughts on the experience, in no particular order.
Learning…and LearningFirst, the learning curve–for me at least–was initially pretty steep. It wasn’t so much the MVC aspect More >
Renaming Files in CFScript
May 13th
I’ve recently taken to writing all of my components in pure cfscript. To me, they look cleaner and are easier to navigate. Plus, I just really like cfscript 🙂
One of the challenges, of course, is that after using tags for so long, it can be sometimes challenging to find equivalent functionality in cfscript. Some tags expose functionality that may not be readily apparent in cfscript functions provided.
Take cffile’s “rename” action. If you look through the list of “FileXXXX()” methods, you’ll see a lot that correspond 1-to-1 with the tag actions. However, interestingly enough, there’s no FileRename() function.
Now you might think that this means that files can’t be renamed with using cffile. Wrong! You can simply use FileMove() to accomplish the rename. And actually, if you think about it, this makes sense. After all, when you move a file, you literally move it–so if the file is moved to a different or same location with a new file name, that’s the file that’s getting moved…no copy to worry about cleaning up after the face.
Ok, enough of that. So here’s a pretty ordinary file rename with cffile:
<cffile action=”rename” source=”c:\files\memo\readonlymemo.doc” destination=”c:\files\memo\normalmemo.doc”>
But we can accomplish precisely the same thing with FileMove():
filemove(c:\files\memo\readonlymemo.doc, c:\files\memo\normalmemo.doc);
Pretty nice!
Share this:
