是否可以在列表或DataView中的itemTpl中添加按钮?

时间:2012-09-20 16:57:03

标签: sencha-touch extjs

任何人都可以对这个问题有所了解

我想在Sencha Touch中为itemTpl添加一个按钮。 {}中的键将替换为store中的值。但是,是否可以在模板中添加按钮?

例如,您可以在每个项目中使用删除按钮列出喜爱的音乐列表。

可能?

1 个答案:

答案 0 :(得分:3)

我不确定我们是否可以在Sencha-2中为itemTpl添加按钮,但我们肯定可以在itemTpl中添加图像,然后我们就可以执行各种操作(比如你要删除的情况) )。
这是代码: -

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

希望这会有所帮助。