Extjs 3.4 应用切换器答案

【问题标题】：Extjs 3.4 App switcherExtjs 3.4 应用切换器
【发布时间】：2015-04-21 12:56:27
【问题描述】：

我正在为我工作的公司制作一个应用切换器，但它必须在 extJS 中，但我在这个主题上没有任何经验，所以我设法创建了以下内容：

这是我窗口中的以下代码：

this.items = [new Ext.Panel({
    xtype: 'container',
    anchor: '0',
    layout: 'column',
    defaultType: 'container',
    defaults: {
        layout: 'form',
        defaultType: 'textfield',
        defaults: {
            anchor: '0'
        }
    },
    items: [{
        columnWidth: .5,
        items: [{
            fieldLabel: 'Field 1'
        }, {
            fieldLabel: 'Field 3'
        }]
    }, {
        columnWidth: .5,
        items: [{
            fieldLabel: 'Field 2'
        }]
    }]
})];

但我不觉得这是正确的，

输入字段不需要，没有间距，我正在考虑这样的布局

+----------------------------------+
|Applications                      +
+----------------------------------+    
|     Logo1             Logo2      | 
| written-name       written-name  | 
|                                  | 
|     Logo3             Logo4      | 
| written-name       written-name  | 
|                                  | 
+----------------------------------+

所有徽标和书面名称都应该是可点击的，并打开一个新选项卡到一个新链接，那么我应该在我的容器中放入哪些项目？

【问题讨论】：

标签： extjs extjs3

【解决方案1】：

您可以在 Ext 组件中使用自定义 HTML。 DataView 是专门为此而设计的，但它们必须与商店耦合...如果您只有几件商品，您可以简单地将自定义 HTML 放入一些组件中，其他组件如 BoxComponent，最简单的他们，使用html 或tpl 配置。

这是一个示例 (fiddle)：

var ct = new Ext.Panel({
    width: 600,
    height: 300,
    title: "Example",
    cls: 'logo-panel',
    defaults: {
        cls: 'item'
    },
    items: [{
        xtype: 'box',
        // custom cls (for styling & delegate) -- set in defaults, above
        //cls: 'item',
        html: '<img src="http://lorempixel.com/90/90/" width="90" height="90"><h1>Foo</h1>',
        customProp: "Foo" // for later identification of item
    },{
        xtype: 'box',
        //cls: 'item',
        html: '<img src="http://lorempixel.com/90/90/?2" width="90" height="90"><h1>Bar</h1>',
        customProp: "Bar"
    },{
        xtype: 'box',
        customProp: "Baz",
        // using tpl & data instead of html
        tpl: '<img src="{src}" width="90" height="90"><h1>{name}</h1>',
        data: {
            src: 'http://lorempixel.com/90/90/?3',
            name: 'Baz'
        }
    }]
});

ct.on({
    afterrender: function() {
        this.el.on({
            delegate: '.item',
            click: function(e, itemEl) {
                var item = Ext.getCmp(itemEl.id);
                output.update("Clicked on " + item.customProp)
            }
        });
    }
});

ct.render(Ext.getBody());

// a debug output
var output = Ext.create({
    xtype: 'box',
    renderTo: Ext.getBody(),
    // you can put custom style directly in js too
    style: "margin: 10px;"
});

使用一些自定义 CSS：

.logo-panel .item {
    float: left;
    margin: 10px;
    cursor: pointer;
}
.logo-panel .item h1 {
    font-family: arial, sans;
    text-align: center;
}

然后，您可以将自定义组件包装在易于重用的 custom class 中（特别是如果您为其提供 xtype 以用于惰性实例创建）。

您还可以使用其他基本组件，例如 Button，这可以更轻松地处理点击...您应该浏览示例以了解您可以做什么以及如何做。

【讨论】：