1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    13
    Vote Rating
    1
    nexSencha is on a distinguished road

      0  

    Default Answered: Extjs 4.1.3: How to set an item in DataView disabled

    Answered: Extjs 4.1.3: How to set an item in DataView disabled


    Hi All.

    I use DataView for a navigation menu.

    Navigation class looks like:
    PHP Code:
    Ext.define'example.view.Navigation', {
        
    extend'Ext.panel.Panel',    
        
    alias'widget.wNavigation',
        
    id:         'id_navi',
        
    iconCls:     'icon-navi',
        
    layout:     'fit',
        
    initComponent: function() {
            
    Ext.apply(this, {
                
    items: [{
                    
    xtype:       'dataview',
                    
    id:            'id_naviView',
                    
    store:       'NaviStore',
                    
    overItemCls'x-view-over',
                    
    singleSelect:  true,
                    
    trackOver:    true,
                     
    tpl'<tpl for="."> <div class="wrap-navi-item"  id="{naviId}" > <img src="{icon}" /> <br/>  <span>{title}</span> </div> </tpl>',
                    
    itemSelector:'div.wrap-navi-item',
                }],
            });
            
    this.callParent(arguments);
        }
    }); 

    The DataView has store as below:
    PHP Code:
    Ext.define('example.store.NaviStore', {
          
    extend'Ext.data.Store',
          
    requires : ['example.model.Model'],

         
    storeId:    'id_naviStore',
         
    model:      'example.model.NaviModel',
        
         
    data: [
            { 
    icon:'resources/images/icons/icon1.png',  title'item1',   naviId'id_item1' },
            { 
    icon:'resources/images/icons/icon2.png',  title'item2',   naviId'id_item2' },
          ]
    }); 
    I want to set an item (for example 'item1') disabled (thant means: menu icon should be slightly transparent und not selectable ).

    How can I do it best?

    Thanks..

  2. I would add something like the following to the dataview:

    Code:
    disableItem: function (record) {
            // Your-disabled-cls would have the rules for opacity: .5, etc.
            Ext.fly(view.getNode(record)).addCls('Your-disabled-cls');
            view.getSelectionModel().deselect(record);
        },
        enableItem: function (record) {
            // Your-disabled-cls would have the rules for opacity: .5, etc.
            Ext.fly(view.getNode(record)).removeCls('Your-disabled-cls');
        },
        listeners: {
            beforeselect: function(selModel, record) {
                console.log('Will be selectable: ' + !Ext.fly(view.getNode(record)).hasCls('Your-disabled-cls'));
                return !Ext.fly(view.getNode(record)).hasCls('Your-disabled-cls');
            }
        }
    The disable/enable applies a class that you've defined with the opacity you want to show disabled with - and disable() deselects the record so that you don't have a disabled and selected item. Then you apply the listener for beforeselect once there on the dataview and it'll just check to see if the disabledCls you defined is on the record's node or not.

  3. #2
    Sencha User
    Join Date
    Jan 2013
    Posts
    13
    Vote Rating
    1
    nexSencha is on a distinguished road

      0  

    Default


    I made it so. But I am still looking for a nicer solution for it.

    PHP Code:
    this.setDataViewItemDisabled(dataView,  'id_item1'); 
    PHP Code:
    setDataViewItemDisabled: function (dataViewdataViewRecordId) {
            
    Ext.get(dataViewRecordId).setOpacity(0.5);
            
    dataView.on('beforeselect',  function(dViewrecord) { 
                if (
    record.data.naviId == dataViewRecordId) return false;
            }, 
    this);


  4. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I would add something like the following to the dataview:

    Code:
    disableItem: function (record) {
            // Your-disabled-cls would have the rules for opacity: .5, etc.
            Ext.fly(view.getNode(record)).addCls('Your-disabled-cls');
            view.getSelectionModel().deselect(record);
        },
        enableItem: function (record) {
            // Your-disabled-cls would have the rules for opacity: .5, etc.
            Ext.fly(view.getNode(record)).removeCls('Your-disabled-cls');
        },
        listeners: {
            beforeselect: function(selModel, record) {
                console.log('Will be selectable: ' + !Ext.fly(view.getNode(record)).hasCls('Your-disabled-cls'));
                return !Ext.fly(view.getNode(record)).hasCls('Your-disabled-cls');
            }
        }
    The disable/enable applies a class that you've defined with the opacity you want to show disabled with - and disable() deselects the record so that you don't have a disabled and selected item. Then you apply the listener for beforeselect once there on the dataview and it'll just check to see if the disabledCls you defined is on the record's node or not.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  5. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    13
    Vote Rating
    1
    nexSencha is on a distinguished road

      0  

    Default


    Thanks for the answer.

    I slightly modified my store , i added a property disabled to data array: and it looks like
    PHP Code:
    data: [
     { 
    icon:'resources/images/icons/icon1.png',  title'item1'naviId'id_item1'disabled true },
     { 
    icon:'resources/images/icons/icon2.png',  title'item2'naviId'id_item2'disabled true },

    So i can check whether a button is disabled or not. And if it is disabled , then i set the opacity to 0.5

    But i like your solution. The behavior of the buttons is therefore nearly completely encapsulated in the dataview class.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar