[英]Extjs 4: use ux.center
我在使用自定义布局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!'
}]
}]}]
});
}});
感谢您提供有关使此布局正常工作的任何提示
你应该在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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.