extjs xtype按钮样式变量

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了extjs xtype按钮样式变量相关的知识,希望对你有一定的参考价值。

我想把变量(btnWidth / bthHeight)放到按钮的宽度(高度):

Ext.define(
  'TestPanel', {
    extend: 'Ext.Panel',
    width: 300,
    height: 35,
    btnHeight: 25,
    btnWidth: 25,
    items: [{
      xtype: 'button',
      width: btnWidth,
      height: btnHeight,
    }, {
      xtype: 'button',
      width: btnWidth,
      height: btnHeight,
    }  
  }

这是错误消息:

Uncaught TypeError: Cannot read property 'btnWidth' of undefined

我该如何解决?

答案

为此,你需要使用initComponent方法为panel。在panel中,您将定义自定义配置,您可以进入initComponent方法。

在这个FIDDLE中,我使用panelbuttoninitComponent方法创建了一个演示。我希望这能帮助您或指导您实现您的要求。

代码片段

Ext.define('TestPanel', {
    extend: 'Ext.panel.Panel',
    bodyPadding: 5,
    width: 300,
    btnHeight: 38,
    btnWidth: 50,
    title: 'Buttons example',
    initComponent: function (config) {
        var me = this,
            btnWidth = me.btnWidth,
            btnHeight = me.btnHeight;

        me.items = [{
            xtype: 'button',
            text: 'Button 1',
            width: btnWidth,
            height: btnHeight,
            margin: 10
        }, {
            xtype: 'button',
            text: 'Button 1',
            width: btnWidth,
            height: btnHeight
        }];
        me.callParent(arguments);
    },
    renderTo: Ext.getBody()
});

//Create component
Ext.create('TestPanel');

以上是关于extjs xtype按钮样式变量的主要内容,如果未能解决你的问题,请参考以下文章

ExtJS 3.4 - 有 xtype: 'displayfield' 显示更新的值吗?

ExtJS中xtype 概览

右对齐面板 ExtJS 5 内的按钮

SetValue为Extjs形式的变量

Extjs在panel的标题栏上加按钮的方法

如何在 ExtJS 面板中设置列表样式?