1. #1
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    84
    Vote Rating
    9
    ateodorescu will become famous soon enough

      0  

    Default Advanced user extension configs

    Advanced user extension configs


    Hi,

    I'm trying to implement a user extension for Architect 3. Configs with standard types like boolean or string are easy enough, but I'm looking for more advanced options like "plugins", "combo", "lists" etc.
    The grid panel has inside the object inspector a "Grid plugins" config where you can add a plugin from a fixed list of plugins. How was this done? I couldn't find anything like this in the documentation.
    The Panel has the config "closeAction" as a combo. How can this be defined in the class definition?
    If you right click on a grid panel in the project inspector you can see a menu like "auto columns". How can we add something like this in a custom extension?
    In the definition file of a component you can use listener objects. The documentation introduces 2 events (onCreate and onSetup) but there's no example of how to use this. What can be done inside those events? What API can we use?
    How can I add a link to the component documentation?
    How can I add a toolbox icon for my extension?

    May I have some of these questions answered? Maybe I'm missing something and all these answers are listed somewhere. May I have a link?

    Thanks!
    https://github.com/ateodorescu/mzExt
    http://www.mzsolutions.eu/

    Mz.pivot.Grid
    Ext.ux.form.plugin.HtmlEditor
    Ext.ux.form.field.CodeMirror
    Ext.ux.form.field.ImageFileField
    Ext.ux.form.field.UploadFileField

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    249
    Vote Rating
    15
    honestbleeps will become famous soon enough

      1  

    Default


    Thanks for the good (and tough) questions! Some things you can do right now out of the box, and we need to add some more thorough documentation on possible config options. Other things we may need to add functionality to support. Let me go through each of your requests:

    > The grid panel has inside the object inspector a "Grid plugins" config where you can add a plugin from a fixed list of plugins. How was this done? I couldn't find anything like this in the documentation.

    This is handled internally within Architect with a "reference group", which there's not full support for yet in AUXs. Could you elaborate a bit on exactly what you want to do? It would be good for us to better understand the range of things our users would like to do here so that we can make future improvements.

    > The Panel has the config "closeAction" as a combo. How can this be defined in the class definition?

    This one's easier -- you'll just do something like this:

    Code:
    {
            name: 'closeAction',
            type: 'string',
            editor: 'options',
            options: ['destroy', 'hide']
    }

    > If you right click on a grid panel in the project inspector you can see a menu like "auto columns". How can we add something like this in a custom extension?

    That's something we don't have available just yet. Are you able to elaborate a bit more on what sort of option you'd like to add? I'm curious to hear about what your plans might be, as that would help inform us as to what sorts of needs our users have! I imagine you've got something a bit different from auto columns in mind?

    >
    In the definition file of a component you can use listener objects. The documentation introduces 2 events (onCreate and onSetup) but there's no example of how to use this. What can be done inside those events? What API can we use?

    Here's an example of how to use onCreate:

    https://github.com/SenchaArchitect/E...StateSelect.js

    You'll see the "listeners" array contains and object with an event name ("name": "create") and a function name to run when that event is detected ("fn":"onCreate") -- the onCreate function is defined below!

    > How can I add a link to the component documentation?

    Right now, we just offer helpText, not a way to link to an external site, but that's something we will consider!

    > How can I add a toolbox icon for my extension?

    Unfortunately we don't offer custom icons at this point, you'll always have the default "puzzle piece" icon. I'll bring this feedback back to the team for consideration though.

    I hope that answers your questions - I'm sorry that on a few of them the answer is "we don't yet offer that", but I hope this helps, and I hope we can continue a dialog and learn more about what sorts of features you'd like out of the AUX system!
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    84
    Vote Rating
    9
    ateodorescu will become famous soon enough

      0  

    Default


    Thanks very much Steve for this information.
    I am currently in the process of writing an AUX for my pivot grid. The pivot grid has already some plugins available and I would like to be able to add them, like you guys do with the grid panel.
    On the other hand the pivot grid uses a store. After configuring the store I would like to be able to define the dimensions of the pivot on the left and top axis, as well as the aggregates. Would be nice to have something visual here. A right click on the pivot grid to popup a dialog where the user could add dimensions from the model to the axis and the type of computation for the aggregates.
    The pivot also has some events which the user can listen for and assign/write a function. Not sure how this could be done right now. I see in the object inspector a config "Event Bindings" but the events supported by my component are not listed there. Any chance to add them there?

    I had a look on that component where you guys use the "create" listener. Nice stuff but what API is available to use inside that function? Any documentation for that would be nice. Apart from "createTopLevelInstance" and "createInstance" are there any other functions available?
    Which other listeners are available and what do they mean? What does "onSetup" mean? When is this one triggered and what can I do with it?

    Code:
    me.createInstance({
                        type: 'selectfield',
                        configs: {
                            label: 'Country',
                            displayField: 'countryName',
                            valueField: 'countryCode',
                            store: countryStore,
                            minHeight: 30
                        },
                        "items": [{
                            "type": "basiceventbinding",
                            "configs": {
                                "fn": "onChangeCountry",
                                "name": "change",
                                "implHandler": "var countryCode = selectfield.getValue(),\n\tform = selectfield.up('formpanel'),\n\tstatePicker = form.down('[itemId=statepicker]'),\n\tstore = statePicker.getStore(),\n\tproxy = store.getProxy();\n\nproxy._extraParams.country = countryCode;\nstore.load();\n\nExt.Viewport.setMasked({\n\txtype: 'loadmask',\n\tmessage: 'Loading States...'\n});\n\nstore.on('load', function() {\n\tExt.Viewport.unmask();\n\tstore.un('load');\n});"
                            }
                        }]
    });
    What exactly is the above code doing? Adding source code to the component?

    Here is another scenario. You allow the user to define some configs. Maybe the config values depend on each other and if config A was changed to a specific value, you want to automatically change config B to something else.

    If something else comes to my mind I will let you know.
    Thanks a bunch for your help.
    https://github.com/ateodorescu/mzExt
    http://www.mzsolutions.eu/

    Mz.pivot.Grid
    Ext.ux.form.plugin.HtmlEditor
    Ext.ux.form.field.CodeMirror
    Ext.ux.form.field.ImageFileField
    Ext.ux.form.field.UploadFileField

  4. #4
    Sencha - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    249
    Vote Rating
    15
    honestbleeps will become famous soon enough

      0  

    Default


    > What exactly is the above code doing? Adding source code to the component?

    Exactly, that's the source code that's handling the masking, etc on country change.

    >
    Here is another scenario. You allow the user to define some configs. Maybe the config values depend on each other and if config A was changed to a specific value, you want to automatically change config B to something else.

    This one you can do now! You'd add a listener for cfgchange events, like so (obviously a bit of a silly example):

    Code:
    
    
    Code:
        listeners: [{
            name: "cfgchange",
            fn: "onCfgChange"
        }],
    
    
        onCfgChange: function(name, newValue, oldValue) {
            // name is the name of the config
            // newValue and oldValue are the newly given value and the previous value
            if (name === 'height' && newValue > 400) {
                 this.setConfigValue('width',900);
            }
        },


    We'll definitely need to get a document together on all of the available events, that's something I've put on my todo list!

    I hope that at least helps a bit for now...
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  5. #5
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    84
    Vote Rating
    9
    ateodorescu will become famous soon enough

      0  

    Default


    Thanks again Steve!

    >This is handled internally within Architect with a "reference group", which there's not full support for yet in AUXs. Could you elaborate a bit on exactly what you want to do? It would be good for us to better understand the range of things our users would like to do here so that we can make future improvements.

    Should I understand that you do have some support for a "reference group" in AUX? Can you share that? What exactly is possible right now and how can I use it?

    Some configs you defined in your components have a small "?" near them with a description tooltip. What do I have to define to a config to use that? This would be pretty useful to inform the developer what that property mean.

    Would you please list here all config types and all events available to use in an AUX? I'm asking this because I know that it can take a lot of time until the documentation is updated.

    Any chance to output some log file in Architect to understand what is wrong with my package when I import it? I get "There was an error loading definition "....". Please make sure that the definition is valid and try again". Sometimes I really don't understand what's wrong with my definition. Would be great to see where the validator is crashing.

    Thanks,
    Adrian
    https://github.com/ateodorescu/mzExt
    http://www.mzsolutions.eu/

    Mz.pivot.Grid
    Ext.ux.form.plugin.HtmlEditor
    Ext.ux.form.field.CodeMirror
    Ext.ux.form.field.ImageFileField
    Ext.ux.form.field.UploadFileField

  6. #6
    Sencha - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    249
    Vote Rating
    15
    honestbleeps will become famous soon enough

      0  

    Default


    Quote Originally Posted by ateodorescu View Post
    Should I understand that you do have some support for a "reference group" in AUX? Can you share that? What exactly is possible right now and how can I use it?
    I'll have to revisit the code and see for sure what will work, but I'm not sure you'll be able to use it just yet. I'll try and revisit and confirm soon!

    Quote Originally Posted by ateodorescu View Post
    Some configs you defined in your components have a small "?" near them with a description tooltip. What do I have to define to a config to use that? This would be pretty useful to inform the developer what that property mean.
    That's done in the definition using the helpText: "some text here" property.

    Quote Originally Posted by ateodorescu View Post
    Would you please list here all config types and all events available to use in an AUX? I'm asking this because I know that it can take a lot of time until the documentation is updated.
    It might be a little bit of time but I'll work to put something together as soon as I can and post back here.


    Quote Originally Posted by ateodorescu View Post
    Any chance to output some log file in Architect to understand what is wrong with my package when I import it? I get "There was an error loading definition "....". Please make sure that the definition is valid and try again". Sometimes I really don't understand what's wrong with my definition. Would be great to see where the validator is crashing.
    This one's really tricky because a lot of the time it's because parsing the file fails - if it's not valid javascript, then all we know is that something's wrong (for example, you're missing a closing quote, or a comma somewhere)...

    We do, however, need to make some improvements to some of the error messaging and that's definitely on our todo list! There's already a bit of it in place (e.g. you're missing the architect node in package.json, or you've specified a file that doesn't exist), but there's probably some other things we could catch and notify you about as well.
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  7. #7
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    84
    Vote Rating
    9
    ateodorescu will become famous soon enough

      0  

    Default


    Steve, I'm back with additional questions

    There's a "merge" option available for a config. What's that and why do I get a "Please make sure that the definition is valid and try again" when I set "merge" on true?


    I have a config on my component which I want to force to "false", but this config is missing from the generated source code, no matter what I do. How can I force a "false" config to be present in the source code but invisible in the object inspector?


    I have configured a "helpText" option for all my configs but I don't see the question marks near the config name in the object inspector. Here is an example:
    "name": "showZeroAsBlank",
    "type": "boolean",
    "initialValue": false,
    "helpText": "Should 0 values be displayed as blank?"
    Am I doing something wrong?

    Thanks,
    Adrian
    https://github.com/ateodorescu/mzExt
    http://www.mzsolutions.eu/

    Mz.pivot.Grid
    Ext.ux.form.plugin.HtmlEditor
    Ext.ux.form.field.CodeMirror
    Ext.ux.form.field.ImageFileField
    Ext.ux.form.field.UploadFileField

  8. #8
    Sencha - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    249
    Vote Rating
    15
    honestbleeps will become famous soon enough

      0  

    Default


    Adrian,


    The "merge" option is something we only use internally, if you saw it used in one of the examples we should probably remove it.


    For "helpText" - I may be mistaken, but I think helpText is only usable on the definition, not the config, sorry for the miscommunication there. Adding that ability on each config is something I will definitely look at supporting.


    Finally, on your codegen problem: your code looks right (aside from having helpText that won't work there)...


    Is the config you're trying to force to false an existing / normal config in something that your component inherits from, perhaps? Architect has built in code avoid outputting unnecessary lines of code when setting a value that matches the default...


    Would you be comfortable sharing your AUX code with me so I can take a look and see what the issue is?
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  9. #9
    Sencha - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    249
    Vote Rating
    15
    honestbleeps will become famous soon enough

      0  

    Default


    Adrian,


    It appears that enableLocking: true causes codegen, and enableLocking: false does not. This indicates to me that somewhere in the inheritance chain we know that the default behavior is enableLocking: false -- so we're not outputting that extra codegen because it's redundant. It would seem your component must be inheriting from Ext.panel.Table - which defaults enableLocking to false internally.


    Are you not getting the behavior you need, regardless of the codegen?


    If need be, you could use onSetup to force a config value - it's a bit of a hack, but you could do something like this.setCfgValue('enableLocking',false) in an onSetup listener.

    Hope that helps!
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  10. #10
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    84
    Vote Rating
    9
    ateodorescu will become famous soon enough

      0  

    Default


    My pivot grid extends the grid panel. enableLocking is false by default in the grid panel but on my component the default value is true. A locked grid panel has the following problem: class A extends grid panel and class B extends A. If class B has enableLocking on true then the rendering doesn't work.
    So basically I want to prevent in Architect any class that extends my pivot grid to have enableLocking on true.
    I will use that method to force this config to be false, at least until I refactor my component.

    Thanks for your help,
    Adrian
    https://github.com/ateodorescu/mzExt
    http://www.mzsolutions.eu/

    Mz.pivot.Grid
    Ext.ux.form.plugin.HtmlEditor
    Ext.ux.form.field.CodeMirror
    Ext.ux.form.field.ImageFileField
    Ext.ux.form.field.UploadFileField

Thread Participants: 1