Extjs 3.4 App switcher

Question

I'm making an app switcher for the company I'm working for, but it has to be in extJS but I have no experience on this subject whatsoever, so what I managed to create is the following:

Creation

wich is the follwoing code in my window:

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'
        }]
    }]
})];

but I don't have the feeling this is in anyway correct,

The input fields are unneeded, there is no spacing, I was thinkin on a layout like this

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

all logo's and written names should be clickable and open a new tab to a new link, So What items should i put in my container?

rixo rixo · Accepted Answer · 2015-04-21T14:59:41

You can use custom HTML in Ext components. DataView are especially made for that, but they have to be coupled to a store... If you've got only a couple of items, you can simply put custom HTML in some components, other components like BoxComponent, the simplest of them, using the html or tpl configs.

Here's an example (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;"
});

With some custom CSS:

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

Then, you can wrap your custom component in a custom class easy to reuse (especially if you give it an xtype for lazy instance creation).

You can also use another base component, like Button, which would make it easier to handle clicks... You should browse the examples to get some ideas of what you can do and how.

Extjs 3.4 App switcher

1 Answers