PDA

View Full Version : hbox and datefiled (disapear datafiled)



Mycoding
12 Feb 2011, 4:57 AM
Please give me advice.
When I use hbox for datefield, datefiled disaper.
Without hbox all works right.
I test it in Chrome and Firefox.

Here is screencast
http://www.screencast.com/users/mycoding/folders/Jing/media/e9546b3c-3f23-4e87-9fb3-1ad6f983950a

here is code


layout:'hbox',
defaults:{
flex:1,
xtype: 'datefield',
width:90,
minValue:min,
maxValue:max
},
items: [{
name : 'startDate',
listeners:{
select : function( datefield, date){
var store = Ext.StoreMgr.get(panel.typeIdStore);
var nowDate = new Date();
store.setBaseParam('startDate', date.format('Y-m-d')+' 00:00:00');
panel.startDate = date.format('Y-m-d')+' 00:00:00';
store.load();
}
}
},{
name : 'endDate',
listeners:{
select : function(datefield, date){
var store = Ext.StoreMgr.get(panel.typeIdStore);
store.setBaseParam('endDate', date.format('Y-m-d 23:59:59'));
panel.endDate = date.format('Y-m-d 23:59:59');
store.load();
}
}
}]
},{

Condor
12 Feb 2011, 8:08 AM
1. Why are you specifying both a width and a flex?
2. Does the hbox container have a fixed width (either specified or from it's container layout)?

Mycoding
12 Feb 2011, 9:42 AM
1 - I use width for size of combobox.
2 - Here is the ful code, but it is very big and difficult to understand


// ???? ????????? ????? ???? ?????????? ?????????? ?????? ?? ??????
Ext.ns("Vreshenie.form");

Vreshenie.form.PanelParamToShowStatisticOrder = Ext.extend(Ext.Panel, {
typeIndex:0,
typeIdStore:'idStoreStatisticOrder',
startDate:new Date('01 Jan 1970').format('Y-m-d')+' 00:00:00',
endDate:new Date().format('Y-m-d 23:59:59'),
partner:'',
city:'',
setStoreParam:function(){
var store = Ext.StoreMgr.get(this.typeIdStore);
store.setBaseParam('partnerId', this.partner);
store.setBaseParam('start', 0);
store.setBaseParam('limit', 100000);
store.setBaseParam('startDate', this.startDate);
store.setBaseParam('endDate', this.endDate);
store.setBaseParam('city', this.city);
},
constructor : function(config) {
config = config || {};
var panel=this;
var min = new Date('01 Jan 2009');
var max = new Date();
var columnOne = {
columnWidth:0.55,
items:[{
fieldLabel: '??????????? ????????',
layout:'hbox',
//layout:'column',
defaults:{
flex:1,
xtype: 'datefield',
width:90,
//listWidth
minValue:min,
maxValue:max
//columnWidth:0.5
},
items: [{
name : 'startDate',
listeners:{
select : function( datefield, date){
var store = Ext.StoreMgr.get(panel.typeIdStore);
var nowDate = new Date();
store.setBaseParam('startDate', date.format('Y-m-d')+' 00:00:00');
panel.startDate = date.format('Y-m-d')+' 00:00:00';
store.load();
}
}
},{
name : 'endDate',
listeners:{
select : function(datefield, date){
var store = Ext.StoreMgr.get(panel.typeIdStore);
store.setBaseParam('endDate', date.format('Y-m-d 23:59:59'));
panel.endDate = date.format('Y-m-d 23:59:59');
store.load();
}
}
}]
},{
fieldLabel: '??? ??????',
xtype :'combo',
mode :'local',
width:180,
value :'?? ????',
triggerAction: 'all',
forceSelection: true,
store:['?? ????','?????','????-????? ?????','??????? ?? ?????????','??????? ?? ??????????????'],
listeners:{
select : function(combo, record, index){
if(index>1){
Ext.Msg.show({
title:'?? ??????',
msg:'?????? ??? ?????? ???? ?? ?????.<br>'+'index='+index
});
return;
}
switch (index){//???? ?????????, ??? ?? ?????? ????????
case 0:
panel.typeIndex=0;
panel.typeIdStore='idStoreStatisticOrder';
break;
case 1:
panel.typeIndex=1;
panel.typeIdStore='idStoreGeneralStatisticOrder';
break;
}
panel.setStoreParam();
var store = Ext.StoreMgr.get(panel.typeIdStore);
store.load();

Ext.getCmp('idCardGeneralStatistic').layout.setActiveItem(index);
//console.log(record.data.field1);
}
}
}]
};

var columnTwo ={
columnWidth:0.45,
//width:100,
//bodyStyle:'padding-left:-15px;',
defaults:{
xtype :'combo',
mode :'local',
width : 130,
value :'????? ',
emptyText:'????? ',
triggerAction:'all',
forceSelection: true
},
items:[{
fieldLabel : '???????',
displayField:'login',
store: new Ext.data.JsonStore({
url: 'request/user-action/user-info/get-all-web-master-info.php',
method:'POST',
autoLoad: true,
root: 'rows',
fields:['id', 'login','name','surname', 'patronymic']
}),
listeners:{
select : function(combo, record, index){
if(record.id!=-1){
panel.partner=record.id;
var store = Ext.StoreMgr.get(panel.typeIdStore);
store.setBaseParam('partnerId', panel.partner);
}
else{
panel.partner='';
var store = Ext.StoreMgr.get(panel.typeIdStore);
store.setBaseParam('partnerId', '');
}
store.load();
}
}
},{
fieldLabel : '??????',
displayField:'city',
store: new Ext.data.JsonStore({
url: 'request/user-action/order/get-all-region-info.php',
method:'POST',
autoLoad: true,
root: 'rows',
fields:['id', 'city']
}),
listeners:{
select : function(combo, record, index){
var store = Ext.StoreMgr.get(panel.typeIdStore);
if(index==0){
panel.city='all';
store.setBaseParam('city', panel.city);
}
if(index>2){
panel.city=record.data.city;
store.setBaseParam('city', panel.city);
}
else{
panel.city='';
store.setBaseParam('city', '');
}
store.load();
}
}
}]
};

Ext.applyIf(config, {
frame:true,
//height:50,
labelWidth: 85,
items:[{
xtype: 'fieldset',
height:100,
width:530,
layout:'column',
title: '????????? ??? ???????????? ??????????',
defaults:{
layout:'form'//,
//columnWidth:0.5
//flex:1
},
items:[
columnOne,
columnTwo
]
}]
});
Vreshenie.form.PanelParamToShowStatisticOrder.superclass.constructor.call(this, config);
}
});

Ext.reg('panelparamstatisticorder', Vreshenie.form.PanelParamToShowStatisticOrder);



3 - Also I want to fix form that is was so 65% one param and 35 other param.
But it works so:
In second form it is cutting and labelWidth doesn't work.
I tryed also so:labelStyle:'width:50' but label is still much more than it is needed.