How to use generated json to build an extjs window?

Question

I use ExtDesigner designed a window, and the generated json is like:

{
    xtype: 'window',
    height: 477,
    width: 666,
    layout: 'fit',
    title: '添加广告位',
    items: [
        {
            xtype: 'form',
            bodyStyle: 'padding: 10px',
            title: '',
            items: [
                {
                    xtype: 'textfield',    
                    anchor: '100%',
                    fieldLabel: '名称'
                },
                {
                    xtype: 'radiogroup',
                    anchor: '100%',
                    fieldLabel: '广告类型',
                    items: [
                        {
                            xtype: 'radio',
                            boxLabel: '文字'
                        },
                        {
                            xtype: 'radio',
                            boxLabel: '图片'
                        }
                    ]
                }
            ]
        }
    ]
}

I copied it but I don't know how to use it. I don't find a method to convert it to an extjs component. How to do it?

PS: I use extjs 2.2

Answer 1

There are two ways to create an ExtJS component.

1. create the component explicitly, for example: new Ext.Window({...});. This way you get the component right away, meaning the event listeners, the extra methods...etc.

2. the second way is lazy loading, which is by specifying the xtype of a component in a plain javascript object. This is exactly what you have.

To make the second way work, you need to include your xtype-javascript-object in an ExtJs container, and the container will know how to render it at the appropriate time.

for example :

Ext.onReady(function(){
    new Ext.Viewport({
        layout : 'fit',
        items : [{
            xtype: 'window',
            height: 477,
            width: 666,
            layout: 'fit',
            title: '添加广告位',
            items: [...]
        }]
    });
});