Develop Reference

Is it possible to use tal:conditions in a Javascript file?

I am working on creating a new context menu that provides more accessibility. The old menu was using the context menu ID's to check conditions with tal in Index.html. My issue now is that I am no longer using action and not using the ID's. The new context menu is creating each menu with a different ID. I tried declaring "var emp_menu_items = [];" in a script tag inside the condition and removing it from the Employee class but I'm still getting error that it is undefined.
I also tried building the new context menu in Index.html but it needs parameters that are inside of Employee.js. So is there a solution to use the tal:conditions in a JS file?
Index.html
<a metal:fill-slot="context_menus" tal:omit-tag="">
<ul id="employee_context_menu" class="hidden" tal:define="sec_posted python:container.util.checkSecurity(mn_name='Posted')">
<li tal:condition="python:layout == 'np'">Assign Patients</li>
<li tal:condition="python:container.util.checkSecurity(mn_name='File')">HR File</li>
<li tal:condition="python:sec_posted">Pay Period Schedule</li>
<li>Close Menu</li>
</ul>
This is the old menu in Employee.js class
$name.contextMenu({
menu: "employee_context_menu",
leftClick: true
}, function(action, elem, position) {
if(action == 'Close') {
jQuery(".contextMenu").hide();
return true;
} else if(action === 'hr_file') {
$iframe.attr('src', 'Personnel/cgi_utran/cgi_utran?args=-i'+$div.data('obj').id).load(function() {resizeIframe(this)});
} else if(action === 'assign_pat') {
$j.PatientAssignment.assign_check = emp.id;
$name.addClass('highlight');
var title_str ='Assign Patients to ' + employee_name;
$j.PatientAssignment.sub_title = ''
var mheight = $j(window).height()*0.7;
$j('#beds').dialog('close');
$j('#beds').css('max-height',mheight).dialog({
modal: false,
title: title_str,
height:'auto',
width: 'auto',
close: function() { $name.removeClass('highlight'); }
});
syncPatientAssignments();
syncBedAssignments();
return true;
} else if(action === 'schedule') {
$iframe.attr('src', 'ScheduleStaff/cgi_daystaff?szDate='+emp.shiftdate+'&szID='+emp.id+'&args=-t').load(function() {resizeIframe(this)});
} else if(action === 'assign_work') {
$iframe.attr('src', 'ScheduleStaff/cgi_daystaff?args=-t OneEmployee -I'+emp.id+' -B'+emp.shiftdate).load(function() {resizeIframe(this)});
} else { }
$name.addClass('highlight');
$j("#modal_window").dialog({
modal: true,
width: 'auto',
show: 'scale',
hide: 'scale',
height: 'auto',
close: function() {window.location.reload(); $name.removeClass('highlight'); }
});
});
My changes to the context menu in Employee.js
employeeContextMenu($div, emp, employee_name, count) {
var emp_menu_items = [];
var emp_menu = {};
emp_menu_items.push({
name: 'Assign Patients', title: 'Assign Patients',
fn: function(el) {
$j.PatientAssignment.assign_check = emp.id;
var title_str ='Assign Patients to ' + employee_name;
$j.PatientAssignment.sub_title = ''
var mheight = $j(window).height()*0.7;
if ($j('#beds').hasClass("ui-dialog-content") && $j( "#beds" ).dialog( "isOpen" )){
$j('#beds').dialog('close');
}
$j('#beds').css('max-height',mheight).dialog({
modal: false,
title: title_str,
height:'auto',
width: 'auto',
position: [670, 115],
focus: function(event,ui) {
$j(".ui-icon-closethick").focus();
},
buttons: {
OK: function(){
$j(this).dialog("close");
}
}
});
syncPatientAssignments();
syncBedAssignments();
}
});
emp_menu_items.push({
name: 'HR File', title: 'HR File',
fn: function(el){return pop_over_window('Personnel/cgi_utran/cgi_utran?args=-i'+$div.data('obj').id);}});
emp_menu_items.push({
name: 'Pay Period Schedule', title: 'Pay Period Schedule',
fn: function(el){return pop_over_window('ScheduleStaff/cgi_daystaff?szDate='+emp.shiftdate+'&szID='+emp.id+'&args=-t');}});
emp_menu_items.push({
name: 'Close Menu', title: '',
fn: function(el){return false}, });
emp_menu = new ContextMenu('employee_context_menu_'+count, 'Employee Context Menu Options', '.name', emp_menu_items, {container:$div[0]});
}

I guess what you are looking for is to use server-side code inside a javascript "file" (I presume from the tagging of your question that you are working in Zope, so the javascript would be contained in an object in the ZODB).
Create your Employee.js as a DTML Method or DTML Document or Script (Python) to this end.
In the DTML objects, instead of tal-conditions, you can use <dtml-if>my js code<dtml-else>more js code</dtml-if> and any other DTML construct.
Of course you could also write a Python Script that returns the javascript code.

How to handle ctrl+tab key in extjs 3.4?

I am working on Extjs3.4. I want to keymap ctrl+tab in my application. but when I try to use it, it opens my next browser tab. How can I solve it?
This is my code :-
var keyMap = new Ext.KeyMap(Ext.getDoc(), {
key: Ext.EventObject.TAB,//9
ctrl: true,
stopEvent : true,
fn: function () { console.log('it works'); },
scope: this
});
Please give some suggestion.

Try to put a listener in the respective field (text or whatever)
listeners: {
keydown: { //tab could be listened in keydown
element: 'el',
fn: function(e){
if(e.urKey && e.urAnotherKey)
alert('keydown, execute my action');
}
},
keypress: {
element: 'el',
fn: function(){
alert('keypress');
}
}
}

w2ui - toolbar change button image on click

I am using w2ui. I have a toolbar with one button. This button has the icon-image "icon-delete".
When I click on the button, I want it to change the icon-image to "icon-add", but my code doesn't work.
toolbar: {
items: [{
type: 'button',
id: 'hide',
caption: 'Menü',
img: 'icon-delete'
}],
onClick: function (target, data) {
if (target == 'hide') {
this.items.img('icon-add');
}
}
}

You can use toolbar.set() method to update toolbar button icon. So in your onClick event do the following:
onClick: function (target, data) {
this.set(target, { icon: 'new_icon' });
}
See more here: http://w2ui.com/web/docs/w2toolbar.set

I created a hidden button "show" with the "icon-add" image.
when the button "hide" is clicked, it get hidden and the button "show" get shown.
toolbar: {
name: 'toolbar',
items: [
{ type: 'button', id: 'hide', caption: 'Menü', img: 'icon-delete' },
{ type: 'button', id: 'show', hidden: 'true', caption: 'Menü', img: 'icon-add' }
],
onClick: function (target, data) {
if (target == 'hide' ) {w2ui['layout'].toggle('left', window.instant);
this.hide('hide');
this.show('show');
}
if (target == 'show' ) {w2ui['layout'].toggle('left', window.instant);
this.hide('show');
this.show('hide');
}
}
}

I think you were missing the refresh line in your original approach. Here is an example that worked for me. I added an else part
if (event.target == 'hide') {
if (this.items[0].icon == 'icon-delete') {
this.items[0].icon = 'icon-add';
//do something code
} else {
this.items[0].icon = 'icon-delete';
//do something else code
}
w2ui['toolbar'].refresh('hide');
}

How to create shortcut keys in extjs

I write this code for submit on Enter
{
fieldLabel : 'Password',
name : 'j_password',
inputType : 'password',
allowBlank : false,
listeners : {
'render' : function(cmp) {
cmp.getEl().on('keypress', function(e) {
if (e.getKey() == e.ENTER) {
submitform();
}
});
}
}
}
What change do I need to do for shortcut keys Like Save(Ctrl + S),Paste(Ctrl +P), Open (Ctrl + O), Exit(Ctrl +X)?

You need to write appropriate handler to do the job using KeyMap.
Ext 4 code snippet may be as follows -
Ext.onReady(function () {
var map = new Ext.util.KeyMap(document,{
key: [VALUES-ASCII], // this works,
fn: function(){ alert('key was pressed.!'); }
}
);
});
This may Help

I think, You will solve your problem by this code
I Give many ways.
You choose suitable one from binding:[{}]
scope : this,
listeners : {
afterrender: function(window, options) {
this.keyNav = new Ext.util.KeyMap({
target: window.el,
binding: [{
key: [10,13],
fn: function(){
alert("Return was pressed");
}
}, {
key: "abc",
fn: function(){
alert('a, b or c was pressed');
}
}, {
key: "\t",
ctrl:true,
fn: function(){
submitform();//'Control + tab was pressed
}
}, {
key: "m",
ctrl:true,
fn: function(){
submitform();//'Control + m was pressed
}
}],
scope: this
});
}
}

How to get Ext JS component from DOM element

Trying to create an inline edit form.
I have a form that looks like this:
var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>";
var submitPic = "<img id='submitPic' src='https://s3.amazonaws.com/bzimages/submitPic.png' alt='edit' height='24' width='24'/>";
Ext.define('BM.view.test.Edit', {
extend: 'Ext.form.Panel',
alias: 'widget.test-edit',
layout: 'anchor',
title: 'Edit Test',
defaultType: 'displayfield',
items: [
{name: 'id', hidden: true},
{
name: 'name',
fieldLabel: 'Name',
afterSubTpl: editPic,
cls: 'editable'
},
{
name: 'nameEdit',
fieldLabel: 'Name',
xtype: 'textfield',
hidden: true,
cls: 'editMode',
allowBlank: false,
afterSubTpl: submitPic
}
]
});
The controller looks like this (a lot of events):
init: function() {
this.control({
'test-edit > displayfield': {
afterrender: this.showEditable
},
'test-edit': {
afterrender: this.formRendered
},
'test-edit > field[cls=editMode]': {
specialkey: this.editField,
blur: this.outOfFocus
}
});
},
outOfFocus: function(field, event) {
console.log('Lost focus');
this.revertToDisplayField(field);
},
revertToDisplayField: function(field) {
field.previousNode().show();
field.hide();
},
formRendered: function(form) {
Ext.get('submitPic').on('click', function (event, object) {
var field = Ext.get(object).parent().parent().parent().parent();
var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]');
});
},
editField: function(field, e) {
var value = field.value;
if (e.getKey() === e.ENTER) {
if (!field.allowBlank && Ext.isEmpty(value)){
console.log('Not permitted!');
} else {
var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
Ext.Ajax.request({
url: '../webapp/tests/update',
method:'Post',
params: {
id: record.getId(),
fieldName: field.name,
fieldValue: field.value
},
store: record.store,
success: function(response, t){
field.previousNode().setValue(value);
t.store.reload();
var text = response.responseText;
// process server response here
console.log('Update successful!');
}
});
}
this.revertToDisplayField(field);
} else if (e.getKey() === e.ESC) {
console.log('gave up');
this.revertToDisplayField(field);
}
},
showEditable: function(df) {
df.getEl().on("click", handleClick, this, df);
function handleClick(e, t, df){
e.preventDefault();
var editable = df.nextNode();
editable.setValue(df.getValue());
editable.show();
editable.focus();
df.hide();
}
},
I'm using the 'afterSubTpl' config to add the edit icon, and the accept icon.
I have listeners set up to listen on click events concerning them, but after they are clicked, I only have the element created by Ext.get('submitPic'). Now I want to have access to the the Ext field and form that surround it. The parent method only brings back other DOM elements. How do I connect between them? You can see what I tried in formRendered.
I hope someone can clarify this little bit for me.

Walk up the DOM tree until you find a component for the element's id:
getCmpFromEl = function(el) {
var body = Ext.getBody();
var cmp;
do {
cmp = Ext.getCmp(el.id);
el = el.parentNode;
} while (!cmp && el !== body);
return cmp;
}
Ext.Component.from(el) does exactly this since ExtJS 6.5.0, as I just learnt. Doc
Source

You can get the component by id, but only if your component and its dom element have the same id (they usually do):
Ext.getCmp(yourelement.id)
But this is not exactly good practice -- it would be better to set up your listeners so that the handler methods already have a reference to the component. For example, in your 'submitPic' component, you could define the click listener like this:
var me = this;
me.on({
click: function(arguments){
var cmp = me;
...
});