PDA

View Full Version : Problem instantiating a second copy of a window



cmathers
24 May 2010, 7:01 AM
Guys,

I'm trying to create an MDI type application for sending SMS's where I can instantiate multiple instances of the same window.

The first instance is created perfectly, however when I attempt to instantiate a second instance - the window is displayed but the controls (textfield and textarea) are duplicated onto the first window but the labels are displayed on the second window. The labels are also doubled up on the second window. I have attached a couple of images that will help you understand my problem.

I'm a little lost to why this is happening and would appreciate some guidance on where I have gone wrong.

Here is a copy of my code:

Ext.onReady(function() {
Ext.QuickTips.init();
// Define a phone number validation
Ext.apply(Ext.form.VTypes, {
phoneMask: /[0-9]/i,
phoneText: 'Phone number must be in the form 0408123123',
phone: function(v) {
if(v.length < 10)
return false;
else
return true;
}
});

var action = new Ext.Action({
text: 'New SMS Window',
handler: function(){
var SMSform = new Ext.form.FormPanel({
id: 'SMSform',
name: 'SMSform',
baseCls: 'x-plain',
labelWidth: 55,
labelAlign: 'top',
url:'../Send_SMS.php' (http://www.extjs.com/forum/'../Send_SMS.php'),
bodyStyle: 'padding:6px',
monitorValid: true,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
id: 'phoneNumber',
fieldLabel: 'Phone Number',
name: 'phoneNumber',
vtype: 'phone',
allowBlank: false,
blankText: 'You must enter a mobile phone number',
minLength: 10,
minLengthText: 'Phone number must be at least 10 digits in length',
anchor:'100%'
},{
xtype: 'textarea',
id: 'SMSMsg',
fieldLabel: 'SMS Message',
name: 'SMSMsg',
anchor: '100% -50'
}],
buttons: [{
text: 'Send',
formBind: true,
handler: function() {
SMSform.getForm().submit({
method:'POST',
waitMsg:'Sending SMS...',
success:function(){
Ext.Msg.alert('Status', 'SMS submitted', function(btn, text) {
SMSform.getForm().reset();
});
},
// Failure function, see comment above re: success and failure.
failure:function(form, action){
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('SMS Send Failed!', obj.errors.reason);
}
else
{
Ext.Msg.alert('Warning!', 'Server is unreachable : ' + action.response.responseText);
}
SMSform.getForm().reset();
}
});
}
},{
text: 'Cancel',
handler: function() {
SMSform.getForm().reset();
win.close();
}
}]
});

var win = new Ext.Window({
collapsible: true,
width: 400,
height: 400,
minWidth: 400,
minHeight: 200,
layout: 'fit',
plain: true,
title: 'New SMS Message',
items: SMSform
});
win.show();
},
iconCls: 'blist'
});

new Ext.Viewport({
layout: 'border',
items:[
{
region:'center',
margins:'5 5 5 0',
cls:'empty'
},
{
region: 'north',
title: 'My SMS',
height: 100,
// Toolbar
tbar: [
action
]
}
]
});
});

Regards

Cam

steffenk
24 May 2010, 2:33 PM
please edit your post and use code boxes, this is unreadable.

cmathers
24 May 2010, 3:19 PM
I hope that this is more readable.



Ext.BLANK_IMAGE_URL = '../EXTJS/ext-3.2.1/resources/images/default/s.gif';
// application main entry point
Ext.onReady(function() {
Ext.QuickTips.init();
// Define a phone number validation
Ext.apply(Ext.form.VTypes, {
phoneMask: /[0-9]/i,
phoneText: 'Phone number must be in the form 0408123123',
phone: function(v) {
if(v.length < 10)
return false;
else
return true;
}
});

var action = new Ext.Action({
text: 'New SMS Window',
handler: function(){
var SMSform = new Ext.form.FormPanel({
id: 'SMSform',
name: 'SMSform',
baseCls: 'x-plain',
labelWidth: 55,
labelAlign: 'top',
url:'../Send_SMS.php' (http://www.extjs.com/forum/'../Send_SMS.php'),
bodyStyle: 'padding:6px',
monitorValid: true,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
id: 'phoneNumber',
fieldLabel: 'Phone Number',
name: 'phoneNumber',
vtype: 'phone',
allowBlank: false,
blankText: 'You must enter a mobile phone number',
minLength: 10,
minLengthText: 'Phone number must be at least 10 digits in length',
anchor:'100%' // anchor width by percentage
},{
xtype: 'textarea',
id: 'SMSMsg',
fieldLabel: 'SMS Message',
name: 'SMSMsg',
anchor: '100% -50' // anchor width by percentage and height by raw adjustment
}],
buttons: [{
text: 'Send',
formBind: true,
handler: function() {
SMSform.getForm().submit({
method:'POST',
waitMsg:'Sending SMS...',
success:function(){
Ext.Msg.alert('Status', 'SMS submitted', function(btn, text) {
SMSform.getForm().reset();
});
},
// Failure function, see comment above re: success and failure.
failure:function(form, action){
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('SMS Send Failed!', obj.errors.reason);
}
else
{
Ext.Msg.alert('Warning!', 'Server is unreachable : ' + action.response.responseText);
}
SMSform.getForm().reset();
}
});
}
},{
text: 'Cancel',
handler: function() {
SMSform.getForm().reset();
win.close();
}
}]
});

var win = new Ext.Window({
collapsible: true,
width: 400,
height: 400,
minWidth: 400,
minHeight: 200,
layout: 'fit',
plain: true,
title: 'New SMS Message',
items: SMSform
});
win.show();
},
iconCls: 'blist'
});

new Ext.Viewport({
layout: 'border',
items:[
{
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background-image:url(./images/desktop.jpg); no-repeat left top; overflow: hidden; height:100%; border:solid 1px #1D6241;text-align:center;font-family:Verdana;font-weight:bold;color:#ED7014;padding-top:5px;'
},
{
region: 'north',
title: 'RapidFire',
height: 100,
// Toolbar
tbar: [
action
]
}
]
});
});

mankz
24 May 2010, 5:31 PM
Don't use hardcoded id's for your fields, remove them and it works fine!


var action = new Ext.Action({
text: 'New SMS Window',
handler: function(){
var SMSform = new Ext.form.FormPanel({
id: 'SMSform',
name: 'SMSform',
baseCls: 'x-plain',
labelWidth: 55,
labelAlign: 'top',
url:'../Send_SMS.php',
bodyStyle: 'padding:6px',
monitorValid: true,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
//id: 'phoneNumber',
fieldLabel: 'Phone Number',
name: 'phoneNumber',
vtype: 'phone',
allowBlank: false,
blankText: 'You must enter a mobile phone number',
minLength: 10,
minLengthText: 'Phone number must be at least 10 digits in length',
anchor:'100%' // anchor width by percentage
},{
xtype: 'textarea',
//id: 'SMSMsg',
fieldLabel: 'SMS Message',
name: 'SMSMsg',
anchor: '100% -50' // anchor width by percentage and height by raw adjustment
}],
buttons: [{
text: 'Send',
formBind: true,
handler: function() {
SMSform.getForm().submit({
method:'POST',
waitMsg:'Sending SMS...',
success:function(){
Ext.Msg.alert('Status', 'SMS submitted', function(btn, text) {
SMSform.getForm().reset();
});
},
// Failure function, see comment above re: success and failure.
failure:function(form, action){
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('SMS Send Failed!', obj.errors.reason);
}
else
{
Ext.Msg.alert('Warning!', 'Server is unreachable : ' + action.response.responseText);
}
SMSform.getForm().reset();
}
});
}
},{
text: 'Cancel',
handler: function() {
SMSform.getForm().reset();
win.close();
}
}]
});

mankz
24 May 2010, 5:32 PM
Remove the hard coded field id's and it works fine! :)

cmathers
24 May 2010, 5:59 PM
Remove the hard coded field id's and it works fine! :)

Thank you, that worked perfectly.