Question

我为我正在为之工作的公司制作应用程序切换器，但它必须在extJS中，但我没有任何关于此主题的经验，所以我设法创建如下：

Creation

我窗口中的代码如下：

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  | 
|                                  | 
+----------------------------------+

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

Answer 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，这样可以更轻松地处理点击...您应该浏览示例以了解您可以做什么以及如何做。

Extjs 3.4 App切换器

1 个答案: