We Keep Coding

Properties not displaying from listConfig/getInnerTpl to comboBox

I'm successfully retrieving data from the server, but in processing the response, I can't seem to access certain properties of each object. No clue what the problem is.
My combobox successfully loads and displays each item, including the title, genre, and year. I can't seem to display the other properties.
I realize that each one-word property (like title) is displaying, while multi-word properties (like item_id) are not, which is why I tried using both itemId and item_id, but no luck. Any thoughts?
Search.js (search view)
I've been playing with the syntax in the getInnerTpl function - I know it looks a little strange.
// Search results view
Ext.define('LibApp.view.librarian.actions.Search', {
extend: 'Ext.form.Panel',
alias: 'widget.librariansearch',
id: 'librariansearch',
require: [
'Ext.form.field.Text',
'Ext.Button',
'Ext.layout.container.Anchor',
'Ext.form.field.ComboBox'
],
title: 'Search Results',
layout: {
type: 'anchor'
},
defaults: {
margin: '10px'
},
autoScroll: true,
items: [
{
xtype: 'combo',
id: 'searchcombo',
store: 'Items',
displayField: 'title',
anyMatch: true,
typeAhead: true,
typeAheadDelay: 0,
hideLabel: true,
enableKeyEvents: true,
hideTrigger:true,
anchor: '100%',
margin: '10px',
emptyText: 'Enter an Item Title',
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching items found.',
// Custom rendering template for each item
getInnerTpl: function(displayField) {
return '<span><b>{title}</b></span>' +
'<br>displayField: {displayField}' +
'<br>itemType: {itemType} | item_type: {item_type} | itemId: {itemId} | item_id: {item_id}' +
'<br>Item Type: {itemType} | Quantity Available: {quantityAvailable} | Year: {year}' +
'<br>Item ID: {itemId} | Genre: {genre} | Call Number: {callNumber}';
},
listeners: {
// on itemclick, open window showing item details
itemclick: function(list, record) {
var resWin = Ext.create('Ext.window.Window', {
x: 100,
renderTo: 'librariancenter',
title:'Item Details',
height: 200,
width: 400,
layout: 'fit',
html: '<div><h3> ' + record.title + '</h3>' +
' Item Type: ' + record.itemType + ' | Quantity Available: ' + record.quantityAvailable + '<br>' +
' Genre: ' + record.genre + ' | Call Number: ' + record.callNumber + '</div>',
buttons: [
{
text: 'Reserve Item',
handler: function(button, evt){
// Show reserveitem view
list.up('librariancenter').getLayout().setActiveItem('reserveitem');
// Autofill fields
Ext.getCmp("reserveitem").getForm().findField("item_id").setValue(record.get("item_id"));
Ext.getCmp("reserveitem").getForm().findField("title").setValue(record.get("title"));
// Close item detail window
resWin.close();
}
},
],
});
resWin.show();
}
},
pageSize: 10
} // end listConfig
},
{
xtype: 'component',
style: 'margin-top:10px',
html: 'Live search requires a minimum of 4 characters.',
padding: '10px'
}
]
});
Screenshot of Results (in the console below, you can see the response)

FYI - found the issue. My syntax in the model followed the pattern multiple_word rather than standard camelCase, causing a mismatch. Changing the fields in the model solved the problem.

document.Body ComponentQuery

I am using an awesome html2canvas function but I have a noob question. How do I change the field it is capturing from document.body to a specific panel?
In short i need to change document.body to the panel I want to capture, I just don't know the code to get the panel I want.
I have tried Ext.ComponentQuery.query('#testPanel') without any success.
testButtonClicked: function (btn) {
html2canvas(document.body, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
//width: 500,
height: 800,
resizable: true,
autoScroll: true,
preventBodyReset: true,
html: '<img src="' + canvas.toDataURL("image/png") + '" height="800"/>'
}).show();
}
});

You want getEl().dom. Here's a standalone example (tested with Ext 4.2.x):
Ext.onReady(function () {
Ext.define('Panel', {
extend: 'Ext.panel.Panel',
frame: true,
title: 'Test Panel',
width: 300,
height: 300,
onClick: function () {
html2canvas(this.getEl().dom, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
width: 300,
height: 300,
html: '<img src="' + canvas.toDataURL("image/png") + '"/>'
}).show();
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'datepicker'
},
{
xtype: 'button',
text: 'CAPTURE THIS PANEL',
handler: this.onClick,
scope: this
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('Panel', {
renderTo: Ext.getBody()
});
});

html2canvas() appears to require a DOM element. Ext.ComponentQuery.query() returns an array of matched elements, so if you use precisely the code you provided, it won't work since the array returned from query() is obviously not a DOM element.
So if query() is actually returning something, you could use the first position:
Ext.ComponentQuery.query("#testPanel")[0]
Or, since you seem to have an ID assigned to the panel, you could simply use getCmp(), which will return only the element which is matched, and not an array:
Ext.getCmp( "testPanel" )

Dojo dgrid launch a LightBoxNano popup when clicking a cell

I would like to launch a LightBoxNano image popup when clicking a cell in a dgrid.
How can I achieve this?
Thanks!
Here is some code:
var columns = [
{
label: 'Picture',
field: 'filename',
formatter: function(filename){
return '<div class="icon" style="background-image:url(/images/client/thumbnails/' + filename + ');"><a data-dojo-type="dojox.image.LightboxNano" class="iconlink" href="/images/client/' + filename + '"> </a></div>';
}
},
Editor({label: 'Type', field: 'filetype', widgetArgs: {store: filetypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect),
Editor({label: 'Subtype', field: 'filesubtype', widgetArgs: {store: filesubtypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect)
];
Do I miss something??
Thanks!

So, I used a Dialog insted of a Lightboxnano.
imageList.on(".dgrid-content .iconlink:click", function (evt) {
evt.preventDefault();
var data = dojo.getAttr(this, "href");
var picdial = new Dialog({
title: "Pic: " + data.substr(15),
content: '<img src="' + data + '">'
});
picdial.show();
});

How to determine what cell has been clicked?

I am new to JavaScript and I am having to use ExtJS 3.4. I have created a simple tree with 3 columns. I would like to know either what cell was selected, or even, just what row and column were selected.
I am just using the example that Sencha uses at http://dev.sencha.com/deploy/ext-3.4.0/examples/treegrid/treegrid.html :
var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
dataUrl: 'treegrid-data.json'
});
Is it possible to do this in ExtJS 3.4? I can get the node but I do not see where it is telling me what cell or column or row was selected.
Any help would be greatly appreciated!

you need to attach listeners e.g.
listeners: {
afterRender: function(p) {
p.body.on('click', function() { // Function tapping clicks on Panel
alert(p.getTargetEl().dom.innerHTML);
});
});
}

easy ui with null data bug

I am using easyui for my application. I need to show empty grids for some reasons and I send null data to easyui. However it doesn't show empty grid but a sort number and a button at the first column.
Here is my code:
$('#GRID_PT_TARIFF_CONTRACT').datagrid({
singleSelect: true,
remoteSort: false,
fitcolumns: true,
columns: [[
{ field: 'action', title: 'İşlem', width: (_width * 0.08).toString(), sortable: false, formatter: function (value, row, index) {
var button = "";
button = '<input type="button" value="Tarifeyi aç" class="BttnWindow" onclick="DESIGN.OPEN_SEGMENT_FRAME_BY_BUTTON(\'' + row.TariffId+ '\',\'' + row.TariffName + '\',\'' + row.ContractName + '\',\'' + row.Supplier + '\') "/>';
return button;
}
},
{ field: 'TariffName', title: 'Taslak Tarife Tanımı', width: '100%', sortable: true },
{ field: 'TariffStat', title: 'Taslak Tarife Durumu', width: '100%', sortable: true },
{ field: 'Supplier', title: 'Tedarikçi', width: '100%', sortable: true },
{ field: 'ContractName', title: 'Sözleşme Tanımı', width: '100%', sortable: true },
{ field: 'ContractStat', title: 'Sözleşme Durumu', width: '100%', sortable: true },
{ field: 'StartDate', title: 'Başlangıç Tarihi', width: '100%', sortable: true },
{ field: 'EndDate', title: 'Bitiş Tarihi', width: '100%', sortable: true },
{ field: 'NoticePeriod', title: 'İhbar Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
var val;
if (row.TariffId != null) {
val = value + ' Gün';
}
return val;
}
},
{ field: 'ValidityPeriod', title: 'Geçerilik Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
var val;
if (row.TariffId != null) {
val = value + ' Ay';
}
return val;
}
}
]],
onClickRow: function () {
var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
if (row.TariffId != null) {
GLOBALS.SelectedTariffId = row.TariffId.toString();
//DEGIGN.ROWCLICKEVENT
}
},
onDblClickRow: function () {
var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
if (row.TariffId != null) {
GLOBALS.SelectedTariffId = row.TariffId.toString();
GLOBALS.SelectedTariffName = row.TariffName.toString();
GLOBALS.SelectedContractName = row.ContractName.toString();
GLOBALS.SelectedSupplier = row.Supplier.toString();
DESIGN.CREATE_TARIFF_WIN(row.TariffId);
}
},
onLoadSuccess: function (data) {
var panel = $(this).closest(".datagrid");
var dg = $(this);
panel.find("div.datagrid-view2 > div.datagrid-body tr:first > td[field]").each(function (k, v) {
var bodyCol = $(v);
var field = bodyCol.attr("field");
var headerCol = panel.find("div.datagrid-view2 > div.datagrid-header tr:first > td[field='" + field + "']");
var bodyContent = bodyCol.children(":first");
var headerContent = headerCol.children(":first");
var content = null;
if (bodyCol.width() > headerCol.width()) {
content = bodyCol.children(":first");
} else {
content = headerCol.children(":first");
}
var col = dg.datagrid("getColumnOption", field);
col.width = content.outerWidth();
col.boxWidth = $.boxModel == true ? content.width() : content.outerWidth();
bodyContent.width(col.boxWidth);
headerContent.width(col.boxWidth);
});
dg.datagrid("fitColumns");
dg.datagrid("fixColumnSize");
}
});
And here is the image:

This topic will help you and then I changed extension code with;
var myview = $.extend({}, $.fn.datagrid.defaults.view, {
onAfterRender: function (target) {
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
var opts = $(target).datagrid('options');
var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
vc.children('div.datagrid-empty').remove();
if ($(target).datagrid('getRows').length <= 1) {
if ($(target).datagrid('getRows')[0].Id == null) {
var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
d.css({
position: 'absolute',
left: 0,
top: 25,
height: 25,
width: '100%',
textAlign: 'center',
background: 'snow'
});
}
}
}
});