ExtJS 4.2.1 - add textfield to an XTemplate

ExtJS 4.2.1 - add textfield to an XTemplate - javascript

I got a custom component in which i set the html with an xtemplate something like this
Ext.apply(me, { html: mainTpl.apply() });
I want to add some textfields to my XTemplate too and i cant figure out how to do this.
new Ext.XTemplate('<div Class="TopHeaderUserInfo"><div id="TopHeaderLanguageDiv" ><div Class="ActiveLanguageFlag" lang="{[ this.getLanguage() ]}" ></div>' +
'<ul Class="LangSelectDropDown HeaderDropDown" style="position:absolute;"><li class="ListHeader">' + MR.locale.SelectLanguage + '</li>{[ this.renderLanguageItems() ]}</ul>' +
'</div>{[this.renderUserInfo()]}</div>',
{
...
...
...
renderUserInfo: function () {
return (MR.classes.CurrentUser.user == null ?
'<div Class="LogInOut" Id="TopHeaderLoginLogoutLink"><a Class="Login">' + MR.locale['Login'] :
'<span>Welcome, ' + MR.classes.CurrentUser.getUser().get('FullName') + '</span> <a Class="Logout">' + MR.locale['Logout']) + '</a>' +
'<ul Class="HeaderDropDown LoginDropDown" style="position:absolute;"><li class="ListHeader">Header</li>' +
// INSERT TEXTFIELD HERE
'</ul>' +
'</div>';
}
})
please help - i dont know how to continue. couldnt find a solution in the web.
If you need any further information, dont hesitate to ask!

Here is a workaround. Tested with ExtJS 4.2.2.
You have to add to the template some container with an ID or a class name (e.g. <li class="custom-text-field"></li>). Then add handler for render event of your custom component. The handler will automatically insert your text field right after the template is rendered.
Ext.define('MyComponent', {
extend: 'Ext.container.Container',
initComponent: function() {
var me = this,
// just create a textfield and do not add it to any component
text = Ext.create('Ext.form.field.Text');
var mainTpl = new Ext.XTemplate("<div>{[this.renderUserInfo()]}</div>", {
renderUserInfo: function() {
return '<ul>' +
'<li class="custom-text-field"></li>' +
'</ul>';
}
}
);
me.html = mainTpl.apply();
// postpone text field rendering
me.on('render', function() {
// render text field to the <li class=".custom-text-field"></li>
text.render(me.getEl().down('.custom-text-field'));
});
this.callParent();
}
});
Ext.getBody().setHTML('');
Ext.create('MyComponent', {
renderTo: Ext.getBody()
});

Related

jQuery add dynamic content from one element to another element

I'm adding livechat to a website, the problem I have is that it adds dynamic onclick to the page which gets blocked by my CSP policy.
I have managed to work around this by removing the dynamic code and adding my own.
What I cannot figure out is how to grab the link id which can either be
id="online-icon" or id="offline-icon" and also the span class lhc-text-status text
Client-side is not my strong point, so apologies if the code below is a mess, but can someone help with adding the above id into my code.
$(document).ready(function () {
$('body').on('click', '.status-icon', function () {
$(this).closest('#lhc_status_container').remove();
$('<div id="lhc_status_container">' +
'<a id="NEED TO ADD STATUS HERE" class="status-icon" href="#">' +
'<span class="lhc-text-status">AND HERE</span>' +
'</a>' +
'</div>').appendTo("#liveChatCase");
$("#online-icon").click(function () {
return window.lh_inst.lh_openchatWindow();
});
});
});
Below is an example of how the dynamic code is added to the page.
<div id="lhc_status_container">
<a id="online-icon" class="status-icon" href="#" onclick="return lh_inst.lh_openchatWindow()">
<span class="lhc-text-status">Live help is online...</span></a>
</div>
UPDATE I now have managed to get the value of id="NEED TO ADD STATUS HERE" but still working on lhc-text-status

Solved problem, the code is below and if anyone can improve on it it would be appreciated as I need to click the live chat div twice before it opens
$(document).ready(function () {
$('body').on('click', '.status-icon', function () {
var statusId = $(this).attr('id');
var textStatus = $(".lhc-text-status").text();
$(this).closest('#lhc_status_container').remove();
$('<div id="lhc_status_container">' +
'<a id="'+ statusId +'" class="status-icon" href="#">' +
'<span class="lhc-text-status">' + textStatus +'</span>' +
'</a>' +
'</div>').appendTo("#liveChatCase");
$(".status-icon").click(function () {
return window.lh_inst.lh_openchatWindow();
});
});
});
OK fixed the double click issue with amended code below
$(document).ready(function () {
$('body').on('click', '.status-icon', function () {
var statusId = $(this).attr('id');
var textStatus = $(".lhc-text-status").text();
// $(this).closest('#lhc_status_container').remove();
$('<div id="lhc_status_container">' +
'<a id="'+ statusId +'" class="status-icon" href="#">' +
'<span class="lhc-text-status">' + textStatus +'</span>' +
'</a>' +
'</div>').appendTo("body");
return window.lh_inst.lh_openchatWindow();
// $(".status-icon").click(function () {
// return window.lh_inst.lh_openchatWindow();
//});
});
});

MagicSuggest: redirect after choosing item

I am using MagicSuggest (http://nicolasbize.github.io/magicsuggest/) with CakePHP in a Helper as a contact search.
My MagicSuggestHelper class looks like the following:
class MagicSuggestHelper extends AppHelper {
var $name = 'MagicSuggest';
var $helpers = array('Html');
public function suggest(array $options=null){
?>
<div id='ms1'></div>
<script>
var ms = $('#ms1').magicSuggest({
width: 300,
highlight: true,
allowFreeEntries: false,
hideTrigger: true,
expandOnFocus: true,
useTabKey: true,
maxSelection: 1,
typeDelay: 0,
name: "searchId",
data: [
<?php foreach($options['data'] as $suggestions){
echo"{\n";
echo"id: ".$suggestions['id'].",\n";
echo"name: \"".$suggestions['name']."\",\n";
echo"desc: \"".$suggestions['desc']."\",\n";
echo"image: \"".$suggestions['image']."\",\n";
echo"},";
} ?>
],
renderer: function(v){
return '<div>' +
'<div style="float:left;"><img src="' + v.image + '"/ style=\"max-width:80px;max-height:80px\""></div>' +
'<div style="padding-left: 100px;">' +
'<div style="padding-top: 10px;font-style:bold;font-size:100%;color:#333">' + v.name + '</div>' +
'<div style="color: #999">' + v.desc + '</div>' +
'</div>' +
'</div><div style="clear:both;"></div>';
}
});
</script>
<?php
}
This works fine for me. But when selecting an item I want to get redirected directly to the profile I just clicked on.
I tried it with an onclick()-event in the first of the result which unfortunately didn't fired correctly when I used the CakePHP-HTML-Helper combined with $suggestions['id'].
On the MagicSuggest website I found an event that is fired when changing the selection The following code can be found in the FAQ:
$(ms).on('selectionchange', function(event, combo, selection){
alert(selection); });
I think I can use a redirect-Function here instead of the alert.
But how to get the id here? Even alert(selection) returns me an alert with "object Object" which I think should not be the case.
So how can I get the id here and redirect to my Contact view? (/contacts/view/$id).
I didn't worked alot with JavaScript in the past so please also excuse beginner's mistakes.
Thanks!

You can simply do this:
$(ms).on('selectionchange', function(e,m){
var val = this.getValue(); // this is what you want
});

AngularJS click to edit fields such as dropdown

I stumbled upon this article on how to build a click to edit feature for a form. The author states:
What about if you wanted input type="date" or even a select? This
is where you could add some extra attribute names to the directive’s
scope, like fieldType, and then change some elements in the template
based on that value. Or for full customisation, you could even turn
off replace: true and add a compile function that wraps the necessary
click to edit markup around any existing content in the page.
While looking through the code I cannot seem to wrap my head around how I could manipulate the template in such a way that I could make it apply to any angular component, let alone how I can make it apply to a drop down list. Code from article below:
app.directive("clickToEdit", function() {
var editorTemplate = '<div class="click-to-edit">' +
'<div ng-hide="view.editorEnabled">' +
'{{value}} ' +
'<a ng-click="enableEditor()">Edit</a>' +
'</div>' +
'<div ng-show="view.editorEnabled">' +
'<input ng-model="view.editableValue">' +
'Save' +
' or ' +
'<a ng-click="disableEditor()">cancel</a>.' +
'</div>' +
'</div>';
return {
restrict: "A",
replace: true,
template: editorTemplate,
scope: {
value: "=clickToEdit",
},
controller: function($scope) {
$scope.view = {
editableValue: $scope.value,
editorEnabled: false
};
$scope.enableEditor = function() {
$scope.view.editorEnabled = true;
$scope.view.editableValue = $scope.value;
};
$scope.disableEditor = function() {
$scope.view.editorEnabled = false;
};
$scope.save = function() {
$scope.value = $scope.view.editableValue;
$scope.disableEditor();
};
}
};
});
My question is, how can we extend the above code to allow for drop down edits? That is being able to change to the values that get selected.

One approach you might consider is using template: function(tElement,tAttrs ).
This would allow you to return appropriate template based on attributes.
app.directive("clickToEdit", function() {
return {
/* pseudo example*/
template: function(tElement,tAttrs ){
switch( tAttrs.type){
case 'text':
return '<input type="text"/>';
break;
}
},....
This is outlined in the $compile docs

Create HTML table in Javascript with JSON or jQuery

I'm not any good at JavaScript (yet!) - I really need some help to get past this stuck point that is causing me lots of premature hair loss!
I just can't seem to figure out how to build the following HTML code using JSON data.
This is a sample of the JSON data that I have being generated for the new version of this page I'm working on:
[{"id":"1732","name":"1BR House","checkin":"2012-12-20","checkout":"2012-12-23","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1587","name":1BR House","checkin":"2012-12-23","checkout":"2013-01-01","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1661","name":"2BR Studio","checkin":"2012-12-25","checkout":"2013-01-02","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1829","name":"Studio Cottage","checkin":"2012-12-25","checkout":"2012-12-29","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1787","name":"Studio Cottage","checkin":"2012-12-29","checkout":"2013-01-08","inclean_cleaner":"","inclean_datetime":"2012-12-29 00:00:00","inclean_notes":""},{"id":"1843","name":"1BR House","checkin":"2013-01-07","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1970","name":"Studio Cottage","checkin":"2013-01-12","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1942","name":"Suite","checkin":"2013-01-15","checkout":"2013-01-20","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""}]
To illustrate the HTML result I need, here is how I currently do it without JSON (strictly in PHP):
<div class="'.$dashboard_list_line_class.'">
<div class="dashboard_list_unitname"> '.$unit_name.'</div>
<div class="dashboard_list_cleaner_datetime"> '.$inclean_datetime.'</div>
<div class="dashboard_list_cleaner_checkin"> '.$checkin.'</div>
<div class="dashboard_list_cleaner_checkout"> '.$checkout.'</div>
<div class="dashboard_list_cleaner_inclean_cleaner"> '.$inclean_cleaner.'</div>
<div class="dashboard_list_cleaner_notes"> '.$inclean_notes.'</div>
</div>
What would the code look like in jQuery or JavaScript to grab the JSON, iterate though the arrays and create the same result as the PHP I have shown? I've been trying for hours, and get different results of puling data - but I just can't make it work.
Thanks for your help!

Here is you complete solution:
$.ajax( "example.php" ).done(function (response) {
//var data = [{"id":"1732","name":"1BR House","checkin":"2012-12-20","checkout":"2012-12-23","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1587","name":"1BR House","checkin":"2012-12-23","checkout":"2013-01-01","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1661","name":"2BR Studio","checkin":"2012-12-25","checkout":"2013-01-02","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1829","name":"Studio Cottage","checkin":"2012-12-25","checkout":"2012-12-29","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1787","name":"Studio Cottage","checkin":"2012-12-29","checkout":"2013-01-08","inclean_cleaner":"","inclean_datetime":"2012-12-29 00:00:00","inclean_notes":""},{"id":"1843","name":"1BR House","checkin":"2013-01-07","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1970","name":"Studio Cottage","checkin":"2013-01-12","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1942","name":"Suite","checkin":"2013-01-15","checkout":"2013-01-20","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""}];
var data = $.parseJSON(response);
var dashboard_list_unitname = 'change_this';
var booking_id = 'also_change_this';
$(data).each(function (i, row) {
$(row).each(function (j, col) {
var html = '<div class="row_' + i + '">' +
'<div class="' + dashboard_list_unitname + '"> ' + col.name + '</div>' +
'<div class="dashboard_list_cleaner_datetime"> ' + col.inclean_datetime + '</div>' +
'<div class="dashboard_list_cleaner_checkin"> ' + col.checkin + '</div>' +
'<div class="dashboard_list_cleaner_checkout"> ' + col.checkout + '</div>' +
'<div class="dashboard_list_cleaner_inclean_cleaner"> ' + col.inclean_cleaner + '</div>' +
'<div class="dashboard_list_cleaner_notes"> ' + col.inclean_notes + '</div>' +
'</div>';
$('body').append($(html));
});
});
});

jQuery templates can help here.
http://api.jquery.com/jquery.tmpl/ shows several examples of a template being populated from a JSON-like data bundle, and the {{each}} element allows you to iterate over lists to populate rows and cells.
Template:
<li>
Title: ${Name}.
{{each Languages}}
${$index + 1}: <em>${$value}. </em>
{{/each}}
</li>
Data:
var movies = [
{ Name: "Meet Joe Black", Languages: ["French"] },
{ Name: "The Mighty", Languages: [] },
{ Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];

Everyone seems to be assuming knowledge of AJAX calls. It's not complicated, here is an example,
$.get('json/url', function(json_data) {
// do stuff with your data
// like, other people suggested json_data.each(function(item) {
// do stuff
// });
});
You can learn more about it straight from the jQuery docs,
http://api.jquery.com/jQuery.get/
If you need to make a post request just consult the jQuery docs for post, or for the more general article, the jQuery docs for AJAX calls: http://api.jquery.com/jQuery.ajax/.

var table = '';
$.each(json_data, function(index, obj) {
table += '<div>';
for(var x in obj) {
table += '<div class="dashboard_list_unitname"> '+ obj[x]+'</div>';
}
table += '</div>';
});

Getting store record of list item when selecting a pic within the list

So I havea list of posts in a forum format, and right now I want to be able to access the posterID property of the store post when clicking on the avatar image of the user. I've attached a select listener to the image, but I'm unsure how to access the parent store of the image. I've tried looking through sencha's documentation and search has failed me.
store: 'topicStore',
itemTpl:
'<div class="post">' +
'<div class="header">' +
'<img id="avatar" src="{avatar}" width=48 height=48>' +
'<h2>{displayName}</h2>' +
'<div class="date">on {postDate:date("m/d/Y")}</div>' +
'</div>' +
'<div class="body">' +
'{message}' +
'</div>' +
'<tpl if="signature">' +
'<hr />' +
'<div class="signature">' +
'{signature}' +
'</div>' +
'</tpl>' +
'</div>',
listeners: {
select: function() { return false;},
tap: {
fn: function(event, el, record){
tempElement = el.src;
if (el.id != 'avatar'){
tempElement = tempElement.replace('_th.jpg', '_mid.jpg');
var logo = Ext.create( 'Ext.Img', {
src: tempElement,
id: 'logo',
mode: 'element'
});
app.fireEvent('forum-onimgview',logo);
}
else if (el.id == 'avatar'){
console.log(record);
}
},
element: 'element',
delegate: 'img'
}
}
Does anyone know how to get the parent store of the selected Item? All the gets returned on the listener is the image and dom elements. Thanks in advance!

Try using itemTap listener, it will give you reference to the list.
I use it like this:
listeners: {
itemtap: function (list, index, element, record)
{
/* Put your logic here*/
}
}
More details can be found here: http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.DataView-event-itemtap

Develop Reference

JavaScript is the programming language of the Web.

ExtJS 4.2.1 - add textfield to an XTemplate - javascript

Related

jQuery add dynamic content from one element to another element

MagicSuggest: redirect after choosing item

AngularJS click to edit fields such as dropdown

Create HTML table in Javascript with JSON or jQuery

Getting store record of list item when selecting a pic within the list

Categories

Resources