I had grid view in extjs, but i need to show a bar chart in each row that show a percentage of some values. How can achieve this in extjs? Maybe this image will help what i want to build.
One way to accomplish this is through deferred rendering of your chart. Basically you do this:
Create your grid column with a custom renderer.
In the renderer, you output a div with a known id. This div will ultimately contain your chart.
You defer a call (with Ext.defer) to a custom function, passing in this id (and any required info for your chart). This function will render your chart.
Inside that function, you create a chart and make it renderTo the element with your passed-in id.
This code approximates what you should do. You will probably want to refactor it more sensibly.
Ext.create('Ext.grid.Panel', {
height: 300,
store: main_data,
columns: [
{ text: 'name', dataIndex: 'name', sortable: true },
{ text: 'chart', renderer: function (value, meta, record) {
var id = Ext.id();
Ext.defer(function (id) {
var chart = Ext.create('Ext.chart.Chart', {
store: chart_data,
width: 200,
height: 100,
// other chart configuration...
renderTo: id
});
}, 50, undefined, [id]);
return "<div id='" + id + "'></div>";
} }
]
});
Related
I can't seem to figure out how to do this and google has been no help. I am using the ExtJS Spreadsheet model. I am trying to show the column with the row numbers, but I want to remove/hide the actual row numbers. I only want to keep the column that contain the row numbers. Any ideas on how I might go about doing this?
That should be easily done. As with every column, you have to add a custom renderer to the rownumberer column. So how do you get to that column?
For this, the spreadsheet selModel has a function getNumbererColumnConfig which you want to override. The unoverridden function from sources:
getNumbererColumnConfig: function() {
var me = this;
return {
xtype: 'rownumberer',
width: me.rowNumbererHeaderWidth,
editRenderer: ' ',
tdCls: me.rowNumbererTdCls,
cls: me.rowNumbererHeaderCls,
locked: me.hasLockedHeader
};
},
so, to override, you would do the following:
selModel: {
type: 'spreadsheet',
// Disables sorting by header click, though it will be still available via menu
columnSelect: true,
pruneRemoved: false,
extensible: 'y',
getNumbererColumnConfig: function() {
var me = this;
return {
xtype: 'rownumberer',
width: me.rowNumbererHeaderWidth,
renderer:function() { return ' '; },
editRenderer: ' ',
tdCls: me.rowNumbererTdCls,
cls: me.rowNumbererHeaderCls,
locked: me.hasLockedHeader
};
}
},
Tested in a Sencha fiddle
I have in my ExtJS 4.2.1 Application a grid with the following editable column:
text: 'Location',
dataIndex: 'LocationId',
width: 140,
renderer: function(value) {
var record = me.store.findRecord('LocationId', value);
return record.get('Description');
},
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
store: Ext.create('App.store.catalog.Location', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'LocationId',
listConfig: {
width: 250,
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function() {
return '<b>{Code}</b><br/>(<span style="font-size:0.8em;">{Description}</span>)';
}
}
}
The combo has a renderer to display the Description of the LocationId selected.
Then, my grid has the feature 'Ext.grid.plugin.CellEditing' so I can edit just that column cell.
The problem that I have is when I press the "Update" button, the combo display value returns to the original it used to have, even if the LocationId in the record has the right value.
This is my code that gets fired when the user press the "Update" button.
me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function(editor, e) {
var record = e.record;
me.setLoading('Updating...');
App.util.Ajax.request({
noMask: true,
url: '/api/catalog/UpdateEmployeeLocation',
jsonData: record.getData(),
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if (obj.success) {
// commit changes (no save just clear the dirty icon)
me.getStore().commitChanges();
}
},
callback: function() {
me.setLoading(false);
}
});
}
}
});
The record is saved correctly in my database but the combo display value is not updated with the description that corresponds to the LocationId. If I reload the store from server again then It shows correctly.
So, there is something wrong with the renderer in my column that is not updating the value after I update my record.
Any clue on how to get around this?
Thanks.
You are setting dataIndex as 'LocationId' but no where you are changing the 'LocationId', you are just changing description and updating it in rendered method. Since there no change in 'LocationId', store doesn't consider it as dirty field and hence rendered function is not getting called. One quick and dirty way could be instead of using 'LocationId', create another field in the model say 'LocationIdchangeTraker'. Use 'LocationIdchangeTraker' instead of 'LocationId' in data index. It doesn't not effect your view because you are changing the value in reneerer function. Now whenever you update the function change the value of 'LocationIdchangeTraker' as shown below.
record.set('LocationIdchangeTraker',Ext.getId());
How can I remove the icon in this actioncolumn item within its handler?
{
header: 'Activate',
xtype: 'actioncolumn',
align: 'center',
width: 30,
sortable: false,
items: [{
icon: './Scripts/extjs/examples/shared/icons/fam/accept.png',
tooltip: '',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
if (rec.get('status') == '1') { // if active, don't show icon
this.up('actioncolumn').icon = '';
}
}
...
In general, it can't - configs are applied at initialization time, and sadly the ExtJS API doesn't always provide ways to change things as easily as they are specified in configs.
In the case of an ActionColumn, you can see in the source that the icon is used to generate a renderer function in the constructor and there's no way to set it afterwards.
To dynamically decide whether to show an icon or not, you'll need to use iconCls instead, see here.
I use Grid panel. When I select the row in the grid I get the following results:
If I render the Form in 'document.body' everything is OK, and form
fields are filled.
If I, same Form start in Window panel, Form fields are empty.
When I use both, Form which is rendered in the 'document.body' is
closed, and Form fields in Window are filled.
Where I make mistake.
// Grip panel part
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, index, record) {deleteWindow.show();}
}
})
// End Grid panel part
var myForm = new Ext.form.FormPanel({
title:"Basic Form",
width:425,
frame:true,
items: [
new Ext.form.TextField({
id:"to",
fieldLabel:"To",
width:275,
allowBlank:false,
blankText:"Please enter a to address",
readOnly: true
}),
new Ext.form.TextField({
id:"subject",
fieldLabel:"Subject",
width:275,
allowBlank:false,
blankText:"Please enter a subject address",
readOnly: true
}),
],
buttons: [
{text:"Cancel"},
{text:"Save"}
]
});
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm
});
var id_test = 2; // This is only for this problem
//myForm.render(document.body); // When using this code everything is ok, and form fields are filled
myForm.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
JSON data
{success:true,results:[{"id_test":"1","to":"a","subject":"aa"}]}
I would suggest the following changes to the code:
In place of using the id property on the TextField (say, id: 'subject'), use name property (name: 'subject')
Just curious....since you are handling the rowselect event on the grid, you might want to load the selected record in the form panel rather than loading it again. If this is the case, then you may call the loadRecord() method on the form panel and pass the record object to it and then call the show() method on the window
I figured out that when load is called on form, ExtJS tries to access form dom element to determine form method. I've found 2 solutions:
Add method to the form config
Load data to form after window is showed
Here is code for second solution:
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm,
listeners: {
show: function() {
var form = this.items.get(0);
form.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
}
}
});
deleteWindow.show();
I'm using ExtJS's GridPanel library to render a list of rows that have a CheckboxModel for selections. There is also a summary row that adds up all of the selected data and displays it in a row at the bottom of the GridPanel. The code for this is:
var sm = Ext.create('Ext.selection.CheckboxModel', {
/////////
// With large number of rows ... this takes forever
/////////
grid.getView().refresh();
/////////
/////////
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
// Do stuff
}
}
});
var selSumFn = function(column, selModel){
return function(){
var records = selModel.getSelection(),
result = 0;
//console.log("records:" + records.length);
Ext.each(records, function(record){
result += record.get(column) * 1;
});
return result;
};
};
var grid = Ext.create('Ext.grid.Panel', {
autoScroll:true,
features: [{
ftype: 'summary'
}],
store: store,
defaults: {
sortable:true
},
selModel: sm,
columns: [
{header: 'Column 1', width: 100, dataIndex: 'col1', summaryType: selSumFn('col1', sm)},
{header: 'Column 2', width: 100, dataIndex: 'col2', summaryType: selSumFn('col2', sm)}
],
width: 730,
height: 400 ,
title: 'Data',
renderTo: 'data-div',
viewConfig: {
stripeRows: true
},
listeners: {'beforerender' : {fn:function(){this.store.load();}}}
});
Is there any way to only refresh the summaryrow feature and not the entire view? Refreshing the view was the only way I could find to refresh the summary row when updates were made to checkbox selections of the GridPanel.
There is no support for this in Ext 4.0.2a. The grid view builds a single view template with features adding or modifying this template via a multitude of defined hooks. The result is a single template instance that cannot be easily dissected.
The best solution I found is to rebuild the template fragment that renders the summary row mimicking what the grid view is doing during the template construction process. Then overwrite the existing DOM for the summary row with a freshly rendered version.
I have created a patch (as an override) that adds a refresh() method to the Summary feature.
The code turned out to be surprisingly slick.
Ext.require('Ext.grid.feature.Summary', function() {
Ext.override(Ext.grid.feature.Summary, {
refresh: function() {
if(this.view.rendered) {
var tpl = Ext.create(
'Ext.XTemplate',
'{[this.printSummaryRow()]}',
this.getFragmentTpl()
);
tpl.overwrite(this.getRowEl(), {});
}
},
getRowEl: function() {
return this.view.el.down('tr.x-grid-row-summary');
}
});
});
In your selectionchange listener:
selectionchange: function(selectionModel, selectedRecords, options) {
grid.getView().getFeature(0).refresh();
}
See this JsFiddle for a live demo.
Of course this might break in future versions of Ext. However, it could turn out to be quite robust since it delegates most of its work to existing methods.
If you are using GroupingSummary, you need to use this instead:
refresh:function(){
var rowEls = this.view.el.query('tr.x-grid-row-summary');
var i = 1;
Ext.Array.each(this.summaryGroups, function(group){
var tpl = new Ext.XTemplate(
this.printSummaryRow(i),
this.getFragmentTpl()
);
tpl.overwrite(rowEls[i-1], {})
i++;
},this);