ExtJs学习一 Ext.define 与 Ext.create 方法总结

        /**  
        *@summary Ext.define 与 Ext.create方法的学习
        */
        Ext.define('TestDefine', {
            extend:'Ext.window.Window',
            alias: 'haha',
            width: 400,
            height: 300,
            title:'define test4',
        });
        var xx1 = Ext.create({    //实例化方法一 :单个对象与xclass属性
            //xclass:'TestDefine',  //xclass 的命名属性可以有三种 1.define中的类名;2.define中alias的别名;3.Extjs 完整的类名
            //xclass:'haha',
            xclass:'Ext.window.Window',
            width:800,
        });
        var xx2 = Ext.create('TestDefine', {  //实例化方法二 : 使用define的类名
            width:800,
        });
        var xx3 = Ext.create('haha', {     //实例化方法三 : 使用 define 中的别名 alias 的名字
            width:800,
        });
        var xx4 = Ext.create('Ext.window.Window', {   //实例化方法四 : 使用 完整的 Extjs 类名
            width: 800,
            title: 'define test4',
            height:600
        });
        //xx1.show();
        //xx2.show();
        //xx3.show();
        //xx4.show();

以上所介绍的Ext.define继承自Ext.js 原有的类 Ext.window.Window,如果是自定义的类呢,其实也是一样的用法,如下:

        /** 
        *@summary Ext.define 自定义类的使用
        */
        Ext.define('SelfTest1', {   //自定义 类 SelfTest1
            email:'123@qq.com',
            title: 'my test',
            name: 'zhangsan',
            age: 26,
        });
        Ext.define('SelfTest2', {  //
            extend:'SelfTest1',  //继承自SelfTest1           
            tel: '12345678911',  //类SelfTest2自己的属性
        });
        var oTest = Ext.create('SelfTest2');
        Ext.Msg.alert(oTest.title,oTest.email);


  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个简单的ExtJS 6模糊查询的例子: 1. 创建一个包含一个文本框和一个按钮的视图: Ext.define('MyApp.view.Main', { extend: 'Ext.panel.Panel', xtype: 'main', title: 'My Application', width: 400, bodyPadding: 10, items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'name', allowBlank: false }, { xtype: 'button', text: 'Search', handler: 'onSearchClick' }] }); 2. 创建一个控制器,在按钮点击时执行模糊查询: Ext.define('MyApp.view.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.main', onSearchClick: function() { var name = this.lookupReference('name').getValue(); var store = this.getViewModel().getStore('users'); store.clearFilter(); store.filter('name', name); } }); 3. 创建一个模型和一个存储,用于保存用户数据: Ext.define('MyApp.model.User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] }); Ext.define('MyApp.store.Users', { extend: 'Ext.data.Store', alias: 'store.users', model: 'MyApp.model.User', data: [{ id: 1, name: 'John Smith', email: 'john.smith@example.com' }, { id: 2, name: 'Jane Doe', email: 'jane.doe@example.com' }, { id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com' }] }); 4. 创建一个视图模型,将存储添加到视图模型Ext.define('MyApp.view.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', stores: { users: { type: 'users' } } }); 5. 将视图、控制器和视图模型组合在一起: Ext.application({ name: 'MyApp', launch: function() { Ext.create('MyApp.view.Main', { renderTo: Ext.getBody() }); } }); 这个例子的搜索功能将从“users”存储筛选出名字包含文本框输入的值的用户。这个例子可以轻松地扩展以实现更复杂的模糊查询。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值