Question

我有一个容器，其hbox布局可以包含x个组件。我希望组件沿整个水平长度等距离分开。我不能使用flex，因为组件本身需要有固定的宽度。如何才能做到这一点？提前谢谢。

Answer 1

你可以使用间隔器或组件本身，这是处理它的代码：

console.clear();

Ext.application({
    name: 'Fiddle',

    launch: function () {

        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        var container = Ext.create({
            xtype: 'panel',
            width: 500,
            height: 500,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            renderTo: Ext.getBody(),
            fbar: {
                items: {
                    xtype: 'button',
                    text: 'add component',
                    listeners: {
                        click: function (btn) {
                            var newCont = Ext.create({
                                xtype: 'container',
                                width: 10,
                                style: 'background-color:' + getRandomColor() + ';'
                            }),
                            masterContainerContentLenght=container.items.length,
                            getNewSpacer=function(){
                                return Ext.create({
                                    xtype:'component',
                                    flex:1
                                });
                            };

                            if(masterContainerContentLenght===0){
                                container.add(getNewSpacer());
                                container.add(newCont);
                                container.add(getNewSpacer());
                            }else{
                                container.insert(container.lastAddedIndex,newCont);
                                container.insert(container.lastAddedIndex+1,getNewSpacer());
                            }

                            container.lastAddedIndex=container.items.items.indexOf(newCont);
                            console.log(container.lastAddedIndex);


                        }
                    }
                }
            }
        });
        container.show();
    }
});

您可以展示a working fiddle here

如何平均分配动态数量的组件

1 个答案: