ExtJS中viewController、viewModel、View、Model的关联展示

本文探讨了为什么在软件开发领域,尽管大多数程序员具备扎实的技术基础,但仅有少数能够晋升为架构师的角色。通过分析技能、思维方式、经验和团队合作等关键因素,揭示了成为架构师所需跨越的界限。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id','name'],
    proxy: {
        type: 'ajax',
        api: {
            read: 'read.json',
            update: 'update.json'
        }
    }
});
Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myvc',
    onUserLoad: function(btn, e, eOpts) {
        this.getViewModel().linkTo('user', {
            type: 'User',
            id: 0
        })
    },
    onUserSave: function(btn, e, eOpts) {
        this.getViewModel().get('user').save({
            callback: function(record) {
                console.log( record )
            }
        })
    }
})
Ext.define('MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myvm',
    
});
Ext.define('MyForm', {
    extend: 'Ext.form.Panel',
    bodyPadding: 10,
    title: 'My Form',
    controller: 'myvc',
    viewModel: {
        type: 'myvm'
    },
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        bind: '{user.name}'
    }],
    tbar: [{
        text: 'Load a User',
        handler: 'onUserLoad'
    }],
    bbar: [{
        text: 'Save',
        handler: 'onUserSave'
    }]
})
Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('MyForm', {
            renderTo: document.body,
            width: 400
        })
    }
});



转载于:https://my.oschina.net/buwei/blog/611314

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值