PDA

View Full Version : Form CSS stuff / validation + other CSS quirks.



TotoTitus
7 Sep 2010, 7:28 AM
I have this form, situated in a window:



var regWindow = new Ext.Window({
title: 'Register',
modal: true,
draggable: false,
resizable: false,
width: 285,
items:[{
xtype: 'form',
frame: true,
buttonAlign: 'left',
bodyStyle: 'padding: 5px 5px 0 5px',
items: [{
xtype: 'container',
style: 'padding: 1px 0 10px 0;',
layout: 'table',
items: [{
xtype: 'label',
html: "<img src='images/donutsmall.png'/>"
},{
xtype: 'tbtext',
text: 'Registration',
style: 'font-weight: 900; font-size: 85%; padding: 1px 0 0 8px;'
}]
},{
xtype: 'textfield',
fieldLabel: 'User name',
name: 'user',
autoWidth: true,
allowBlank: false,
minLength: 6,
maxLength: 20,
blankText: 'Enter your user name.',
minLengthText: 'User name must be at least 6 characters long',
maxLengthText: 'User name must be at most 20 characters long',
validationEvent: false
},{
xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
minLength: 6,
maxLength: 20,
blankText: 'Enter your password.',
minLengthText: 'Password must be at least 6 characters long',
maxLengthText: 'Password must be at most 20 characters long',
//validationEvent: true
},{
xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Confirm password',
name: 'passwordConfirm',
allowBlank: false,
minLength: 6,
maxLength: 20,
blankText: 'Please confirm your password.',
minLengthText: 'Password must be at least 6 characters long',
maxLengthText: 'Password must be at most 20 characters long',
//validationEvent: false
},{
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
allowBlank: false,
minLength: 6,
maxLength: 20,
blankText: 'Please enter your e-mail address.',
regex: emailRegex,
regexText: 'Please enter a valid email address'
}],
fbar: {
items: [{
text: 'Close',
handler: function() {
regWindow.close();
}
},'->',{
text: 'Register'
}]
}
}]
});
//emailRegex is a variable defined in an upper scope:
//var emailRegex = /^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(([0-9]{1,3})|([a-zA-Z]{2,3})|(aero|coop|info|museum|name))$/;


It looks pretty fine, except for a few things:
22257

The space between the field names (name, pass, conf pass, email) and the textfields is too small, and i don't know how to enlarge it.
I have manually set the window width to 285, and i'm not sure it's best practice.
When a field is invalid, i would like that red exclamation sign to flash beside the textfield which is incorect, but again, i don't know how to do that.
Also, that pretty blue-green circle and 'Registration' text are on the left, and i would like to move them to the middle. Tried 'align: center', but it didn't work. They are situated within a container.

Now, i don't want work done for me (i've posted quite a lot of threads here), but there simply are some bottlenecks at which i arrive, and well, you know how it goes.
Any other issues regarding best practice, and deprecated code use or so, is appreciated.

(the '+ other CSS quirks part i'm not posting yet, until i'm solving this, and i don't wanna start another thread. But what i can say for now is that it's related to window positioning :) )
Thanks !

Condor
7 Sep 2010, 9:12 AM
1. Define your field with an itemCls and create a css rule for this class that adds some more bottom margin.
2. Yes, setting a width for the window is indeed recommended (you can set the fields to anchor:'-20' to size them with the window).
3. You could replace the image for the red exclamation mark with an animated gif (Do you really want this? I would find that really annoying).
4. Use a hbox layout with pack:'center' instead of a table layout.

Notes:
Why are you using xtype:'label' and xtype:'tbtext'? I recommend:

[{
xtype: 'box',
autoEl: {tag: 'img', src: 'images/donutsmall.png'
},{
xtype: 'box',
autoEl: {cn: 'Registration'},
cls: 'registration-title'
}]

TotoTitus
7 Sep 2010, 10:21 AM
4. Gave up on the idea, it's cooler to have the donut image and big "registration" text on the left, but applied you suggestion on objects used.
3.What i actually want is this:
22265

It's taken from Saki's ext examples, but i haven't been able to pinpoint the location within the code which generates those pretty exclamation signs. My validation just underlines fields with a curly red line, and displays a bubble with info on hover.
2. Erm. I'm not sure what i want to say. Don't i have to use anchorLayout for that? I'm already using the default formLayout.
1.
22266

itemCls refers to the entire Div, both textfield and label, ermm, or so i understood. I need to widen the gap between them, not adjust the bottom margin.

Condor
7 Sep 2010, 9:29 PM
1. Oh, you were talking about the width, not the height. Just specify a larger labelWidth in the form.
2. FormLayout descends from AnchorLayout, so you can also use 'anchor' for fields.
3. You want to set the msgTarget to 'side'. You can do that for all your fields by setting:

Ext.form.Field.prototype.msgTarget = 'side';
4. What have you tried for the hbox layout?

TotoTitus
11 Sep 2010, 5:04 AM
1. fixed
2. don't need yet
3. works
4. don't matter, i am content with the table layout. Though i don't understand it fully.

CSS quirks incoming:

I have this window class:


Ext.namespace('goodTalk.talkWindow');
goodTalk.TalkWindow = Ext.extend(Ext.Window, {
constructor: function (username) {
var thisWindow = this;
goodTalk.TalkWindow.superclass.constructor.call(this, {
id: 'talk' + username,
title: username,
constrain: true,
closeAction: 'hide',
renderTo: 'chat-area',
height: 350,
width: 500,
style: 'padding: 5px 0 0 5px; font-size: 11px;',
items: [{
xtype: 'displayfield',
style: 'padding: 0 0 2px',
value: 'Talk:'
},{
xtype: 'textarea',
itemId: 'talkBox',
height: 130,
width: 475,
autoScroll: true,
readOnly: true
},{
xtype: 'displayfield',
style: 'padding 0 0 2px',
value: 'Say:'
},{
xtype: 'textarea',
enableKeyEvents: true,
itemId: 'sendBox',
style: 'top: 175px; left: 5px;',
height: 85,
width: 475,
listeners: {
keydown: function(f, e) {
if(e.getKey() == e.ENTER) {
if(this.getValue() !== '') {
SEND_MESSAGE(this.getValue(), username, thisWindow);
this.focus();
}
else {
e.stopEvent();
}
}
}
}
}]
});
},
getTalkText: function() {
return this.items.get('talkBox').getValue();
},
setTalkText: function(text) {
this.items.get('talkBox').setValue(text);
},
getSendText: function() {
return this.items.get('sendBox').getValue();
},
setSendText: function(text) {
this.items.get('sendBox').setValue(text);
}
});
Instances of this class generate arguably ugly looking chat windows. Look:
Original size:
22340
Resized-small size:
22341
Stuff gets chopped off.

I need some way to resize windows in this fashion (idea taken from meebo.com)
22342
22343


Notice the most important thing here: When the window gets shrinked, neither the toolbar, nor the lower chat textarea get resized.
ONLY the upper chat area gets resized.
I can't do that with size: x%.
Any ideas?
(I tried using absolute positioning, but it did not work, maybe i missed something. )

Animal
11 Sep 2010, 6:23 AM
This is vbox layout. Check its docs and the example.

Animal
11 Sep 2010, 6:24 AM
http://dev.sencha.com/deploy/dev/examples/form/vbox-form.html

TotoTitus
11 Sep 2010, 7:19 AM
Works ! thanks !

Edit: Incoming CSS question again.

Is there any way possible to add text to a TextArea, specifying formatting for it? Or at least not formatting, but color, and such. You know. Is there any way?

TotoTitus
13 Sep 2010, 3:00 AM
bump.

Animal
13 Sep 2010, 3:19 AM
Set the colour of text in an element using CSS!

Animal
13 Sep 2010, 3:19 AM
Or do you want an Ext.form.HtmlEditor?

TotoTitus
13 Sep 2010, 3:32 AM
I would need something like this: (sigh, another Meebo screenshot)
22362
Color the messages differently, taking into account who sent it. Of course, different fonts and such would be cool, but for now i just need to get the hang of it.

Animal
13 Sep 2010, 3:39 AM
You mean that top thing?

That looks like a log. That would be a div to which you append divs with different classes.

The bottom thing is an Ext.form.HtmlEditor