1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    241
    Answers
    6
    Vote Rating
    -6
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default Unanswered: Why is xtype required, why can't I use Ext.create()

    Unanswered: Why is xtype required, why can't I use Ext.create()


    In a viewport, I can do things like:

    Code:
    ...
    items: [
        Ext.create('viewer.ui.tabs.welcome')
        , Ext.create('viewer.ui.tabs.somethingElse')
        ...
    ]
    ...
    and it works, creating the items I ask for. BUT if I do that in a Ext.panel.Panel like so:

    Code:
    ...
    items: [
        Ext.create('Ext.grid.Panel', {
          store: 'historySearchFields'
        , columns: [
            {header: '', dataIndex: 'fieldname'}  // Can't be edited
            , {
                header: 'From'
                , dataIndex: 'from'
                , sortable: false
            }
            , {
                header: 'To'
                , dataIndex: 'to'
                , sortable: false
            }
        ]
        })
        , {
        xtype: 'button'
        , text: "Howdy Ho"
        }
    ]
    ...
    Only the button shows up. But if I replace the Ext.create( with {xtype: like this

    Code:
    ...
    items: [
        {
            xtype: 'gridpanel'
        , store: 'historySearchFields'
        , columns: [
            {header: '', dataIndex: 'fieldname'}  // Can't be edited
            , {
                header: 'From'
                , dataIndex: 'from'
                , sortable: false
            }
            , {
                header: 'To'
                , dataIndex: 'to'
                , sortable: false
            }
        ]
        }
        , {
        xtype: 'button'
        , text: "Howdy Ho"
        }
    ]
    ...
    the grid shows up. WHY? The only change I have to make is replace Ext.create('Ext.grid.Panel', {
    with { xtype: 'gridpanel' and remove the closing paren to go from frustrated to working. This seems bizarre to me.
    Last edited by mark0978; 13 Jan 2012 at 8:22 PM. Reason: removed stray comma

  2. #2
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    257
    Answers
    3
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Syntax error

    Syntax error


    I think its because you have a syntax error (though it may just be an artifact of the posting!). I've successfully tried what you are attempting. I've used both the form:

    new Ext.grid.Panel({ ... })

    and

    Ext.create('Ext.grid.Panel', { ... })

    This part of your example code has an extra comma:

    Code:
    items: [
        Ext.create('Ext.grid.Panel', {
        , store: 'historySearchFields'
        , columns: [
    Has an extra comma before the 'store' property. This would have been valid if preceded by the xtype but as it follows the opening brace it's invalid. Here's an example that works for me:

    Code:
    new Ext.Panel({
            alias: 'widget.main',
            renderTo: 'container',
            padding: '10 10 10 10',
            items: [        
                Ext.create('Ext.grid.Panel', {
                    columns: [{ header: '', dataIndex: 'fieldname'},  // Can't be edited
                            { header: 'From', dataIndex: 'from', sortable: false },
                            { header: 'To', dataIndex: 'to', sortable: false }
                     ]
                })
            ]
            });

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    241
    Answers
    6
    Vote Rating
    -6
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    Sadly that just a fact of the posting. I've corrected that. There are no syntax errors reported when the code loads, just doesn't work without an xtype.

    Thanks for catching that problem.

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    257
    Answers
    3
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Worked example

    Worked example


    I was unable to reproduce your issue. I'm new to ExtJS so thought it would be a useful exercise for me to put an example together to use the different ways of creating a grid panel using your grid. Here it is:

    http://www.seddon.org/extjs/GridTest/index.html

    As you can see, the grid is created three times. Once in app.js (there's no viewport used so app.js creates an overall container) and two are in the view called SearchFields. In the view, one instance of the grid is created using the xtype and the other using the Ext.create() syntax. As you'lll see, both work for me.

    However, I'm only able to use the store with the xtype instance of the view (you'll see there are no records shown for the grid created using the Ext.create() syntax). This is because an error occurs when a this instance is provided a store reference. ExtJS complains that:

    this.up("[store]") is undefined

    I don't understand this. It presumably points to there being a real different to the way xtypes are created and instances are created.

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Quote Originally Posted by bseddon View Post
    I don't understand this. It presumably points to there being a real different to the way xtypes are created and instances are created.
    The only real difference is timing. You've done something like this:

    Code:
    Ext.define('SearchField', {
        items: [
            Ext.create('Ext.grid.Panel', {
                store: 'HistorySearchFields',
                ...
            })
        ],
        ...
    });
    The Ext.create call here happens before the call to Ext.define. The storeId must resolve to a store at that point, but it doesn't because the store isn't created until later.

    Using the xtype approach won't try to create the grid immediately, it just creates a config. The grid won't be instantiated until SearchField is instantiated. This happens much later, after the store has been created.

    It may well be the same problem in the OP's code, it's a little difficult to tell without the context.

    Vaguely related article:

    http://skirtlesden.com/articles/conf...-the-prototype

  6. #6
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    257
    Answers
    3
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Thanks for the insight

    Thanks for the insight


    And for the link. The description of the problem of failing to appreciate the impact of using the underlying prototype mechanism really helps.

    Your explanation explains my issue perfectly. Now I've bound the store to the grid view in the onLaunch function of the controller the grid populates correctly.

    Of course it's much simpler to use the xtype/config mechanism and you've provided the information needed to understand *why* using xtype/config is likely to be a good choice.

    Thanks

    Bill Seddon

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    241
    Answers
    6
    Vote Rating
    -6
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    Is there any method of causing Ext.create to fail on this condition and complain as it does so. I'm not getting ANY kind of debug information even though I'm used -debug.js

    Seems like this is something that should generate an error message.

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Not sure, but for reference the -dev versions of the library have the most debug info. -debug is just not minified, the warnings are still stripped out.

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    241
    Answers
    6
    Vote Rating
    -6
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    I haven't been able to get the -dev version to run at all, so maybe I just need to go hack me a little log message in there.....

Thread Participants: 2