Saki's Ext Examples Page

Saki's Extensions, Plugins and Know-How

Extjs: Simple Image Gallery Using DataView and PHP

I will not explain the CSS code in here you can see on the code I provided below, just playing with float properties, the div element inside the body tag have to be rendered by the Ext Panel that we will create on the next step, div with “left” id for displaying the Ext Panel that have a DataView Component, div with “right-top” id for displaying the Ext FormPanel (to upload the image) and div with “right-bottom” id is for displaying simple image detail when one of the image in DataView clicked.

3 Ways to render HTML inside of a ExtJS container

I thought of three different ways – let’s take a look at them:

Ext.onReady(function(){
 new Ext.Panel({
     renderTo: Ext.getBody(),
        title: '3 Ways to render HTML inside of a ExtJS container',
        items: [{
            html: "<a href='#'>1. HTML property of a panel</a>",
            xtype: "panel"
        }, {
            xtype: "panel",
            html: new Ext.XTemplate("<a href='#'>{value}").apply({
                value: '2. HTML property of a panel generated by an XTemplate'
            })
        }, {
            xtype: 'box',
            autoEl: {
                tag: 'a',
                html: '3. Dom element created by a DomHelper and wrapped as Component',
                href: '#'
            }
        }]
    });
});

It’s easy to think about the first one and you can find it quite often by googling around. Just setting the html property of a panel. The problem I am having with it is that the overhead of a panel is generated and the HTML is just static – I can’t generate similar values at runtime (e.g. a different link label in the example).
So apart from the second example that uses a template, I thought of the third solution that generates a DOM element at runtime using the DomHelper (theautoEl property calls this implicitly) and wraps it in a component. What do you think?

How to get args to constructor at extjs?

var AddOrgWindowUI = Ext.extend(Ext.Window, {
    title: 'form',
    width: 400,
    height: 198,
    layout: 'form',
    padding: 5,

    initComponent: function() {
        this.items = [
            {
                xtype: 'textfield',
                fieldLabel: 'parapapa',
                anchor: '95%',
                value: this.initialValue,
                emptyText: 'perapapa'
            }
        ];
        AddOrgWindowUI.superclass.initComponent.call(this);
    }
});
function test() {
    var AddOrgWindowForm = new AddOrgWindowUI({initialValue:'aaa'});
    AddOrgWindowForm.show();
}

How to Display an Image/Link Inside an Ext JS GridPanel’s Cell

This tutorial will walk through how you can display an image/link inside an Ext GridPanel cell using a renderer function.