I'm going crazy. I've read forum, questions, answers, no way to get callback response!!
My code:
var myFormTest = new Ext.form.FormPanel({
renderTo: 'divAllegati',
width: 500,
title: 'Allegati',
bodyPadding: '10 10 0',
standardSubmit: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'ciao',
value: 'ciao'
},{
xtype: 'filefield',
id: 'form-file',
emptyText: 'Seleziona un file',
fieldLabel: 'Allegato',
name: 'photo-path',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
}],
buttons: [{
text: 'Save',
handler: function(){
if (myFormTest.getForm().isValid()) {
myFormTest.getForm().submit({
url: '/uploadAllegati',
waitMsg: 'Caricamento allegati...',
success: function (form, action) {
Ext.Msg.alert('Success');
},
failure: function (form, action) {
Ext.Msg.alert('Failure');
}
});
}
}
}]
});
No way to get success or failure!!
My server send back this:
ResponseInfo.ResponseNo := 200;
ResponseInfo.ContentType := 'text/html';
ResponseInfo.ContentText := '{success:true}';
But all I have as response, is a blank page with
{success:true}
No message, no alert, no callback....
Please help, really going crazy!
standardSubmit: false,//true, <---------
Solved with standardSubmit: false
Sometimes, easy thing are invisible :D
I tried any way to solve my problem, changed my server in any way, but I didn't find the right answer.
Thanks Vlad!
Related
I have made textboxes in ExtJS through which I will be taking input for an ID and a name. I want to use these values(ID and name) in some other classes. So, I want to save these values somewhere(preferably in a string) so that they can be used later.
Please can someone advise me on how to do that.
function textBoxTab() {
var simple = new Ext.FormPanel({
labelWidth: 75,
frame: true,
title: 'TAB_DIM',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
xtype: 'textfield',
name: 'Module_id',
fieldLabel: 'Module_id',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 'Module_desc',
fieldLabel: 'Module_desc',
allowBlank: false // requires a non-empty value
}],
buttons: [{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
form.submit({
clientValidation: true,
url: 'save.txt',
success: function() {
Ext.Msg.alert('saved');
},
failure: function(form, action) {}
});
if (form.isValid()) {
//Ext.Msg.alert('Submitted Values', form.getValues(true));
this.up('form').getForm().submit();
}
}
}]
});
simple.render(document.body);
}
I have tried this "url:'save.txt" thing but it is not working.
Please help, thanks in advance.
The best way is to store them in a model, and have a controller manage your views and models.
There is several guide on how to architect your ExtJS application using MVC (model-view-controller) :
http://docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture
http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt1
http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt2
http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt3
(The previous links are for ExtJS v4)
I have a tab panel, and I perform a server request in it's initComponent method to add tabs according to the result. This process can take a long time, and I would like to display a progress bar during the begining of initComponent, till the end (before the callParent call method for example).
Is it possible to achieve this behaviour ?
Thanks a lot !
You can use a LoadMask on any pretty much any component, here is an example, there is also a fiddle:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'characters'
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
var myMask = new Ext.LoadMask(grid, {msg:"Please wait..."});
myMask.show();
var timeout = setTimeout(function() {
myMask.hide();
}, 5000);
}
});
I've added a setTimeout to replicate a long loading request, you do not need to use this.
You do not need to rely on "callParent" method. You have two options:
Make your server request synchronously. (by setting async:false for your ext.ajax call or for the related operation) It causes your code to be waited till the response comes.it blocks UI interaction but makes you sure having response immediately in line after server call
Another way is calling this.setLoading(true) before calling ajax call and setting this.setLoading(false) in your ajax/operation callback method. Note that this should refer to your main component. So it is bettor to save it in a variable at initComponent first line. For example by a line like var me= this;. After that refer to current main component bymeinstead ofthis`
var progressBar = Ext.create('Ext.ProgressBar');
progressBar.wait({
interval: 1000,
duration: 10000,
increment: 10,
text: 'Adding tabs...',
scope: this,
fn: function() {
var tabPanel = Ext.create('Ext.tab.Panel');
me.add(tabPanel);
tabPanel.add({
xtype: 'panel',
title: 'Main tab'
});
tabPanel.add({
xtype: 'panel',
title: 'Chunk'
});
tabPanel.add({
xtype: 'panel',
title: 'My girl'
});
progressBar.hide();
}
});
Fiddle
I have a treepanel and i try to get node when i selected like http://jsfiddle.net/kTedM/
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 200,
store: store,
rootVisible: false,
dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get Selected nodes',
handler: function(){
var s = this.up('panel').getSelectionModel().getSelection();
if (s[0])
alert(s[0].data.text + ' was selected');
else alert('no selected');
}
}
}],
renderTo: Ext.getBody()
});
But If u follow below step u will see bug.
step1: run code and click get selected nodes u will get correct alert is no selected
step2: Double click in homework node and click get selected nodes u will see
But i see that node's not selected? How to fix that thanks
Actually, the 'homework' node is and should be selected. There's no reason that double-clicking it should deselect it.
The bug is that the fact that this node is selected is not correctly represented visually. Clearly a bug.
It has been fixed by Sencha in Ext4.2. See this update of your fiddle; I've just changed the version to 4.2.0 and there's nothing surprising going on...
So, to answer your very question, I'd say that in order to fix it, you just have to upgrade to the last version. I advice against the very last 4.2.1 that introduces several new bugs, but rather for the 4.2.0.x.
Now, here's some code, because I am forced by SO to post some in order to be allowed to link to the fiddle:
// Same code as you
Ext.onReady(function () {
var store = Ext.create('Ext.data.TreeStore', {
fields: [
{name: 'id', type: 'string'},
{name: 'text', type: 'string'},
{name: 'selected', type: 'string'}
],
root: {
expanded: true,
id: '0',
children: [{
text: "detention",
id: '1',
leaf: true
}, {
text: "homework",
id: '2',
expanded: true,
children: [{
id: '3',
text: "book report",
leaf: true
}, {
id: '4',
text: "alegrbra",
leaf: true,
selected: 'true'
}]
}, {
id: '5',
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 200,
store: store,
rootVisible: false,
dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get Selected nodes',
handler: function(){
var s = this.up('panel').getSelectionModel().getSelection();
if (s[0])
alert(s[0].data.text + ' was selected');
else alert('no selected');
}
}
}],
renderTo: Ext.getBody()
});
});
I need to submit Ext.form.Panel instance in old way, without any AJAX stuff. I found a few solutions using standardSubmit: true parameter. I use it like this:
Ext.define('MyForm', {
id: 'myform',
extend: 'Ext.form.Panel',
url: '/some/url/'
standardSubmit: true,
...
buttons: {
...
handler: function () {
Ext.getCmp('myform').getForm().submit();
}
}
})
Clicking submit button leads to No URL specified error. I tried passing different params combinations in submit method but all I get is a lot of weird errors. Could someone share a working example please?
Here what the docs for Ext.form.Panel says
If subclassing FormPanel, any configuration options for the BasicForm must be applied to the initialConfig property of the FormPanel
So far, the code listed above, should look like this
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
...
initComponent: function() {
var me = this
Ext.apply(me.initialConfig, {
url: '/some/url',
standardSubmit: true,
method: 'GET'
})
...
me.buttons = {
...
text: 'Submit',
handler: function () {
me.getForm().submit();
}
}
me.callParent()
}
})
Definitely not obvious. But it solves the problem.
It works! I've seeked for it for almost one week! The code of Radagast works! No other codes but ext-407-gpl.
var login_form = Ext.create('Ext.form.Panel', {
frame:true,
title: '<?php echo $this->escape($this->message); ?>',
url: '<?php echo $this->baseUrl ?>/auth/login',
standardSubmit: true,
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'login',
name: 'login_id',
allowBlank:false
},{
fieldLabel: 'password',
name: 'passwd',
inputType: 'password'
}],
buttons: [{
text: 'submit',
type: 'submit',
handler: function() { this.up('form').getForm().submit(); }
}, {
text: 'reset',
type: 'reset',
handler: function() { this.up('form').getForm().reset(); }
}]
});
I created Aspx login page and ext js login form in it
ExtJs code
Ext.onReady(function () {
var loginForm = Ext.create('Ext.FormPanel', {
id: 'login-form',
url:"Login.aspx",
method: 'POST',
renderTo: container,
frame: true,
title: 'Login to EvalueX',
bodyPadding: '5px 5px 0',
bodyStyle: 'padding:15px;background:transparent',
width: 450,
fieldDefaults: {
labelWidth: 125,
msgTarget: 'side',
autoFitErrors: false
},
defaults: {
width: 300
},
defaultType: 'textfield',
items: [
{
fieldLabel: 'User Name',
name: 'user',
id: 'user',
allowBlank: false
},
{
fieldLabel: 'Password',
name: 'pass',
allowBlank: false // id of the initial password field
}
]
,
buttons: [{
text: 'Login',
id: 'btnLogin',
handler: function () {
if (loginForm.getForm().isValid()) {
url: "Login.aspx",
Ext.getCmp('btnLogin').disable();
loginForm.getForm().submit({
method: 'POST',
// waitMsg: 'Uploading your file...',
// or using a progress bar
failure: function (form, action) {
Ext.getCmp('btnLogin').enable();
showLoadingImage(false);
alert(action.result.errors.reason);
}
});
}
// Ext.getCmp('login-form').getForm().submit({ waitMsg: 'Please wait...' });
}
}
]
});
});
Aspx. Code it's simple Server.Transer.
I receive an error ."You are trying to decode invalid json "
Sumbit Request does not arrive to server
But when I referrence to different aspx page that the page the load form is placed
it's working
It's seems in the code you given that the success event is not handled and there is no code with a decode of the json result. Something missing...
In fact, your code doesn't help much, exept saying "verify that the adress to the "Login.aspx" page is correct" ?
I created a separate asp and submit the file and it's worked ok