Extjs 4：使用 ux.center

Posted 2023-02-22

【中文标题】Extjs 4：使用 ux.center

【英文标题】：Extjs 4: use ux.center

【发布时间】：2012-08-30 17:42:18

【问题描述】：

我在使用自定义布局 ux.center 时遇到问题。我做错了 Ext.Loader 或 Ext.require 吗？ Center.js 文件位于 /var/www/application/ux/layout/Center.js 下，该文件 (app.js) 位于 /var/wwww/application/app.js 下

Ext.Loader.setPath('Ext.ux', '/var/www/application/ux');
Ext.require('Ext.ux.layout.Center');
Ext.application(
    name: 'AM',
    appFolder: 'app',
    controllers: ['Users'],
    launch: function()
            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
            Ext.create('Ext.container.Viewport', 
                    width: 1150,
                    height: 'auto',
                    autoScroll: 'true',
                    layout: 'anchor',
                    items:[xtype: 'userpanel',
                    
                            xtype: 'panel',
                            width: 1150,
                            layout:'ux.center',
                            items:[ 
                                    xtype: 'panel',
                                    width: 1150,
                                    widthRatio: .75,
                                    items: [
                                            xtype: 'userbutton',
                                            action: '',
                                            text: 'Print'
                                    ,
                                    
                                            xtype: 'userbutton',
                                            action: '',
                                            text: 'Download'
                                    ,
                                    
                                            xtype: 'userbutton',
                                            action: 'chart',
                                            text: 'Chart!'
                                    ]
                            ]]
            );
);

感谢您提供有关使此布局正常工作的任何提示

【问题讨论】：

您能说得更具体些吗？ “遇到麻烦”并不能真正告诉我们任何有用的信息。

我很确定它没有被正确收录。当我尝试将其用作布局时，该页面根本不会加载。谢谢！

【参考方案1】：

你应该在 extjs 加载 /var/www/application/ux/layout/Center.js 脚本后运行 Ext.application 方法。为此，只需使用 Ext.onReady 添加回调

Ext.Loader.setPath('Ext.ux', '/var/www/application/ux');
Ext.require('Ext.ux.layout.Center');

Ext.onReady(function () 
    Ext.application( ... );
);

但正确的方法是使用“requires”配置属性

Ext.application(
    requires: ['Ext.ux.layout.Center'],
    name: 'AM',
    appFolder: 'app',        
    controllers: ['Users'],
    launch: function()
            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
            Ext.create('Ext.container.Viewport', 
                    width: 1150,
                    height: 'auto',
                    autoScroll: 'true',
                    layout: 'anchor',
                    items:[xtype: 'userpanel',
                    
                            xtype: 'panel',
                            width: 1150,
                            layout:'ux.center',
                            items:[ 
                                    xtype: 'panel',
                                    width: 1150,
                                    widthRatio: .75,
                                    items: [
                                            xtype: 'userbutton',
                                            action: '',
                                            text: 'Print'
                                    ,
                                    
                                            xtype: 'userbutton',
                                            action: '',
                                            text: 'Download'
                                    ,
                                    
                                            xtype: 'userbutton',
                                            action: 'chart',
                                            text: 'Chart!'
                                    ]
                            ]]
            );
);

您也可以阅读以下材料http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Application

您也可以为视口创建自己的类并将其放在 [appFolder]/view/ 文件夹中

Ext.define('AM.view.Viewport', 
    extend: 'Ext.view.Viewport',

    requires: ['Ext.ux.layout.Center'],

    width: 1150,
    height: 'auto',
    autoScroll: 'true',
    layout: 'anchor',

    initComponent: function () 
        this.items = [
            xtype: 'userpanel'
        , 
            xtype: 'panel',
            width: 1150,
            layout:'ux.center',
            items:[ 
                xtype: 'panel',
                width: 1150,
                widthRatio: .75,
                items: [
                    xtype: 'userbutton',
                    action: '',
                    text: 'Print'
                , 
                    xtype: 'userbutton',
                    action: '',
                    text: 'Download'
                , 
                    xtype: 'userbutton',
                    action: 'chart',
                    text: 'Chart!'
                ]
            ]
        ];
        this.callParent();
    
);

并使用 Ext.app.Application 配置属性 autoCreateViewport。它将加载 [appFolder]/view/Viewport.js 脚本并将其用作视口

Ext.application(
    name: 'AM',
    appFolder: **insert you app folder path here**, // in you case it will be 'application'       
    controllers: ['Users'],
    autoCreateViewport: true
);

【讨论】：

您好，有轨电车，感谢您的建议，我会继续搞砸它。到目前为止，它不喜欢应用程序声明中的 require 语句。我不认为这是 Ext.app.application 的 sencha 文档中的配置属性