0

我有一个列表，我希望每行有两个图标，使用onItemDisclosure. 我怎样才能做到这一点？

4

3 回答 3

1

我不知道如何在两个图标上实现onItemDisclousre()但这可能会对您有所帮助。
在下面的示例中，我在每个itemlist上放置了一个图像，并且在itemtap 事件上提供了功能 。这将用于使用单个项目列表执行多项任务。

//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);
}
});

// 演示控制.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;
   }

希望这会帮助你。
再见。

于 2012-09-17T14:10:13.140 回答
1

您可以通过在列表项的 itemTpl 内手动添加披露图标来执行此操作。在您的视图中添加以下内容：

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

请注意，div内部itemTpl有 CSS 类“x-list x-list-disclosure check-mark”。我设置style="right: 48px"是因为我希望这个图标出现在常规披露图标（带有右箭头的那个）的左侧，并且这个规则在右侧留下了足够的空间来显示箭头图标。

然后，在您的 app.scss 中，添加：

.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;
  }
}

这将控制您的新披露图标的样式。通过设置content: '3';，您将图标从默认的向右箭头更改为复选标记。（在此处查看所有可用图标：Pictos 字体）。

结果：
煎茶触控列表

于 2015-06-01T19:09:24.307 回答
0

这是可能的，但并不容易。简而言之，您必须扩展类Ext.dataview.List和/或Ext.dataview.element.List。

于 2012-09-24T20:08:36.753 回答