关于extjs3：Extjs 3.4 App切换器


Extjs 3.4 App switcher

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

Creation

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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'
        }]
    }]
})];

但是我不觉得这是正确的，

不需要输入字段，没有空格，我在这样的布局上想过

1
2
3
4
5
6
7
8
9
10
+----------------------------------+
|Applications                      +
+----------------------------------+    
|     Logo1             Logo2      |
| written-name       written-name  |
|                                  |
|     Logo3             Logo4      |
| written-name       written-name  |
|                                  |
+----------------------------------+

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

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

这里是一个例子(小提琴)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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">Foo',
        customProp:"Foo" // for later identification of item
    },{
        xtype: 'box',
        //cls: 'item',
        html: '<img src="http://lorempixel.com/90/90/?2" width="90" height="90">Bar',
        customProp:"Bar"
    },{
        xtype: 'box',
        customProp:"Baz",
        // using tpl & data instead of html
        tpl: '<img src="{src}" width="90" height="90">{name}',
        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：

1
2
3
4
5
6
7
8
9
.logo-panel .item {
    float: left;
    margin: 10px;
    cursor: pointer;
}
.logo-panel .item h1 {
    font-family: arial, sans;
    text-align: center;
}

然后，您可以将自定义组件package在易于重用的自定义类中(特别是如果为懒惰实例创建提供了xtype的话)。

您还可以使用另一个基本组件，例如Button，这将使单击操作更容易...您应该浏览示例以了解一些可以做什么以及如何做的想法。