Hi guys I have a dojo datagrid inside a TabContainer/BorderContainer/ContentPane
The datagrid is render progammatically, the code is:
<script>
require(['dojo/request',
'dojo/dom',
'dijit/Dialog',
'dojo/date/locale',
'dojo/_base/array',
'dojo/store/Memory',
'dojo/data/ObjectStore',
"dijit/form/Button",
"dojo/dom-class",
'dojox/grid/DataGrid',
'dijit/form/Select',
'dojox/form/Uploader',
'dojo/data/ItemFileWriteStore',
'dojo/_base/xhr',
'dojox/grid/cells/dijit',
'dojox/grid/cells',
'dojo/date',
'dojo/date/stamp',
'dojo/date/locale',
'dojo/currency',
'dijit/form/DateTextBox',
'dijit/form/CurrencyTextBox',
"dojox/grid/_RadioSelector",
'dojo/ready',
'dojo/domReady!'],
function(request,dom,Dialog,locale,array,Memory, ObjectStore,Button,domClass,DataGrid, ItemFileWriteStore, xhr,cells,cellsDijit,date,stamp, locale,currency,localeCurrency, DateTextBox, CurrencyTextBox,ready){
var dataStore1 = new ObjectStore({ objectStore:new Memory({ data: <?php echo json_encode($constructiondrawingsdata) ?> }) });
var layout1 = [{
defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: center;' },
cells: [
{name: 'TYPE', field: 'filepath' ,formatter: displayIcon ,width:3},
{name: 'ID', field: 'id' ,width:2},
{name: 'PROJECT', field: 'project' ,width:5},
{name: 'USER', field: 'user' ,width:8},
{name: 'GROUP', field: 'area' ,width:5},
{name: 'DESCRIPTION', field: 'description' ,width:15},
{name: 'FILE', field: 'filepath' ,formatter: formatlink ,width:20},
{name: 'SIZE', field: 'size' ,width:8},
{name: 'DATE', field: 'date' ,width:8},
{name: 'STATE', field: 'status' ,formatter: formatcolumcolor ,width:18},
{name: 'REMARKS', field: 'remarks' ,width:15}
]
}];
var grid1 = new DataGrid({
id: 'grid1',
query: { id: "*" },
store: dataStore1,
structure: layout1,
loadingMessage: "Loading data...",
noDataMessage : "No results found",
clientSort: 'false',
style: "height: 100%; width: 100%",
canSort: function(col) { return col != 1; },
selectionMode:'single',
rowSelector: '0px'});
grid1.placeAt("gridDiv1");
</script>
<div data-dojo-type="dijit/layout/BorderContainer" style="padding:0px" data-dojo-props="liveSplitters: true, design: 'headline'">
<div id="gridDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
The problem is , when I load the datagrid the first time I only get 7 rows from the database of a total of 9 rows, and then when I refresh the datagrid I get the 9 rows.
Moreover if I press F12 in Google Chrome to see the console and I close it I lose again the last 2 rows of the datagrid (it´s weird right?).
Again if I refresh the datagrid I get the 9 rows.
Anyone has faced this issue?. Thanks in advance
Related
how to change columndef settings dynamically loaded , like one row must be editable and other should not be editable when loaded,but mine whenever celleditable true for one row it makes all other rows cells also editable
I can't understand if you meant 1 row or row 1. But customizing the celltemplates of columns based on rowRenderIndex might help.
var gridOptions = {
enableFiltering: true,
rowTemplate: rowTemplate(),
data: [{one : 1, two : 2, three: 3, four : 4, five:5 }],
columnDefs: [
{ field: 'one' },
{ field: 'two' },
{ field: 'three' },
{ field: 'four' },
{ field: 'five', cellTemplate: '<div class="ui-grid-cell-contents">
<input ng-if="!rowRenderIndex" type=number />
<span ng-if="rowRenderIndex">{{row.entity.five}}</span>
</div>'}
]
};
I have extended java script Panel with me that contains a a few columns. The data inside the column is received from the server. Some times the data from the server for each column is large and it does not fit inside the row.
Here is the code for the same:
Ext.define('DataDetailsGrid', {
extend: 'Ext.grid.Panel',
requires: [
'DataStore'
],
id: 'DataDetailsGrid',
xtype: 'grid',
margin: "20 20 20 20",
nestedView: false,
title: 'Student information',
store: 'DataStore',
frame: true,
flex: 1,
viewConfig : {
deferEmptyText: false,
emptyText: 'No data Available'
},
columns: [
{ text: 'Id', flex: 0.5, dataIndex: 'id' },
{ text: 'Student name', flex: 1, dataIndex: 'student_name' },
{ text: 'Time Stamp', flex: 1, dataIndex: 'requestTimeStamp' },
{ text: 'email Id', flex: 1, dataIndex: 'emailId' },
{ text: 'About Students', flex: 4, dataIndex: 'response' },
]
});
The issue is with About Students which can be about 500 characters sometimes. This is not getting accommodated inside the given row.
You can use this css code for wrap Adout Students Data.
Check fiddle:https://fiddle.sencha.com/#fiddle/1i3g
.x-grid-cell-inner {
white-space: initial;
}
All you need to do is add the following line to your column's definition
cellWrap: true
Check this fiddle: https://fiddle.sencha.com/#fiddle/1i5o
. I've taken the liberty of forking Ajay Thakur's fiddle.
So, in your case, change your offending code to the following line:
{ text: 'About Students', flex: 4, dataIndex: 'response', cellWrap: true }
I have a form with two textfields which are aligned in 'vbox' format with align as 'stretch'. I wish to now add a SAVE button which should be aligned in the middle of the form. How do I define this button to be exactly aligned in the middle just like in a usual alert where the OK button is in the middle of the alert box.
If it can be done without CSSS then that would be preferable.
buttonAlign : The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).
Another way is to use dockedItems with layout:'hbox' and pack:'center'
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
width: 300,
bodyPadding: 10,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
title: 'Contact Info',
name: 'name',
fieldLabel: 'Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address'
}],
buttons: [{
text: 'Save'
}],
buttonAlign: 'center',
renderTo: Ext.getBody()
})
}
});
FIDDLE
This seems like it would be a simple solution, but I cannot figure out how to set the row height of my fieldset table. Playing with the CSS didn't seem to do anything either.
xtype: 'fieldset',
title: 'Fieldset',
layout: {
type: 'table',
columns: 2,
cellCls: 'myFormTblCell'
},
margin: '5 5 5 5',
items: [{
xtype: 'label',
text: 'lable 1',
cls: 'myLabel'
},{
xtype: 'displayfield',
name: 'displayfield 1',
cls: 'myText'
},{
xtype: 'label',
text: 'lable 2',
cls: 'myLabel'
},{
xtype: 'displayfield',
name: 'displayfield 2',
cls: 'myText'
}]
I use ExtJS version 4.2.2, in which you would do the following
In your layout config...
layout: {
type: 'table',
columns: 2,
trAttrs: { height: 50 },
cellCls: 'myFormTblCell'
},
Documentation on ExtJS table layout
JSFiddle
Anyone know how to attach a renderer to a grid grouping header in ExtJS4? In ExtJS3 I have the following working code, which returns 'Past' if an event has been completed ('Y'), or 'Upcoming' if not completed:
function fmt_group_heading(groupVal) {
if (groupVal === 'Y') {
return 'Past';
} else {
return 'Upcoming';
}
}
// create the Grid
var fitGrid = new Ext.grid.GridPanel({
store: fitGroupingStore,
columns: [
{header: "ID", dataIndex: 'id', hidden: true },
{header: 'Event', width:320, dataIndex: 'event',
renderer:fmt_event_description},
{header: 'Events', dataIndex: 'completed', hidden: true,
renderer: fmt_group_heading }
],
stripeRows: true,
// config options for stateful behavior
stateful: true,
stateId: 'grid',
hideHeaders: true,
view: new Ext.grid.GroupingView({
groupRenderer: 'completed',
forceFit: true
})
});
ExtJS4 provides grid grouping but I'm not understanding how to change the output of the group text. The 'groupHeaderTpl' attribute of Ext.grid.feature.Grouping seems to only take the raw field value as read from the store.
this.groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {completed}'
});
// create the Grid
this.fitnessGrid = new Ext.grid.Panel({
store: this.fitnessEventStore,
features: [this.groupingFeature],
// etc.......
try smth like this:
groupHeaderTpl:
'{[fmt_group_heading(values.name)]}
({rows.length}
Item{[values.rows.length > 1 ? "s" :
""]})'
The groupHeaderTpl requires you to use {name} when composing the template. It will only use the value provided by the groupField.
See the Docs.
Try this:
groupHeaderTpl: '{[values.rows[0].completed]}'