PDA

View Full Version : Why does this component query return 2 objects instead of one?



mark0978
15 Nov 2013, 10:32 AM
There is only one formpanel on the screen, and in the code.


var formpanel = Ext.ComponentQuery.query("#payrev-form")[0];

These are the only 2 lines that have payrev-form on them


app/view/MainView.js:81: itemId: 'payrev-form',
app/view/MainView.js:175: var formpanel = Ext.ComponentQuery.query("#payrev-form");


This is what devtools shows:

46877

scottmartin
15 Nov 2013, 10:54 AM
Perhaps this is due to how your defining / initializing it? creating 2 instances?
Look at the ownerCt

You may have to create an small test case so we can see your code:
https://fiddle.sencha.com/#home

mark0978
15 Nov 2013, 11:10 AM
It was created with architect

Here is the file its in, not sure how you put architect stuff into a fiddle....


Ext.define('PayRev.view.MainView', {
extend: 'Ext.container.Viewport',


requires: [
'Ext.selection.RowModel'
],


layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
collapseMode: 'mini',
region: 'west',
split: true,
width: 211,
autoScroll: true,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'gridpanel',
flex: 1,
itemId: 'Reversals',
title: 'Reversed Payments',
store: 'Reversals',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'return_date',
text: 'Date',
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'check_amount',
text: 'Amount',
flex: 1
}
],
selModel: Ext.create('Ext.selection.RowModel', {
mode: 'SINGLE'
}),
listeners: {
select: {
fn: me.onReversalsSelect,
scope: me
},
boxready: {
fn: me.onReversalsBoxReady,
scope: me
}
}
},
{
xtype: 'form',
flex: 1,
itemId: 'payrev-form',
bodyPadding: 10,
title: 'Lookup',
items: [
{
xtype: 'textfield',
fieldLabel: 'Account Number',
labelAlign: 'top',
name: 'acctno'
},
{
xtype: 'textfield',
fieldLabel: 'R & T',
labelAlign: 'top',
name: 'rnt'
},
{
xtype: 'textfield',
fieldLabel: 'Check Number',
labelAlign: 'top',
name: 'checkno'
},
{
xtype: 'textfield',
fieldLabel: 'Amount',
labelAlign: 'top',
name: 'amount'
},
{
xtype: 'datefield',
fieldLabel: 'From',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'To',
labelAlign: 'top'
}
]
}
]
},
me.processSearchResultsGrid({
xtype: 'gridpanel',
collapseMode: 'mini',
region: 'south',
split: true,
height: 150,
itemId: 'search-results',
collapsible: true,
title: 'Search results',
columns: [
{
xtype: 'gridcolumn',
align: 'center',
dataIndex: 'return_date',
text: 'Process Date',
flex: 1
}
],
listeners: {
select: {
fn: me.onReversalGridSelect,
scope: me
}
}
}),
{
xtype: 'container',
region: 'center',
layout: {
type: 'border'
},
items: [
{
xtype: 'image',
region: 'center',
itemId: 'payment-image'
}
]
}
]
});


me.callParent(arguments);
},


processSearchResultsGrid: function(config) {
console.log("ProcessSearchResultsGrid");
config.columns = ImageHawk.history_columns;
return config;
},


onReversalsSelect: function(rowmodel, record, index, eOpts) {
var formpanel = Ext.ComponentQuery.query("#payrev-form")[0];
var values = {
acctno: record.get('micr_acct_num'),
rnt: record.get('micr_rt_num'),
checkno: record.get('check_num'),
amount: record.get('check_amount'),
from: new Date(),
to: new Date()
};
debugger;
formpanel.getForm().setValues(values);


},


onReversalsBoxReady: function(component, width, height, eOpts) {
component.getStore().load();
},


onReversalGridSelect: function(rowmodel, record, index, eOpts) {
var img = Ext.ComponentQuery.query("#payment-image")[0];
img.setSrc(record.get("front"));
//debugger;


//var images = Ext.ComponentQuery.query("#Images")[0];
//images.bindStore(record.images());
//images.getSelectionModel().select(0);
//debugger;
}


});

scottmartin
15 Nov 2013, 11:29 AM
I see once:



Ext.define('PayRev.view.MainView', {
extend: 'Ext.container.Viewport',


requires: [
'Ext.selection.RowModel'
],


layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
collapseMode: 'mini',
region: 'west',
split: true,
width: 211,
autoScroll: true,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'gridpanel',
flex: 1,
itemId: 'Reversals',
title: 'Reversed Payments',
store: Ext.create('Ext.data.ArrayStore', {}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'return_date',
text: 'Date',
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'check_amount',
text: 'Amount',
flex: 1
}
],
selModel: Ext.create('Ext.selection.RowModel', {
mode: 'SINGLE'
}),
listeners: {
select: {
fn: me.onReversalsSelect,
scope: me
},
boxready: {
fn: me.onReversalsBoxReady,
scope: me
}
}
},
{
xtype: 'form',
flex: 1,
itemId: 'payrev-form',
bodyPadding: 10,
title: 'Lookup',
items: [
{
xtype: 'textfield',
fieldLabel: 'Account Number',
labelAlign: 'top',
name: 'acctno'
},
{
xtype: 'textfield',
fieldLabel: 'R & T',
labelAlign: 'top',
name: 'rnt'
},
{
xtype: 'textfield',
fieldLabel: 'Check Number',
labelAlign: 'top',
name: 'checkno'
},
{
xtype: 'textfield',
fieldLabel: 'Amount',
labelAlign: 'top',
name: 'amount'
},
{
xtype: 'datefield',
fieldLabel: 'From',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'To',
labelAlign: 'top'
}
]
}
]
},
me.processSearchResultsGrid({
xtype: 'gridpanel',
collapseMode: 'mini',
region: 'south',
split: true,
height: 150,
itemId: 'search-results',
collapsible: true,
title: 'Search results',
columns: [
{
xtype: 'gridcolumn',
align: 'center',
dataIndex: 'return_date',
text: 'Process Date',
flex: 1
}
],
listeners: {
select: {
fn: me.onReversalGridSelect,
scope: me
}
}
}),
{
xtype: 'container',
region: 'center',
layout: {
type: 'border'
},
items: [
{
xtype: 'image',
region: 'center',
itemId: 'payment-image'
}
]
}
]
});


me.callParent(arguments);
},


processSearchResultsGrid: function(config) {
console.log("ProcessSearchResultsGrid");
// config.columns = ImageHawk.history_columns; // undefined
return config;
},


onReversalsSelect: function(rowmodel, record, index, eOpts) {
var formpanel = Ext.ComponentQuery.query("#payrev-form")[0];
var values = {
acctno: record.get('micr_acct_num'),
rnt: record.get('micr_rt_num'),
checkno: record.get('check_num'),
amount: record.get('check_amount'),
from: new Date(),
to: new Date()
};
// debugger;
formpanel.getForm().setValues(values);


},


onReversalsBoxReady: function(component, width, height, eOpts) {
// component.getStore().load();
},


onReversalGridSelect: function(rowmodel, record, index, eOpts) {
var img = Ext.ComponentQuery.query("#payment-image")[0];
img.setSrc(record.get("front"));
//debugger;


//var images = Ext.ComponentQuery.query("#Images")[0];
//images.bindStore(record.images());
//images.getSelectionModel().select(0);
//debugger;
}


});


Ext.onReady(function(){

Ext.create('PayRev.view.MainView', {});

// shove a button somewhere!
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
var form = Ext.ComponentQuery.query("#payrev-form");
console.log(form); // 1 instance
}
});

});


Scott.

mark0978
15 Nov 2013, 12:30 PM
I don't know how to grok your answer.

When I start that app built by architect, you get the results I posted above. 2

scottmartin
15 Nov 2013, 1:01 PM
When you start app that was generated by Architect? The production code on site?

evant
15 Nov 2013, 1:23 PM
The best way to debug it is to stick a break point inside the initComponent of the thing that's being created more than once. It will at least allow you to verify if that's happening.

mark0978
15 Nov 2013, 3:00 PM
Evidently that is easier said that done in Architect:

46882

evant
15 Nov 2013, 3:22 PM
There's another method, processConfig I believe, which is essentially the same thing.

mark0978
15 Nov 2013, 4:58 PM
Actually, this isn't the only thing being constructed twice, caught one of the grids being constructed a second time too. Looks like a bug. If I remove
autoCreateViewport: true, then it only constructs once. This option appears to be gone from architect now, but the pre-release version must have inserted it. Seems like if that flag is set, it shouldn't dbly construct the viewport, should it?

Version info @ the bottom

First creation comes from here:



Ext.define.processPayrevform (MainView.js?_dc=1384562613596:170)
Ext.define.initComponent (MainView.js?_dc=1384562613596:78)
Ext.define.constructor (ext-all-debug.js:29554)
Base.implement.callParent (ext-all-debug.js:4263)
Ext.define.constructor (ext-all-debug.js:33592)
constructor (ext-all-debug.js:4894)
(anonymous function) ([VM] (11580):3)
Ext.ClassManager.instantiate (ext-all-debug.js:5482)
(anonymous function) (ext-all-debug.js:2109)
Ext.apply.create (ext-all-debug.js:3785)
Ext.define.initViewport (ext-all-debug.js:57184)
Ext.define.onBeforeLaunch (ext-all-debug.js:57156)
Ext.define.constructor (ext-all-debug.js:57096)
constructor (ext-all-debug.js:4894)
(anonymous function) (ext-all-debug.js:7791)
createSingle (ext-all-debug.js:9860)
fire (ext-all-debug.js:9815)
Ext.apply.readyEvent.readyEvent.fire (ext-all-debug.js:10049)
Ext.apply.fireReadyEvent (ext-all-debug.js:10127)
Ext.apply.onDocumentReady (ext-all-debug.js:10145)
Ext.apply.onReady.fn (ext-all-debug.js:6655)
Ext.apply.triggerReady (ext-all-debug.js:6641)
Ext.apply.refreshQueue (ext-all-debug.js:6174)
Ext.apply.refreshQueue (ext-all-debug.js:6204)
Ext.apply.onFileLoaded (ext-all-debug.js:6584)
(anonymous function) (ext-all-debug.js:2102)
Ext.apply.injectScriptElement.onLoadFn (ext-all-debug.js:6227)




Second one occurs here:


Ext.define.processPayrevform (MainView.js?_dc=1384563331762:170)
Ext.define.initComponent (MainView.js?_dc=1384563331762:78)
Ext.define.constructor (ext-all-debug.js:29554)
Base.implement.callParent (ext-all-debug.js:4263)
Ext.define.constructor (ext-all-debug.js:33592)
constructor (ext-all-debug.js:4894)
(anonymous function) ([VM] (12306):3)
Ext.ClassManager.instantiate (ext-all-debug.js:5482)
(anonymous function) (ext-all-debug.js:2109)
Ext.application.launch (app.js:44)
Ext.define.onBeforeLaunch (ext-all-debug.js:57159)
Ext.define.constructor (ext-all-debug.js:57096)
constructor (ext-all-debug.js:4894)
(anonymous function) (ext-all-debug.js:7791)
createSingle (ext-all-debug.js:9860)
fire (ext-all-debug.js:9815)
Ext.apply.readyEvent.readyEvent.fire (ext-all-debug.js:10049)
Ext.apply.fireReadyEvent (ext-all-debug.js:10127)
Ext.apply.onDocumentReady (ext-all-debug.js:10145)
Ext.apply.onReady.fn (ext-all-debug.js:6655)
Ext.apply.triggerReady (ext-all-debug.js:6641)
Ext.apply.refreshQueue (ext-all-debug.js:6174)
Ext.apply.refreshQueue (ext-all-debug.js:6204)
Ext.apply.onFileLoaded (ext-all-debug.js:6584)
(anonymous function) (ext-all-debug.js:2102)
Ext.apply.injectScriptElement.onLoadFn (ext-all-debug.js:6227)


Code version:

/*This file is part of Ext JS 4.2


Copyright (c) 2011-2013 Sencha Inc


Contact: http://www.sencha.com/contact


Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial
Software License Agreement provided with the Software or, alternatively, in accordance with the
terms contained in a written agreement between you and Sencha.


If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.


Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/

evant
15 Nov 2013, 6:35 PM
Currently there is no "the viewport", it's not a singleton, so technically you can create as many instances as you like.

Perhaps it's worth adding a warning so that if autoCreateViewport === true, if it detects another viewport being created it will yell at you.

jjohnston
22 Nov 2013, 8:09 AM
@mark0978: Can you clarify something for me? Are you using the final Architect 3.0 release? You mentioned having used a pre-release, so I want to know if the autoCreateViewport:true is still generated by Architect 3.0.

That autoCreateViewport config should have been completely removed in 3.0, so if it's still sticking around then that sounds like a serious bug that we need to investigate. I'd be happy to look at your project if you wanted to send it to us, too: architect.feedback@sencha.com

mark0978
22 Nov 2013, 8:22 AM
I already sent it to Jason Minnick, but I think that was after I had cleaned it up. I have another project to convert to the GA version, if it persists there, I will send that one pre-conversion then.