Develop Reference

Sweetalerts - How to add validation in Chaining modals (queue) inputs on each step

I am trying to add input fields in chaining modals (queue) using sweet alerts.
Reference http://www.inetcnx.net/sweetalert/index.html#chaining-modals
Problem: I want to add validation on each input field. Lets say; to make it required field, therefore user must need to enter value in input before proceeding to next step.
Code:
$('body').on('click','.apt_action',function() {
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
animation: true,
progressSteps: ['1', '2', '3']
})
var steps = [
{
title: 'Customer Name',
inputId: "customer_name",
inputPlaceholder: "Write something"
},
{
title: 'Sales Person',
text: 'Product sold by?'
},
{
title: 'Additional Details',
text: 'Coments or additional notes'
},
]
swal.queue(steps).then(function (result) {
swal.resetDefaults()
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
(result) +
'</pre>',
confirmButtonText: 'Lovely!',
showCancelButton: false
})
}, function () {
swal.resetDefaults()
})
});
Js Fiddle :https://jsfiddle.net/mvohq23z/3/

Just add a preConfirm function block at each step you want to validate and do the validation using the variable value as you wish. Call the resolve() method for success or the reject('text error description here') to display an error message and prevent the chain modal to proceed to the next step.
Here's an example using your code in order to make all the input fields required:
JSfiddle here: https://jsfiddle.net/davidtoledo/ymb38u6t/1
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
animation: true,
progressSteps: ['1', '2', '3']
});
var steps = [
{
title: 'Customer Name',
inputId: "customer_name",
inputPlaceholder: "Write something",
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 1!');
}
});
}
},
{
title: 'Sales Person',
text: 'Product sold by?',
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 2!');
}
});
}
},
{
title: 'Additional Details',
text: 'Coments or additional notes',
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 3!');
}
});
}
},
];
swal.queue(steps).then(function (result) {
swal.resetDefaults();
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
(result) +
'</pre>',
confirmButtonText: 'Lovely!',
showCancelButton: false
})
}, function () {
swal.resetDefaults()
});
Cheers,
David Costa

How to marked only one of the menu items in Extjs menu checked

I have a menu added to a button.
buttons.push({
iconCls: 'fa fa-money',
text: 'Currency format',
menu: new Ext.menu.Menu(
{
items: [{
iconCls: 'fa fa-euro',
text: '1.000,00',
checked: true,
handler: function (btn) {
updateNumericFormat(btn);
}
},
{
iconCls: 'fa fa-dollar',
text: '1,000.00',
checked: false,
handler: function (btn) {
updateNumericFormat(btn);
}
}],
})
});
I would like to select only one item in the menu at the time. so if the first item is checked I want the other item to be unchecked. but I can't get it to work.
updateNumericFormat: function (btn) {
//uncheck the other button
}

sencha fiddle
updateNumericFormat: function (btn) {
btn.up().down('[name=euro]').setChecked(!btn.checked , true);
}
Full code,
Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
iconCls: 'fa fa-euro',
text: '1.000,00',
checked: true,
name : 'euro',
handler: function (btn) {
btn.up().down('[name=dollar]').setChecked(!btn.checked , true);
}
},
{
iconCls: 'fa fa-dollar',
text: '1,000.00',
checked: false,
name: 'dollar',
handler: function (btn) {
btn.up().down('[name=euro]').setChecked(!btn.checked , true);
}
}]
});

What you are searching is the menucheckitem's group config, or maybe even a cycle button.

Extjs form submit

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

tinymce, get input field value from dialog box with click button on the main window

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();
};

JTable jquery, Close Child button

I am using Jtable (Jquery based).
I have some trouble with the child table.
In the child table I added a new button in the toolbar.
With this new button in the toolbar, che close icon disappear, how can I fix it?
(if I remove the toolbar element the X of close button is correctly displayed).
$('#ListHeader').jtable({
title: 'ExpensesAccounts' ,
actions: {
listAction: function (postData, jtParams) {
return getListDataHeader();
}
},
fields: {
ID:{
key: true,
list:false
},
Details: {
title: '',
width: '5%',
sorting: false,
edit: false,
saveUserPreferences: false,
create: false,
display: function (headerData) {
//Create an image that will be used to open child table
var $img = $('<img src="../Images/viewDetails.png" width="20p" height="20p" title="View Details" />');
//Open child table when user clicks the image
$img.click(function () {
$('#ListHeader').jtable('openChildTable',
$img.closest('tr'),
{
title: headerData.record.Title + ' - Row' ,
saveUserPreferences: false,
paging: true,
pageSize: 3,
showCloseButton:true,
toolbar: {
items: [{
icon: '../scripts/jtable/themes/metro/add.png',
text: 'Add New Row',
click: function (headerID) {
window.location = "InsertRow.aspx";
}
}]
},
actions: {
listAction: function (postData, jtParams) {
return getListDataRow(headerData.record.ID, jtParams.jtStartIndex, jtParams.jtPageSize);
//return { "Result": "OK", "Records": [] };
},
deleteAction: function (postData) {
return deleteItem(postData, 'Expense Account Rows');
}
},
fields: {
HeaderID: {
type: 'hidden',
defaultValue: headerData.record.ID
},
ID: {
key: true,
create: false,
edit: false,
list: false
},
Title: {
title: 'Title',
width: '20%'
}
}
}, function (data) { //opened handler
data.childTable.jtable('load');
});
});
//Return image to show on the person row
return $img;
}
},
Title: {
title: 'Title'
},
Status: {
title: 'Status',
width: '8%'
}
}
});
$('#ListHeader').jtable('load');
Thanks,
Nk