PDA

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



mark0978
13 Jan 2012, 3:01 PM
In a viewport, I can do things like:



...
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:



...
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



...
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.

bseddon
13 Jan 2012, 5:14 PM
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:


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:


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 }
]
})
]
});

mark0978
13 Jan 2012, 8:21 PM
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.

bseddon
14 Jan 2012, 5:27 PM
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

(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.

skirtle
14 Jan 2012, 5:46 PM
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:


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/config-objects-on-the-prototype

bseddon
14 Jan 2012, 6:31 PM
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

mark0978
15 Jan 2012, 9:16 PM
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.

skirtle
15 Jan 2012, 9:20 PM
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.

mark0978
16 Jan 2012, 9:38 AM
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.....