i have an editor grid, what i want to do i create one row in the editor grid that the user have to ADD new information on the grid with blank information.
What i want if, after inserting that row to the editor, apply different style/id/etc to it.
1- How do i do that first?
2- how do i make it that the NEW ROW for inserting is always the last one seen, even after scrolling to another page of that grid ?
Here is the code for assigning a custom class to your new records, and for inserting the new records at the end:
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
viewConfig: {
getRowClass : function(record, rowIndex, p, store){
if(record.data.isNew){
return 'x-tab-panel-header';
}
}
},
tbar: [{
text: 'Add New',
handler: function() {
var Rec = grid.getStore().recordType;
var p = new Rec({
col1: 'value1',
col2: 1.01
});
grid.stopEditing();
var newRow = store.getCount();
p.data.isNew = true;
store.insert(newRow, p);
grid.startEditing(newRow, 0);
}}]
});
You can test this sample here: http://jsfiddle.net/xjkB5/
Related
Hi i have a grid with values ,
when i click a the row in the grid i need to
open a window with all the values in that row.
I have done till loading a grid and populating values in the grid. I am working in ext js for the last two weeks can any one tell me how to proceed further
My Code:
function loadcolleaguesVal(jsonContent){
var localJson = Ext.util.JSON.decode(jsonContent);
colleagueGridJS=Ext.util.JSON.decode(localJson.ColleagueInfo);
colleagueGridDataJS=Ext.util.JSON.decode(localJson.colData);
var caseReGridData= new Ext.data.JsonStore({
autoLoad :true,
fields: ["NAME",
"TOTAL_CASES_ALLOWED",
"TOTAL_OPEN_CASES",
"CLIENT_TEAM_CASES_ALLOWED",
"CLIENT_TEAM_TOTAL_CASES",
"PAY_AUTH_MAX",
"DAYS_MAX",
"LUMP_SUM_MAX",
"DENIAL_ADMIN",
"DENIAL_CLINICAL"],
storeId :'ColleagueInfo',
data : colleagueGridDataJS,
root : 'data',
listeners : {
load : colleagueGridListerner
}
});
}
function colleagueGridListerner(){
nucleus.tools.master(colleagueGridJS,"NonEditableGrid","colleagueGrid",caseReGridData,"twoFields");
panelForPage.addButton({
text:'Add new colleague',
type:'Submit',
name:'btnGo',
handler:function()
{
showColleagueSetup();
}
});
Ext.getCmp('colleagueCenter').add(panelForPage);
Ext.getCmp('colleagueGrid_Grid').setHeight(145);
Ext.getCmp('colleagueGrid_Grid').doLayout();
tabPanel.doLayout();
Ext.getCmp("colleagueGrid_Grid").collapse();
}
I can't see grid into your code but you can add selection model into grid:
var grid = new Ext.grid.GridPanel({
.
.
.
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
.
.
});
and add event:
grid.getSelectionModel().on('rowselect', function (selModel, rowIndex, record ) {
//Your row selected data is:
var data = record.data;
//Open window code
...
});
I have a grid, that displays the values in column form. but I want it to be displayed as rows; as shown in the image below:
My code is as follows. Presently I can see the data in Column wise, and not Row wise (Grouped one under the other) as shown in the image. How can I group the components Row wise?
initComponent: function() {
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {name} ({rows.length})', /
startCollapsed: true
});
this.columns = [
{ text: "Name", dataIndex: 'f_name' },
......
You need also to add this to your store definition:
...
groupField: 'f_topic' // or whatever your field name is
...
Is there a way to show columns only when they have data in them?
var grid = new Ext.grid.GridPanel({
width:938,
height:auto,
store: store,
renderTo: 'Div',
// grid columns
columns:[
{coloum1},
{coloum2},
{coloum3},
{coloum4} ] }};
// Only show column when it has data
In the store config use the load event.
var myStore = new JsonStore({
.. config..
listener :
{
'load': function(){
/*
Code to check if the column data is empty - returns true/false
*/
if(isEmpty)
{
mygrid.getColumnModel().setHidden(colIndex,true);
}
}
});
Relevant API doc here
This is blind coding and written without testing. But it should work.
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);
I am creating a report making tool. I will be dragging/resizing panels inside a panel container. When i click save button, i am passing the size and position of panels and based on that an xhtml report will be generated. I have a dataview on the left side. Each time a report is generated i need to show that report on dataview. Without using any database how this can be done? Any help would be appreciated.
Do one thing, create a store with fields "size", "report_data" and "position".
var store = new Ext.data.JsonStore({
id : 'panel_store',
fields : ['size', 'position', 'report_data']
});
Create a template for each report (some other data can be added here):
var template = new Ext.XTemplate(
'<div class="reports_container"><tpl for=".">',
'<div class="report">{report_data}</div>','</tpl></div>'
);
template.compile();
Create a dataview with template and store:
var dataView = new Ext.DataView({
itemSelector : 'div.report', // Required
style : 'overflow:auto',
multiSelect : true,
store : store,
tpl : template
});
Add the dataview in you main panel:
var mainPanel = new Ext.Panel({
id : 'main_panel',
items : dataView
});
Whenever you generate a new report, create a new Ext.Record:
var ReportRecord = Ext.data.Record.create([
{ name: 'size' },
{ name: 'position' },
{ name: 'record_type' }
]);
var newRec = new ReportRecord({
size : '100',
position : 'some position',
report_data : 'some data'
});
store.add(newRec);
store.on('add', function() {
dataView.refresh();
}, this);
Is this what you wanted? However, this code isn't tested anywhere.