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.

ExtJS Ext.panel.Panel tools order

I've got this panel. It shows tools icons in this order: gear, close, collapse.
I'd like to get icons is this order: gear, collapse, close. I can't figure it out.
When I put collapseFirst: true, then collapse is at the first position.
Here's an alternative link to the SenchFiddle
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
width : 500,
height: 200,
title : 'Panel',
renderTo: Ext.getBody(),
closable : true,
collapsible : true,
collapseFirst : false,
tools: [{
type : 'gear'
}],
initTools: function() {
var me = this,
tools = me.tools,
i, tool;
me.tools = [];
for (i = tools && tools.length; i; ) {
--i;
me.tools[i] = tool = tools[i];
tool.toolOwner = me;
}
// Add a collapse tool unless configured to not show a collapse tool
// or to not even show a header.
if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
if (Ext.getVersion().major == '4') {
me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
me.collapseTool = me.expandTool = Ext.widget({
xtype: 'tool',
handler: me.toggleCollapse,
scope: me
});
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
} else {
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
}
}
if (me.pinnable) {
me.initPinnable();
}
// Add subclass-specific tools.
me.addTools();
// Append collapse tool if needed.
if (me.collapseTool && !me.collapseFirst) {
me.addTool(me.collapseTool);
}
// Make Panel closable.
if (me.closable) {
me.addClsWithUI('closable');
me.addTool({
xtype : 'tool',
type: 'close',
scope: me,
handler: me.close
});
}
}
});
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
Thanks anyone for help :)

EDIT: Found that overriding the initTools method is a better solutions for this
EDIT 2: Supports both ExtJS 4.2 and ExtJS 5.x
Ext.create('Ext.panel.Panel', {
width : 500,
height: 500,
title : 'Panel',
renderTo: Ext.getBody(),
closable : true,
collapsible : true,
collapseFirst : false,
tools: [{
type : 'gear'
}],
initTools: function() {
var me = this,
tools = me.tools,
i, tool;
me.tools = [];
for (i = tools && tools.length; i; ) {
--i;
me.tools[i] = tool = tools[i];
tool.toolOwner = me;
}
// Add a collapse tool unless configured to not show a collapse tool
// or to not even show a header.
if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
if (Ext.getVersion().major == '4') {
me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
me.collapseTool = me.expandTool = Ext.widget({
xtype: 'tool',
handler: me.toggleCollapse,
scope: me
});
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
} else {
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
}
}
if (me.pinnable) {
me.initPinnable();
}
// Add subclass-specific tools.
me.addTools();
// Append collapse tool if needed.
if (me.collapseTool && !me.collapseFirst) {
me.addTool(me.collapseTool);
}
// Make Panel closable.
if (me.closable) {
me.addClsWithUI('closable');
me.addTool({
xtype : 'tool',
type: 'close',
scope: me,
handler: me.close
});
}
}
});

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

unable to auto slide html pages using sencha

i am create simple app using sencha touch 2 + java script + html 5 which change / slide html pages automatically.
i write below code to slide html pages using DelayedTask task but the code is not working .
Main.js
Ext.create('Ext.Carousel', {
fullscreen: true,
xtype:'carousel',
cls:'carousel',
defaults: {
styleHtmlContent: true
},
config: {
ui : 'light',
},
listeners:
{
'afterrender': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (this.getActiveIndex() == this.items.length - 1) {
this.setActiveItem(0, 'slide');
}
else {
this.next();
}
this.pageTurner.delay(6000);
}, carousel);
carousel.pageTurner.delay(6000);
}
},
items: [
{
html : '<img src="resources/images/Picture1.png" width="100%" height = "100%" align="middle" /> <audio autoplay loop><source src="resources/audio/kalimba.mp3"></audio>',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture2.png" width="100%" height = "100%" margin=0 align="middle" /> ',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
}
]
});
i write this code to auto side but its not working please help me..

There are quite many errors in your code. Please try this, as I've tested, it works (changes are only made to listeners):
listeners:
{
'show': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (carousel.getActiveIndex() == carousel.items.length - 2) {
carousel.setActiveItem(0, 'slide');
}
else {
carousel.next();
}
}, carousel);
carousel.pageTurner.delay(1000);
},
'activeitemchange': function(carousel){
if (carousel.getActiveIndex() == 0) {
carousel.fireEvent('show',this);
} else
carousel.pageTurner.delay(1000);
},
},
Some explanation:
afterrender event is replaced by paint event in Sencha Touch 2. In this situation, you can also use show event.
to set delay time after each cardswitch, you need to listen to activeitemchange event
Hope it helps.

I know there already an accepted answer, but here is my implementation of this (for sencha touch v2.2)
Tapping or manually sliding the image will pause the slideshow. Tapping again will resume.
Make sure you apply this to xtype: 'carousel'
{
xtype: 'carousel',
//...your config stuff here...
carouselSlideDelay: 3500,
autoSlide: true,
listeners: {
initialize: function(carousel) {
if (this.autoSlide) {
carousel.isRunning = false;
this.start(carousel);
// Add tap event.
carousel.element.on('tap', function(e, el){
if (!carousel.isRunning) {
carousel.next();
this.start(carousel);
} else {
this.stop(carousel);
}
}, this);
// Add drag event.
carousel.element.on('dragstart', function(e, el){
this.stop(carousel);
}, this);
}
}
},
start: function(carousel, delay) {
// If already running.
if (carousel.isRunning) { return; }
// Allow for overriding the default delay value.
var delay = (delay !== undefined ? delay : this.carouselSlideDelay);
carousel.isRunning = true;
carousel.timerId = setInterval(function () {
carousel.next();
if (carousel.getActiveIndex() === carousel.getMaxItemIndex()) {
carousel.setActiveItem(0);
}
}, delay);
},
stop: function(carousel) {
clearInterval(carousel.timerId);
carousel.isRunning = false;
}
}
And this was loosely based off the Sencha Touch demo here.

After chrome 43 bug. Auto carousel is not working in my app. so i did some customization
direction: 'horizontal',
delay: 10000,
start: true,
indicator:false,
listeners:
{
activate: function(homeScreenCarousel) {
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length-1) {
me.setActiveItem(0,'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
me.pageTurner.delay(8000);
}, homeScreenCarousel);
homeScreenCarousel.pageTurner.delay(8000);
},
activeitemchange:function(homeScreenCarousel){
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length - 1) {
me.setActiveItem(0, 'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
homeScreenCarousel.pageTurner.delay(8000);
}, homeScreenCarousel);
}
},