Question

我有一个列表，我希望每行使用onItemDisclosure两个图标。我怎么能这样做？

Answer 1

我不知道如何在两个图标上实现 onItemDisclousre（），但这可能会对您有所帮助。
在以下示例中，我在每个项目列表上放置了一个图像，并在 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);
}
});

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

希望这会对你有所帮助。
再见。

Answer 2

您可以通过在列表项上的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 fonts）。

结果：
Sencha Touch list

Answer 3

有可能但不容易。简而言之，您必须扩展课程Ext.dataview.List和/或Ext.dataview.element.List。

Sencha Touch on Item Disclosure 2图标

3 个答案: