the singularity of being and nothingness
Archive for December, 2012
ExtJS 4: Custom Editor for Property Grid
Dec 30th
Yesterday, I was helping someone figure out how to add a custom, complex editor for use in a ExtJS Property Grid.
The Anatomy of a Property GridFor some context, a Property Grid is like an editable grid, but instead of editing rows of data, you use a grid like interface to edit the properties of a single object. Think of it like the interface you’d use when defining database properties in SSMS…
By default, the Property Grid has several editors for simple types like strings, dates, booleans and numbers. Better yet, ExtJS will automatically try to detect the correct type, and specify the appropriate editor for you.
Out of the Box is Never EnoughBut of course, out of the box never gets you 100% of the way. Imagine that we have a cluster of properties, one property of which is a complex data type. Consider this example:
source: {
name: "My Object",
created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
timeofday: "12:00 PM",
available: false,
version: 0.01,
description: Ext.encode({
product: 'Clorox',
tagline: 'The Shinyest White!'
})
}
As you can see, most of the properties are very simple. However, the last one (description) is complex: in this example, it’s a serialized object. If we More >
ContentBox: Hooking into the Page Editor
Dec 27th
As you’re developing ContentBox modules, you will certainly come to a point where you’ll want to be able to extend the Page/Entry editor. Whether you need to add a custom section to the options sidebar, or add some functionality beneath the main content editing area, ContentBox makes it incredibly easy to add your own custom functionality/views via interceptors.
In what follows, I’ll share an example of a module I recently developed and show how simple it is to add your own custom functionality to the ContentBox page/entry editor.
Some ContextBefore we begin, let me describe what we’re building. My module is called “Super Menu”, and allows users to not only create custom menus from page/post content (as well as custom links), but also allows users to apply these custom menus to individual pages and entries. Because of this, my module needs to have a “section” in the page/entry editor that allows users to choose from a drop-down of menu names. For my module, I decided to place it in the “Page Details” sidebar. At the end, it should look something like this (notice the custom “Super Menu” section at the bottom):
And, of course, when the form itself is submitted, I’ll want to More >
