extjs4如何添加步骤条

在Ext JS 4中，添加步骤条（Step Bar 或者 Wizard条）可以使用`Ext.steps.Steps`组件以及其子类`Ext.form.Panel`. 这通常用于创建分步表单或者引导用户完成一系列任务。以下是一个简单的示例：

1. 首先，你需要在HTML模板中引入必要的CSS和JS文件，并包含Ext库：

<script src="path/to/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/ext-theme-neptune-all.css">

2. 创建步骤条容器并配置步骤：

var steps = [
    { title: '步骤一', content: '<p>这是步骤一的内容</p>' },
    { title: '步骤二', content: '<p>这是步骤二的内容</p>' },
    // 添加更多步骤...
];

var stepBar = Ext.create('Ext.steps.Steps', {
    renderTo: 'my-stepbar',
    width: 600,
    height: 300,
    items: steps,
    current: 0, // 初始显示第一个步骤
});

3. 如果你想在每个步骤中嵌套Form Panel或其他UI元素，可以在steps数组中传入一个更复杂的配置：

{
    title: '步骤一',
    content: Ext.create('Ext.container.Container', {
        layout: 'fit', // 使用适合布局填满内容区域
        items: [Ext.create('Ext.form.field.TextField', {/* form fields... */})]
    })
}

4. 当前步骤切换可以通过`change`事件监听器或者直接调用`setActiveStep(index)`方法实现：

stepBar.on('change', function(step) {
    console.log('步骤切换到了', step.title);
});

// 直接切换到第二个步骤
stepBar.setActiveStep(1);