CODEWITHSUNDEEP
sencha-touchextjssencha-touch-2
user1667559
user1667559

Reputation: 1

SenchaTouch onItemDisclosure 2 icons

I have a list and I want have two icons per line using onItemDisclosure. How can I do that?

Upvotes: 0

Views: 2170

Answers (3)

user2121620
user2121620

Reputation: 676

You can do this by manually adding a disclosure icon inside of itemTpl on your list items. Add this inside of your view:

     {
            xtype: 'list',
            onItemDisclosure: true,
            cls: 'my-list-cls',
            itemTpl: [
                '<div class="x-list x-list-disclosure check-mark" style="right: 48px"></div>'                 
            ]
        }

Notice that the div inside of itemTpl has the CSS class "x-list x-list-disclosure check-mark". I set style="right: 48px" because I want this icon to appear on the left side of the regular disclosure icon (the one with the right arrow) and this rule leaves enough room on the right to show the arrow icon.

Then, in your app.scss, add:

.my-list-cls {
  .x-list.check-mark.x-list-disclosure:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '3';
    font-family: 'Pictos';
    color: #fff;
    text-align: center;
    text-shadow: 0 0 0;
  }
}

This controls the styling for your new disclosure icon. By setting content: '3';, you are changing the icon from the default right arrow to a checkmark. (See all of the available icons here: Pictos fonts).

The result:
Sencha Touch list

Upvotes: 1

olegtaranenko
olegtaranenko

Reputation: 3880

It is possible but not easy. In short you have to extend class Ext.dataview.List and/or Ext.dataview.element.List.

Upvotes: 0

Vikal Sharma
Vikal Sharma

Reputation: 555

I don't know how to implement onItemDisclousre() on two icons but probably this will help you.
In the following example i have put an image on every itemlist and functionality is provided on itemtap event. This will serve the purpose of doing multiple tasks with single itemlist.

//demo.js

Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",

config: {
    layout: {
        type: 'fit'
    },
    items: [
    {
        xtype: "list",
        store: "store",
        itemId:"samplelist",
        loadingText: "Loading Notes...",
        emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
        onItemDisclosure: true,
        itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
                   "<div class=\"list-item-title\">{title}</div>"
        grouped: true
    }

    ],
    listeners:
    [
            {
            delegate: "#samplelist",
            event: "disclose",
            fn: "onDiscloseTap"
        }
    ]
},    
onDiscloseTap: function (list, record, target, index, evt, options) {

    this.fireEvent('ondisclosuretap', this, record);
}
});

// Democontrol.js

  Ext.define("Stackoverflow.controller.Democontrol", {
  extend: "Ext.app.Controller",
    config: {
    refs: {
        // We're going to lookup our views by xtype.
        Demo: "demo", 
        Demo1: "demo list",
          },
    control: {
        Demo: { 
               ondisclosuretap: "Disclosure", 
         },
        Demo1: { 

             itemtap:"imagetap" 

        }

    }
},

 Disclosure: function (list, record,target,index,e,obj) {
   Ext.Msg.alert('','Disclosure Tap');

},

  imagetap: function (dataview,index,list,record, tar, obj) { 
     tappedItem = tar.getTarget('div.x-button');
    btntype = tappedItem.getAttribute('btnType');
    if(btntype == 'related')
    {
    Ext.Msg.alert('','Image/Icon Tap');
    }
},

// Base Class functions.
launch: function () {
    this.callParent(arguments);

 },
init: function () {
    this.callParent(arguments);

}
});

//app.css

 .related-btn
   {
      width: 100px;
      height: 100px;
      position: absolute;
  bottom: 0.85em;
      right: 2.50em;
    -webkit-box-shadow: none;
   }

Hope this will help you.
bye.

Upvotes: 1

Related Questions