Add Buttons on Headings of AngularJs BootstrapAccordion

Recently in one of my projects we were using AngularJs and Bootstrap UI. We have a layouts where we have buttons on heading of accordion and we have to add click events for it.



So we know the behavior of accordion. When we click on headings of accordion it actually expands it. In My case I have to stop and that and invoke button click function. In this blog I will explain this.

Basic idea is to stop event propagation. So when we click on button it will invoke handler for it and and if we stop propagation of event in that function it will not expand the accordion view. Lets assume we have following delete button on accordion heading.

So when I click on delete it should actually remove that record instead of opening the accordion. For that add click handler for the buttons as follow.

<accordion-heading>
     <div>
          Options
     </div>
     <div style="float:right">
          <button ng-click="deleteItem(item, $event)" type="button" class="btn" style="color: #000"               >Delete</button>
     </div>
</accordion-heading>

As you can see in above code we have added click event handle with ng-click and we are passing item and event as parameter. Now in controller add the event handler.

$scope.deleteItem = function(item, $event){
      $event.stopPropoagation();
}

As you can see in above code we are using stopPropagation method of event object to stop event propagation. Hence the event does not propagated and accordion will not expand. If you click anywhere else it will open it but if you click on delete button it will not invoke it. Hope this helps you.

Sencha Touch List Expand and Collapse All Items

Recently in one of our Sencha Touch project we have a requirement to have expand and collapse all button on top of like to expand and collapse all the items of the list. Here is how we implemented it.

First add events of the buttons to your controller.

btnExpandAll: {
        tap: 'expandAll'
      },
btnCollapseAll: {
         tap: 'collapseAll'
        }

Now add above two functions in controller.

expandAll: function(){
    var list = this.getItemsList();
    var items = list.getViewItems();
        var itemsLn = items.length;
        for (i = 0; i < itemsLn; i++) {
            item = items[i];
            Ext.Animator.run({
element: item.element,
duration: 500,
easing: 'ease-in',
preserveEndState: true,
from: {
height: 60
},
to: {
height: 190
}
});
        }
    }

collapseAll: function(){
    var list = this.getItemsList();
    var items = list.getViewItems();
        var itemsLn = items.length;
        for (i = 0; i < itemsLn; i++) {
            item = items[i];
            Ext.Animator.run({
element: item.element,
duration: 500,
easing: 'ease-in',
preserveEndState: true,
from: {
height: 190
},
to: {
height: 60
}
});
        }
    }

You can set your own from and to height according to your requirement.

Sencha Touch List Accordion Layout (Expand and Collapse Sencha Touch List Item)

Hello,

Recently I was working on a project where we have a requirement to have accordion layout in Sencha Touch List items. Basically there are few items in list and user should be able to expand and collapse it by taping in respective list item. In this blog, we will see how to implement it.  First set fix item height for the list. For example,

{
       xtype: 'list',
       itemId: 'itemsList',
       id: 'itemsList',
       store: 'Items',
       itemHeight: 30,
       itemTpl:'<div style="overflow:hidden">Touch me to Expand Item {itemName}'+
                           '<div>'+
                                  '{itemDescription}'
                           '</div>'+
                    '</div>'
}

As you see in above code we have set height of item to 30 and set overflow to hidden so now you can have big texts as item description that will not be visible completely in collapsed mode. Now we have to add tap event for list in controller.

control: {
        '#itemsList': {
        itemtap: 'expandCollapseItemView'
        }
        }
And the function expandCollapseItemView in your controller.

expandCollapseItemView: function(list, index, target, record, event){
        var fromHeight = 0;
    var toHeight = 0;
    if(target.element.dom.clientHeight <= 30){
    fromHeight = 30;
    toHeight = 100;
     }else{
    fromHeight = 100;
    toHeight = 30;
     }
    Ext.Animator.run({
element: target.element,
duration: 500,
easing: 'ease-in',
preserveEndState: true,
from: {
height: fromHeight
},
to: {
height: toHeight
}
});
}

So if you check the above code we are identifying if we have expand or collapse based on client height of the item with the property target.element.dom.clientHeight. If height is less then or equal to 30 which is our item height for the list, we will expand the list item. After expanding list item the height will be 100 next time we will get clientHeight as 100 so we will collapse it to 30.

And we are running the animation with Ext.Animator.run and setting height from small to big or big to small.

With this you have expandable and collapsible list items.