PDA

View Full Version : need help adding time selector in form using comboboxs



rdesroches
21 Aug 2007, 12:16 PM
Hello,

I am trying to add a time selector in my form by using two comboboxs. I have found that I can put one combobox right next to the other using columns. However, I am having trouble resizing the value of the combo box so that the pulldown arrow isn't lost. I have tried setting all types of widths.

The code is below.

An attachment is included which shows the form I am trying to create, note that the arrow is clipped. I would like the field to be just big enough to enter the right number of characters, but have been unable to figure this out.



var form;

HOURS = [
["0", "0"],
["1", "1"],
["2", "2"],
["3", "3"],
["4", "4"],
["5", "5"],
["6", "6"],
["7", "7"],
["8", "8"],
["9", "9"],
["10", "10"],
["11", "11"],
["12", "12"],
["13", "13"],
["14", "14"],
["15", "15"],
["16", "16"],
["17", "17"],
["18", "18"],
["19", "19"],
["20", "20"],
["21", "21"],
["22", "22"],
["23", "23"]
];
MINUTES = [
["0", "00"], ["1", "01"], ["2", "02"], ["3", "03"], ["4", "04"], ["5", "05"], ["6", "06"], ["7", "07"], ["8", "08"], ["9", "09"],
["10", "10"], ["11", "11"], ["12", "12"], ["13", "13"], ["14", "14"], ["15", "15"], ["16", "16"], ["17", "17"], ["18", "18"], ["19", "19"],
["20", "20"], ["21", "21"], ["22", "22"], ["23", "23"], ["24", "24"], ["25", "25"], ["26", "26"], ["27", "27"], ["28", "28"], ["29", "29"],
["30", "30"], ["31", "31"], ["32", "32"], ["33", "33"], ["34", "34"], ["35", "35"], ["36", "36"], ["37", "37"], ["38", "38"], ["39", "39"],
["40", "40"], ["41", "41"], ["42", "42"], ["43", "43"], ["44", "44"], ["45", "45"], ["46", "46"], ["47", "47"], ["48", "48"], ["49", "49"],
["50", "50"], ["51", "51"], ["52", "52"], ["53", "53"], ["54", "54"], ["55", "55"], ["56", "56"], ["57", "57"], ["58", "58"], ["59", "59"]
];


Ext.onReady( function() {

var hourstore = new Ext.data.SimpleStore({
fields: ['hour', 'hourdisplay'],
data: HOURS
});
var minutestore = new Ext.data.SimpleStore({
fields: ['minute', 'minutedisplay'],
data: MINUTES
});



form = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 140,
width: 700,
url:'emsproperties.do?requestType=EmsProperties&renderxml=true'
});


form.fieldset(
{legend:'Version'},
new Ext.form.TextField({
fieldLabel: 'Version',
name:'emsVersion',
disabled:true,
value: '<%=EmsProperties.emsVersion%> Build <%=EmsProperties.emsBuildNumber%>'
}),
new Ext.form.TextField({
fieldLabel: 'Uptime',
name:'uptime',
disabled:true,
value: '<%=uptimeString%>'
})
);


form.fieldset({legend:'Alarm System Propreties'});

var hourfield = new Ext.form.ComboBox({
resizeable: true,
width: "135",
maxLengthText: 6,
maxLength: 6,
grow: true,
growMax: 6,
fieldLabel: 'DB Archive Run Time',
hiddenName: 'dbarchiveHourToRun',
store: hourstore,
valueField:'hour',
displayField: 'hourdisplay',
mode: 'local',
triggerAction: 'all'});


form.column( {width:300},
hourfield
);

form.column( {labelWidth: 15 },
new Ext.form.ComboBox({
resizeable: true,
width: "135",

maxLength: 6,
grow: true,
hiddenName: 'dbarchiveMinuteToRun',
store: minutestore,
valueField:'minute',
displayField: 'minutedisplay',
mode: 'local'
})
);




form.end();


form.render('form-properties');


}); // EXT.OnReady()

Animal
21 Aug 2007, 11:26 PM
Well, I don't know about the particular problem, but as a user, I would be mightily pissed off to have to click on two combos (one of which - the minutes - is very large) to select a time.

Best to just have one ComboBox with times of a selected granularity in it, say 15 minute intervals.

Then, because forceSelection is false by default, the user can also overtype to adjust the result

Or the user woul just use it as a regular text field, and enter "11:20" and not bother with the dropdown at all.

You'd need to add time validation, but that's easy.

rdesroches
22 Aug 2007, 5:39 AM
Ok, my bad. My width was in quotes. Now that i've changed that it works. Actually, I've added another column, and it looks pretty good now.

Also, for anyone interested, I also found that I could change the width by using
hourfield.el.setWidth(35) AFTER the render. I'm not exactly sure why this is so, but since the el wasn't defined until after the render, i'm assuming that render is actually putting the stuff in the dom and creating the element.