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
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 have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.
this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});
I am creating the form below, but for some reason the select button handler doesn't
get executed. Everything else is working properly (loading data into the grid).
Is there something I'm missing?
Ext.Loader.setConfig({enabled:true});
Ext.define('Project', {
extend: 'Ext.data.Model',
fields: ['PID', 'ProjectName']
});
var projectsStore = Ext.create('Ext.data.Store',
{
model: 'Project',
autoLoad: true,
proxy:{
type: 'ajax',
url : 'projects.php?action=read',
reader:{ type:'json', root:'projects', successProperty:'success' } }
});
Ext.onReady(
function()
{
var simple = Ext.create('Ext.form.Panel', {
url:'projects.php?action=select',
frame:true,
title: 'Projects',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: projectsStore,
height: 400,
title:'General',
columns: [
{header: 'Id', dataIndex: 'PID', flex: 1},
{header: 'Project Name', dataIndex: 'ProjectName', flex: 1},
]
}],
buttons: [{
text: 'Select',
handler: function() {
Ext.Msg.alert('Selecting', action.result.msg);
}
}]
});
simple.render('proj-form');
projectsStore.load();
}
);
Your code is crashing when it's running the handler because action.result.msg doesn't exist.
You can look in Firebug/Chrome Dev Tools and it would have shown you the problem.
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]
});
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();