1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    elvinkwok is on a distinguished road

      0  

    Default Unanswered: Extjs4 : this.items.itemAt is not a function

    Unanswered: Extjs4 : this.items.itemAt is not a function


    I running the js file, but it show no itemAt() this function;
    following the code by EXT3, now I want to change the code by EXT4, but I try two day that it running fail! please give help me to run the code! thank you so much!

    Code:
     
    Ext.namespace("Example");
    
    Example.LinksPanel = Ext.define('MyAPP.linksPanel', {
        alias: 'widget.linksPanel',
        title: '面板标题',
        extend: 'Ext.Panel',
        collapsible: true,
        width: 400,
        height: 300,
        autoScroll: false,
    
    
        links: [{
            text: 'Link 1',
            href: '#'},
        {
            text: 'Link 2',
            href: '#'},
        {
            text: 'Link 3',
            href: '#'}],
        layout: 'fit',
        tpl: new Ext.XTemplate('<tpl for="links"><a class="examplelink" href="{href}">{text}</a></tpl>')
    
        ,
        afterRender: function() {
    
            Example.LinksPanel.superclass.afterRender.apply(this, arguments);
    
            this.tpl.overwrite(this.body, {
                links: this.links
            });
        }
    
    });
    
    Example.Window = Ext.define('winn', {
        layout: 'border',
        extend: 'Ext.window.Window',
    
        layout: 'border',
        initComponent: function() {
    
            var config = {
                items: [{
                    xtype: 'linksPanel',
                    region: 'west',
                    width: 200,
                    collapsible: true,
                    collapseMode: 'mini',
                    split: true},
                {
                    xtype: 'tabpanel',
                    region: 'center',
                    border: false,
                    activeItem: 0,
                    items: [{
                        title: 'A tab'}]}]
            };
    
            Ext.apply(this, Ext.apply(this.initialConfig, config));
    
            Example.Window.superclass.initComponent.apply(this, arguments);
    
            this.linksPanel = this.items.itemAt(0);
            this.tabPanel = this.items.itemAt(1);
    
            this.linksPanel.on({
                scope: this,
                render: function() {
                    this.linksPanel.body.on({
                        scope: this,
                        click: this.onLinkClick,
                        delegate: 'a.examplelink',
                        stopEvent: true
                    });
                }
            });
        },
        onLinkClick: function(e, t) {
            var title = t.innerHTML;
            var tab = this.tabPanel.items.find(function(i) {
                return i.title === title;
            });
            if (!tab) {
                tab = this.tabPanel.add({
                    title: title,
                    layout: 'fit'
                });
            }
            this.tabPanel.setActiveTab(tab);
    
        }
    });
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
    Ext.onReady(function() {
        Ext.Loader.setConfig({
            enabled: true
        });
        Ext.QuickTips.init();
        var win = new Example.Window({
            width: 600,
            height: 400,
            closable: false,
            title: Ext.fly('page-title').dom.innerHTML
        });
        win.show();
    });​
    Last edited by scottmartin; 27 Sep 2012 at 7:11 AM. Reason: Formatted Code.. Feeling nice today.

  2. #2
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    377
    Answers
    1
    Vote Rating
    28
    danguba will become famous soon enough danguba will become famous soon enough

      0  

    Default


    Please format your code before posting it. I wanted to help but I'm not gonna waste my time formatting your code and it is practically impossible to read it the way you posted it
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    elvinkwok is on a distinguished road

      0  

    Default


    Quote Originally Posted by danguba View Post
    Please format your code before posting it. I wanted to help but I'm not gonna waste my time formatting your code and it is practically impossible to read it the way you posted it
    So sorry! Can you help me ?
    Code:
    Ext.ns('Example');
    Ext.define('MyApp.LinksPanel', {
        extend: 'Ext.panel.Panel',
        split: false,
        collapsible: true
        ,
        cls: 'link-panel'
        ,
        links: [{
            text: 'Link 1'
            ,
            href: '#'
    
        },
        {
            text: 'Link 2'
            ,
            href: '#'
    
        },
        {
            text: 'Link 3'
            ,
            href: '#'
    
        }]
        ,
        layout: 'fit'
        ,
        tpl: new Ext.XTemplate('<tpl for="links"><a class="examplelink" href="{href}">{text}</a></tpl>')
        ,
        afterRender: function() {
            this.superclass.afterRender.apply(this, arguments);
            this.tpl.overwrite(this.body, {
                links: this.links
    
            });
    
    
        }
    
    
    });
    
    Example.Window = Ext.define('Myapp.view', {
        extend: 'Ext.Viewport',
        alias: 'widget.examplewindow',
        initComponent: function() {
            var config = {
                items: [{
                    xtype: 'LinksPanel',
                    margins: '5 5 5 5',
                    split: true,
                    layout: 'accordion',
                    layoutConfig: {
                        animate: true
    
                    },
                    width: 250,
                    minWidth: 100,
                    region: "west"
    
                },
                {
                    title: "menu",
                    region: "north",
                    height: 100,
                    html: "<h1>DMS!</h1>"
    
                },
                {
                    xtype: "tabpanel",
                    region: "center",
                    margins: '5 0 0 0',
                    items: [{
                        title: "panel1"
    
                    },
                    {
                        title: "panel2"
    
                    }]
    
                }]
    
            };
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.superclass.initComponent.apply(this, arguments);
            this.linksPanel = this.items.itemAt(0);
            this.tabPanel = this.items.itemAt(1);
            this.linksPanel.on({
                scope: this
                ,
                render: function() {
                    this.linksPanel.body.on({
                        scope: this
                        ,
                        click: this.onLinkClick
                        ,
                        delegate: 'a.examplelink'
                        ,
                        stopEvent: true
    
    
                    });
    
                }
    
            });
    
        },
        onLinkClick: function(e, t) {
            var title = t.innerHTML;
            var tab = this.tabPanel.items.find(function(i) {
                return i.title === title;
    
            });
            if (!tab) {
                tab = this.tabPanel.add({
                    title: title
                    ,
                    layout: 'fit'
    
                });
    
            }
            this.tabPanel.setActiveTab(tab);
    
        }
    
    
    })
    
     Ext.onReady(function() {
        var win = new Example.Window({
            width: 600
            ,
            height: 400
            ,
            closable: false
            ,
            title: Ext.fly('page-title').dom.innerHTML
    
    
        });
        win.show();
    
    });

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44
    Vote Rating
    42
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      0  

    Default


    Code:
     this.superclass.initComponent.apply(this, arguments);
    change to:
    Code:
    this.callParent(arguments);

  5. #5
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    377
    Answers
    1
    Vote Rating
    28
    danguba will become famous soon enough danguba will become famous soon enough

      0  

    Default


    Much better. Thank you.

    In Ext4 method that replaced itemAt for accessing items of mixed collection is getAt
    http://docs.sencha.com/ext-js/4-1/#!...n-method-getAt
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  6. #6
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44
    Vote Rating
    42
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      1  

    Default


    Getting items by index in collection not good practice - use itemId instead:
    Code:
    initComponent: function() {
    
            var config = {
                items: [{
                    itemId: 'links',
                    xtype: 'linksPanel',
                    region: 'west',
                    width: 200,
                    collapsible: true,
                    collapseMode: 'mini',
                    split: true},
                {
                    itemId: 'tabs',
                    xtype: 'tabpanel',
                    region: 'center',
                    border: false,
                    activeItem: 0,
                    items: [{
                        title: 'A tab'}]}]
            };
    
            Ext.apply(this, Ext.apply(this.initialConfig, config));
    
            // Call parent
           this.callParent(arguments);
    
    
            this.linksPanel = this.down('#links');
            this.tabPanel = this.down('#tabs');
    
            this.linksPanel.on({
                scope: this,
                render: function() {
                    this.linksPanel.body.on({
                        scope: this,
                        click: this.onLinkClick,
                        delegate: 'a.examplelink',
                        stopEvent: true
                    });
                }
            });
        },

Thread Participants: 2