Develop Reference

ExtJS 3.0.0: GridPanel in a Window with an ArrayStore not rendering any data

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!

Multi Line Text Area In Editor ExtJs

I have a comment text area in an editor in the grid, but if i write some text and then i push the enter it just complete edit and not create new line. What i want is if i hit enter key, its create new line like this:
Example :
" Wrong list:
asdasdasd
asdasdasdas"
Now i just write in comment like this : "Wrong list: 1.asdasd 2.asdasdasd"
What i must to do with my js?
This is the grid i have:
This is the code :
var chat_grid = Ext.create('Ext.grid.Panel', {
id: 'chatGrid',
store: SuratPesananChatDetailStore,
height: 350,
title: 'Comment Grid',
viewConfig: {
emptyText: '<P ALIGN="CENTER"><font color="red"><U> Tidak ada data </U></font></P>',
getRowClass: function (record, rowIndex, rp, store) {
return 'rowgridspdetailnonstd-height';
}
},
plugins: Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 2, pluginId: 'rowEditingID' }),
frame: true,
loadMask: true,
stripeRows: true,
autoScroll: true,
selModel: GridChatSelectionModel,
cls: 'rowgridspdetailnonstd-height',
tbar:
[
{
id: "IdAddCommentLookUp",
text: "Add Comment",
iconCls: "icon-grid-add",
listeners:
{
'click': function () {
AddCommentListener();
}
}
},
{
id: "IdDeleteChat",
text: "Delete Comment",
iconCls: "icon-cancel",
disabled: true,
listeners:
{
'click': function () {
DeleteChatListener();
}
}
},
{
id: "IdInviteUser",
text: "Invite User",
iconCls: "icon-grid-add",
hidden: true,
listeners:
{
'click': function () {
InviteUserLookUp();
}
}
}
],
columns:
[
{
header: 'Date',
dataIndex: 'CreatedOn',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Comment',
dataIndex: 'Comment',
editor: { xtype: 'textareafield', allowblank: false, maxLength: 165, enforceMaxLength: true, height: 100, grow: true, completeOnEnter: false },
hidden: false,
width: 370,
sortable: false,
sortableColumn: false
},
{
header: 'Created By',
dataIndex: 'CreatedBy',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Department',
dataIndex: 'Department',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Document Name',
dataIndex: 'FileName',
width: 150,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Upload Document',
dataIndex: 'Panel',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false,
renderer: function (v, m, r, row) {
if (r.data.Panel == 'Download') {
var fileName = r.data.FilePath;
return "" + v + "";
}
else if (r.data.Panel == 'Upload') {
return "" + v + "";
}
else {
return v;
}
}
}
]
});
I have try all the way in google but i can't solve this case.

Enable keyevents of your comment editor, and stopEvent() in Enter key
Sample config:
editor: {
xtype: 'textareafield',
allowblank: false,
maxLength: 165,
enforceMaxLength: true,
height: 100,
grow: true,
completeOnEnter: false,
enableKeyEvents: true, //Listen to keyevents
listeners: {
keydown: function(field, e) {
if (e.getKey() == e.ENTER) {
e.stopEvent(); // Stop event propagation
}
}
}
}
Ref: https://www.sencha.com/forum/showthread.php?293592-Stop-RowEditing-plugin-from-completing-the-edit-on-keypress-enter

ExtJS Grid Filter doesnt appear

i got an ExtJS Grid in my view and now i do want to add some column filters...
i've already searched in the web, though i didnt succeed.
The problem is if i open the submenu of the column where i can sort etc. i do not see the option Filter.
the following code is a section of my view script:
Ext.define('Project.my.name.space.EventList', {
extend: 'Ext.form.Panel',
require: 'Ext.ux.grid.FiltersFeature',
bodyPadding: 10,
title: Lang.Main.EventsAndRegistration,
layout: {
align: 'stretch',
type: 'vbox'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [
...
{
xtype: 'gridpanel',
title: '',
store: { proxy: { type: 'direct' } },
flex: 1,
features: [filtersCfg],
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Title',
text: Lang.Main.CourseTitle,
flex: 1,
filterable: true
},
{
xtype: 'datecolumn',
dataIndex: 'StartDate',
text: Lang.Main.StartDate,
format: Lang.Main.DateFormatJS,
flex: 1,
filter: { type: 'date' }
},
{
xtype: 'datecolumn',
dataIndex: 'EndDate',
text: Lang.Main.EndDate,
format: Lang.Main.DateFormatJS,
flex: 1, // TODO: filter
},
{
xtype: 'gridcolumn',
dataIndex: 'Participants',
text: Lang.Main.Participants,
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'LocationName',
text: Lang.Main.Location,
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'Status',
text: Lang.Main.Status,
flex: 1, // TODO: filter
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
icon: 'Design/icons/user_add.png',
text: Lang.Main.RegisterForEvent,
disabled: true
},
{
icon: 'Design/icons/user_delete.png',
text: Lang.Main.Unregister,
disabled: true
},
{
icon: 'Design/icons/application_view_list.png',
text: Lang.Main.Show,
disabled: true
},
{
icon: 'Design/icons/calendar_edit.png',
text: Lang.Main.EditButtonText,
hidden: true,
disabled: true
},
{
icon: 'Design/icons/calendar_add.png',
text: Lang.Main.PlanCourse,
hidden: true
}]
}]
}
]
});
me.callParent(arguments);
...
this.grid = this.query('gridpanel')[0];
this.grid.on('selectionchange', function (view, records) {
var selection = me.grid.getSelectionModel().getSelection();
var event = (selection.length == 1) ? selection[0] : null;
var registered = event != null && event.data.Registered;
me.registerButton.setDisabled(registered);
me.unregisterButton.setDisabled(!registered);
me.showButton.setDisabled(!records.length);
me.editButton.setDisabled(!records.length);
});
}
});
here is also a pastebin link of the code : http://pastebin.com/USivWX9S
UPDATE
just noticed while debugging that i get an JS error in the FiltersFeature.js file in this line:
createFilters: function() {
var me = this,
hadFilters = me.filters.getCount(),
grid = me.getGridPanel(),
filters = me.createFiltersCollection(),
model = grid.store.model,
fields = model.prototype.fields,
Uncaught TypeError: Cannot read property 'prototype' of undefined
field,
filter,
state;
please help me!

There are a couple of syntactic errors.
FiltersFeature is a grid feature and not a component.
You cannot extend an object literal (correct me if I'm wrong)
Use the filter like this:
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'numeric',
dataIndex: 'id'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
features: [filtersCfg]
});

extjs4 get instance of view in controller?

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

Extjs layout extension causing error in ext-all.js

I am trying to learn Extjs and I am immediately coming up with an issue. My Html has ext-base.js and ext-all.js correctly included. I then have the following in my js file:
Ext.BLANK_IMAGE_URL = '<%= Url.Content("~/Content/ext/images/default/s.gif") %>';
Ext.ns('MyNamespace');
Ext.onReady(function() {
alert("onReady() fired");
});
So far everything is working, no errors and the alert is thrown correctly. I then add the following code after onReady:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
}));
This causes the following javascript error in chrome:
Uncaught TypeError: Object #<an Object> has no method 'addEvents' ext-all.js:7
Ext.Component ext-all.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
(anonymous function) MyApp.js:13 (pointing to the Ext.Extend line)
If I take the Viewport code and put it directly into the OnReady function it (like the following)
Ext.onReady(function () {
var bl = new Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
});
It works. Can anyone clue me in to what I am doing wrong with the Extend method?

To fix your code, the issue is simply bad syntax in the Extend statement. You need a comma after Ext.Viewport, not an extra () pair:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport, {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
However, I'd suggest taking #r-dub's advice and reading up more on what you're trying to do.

Here's a bit more complicated example of what you're trying to accomplish. I'd strongly suggest taking a look at Saki's 3 part series in building large apps with ExtJS, it'll help you understand how it use extend properly to create re-usable components.
Ext.ns('MyNamespace');
MyNamespace.BaseLayout = Ext.extend(Ext.Viewport, {
initComponent:function() {
var config = {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MyNamespace.BaseLayout.superclass.initComponent.apply(this,arguments);
}//end initComponent
});
//this will give you an xtype to call this component by.
Ext.reg('baselayout',MyNamespace.BaseLayout);
Ext.onReady(function() {
new MyNamespace.BaseLayout({});
});

ExtJS recommend the use of define instead of extend. Here is how a similar example works with define:
Ext.define('Grid', {
extend: 'Ext.grid.Panel',
config: {
height: 2000
},
applyHeight: function (height) {
return height;
}
});
new Grid({
store: store,
columns: [{
text: 'Department',
dataIndex: 'DepartmentName',
renderer: function (val, meta, record) {
return '' + record.data.DepartmentName + '';
},
width: 440,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Department Code',
dataIndex: 'DepartmentKey',
width: 100,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Main Phone',
dataIndex: 'MainPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Room',
dataIndex: 'RoomLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Location',
dataIndex: 'HideawayLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Phone',
dataIndex: 'HideawayPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Has OEC',
dataIndex: 'OECFlag',
xtype: 'checkcolumn',
width: 50,
filter: {
type: 'boolean',
active: true
},
flex: 1,
sortable: true,
hideable: false
},
{
text: 'Action',
dataIndex: 'ID',
renderer: function (value) {
return 'Edit';
},
hideable: false
}],
forceFit: false,
split: true,
renderTo: 'departmentSearchGrid',
frame: false,
width: 1300,
plugins: ['gridfilters']
});
I used the following post as a reference:
http://docs.sencha.com/extjs/5.0/core_concepts/classes.html