我在使用自定义布局 ux.center 时遇到问题。我是否做错了 Ext.Loader 或 Ext.require 操作? Center.js 文件位于/var/www/application/ux/layout/Center.js 下,此文件 (app.js) 位于/var/www/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!'
}]
}]}]
});
}});
感谢您提供有关使此布局正常工作的任何提示
最佳答案
您应该在 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!'
}]
}]}]
});
}});
您还可以阅读以下 Material http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Application
您还可以为视口(viewport)创建自己的类并将其放在[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 脚本并将其用作视口(viewport)
Ext.application({
name: 'AM',
appFolder: **insert you app folder path here**, // in you case it will be 'application'
controllers: ['Users'],
autoCreateViewport: true
});
关于javascript - Extjs 4 : use ux. 中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12291006/