Extjs 3.4 应用切换器

Posted 2023-02-26

【中文标题】Extjs 3.4 应用切换器

【英文标题】：Extjs 3.4 App switcher

【发布时间】：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  | 
|                                  | 
+----------------------------------+    

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

【参考方案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/"  ><h1>Foo</h1>',
        customProp: "Foo" // for later identification of item
    ,
        xtype: 'box',
        //cls: 'item',
        html: '<img src="http://lorempixel.com/90/90/?2"  ><h1>Bar</h1>',
        customProp: "Bar"
    ,
        xtype: 'box',
        customProp: "Baz",
        // using tpl & data instead of html
        tpl: '<img src="src"  ><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，这可以更轻松地处理点击...您应该浏览示例以了解您可以做什么以及如何做。