0

カスタムレイアウト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!'
                                    }]
                            }]}]
            });
}});

このレイアウトを機能させるためのヒントをありがとうございます

4

1 に答える 1

2

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
});
于 2012-09-06T15:23:45.207 に答える