I retrieve images against specific id and display as data view using ExtJS 4. Now I need to call function by dbl clicking the image.
Ext.define('${pkgName}.v02x003001.SV02X00300102', {
extend: 'Ext.view.View',
alias: 'widget.sv02x00300102',
id: 'images-view',
autoScroll: true,
trackOver: true,
multiSelect: true,
height: 180,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display',
prepareData: function (data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.name, 15),
sizeString: Ext.util.Format.fileSize(data.size),
dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
});
return data;
},
initComponent: function () {
var me = this;
var member = Ext.getCmp('member-sv02x00300104').getValue();
me.store = 'S02X003001';
me.tpl = [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb">
<img src="${createLink(mapping:'
img ', params:[])}/{id}/100/100/" title="{id}">
</div>',
'<span class="x-editable">{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'];
me.callParent(arguments);
}
});
Does this code suits your needs (doc here)?
listeners: {
itemdblclick: function (view, record, item, index, e) {
if (Ext.get(e.getTarget()).is('img')) {
alert('you double clicked an image');
}
}
}
Related
I've added a custom button to datatables, I'm trying to add addEventListener to that button. Here is my code.
constructor(public router: Router) { }
#ViewChild(DataTableDirective)
datatableElement: DataTableDirective;
message = '';
title = 'angulardatatables';
#ViewChild('dataTable') table: { nativeElement: any; };
dataTable: any;
dtOptions: DataTables.Settings = {};
// someClickhandler(info: any): void {
// this.message = info.number + '-' + info.assignedto + '-' + info.company;
// console.log(this.message);
// }
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 15,
processing: true,
responsive: true,
autoWidth: false,
dom: 'Bfrtip',
'ajax': {
url: 'http://localhost:8080/incident-updated',
type: 'GET',
dataSrc: 'result',
},
columns: [
{
title: 'Incident',
data: 'number'
},
{
title: 'Product',
data: 'u_product'
},
{
title: 'Status',
data: 'state'
},
{
title: 'Created By',
data: 'sys_created_by'
},
{
title: 'Group',
data: 'assignment_group'
},
{
title: 'Category',
data: 'u_category'
},
{
title: 'Updated on',
data: 'sys_updated_on'
},
{
title: 'Action',
data: null,
// render: function(data, type, full) {
// return '<a class="btn btn-primary btn-sm" style="color: #fff;" id="view" (click)="view($event)">View</a>';
// }
defaultContent: '<button class="btn btn-sm btn-primary" onClick="viewer();" (click)="viewer(event)"> View </button>'
}
]
};
this.dataTable = $(this.table.nativeElement);
console.log('table is ==>', this.dataTable);
$('#view tbody').on('click', 'button', function () {
const data = this.dataTable.row($(this).parents('tr').data);
alert('Data is ==>' + data);
});
}
ngAfterViewInit(): void {
// Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
// Add 'implements AfterViewInit' to the class.
// this.viewer.addEventListener('click', function() {
// event.stopPropagation();
// // this.router.navigate(['/event-viewer']);
// alert('shdfiskludhzj');
// });
}
viewer() {
alert('sdjfhsklzdjh');
}
// viewer(event: any) {
// event.stopPropagation();
// this.router.navigate(['/event-viewer']);
// }
// buttonInRowClick(event: any): void {
// event.stopPropagation();
// console.log('Button in the row clicked.');
// this.router.navigate(['/event-viewer']);
// }
// wholeRowClick(): void {
// console.log('Whole row clicked.');
// }
It returns the error:
issues:1 Uncaught ReferenceError: viewer is not defined
at HTMLButtonElement.onclick (issues:1)
onclick
I've tried several other methods, none of them are working. How to fix this?
Add this function to your component code.
#HostListener('click')
viewer() {
// Perform your opration here
}
or
#HostListener('document:click')
viewer() {
// Perform your operation
}
There is some case when a popup shouldn't be closed by clicking the background. After googling here and there still no success on that. This is the code:
jQuery('.magnific_link').magnificPopup({
type: "iframe",
fixedContentPos: true,
closeOnBgClick: false,
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" style="background:white;" frameborder="0" allowfullscreen></iframe>'+
'</div>',
patterns: {
test: {
index: '',
id: function (url) {
var m = url.match(/^(.*)/);
return m === undefined ? null : m[1];
},
src: "%id%"
}
}
}
});
Any idea what is going wrong? Thanks
I am new to knockout and MVC. I wanted to add a link button(delete) which will delete the record that is displayed in my knockout grid. I really dont have any idea how to achieve this. I have the following code that displays the record using the KO grid. Now I want to add a link button in the grid to delete the record
CONTROLLER:
public JsonResult GetResult()
{
GetResultRequest req = new GetResultRequest() { AcctID=57345, PartyType=2 };
var getResultInfo = WSHelper.WsService.GetResults(req);
return Json(getResultInfo.Signers, JsonRequestBehavior.AllowGet);
}
VIEW:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/SafeHarborBundle")
<script src="~/Scripts/koGrid-2.1.1.js"></script>
<script type="text/javascript">
var dataViewModel = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)));
<div id="gridSigner">
<div id="grids123" style="height: 700px; width: 650px;"
data-bind="koGrid: {
data: gridItems, columnDefs: [{ field: 'AcctID', displayName: 'AcctID', width: '150' },
{ field: 'FName', displayName: 'First Name', width: '150' },
{ field: 'LName', displayName: 'Last Name', width: '150' },
{ field: 'AliasFName', displayName: 'Alias First Name', width: '150' },
{ field: 'SSN', displayName: 'AcctID', width: '150' }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: false,
multiSelect: false
}">
JQUERY FILE:
$(document).ready(function () {
loadApplication(dataViewModel);
ko.applyBindings(Gridviews, document.getElementById('gridSigner'));
});
function loadApplication(initialData) {
self = this;
self.ViewModel = initialData;
self.BranchOptions = ko.observableArray([]);
self.AcctTypeOptions = ko.observableArray([]);
self.OriginationOptions = ko.observableArray([]);
self.Message = ko.observable();
SearchSignerData();
ko.applyBindings(self, document.getElementById('main-search'));
}
SearchSignerData = function () {
$.ajax({
type: "Get",
url: "/SafeHarborApp/GetResult",
contentType: 'application/json',
async: true,
cache: false,
beforeSend: function () {
},
success: function (result) {
alert(result[0].AcctID.toString());
if (result.length != 0) {
$.each(result, function (i, item) {
Gridviews.gridItems.push(item);
});
}
else {
Gridviews.gridItems.removeAll();
alert("No Records found");
}
},
complete: function () {
},
error: function (xhr, textStatus, errorThrown) {
//alert(jqXHR.responseText);
var title = xhr.responseText.split("<title>")[1].split("</title>")[0];
alert(title);
// Handle error.
}
});
}
The above code works fine in displaying the record in the KO grid. However, I dont know how to add a delete button in the displayed KO grid now. I tried searching for it but was not able to find anything useful that will get me the result. Please help...
Use CellTemplate in ko grid.plese see code below
<script type="text/javascript">
self.NoOfAccountColumn = '<a data-bind="value: $parent.entity" onclick="Popup(this.value)">No Of Account</a>';
self.Delete = '<a data-bind="value: $parent.entity" onclick="deleteRow(this.value)">Delete</a>';
function Popup(rowItem) {
alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : NoOfAccount Clicked');
}
function deleteRow(rowItem) {
alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : Delete Clicked');
}
function isDoubleClick(oldValue, currentValue) {
var responseTime = 400;
if ((currentValue - oldValue) <= responseTime) {
self.clickTime = currentValue;
return true;
}
self.clickTime = currentValue;
return false;
};
</script>
<script src="~/Scripts/Packages/koGrid-2.1.1.js"></script>
<div id="disp">
<div id="grid" style="height: 200px; width: 600px"
data-bind="koGrid: {
data: BranchOptions,
afterSelectionChange: function (rowItem, event) {
if (event.type == 'click' && isDoubleClick(self.clickTime, event.timeStamp)) {
alert(rowItem.entity.ClientName + ' : Row DoubleClick');
}
},
columnDefs: [{ field: 'ClientName', displayName: 'Client Name', width: '*', },
{ field: 'AffinityNum', displayName: 'Affinity Num', width: '*', cellTemplate: NoOfAccountColumn },
{ field: 'AffinityID', displayName: 'Affinity ID', width: '*', cellTemplate: Delete }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: true,
multiSelect: false
}">
</div>
</div>
I have a dataview that is populated using a store and template so the process is dynamic. I then want to make each of the container Divs (see template) draggable and use the following code. I would have expected just the container divs(image + name) to be draggable but instead the whole DataView is draggable. Was wondering what i am doing wrong?
Ext.define('MyApp.view.allImages', { extend: 'Ext.dataview.DataView',
xtype: 'cams',
requires: [
'MyApp.store.images'
],
config: {
title: 'Test',
store: 'images',
baseCls: 'camera-list',
itemTpl: [
'<div id="camimage">',
'<div class="image" style="background-image:url({fullimage})"></div>',
'<div class="name">{address}</div>',
'</div>'
].join(''),
records: null,
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Gainesville'
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'button',
text: 'Path1'
},
{
xtype: 'button',
text: 'Path2'
},
{
xtype: 'button',
text: 'Path3'
}
]
}
]
},
initialize: function () {
this.callParent(arguments);
//get the divs that we want to make draggable
var images = this.element.select("div[id='camimage']");
Ext.each(images.elements, function (imageElement) {
imageElement.draggable = true;
});
}
It is a problem with the life cicle of the component, you must wait until the dataview has rendered, so you can access the elements.
initialize: function () {
this.callParent(arguments);
var me = this;
//get the divs that we want to make draggable
//
setTimeout(function (argument) {
var images = me.element.select("div.image-dataview-item");
Ext.each(images.elements, function (imageElement) {
var draggable = new Ext.util.Draggable({
element: imageElement,
listeners: {
dragstart: function(self, e, startX, startY) {
console.log("test dragStart[" + startX + ":" + startY + "]");
},
drag: function(self, e, newX, newY) {
console.log("test drag[" + newX + ":" + newY + "]");
},
dragend: function(self, e, endX, endY) {
console.log("test dragend[" + endX + ":" + endY + "]");
}
}
});
draggable.setConstraint({
min: { x: -Infinity, y: -Infinity },
max: { x: Infinity, y: Infinity }
});
draggable.group = 'base';// Default group for droppable
draggable.revert = true;
});
},1000);
}
You are using a hardcoded element ID on an item template. You will end up with multiple elements with the same ID. You should change camimage from an id to a class, or if you are really attached to your ID use the record identifier so each div ID is unique.
I am working on a dojo grid, which is the new dojo dgrid but i have the dgrid working by calling the id on a html markup file but i need to create a widget like thing that will have my grid in it and be able to access it via the html using the dojotype.
I have spend like three days working on that, but for some reason my grid wouldn't show if i declare it within a widget i created.
below is my code sample:
require([
"dojo/_base/declare", "dojo/dom-construct", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dgrid/Grid", "dgrid/Keyboard",
"dgrid/Selection","dojo/text!./templates/dumHTML.html", "dojo/domReady!"
], function(declare, domConstruct, parser, ready, _WidgetBase, _TemplatedMixin, Grid, Keyboard, Selection, template) {
declare("Grid", [_WidgetBase, _TemplatedMixin], {
templateString: template,
widgetsInTemplate: true,
postCreate: function() {
var self = this;
this.inherited(arguments);
this._showGrid();
},
_showGrid: function() {
//json data string
var gridData =[
{'id': '10', 'filename':'budget.pdf','icon':'pdf'},
{'id': '20', 'filename':'thevampirediary.avi','icon':'xsl'},
{'id': '30', 'filename':'budget2.xsl','icon':'xsl'},
{'id': '40', 'filename':'budget3.doc','icon':'doc'},
{'id': '50', 'filename':'thevampirediary.avi','icon':'xsl'}
];
// Create a new constructor by mixing in the components
var DGrid = declare([Grid, Keyboard, Selection]);
var grid = new DGrid( {
columns: {
ID: {
label: " ",
field: "id",
hidden: true,
sortable: false,
formatter: function(id) {
return '<div style="visibility: hidden>'+id+' </div>';
}
},
filename: {
field: "filename",
label: "File name",
sortable: true,
formatter: function(filename) {
return '<div style="float:left ">'+filename+' </div>';
}
},
icon: {
field: "icon",
label:" ",
sortable: false,
formatter: function(icon) {
return '<img src="resources/' + icon + '.png" width="20px" hieght="20px"/>';
}
}
},
// for Selection; only select a single row at a time
selectionMode: "single",
// for Keyboard; allow only row-level keyboard navigation
cellNavigation: true
}, "grid");
grid.renderArray(gridData);
}
});
ready( function() {
// Call the parser manually so it runs after our widget is defined,
// and page has finished loading
parser.parse();
});
});
I am just a beginner of dgrid and meet the same problem. After reading this article, I resolve it. https://github.com/SitePen/dgrid/wiki/Working-with-Widgets
The solution is: mix DijitRegistry in Dgrid instance.
Here is my code. Hope it will be helpful for beginners. ModuleWithGuideBar is my custom widget(declared with TemplatedMixin, _WidgetsInTemplateMixin).
define([
"dojo/_base/declare",
"dijit/registry",
"common/widget/ModuleWithGuideBar",
"dgrid/OnDemandGrid",
"dgrid/Keyboard",
"dgrid/Selection",
"dgrid/extensions/DijitRegistry",
"dojo/store/Memory",
"dijit/layout/ContentPane"
], function (declare, registry, ModuleWithGuideBar, OnDemandGrid, Keyboard, Selection, DijitRegistry, Memory, ContentPane) {
return declare("app.management.module.event", [ModuleWithGuideBar], {
class:"module_event",
_grid:null,
postCreate:function () {
this.inherited(arguments);
var gridContainer = new ContentPane({region:'center'});
//add to data-dojo-attach-point
this.moduleContent.addChild(gridContainer);
var memoryStore = new Memory({data:[
{ first:"Bob", last:"Barker", age:89 },
{ first:"Vanna", last:"White", age:55 },
{ first:"Pat", last:"Sajak", age:65 }
]});
this._grid = new declare([OnDemandGrid, Keyboard, Selection, DijitRegistry])({
columns:{
first:{ label:"first" },
last:{ label:"last" },
age:{ label:"age" }
},
store:memoryStore
});
gridContainer.addChild(this._grid);
}
});
});