1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    9
    Vote Rating
    0
    wood_tah is on a distinguished road

      0  

    Default CheckboxSelectionModel Reference Seems to be Lost in TabPanel

    CheckboxSelectionModel Reference Seems to be Lost in TabPanel


    I have an odd problem when using the CheckboxSelectionModel for my grid in a tabPanel. I created a tabPanel with 2 tabs, each populated with a TagGrid object. Everything seems to be fine at first: I am able to select and de-select items in the first tab as I would expect. I change to the 2nd tab, and I can select and de-select items as I would expect. I go back to the first tab, and I am no longer able to select/de-select any items, or so it appears. When I switch back to the second tab, the rows that I was selecting/de-selecting in the first tab are showing up here.

    For example: I try to select the 3rd item in the 1st tab, but I don't see anything. I change to the 2nd tab, and I see the 3rd item seleted in that grid. Somehow the CBSelectionModel for the first tab is lost, or at least its reference is lost ...

    I was unable to paste the code in here, and had to retype it, so please look past any obvious typos (unless it is something that you think would cause the problem I am seeing).

    Thanks in advance for any help

    Code:
    my.own.namespace.TagGrid = Ext.extend(Ext.grid.GridPanel) {
        columnLines: true,
        stripeRows: true,
        frame: true,
        border: true,
        tags: [{id: 1, shortDescription: 'A', longDescription: 'Long Desc for A'}, {id: 2, shortDescription: 'B', longDescription: 'Long Desc for B'}],
        tagIds: [],
    
        cbSelModel: new Ext.grid.CheckboxSelectionModel({
            hidden: false,
            singleSelect: false,
            moveEditorOnEnter: true,
            checkOnly: false,
            listeners: {
                rowselect: function(sm, rowIndex, record) {
                    sm.grid.updateToolbarText(sm.getCount());
                },
                rowdeselect: function(sm, rowIndex, record) {
                    sm.grid.updateToolbarText(sm.getCount());
                },
                scope: this
            }
        }),
    
        initComponent: function() {
            this.store = this.buildStore();  
         
            Ext.apply(this, {
                columns: [
                    this.cbSelModel,
                    {
                        header: 'ID',
                        dataIndex: 'id',
                        width: 60 
                    },
                    {
                        header: 'Tag',
                        dataIndex: 'shortDescription',
                        width: 150 
                    },
                    {
                        header: 'Description',
                        dataIndex: 'longDescription',
                        width: 350 
                    }
                ],
                sm: this.cbSelModel
            });
    
            my.own.namespace.TagGrid.superclass.initComponent.call(this);
        },
    
        buildStore: function() {
            var store = new Ext.data.JsonStore({
                data: this.tags,
                fields: ['id', 'shortDescription', 'longDescription'],
            });
    
            this.doLayout();
    
            return store;
        } 
    }
    Code:
    my.own.namespace.TagWindow = Ext.extend(Ext.Window) {
        title: 'My Tag Window',
        width: 800,
        height: 700,
        layout: border,
        modal : true,
        bodyStyle: 'padding: 5px',
    
        initComponent: function() {
            this.on('beforerender', function(window) {
                this.getTagData();
            });
    
            my.own.namespace.TagWindow.superclass.initComponent.call(this);
        },
    
        getTabPanel: function() {
            return Ext.getCmp('tagTabPanel');
        },
    
        getTagData: function() {
            // ajax call to get data
        },
    
        ajaxSuccess: function(response) {
            var respObj = Ext.decode(response.responseText);
            var tabPanel = this.scope.getTabPanel();
            tabPanel.add(this.scope.createTabs(respObj));
        },
    
        createTabs: function(respObj) {
            var loopItem = respObj.arr;
            var tabArr = [];
           
            for (var i = 0; i < loopItem.length; i++) {
                var tags = loopItem.tags;
                var tab = {
                    title: 'Tab #' + i;
                    layout: 'fit',
                    id: 'tab_' + i,
                    items: [new my.own.namespace.TagGrid({tags: tags})]
                };
    
                tabArr.push(tab);
            }
    
            return tabArr;
        } 
    }
    Code:
    var tabPanel = {
        region: 'center',
        xtype: 'tabpanel',
        id: 'tagTabPanel',
        activeItem: 0
    };
    
    var win = new my.own.namespace.TagWindow({items: [tabPanel]});
    win.show();

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    9
    Vote Rating
    0
    wood_tah is on a distinguished road

      0  

    Default


    I figured out my problem. I needed to move the definition of cbSelModel down into the initComponent() method, and create it as a local variable.

    Updated code shown below. Red text was removed, and green text is what was changed/added.

    Code:
    my.own.namespace.TagGrid = Ext.extend(Ext.grid.GridPanel) {
        columnLines: true,
        stripRows: true,
        frame: true,
        border: true,
        tags: [{id: 1, shortDescription: 'A', longDescription: 'Long Desc for A'}, {id: 2, shortDescription: 'B', longDescription: 'Long Desc for B'}],
        tagIds: [],
        cbSelModel: new Ext.grid.CheckboxSelectionModel({
            hidden: false,
            singleSelect: false,
            moveEditorOnEnter: true,
            checkOnly: false,
            listeners: {
                rowselect: function(sm, rowIndex, record) {
                    sm.grid.updateToolbarText(sm.getCount());
                },
                rowdeselect: function(sm, rowIndex, record) {
                    sm.grid.updateToolbarText(sm.getCount());
                },
                scope: this
            }
        }),
    
        initComponent: function() {
            this.store = this.buildStore();       
            var cbSelModel = new Ext.grid.CheckboxSelectionModel({
            hidden: false,
            singleSelect: false,
            moveEditorOnEnter: true,
            checkOnly: false,
            listeners: {
                rowselect: function(sm, rowIndex, record) {
                    sm.grid.updateToolbarText(sm.getCount());
                },
                rowdeselect: function(sm, rowIndex, record) {
                    sm.grid.updateToolbarText(sm.getCount());
                },
                scope: this
            }
        });
    
            Ext.apply(this, {
                columns: [
                    cbSelModel,
                    {
                        header: 'Tag',
                        dataIndex: 'shortDescription',
                        width: 150 
                    },
                    {
                        header: 'ID',
                        dataIndex: 'id',
                        width: 60 
                    },
                    {
                        header: 'Description',
                        dataIndex: 'longDescription',
                        width: 350 
                    }
                ],
                sm: cbSelModel
            });
    
            my.own.namespace.TagGrid.superclass.initComponent.call(this);
        },
    
        buildStore: function() {
            var store = new Ext.data.JsonStore({
                data: this.tags,
                fields: ['id', 'shortDescription', 'longDescription'],
            });
    
            this.doLayout();
    
            return store;
        } 
    }

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi