I searched hours and hours for a solution but can't find one. I want to submit something to a php api function. it looks like this:
/*global Ext:false */
Ext.onReady(function ()
{
var i = 0;
var form = Ext.create('Ext.form.Panel', {
title: 'base_entity_id',
bodyPadding: 5,
width: 350,
defaultType: 'textfield',
items: [{
fieldLabel: 'base_entity_id',
name: 'first',
allowBlank: false
}],
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
//only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
}
}],
})
var tabs = Ext.create('Ext.tab.Panel',
{
renderTo: 'tabs',
id: 'tabs',
itemId: 'tabs',
fullscreen: true,
renderTo: document.body,
items:
[
{
title: 'Home',
margin: 40,
items: [form],
},
{
title: 'Results',
itemId: 'Results',
listeners:
{
activate: function (tab)
{
if(i == 0)
{
var panel = Ext.create('Ext.tab.Panel',
{
id: 'tabs2',
width: window,
height: window,
renderTo: document.body,
items:
[
{
title: '1',
itemId: '1',
closable: true,
html: '10329u9iwsfoiahfahfosaofhasohflhsalkfhoihoi3riwoifhoiashfkhasofhosahfsahfahsfosafoisaiohfaoishfoihsaoifasoifsaifhsaoifasoihfoiahsfoihasfoihasoifoisfoihsafoihasfoiasoihasfoihaoifhaoihfoiahfoiaoaffoafoiafsaoafohaoh'
},
{
title: '2',
itemId: '2',
closable: true,
}
]
})
tab.add(panel);
tab.doLayout();
i = 1;
}
}
}
}]
})
});
But when i'm submitting i get no response, can someone help me with this? I dont know what the next steps are...
I have a simple application done with Ext JS/PHP and the following code worked for me:
myFormPanel.getForm().submit({
clientValidation: true,
url: 'updateConsignment.php',
params: {
id: myFormPanel.getForm().getValues().first
},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
Source:
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.BasicForm-method-submit
Well, you have set no URL for your form, and the submit button doesn't have the submit method so I'm not really sure how this was supposed to work.
You will need to add the url config to your form:
Ext.create('Ext.form.Panel', {
title: 'base_entity_id',
method: 'POST',
url: 'myBackEnd.php' // Or whatever destination you are using for your backend.
...
});
Also, I saw that you are using formbind: true and later checking if the form was valid, one action renders the other unnecessary, so choose one, there is no need for both!
Add this your button handler:
form.submit({
params: {
id: form.getForm().getValues().first
},
success: function(form, action) {
Ext.Msg.alert('Success', 'Your form was submitted successfully');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
Then you should check for $_POST['id']
For more information on form methods and configurations check this doc: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Basic
Related
Using ExtJS 4.2.3. I have FORM with combobox field and some values inside on choose. I need to catch event when user pick 1 of the value in combobox.
Asking for help with syntax, as example to get ALERT on picking DATA3 value.
Name of combobox field - "document_type".
Example of code on ExtJS:
documentForm_window = Ext.create("Ext.window.Window", {
title: (document_GUID == null) ? "[Create]" : "[Edit]",
width: 500,
modal: true,
layout: "fit",
items: [{
xtype: "form",
frame: true,
waitMsgTarget: true,
listeners: {
afterrender: function (form) {
if (document_GUID != null) {
form.getForm().load({
url: Ext.state.Manager.get("MVC_url") + "/Document/Get",
method: "GET",
params: { document_GUID: document_GUID },
waitMsg: "[loading]",
timeout: 300,
failure: function (form, action) {
if (action.result) Ext.Msg.alert("[Error1]!", action.result.errorMessage);
else Ext.Msg.alert("[Error2]!", "[Error3]!");
}
});
}
}
},
defaults: {
anchor: "100%",
msgTarget: "side",
labelWidth: 145,
allowBlank: false
},
items: [{
xtype: "combo",
name: "document_type",
fieldLabel: "<b>[Type]<font color='Red'>*</font></b>",
displayField: "document_type_name",
valueField: "document_type",
queryMode: "local",
triggerAction: "all",
editable: false,
store: document_store
}, {
xtype: "textfield",
name: "contract_number",
fieldLabel: "<b>[TestData]</b>"
}],
formBind: true,
buttons: [{
text: (document_GUID == null) ? "[Create]" : "[Edit]",
handler: function () {
var action = (document_GUID == null) ? "Create" : "Edit";
var form = this.up("form").getForm();
if (form.isValid()) {
form.submit({
url: Ext.state.Manager.get("MVC_url") + "/Document/" + action,
params: { document_GUID: document_GUID, treasury_GUID: tree_value },
waitMsg: "[Loading...]",
success: function (form, action) {
documentForm_window.destroy();
OrderLines_store.load({
scope: this,
callback: function (records, operation, success) {
documents_List.query('*[itemId="DATA1_grid"]')[0].selModel.select(curr_position);
}
});
},
failure: function (form, action) {
if (action.result) Ext.Msg.alert("[Error1]!", action.result.msg);
else Ext.Msg.alert("[Error2]!", "[Error3]!");
}
});
}
}
}]
}]
}).show();
}
//store//
document_store = new Ext.data.ArrayStore({
fields: ["document_type", "document_type_name"],
data: [[0, "data1"], [1, "data2"], [2, "data3"]]
});
Sorry, part of code I add as screen cause of post error "It looks like your post is mostly code".
You have to add a listener for the select event to the combobox:
editable: false,
store: document_store,
listeners: {
select: function(combo, records) {
console.log(combo);
console.log(records);
if(!Ext.isArray(records)) records = [records];
Ext.each(records, function(record) {
if(record.get(combo.valueField)==3) {
Ext.Msg.alert('Value is 3 for' + record.get(combo.displayField));
}
});
}
}
I have a form as follows
this.stdForm = new Ext.form.Panel(this.createStdForm());
this.stdForm.getForm().load({
params: { action: 'load', id: 1234, dep: 'std' },
success: this.formLoaded,
scope: this
});
createStdForm: function () {
var flds = {
items: [
{ fieldLabel: 'Roll Number', name: 'ROLL_NUMBER', xtype: 'displayfield' } }
]
};
var fldSet = {
title: 'Student Information',
xtype: 'panel',
defaultType: 'fieldset',
defaults: { autoHeight: true, baseCls: 'x-fieldset-noborder', reference:'RollNumber'},
items: [flds]
};
return {
layout: 'column',
border: false,
defaults: {
border: false
},
url: this.getUrl(),
items: [
col1
]
};
}
and on formloaded function, I am trying to get reference of roll number field
formLoaded:function (form, action) {
form.getreferences('RollNumber') // not working
form.lookupreference(); // not working
}
Can anybody tell me what I am doing wrong.
In your example - just add referenceHolder: true to the panel:
If true, this container will be marked as being a point in the
hierarchy where references to items with a specified reference config
will be held. The container will automatically become a
referenceHolder if a controller is specified. See the introductory
docs for Ext.container.Container for more information about references
& reference holders.
Working example: https://fiddle.sencha.com/#fiddle/1d7t
I know, no one uses tinymce in this site. Because I asked 2 question before related tinymce. No one visited the pages. But again, I have a problem. I coded like this:
editor.addButton('site_link', {
icon: 'fa-heart',
tooltip: 'Internal link',
onclick: function() {
editor.windowManager.open({
file : url + '/link.php',
width : 500,
height : 200,
title: 'Internal link',
buttons: [
{
text: "Get Link",
classes: 'widget btn primary',
id: "link",
onclick: function() {
var link = $('#bag_link').val();
alert(link);
}
},
{
id: "close",
text: 'Kapat',
onclick: 'close'
}
]
});
}
});
And the "link.php" page is like this:
When click "Get Link" button, I want to get values form elements which located in the "link.php". But I did not manage it. Could you help me ? How can I do this?
I had to wrestle through this too, but i came up with something like this.
Instead of calling the windowmanager i had the following inside the onclick function:
function showDialog()
{
var var1, var2;
// do whatever you need here
var win = tinymce.ui.Factory.create({
type: 'window',
layout: "flex",
pack: "center",
align: "center",
onClose: function() {
ed.focus();
},
onSubmit: function(e) {
var x,y,z;
e.preventDefault();
// read Field!!!!!
x = win.find('#my_content_field').value();
// Do whatever you need here
// Dialog schließen
win.close();
},
onPostRender: function(){
ed.my_control = this;
},
buttons: [
{
text: "Paste",
onclick: function() {
win.submit();
}},
{
text: "Cancel",
name: 'cancel',
disabled: false,
onclick: function() {
win.close();
}}
],
title: 'my title',
items: {
type: "form",
padding: 20,
labelGap: 30,
spacing: 10,
items: [
{
type: 'textbox',
multiline: true,
name: 'my_content_field',
value: 'standard text'
}
]
}
}).renderTo().reflow();
};
I'm new to ExtJS and have the following problem: I have one class LoginWindow, that implements a FormPanel:
Ext.define('WebDesktop.LoginWindow', {
extend: 'Ext.window.Window',
title: Translator.get("login_window:Anmeldung"),
layout: 'fit',
closable: false,
resizable: false,
constructor: function() {
this.callParent();
},
initComponent: function () {
var me = this;
me.loginPanel = new WebDesktop.LoginPanel(me);
me.items = [
me.loginPanel
],
me.callParent();
},
});
Ext.define('WebDesktop.LoginPanel', {
extend: 'Ext.form.Panel',
header: false,
bodyPadding: 5,
reset: true,
waitMsgTarget: true,
url: Routing.generate('_route_core_login'),
items: [{
xtype: 'textfield',
fieldLabel: Translator.get("login_window:Benutzername"),
name: '_username',
width: 300,
},
{
xtype: 'textfield',
fieldLabel: Translator.get("login_window:Passwort"),
name: '_password',
inputType: 'password',
width: 300,
}],
buttons: [{
text: Translator.get("login_window:Anmelden"),
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
form.submit({
success: /* Call a function that is defined in main application class */,
failure: function(form, action) {
Ext.Msg.show({
title: Translator.get("login_window:Benutzeranmeldung"),
msg: action.result ? action.result.message : 'No response',
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
form.reset();
}
});
}
}
}],
});
Now in my main application class I create an instance of the LoginWindow and show it to the user. Also in this main class is a function defined, that should be called when the form of the login window has successfully been submitted. But I don't know how to put in a reference to that function. I tried to pass a reference of the caller class to the called class and save it there, but that did not work. As you can see I'm not working with the MVC architecture, I know it's not best practice...
me.loginPanel = new WebDesktop.LoginPanel();
me.loginPanel.referenceToParentWindow = me;
is this what you are looking for? I am very confused.
I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!
In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}
I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.