the singularity of being and nothingness
Posts tagged Sencha
ExtJS 4: Applying Model Validations to Forms
Apr 23rd
One of my absolute favorite things about ExtJS’ data model is how simple it is to apply a Model instance to a form. If you’ve never done this before, consider the following data model:
Ext.define('Validations.model.Person', {
extend: 'Ext.data.Model',
fields: [
{name:"name", type:'string'},
{name:"age", type:"int"},
{name:"hobby", type:"string"}
]
})
Also, assume we have a form defined like so:
Ext.define('Validations.view.people.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.peopleform',
bodyPadding: 10,
border: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
defaults: {
width: 250,
labelWidth: 70
},
items: [
{
xtype: 'textfield',
name: 'name',
id: 'name',
fieldLabel: 'Name'
},
{
xtype: 'numberfield',
name: 'age',
id: 'age',
fieldLabel: 'Age',
value: 20
},
{
xtype: 'textfield',
name: 'hobby',
id: 'hobby',
fieldLabel: 'Hobby'
}
]
});
me.callParent(arguments);
}
})
NOTE: Notice that the “name” properties of each form field maps 1:1 with the “name” properties in my Model.
Now, let’s say that we want to edit a Model instance. We could, of course, manually set the value of each form field to that of the corresponding field in the Model. However, this is clunky and unnecessary, given that the form itself has a method for doing More >
Quick Thoughts on Sencha Architect 2
Apr 21st
A few days ago, Sencha rolled out Sencha Architect 2, the major overhaul and rebranding of what was formerly Sencha Designer. You can check out the release blog post to get the low-down on all the new features.
When I saw the news about the release, I have to say I was a bit hesitant to look much further. I’ve tried Sencha Designer several times in the past, and I’ve been somewhat disappointed with it. Sure, it was great for laying out apps, but when you actually needed to *code*, it was lackluster at best. But even worse, I found it to be very buggy; it would crash at random times, and overall I found the process of trying to mockup an app to be more frustrating than anything else.
So initially, I wasn’t planning on even trying out the newest iteration. But then I noticed that one of the biggest additions to the product is support for creating a full ExtJS or Touch app–not just the UI. I felt I had to take a closer look, and I’m glad I did.
UIOut of the box, Architect 2 is worlds better than its previous iterations. The interface is slick and responsive, and the way More >
ExtJS 4: A Modified Ext.util.History
Aug 21st
I recently implemented Ext.util.History for the first time in a project that I’m working on. If you’re not familiar with History, it allows you to “register arbitrary tokens that signify application history state on navigation actions”. You can then take these “tokens” and use them in your application to display certain views, fire actions, etc. when the user uses their browser’s “back” and “forward” buttons. In other words, it can help you prevent your 1-page AJAX application from reloading completely when someone accidentally hits the back button. But on a more positive note, it allows your AJAX application to use regular navigation conventions of the browser to control in-application functionality. Pretty cool.
The best part about History, however, is that it is stupid-simple to implement. There are basically 3 steps:
- Initialize Ext.util.History
- Build in the “token-building” logic into your application at appropriate places
- Define the listener for handling History events.
That’s it. History is not only easy to implement, but it is also pretty unobtrusive–you can implement it fairly simply into an existing app without completely reworking the whole thing. There’s a lot more to History, of course, so be sure to check out the docs and Sencha’s example.
First, My Example…Before I talk about the More >
ExtJS 4: Intercepting a Window Closure
Aug 18th
In a blog post I ran across recently, someone was trying to intercept the closure of a window via the “X” icon in the top right corner. The idea was to be able to run additional processing before closing the window (such as confirming save/cancel of data, resetting a form, updating a record, or whatever else).
Turns out this is pretty simple to accomplish, but it’s good to understand what’s going on behind the scenes before implementing the solution.
The “Close” ToolWhen you specify that your Window (a glorified extension of Panel) is “closable” (the default behavior, btw), here’s what happens in the background:
initTools: function() {
var me = this;
me.tools = me.tools || [];
......
// Add subclass-specific tools.
me.addTools();
// Make Panel closable.
if (me.closable) {
me.addClsWithUI('closable');
me.addTool({
type: 'close',
handler: Ext.Function.bind(me.close, this, [])
});
}
// Append collapse tool if needed.
if (me.collapseTool && !me.collapseFirst) {
me.tools.push(me.collapseTool);
}
}
As you can see, if the Window is closable, a tool of “close” type is added automatically, and fires the panel’s “close” method when clicked. Here’s what close() looks like:
close: function() {
if (this.fireEvent('beforeclose', this) !== false) {
this.doClose();
}
}
The important thing to note here is that the “beforeclose” More >
ExtJS 4: Adding an App-wide Keystroke Mapping
Aug 16th
In a previous post, I showed how it’s pretty simply to catch keystrokes in your controller, and then do cool stuff in your app. But what if you want to add an app-wide keystroke mapping? For example, consider you’re create something like Sencha’s desktop demo. Within such an interface, it might be nice to map keystrokes to functionality within your app (like initiating a search, closing a window, etc.).
So here’s an easy way to do that.
In this example, I’m creating an app-wide keystroke mapping for search functionality. When a user enters the keystroke of the letter “S” and the Ctrl key, I want to give focus to a search box that exists within the app.
First of all, here’s the app.js for my application:
Ext.application({
name: "MyApp",
appFolder: "app",
autoCreateViewport:true,
controllers: ["Search"....],
launch: function() {
var map = new Ext.util.KeyMap(Ext.getBody(), {
key: 83,
ctrl: true,
handler: function() {
this.getController("Search").activatesearch();
},
More > 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 >
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 >
Sencha: Creating Child Stores
Oct 11th
One of the things I <3 about Sencha is the data store. They are super-simple to create, but very powerful for creating robust, data-driven applications. The other day, I found myself creating 3 data stores that were extremely similar, simply because of the fact that the data returned was fairly complex and nested. You see, with a Sencha store, you define a “root” of your data, which is really just how the store’s Reader will treat the “rows” of data that are fed into the store. This works very well, but in my scenario, I was wanting to create a master store of data defined at the highest possible root, and then create child stores based on some of the nested objects belonging to my initial data set. So in this case, instead of making 3 remote calls to get the same, but differently-structured data, I wanted to make 1 request and use the result 2 more times for different stores.
At first, I looked to the store itself for something like a “copy” or “clone” method, but there was none. There IS an option for doing an “each” loop for every record, but that just seemed a bit overkill. But More >
Sencha: Defining Store Fields
Oct 11th
If you’ve ever created a data store with the Sencha framework, you’re familiar with defining the “fields” for the store’s data. Something like this does the trick:
var myStore = new Ext.data.JsonStore({
id: "myJsonStore",
url: "datasource.js",
fields: [
"id",
"name",
"age"
]
});
This method of defining data fields works perfectly well, but is not very extensible. After all, what if you have several stores for which you want to use the same field definitions? Yeah, you can define the same fields for each store, but wouldn’t it be better to define it once, and then customize it as needed?
Fortunately, this is super-simple to do. When you define fields “inline” while creating the data store, what you are really creating is something of an impromptu MixedCollection (a Collection class that maintains both numeric indexes and keys and exposes events, per the docs). Ah, so if it’s nothing more than a Sencha object, we can abstract it from the store itself, and reuse it to our heart’s desire!
var mydef = new Ext.util.MixedCollection();
mydef.addAll([
"id",
"name",
"age"
]);
Obviously, this looks extremely similar to what we did inline. However, the huge difference is that this new, abstracted object has some handy methods for retrieval, addition More >
Ext JS is Now Sencha
Jun 16th
This caught me a little by surprise. A few days ago, Ext JS–a pretty awesome JavaScript framework–announced that it is joining forces with jQTouch and Raphaël to form a new company named Sencha. Branding, domain–everything is changing.
Personally, I really like this move. To me, it shows that Ext JS is interested in expanding in very important directions–vector graphic JS manipulation and mobile content–by teaming up with jQTouch and Raphaël. I’ve used Raphaël in the past for some pretty cool and simple effects, but have yet to really play around much with jQTouch (although it looks pretty sweet). Anyway, I am definitely looking forward to what’s ahead for this already great framework..the future looks very bright
Interested in learning more? Check out Sencha’s official blog post about the merger.
