PDA

View Full Version : Show panel in viewport after press button



ubeddu
30 Oct 2009, 3:04 AM
Hello guys, after reading several posts I ask you a favor. I put a panel in a region of a viewport after I press a button in the toolbar region of the north. How can I do? thanks

this is my code :

<html>
<head>
<title >PRGIS WebTree Attributi</title>
<link rel="stylesheet" type="text/css" href="ext-3/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.QuickTips.init();
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'What are you doing?<br/>The passwords entered do not match!'
});
var signupForm = { xtype: 'form',
id: 'register-form',
labelWidth: 125,
bodyStyle: 'padding:15px;background:transparent',
border: false,
url: 'save-form.php',
items: [
{ xtype: 'box',
autoEl: { tag: 'div',
html: '<div class="app-msg"><img src="img/businessmanadd.png" class="app-img" />Register for The Magic Forum</div>'
}
},
{ xtype: 'textfield', id: 'email', fieldLabel: 'Email',
allowBlank: false, minLength: 3,
maxLength: 64,anchor:'90%', vtype:'email'
},
{ xtype: 'textfield', id: 'pwd', fieldLabel: 'Password',
inputType: 'password',allowBlank: false, minLength: 6,
maxLength: 32,anchor:'90%',
minLengthText: 'Password must be at least 6 characterslong.'
},
{ xtype: 'textfield', id: 'pwd-confirm',
fieldLabel: 'Confirm Password', inputType: 'password',
allowBlank: false, minLength: 6,
maxLength: 32,anchor:'90%',
minLengthText: 'Password must be at least 6 characterslong.',
vtype: 'password', initialPassField: 'pwd'
}
],
buttons: [{
text: 'Register',
handler: function() {
Ext.getCmp('register-form').getForm().submit();
}
},
{
text: 'Cancel',
handler: function() {
win.hide();
}
}]
}


Ext.onReady(function() {
win = new Ext.Window({
layout: 'form',
width: 340,
autoHeight: true,
closeAction: 'hide',
items: [signupForm]
})

toolbar = new Ext.Toolbar({
//renderTo:'form-ct',
items:[{
xtype:'tbbutton',
text:'Bottone Ricerca',
handler: function(){
win.show();
///insert here de code for call the panel and insert it into center region

}
}]
})

var viewport = new Ext.Viewport({
layout: 'border',

renderTo: Ext.getBody(),
items: [{
region: 'north',
split:false,
items:[toolbar],
xtype: 'panel',
height: 29,
//html: 'North'
},{
region: 'west',
split:false,
xtype: 'panel',
split: true,
width: 0,
html: 'West'
},{
region: 'center',
xtype: 'panel',
html: '<div> </div>'
},{
region: 'east',
xtype: 'panel',
split: true,
width: 0,
html: '0'
},{
region: 'south',
xtype: 'panel',
html: 'South'
}]
});





})

</script>


<body>
<div id="form-ct">

</div>
</body>
</html>

ubeddu
30 Oct 2009, 8:57 AM
Hello guys, after reading several posts I ask you a favor. I put a panel in a region of a viewport after I press a button in the toolbar region of the north. How can I do? thanks


Ext.QuickTips.init();
Ext.apply(Ext.form.VTypes, {
password: function (val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'What are you doing?<br/>The passwords entered do not match!'
});
var signupForm = {
xtype: 'form',
id: 'register-form',
labelWidth: 125,
bodyStyle: 'padding:15px;background:transparent',
border: false,
url: 'save-form.php',
items: [{
xtype: 'box',
autoEl: {
tag: 'div',
html: '<div class="app-msg"><img src="img/businessmanadd.png" class="app-img" />Register for The Magic Forum</div>'
}
},
{
xtype: 'textfield',
id: 'email',
fieldLabel: 'Email',
allowBlank: false,
minLength: 3,
maxLength: 64,
anchor: '90%',
vtype: 'email'
},
{
xtype: 'textfield',
id: 'pwd',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false,
minLength: 6,
maxLength: 32,
anchor: '90%',
minLengthText: 'Password must be at least 6 characterslong.'
},
{
xtype: 'textfield',
id: 'pwd-confirm',
fieldLabel: 'Confirm Password',
inputType: 'password',
allowBlank: false,
minLength: 6,
maxLength: 32,
anchor: '90%',
minLengthText: 'Password must be at least 6 characterslong.',
vtype: 'password',
initialPassField: 'pwd'
}],
buttons: [{
text: 'Register',
handler: function () {
Ext.getCmp('register-form').getForm().submit();
}
},
{
text: 'Cancel',
handler: function () {
win.hide();
}
}]
}

Ext.onReady(function () {
win = new Ext.Window({
layout: 'form',
width: 340,
autoHeight: true,
closeAction: 'hide',
items: [signupForm]
})

toolbar = new Ext.Toolbar({
//renderTo:'form-ct',
items: [{
xtype: 'tbbutton',
text: 'Bottone Ricerca',
handler: function () {
win.show();
///insert here de code for call the panel and insert it into center region
}
}]
})

var viewport = new Ext.Viewport({
layout: 'border',

renderTo: Ext.getBody(),
items: [{
region: 'north',
split: false,
items: [toolbar],
xtype: 'panel',
height: 29,
//html: 'North'
},
{
region: 'west',
split: false,
xtype: 'panel',
split: true,
width: 0,
html: 'West'
},
{
region: 'center',
xtype: 'panel',
html: '<div> </div>'
},
{
region: 'east',
xtype: 'panel',
split: true,
width: 0,
html: '0'
},
{
region: 'south',
xtype: 'panel',
html: 'South'
}]
});

})