Develop Reference

Sorting in ExtJS column removes node from template column

I have a template column in a grid which I am rendering a sparkline graph to: http://omnipotent.net/jquery.sparkline and when I sort the grid the canvas element that is rendered by the plugin is destroyed. Is there a way to stop the contents of a row being altered during a sort? I'm using ExtJS 4.2.3
Libraries:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>
Code:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create("Ext.grid.Panel", {
store: new Ext.data.Store({
data: [
{
thing: '1'
},
{
thing: '1'
},
{
thing: '1'
},
{
thing: '1'
},
{
thing: '1'
}
],
fields: [
"thing"
]
}),
columns: [
{
text: 'Hello',
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', "<div id='1'></div>"),
flex: 1
},
{
text: 'Other',
flex: 1,
dataIndex: 'thing'
}
],
renderTo: Ext.getBody(),
listeners: {
boxready: function() {
$('#1').sparkline([1,2,3,4,5,6,7,8,9,10])
}
}
});
}
});

sortchange
listeners: {
boxready: function() {
$('#1').sparkline([1,2,3,4,5,6,7,8,9,10])
},
sortChange: function() {
// your logic here
}
}

Combo box do not select Value from drop down

I am using ExtJs to create a combobox.
Here is my code:
Ext.define('Form.FormTypeDialog', {
extend : 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction : null,
modal: true,
statics : {
show : function(formId, callback) {
Ext.create(Form.FormTypeDialog", {
formId : formId,
callbackFunction : callback
}).show();
}
},
constructor : function(config) {
var me = this;
Ext.apply(this, {
buttons : [
{
text:"#{msgs.form_create_dialog_button_cancel}",
cls : 'secondaryBtn',
handler: function() {
me.close();
}
},
{
text:"#{msgs.form_create_dialog_button_next}",
handler: function() {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent:function() {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var formTypeStore = Mystore.Store.createRestStore({
url : getRelativeUrl('/rest/form/formTypes'),
root: 'objects',
fields: ['name','value']
});
this.form = new Ext.form.Panel({
style:'padding:15px;background-color:#fff' ,
border:false,
bodyBorder:false,
items:[
new Ext.form.Label({
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
new Ext.form.ComboBox({
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable:false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
I am creating this window on a xhtml page on a button click using :
Form.FormTypeDialog.show(null, showFormWindowCallBack);
It works fine and combo box is displayed and I can select value.
But if I open and close it 4 times, then in next show it shows the values but It do not allow me to select the last two value. I can only select first value.
Please suggest.
Note: I have tried copying and executing this code in forms of other pages of my application. But behavior is same in all cases.
This combobox is on a Ext.Window.
EDIT:
JSON RESPONSE FROM Rest:
{"attributes":null,"complete":true,"count":3,"errors":null,"failure":false,"metaData":null,"objects":[{"name":"Application
Provisioning Policy Form","value":"Application"},{"name":"Role
Provisioning Policy Form","value":"Role"},{"name":"Workflow
Form","value":"Workflow"}],"requestID":null,"retry":false,"retryWait":0,"status":"success","success":true,"warnings":null}

I have re-created this code, I had some errors showing in Firefox using your code directly so I've changed some things.
Running the code below and calling Ext.create("Form.FormTypeDialog", {}).show(); in the console window, then closing the window and repeating does not replicate this issue. Could you try using the code I have and see if you still have the same problem.
Ext.application({
name: 'HelloExt',
launch: function () {
Ext.define('Form.FormTypeDialog', {
extend: 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction: null,
modal: true,
constructor: function (config) {
var me = this;
Ext.apply(this, {
buttons: [
{
text: "#{msgs.form_create_dialog_button_cancel}",
cls: 'secondaryBtn',
handler: function () {
me.close();
}
},
{
text: "#{msgs.form_create_dialog_button_next}",
handler: function () {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent: function () {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var myData = [
["Application Provisioning Policy Form", "Application"],
["Role Provisioning Policy Form", "Role"],
["Workflow Form", "Workflow"],
];
var formTypeStore = Ext.create("Ext.data.ArrayStore", {
fields: [
'name',
'value'
],
data: myData,
storeId: "myStore"
});
this.form = Ext.create("Ext.form.Panel", {
style: 'padding:15px;background-color:#fff',
border: false,
bodyBorder: false,
items: [
Ext.create("Ext.form.Label", {
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
Ext.create("Ext.form.ComboBox", {
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable: false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
Ext.create("Form.FormTypeDialog", {}).show();
}
});
}
});
You can also play around with this code using / forking from this Fiddle

It is not clear what your problem is.
I use remote combo follows:
Ext.define('ComboRemote', {
extend: 'Ext.form.ComboBox',
xtype: 'ComboRemote',
emptyText: 'empty',
width: 75,
displayField: 'name',
valueField: 'id',
store: {
model: 'ComboModel',
proxy: {
type: 'rest',
url: '/serv/Res',
extraParams: {
query: ''
},
reader: {
root: "result", type: 'json'
}
},
autoLoad: true,
},
queryMode: 'remote',
pageSize: false,
lastQuery: '',
minChars: 0});
Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: [
'id',
'name'
]});
I hope to help

Try these possible solutions
1. Make AutoLoad property for store as true.
2. Add delay of some ms

ExtJS column renderer not getting called

I can't figure out why my customer renderer for my grouped-column grid isn't being called.
Ext.define('PT.view.deal.YearCol', {
extend: 'Ext.grid.column.Column',
alias: 'widget.yearcolumn',
columns: [
{
text: 1,
renderer: function(v, m, r) {
console.log('renderer called'); // THIS IS NEVER CALLED!!!!!!!!
return custom(r);
}
},
...
]
});
Ext.define('PT.view.deal.QuarterlyGrid', {
extend: 'Ext.grid.Panel',
columns: [
{
text: 'Item Number',
dataIndex: 'Item_Number'
},
{
xtype: 'yearcolumn',
text: 2013
},
...
]
});
The grid columns/headers are displayed correctly, but the grid data isn't rendered. Why is that function not being called?

What version are you using? This works ok for me in 4.2.0:
Ext.define('PT.view.deal.YearCol', {
extend: 'Ext.grid.column.Column',
alias: 'widget.yearcolumn',
columns: [{
text: 1,
renderer: function(v, m, r) {
return r.get('foo');
}
}]
});
Ext.define('Grid', {
extend: 'Ext.grid.Panel',
columns: [{
text: 'Item Number',
dataIndex: 'Item_Number'
}, {
xtype: 'yearcolumn',
text: 2013
}]
});
Ext.onReady(function() {
new Grid({
width: 200,
height: 200,
renderTo: document.body,
store: {
fields: ['Item_Number', 'foo'],
data: [{
Item_Number: 1,
foo: 2
}]
}
});
});

Sencha Touch. Ext.getStore() function

I'm trying to learn sencha touch by Oreilly application example which is produced in sencha touch documentation examples. Ext.getStore function returns undefined.
Code:
Ext.application({
//name space of application
name: 'sample',
title: '<img src="lib/resources/images/home.png"/>',
webserviceUrl: 'http://xxx/yyy/zzz.svc/',
requires: ['sample.util.Proxy'],
view: [
'Viewport',
'wares.lists.Popular',
'wares.lists.List'
],
model: [
'WaresListItem'
],
store: [
'Wares'
],
launch: function() {
Ext.Viewport.setMasked({ xtype: 'loadmask' });
sample.util.Proxy.process(function () {
Ext.create('sample.views.Viewport');
Ext.Viewport.setMasked(false);
});
}
});
//------
Ext.define('sample.views.Viewport', {
extend: 'Ext.tab.Panel',
title: 'Hello world!',
xtype: 'viewport',
config: {
fullscreen: true,
tabBar: {
docked: 'bottom',
},
items: [
{ xclass: 'sample.views.wares.lists.Popular' },
]
}
});
//-----
Ext.define('sample.views.wares.lists.Popular', {
extend: 'Ext.NavigationView',
requires: ['sample.views.wares.lists.List'],
xtype: 'Popular',
config: {
iconCls: 'home',
title: 'List',
items: [
{
xtype: 'wares',
}
]
}
});
//-----
Ext.define('sample.views.wares.lists.List', {
extend: 'Ext.List',
xtype: 'wares',
config: {
store: 'Wares',
itemTpl: {}
},
initialize: function () {
this.config.title = sample.app.title;
}
});
//-----
Ext.define('sample.util.Proxy', {
singleton: true,
requires: ['Ext.Ajax'],
process: function(callback) {
var wareListStore = Ext.getStore('Wares'); //returns undefinded
var wareModel;
console.log("Store: ", wareListStore);
Ext.Ajax.request({
url: sample.app.webserviceUrl + 'getSomeItems',
disableCaching: false,
useDefaultXhrHeader: false,
headers: {
"Content-Type": "application/json"
},
method: 'POST',
params: JSON.stringify({"Type":3}),
success: function (response) {
var result = JSON.parse(response.responseText);
if(true === result.Header.Status) {
Ext.Array.each(result.Body, function (ware) {
wareModel = Ext.create('sample.models.WaresListItem', ware);
// wareListStore.add(wareModel); //raises an error
});
} else {
console.log("Error code: %i", result.Header.ErrorCode);
}
},
failure: function (response) {
console.log('Houston, we have a problem!');
console.log(JSON.stringify(response));
}
});
callback();
}
});
//-----
Ext.define('sample.store.Wares', {
extend: 'Ext.data.Store',
config: {
model: "sample.models.WaresListItem"
}
});
I rewrote everything like in an example. What I have missed?
UPDATED: In console I see that store objects script isn't included at all.

Array names must be given these names views, controllers, models, stores and so on. Renaming the arrays fixed it.

Ext.define('sample.store.Wares', {
extend: 'Ext.data.Store',
config: {
model: "sample.models.WaresListItem",
storeId: 'Wares'
}
});
Try this should work... Hope it helps...

Displaying views that contain 'partial'/'nested' widgets in EXTjs 4

I'm having trouble understanding how I need to define and use the MVC model for my test EXTjs4 app. Consider the following structure.
app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Cards', 'Fourscrum'],
launch: function () {
Ext.create('Ext.container.Viewport', {
defaults: { flex: 1 },
layout: {
type: 'hbox',
align: 'stretch',
},
items:
[
Ext.widget('Fourscrum')
]
});
Controller:
Cards.js
Ext.define('AM.controller.Cards', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['card.List', 'priority.prioritycombo', 'card.Edit'],
Fourscrum.js
Ext.define('AM.controller.Fourscrum', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['scrum.Fourscrum', 'card.List'],
view.scrum.Fourscrum.js
Ext.define('AM.view.scrum.Fourscrum', { // *** Variable
extend: 'Ext.panel.Panel',
alias: 'widget.Fourscrum', // *** Variable
width: 400,
height: 300,
layout: 'column',
title: 'Scrum', // *** Variable
items:
[
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.inprogresscardlist',
title: "In Progress",
store: "InprogressCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.reviewcardlist',
title: "Review",
store: "ReviewCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.donecardlist',
title: "Done",
store: "DoneCards"
})
]
});
My ideal structure for this app is as follows:
Viewport defined (inside app.js)
which contains a Fourscrum.js view (which is just a panel)
which contains 4 different List.js views (which are just grids).
Trying to accomplish this, I currently get a few errors when i start messing with the above code:
Item undefined
namespace undefined
Does anyone know why this doesn't work?
PS. I can get this example to work if I replace my 'cardlist' widgets with panels directly defined in the Fourscrum view.
PPS. This also works properly if I forego the Fourscrum container panel all together :(
EDIT:
I felt my explanation was a little unclear so I've uploaded an image to help describe the program. I'm not sure where I need to define the stores, models, and views with this nested structure. So I've repeated it in both controllers. I hope that's not what is causing the problem.
EDIT2:
Ext.define('AM.view.card.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.cardlist',
//title: 'List',
//store: 'Cards',
//multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'ddzone',
dropGroup: 'ddzone'
}
},
// selType: 'cellmodel',
// plugins: [
// Ext.create('Ext.grid.plugin.CellEditing', {
// clicksToEdit: 1
// })
// ],
columns: [
{
header: 'ID',
dataIndex: 'external_id',
field: 'textfield',
width: 30
},
{
header: 'Name',
dataIndex: 'name',
field: 'textfield',
width: 150
},
{
header: 'Priority',
dataIndex: 'priority_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Priorities").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60,
field: { xtype: 'PriorityCombo' }
},
{
header: 'Size',
dataIndex: 'size_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Sizes").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60
},
{
xtype: 'actioncolumn',
width: 16,
items: [{
icon: 'Styles/Images/zoom.png', // Use a URL in the icon config
tooltip: 'Zoom In',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
}
]
});

I think I see a big problem in your code (if you pasted all of it).
In your view definitions if you are extending Ext components you MUST have the following function that ends in the callParent method like below.
initComponent: function() {
this.items = this.buildMyItems();
this.callParent(arguments);
},
buildMyItems: function(){
//my code
}

Robodude,
According to the Class guide on Sencha.com all widgets must be contained in properly named class files. I don't think you can simultaneously define and create your widgets in the panel definition.
Split out your definitions from the panel config. Also dont forget to enable the auto loader:
Ext.Loader.setConfig({
enabled : true
});