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);
});
});
}
Related
Below is the code sample i'm trying to add a onclick function, but it seems not working as expected. The aim is to take the div tag text value and put it in a variable or return it through a func like myFunction I also tried adding listeners but don't know how it works . As its a template its hard to debug. and onclick event or call hierarchy is not easy to find. How to tackle it with simple javascript?
var resultTmpl = '<div id="group_header_{locationName}" class="current_list_audit_location expcol_{locationName:removeSpaces}" style="display:none;">'+
'<tpl for="pickslipid">' +
'<div class="audit_stage_list" style="margin-top: 6px !important;">' +
'<div class="orderpickingpicklistimageurlStage margin-top"></div>' +
'<div style="float:left;">' +
'<div class="orderpickingpicklistStagedesc orderpickingpicklistStagedesc2" id={pickupSlipId} onclick="myfunction()" > {pickupSlipId}</div></div>' +
'<div class="order_pick_right_stage_count_main_group_list audit_stage_pickup_date_list">' +
'<div>Pickup Date: {pickupDate}</div>' +
'</div>' +
'</div>' +
'</tpl>';
// pass the root node of the data object
Ext.define('sif.view.mapping.templates.EX04AuditStagingTpl', {
extend: "Ext.XTemplate",
html: resultTmpl,
myfunction : function(){
return document.getElementByClass("orderpickingpicklistStagedesc orderpickingpicklistStagedesc2").value;
},
constructor: function() {
console.log(resultTmpl);
return this.callParent([this.html]);
}
});
Ext.util.Format.removeSpaces = function(value) {
return !value ? value : String(value).replaceAll(" ", "_");
};
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
};
The above code is called from another class EX04AuditStagingLocation as given below:
var ex04AuditStagingList = Ext.create('sif.view.mapping.templates.EX04AuditStagingTpl');
var ex04AuditStageItems = {
xtype: 'panel',
width: '100%',
height: '100%',
cls: 'my-panel',
ui: 'plain',
itemId: 'ex04showdetailspanel',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'list',
cls: 'current_page_cycle_count',
store: 'AuditStagingStore',
itemTpl: ex04AuditStagingList,
itemHeight: '100%',
height: '100%',
emptyText: '<p id="empty-text" style="text-align:center; left: 25px;">' + PhoneTopUtil.getLocaleString(1280040) + '</p>',
grouped: true,
zIndex: 10,
pinHeaders: true,
style: 'font-family: RobotoRegular;',
loadingText: "",
itemId: 'ex04AuditStageList',
id: 'ex04AuditStageList',
listeners: {
painted: function(element, ths) {
SifUtils.customImageLoad(element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
refresh: function(element, options) {
SifUtils.customImageLoad(element.element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
itemtap: function(list, index, target, record) {
AuditOrMoveUtil.controller.onAmMoveAction(list, null, null, record);
},
}
}
I am using the below code -
afterListeners: function(thisEl, eOpts) {
sliderSprite = Ext.create('Ext.draw.sprite.Rect', {
width: spriteWidth, // half year width height : 20, x : 16, y : 0, draggable : true, floatable : true, 'stroke-width' : 2, fill : '#FCE5C5', stroke : '#C6B395' });
sliderSprite.show(true);
thisEl.getSurface().add(sliderSprite);
alert("before source");
new Ext.drag.Source({
element: sliderSprite,
constrain: {
// Drag only horizontal in 30px increments
horizontal: true, // snap: { // y: 30 // }
},
onDragMove: function() {
alert("inside source");
spriteHighlighter.remove();
me.onDragSprite(e, this, chartWidth, spriteWidth);
},
onDragEnd: function() {
me.refreshCharts(xPlots, bigChart, sliderSprite, firstYear, lastYear, chartWidth);
}
});
alert("outside source");
},
}
}
Now, the issue is, control doesn't go inside the Ext.drag.Source(). I get 2 alert messages ,before source and outside source. and because it doesn't go inside Ext.drag.Source().
The drag-able functionality of the element is not working. What should I do ?
First you need to be clear on which component you want to use. After that you need to put afterrender event on that component and inside of that event you can use Ext.drag.Source.
In this FIDDLE, I have created a demo using button and Ext.drag.Source.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var buttons = [],
rendomColor = () => {
return "#" + ((1 << 24) * Math.random() | 0).toString(16);
};
for (var i = 0; i < 10; i++) {
buttons.push({
text: `Button ${i+1}`,
margin: 10,
style: `background:${rendomColor()}`
});
}
Ext.create({
xtype: 'panel',
height: window.innerHeight,
title: 'Ext.drag.Source Example',
defaults: {
xtype: 'button'
},
items: buttons,
renderTo: Ext.getBody(),
listeners: {
afterrender: function (panel) {
panel.items.items.forEach(item => {
new Ext.drag.Source({
element: item.el,
constrain: {
// Drag only vertically in 30px increments
//vertical: true,
snap: {
y: 1,
x: 1
}
}
})
})
}
}
});
}
});
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.
I'm trying to add a custom renderer to Bryntum Ext Gantt chart.
I have dates which are being shown in the local timezone, but I wish to show them in the UTC date because this is what the datasource is using to present the user with date (it's agnostic of browser time-zone) in the source application.
The post here led me in the right direction (seems to be what I need based on my tests): Why does ExtJS subtract a day when formatting a date?
How do I implement linked solution into a custom renderer?
I tried this and the column was blank:
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: function (v, m, r) {
return Ext.util.Format.date(Ext.Date.parse(v, "Y-m-d"), "m-d-Y");
}
}
Also tried this and the column was blank:
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: function (v) {
var dt = Ext.Date.parse(v, "Y-m-d");
Ext.util.Format.date(dt, "m-d-Y");
return dt;
}
}
With this format, it shows the date in local timezone (incorrect unless set to UTC).
{
xtype:'enddatecolumn',
dataIndex: 'EndDate',
sortable: false,
text: 'End'
}
Bryntum Column Example
columns : [
{
xtype : 'treecolumn',
header: 'Tasks',
sortable: true,
dataIndex: 'Name',
width: 200,
field: {
allowBlank: false
},
renderer : function(v, meta, r) {
if (!r.data.leaf) meta.tdCls = 'sch-gantt-parent-cell';
return v;
}
},
{
xtype : 'startdatecolumn'
},
{
//hidden : true,
xtype : 'enddatecolumn'
},
Fixed using this function:
function niceDate (v, m, r) {
var dt = padStr(1 + v.getMonth()) +
'-' +
padStr(v.getDate()) +
'-' +
padStr(v.getFullYear());
return dt;
}
function padStr(i) {
return (i < 10) ? "0" + i : "" + i;
}
and in the column renderer :
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: niceDate
}
When parsing the xml, I use a switch function with the following for timestamps:
case 'timestamp':
if(!empty(v))
v = new Date(parseInt(v));
break;
This seems to reliably feed a "date" object to ext.js and the column is rendered to match our sources date formatting using the renderer.
I am working on an Extjs portal example and downloaded the example from extjs4-mvc-portal on GitHub.
I have successfully integrated in Eclipse with Tomcat and added XML grid panel. I want to add a "livesearchpanel" similar to this Live Search Grid Example.
This example is split in different sections like store, portlet and I'm confused where to add the CSS files and JavaScript files to integrate livesearchpanel.
When I added in the portlet section the following error occurred
Failed to load resource: the server responded with a status of 404 (Not Found)
Ext.define('ExtMVC.view.portlet.livegrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.livegrid',
height: 300,
/**
* Custom function used for column renderer
* #param {Object} val
*/
change: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
/**
* Custom function used for column renderer
* #param {Object} val
*/
pctChange: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
},
initComponent: function(){
var store = Ext.create('ExtMVC.store.lives');
Ext.apply(this, {
height: this.height,
store: store,
stripeRows: true,
columnLines: true,
columns: [{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change',
// renderer: change
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange',
//renderer: pctChange
},
{
xtype : 'datecolumn',
text : 'Last Updated',
width : 85,
sortable : true,
dataIndex: 'lastChange'
}]
});
this.callParent(arguments);
}
});
I've tried EXT.ux.LiveSearchGridPanel.js in src section of extjs/src/grid/, change extend: 'Ext.grid.LiveSearchGridPanel', also `extend: 'Ext.grid.Ext.ux.LiveSearchGridPanel',
Ok problem is solved..........
i just involved ux folder in to extjs/src.
thanks