ExtJS：如何使用别名/xtype 来引用其他组件

Posted 2023-02-25

【中文标题】ExtJS：如何使用别名/xtype 来引用其他组件

【英文标题】：ExtJS: How to use alias/xtype to refer to other components

【发布时间】：2017-08-18 13:32:16

【问题描述】：

我是 ExtJS 的新手，并且在 this fiddle 中有一个简单的应用程序（仍然无法工作），它将数据从商店绑定到网格视图。我的商店看起来像：

Ext.define('ExtApp.store.BookStore',
        extend: 'Ext.data.Store',
        model: 'ExtApp.model.BookModel',
        fields: ['title', 'author', 'price', 'qty'],
        data: [....some data.....]
);

我想在我的视图中调用这家商店，但我不知道该怎么做，我的视图看起来像：

Ext.define('ExtApp.view.BookView',
        extend: 'Ext.grid.Panel',
        alias: 'widget.booklist',
        title: 'Book List',
        store: **WHAT SHOULD I PUT HERE**
);

我在网上找到的一种方法是，我可以创建一个 store 变量并将该变量放入 View 中，例如：

var bookstore = Ext.create('ExtApp.store.BookStore');
bookstore.load();

然后在视图内部：store: bookstore。

但是我想问一下，在这种情况下如何使用 alias 或 xtype 而不是创建这个 store 变量？我尝试在 Store 中输入：alias: 'store.bookstore'，然后在我调用的视图中：store: 'bookstore'，但它没有用。我也尝试过使用：xtype: 'store.bookstore'，然后是store: 'bookstore'，但结果仍然相同，但不起作用。

你能解释一下alias和xtype有什么区别吗，在什么情况下我应该使用alias，在什么情况下我应该使用xtype？谢谢！

【问题讨论】：

查看下方答案如何将商店添加到网格

【参考方案1】：

在您的商店配置中添加 storeId 并在 app.js 中设置 stores:[yourStore]

sencha fiddle

Extjs alias vs xtype

Ext.onReady(function()

    Ext.define('ExtApp.model.BookModel',
        extend: 'Ext.data.Model',
        fields: [
            name: 'title', type: 'string',
            name: 'author', type: 'string',
            name: 'price', type: 'int',
            name: 'qty', type: 'int'
        ]
    );

    Ext.define('ExtApp.store.BookStore',
        extend: 'Ext.data.Store',
        alias: 'store.bookstore',
        storeId :'bookstore',
        model: 'ExtApp.model.BookModel',
        fields: ['title', 'author', 'price', 'qty'],
        data: [
             title: 'JDBC, Servlet and JSP',
             author: 'Santosh Kumar', price: 300, qty : 12000 ,
             title: 'Head First Java',
             author: 'Kathy Sierra', price: 550, qty : 2500 ,
             title: 'Java SCJP Certification',
             author: 'Khalid Mughal', price: 650, qty : 5500 ,
             title: 'Spring and Hinernate',
             author: 'Santosh Kumar', price: 350, qty : 2500 ,
             title: 'Mastering C++',
             author: 'K. R. Venugopal', price: 400, qty : 1200 
        ]
    );


    Ext.define('ExtApp.view.BookView',
        extend: 'Ext.grid.Panel',
        alias: 'widget.booklist',
        title: 'Book List',
        store: 'bookstore',
        initComponent: function()
            this.tbar = [
                text: 'Add Book',
                action: 'add',
                iconCls: 'book-add'
            ];

            this.columns = [
                
                    header: 'Title',
                    dataIndex: 'title',
                    flex: 1
                ,
                
                    header: 'Author',
                    dataIndex: 'author'
                ,
                
                    header: 'Price',
                    dataIndex: 'price',
                    width: 60
                ,
                
                    header: 'Quantity',
                    dataIndex: 'qty',
                    width: 80
                
            ];
            this.callParent(arguments);
        
    );



    Ext.application(
        name:'ExtApp',
        stores: [
        'ExtApp.store.BookStore'
    ],
        launch: function()
            Ext.widget('booklist',
                width: 800,
                height: 300,
                renderTo: Ext.getBody()
            );
        
    );
)

【讨论】：

它有效。非常感谢你。我看到您还在应用程序中添加了以下行：stores: ['ExtApp.store.BookStore']。如果我像您添加的那样定义商店，并且如果我使用“requires”，那么有什么区别？例如需要：['ExtApp.store.BookStore']

@Sonn 基本上requires 用于在加载该组件之前添加其他视图，stores 用于加载存储。

@Sonn 如果您将商店添加到您的 app.js 的 stores 配置中，则会创建一个实例。如果将其添加到要求中，则将加载该文件。这就是区别。对于您使用一次的商店，您分配一个 storeId 并将它们添加到 app.js，如果您重复使用它们（多个实例），您需要使用。

感谢大家的帮助！ :)