extjs - 如何在 Ext JS 4 中将按钮置于其容器的中心?
问题描述
我正在使用 Ext JS 4 来构建一个网站,我需要将一个按钮置于其容器的中心,但我似乎无法实现它。
我在互联网上搜索了如何做到这一点,我发现了一些可以使用layout
但在我的情况下不起作用的答案:
const submit = Ext.create('Ext.Button', {
text : 'search',
scale: 'large',
renderTo : Ext.getBody(),
listeners: {
click: function() {
}
},
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
});
我所有的代码:
function init(results, checkInDate, checkOutDate, array) {
if(results!="") {
results = JSON.parse(results);
}
const todaysDate = new Date();
var visitDay = todaysDate.getDate();
var visitMonth = todaysDate.getMonth()+1;
var visitYear = todaysDate.getFullYear();
var leavingDay = todaysDate.getDate();
var leavingMonth = todaysDate.getMonth()+1;
var leavingYear = todaysDate.getFullYear();
var array1 = new Array();
var i2 = 0;
var i3 = 1;
for(var i = 0; i<array.length; i++) {
array1.push({ 'name': array[i], 'price1': results[i2], 'price2': results[i3]})
i2 = i2 + 2;
i3 = i3 + 2;
}
Ext.application({
name: 'MyApp',
launch: function() {
const datePickers = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
items: [{
xtype: 'datefield',
format: 'd/m/Y',
anchor: '100%',
fieldLabel: 'Check In:',
name: 'from_date',
value: checkInDate,
listeners: {
'change': function(me) {
const visitDate = me.getSubmitValue();
visitMonth = '';
visitYear = '';
visitDay = '';
for(var i=0; i<2; i++) {
visitDay = visitDay + visitDate.charAt(i);
}
for(var i=3; i<5; i++) {
visitMonth = visitMonth + visitDate.charAt(i)
}
for(var i=6; i<10; i++) {
visitYear = visitYear + visitDate.charAt(i);
}
}
}
}, {
xtype: 'datefield',
format: 'd/m/Y',
anchor: '100%',
fieldLabel: 'Check Out:',
name: 'to_date',
value: checkOutDate,
listeners: {
'change': function(me) {
const leavingDate = me.getSubmitValue();
leavingMonth = '';
leavingYear = '';
leavingDay = '';
for(var i=0; i<2; i++) {
leavingDay = leavingDay + leavingDate.charAt(i);
}
for(var i=3; i<5; i++) {
leavingMonth = leavingMonth + leavingDate.charAt(i)
}
for(var i=6; i<10; i++) {
leavingYear = leavingYear + leavingDate.charAt(i);
}
}
}
}]
});
//This is the item I want to center:
const submit = Ext.create('Ext.Button', {
text : 'Search',
scale: 'large',
renderTo : Ext.getBody(),
listeners: {
click: function() {
}
}
});
var store = Ext.create('Ext.data.Store', {
storeId:'prices',
fields:['name', 'price1', 'price2'],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
const grid = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('prices'),
columns: [
{ text: 'Name', dataIndex: 'name', width: 200},
{ text: 'Price1', dataIndex: 'price1', width: 135},
{ text: 'Price2', dataIndex: 'price2', width: 135},
],
renderTo: Ext.getBody()
});
store.getProxy().data = array1;
store.load();
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
title: 'Filter',
region: 'west',
collapsible: true,
split: true,
titleCollapse: true,
items: [
{
items: datePickers
},
{
//I want to center this button horizontally:
items: submit
}
],
}, {
title: 'prices',
region: 'center',
collapsible: false,
items: {
items: grid
}
}]
});
}
});
}
所以此刻,按钮出现在这个位置:
但我想在那里:
关于如何实现这一目标的任何想法?
提前致谢!
编辑:代码 pvlt 的答案
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
title: 'Filter',
region: 'west',
collapsible: true,
split: true,
titleCollapse: true,
width: 300,
layout: {
type: 'hbox',
align: 'middle',
pack: 'center',
},
items: [
{
items:datePickers
},
{
items: submit
}
],
}, {
title: 'prices',
region: 'center',
collapsible: false,
items: {
items: grid
}
}]
});
解决方案
这是胡说八道,renderTo: Ext.getBody()
因为...datePickers
submit
这可以更简单地完成,->
它是xtype: 'tbfill'
.
tbar: ['->', submit, '->']
推荐阅读
- magento - 无法获取当前邮政编码
- java - 如何使用 Selenium Webdriver 和 Java 编写定位器以单击 img?
- c# - c# Interop Word Rows.AllowBreakAcrossPages
- sql - 在 SSAS 中创建角色
- visual-studio - Visual Studio 未检测到名为 3P 的环境变量。是因为不可能吗?
- javascript - 做一个链接或
- pip - 脆弱的控制台脚本:pkg_resources.DistributionNotFound
- linux-kernel - 内核模块在构建为模块时未向内核注册,但如果内置它可以工作
- java - 嘿,我尝试编写一些代码,但它总是这样说:错误:(17、26)java:找不到适合字符串的构造函数(java.io.InputStream)
- regex - SQL Server 中的通配符表达式