ExtJS Sequence Layout

1
votes

To start, let me say that I am quite new to ExtJS and so there may be a really simple answer to this that I'm missing.

I want to put two items in a container in with essentially no layout, just displaying items sequentially. For example, if I have something like this:

{
    xtype: 'container',
    width: 30,
    items: [{
            xtype: 'component',
            html: 'This should look '
        },
        {
            xtype: 'component',
            html: 'like a single sentence.
        }]
}

Then I want something like this produced:

This should look like a single sentence.

Every layout I've found seems to treat distinct items like they should be separate columns in a table, or something more complicated. What is the correct way to go about this? If I'm not providing enough information please let me know and I'll update the question.

Thanks!

3
javascriptextjs
Sorry, just curious, have you found what you were looking for? - Yellen
@Yellen Yes, there were a lot of good answers but basically I misunderstood the way that these items are rendered. - Jake
If you are interested - Check this if you've not already done so docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/… - Yellen

3 Answers

1
votes

Try this: 

Ext.create('Ext.container.Container',{
    renderTo: document.body,
    layout : 'column',
        items: [{
        xtype: 'component',
        html: 'This should look '
    },{
        xtype: 'component',
        html: 'like a single sentence.'
    }]
});
1
votes

You could do something like this: https://fiddle.sencha.com/#fiddle/npa

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.widget({
            renderTo: document.body,
            xtype: 'container',
            width: 300,
            items: [{
                xtype: 'component',
                autoEl: 'span',
                html: 'This should look '
            }, {
                xtype: 'component',
                autoEl: 'span',
                html: 'like a single sentence.'
            }]
        });
    }
});

Each component wraps its own DOM structure, so in your initial example each component is a div. Remember that creating components means overhead, so if you're going to be creating a lot of these, you might be better off using templates.

1
votes

Improving on Evan's answer, you can do something like this -

Ext.widget({
            renderTo: document.body,
            xtype: 'container',
            width: 300,
            items: [{
                xtype: 'component',
                autoEl: 'p', // use paragraph instead of span
                html: 'This should look '
            }, {
                xtype: 'component',
                autoEl: 'p',
                html: 'like a single sentence.'
            }]
        });

Setting autoEl: 'p' will render the components inside paragraph tags and within the same div. enter image description here Here's a fiddle