PDA

View Full Version : Best way to get index of an element in a Container



tsensuous.grace
26 Apr 2018, 5:48 PM
Hi,


Inside my Container i have multiple rows of components.
When a user clicks on one of these components i want to know the index of that row of which the component was clicked within the container.
basically want to get the ROW id.
What is the best way to get this ?

Thanks

code:

addFilter: function(token, filter, op) {


this.tokenValues.push(this.config);
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [{
xtype: 'qxlinklabel',
ref: 'filterTypeLabel',
cls: 'filter-item-logical-op',
text: this.filterType,
width: 26,


scope: this
}, {
xtype: 'combo',


help: 'filter',
name: 'filter',
width: 90,
typeAhead: true,
ref: "../filter",
triggerAction: 'all',
emptyText: $L('b89c57c3-ac1e-4179-bfab-df3081112b9d', 'Select a token...'),


mode: 'local',
displayField : 'title',
valueField: 'key',
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
}),
listeners: {




'select': function(fld, record, index, options) {
this.showField(fld, record, index, options);
},
scope: this
}


},
{
columnWidth: .5,
height : 30,
help: 'operator',
xtype : 'combo',
name: 'operator',
width: 150,
ref: "../operator",
emptyText: $L("Select Operator..."),
mode : 'local',
valueField : 'key',
displayField : 'title',
triggerAction: 'all',
store: new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: [
["=","="],
["!=","!="],
[">",">"],
["<","<"],
["<=","<="],
[">=",">="]]
}),
listeners: {


'select': function(fld) {
this.getAllValues(fld.value, "op");
this.fireChangeEvent();
},
scope: this
},
editable: false


},
new ux.form.datepicker.SuperDateField({
anchor: '0',
ref: "../date",
cls: "purge-date",
hideTrigger2: true,
includeFutureOptions: false,
simpleMode: true,
isDateRange: true,
hidden: true
}),
new Qx.form.MultiSelectComboBox({
allowCommaInQuery: true,
anchor: '-5',
displayField: 'value',
valueField: 'value',
hideRefreshLabel: true,
ref: "../multiComboRegions",
refreshable: false,
mode: 'local',
emptyText: $L('Select Regions'),
enableCopyPaste: false,
anyMatch: true,
caseSensitive: false,
value: ["name"],
cacheSizes: false,
hidden: true,
store: new Ext.data.ArrayStore({
fields: ['value'],
data: ["Region 1","Region 2","Region 3", "Region 4", "Region 5"],
expandData: true,


}),


}),// end of multiSelect


{
xtype: 'textfield',
ref: "../connectorField",
anchor: '0'
},










{ xtype: 'spacer', width: 10 }, {
xtype: 'box',
width: 16,
height: 16,
cls: 'qx-icon-search qx-icon-search-cross',
listeners: {
'afterrender': function(btn) {
btn.el.on('click', function() {
this.removeFilter(btn.ownerCt);
}, this);
},
scope: this
}
}]


});
var t=[];
this.tokens.push(filterItem);


this.insert(0, filterItem);


this.doLayout();


return filterItem;
},

vick_44
28 Apr 2018, 12:45 AM
This is a form container and not a grid to obtain rownumber on select events.

If you want to have a row number for your items in the form, the approach that I can think of is as below (This is hardcoded row number approach):

Add a custom variable called myRowNumber and set the value for each of your items. For the items which appear in first line, number them as 1, and in second as 2 and so on. And in your listener you can just obtain the reference as fieldObject.myRowNumber.



{
xtype: 'combo',
help: 'filter',
name: 'filter',
width: 90,
mode: 'local',
displayField : 'title',
myRowNumber : 1,
valueField: 'key',
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
}),
listeners: {
'select': function(fld, record, index, options) {
alert('my row no is: '+fld.myRowNumber);
},
scope: this
}
}


But I dont see much use of the above, it would help only if your listener is in your controller and you want to know which row the event occurred, if your listener is within your item like above, you already know which object was selected..