ExtJS拉力赛应用程序选项卡面板每个选项卡的新栅格

// 导入ExtJS库文件和样式表
<script src="extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

// 创建容器元素
<div id="tabpanelContainer"></div>

// 创建选项卡面板和新栅格布局
<script>
    Ext.onReady(function() {
        // 创建选项卡面板
        var tabPanel = Ext.create('Ext.tab.Panel', {
            width: 800,
            height: 600,
            layout: 'fit', // 设置布局方式为适应容器
            renderTo: 'tabpanelContainer', // 渲染到指定容器
            items: [{
                title: 'Tab 1',
                layout: 'column', // 新栅格布局
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    columnWidth: 0.5 // 设置组件宽度占比
                }, {
                    xtype: 'button',
                    text: 'Submit',
                    columnWidth: 0.5
                }]
            }, {
                title: 'Tab 2',
                layout: 'column',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    columnWidth: 0.5
                }, {
                    xtype: 'button',
                    text: 'Reset',
                    columnWidth: 0.5
                }]
            }]
        });

        // 将选项卡面板添加到页面中显示
        Ext.Viewport.add(tabPanel);
    });
</script>