I am attempting to open a popup when the user hits the 'custom' button on an actionsheet and I cannot figure out how to interact between the two. My best guess is below, as when I call ng-click="showPrompt()" in the view, the popup is triggered, but when I try to do it from within the buttonClicked event on the actionsheet, it's a no-go.
.controller('TablesCtrl', function($scope, $ionicPopup, $ionicActionSheet) {
$scope.tables = [];
/* Choose Number of Guests */
$scope.showActionsheet = function($ionicPopup) {
$ionicActionSheet.show({
titleText: 'How many guests?',
buttons: [
{ text: '1' },
{ text: '2' },
{ text: '3' },
{ text: '4' },
{ text: '5' },
{ text: '6' },
{ text: 'Custom' }
],
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
buttonClicked: function(index, $ionicPopup) {
console.log('BUTTON CLICKED', index);
if(index==6){showPrompt();}
return true;
}
});
};
/* CUSTOM Number of Guests */
$scope.showPrompt = function() {
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//don't allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
};
})
Try using $scope because that function is undefined in that context but $scope is defined via closure:
if(index==6){$scope.showPrompt();}
Related
I'm trying to add a message alert to an ext object but I can't seem to get it. If a user is logged in then an object is pushed with the URL and they can access it. If they're not logged in, a pop-up is supposed to appear and tell them to login.
Is there an easy way to add a pop-up to an Ext pdf link?
Code
var treeObj = [];
function loggedIn() {
if (typeof isLoggedIn != 'undefined') {
return isLoggedIn;
} else {
return false;
}
}
if (loggedIn()) {
treeObj.push({
text: 'Test File',
leaf: true,
href: '/secure/test.pdf',
cls: 'tree-pdf',
});
} else{
treeObj.push({
text: 'Test File',
leaf: true,
cls: 'tree-pdf',
listeners: {
render: function(c){
c.getEl().on('click', function(){
Ext.Msg.alert('Insufficient Rights', 'You have selected a secure resource.');
}, c);
}
}
});
}
You can try this Fiddle
Code snippet:-
Ext.application({
name: 'Fiddle',
launch: function () {
var treeObj = [],
isLoggedIn;// = true;
function loggedIn() {
if (typeof isLoggedIn != 'undefined') {
return isLoggedIn;
} else {
return false;
}
}
if (loggedIn()) {
treeObj.push({
text: 'Test File',
leaf: true,
href: '/secure/test.pdf',
hrefTarget: '_blank',
cls: 'tree-pdf',
});
} else {
treeObj.push({
text: 'Test File',
leaf: true,
cls: 'tree-pdf'
});
}
Ext.create('Ext.tree.Panel', {
renderTo: document.body,
title: 'Simple Tree',
width: 300,
height: 250,
root: {
text: 'Root',
expanded: true,
children: treeObj
},
listeners: {
beforeitemclick: function (view, record, item, index, e, eOpts) {
if (!loggedIn()) {
Ext.Msg.alert('Insufficient Rights', 'You have selected a secure resource.');
return false;
}
}
}
});
}
});
I am trying to use multiselector from EXTJS 6.5.2
This is the code that I am using to create multiselector with the values that I need
{
xtype: 'multiselector',
title: 'I caktohet:',
name: 'Caktohen[]',
bind: '{userfullname.value}',
fieldName: 'userfullname',
viewConfig: {
deferEmptyText: false,
emptyText: 'Askush i zgjedhur'
},
search: {
field: 'userfullname',
model: 'InTenders.model.UserModel',
store: {
type: 'users',
sorters: 'userfullname',
// proxy: {
// type: 'rest',
// limitParam: null,
// url: 'api/User'
// }
}
}
}
When I call form = win.down('form') records I can get all values except the multiselector values, they show like this on console.
Anyone can help me or guide me how to get the values?
Thank you.
//Code that I'm trying to get multiselector items and save them
saveTenderForm: function (button, e, eOpts) {
var userMultiSelector = Ext.getCmp('AssignedUsers'); //save assigned users
var selectedUsers = userMultiSelector.getStore().getData(); //get store and put them in array
var me = this,
win = button.up('window'),
form = win.down('form'),
// formApplyUpload = this.getFormApplyUpload(),
// var ko = win.items.items[0].items.items[0].value;
recordtenderUsers = Ext.create('InTenders.model.TenderSaveModel');
// recordtenderUsers = form.getRecord();
// record = form.getRecord(),
values = form.getValues();
// appFile = this.getApplicationFile(),
// callbacks;
recordtenderUsers.set(values);
recordtenderUsers.set('tenderUsers',selectedUsers.items);
// // me.showMask();
// if (form.isValid()) {
recordtenderUsers.save({
success: function (recordtenderUsers, operation) {
win.close();
me.hideMask();
},
failure: function (recordtenderUsers, operation) {
me.hideMask();
}
});
You can get value using multiselector.down('grid') this will return you the grid. And grid have method getSelection().
In this FIDDLE, I have created a demo. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'form',
renderTo: Ext.getBody(),
items: [{
xtype: 'multiselector',
title: 'Multi selector example',
fieldName: 'text',
viewConfig: {
deferEmptyText: false,
emptyText: 'No value selected'
},
search: {
field: 'text',
store: {
fields: [{
name: 'text',
type: 'string'
}],
data: [{
text: 'ABC'
}, {
text: 'ABC 1'
}, {
text: 'ABC 2 '
}, {
text: 'ABC 3'
}, {
text: 'ABC 4'
}]
}
}
}, {
xtype: 'button',
text: 'Get Value',
margin:15,
handler: function (btn) {
var multiselector = btn.up('form').down('multiselector');
if (multiselector.down('grid')) {
multiselector.down('grid').getSelection().forEach(rec => {
console.log(rec.get('text'));
});
}
}
}]
});
}
});
I have the following function declaration
var exportStore = function (exportVar) {
// Process export .cfc
var params_JSON = {
<cfoutput>
l_companyid: '#url.companyid#',
l_start: '#l_start#',
l_end: '#l_end#'
</cfoutput>
};
if(exportVar == 'results') {
var exportQuery = Ext.getCmp('query');
var query = exportQuery.getValue();
params_JSON.query = query;
}
<cfoutput>var url = 'some url parameters' + Ext.JSON.encode(params_JSON)';</cfoutput>
//ajax call here returns link to export file
// display export link
var myForm = new Ext.form.Panel({
title: 'Export File',
width: 300,
height: 200,
floating: true,
closable : true,
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'displayfield',
name: 'export_file',
value: 'Click here to download file'
}],
buttons: [{
margin: '0 10 10 0',
text: 'Close',
handler: function() {
this.up('form').destroy();
}
}]
});
I am attempting call this function from a button that has a drop down selection.
{
text: 'Export All',
handler: exportStore
},
{
text: 'Export Search Results',
handler: exportStore
}
My question is can you pass a parameter to a function declared as a variable? I know I can just give both buttons their own handler, but that handler is going to contain quite a bit of code and im attempting to simplify... just wanted to know if a paramerter can be passed to exportStore in some form for example.....
{
text: 'Export All',
handler: [
exportStore,
extraParams: { exportVar: 'all' }
]
}
You could use Ext.bind() to achieve this like below:
var exportStore = function (exportVar) {
// exportVar will have your 'all' or 'search' value as per the
// button clicked
...
}
// In definition
{
text: 'Export All',
handler: Ext.bind(exportStore, undefined, ['all'])
}, {
text: 'Export Search Results',
handler: Ext.bind(exportStore, undefined, ['search'])
}
You can refer this fiddle for the usage.
In TinyMCE how can add and remove options to listboxes in a plugin pop up window?
editor.addMenuItem('insertValue', {
text: 'Menu item text',
context: 'tools',
onclick: function() {
availableElements=[
{
text:'Start typing into the search box'
}
];
var w=editor.windowManager.open({
title: 'Pop up window title',
body:[
{
type:'textbox',
name:'title',
label:'Search',
onkeyup:function(e){
$.post('THE URL WHICH GIVE BACK THE OPTIONS AS A JSON').done(function(response){
response=JSON.parse(response);
for (i in availableElements){
availableElements.pop();
}
if (typeof response.data!=="undefined"){
for (i in response.data){
availableElements.push({
value:response.data[i].id,
text:response.data[i].title
});
}
}
});
}
},
{
type:'listbox',
name:'id',
label:'Insert this value',
values:availableElements
}
],
width:600,
height:200,
buttons: [
{
text:'Insert',
onclick:'submit',
class:'mce-primary'
},
{
text:'Cancel',
onclick:'close'
}
],
onsubmit:function(){
tinymce.activeEditor.execCommand('mceInsertContent', false, w.find("#id").value());
}
});
}
});
I'm using ExtJS3 and I have a Ext.grid.GridPanel where each row has a checkbox on the left. At the top there are two buttons: 'refresh' and 'submit'. I want to be able to select multiple rows and submit all of them in one click of the submit button. As it is right now when I select multiple rows and hit submit it will submit the first one, then remove that item from the grid, and I have to hit submit again (the formerly checked rows are still checked).
How do I change the following code to make the submit button send all of the rows at one time?
var dataStore = new Ext.data.SimpleStore({ fields: [
{name: 'node'},
{name: 'ip'},
{name: 'groups'}
]});
var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
var dataGrid = new Ext.grid.GridPanel ({
renderTo: document.body,
clickstoEdit: 2,
selModel : checkBoxSelMod,
xtype: 'grid',
layout: 'fit',
sm: new Ext.grid.CheckboxSelectionModel(),
tbar: [
{
text: 'Refresh',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_refresh.png',
cls: 'x-btn-text-icon',
handler: function() {
window.location = '$nroot/index.php/imaging/index';},
scope: this,
},
{
text: 'Submit Machine(s)',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = dataGrid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+sel.data.node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: sel.data.node,
mgmtip: sel.data.ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}
}
}
],
store: dataStore,
columns: [
checkBoxSelMod,
{ id: 'node', header: "Node", width: 150, sortable: true, dataIndex: 'node'},
{ id: 'ip', header: "IP", width: 120, sortable: false, dataIndex: 'ip'},
{ id: 'groups', header: "Groups", width: 100, sortable: true, dataIndex: 'groups'},
],
stripeRows: true,
autoExpandColumn: 'node',
listeners: {
render: function(){ this.store.loadData(dataList); }
}
})});
When I change the code from getSelected to getSelections it returns this on page load:
item type is invalid for AcceptItem action
I can't find any examples that show multi-select with submit for GridPanels. Is there one I can reference?
EDIT, based on the solutions below I've modified the code to work as follows:
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
Ext.each(sels, function(sel) {
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
node: sel.get('node'),
mgmtip: sel.get('ip')
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
})
}
}
});
}
}
The most simple approach is to loop through the selected records and ask a question for each record.
var sels = sm.getSelections();
Ext.each(sels, function(sel) {
var node = sel.get('node'),
ip = sel.get('ip');
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: node,
mgmtip: ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
});
However, this may not be nice for the user to get a prompt for every row selected in the DataGrid. But if your service ('$nroot/index.php/imaging/image/') support posting several items you can ask the user one time and post all of them. I.e.
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
nodes: nodes,
mgmtips: ips
},
success: function(resp,opt) {
Ext.each(sels, function() { dataGrid.getStore().remove(this) });
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}