Hi folks,

I spent the last day and a bit figuring out how to make my own extension from the Ext class extensions my colleague prepared. I encountered lots of problems which were very poorly documented, and I thought I'd share my solution with you in case you were in the same trouble.

1. Creating a package
I followed this and this article to make my own extension. My first problem was that the Architect would not accept my package.json file no matter what I did to it. I then made this post, and shortly after found an answer to it - basically, my classes were not following the Ext class system rules and that caused the extension to fail installing.

2. Configuring components
I discovered that you can't hide a column with an existing config for the parent class using an object in "configs" key with the same name and "hidden" set to true in your Architect definition files. Instead, you should use the "hideConfigs" key and put an array of strings representing the configs you want to hide there.

3. Class dependency
This took me a while to figure out: I added four components, of which one is used by the other three (a custom Store that works for a Grid and a ComboBox). I thought I set up the dependency correctly by declaring the Store as the first class, and adding it in "requires" config for the custom components, but that still didn't work. To have it work properly, I had to add the Store .js file to the "js" keys for each of the classes that required it. The correctly working "architect" key in package.json looks like this:
Code:
"architect": {
        "compatFrameworks" : [
            "ext51"
        ],
        "classes": [{
            "definition": "MyStoreDefinition.js",
            "className": "MyCompany.data.MyStore",
            "js": ["MyStore.js"],
            "css": []
        },{
            "definition": "MyGridDefinition.js",
            "className": "MyCompany.grid.MyGrid",
            "js": ["MyStore.js", "MyGrid.js"],
            "css": []
        },{
            "definition": "MyFormDefinition.js",
            "className": "MyCompany.form.MyForm",
            "js": ["MyForm.js"],
            "css": []
        },{
            "definition": "MyComboBoxDefinition.js",
            "className": "MyCompany.form.field.MyComboBox",
            "js": ["MyStore.js", "MyComboBox.js"],
            "css": []
        }]
    }
I hope this helps when you're stuck!