[ALOY-1175] Cannot call methods or access properties on MenuItems declared in markup

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2014-10-27T14:34:46.000+0000
Affected Version/s	Alloy 1.6.0
Fix Version/s	Alloy 1.6.0
Components	XML
Labels	n/a
Reporter	Benjamin Hatfield
Assignee	Tim Poulsen
Created	2014-10-21T21:09:04.000+0000
Updated	2015-06-25T10:16:23.000+0000

Description

DESCRIPTION: Cannot call methods or access properties using the id attribute of MenuItems created in XML markup. Related feature ticket: ALOY-1098 REPRODUCTION: Run the Alloy application below. Hit the Expand or Collapse action items or try to expand the action view from the overflow menu. RESULTS: Trying to call a method or accessing a property results in 'Cannot read property of undefined or Cannot call method X of undefined

.

{noformat}
[ERROR] :  TiExceptionHandler: (main) [3824,3824] ----- Titanium Javascript Runtime Error -----
[ERROR] :  TiExceptionHandler: (main) [0,3824] - In alloy/controllers/index.js:70,28
[ERROR] :  TiExceptionHandler: (main) [1,3825] - Message: Uncaught TypeError: Cannot read property 'actionViewExpanded' of undefined
[ERROR] :  TiExceptionHandler: (main) [0,3825] - Source:         Ti.API.info($.item3.actionViewExpanded);
[ERROR] :  V8Exception: Exception occurred at alloy/controllers/index.js:70: Uncaught TypeError: Cannot read property 'actionViewExpanded' of undefined
{noformat}

index.xml


<code><pre>
<Alloy>
    <Window id="win">
        <Menu>
            <MenuItem id="item1" title="Expand" onClick="expand" showAsAction="Titanium.Android.SHOW_AS_ACTION_IF_ROOM" />
            <MenuItem id="item2" title="Collapse" onClick="collapse" showAsAction="Titanium.Android.SHOW_AS_ACTION_IF_ROOM" />
            <MenuItem id="item3" title="Alt Text" showAsAction="Titanium.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW" onExpand="report" onCollapse="report">
                <ActionView>
                	<View layout="horizontal">
                    	<Button left="0">Search</Button>
                    	<TextField right="0" hintText="Type Something"/>
                    </View>
                </ActionView>
            </MenuItem>
        </Menu>            
    </Window>
</Alloy>
</pre></code>

index.js`

$.win.open();

function expand (e) {
	$.item3.expandActionView();
};

function collapse(e) {
	$.item3.collapseActionView();
}

function report(e) {
	Ti.API.info(e.type);
	Ti.API.info($.item3.actionViewExpanded);
}

Classic Examples:

var win = Ti.UI.createWindow();
var item1 = item2 = item3 = null;
var actionView = Ti.UI.createView({layout: 'horizontal'});
actionView.add(Ti.UI.createButton({title: 'Search', left: 0}));
actionView.add(Ti.UI.createTextField({hintText: 'Type Something', right: '0'}));
win.addEventListener("open", function() {

    win.activity.onCreateOptionsMenu = function(e) {
        var item, menu;
        menu = e.menu;
        menu.clear();
        item1 = menu.add({
            title : "Collapse",
            showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
        });
		item1.addEventListener('click', function (e) {
			item3.collapseActionView();
		});
        item2 = menu.add({
            title : "Expand",
            showAsAction : Ti.Android.SHOW_AS_ACTION_ALWAYS
        });
        item2.addEventListener('click', function (e) {
			item3.expandActionView();
		});
        item3 = menu.add({
        	title : 'Alt Text',
        	showAsAction : Titanium.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW,
        	actionView: actionView
        });
        item3.addEventListener('collapse', function(e) {
        	Ti.API.info(item3.actionViewExpanded);
        });
        item3.addEventListener('expand', function(e) {
        	Ti.API.info(item3.actionViewExpanded);
        });
    };
});

win.open();

Comments

Federico Casali 2014-10-21
Tim Poulsen 2014-10-23

PR https://github.com/appcelerator/alloy/pull/597 Functional test: You can use Ben's app above or the one included with the PR (test/apps/testing/ALOY\-1175). Run on Android. Click Expand, then Back (or title icon). Click Collapse. Expand the menu and click Item 3. You should not get errors and the action view should be expanded/collapsed as expected.
Tim Poulsen 2014-10-24

Because this & ALOY-1098 depend upon each other, I've combined the fix into a single PR for 1_6_X https://github.com/appcelerator/alloy/pull/606 Test this using the ALOY\-1175 test app included in the PR
Feon Sua Xin Miao 2014-10-27

PR merged.
Eric Wieber 2015-03-25

Verified fixed using: Titanium SDK 4.0.0.v20150323131014 Studio 4.0.0.201503231407 Appc NPM: 0.3.34 Appc CLI 0.2.187 Alloy 1.6.0-alpha On: Nexus 6, Android 5.0.1 Able to call methods and access properties on items in view xml. No errors shown.

JSON Source