Component

模板autoEl

{
    xtype: 'component',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'component',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'component',
        autoEl: 'li',
        html: 'First list item'
    }
}

renderTpl / renderData / renderSelectors

Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 class="title">{title}</h1>',
        '<p>{desc}</p>'
    ],
    renderData: {
        title: "Error",
        desc: "Something went wrong"
    },
    renderSelectors: {
        titleEl: 'h1.title',
        descEl: 'p'
    },
    listeners: {
        afterrender: function(cmp){
            // After rendering the component 
            // will have a titleEl and descEl properties
            cmp.titleEl.setStyle({color: "red"});
        }
    }
});

// The use of `renderSelectors` is deprecated (for performance reasons). 
// The above code should be refactored into something like this:

Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 class="title" id="{id}-titleEl" data-ref="titleEl">{title}</h1>',
        '<p id="{id}-descEl" data-ref="descEl">{desc}</p>'
    ],
    renderData: {
        title: "Error",
        desc: "Something went wrong"
    },
    childEls: [
        'titleEl',
        'descEl'
    ]
});

dragable

new Ext.Component({
    constrain: true,
    floating: true,
    style: {
        backgroundColor: '#fff',
        border: '1px solid black'
    },
    html: '<h1 style="cursor:move">The title</h1><p>The content</p>',
    draggable: {
        delegate: 'h1'
    }
}).show();

loader

Ext.create('Ext.Component', {
    loader: {
        url: 'content.html',
        autoLoad: true
    },
    renderTo: Ext.getBody()
});

shrinkWrap

• 0 (或者 false): Neither width nor height depend on content.
• 1: Width depends on content (shrink wraps), but height does not.
• 2: Height depends on content (shrink wraps), but width does not.
• 3 (或者 true): Both width and height depend on content (shrink wrap).