1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default Answered: selection in list

    Answered: selection in list


    Hello
    what is the best practice to select elements in tpl list :

    in my view
    Code:
    Ext.define("Route.view.History", {
        extend: 'Ext.List',
        xtype : 'historyPanel',
        requires: [
                 
        ],
        config: {
             title: "Historique",
             store: 'Itineraires',
                grouped: true,
             iconCls:'bookmarks', 
             activeCls: 'search-item-active',
             itemTpl : ['<div class="search-item">',
                             '<div class="action delete x-button x-button-decline-small">Supprimer</div>',
                            '<span><strong>{date} / </strong>{depart} - {arrivee} : {distance} km</span>',
                        '</div>'] ,    
             i 
        }
    });
    in my controller how can i select all div.delete in search-item ?

    when i swipe a item , it's show the delete button
    would like create a function to hide all delete button before

    Code:
    Ext.define('Route.controller.History', {
        extend: 'Ext.app.Controller',
     
        
        config: {
            refs: {
               history : 'historyPanel' 
            },
            control: {
                history :{
                    itemswipe: 'onItemSwipe',
                    itemtap  :     'deleteRecord'
                },
                 
            }
                  
        },
    .......
    init : function(){
            this.activeCls =  'search-item-active';     
        },
        
        onItemSwipe: function(list, index, node, record) {
            
            var activeCls =this.activeCls; 
                
            this.deactivateAll(list);
             
            if (node.hasCls(activeCls)) {
                node.removeCls(activeCls);
            } else {
                node.addCls(activeCls);
            }
             
        },
        
        deactivateAll:function(list) {
            var history = this.getHistory(),
                elem     = history.getItems(),
                activeCls =this.activeCls;
            /** here my pb i don't no how select div to remove class **/  
           var listElement = Ext.query('div.search-item div.'+activeCls);
             
            if(listElement.length >0 )
            {
             //listElement.removeCls(activeCls);  
            } 
            //Ext.select('div.'+activeCls, this.el.dom).removeCls(activeCls);
             
        }
    thanks a lot for your help

  2. I guess you can solve things with some css manipulation.

    Given
    initially the delete button has class .btnDel which include display:none
    On Item Swipe
    adda class to item .swipped and specify in style definition that .swipped .btnDel has display:block !important



    There is no need to remove the swipped class from the all other items, it is enough to keep a reference to the last swipped item and remove the class only from that one.
    So on item swipped handler you could do:

    if(this.lastSwipped) this.lastSwipped.removeCls( 'swipped' );
    this.lastSwipped = item;
    item.addCls( 'swipped' );

  3. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    hello

    i don't know if it's the best practice but i found this :


    Code:
    deactivateAll:function() {
    		var   activeCls =this.activeCls;
    		  
    		var listElement = Ext.select("div."+activeCls);
    		 listElement.removeCls(activeCls);   
    }
    What do you think?

    thanks a lot

  4. #3

  5. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    Thanks for your post

    May be I missed something, but i search the solution to select div in template not items in list
    I dont no if it change something but with my method, it search in all dom Ext.select. Perhaps it's better to more target but i don't no how

    Thanks

  6. #5
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Selection of List items consist as well in changing list items containers dom class.
    So writing some css accordingly can help you do what you want I guess.


    I don't really understand what you try to do but if you prefer to operate on list items dom...

    itemtap( Ext.dataview.DataView this, Number index, Ext.Element/Ext.dataview.component.DataItem target, Ext.data.Model record,Ext.EventObject e, Object eOpts )

    the target parameter has a dom property, giving you the dom of the item tapped.

    From that point you can select elements of items dom using

    Ext.select( selector, target.dom );



  7. #6
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    Thanks you Bluehipy,

    excuse me if i'm not clear.

    i have a list panel, i want show a delete button when you swipe a item.

    in list panel
    Code:
    activeCls: 'search-item-active',
    itemTpl : ['<div class="search-item">',
    '<div class="action delete x-button x-button-decline-small">Supprimer</div>', '<span><strong>{date} / </strong>{depart} - {arrivee} : {distance} km</span>', '</div>'] ,
    in my panel a made 3 functions :
    first : when you swipe a item
    Code:
    onItemSwipe: function(list, index, node, record) {
            
    
    
            var activeCls =this.activeCls; // i add this class to itemtpl 
                
            this.deactivateAll(list);
            
            
            if (node.hasCls(activeCls)) {
                node.removeCls(activeCls);
            } else {
                node.addCls(activeCls);
            }
             
        }

    second : hide all delete button
    // here my question : is it the best way to select div ?
    Code:
    deactivateAll:function(list) {
            var activeCls =this.activeCls;
            
            var listElement = Ext.select("div."+activeCls);
            listElement.removeCls(activeCls);   
        },

    third : when you tap delete button
    Code:
    deleteRecord : function(list, index, target, record, e){
            var activeCls =this.activeCls;
            var history = this.getHistory(); 
            
            if (e.getTarget    ('.' + activeCls + ' div.delete')) {
                console.log("index:"+index)
                var dataStore = Ext.getStore('Itineraires');
                dataStore.removeAt(index);
                dataStore.sync();
                
                history.deselectAll();
            }
        }
    thanks ;-)

  8. #7
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    I guess you can solve things with some css manipulation.

    Given
    initially the delete button has class .btnDel which include display:none
    On Item Swipe
    adda class to item .swipped and specify in style definition that .swipped .btnDel has display:block !important



    There is no need to remove the swipped class from the all other items, it is enough to keep a reference to the last swipped item and remove the class only from that one.
    So on item swipped handler you could do:

    if(this.lastSwipped) this.lastSwipped.removeCls( 'swipped' );
    this.lastSwipped = item;
    item.addCls( 'swipped' );

  9. #8
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    yes

    you give me THE solution, when i swipe a item, store the item in my controller and when a new swipe, remove the old !

    thanks, it's i think best performance than deselect all !

    thanks again

Thread Participants: 1

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