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
Related
I'm trying to reload an Extjs-store, after user has download a PDF.
The process is the following:
User double clicks a cell in GridPanel
Form is created, submitted, and a procedure in the backend creates an PDF and makes some changes on data of GridPanel store
PDF will be downloaded by user
But how to reload the store with the new data in it?
There is no afterRender on form-submit.
I think this should be an easy problem, but I do not have any ideas how to solve it.
This is a snipped I found in my code base (inside a controller):
var form = button.up().up().down('form').getForm();
form.submit({ success : this.onFileUpload, failure: this.onFileUpload, scope: this});
...
onFileUpload: function (form, action){
var data = action.result.data;
...
if (action.result.success){
...
//**your store reload could be here!**
...
} else {
...
}
}
My form response is not responding with a file (just some standard html return), but I guess it should work.
here is a bit of my code:
function makeprintForm(array, setStatusX, grid) {
var filename = 'asd.pdf';
var url_pdf = 'someURL?FileName=' + filename;
var printForm = Ext.create('Ext.form.Panel', ({
url: currentContextPath + encodeURIComponent('http://' + host + ':' + port + url_pdf),
hidden: true,
id: 'printForm',
name: 'printForm',
method: 'post',
standardSubmit: true,
target: '_blank',
items: [{
xtype: 'textfield',
fieldLabel: 'print_id',
name: 'print_id',
value: array
},
{
xtype: 'textfield',
fieldLabel: 'username',
name: 'username',
value: username
},
{
xtype: 'textfield',
fieldLabel: 'language_field',
name: 'language',
value: language
}
]
}));
Ext.getCmp('printForm').getForm().submit({ success : this.reload_grid_after_submit(), scope: document.getElementById(nameSpace + 'formIS')});
}
function reload_grid_after_submit(){
console.log('reload_grid_after_submit');
Ext.getCmp('grid').getStore().proxy.setExtraParam('status', 'NEW');
Ext.getCmp('grid').getStore().load();
}
You can use a form in an alert box. I used a window here. Then onsubmit of the form you can use findRecord to find a record from the store and edit it. For better explanation please find the fiddle here. P.S sorry for the delay I was on a vacation. Please mark it as an answer if it's correct so it helps other people in the future. Or please comment if there is something which needs to be changed. Thanks
Ext.getCmp('myGrid').addListener('rowdblclick', function (a, b, c, d) {
win = new Ext.Window({
width: 300,
height: 150,
draggable: false,
border: false,
modal: true,
resizable: false,
items: [{
xtype: 'textfield',
fieldLabel: 'What is your new name',
id: 'newNameField'
}, {
xtype: 'button',
name: 'sampleButton',
text: 'Change My Name!',
style: 'margin:15px',
width: 150,
handler: function () {
name = Ext.getCmp('myGrid').getStore().getAt(d).data['name'];
console.log(name);
var newName = Ext.getCmp("newNameField").value;
console.log("replacing " + name + " with " + newName + " in the store");
var entry = userStore.findRecord('name', name);
entry.set('name', newName);
win.hide();
}
}]
})
win.show();
})
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)
We are trying to build a simple prototype to consume our data service using ExtJs (also to learn ExtJs at the same time).
While developing the prototype (with basic knowledge on ExtJS), I encountered several hickups. Before I post questions, I would like to have you to take a quick look at the following.
The following is the main class which interacts with the service. We wanted to make sure that certain UI components are masked/unmasked during ajax communications.
Ext.define('Sample.provider.SvcClient', {
TestConnectivity: function(prms){
debugger;
Ext.Ajax.on('beforerequest', function(conn,o,result) {
prms.BeforeRequest(conn,o,result);
});
Ext.Ajax.on('requestcomplete',function(conn,o,result) {
prms.RequestComplete(conn,o,result);
});
Ext.Ajax.on('requestexception',function(conn,o,result) {
prms.RequestException(conn,o,result);
});
Ext.Ajax.request({
url: prms.Url,
method: prms.HttpMethod,
headers: {
'Authorization' : 'Basic ' + prms.Credentials
},
success: prms.Success,
failure: prms.Failure,
callback: prms.Callback
});
}
});
We developed an extension to SvcClient especially to help masking of controls during ajax communications:
Ext.define('Sample.util.ClientProxy', {
CtlToMask : null,
DoTestConnection: function(ctlToMask, callback, url, userName, pwd) {
debugger;
var proxy = this;
proxy.CtlToMask = ctlToMask;
var client = new Sample.provider.SvcClient();
var params = {
Url: url,
HttpMethod: "GET",
Credentials: Sample.util.Conversions.Base64.encode(userName + ":" + pwd),
CtlToMask: proxy.CtlToMask,
Scope:proxy,
BeforeRequest: function(conn,o,result,Scope) {
debugger;
if(Scope.CtlToMask !=null) {
if(Scope.CtlToMask.getEl() != undefined)
Scope.CtlToMask.getEl().mask('Testing Connectivity...', 'x-mask-loading');
else
Scope.CtlToMask.mask('Testing Connectivity...', 'x-mask-loading');
}
},
RequestComplete: function(conn,o,result) {
if(this.CtlToMask !=null) {
if(this.CtlToMask.getEl() != undefined)
this.CtlToMask.getEl().unmask(true);
else
this.CtlToMask.unmask(true);
}
},
RequestException: function(conn,o,result) {
if(this.CtlToMask !=null) {
if(this.CtlToMask.getEl() != undefined)
this.CtlToMask.getEl().unmask(true);
else
this.CtlToMask.unmask(true);
}
}
};
client.TestConnectivity(params);
}
});
I have the controller as shown below:
Ext.define('Sample.controller.Locations', {
extend: 'Ext.app.Controller',
models: ['Location', 'Country'],
views: [
'portal.location.Menu',
'portal.location.Edit'
],
init: function() {
this.control({
'locationsMenu':{
OpenAddNewSvcPopup: this.OnOpenAddNewSvcPopup
},
'locationsEdit':{
TestSvcConnectivity: this.OnTestSvcConnectivity,
render: function () { },
afterrender: function () { },
boxready: function () { }
}
});
},
OnOpenAddNewSvcPopup: function(){
var newLoc = Ext.create('Sample.model.Location', {
UserName: 'admin',
Uri: 'http://localhost/DataServicesBase/Data.svc'
});
var v = Ext.create('widget.locationsEdit',{ mode:'add'});
v.down('form').loadRecord(newLoc);
},
OnTestSvcConnectivity: function(ctl){
var proxy = new Sample.util.ClientProxy();
proxy.DoTestConnection(
ctl,
this.OnTestSvcConnectivityCallback,
ctl.down("#Uri").value + '/Countries',
ctl.down("#UserName").value,
ctl.down("#Password").value
);
},
OnTestSvcConnectivityCallback: function(options,success,result){
if(success) {
//show the result
}
else {
//Show error in window
}
}
});
The view would look like the following:
Ext.define('Sample.view.portal.location.Edit', {
extend: 'Ext.window.Window',
alias: 'widget.locationsEdit',
//title: 'Edit Service Location',
layout: 'fit',
autoShow: true,
title: 'Edit Service Location',
bodyStyle: 'border:0px',
closeAction:'destroy',
config:{
mode: 'edit'
},
constructor: function(configs){
this.callParent(arguments);
this.initConfig(configs);
if(this.mode == "add") this.setTitle('Add New Service Location');
},
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name: 'Id',
itemId: 'Id',
fieldLabel: 'Unique Name',
labelStyle: 'font-weight:bold',
allowBlank: false,
maxLength: 64,
width: 300
},
{
xtype: 'textfield',
name : 'Uri',
itemId: 'Uri',
fieldLabel: 'URI',
maxLength: 300,
width: 500,
allowBlank: false
},
{
xtype: 'textfield',
name : 'UserName',
itemId: 'UserName',
fieldLabel: 'User Name',
allowBlank: false,
maxLength: 64,
width: 200
},
{
xtype: 'textfield',
name : 'Password',
itemId: 'Password',
fieldLabel: 'Password',
allowBlank: false,
maxLength: 64,
width: 200
}
],
bodyStyle: 'padding:5px;'
}
];
this.buttons = [
{
text: 'Test Connectivity',
action: 'test',
scope: this,
handler: this.OnTestSvcConnectivity
},
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent();
this.addEvents('TestSvcConnectivity') //custom event
},
OnTestSvcConnectivity: function(){
this.fireEvent('TestSvcConnectivity', this); //will be raised to controller
}
});
Q1
The approach works fine during first time when I click on "Test Connection" button (from the popup). If I click the same button for the second time, the (BeforeRequest) handler fires twice. Clicking for the third time, the handler gets fired thrice. What is the mistake in my code.
Q2
If I cancel the popup and again click on "Test Connection" it would never work. The handler still maintains "some" kind of reference (or state) of previous popup instance. As it could not be found, it throws "undefine" on object members. I confirmed this as through the debugger, I could see the id of previous popup instance instead of the current one. The handler always tries to honor the first popup instantiated no matter what.
Q3
Is the pattern we are trying to follow for this sample prototype is having any pitfalls/problems. We are trying to develop using MVC features of ExtJS and ensure that we are using stand and good patterns/practices so that we will not be facing above kind of very basic issues.
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!
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(); }
}]
});