PDA

View Full Version : [FIXED] ItemId is not working correctly



FBNitro
11 May 2015, 3:38 PM
The below overide in Sencha should be putting in an itemId on each widget (this is sencha modern FW code, and it seems to be missing from the Ext6JS API Guide).


Ext.define('Ext.overrides.Widget', {
override: 'Ext.Widget',
mixins: [
Ext.mixin.Traversable
],
config: {
/**
* @cfg {String} id
* The **unique id of this component instance.**
*
* It should not be necessary to use this configuration except for singleton objects in your application. Components
* created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.
*
* Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery}
* which provides selector-based searching for Sencha Components analogous to DOM querying. The
* {@link Ext.Container} class contains {@link Ext.Container#down shortcut methods} to query
* its descendant Components by selector.
*
* Note that this id will also be used as the element id for the containing HTML element that is rendered to the
* page for this component. This allows you to write id-based CSS rules to style the specific instance of this
* component uniquely, and also to select sub-elements using this component's id as the parent.
*
* **Note**: to avoid complications imposed by a unique id also see `{@link #itemId}`.
*
* Defaults to an auto-assigned id.
*/
/**
* @cfg {String} itemId
* An itemId can be used as an alternative way to get a reference to a component when no object reference is
* available. Instead of using an `{@link #id}` with {@link Ext#getCmp}, use `itemId` with
* {@link Ext.Container#getComponent} which will retrieve `itemId`'s or {@link #id}'s. Since `itemId`'s are an
* index to the container's internal MixedCollection, the `itemId` is scoped locally to the container - avoiding
* potential conflicts with {@link Ext.ComponentManager} which requires a **unique** `{@link #id}`.
*
* Also see {@link #id}, {@link Ext.Container#query}, {@link Ext.Container#down} and {@link Ext.Container#child}.
*
* @accessor
*/
itemId: undefined
},
...


If I put an itemId on a button in a list of DataItems, events aren't firing when referring to the itemId in a listener. This code works in Sencha Touch 2.4.1, this does not work with the same code in ExtJS6

mm6


The event is never handled when the button is pressed on Ext6.

FBNitro
12 May 2015, 7:04 AM
Note: Completely re-wrote this defect, and added Fiddle. It was written somewhat incorrectly previously

evant
12 May 2015, 5:28 PM
I'm not really clear on what you're saying the issue is. It seems as though the test case works correctly?

As a side note, putting an itemId on the dataitem is not a good idea, because they need to be unique inside the parent container.

FBNitro
13 May 2015, 6:56 AM
I'm not really clear on what you're saying the issue is. It seems as though the test case works correctly?

As a side note, putting an itemId on the dataitem is not a good idea, because they need to be unique inside the parent container.

The test case doesn't work correctly. The test case in the fiddle is showing the Touch 2.4.1 behavior. That same code in Ext6 does not work... the button press event is never caught if I drop that exact same code into an Ext6JS project.

I know Id must be unique and can't be duplicated. But itemId is intended to be duplicated. Quote the docs: "Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container - avoiding potential conflicts with Ext.ComponentManager which requires a unique id."

I found a work around for the defect, which is to add in an initialize, and add the listener in that way:

Ext.define('MyItem', {
extend: 'Ext.dataview.component.DataItem',
alias: 'widget.myItem',

config: {
itemId: 'myitem',
width: 320,
items: [{
xtype: 'button',
itemId: 'mybtn',
iconAlign: 'right'
}]
/*,
listeners: {
tap: {
fn: 'onMyBtnTap',
delegate: '#mybtn'
}
}*/
},
initialize: function(config) {
this.callParent();

this.down('#mybtn').on({
tap: {
fn: 'onMyBtnTap',
scope: this
}
});
},

updateRecord: function(record) {
this.getComponent('mybtn').setText(record.get('name'));
},

onMyBtnTap: function(button) {
Ext.Msg.alert('Hello ' + button.getText());
}
});

So, probably still a defect IMO, but at least there's a work around.