PDA

View Full Version : align form layout in window panel



mayurid
8 Jul 2010, 10:35 PM
file:///C:/DOCUME%7E1/CTK/LOCALS%7E1/Temp/moz-screenshot.pnghi,
thanks in adv


i want to align from panel to center (its coming on top left)in window i have used the example given in tutorial basic form...please help

chrizmaster
8 Jul 2010, 11:17 PM
your screenshot doesn't show up and your description is worst. Have you read your post again after typing? As I can see your last posts, you always post problems like this. So please, try to focus while typing. It would help people like me who's trying to help you...

mayurid
9 Jul 2010, 12:04 AM
your screenshot doesn't show up and your description is worst. Have you read your post again after typing? As I can see your last posts, you always post problems like this. So please, try to focus while typing. It would help people like me who's trying to help you...

i am really very sorry..

i need to align form panel to center, my form panel is is window.

Animal
9 Jul 2010, 12:06 AM
What does that mean?

chrizmaster
9 Jul 2010, 12:20 AM
it's just a guess but maybe you want to use the borderlayout with region:'center'..?

Animal
9 Jul 2010, 12:32 AM
He doesn't mention any other components with which the FormPanel (I'm guessing he means a FormPanel when he says "from panel") must share the Window, so I'm guessing not.

I'm guessing he's confused. But I'm waiting for enlightenment. We can only guess until we are given some information.

chrizmaster
9 Jul 2010, 12:40 AM
lol and i guess you are right. :=)

mayurid
9 Jul 2010, 1:27 AM
var login = new Ext.FormPanel
({
//labelWidth:80,
url:'login.php',
frame:true,
align:'right',
width:300,
height:400,
title:'Please Login',
renderTo: 'content',
// defaultType:'textfield',
monitorValid:true,//disable d submit button

items:[
{xtype:'box',autoEl:{
tag: 'img',
src: 'images/my-image.jpg',
style:{'size':'200'}
}},

{xtype: 'box', id: 'loginMessage',style:{'color':'red','font-weight':'bold','font-size':'15px'}},
{xtype:'label',
text:'Username',
style:{'margin-bottom':'50px'}
},

{xtype:'textfield',
label: 'name',
name: 'e_name',
style:{'margin-top':'10px'},
id:'first',
allowBlank:false
},
{xtype:'label',
text:'Password'},
{xtype:'textfield',
label: 'Password',
allowBlank:false,
name: 'e_code',
id:'e_code'
}],


buttons:[{
text:'Login',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
success:function(form,action){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'test.php';
window.location = redirect;
}});
},
failure: function(form, action){
Ext.getCmp('loginMessage').el.update(action.result.message);
}});}
}]
});
var win = new Ext.Window
({
layout:'fit',
align:'right',
width:300,
height:300,
closable: false, //close true by default
resizable: true,
plain: true,
border: true,
items: [login]
});
win.show();
});






i have formpanel inside window i need to bring it to center

mayurid
9 Jul 2010, 1:29 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel
({
//labelWidth:80,
url:'login.php',
frame:true,
align:'right',
width:300,
height:400,
title:'Please Login',
renderTo: 'content',
// defaultType:'textfield',
monitorValid:true,//disable d submit button

items:[
{xtype:'box',autoEl:{
tag: 'img',
src: 'images/my-image.jpg',
style:{'size':'200'}
}},

{xtype: 'box', id: 'loginMessage',style:{'color':'red','font-weight':'bold','font-size':'15px'}},
{xtype:'label',
text:'Username',
style:{'margin-bottom':'50px'}
},

{xtype:'textfield',
label: 'name',
name: 'e_name',
style:{'margin-top':'10px'},
id:'first',
allowBlank:false
},
{xtype:'label',
text:'Password'},
{xtype:'textfield',
label: 'Password',
allowBlank:false,
name: 'e_code',
id:'e_code'
}],


buttons:[{
text:'Login',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
success:function(form,action){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'test.php';
window.location = redirect;
}});
},
failure: function(form, action){
Ext.getCmp('loginMessage').el.update(action.result.message);
}});}
}]
});
var win = new Ext.Window
({
layout:'fit',
align:'right',
width:300,
height:300,
closable: false, //close true by default
resizable: true,
plain: true,
border: true,
items: [login]
});
win.show();
});
</script>

<table align="center" vspace="50px"class="contenttable" cellpadding="0" cellspacing="0" border="0">

<tr>
<td id="content"></td>
</tr>

</table>
</body>
</html>
i have formpanel inside window need to align it to center

mayurid
9 Jul 2010, 1:34 AM
ya i got layout:center..its working thanku for replying... sorry for the improper posting

Animal
9 Jul 2010, 1:36 AM
You want a smaller FormPanel to be horizontally centered within the Window? Why not just say that?

Then use



layout: {
type: 'hbox',
align: 'center'
}


in your Window config. That way you don't have to use the old, deprecated UX layout.