extJs livesearchpanel for data grid inside the extJs portal - javascript

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

Related

headerclick event not working on gridpanel using extjs

I'm trying to invoke headerclick event using ext js listener but unable to invoke.
here is my code:
var myGrid = Ext.Create('Ext.grid.Panel', {
renderTo: 'shrGrid',
renderTo: myGrid,
store: myStore, //JSON object
columns: myGrid.columns, //JSON object
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
alert("cell clicked");
},
headerclick function (shrGrid, columns , e, t, eOpts) {
alert("header clicked");
}
}
}
});
Here the cellclick is being invoked without any issue.
but headerclick is neither being invoked neither nor giving any error.
I just used headerclick here only. pls help me I missed anything or give me some example link.
Your myGrid.columns probably looks something like this:
columns : [{
header : 'Name',
dataIndex : 'name',
sortable : false,
field : {
allowBlank : false
}
}, {
id: 'headerid', //Set your id here
header : 'Description',
dataIndex : 'description',
sortable : false,
field : {}
}, {
header : 'Order',
width : 40,
dataIndex : 'sortOrder',
hidden : true
}, {
header : '',
dataIndex : 'id',
width : 30,
fixed : true,
sortable : false,
hideable : false,
align : 'center',
renderer : function (v, p, r) {
return "<img alt='Delete this record' src='images/icons/delete.gif'>";
}
}],
If you do that you can access the id and add a listener like this
var myGrid = Ext.Create('Ext.grid.Panel', {
renderTo: 'shrGrid',
renderTo: myGrid,
store: myStore, //JSON object
columns: myGrid.columns, //JSON object
viewConfig: {
listeners: {
render: function(component) {
Ext.get('headerid').on('click',function() { //reference the id you defined for the column header
alert('header clicked');
});
}
}
}
});

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.

ExtJs 3.4 : Enable a button on grid row selection

I have an Ext grid panel as following.
var plannedGrid = new Ext.grid.GridPanel({
store : plannedGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170,
renderer : function(value, metaData, record, rowIndex,
colIndex, store) {
var refColor = record.data.tourTypeColor;
//console.log(record);
metaData.attr = 'style="background-color:' + refColor + ';"';
return record.get('locationName');
}
}, {
xtype : 'actioncolumn',
header : "GPS",
items : [ {
icon : 'images/gps.jpg',
tooltop : 'Get GPS',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('locationName'));
}
} ]
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
}, {
header : "",
sortable : true,
dataIndex : 'colorCode',
width : 30
} ]),
sm : selectModel,
//width : 435,
height : 400,
//autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid'/*,
listener : {
selectionchange : function() {
Ext.getCmp('btnHold').enable();
}
}*/
//renderTo : document.body
});
The data of this grid panel are coming from another grid. And also I have a button in a button group as following.
{
text : 'Hold Drop/Pick',
id : 'btnHold',
iconCls : 'add',
width : 120,
// textAlign: 'center',
//style : 'margin:5px',
style : {
textAlign: 'center',
margin : '5px'
},
disabled : true
}
This button is disabled. What I want is, I need to enable this button when user clicks a row of the grid panel.
I am using ExtJs 3.4.
How should I do that ?
Kind regards
Use 'rowclick' listener (for grid):
listeners: {
rowclick: function(grid, idx){
Ext.getCmp('btnHold').enable();
}
}
P.S. It's very bad when you use 'id' parameter in your components. Try to remove it and get access to button by using another components. Sorry for my english, guys!

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

Custom Renderer in Ext-js - Bryntum/ExtJs UTC Date Issue

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.

Categories