Results 1 to 2 of 2

Thread: Best way to get index of an element in a Container

  1. #1

    Default Best way to get index of an element in a Container

    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:
    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;
            },
    

  2. #2
    Sencha User vick_44's Avatar
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default

    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.

    Code:
    {
        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..

Similar Threads

  1. Replies: 3
    Last Post: 5 Apr 2014, 10:57 AM
  2. Best way to get index of an element in a Container
    By 29er in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 25 Jun 2012, 1:08 AM
  3. Replies: 6
    Last Post: 12 Jan 2010, 3:46 AM
  4. Ext.Element.scrollIntoPosition - scroll an Element within a container to anchor point
    By makana in forum Ext 3.x: User Extensions and Plugins
    Replies: 0
    Last Post: 11 Dec 2009, 9:23 AM
  5. Get container index for a given component
    By mojotosh in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 19 Oct 2009, 11:43 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •