Question

我不确定这是否可行，但我有一个应用程序没有做我想要的。首先，它显示从数据库到面板的餐馆列表。

tpl: [
   '<tpl for=".">',
       '<div="my_div"><h2>{restaurant_name}</h2></div>',
   '</tpl>'
]

这个工作正常，并给我一个我的餐厅列表。现在问题来了。我想添加一个按钮，所以我将“my_div”点击到另一个面板。我可以用停靠的项目做到这一点，但这个想法不起作用，因为你可以点击任何餐馆并获取他们的信息。

我假设我需要以某种方式调用事件处理程序（我可以从停靠的项目中工作）。我基本上不知道如何向模板添加按钮，而sencha帮助在这个主题上没用。

我的事件处理程序看起来像这样：

var restaurantListHandler = function(button,event){
    mainPanel.setActiveItem(restaurantList, {type: 'slide', direction: 'right'});
}

由于

埃里克

Answer 1

如果我理解正确，你正在寻找：

要添加到模板的按钮
要绑定到该按钮的事件处理程序，该处理程序与您的其他列表项绑定到的
按钮必须在列表本身内;它不能是一个单独的部分
按钮的事件处理程序必须将其路由到新页面，而不是作为其兄弟姐妹的其他列表项的操作

这一切都是真的吗？

如果是，我会在你的列表事件处理程序中抛出一个条件，它将检查元素上的类或ID（最简单/最轻量级），并在找到它之后，让它采取不同的操作，例如，转到下一页。有点像jQuery.live（）或其他委托。如果您需要我详细说明，请告诉我。

如果不是，我会说看看我的3号;按钮绝对必须在列表中吗？如果它与每个项目相关联，那么我们会做一件事，但如果没有，我们会想做另一件事。所以我需要先知道，在我完全回答之前。如果必须在那里，请参见上文。如果它不必在列表中，那么我将把它从列表中取出并将其声明为新组件。从那里你应该能够在配置中指定一个处理程序，比如

items: { xtype: 'button', handler: goAwesomePlaces }

其中goAwesomePlaces是您的处理程序。

Answer 2

您可以使用Ext.List的onItemDisclosure选项：

http://docs.sencha.com/touch/1-1/#!/api/Ext.List-cfg-onItemDisclosure

在用户界面/列表/披露下的Sencha Touch Kitchen Sink中进行了演示：

http://dev.sencha.com/deploy/touch/examples/kitchensink/

var serviceList = new Ext.List({
            id: 'servicelist',
            blockRefresh: true,
            pinHeaders: false,
            itemTpl: serviceTemplate,
            grouped: true,
            indexBar: false,
            singleSelect: true,
            allowDeselect: false,
            showAnimation: 'slide',
            store: serviceStore,
            emptyText: L10N[lang].msg.no_services,
            multiSelect: false,
            itemCls: 'servicemain',
            cls: 'background',
            onItemDisclosure: function(record, btn, index) {
          Ext.Msg.alert('Service', 'Name: ' + record.get('service'), Ext.emptyFn);
      }
    });

Answer 3

如果您希望获得以下内容：每个项目上都有一个按钮的列表。那么这是我实现的相同

var asListItemTpl = new Ext.XTemplate(
                              '<tpl for=".">',
                              '<div class="sb-section-title">{label}</div>',
                              '<div class="as-button"><input type="button" id="btn{id}" value="btn{id}" width="12px"> </div>',
                              '</tpl>'
                              );

希望这是有道理的。

Answer 4

也许你可以使用类似的东西：

onclick="javascript:selectRestaurant(\'{Id}\');"

在图像上的div或（我曾经做过的）

并具有全局函数selectRestaurant Id将是一个唯一标识餐厅的数据库字段。

如何向tpl添加按钮

4 个答案: