I am using EXTJS 3, I have code like below. The headache parts are
how to put atuo horizontal scrollbar to the Grid ?
how to let the Grid capture the max height ? how to set auto vertical scrollbar to the Grid ?
Currently, I have to manually set Grid to Frame and height .
frame: true,
height: 500,
If I do this way, when user changes the IE size, the horizontal scrollbar will be disappeared. and I have tried the autoHeight and autoWidth , it still doesn't work.
//register this namespace
Ext.namespace('MyPkg.Ui');
//create a class in this namespace
MyPkg.Ui.Report = Ext.extend(Ext.form.FormPanel, {
allowpaging: true,
pageSize: 30,
initComponent: function () {
var period_start = new Ext.form.DateField({
id: 'PERIOD_START',
fieldLabel: 'PERIOD START',
format: 'm/d/Y',
allowBlank: true,
width: 250
});
var Store = new Ext.data.DirectStore({
autoLoad: false,
paramsAsHash: false,
paramOrder: 'PERIOD_START',
root: 'Report',
totalProperty: 'total',
fields: [
{ name: '_DETAIL_ID', type: 'string' },
{ name: 'RUNID', type: 'string' },
....
],
remoteSort: false,
listeners: {
load: function (store, records, opt) {
//Grid.setHeight(500);
Grid.doLayout();
}
}
});
var pager = new Ext.PagingToolbar({
store: Store,
displayInfo: true,
pageSize: this.pageSize,
listeners: {
beforechange: function (paging, params) {
var reportStore = Ext.StoreMgr.lookup('Store');
reportStore.setBaseParam('start', params.start);
reportStore.setBaseParam('limit', this.pageSize);
reportStore.setBaseParam('PERIOD_START', period_start.getValue());
}
}
});
var Grid = new Ext.grid.GridPanel({
store: Store,
loadMask: true,
stripeRows: true,
frame: true,
height: 500,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{header: '', dataIndex: 'ROW_ID'},
{ header: 'PRICING FEED', dataIndex: 'PRICING_FEED' },
{ header: 'DATAFILE TREE', dataIndex: 'DATAFILE_TREE' },
{ header: 'ADO LIST ID', dataIndex: 'ADO_LIST_ID' },
{ header: 'FEED RUN DATE', dataIndex: 'FEED_RUN_DATE_STR' },
.....
]
}),
viewConfig: {
forceFit: false
}
});
var config = {
items: [period_start, Grid],
api: {
submit: Report.ReadReport
},
bbar: pager,
tbar: [....]
}; //use the config we defined as the initial config for this class
Ext.apply(this, Ext.apply(this.initialConfig, config));
//use this function as the initComponent function
MyPkg.Ui.Report.superclass.initComponent.call(this);
}
});
Ext.reg('Report', MyPkg.Ui.Report);
Related
I'm trying to put a GridPanel powered by an ArrayStore in a Window, but no matter what I do, it just looks like this with no data rows inside:
Here's my code:
var ticketsStore = new Ext.data.ArrayStore
(
{
autoDestroy: false,
remoteSort: false,
data: result,
fields:
[
{ name: 'articleId', type: 'int' },
{ name: 'heatTicketRef', type: 'string' },
{ name: 'username', type: 'string' },
{ name: 'dateLinked', type: 'date' }
]
}
);
var ticketsGrid = new Ext.grid.GridPanel({
store: ticketsStore,
id: this.id + 'ticketsGrid',
viewConfig: {
emptyText: 'No data'
},
autoShow: true,
idProperty: 'heatTicketRef',
columns: [
{ id: 'heatTicketRef', header:"Ticket ID", width: 100, dataIndex: 'heatTicketRef', sortable: false },
{ header: "User", width: 100, dataIndex: 'username', sortable: false },
{ header: "Date Linked", width: 100, dataIndex: 'dateLinked', xtype: 'datecolumn', format: 'j M Y h:ia', sortable: false }
]
});
var window = new Ext.Window
(
{
renderTo: Ext.getBody(),
id: this.id + 'linkedHeatTickets',
closable: true,
modal: true,
autoHeight: true,
width: 500,
title:'Linked Heat Tickets',
resizable: false,
listeners:
{
close: function () { // do something }
},
items:
{
style: 'padding:5px;',
items: ticketsGrid
},
buttons:
{
text: 'Close',
handler: function () {
window.close();
}
}
}
);
window.show();
When I debug, I can see that my "result" object is healthy and the ArrayStore is of the right length:
But the GridPanel doesn't like the data because it's not in its items (although it's in the store) array:
What little thing have I done wrong?
Thanks!
Because I'm an idiot... I used an ArrayStore instead of a JsonStore!
I am trying to get an instance of my view within the controller. How can I accomplish this. The main reason I am trying to do this is that I have a grid in my view that I want to disable until a selection from a combobox is made so I need to have access to the instance of the view.
Help?
My controller:
Ext.define('STK.controller.SiteSelectController', {
extend: 'Ext.app.Controller',
stores: ['Inventory', 'Stacker', 'Stackers'],
models: ['Inventory', 'Stackers'],
views: ['scheduler.Scheduler'],
refs: [{
ref: 'stackerselect',
selector: 'panel'
}],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
/* render all default functionality */
onPanelRendered: function () {
var view = this.getView('Scheduler'); // this is null?
}
});
My view:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel']);
var filters = {
ftype: 'filters',
autoReload: false,
encode: false,
local: true
};
Ext.define('invtGrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.inventorylist',
title: 'Inventory List',
store: 'Inventory',
multiSelect: true,
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'invtGridDDGroup',
dropGroup: 'stackerGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
features: [filters],
stripeRows: true,
columns: [{
header: 'OrdNum',
sortable: true,
dataIndex: 'ordNum',
flex: 1,
filterable: true
}, {
header: 'Item',
sortable: true,
dataIndex: 'item',
flex: 1,
filterable: true
}, {
header: 'Pcs',
sortable: true,
dataIndex: 'pcs',
flex: 1,
filterable: true
}]
});
Ext.define('stackerGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.stackerselect',
title: 'Stacker Select',
store: 'Stacker',
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'stackerGridDDGroup',
dropGroup: 'invtGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
columns: [{
header: 'OrdNum',
dataIndex: 'ordNum',
flex: 1
}, {
header: 'Item',
dataIndex: 'item',
flex: 1
}, {
header: 'Pcs',
dataIndex: 'pcs',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Submit',
action: 'submit'
}, {
text: 'Reset',
action: 'reset'
}]
}, {
xtype: 'toolbar',
dock: 'top',
items: [{
id: 'combo',
xtype: 'combobox',
queryMode: 'local',
fieldLabel: 'Stacker',
displayField: 'stk',
valueField: 'stk',
editable: false,
store: 'Stackers',
region: 'center',
type: 'absolute'
}]
}]
});
Ext.define('STK.view.scheduler.Scheduler', {
extend: 'Ext.panel.Panel',
alias: 'widget.schedulerview',
title: "Scheduler Panel",
layout: {
type: 'column'
},
items: [{
xtype: 'inventorylist',
width: 650,
height: 600,
columnWidth: 0.5,
align: 'stretch'
}, {
xtype: 'stackerselect',
width: 650,
height: 600,
columnWidth: 0.5
}]
});
As I said, Extjs creates getter for your views (those listed in the controller's view array) and you get access to them:
var view = this.getSchedulerSchedulerView();
Once you have the view reference you can do this to get access to the contained grid:
var grid = view.down('.inventorylist');
grid.disable();
I have an Editor Grid and a store with a custom type in it.
store :
var sourceStore = new Ext.data.JsonStore({
url: hp,
storeId: 'labels-data-store',
idProperty: 'ID',
root: 'results',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'LanguageID',
type: 'int'
}, {
name: 'KeyID',
type: 'int'
}, {
name: 'Value',
type: 'string'
}, {
name: 'ToolTip',
type: 'string'
}, {
name: 'LanguageName',
type: 'string'
}, {
name: 'KeyInfo',
type: 'LanguageKeyInfo'
},
CUSTOM TYPE HERE !! !{
name: 'ServerComments',
type: 'string'
}]
});
Editor Grid :
var sourceGrid = new Ext.grid.EditorGridPanel({
id: 'source-grid',
region: 'center',
title: localize.sourceView,
iconCls: 'source-view-title',
store: sourceStore,
trackMouseOver: true,
disableSelection: false,
loadMask: true,
split: true,
stripeRows: true,
border: true,
autoExpandColumn: 'label',
cm: sourceColModel,
// customize view config
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: false,
emptyText: localize.noRecordsFound
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: false,
moveEditorOnEnter: true
})
});
Custome Type implementation:
LanguageKeyInfo = function () {
this.ID = arguments[0];
this.Value = arguments[1];
this.Description = arguments[2];
}
Ext.data.Types.LANGUAGEKEYINFO = {
convert: function (v, data) {
if (!data) {
return null;
}
if (!data.KeyInfo) {
return null;
}
return new LanguageKeyInfo(
data.KeyInfo.ID,
data.KeyInfo.Value,
data.KeyInfo.Description);
},
sortType: function (key) {
return key.ID;
},
type: 'LanguageKeyInfo'
}
Source Column Model:
var sourceColModel = new Ext.grid.ColumnModel({
columns: [{
header: 'ID',
dataIndex: 'ID',
width: 50,
hidden: true,
sortable: true
}, {
header: 'Language ID',
dataIndex: 'LanguageID',
width: 50,
hidden: true,
sortable: true
}, {
header: 'Language',
dataIndex: 'LanguageName',
width: 20,
hidden: true,
sortable: true
}, {
header: 'Key ID',
dataIndex: 'KeyID',
width: 30,
hidden: true,
sortable: true
}, {
header: 'Key',
dataIndex: 'KeyValue',
width: 40,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 200
})
}, {
header: 'Label',
dataIndex: 'Value',
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 500
}),
renderer: function (sc) {
var lanID = getSelectedLanguageID() ? getSelectedLanguageID() : 1;
switch (parseInt(lanID)) {
case 2:
return '<div class="rtl">' + sc + '</div>';
default:
return sc;
}
}
}, {
header: 'Description',
dataIndex: 'KeyDescription',
width: 30,
editor: new Ext.form.TextField({
allowBlank: true,
vtype: 'englishOnly',
maxLength: 100
})
}, {
header: 'Tool Tip',
dataIndex: 'ToolTip',
width: 80,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: true,
maxLength: 200
})
}]
});
When I start editing the first column row the text field value is [object,object] which mean the grid is passing the KeyInfo object to the textbox value.
How can I send one of KeyInfo properties to the textbox and have it mapped to the store record ??
For starters your dataIndex does not reference a valid record mapping:
dataIndex: 'KeyValue', should probably be dataIndex: 'KeyInfo',
Secondly I don't think there is any support for custom types on grid editors. I might be wrong of course.
The following ExtJS grid worked until I put the checkbox column in it, now I get this error:
I based the checkbox column code on this code.
What do I need to do to get the checkbox column to work?
var myData = [
[4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, true, '2010-11-17 08:31:12'],
[16, 'Computer2', 0.28, false, '2010-11-14 08:31:12'],
[5, 'Network1', 0.02, false, '2010-11-12 08:31:12'],
[1, 'Network2', 0.01, false, '2010-11-11 08:31:12'],
[12, 'Other', 0.42, false, '2010-11-04 08:31:12']
];
var myReader = new Ext.data.ArrayReader({}, [{
name: 'id',
type: 'int'
}, {
name: 'object',
type: 'object'
}, {
name: 'status',
type: 'float'
}, {
name: 'rank',
type: 'boolean'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}]);
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [{
header: 'ID',
width: 50,
sortable: true,
dataIndex: 'id',
hidden: false
},
{
header: 'Object',
width: 120,
sortable: true,
dataIndex: 'object',
renderer: columnWrap
}, {
header: 'Status',
width: 90,
sortable: true,
dataIndex: 'status'
},
{
xtype: 'checkcolumn',
header: 'Test',
dataIndex: 'rank',
width: 55
},
{
header: 'Last Updated',
width: 120,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
dataIndex: 'lastChange'
}],
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 2){
return 'red-row';
} else {
return '';
}
}
},
title: 'Computer Information',
width: 500,
autoHeight: true,
frame: true,
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
});
You get this error because you have not included the CheckColumn extension. You can get the extension from : http://dev.sencha.com/deploy/dev/examples/ux/CheckColumn.js .. include it and you should be able to remove the error..
I created the following grid component:
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
});
}
});
The grid renders correctly, and the URL that is mapped to MyAppUrls.ListRelationshipMembers is correct. The data is being retrieved, and the ListRelationshipMembers URL is returning the following JSON:
{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]}
Yet, even though the grid is rendered (columns, borders, etc..) no data is showing in the actual grid though. Since this is my first time using a data store, I am unsure of what I am doing wrong. Any help would be appreciative.
Edit:
I tried updating the store to have a reader via the following code:
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
}),
groupField: 'ObjType'
});
No change, the datagrid is not being filled with the records
Evan is correct. Your biggest problem is a lack of a reader. That and the validation stub you left in there needed to return true. If you can't just drop this code in and have it work you have some other problem.
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
return true;
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
reader: new Ext.data.JsonReader({
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
})
});
}
});
Think you need to do a couple of things here: firstly, as mentioned by Evan, you need to add a reader to your store, like this:
buildStore: function () {
return new Ext.data.Store({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
})
});
}
I've changed the store type here to something simpler - was there a particular reason you were using GroupingStore? Note that the root is specified in the reader, not the store itself.
Then, in your columns, I'd tend to add a renderer to explicitly determine what each column will display, such as:
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10,
renderer: function (value, metaData, record) {
return record.data.Id
}
} ... ];
}
I've got into the habit of using renderers, since I modify the content of my column cells quite heavily in my grids. Notice here the arguments being passed to the renderer function; there are a few more you can pass in - see the ExtJS API if you need more info on what you can actually access. On that note, the API documentation is pretty good - it can take some digging into but definitely worth your time if you're working with ExtJS a lot.
You haven't specified a reader on your store, you need to specify the root in the JsonReader.