ExtJS 页面单文件

更新记录
2024年1月31日 初始化。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

页面单文件写法

ExtJS用官方脚手架(SenchaCMD)生成页面，在默认情况下会生成三个文件(View、ViewController、ViewModel)。

有些时候为了方便可以直接像VueJS一样只定义一个文件，可以在内部再定义对应的ViewController、ViewModel。具体代码如下：

/**
 * 页面单文件实例
 */
Ext.define('Panda.test.Main', {
    extend: 'Ext.panel.Panel',
    requires: [
        'Ext.window.MessageBox',
    ],

    layout: 'vbox',

    bind:{
        title:"{title}"
    },

    //在这里定义方法和无需绑定的数据
    controller: {
        //数据
        panda:666,
        //方法
        onClick: function (choice) {
            Ext.Msg.alert("abc","abc");
        }
    },

    //绑定使用的数据
    viewModel: {
        //数据
        data: {
            title: 'Panda',
        },
        //公式
        formulas: {

        }
    },

    //子组件
    items: [
        {
            xtype: 'button',
            text: '按钮1',
            width: 88,
            height:33,
            handler: 'onClick'
        },
        {
            xtype: 'button',
            text: '按钮2',
            width: 88,
            height:33,
            handler: 'onClick'
        },
    ]
});

如果需要把 View 和 Controller/ViewModel 分成2个文件，也可以在ViewController中定义ViewModel。太灵活了，根据自己的项目配置就行了。