Surprisingly little about this on the web, at least from where I'm sitting. I want to create reusable panels in ExtJS, and the inherited code for the project I'm coding doesn't quite understand how it's done. Instead of extending ExtJS components, like the Panel, it creates generic object types that wrap around the components instead. So you have to run myObj.myPanel to get to Panels rather than just myCustomPanel. Weird.

I have ExtJS in Action by Jesus "Jay" Garcia, which is pretty good, but his extension example skips past the simplest case for some reason and dives right in to a filled out example. And the extension example is a singleton. He doesn't really extend a type and instantiate several times until he's going 55 into plugin creation.

Anyhow, here's some code. Just a half baby step past the trivial implementation, so that we can play around a little. 

PnlCustom = Ext.extend(Ext.Panel, 
{
        title: "Title",
        html: "spam",

        initComponent : function(){
                PnlCustom.superclass.initComponent.call(this);
                if (null == this.someVal)       {
                        this.someVal = "NOTHING";
                }
                console.log("#" + this.someVal + "#");
        }
});

Ext.onReady(function()  {

        var pnlCustom = new PnlCustom({
                someVal: "3"
        });
        var pnlCustom2 = new PnlCustom({});

        var pnlPlain = new Ext.Panel({
                title: "TITLE",
                items: [
                        pnlCustom,
                        pnlCustom2
                ],
                renderTo: "uiHook"
        });
        //Ext.Msg.alert("test","test"); // compulsory test that Ext is set up correctly.
});
The only other thing you might want to consider is if you want to throw extra "procedural" code into initComponent or the constructor function. There's plenty on the web to help you with that, including some stuff on StackOverflow with one comment that refers to text from one Jay Garcia's books. For now, initComponent is fine.

Also remember that I was looking for an ExtJS 2.2 simplest case. There is some decent (not great, afaict) stuff on 3+.

EDIT: Man, complicated. You can't use your typical Swing/Windows.Forms mental model when building ExtJS UI elements. The items collection can't be accessed inside of a definition of an extended object. Check out this thread (Jay's & Condor's answers are quite useful) to see how what you're apparently really doing is defining a prototype, not a class, per se.

Labels: , ,