1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default Answered: itemOverCls doesn't seem to be working in data view

    Answered: itemOverCls doesn't seem to be working in data view


    I'm probably missing something stupid again =P

    anyway I've been trying to get a dumbed down version of those data view examples but I'm failing to get item over classes working
    I turned on track over. So I'm kinda blind on what I'm missing.

    I think this is the relevant bit of code on the matter

    tpl: [
    '<tpl for=".">',
    '<div class= "'+ this.customClass+'" id="{id}">',
    '<div class="thumb"><img src="{url}" ></div>',
    '<span class="thumbtext">{name}</span></div>',
    '</tpl>'
    ],
    multiSelect: true,
    trackOver: true,
    itemOverCls: 'x-item-over',
    itemSelector: 'div.'+ this.customClass,
    listeners:
    {
    itemclick:this.test,
    itemdblclick:this.testing
    }

    do I need a mouse over event perhaps?

  2. You're using applyIf to copy the config across. That won't copy properties that already exist of the target object. Some of those properties are specified on the superclasses. Try using apply instead, or where possible just move them onto the prototype by putting them in the define config.

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    I don't know if this is supposed to happen or not, but in an attempt to find the sollution I removed the id from the tpl.

    When I run the application then and inspect the elements it starts generating Id's on mouse over O.O;
    but as I said I don't know if it's supposed to happen or not. Maybe this explains why I'm having the problem.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    somebody pls?

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    It's overItemCls, not itemOverCls.

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    It's overItemCls, not itemOverCls.
    just changed it to that still not working =/

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Odd, it fixed it for me.

    You'll need to provide a complete test case. The code you posted is missing key details like sample data and whatever this is. Please use [CODE] tags when posting code.

  8. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    Odd, it fixed it for me.

    You'll need to provide a complete test case. The code you posted is missing key details like sample data and whatever this is. Please use [CODE] tags when posting code.
    I was wondering already how you guys posted code

    the data

    Code:
    Ext.define('App.store.DummyThumbStore', {
        extend: 'Ext.data.Store',
        model: 'App.model.Thumb',
        data  : [
                     {name: 'name', url: 'images/placeholder.png', id:'3' },
                     {name: 'name', url: 'images/placeholder.png', id:'4'},
                     {name: 'name', url: 'images/placeholder.png', id:'1'},
                     {name: 'somethumb', url: 'images/placeholder.png', id:'2'}
    
                ]
     });
    the model
    Code:
    Ext.define('App.model.Thumb', {
        extend: 'Ext.data.Model',
        fields: ['name', 'url', 'id']
    
    });
    the full view class
    Code:
    Ext.define('App.view.navigation.Thumbnails', {
        extend: 'Ext.view.View',
        alias: 'widget.thumbnails',
        layout: 'fit',
        //default thumb wrapping div name
        customClass: 'defaultThumb',
        store:'DummyThumbStore',
        
        initComponent: function() 
        {
            var me = this;        
            
            Ext.applyIf(me,
            {
                
                tpl: [
                           '<tpl for=".">',
                             '<div class= "'+ this.customClass+'" id="{id}">', 
                             '<div class="thumb"><img src="{url}" ></div>',
                             '<span class="thumbtext">{name}</span></div>',
                           '</tpl>'
                       ],
                multiSelect: true,
                trackOver: true,
                overItemCls: 'x-item-over',
                itemSelector: 'div.'+ this.customClass,
                //need to move this to controller
                listeners: 
                {
                      itemclick:this.test,
                       itemdblclick:this.testing
                }
            
            });
            
            me.callParent(arguments);
        },
        test: function()
        {
            console.log('single click');
        },
        testing: function(view,record, item)
        {
            console.log('testing 123');
            console.log(item.id);
        }
    });
    one of the two panels it's in
    Code:
    Ext.define('App.view.navigation.Drawer', 
    {
        cls:'drawer',
        extend: 'Ext.panel.Panel',
        alias: 'widget.drawer',
        requires: ['Ext.panel.Panel'],
        initComponent: function() 
        {
            var me = this;
            
            var tabsPanel = Ext.create('Ext.tab.Panel',
            {//define the tabs/panels
                bodyCls: 'panelBody',
                items: [
                    {
                        xtype: 'panel',
                        title: 'test1',
                        
                       items:[
                       {
                            xtype:'thumbnails',
                            customClass: 'drawerThumb'
                       }
                       
                       ]
                     
                    },
                    {
                        xtype: 'panel',
                        title: 'test2'
                    },
                    {
                        xtype: 'panel',
                        title: 'test3'
                    }
                ]
                
            });
            
            Ext.applyIf(me,
            {
                items:[tabsPanel]
            });
            
            me.callParent();
            
            return me;
        }
    
        
    });
    the other view it's in
    Code:
    Ext.define('App.view.dock.Dock', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.dock',
        width: 100,
        requires: ['Ext.panel.Panel'],
        initComponent: function()
        {
            var me = this;
            
            var thumbnails = Ext.create('App.view.navigation.Thumbnails',
            {
                customClass: 'dockThumb'
            });
            
            Ext.applyIf(me,
            {
                items:[thumbnails]
            });
            
            me.callParent(arguments);
        }
        
    });
    could the testing data be causing this?

    (I tried the case again without id's still no luck)

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    You're using applyIf to copy the config across. That won't copy properties that already exist of the target object. Some of those properties are specified on the superclasses. Try using apply instead, or where possible just move them onto the prototype by putting them in the define config.

  10. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    You're using applyIf to copy the config across. That won't copy properties that already exist of the target object. Some of those properties are specified on the superclasses. Try using apply instead, or where possible just move them onto the prototype by putting them in the define config.
    it works now thanks a million <33

Thread Participants: 1

Tags for this Thread