87,992
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
chengfengzhai 2013-05-07
- 打赏
- 举报
弱弱的问一下，怎么用？[/quote]
比如
items: [{
...
margin : '10 5 3 10' //该item距离上面的元素10px，距离右面5px，距离下面3px，距离左面10px
}]
该属性适用任何一个component。[/quote]
谢谢您的回复，问题已近解决，非常感谢！
chengfengzhai 2013-05-07
- 打赏
- 举报
非常感谢您的回答，问题已经解决。非常感谢！
chengfengzhai 2013-05-06
- 打赏
- 举报
加单点是这样的：
items:[{
items:[{
items:[{...},{...},{...},{...}]
},{
items:[{...},{...},{...},{...}]
}]
},{
items:[{...},{...}]
}]
如下图：
框出的部分是要右移的
chengfengzhai 2013-05-06
- 打赏
- 举报
var gridForm = Ext.create('Ext.form.Panel', {
items: [{
frame : true,
buttonAlign : 'center',
title : '查询条件',
renderTo : 'search-from',
width : Ext.getBody().getViewSize().width,
autoHeight : true,
bodyBorder : true,
fieldDefaults : {
labelAlign : 'center',
xtype : 'textfield',
labelWidth : 100,
anchor : '95%'
},
defaults : {
border : false,
flex : 1,
layout : 'anchor'
},
layout : 'hbox',
items:[{
items:[{
xtype:'combobox',
displayField: 'areaName',
emptyText:'请选择...',
valueField: 'areaCode',
fieldLabel: '消费方区域名称',
name: 'areaCode',
store:areaCodeStore1,
queryMode: 'local',
typeAhead: true,
id:'areaCode1',
listeners : {
select : function(combo, record, index) {
Ext.getCmp('servManCode').clearValue();
servManCodeStore1.setProxy({
type : 'ajax',
url : './getServManCode?areaCode='+combo.value,
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore1.load();
}
}
},{
xtype:'combobox',
displayField: 'servManName',
emptyText:'请选择...',
valueField: 'servManCode',
fieldLabel: '服务消费方',
name: 'servManCode',
store:servManCodeStore1,
queryMode: 'local',
typeAhead: true,
id:'servManCode'
},
{
xtype:'combobox',
displayField: 'areaName',
emptyText:'请选择...',
valueField: 'areaCode',
fieldLabel: '提供方区域名称',
store:areaCodeStore2,
name: 'areaCode',
queryMode: 'local',
typeAhead: true,
id:'areaCode2',
listeners : {
select : function(combo, record, index) {
Ext.getCmp('receiver').clearValue();
servManCodeStore2.setProxy({
type : 'ajax',
url : './getServManCode?areaCode='+combo.value,
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore2.load();
}
}
},{
xtype:'combobox',
displayField: 'servManName',
emptyText:'请选择...',
valueField: 'servManCode',
fieldLabel: '服务提供方',
name: 'receiver',
store:servManCodeStore2,
queryMode: 'local',
typeAhead: true,
id:'receiver'
}]
},{
items:[{
xtype:'combobox',
fieldLabel: '指标名称',
displayField: 'name',
emptyText:'请选择...',
value:'0',
valueField: 'id',
name: 'code',
id:'flag',
store: {
autoDestroy: true,
model: 'State',
data: Flag
} ,
queryMode: 'local',
typeAhead: true
},{
id:'top',
xtype: 'numberfield',
fieldLabel: '选择排名',
emptyText:'请选择',
name: 'limit',
value: 10,
step:1,
minValue: 1,
maxValue: 30
},{
xtype: 'datefield',
format: 'Y-m-d',
fieldLabel: '开始时间',
afterLabelTextTpl: required,
emptyText:'请输入...',
name: 'beginTime',
value:new Date(new Date().getTime()-1000*60*60*24),
allowBlank: false,
id:'beginTime',
itemId: 'beginTime',
endDateField: 'endTime',
vtype : 'daterange'
},{
xtype: 'datefield',
format: 'Y-m-d',
fieldLabel: '结束时间',
afterLabelTextTpl: required,
emptyText:'请输入...',
name: 'endTime',
id:'endTime',
value:new Date(),
allowBlank: false,
itemId: 'endTime',
startDateField: 'beginTime',
vtype : 'daterange'
}]
}],
buttons: [{
text: '查询',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if(Ext.getCmp('areaCode1').getValue()!=null && Ext.getCmp('servManCode').getValue()==null){
var config = {
title:'提示',
msg:'请选择服务消费方'
}
Ext.Msg.show(config);
}
else if(Ext.getCmp('areaCode2').getValue()!=null && Ext.getCmp('receiver').getValue()==null){
var config = {
title:'提示',
msg:'请选择服务提供方'
}
Ext.Msg.show(config);
}
else if(Ext.getCmp('top').getValue()==null){
store.removeAll();
chartStore.removeAll();
}
else if (form.isValid()) {
store.loadPage(1);
chartStore.loadPage(1);
}
}
}, {
text: '重置',
handler: function() {
this.up('form').getForm().reset();
servManCodeStore1.setProxy({
type : 'ajax',
url : './getServManCode',
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore1.load();
servManCodeStore2.setProxy({
type : 'ajax',
url : './getServManCode',
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore2.load();
}
}]
},
{
layout: {type: 'hbox', align: 'stretch'},
flex: 3,
border: false,
bodyStyle: 'background-color: transparent',
items: [gridPanel, {
flex: 0.4,
layout: {
type: 'vbox',
align:'stretch'
},
margin: '0 0 0 5',
title: '服务实例Top排名柱状图',
collapsible:true, //panel可收缩
collapseDirection:'left',
items:[{
height:430,
layout: 'fit',
margin: '0 0 3 0',
// tbar: [{
// text: '下载图形',
// handler: function() {
// Ext.MessageBox.confirm('Confirm Download', '确定下载图片?', function(choice){
// if(choice == 'yes'){
// barChart.save({
// type: 'image/jpeg'
// });
// }
// });
// }
// }],
items: [barChart]
}]
}],
}],
renderTo: bd
});
葫芦八娃 2013-05-06
- 打赏
- 举报
右移的方法很多，你得把这个panel的代码贴出来，我才能确定到底用什么办法去改布局。
NANU-NANA 2013-05-06
- 打赏
- 举报
弱弱的问一下，怎么用？[/quote]
比如
items: [{
...
margin : '10 5 3 10' //该item距离上面的元素10px，距离右面5px，距离下面3px，距离左面10px
}]
该属性适用任何一个component。
葫芦八娃 2013-05-06
- 打赏
- 举报
哎，你这个组合果断涉及到动态数据了，我还是教你方法吧，其实这跟CSS DIV布局有很相似的地方。
正如楼上那位热心人所述，你可以通过panel的margins这个属性来控制各个panel之间（注意是panel之间）的空隙:
margins:'10 10 10 10' //方向是上 右 下 左,这个你可以看看api的，有详细解释.
还有个方法，固定panel的宽度，这个方法可以通过增加panelA的宽度来向右撑开他侧面panelB在页面中显示的位置。
我看了你的页面，你用涂去了label对吧，其实你还可以使用labelWidth这样一个属性来增加label的宽度，这样同样也能撑开selectBox，从而达到你要的效果。
希望这些方法对你有些帮助。
chengfengzhai 2013-05-06
- 打赏
- 举报
弱弱的问一下，怎么用？
NANU-NANA 2013-05-06
- 打赏
- 举报
可以用 margin
