Adding a Message Alert to an Ext JS object - javascript

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

Related

extjs combo box getCount() on store returns 0

I am trying to get the number of items in the combo box so that I can make the first value by default visible in the combo box using the getCount() method but I see it always return 0 so cannot get the first item to be displayed in the combo box.
Code for my combo box is as shown below:
Ext.define('something....', {
controller: 'some Controller',
initComponent: function() {
var me,
me = this;
me.items = [{
xtype: 'form',
items: [{
xtype: 'combo',
itemId: 'nameId',
name:'nameId',
labelAlign: 'top',
fieldLabel: 'Name',
store: me._getNames(),
//disabled:some condition?true:false,//doesn't gray out combo
valueField:'dataId',
displayField: 'firstName',
editable: false,
listeners:{
afterrender: function(combo,component) {
var combo = me.down('#nameId');
var nameStore = combo.getStore();
var setFirstRecord = function(combo){
var nameStore = combo.getStore();
if(nameStore.getCount() === 1){
combo.setValue(nameStore.getAt(0));
}
}
if(nameStore.isLoaded() === false){
nameStore.on('load', function(nameStore){
setFirstRecord(combo);
},this,{
single:true
});
}else{
setFirstRecord(nameStore);
}
},
}
}]
}];
}
Code for the store is as below:
_getNames: function (){
var nameStore = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'name.json',
reader: {
type: 'json',
rootProperty:'items',
transform: function (data) {
var data = {
items: [{
dataId: data[0].dataId,
firstName: data[0].name.firstName,
nameDetails: data[0].nameDetails
}]
}
return data;
}
},
},
fields: ['dataId', 'firstName','nameDetails']
});
return namesStore;
}
})
The result returned from the api to populate the store is as follows:
[
{
"dataId":1,
"name":{
"dataId":1,
"firstName":"Julie",
"code":"10",
"connectionList":[
"EMAIL"
]
},
"nameDetails":{
"EMAIL":{
"dataId":1,
"detail":"EMAIL"
}
}
}
]
Any suggestions on what's missing would be great!
I am written that example for you in Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3cdl
That solve your problem:
combo.getStore().on("load",
function (store, records, successful, operation, eOpts) {
if (store.getData().length > 0)
combo.setValue(store.getData().get(0).getData().id)
},
this
)
You must check if store is loaded or not and write appropriate code:
...
...
xtype: 'combo',
itemId: 'nameId',
name: 'nameId',
labelAlign: 'top',
fieldLabel: 'Name',
store: this._getNames(),
valueField: 'dataId',
displayField: 'firstName',
editable: false,
listeners: {
afterrender: function (combo) {
var store = combo.getStore();
var setFirstRecord = function (combo) {
var store = combo.getStore();
if (store.getCount() === 1) {
combo.setValue(store.getAt(0));
}
}
if (store.isLoaded() === false) {
store.on('load', function (store) {
setFirstRecord(combo);
}, this, {
single: true
});
} else {
setFirstRecord(combo);
}
}
}
...
...

How can I manipulate TinyMCE listbox elements?

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

How to open ionicPopup on click of ionicActionSheet option?

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

GeoExt2 - Popup Bug?

I'm using GeoExt2 (alpha) + Extjs 4.1 now to implement a map application. The thing is sometimes when I select a feature on the map, two popups are displayed. one at the bottom of the screen which has correct info and one empty in the right place. it doesn't go even I close it. I wonder if this is a bug ?
myLayer.events.on({
featureselected: function(e) {
createPopup(e.feature);
},
featureunselected: function(){
popup.destroy();
}
});
function createPopup(feature) {
popup = Ext.create('GeoExt.Popup', {
id: 'popup',
title: title,
location: feature,
});
popup.on({
close: function() {
if(OpenLayers.Util.indexOf(myLayer.selectedFeatures,
this.feature) > -1) {
selectControl.unselect(this.feature);
}
}
});
PopupTab = Ext.create('Ext.tab.Panel', {
id: 'PopupTabs',
activeTab:2,
items: [
{
title: 'Supervisor',
itemId: 'tab1',
},
{
title: 'student',
itemId: 'tab2',
items: [
{
xtype: 'label',
id: 't',
html: content,
layout: 'fit',
cls:'tabStyle'
}
]
},
],
listeners: {
tabchange: function(panel, tab) {
if (tab.popup !== undefined) { // show window after tab change
tab.popup.show();
}
}
}
});
popup.add(PopupTabs);
popup.show();
}

ExtJS-3, Ext.grid.GridPanel, muti-row checkboxes: how do I submit all checked items at once?

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

Categories