PDA

View Full Version : [CLOSED] 311 isn't deploying the "view" and UI components



jpwible
9 Mar 2012, 1:49 PM
Upgraded to 311, and I'm noticing that when a project is deployed, the "view" level JS files contain what used to be in the UI level code (calling the objects, all properties, tooltips, etc.) and there are no longer any exported "UI" level JS files to handle that stuff.

Is this intentional? If so, it might create confusion for people who deploy to the same location as an old project and still have their UI files intact.

jpwible
9 Mar 2012, 1:59 PM
Also, if I make a change in Designer and re-deploy, it won't actually overwrite any of the exported files.

ssamayoa
9 Mar 2012, 2:32 PM
Look at this:

http://www.sencha.com/forum/showthread.php?184095-Breaking-changes-regarding-Code-Editing-Build-gt-298&p=745334&viewfull=1#post745334

ui namespace is no longer used so what you have in such folder is old generated files.

Regards.

aconran
9 Mar 2012, 2:48 PM
If you have any more questions about the new code generation pattern, please let us know.

Steve_Terry
12 Mar 2012, 1:36 PM
@aconran

I have a quick question...

In my case I had the following in a previous ui file...



Ext.define('testProg.view.ui.testPanel', {
extend: 'Ext.panel.Panel',

id: 'newPanel',
title: 'New Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'button',
id: 'newButton'
...
...


The implementation file had the following...



Ext.define('testProg.view.testPanel',
{
extend: 'testProg.view.ui.testPanel',
alias: 'widget.testpanel',

initComponent: function() {
var me = this;
me.callParent(arguments);

var newButton = me.down('#newButton');
newButton.on('click', this.newButtonOnClickMethod, this);
...
...


Although with the new change (from dual class to single), it appears the ui file I referenced above (or aka the designer owned file) has not changed much, a few minor changes, "Yes", but very similar.

The implementation file (or aka the user owned file) however appears to now override the "designer owned file" (as mentioned in the link) although I am having a small issue trying to get the (user owned file) recognized as I am receiving no results when the app launches.

The (user owned file) contains the following...



Ext.define('testProg.view.override.testPanel', {
requires: 'testProg.view.testPanel'
}, function() {
Ext.override(testProg.view.testPanel, {

//Code I added
title: 'New testPanel Title',
initComponent: function()
{
var newButton = me.down('#newButton');
newButton.on('click', this.newButtonOnClickMethod, this);
}

});
});


I guess I'm a bit confused how to now access components at the (designer owned file) since I have been used to the previous method of using 2 classes.

Is it possibly a small change that I am missing that could correct this issue?

I have tried the example at the link and that didn't work so it appears that my override files aren't even been accessed at all.

Thanks in advance! :)

aconran
12 Mar 2012, 5:23 PM
You aren't invoking the standard implementation of initComponent.

You should do so like:


this.callOverridden(arguments);


You will want to do this before you try to grab your button as it won't have been created until after your clases initComponent method has been invoked.

Steve_Terry
12 Mar 2012, 8:21 PM
@aconran

Thanks for the quick response.

So basically, if I am understanding you correctly, the (user owned file) should be adjusted as such...

Note: I added spaces and comments for readability!



Ext.define('testProg.view.override.testPanel',
{
//class required for implementing override
requires: 'testProg.view.testPanel'
},

function()
{
Ext.override(testProg.view.testPanel,
{
//should work since class was previously created with Ext.define
this.callOverridden(arguments);

//override the view.testPanel's title to be "New testPanel Title"
title: 'New testPanel Title',

//set variable to view.testPanel's newButton
var newButton = me.down('#newButton');

//newButton click event for calling newButtonOnClickMethod
newButton.on('click', this.newButtonOnClickMethod, this);
});
}

//method execution when newButton is clicked on view.testPanel
newButtonOnClickMethod: function()
{
//display alert message of button clicked
alert('newButton has been clicked!');

//Enable the second new button
Ext.getCmp('secondNewButton').enable(true);
}

);


So not only I am able to access the created components in testPanel but I am also able to create new methods with which to interact with the testPanel components (as shown in newButtonOnClickMethod).

Hopefully my understanding of what you mentioned is correct! :)

aconran
13 Mar 2012, 11:19 AM
something more like...



Ext.define('testProg.view.override.testPanel', {
//class required for implementing override
requires: 'testProg.view.testPanel'
}, function() {
Ext.override(testProg.view.testPanel, {
//override the view.testPanel's title to be "New testPanel Title"
title: 'New testPanel Title',

initComponent: function() {
//should work since class was previously created with Ext.define
this.callOverridden(arguments);

//set variable to view.testPanel's newButton
var newButton = me.down('#newButton');

//newButton click event for calling newButtonOnClickMethod
newButton.on('click', this.newButtonOnClickMethod, this);
},
//method execution when newButton is clicked on view.testPanel
newButtonOnClickMethod: function() {
//display alert message of button clicked
alert('newButton has been clicked!');

//Enable the second new button
Ext.getCmp('secondNewButton').enable(true);
}
});
});

Steve_Terry
13 Mar 2012, 12:15 PM
@aconran

Hmmm I am still not receiving any results or changes from the (user owned file).

At the very least I would expect the title to be changed which is not.

If I check the (Net -> JS) tab of Firebug I don't even see the override file being used so my assumption is that the file is not correctly linked with the build and being loaded on app launch.

When exporting the project from Designer, the directory structure below is created...

root->app->view->override

whereas the "view" directory contains the "designer owned file" and the "override" directory contains the "user owned file".

Previously (I believe in builds <= 298) this was flopped where the directory structure used to be (with dual-classes)...

root->app->view->ui

whereas the "view" directory contained the "user owned file" and the "ui" directory contained the "designer owned file".

Could this be a potential problem?

When I recheck the API docs, it lists that the override will be included so long as the class it overrides is required and (as far as I know) the examples above include "requires:"

Any suggestions?

aconran
13 Mar 2012, 2:35 PM
It sounds like the file isn't even being loaded...

If you look at the Application node in the code view is there a requires for it there?

Steve_Terry
19 Mar 2012, 11:36 AM
@aconran

Hey sorry about the delay, but what you mentioned led me in exactly the right direction.

I exported the project and looked over the main view code and inside the main view the override class was not being included as a "required".

So it looked like the following below...



requires: [
'testProg.view.testPanel',
],


I simply changed the main view code to the following and it is working correctly now...



requires: [
'testProg.view.testPanel',
'testProg.view.override.testPanel'
],


Although the issue will still remain that every time I export, the change I created will be wiped since that file is the designer owned file.

Are there any extra steps that is necessary to take when creating the override classes inside Designer besides just clicking the create Override button?

aconran
19 Mar 2012, 1:49 PM
If you've created an override and the override has different contents than what is the default, it should be included in the application file.

Could you provide us a project that illustrates this bug?