Extjs4.2——bbar的默认类型（xtype）

程序员兴云技术 2022年11月14日

0 收藏 898 点赞 3,622 浏览 878 个字

bbar:在Panel经常使用的工具栏

如下面的示例——这将牵涉本文要追寻的问题：在下面的Panel中的bbar第一个组件明确指定的xtype:’button’，第二个没有明确指出，那么它是何类型，为何能调用button的handler函数？

Ext.create('Ext.panel.Panel', {
                title: 'Example Wizard',
                width: 300,
                height: 200,
                layout: 'card',
                bodyStyle: 'padding:15px',
                defaults: {
                    // 应用到所有子面板
                    border: false
                },
                // 这里仅仅用几个按钮来示例一种可能的导航场景.
                bbar: [//工具栏的默认类型是按钮
                    {
                        id: 'move-prev',
                        text: 'Back',
                        xtype: 'button',
                        handler: function(btn) {//Ext.button.Button-cfg-handler
                            navigate(btn.up("panel"), "prev");
                        },
                        disabled: true
                    },
                    '->', // 一个长间隔, 使两个按钮分布在两边
                    {
                        id: 'move-next',
                        text: 'Next',
                        handler: function(btn) {
                            navigate(btn.up("panel"), "next");
                        }
                    }
                ],
                // 布局下的各子面板
                items: [{
                    id: 'card-0',
                    html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
                },{
                    id: 'card-1',
                    html: '<p>Step 2 of 3</p>'
                },{
                    id: 'card-2',
                    html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
                }],
                renderTo: Ext.getBody()
            });