可点击的列/栏/水平布局与 sencha

Question

我在尝试使 sencha 上的列可点击时遇到问题。我尝试了各种方法，将文本放入容器、组件等中，但我无法让它对点击做出反应。

这是代码片段。检查一下监听器，当我点击文本或布局栏时它不起作用。请帮忙！

app.views.test = Ext.extend(Ext.Panel, {
    scroll: "vertical",
    id: 'test',    

    initComponent: function() {      

        var testbar = {
            layout : {
                type : 'vbox',
                align : 'start',
                pack : 'start'
            },
            width : '60%',
            items : [{
                html : 'press this column
                bar : '5 0 0 15',
                width : '100%'
            }],
            listeners: {
                itemtap : function () {
                    console.log("goto next");
                }
            }   
        };

        var testViews = {   
            items : [ testbar ]
        };              

        this.items = [ testViews ];

        app.views.test.superclass.initComponent.apply(this, arguments);
    },

    onSelect: function(sel, records){
        if (records[0] !== undefined) {
        }
    }
});

Answer 1

至于回答你最后的评论，不，如果你不需要大多数面板的功能，vbox 可能有点过分了。我建议只使用纯 dom。 pure dom 的好处是你可以完全控制你需要的东西。如果您使用 vbox，您最终将否定或禁用它提供的一些 css/功能。

首先，这是纯dom方法： 链接到示例

//Create a simple namespace. Habit :)
Ext.ns('NS');

/**
 * This is the customized menu component
 * Usage: bla bla..
 */
NS.Menu1 = Ext.extend(Ext.Component, {

    /**
     * @cfg menu
     * An array of menu items to be rendered into the component
     */
    menu: [],

    initComponent: function() {
        NS.Menu1.superclass.initComponent.call(this);

        //We create our own customized event, so users can hook events onto it
        this.addEvents({

            /**
             * @event menuclick
             * Fires when the menu is clicked
             * @param {NS.Menu1} cp this component
             * @param {Menu} m The menu item
             * @param {Ext.Element} a The anchor element
             * ... or whatever you want to pass
             */
             menuclick: true
         });

        //We hook an afterrender event here, so we could know
        //when will be our el be rendered.
        this.on('afterrender', this.onAfterRender, this);
    },

    onAfterRender: function() {

        var me = this;

        //Let's do all the fancy stuff here:
        Ext.each(me.menu, function(m) {

            //el property is always there as long as you subclass
            //Ext.Component. It's the outermost div of the component.
            //We create multiple single anchors here (of course ul/li/a is better)
            var a = me.el.createChild({
                tag: 'a', //so we can have :hover supports from crappy IE
                html: m.text, //or anything you like
                cls: 'item' //and the class to style it

            //then we hook 'click' even to this anchor
            }).on('click', function() {

                //Then do whatever you like here
                Ext.get('output1').update(m.text);

                //Or even firing your own customized events, whatever you like
                me.fireEvent('menuclick', me, m, a);

                //or whatsoever...
            });
        });
    }
});

//Finally, testing it out!
new NS.Menu1({
    renderTo: 'menu1',
    menu: [{
        text: 'This is the first menu'
    },{
        text: 'This is the 2nd menu'
    },{
        text: 'This is the last menu'
    }]
}).on('menuclick', function(cp, m) {
    Ext.get('output2').update(m.text);
});

然后，这是vbox方式。请注意我如何在单个循环中创建它们： 转到示例

/**
 * This is the column bars with clickable areas
 */
Ext.ns('NS');

NS.Menu2 = Ext.extend(Ext.Panel, {

    /**
     * @cfg menu
     * An array of menu items to be rendered into the component
     */
    menu: [],

    border: false,

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    initComponent: function() {

        var me = this;

        //Same thing, you can do event hook here:
        me.addEvents('menuclick');

        me.items = [];

        //Create all the boxes as you like
        Ext.each(me.menu, function(m) {
            me.items.push({
                html: m.text,
                bodyCssClass: 'item',
                bodyStyle: 'padding-bottom: 0px;margin-bottom: 0px;',
                listeners: {
                    afterrender: function(p) {
                        //As you can see, we hook the afterrender event so
                        //when your panels (each individual panels) are created,
                        //we hook the click event of the panel's root el.
                        p.el.on('click', function() {
                            Ext.get('output1').update(m.text);

                            //Fires event
                            me.fireEvent('menuclick', me, m, p.el);
                        });
                    }
                }
            });
        });

        NS.Menu2.superclass.initComponent.call(this);
    }
});

new NS.Menu2({
    renderTo: 'menu2',
    height: 300,
    menu: [{
        text: 'This is the first menu'
    },{
        text: 'This is the 2nd menu'
    },{
        text: 'This is the last menu'
    }]
}).on('menuclick', function(cp, m) {
    Ext.get('output2').update(m.text);
});

它们看起来都很相似，只是 vbox 方式有点矫枉过正，因为它比使用纯 dom 处理的东西多一点。检查两个生成的 dom 节点以查看差异。

这是示例 1 中生成的 dom 节点：

<div id="ext-comp-1001">
    <a class="item" id="ext-gen3">This is the first menu</a>
    <a class="item" id="ext-gen4">This is the 2nd menu</a>
    <a class="item" id="ext-gen5">This is the last menu</a>
</div>

这是示例 2 中的：

<div id="ext-comp-1001" class=" x-panel x-panel-noborder">
    <div class="x-panel-bwrap" id="ext-gen3">
        <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-box-layout-ct" id="ext-gen4" style="height: 300px; ">
            <div class="x-box-inner" id="ext-gen6" style="width: 836px; height: 300px; ">
                <div id="ext-comp-1002" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 0px; ">
                    <div class="x-panel-bwrap" id="ext-gen7"><div class="x-panel-body item x-panel-body-noheader" id="ext-gen8" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the first menu</div>
                </div>
            </div>
            <div id="ext-comp-1003" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 31px; ">
                <div class="x-panel-bwrap" id="ext-gen10">
                    <div class="x-panel-body item x-panel-body-noheader" id="ext-gen11" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the 2nd menu</div>
                </div>
            </div>
            <div id="ext-comp-1004" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 62px; ">
                <div class="x-panel-bwrap" id="ext-gen13">
                    <div class="x-panel-body item x-panel-body-noheader" id="ext-gen14" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the last menu</div>
                </div>
            </div>
        </div>
    </div>
</div>

明白我的意思了吗？