我尝试使用ExtJs将复合字段添加到我的网页。这是我的代码段。
main_form = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
/*layout : {
type : 'vbox',
align : 'center'
},
defaults : {
labelWidth : 200,
padding : '0 0 0 25'
},*/
items : [ {
xtype : 'compositefield',
labelWidth : 120,
items : [ {
xtype: 'label',
forId: 'myFieldId',
text: 'Delivery Period',
margins: '0 0 0 10'
}, new Ext.form.DateField({
fieldLabel : 'From Date',
allowBlank : false,
width : 140,
name : 'fromDate',
hideLabel : true
}), new Ext.form.DateField({
fieldLabel : 'To Date',
allowBlank : false,
width : 140,
name : 'toDate',
hideLabel : true
}),
{
xtype : 'textfield',
fieldLabel : 'Tour Code',
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Delivery Vehicle',
emptyText : 'Delivery Vehicle',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Tour Assign To',
emptyText : 'Tour Assign To',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant Name',
emptyText : 'Assistant Name',
editable : false,
hideLabel : true,
flex : 1
}, ]
}, {
xtype : 'compositefield',
labelWidth : 120,
items : [ new Ext.form.TimeField({
fieldLabel : 'Day Start Time',
allowBlank : false,
width : 140,
minValue : '9:00 AM',
maxValue : '6:00 PM',
increment : 30,
hideLabel : true
}), new Ext.form.TimeField({
fieldLabel : 'Day End Time',
allowBlank : false,
width : 140,
minValue : '9:00 AM',
maxValue : '6:00 PM',
increment : 30,
hideLabel : true
}),
{
xtype : 'textfield',
fieldLabel : 'Tour Code',
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Delivery Vehicle',
emptyText : 'Delivery Vehicle',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Tour Assign To',
emptyText : 'Tour Assign To',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant Name',
emptyText : 'Assistant Name',
editable : false,
hideLabel : true,
flex : 1
}, ]
}
],
/*buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
win3.hide();
}
} ]*/
});
main_win = new Ext.Window({
title: 'Tour Planning & Editing',
layout: 'fit',
//autoScroll: true,
//y: 120,
width: 480,
height: 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
//modal: true,
plain:true,
//bodyStyle:'padding:8px;',
//buttonAlign:'center',
closeAction: 'hide',
//floating: true,
closable : true,
items: [main_form]
});
main_win.show();
但它不起作用。它甚至没有加载窗口。我是ExtJs 3.0
任何建议都表示赞赏。
非常感谢
答案 0 :(得分：0)
Ext.onReady(function(){
new Ext.Window({
title: 'Tour Planning & Editing',
layout: 'fit',
width: 500,
height: 500,
plain:true,
closeAction: 'hide',
items: [{
xtype : 'form',
layoutConfig : {
align : 'middle', //top : Default, middle, stretch, stretchmax
pack : 'center' //start : Default, center, end
},
defaults : {
width : 400,
height : 400,
border : false,
},
items : [{
xtype : 'compositefield',
width: 100,
height: 100,
labelWidth : 120,
items : [{
xtype: 'label',
forId: 'myFieldId',
text: 'Delivery Period',
margins: '0 0 0 10'
}, {
xtype : 'datefield',
fieldLabel : 'From Date',
allowBlank : false,
width : 140,
name : 'fromDate',
hideLabel : true
}, {
xtype : 'datefield',
fieldLabel : 'To Date',
allowBlank : false,
width : 140,
name : 'toDate',
hideLabel : true
}, {
xtype : 'textfield',
fieldLabel : 'Tour Code',
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Delivery Vehicle',
emptyText : 'Delivery Vehicle',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Tour Assign To',
emptyText : 'Tour Assign To',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant Name',
emptyText : 'Assistant Name',
editable : false,
hideLabel : true,
flex : 1
}]
}, {
xtype : 'compositefield',
labelWidth : 120,
items : [{
xtype : 'timefield',
fieldLabel : 'Day Start Time',
allowBlank : false,
width : 140,
minValue : '9:00 AM',
maxValue : '6:00 PM',
increment : 30,
hideLabel : true
}, {
xtype : 'timefield',
fieldLabel : 'Day End Time',
allowBlank : false,
width : 140,
minValue : '9:00 AM',
maxValue : '6:00 PM',
increment : 30,
hideLabel : true
}, {
xtype : 'textfield',
fieldLabel : 'Tour Code',
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Delivery Vehicle',
emptyText : 'Delivery Vehicle',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Tour Assign To',
emptyText : 'Tour Assign To',
editable : false,
hideLabel : true,
flex : 1
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant Name',
emptyText : 'Assistant Name',
editable : false,
hideLabel : true,
flex : 1
}]
}]
}]
}).show().center();
});