When I create a WsapiDataStore, store.data.items and store.data.keys return empty arrays although I am able to see the keys and items when I do console.log(store.data)
store = Ext.create('Rally.data.WsapiDataStore', {
model: 'Defect',
context: {
project: '/project/xxxxxx'
},
autoLoad: true,
fetch: ['Rank', 'FormattedID', 'Name']
});
Output of console.log(store.data):
constructor {items: Array[0], map: Object, keys: Array[0], length: 0, allowFunctions: false…}
allowFunctions: false
events: Object
generation: 8
getKey: function (record) {
hasListeners: HasListeners
items: Array[7]
keys: Array[7]
length: 7
map: Object
sorters: constructor
__proto__: TemplateClass
Notice how the first line says "items: Array[0]" and "keys: Array[0]" but when expanded it says "items: Array[7]" and "keys: Array[7]". I'm also able to see the 7 records when I expand further.
Everything works as expected when I add a load listener and access the data from the listener function (but I don't want to do that)
I think the best way is to process the data via two Rally.data.WsapiDataStore's. You'll need to chain the listeners for the two stores together in order to properly handle the asynchronous loads. Here's an example that illustrates the process:
<!DOCTYPE html>
<html>
<head>
<title>MultipleModelExample</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
// Combined Story/Defect Records
dataRecords: null,
launch: function() {
//Write app code here
this.dataRecords = [];
Rally.data.ModelFactory.getModels({
types: ['HierarchicalRequirement','Defect'],
scope: this,
success: function(models) {
this.myModels = models;
this.storyStore = Ext.create('Rally.data.WsapiDataStore', {
model: models.HierarchicalRequirement,
fetch: true,
autoLoad: true,
remoteSort: true,
sorters: [
{ property: 'FormattedID', direction: 'Asc' }
],
listeners: {
load: this._processStories,
scope: this
}
});
}
});
},
_processStories: function(store, records, successful, opts) {
var storyRecords = [];
Ext.Array.each(records, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
storyRecords.push({
FormattedID: record.get('FormattedID'),
Name: record.get('Name'),
Description: record.get('Description')
});
});
this.dataRecords = storyRecords;
this.defectStore = Ext.create('Rally.data.WsapiDataStore', {
model: this.myModels.Defect,
fetch: true,
autoLoad: true,
remoteSort: true,
sorters: [
{ property: 'FormattedID', direction: 'Asc' }
],
listeners: {
load: this._processDefects,
scope: this
}
});
},
_processDefects: function(store, records, successful, opts) {
var defectRecords = [];
Ext.Array.each(records, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
defectRecords.push({
FormattedID: record.get('FormattedID'),
Name: record.get('Name'),
Description: record.get('Description')
});
});
var combinedRecords = defectRecords.concat(this.dataRecords);
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: combinedRecords,
pageSize: 25
}),
columnCfgs: [
{
text: 'FormattedID', dataIndex: 'FormattedID'
},
{
text: 'Name', dataIndex: 'Name', flex: 1
},
{
text: 'Description', dataIndex: 'Description', flex: 1
}
]
});
}
});
Rally.launchApp('CustomApp', {
name: 'MultipleModelExample'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
Related
I'm using Sencha 2.3.0 and I want to have a XTemplate side-to-side to a component (textfield) on a ListItem. The code above works fine for DataView/DataItem, but I want to use the grouped property that is only available on List/ListItem.
The nested Xtemplate gets rendered fine as DataItem. How can I make it work for ListItem? I'm also receptive for solutions that drop this nested structure and use the xtemplate as tpl property directly on the ListItem (of course the textfield with listeners must be implemented as well).
list
Ext.define( 'app.view.myList', {
//extend: 'Ext.dataview.DataView',
extend: 'Ext.dataview.List',
xtype: 'mylist',
requires: [
'app.view.MyItem'
],
config: {
title: "myTitle",
cls: 'mylist',
defaultType: 'myitem',
grouped: true,
store: 'myStore',
useComponents: true,
itemCls: 'myitem',
items: [
{
// some components
}
]
}
});
listitem
Ext.define( 'app.view.myItem', {
//extend: 'Ext.dataview.component.DataItem',
extend: 'Ext.dataview.component.ListItem',
xtype: 'myitem',
config: {
cls: 'myitem',
items: [
{
xtype: 'component',
tpl: new Ext.XTemplate([
'<table cellpadding="0" cellspacing="0" class="myitemXTemplate">',
//some xtemplate content
'</table>'
].join( "" ),
{
compiled: true
})
},
{
label: 'some label',
cls : 'myitemtextfield',
xtype: 'textfield',
name: 'myitemtextfield'
}
]
}
});
Thanks in advance!
Modifed /touch-2.4.2/examples/list/index.html
The model:
Ext.define('model1', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
}
});
The CustomListItem
Ext.define('DataItem', {
extend: 'Ext.dataview.component.ListItem',
xtype: 'basic-dataitem',
requires: [
'Ext.Button',
'Ext.Component',
'Ext.layout.HBox',
'Ext.field.Checkbox'
],
config: {
dataMap : {
/* getFirstname : {
setData : 'firstName'
},*/
getLastname : {
setValue : 'lastName'
}
},
layout: {
type: 'hbox',
height:'200px',
},
firstname: {
cls: 'firstname',
xtype:'component',
data:{data:'hej'},
tpl: new Ext.XTemplate([
'<H1>',
'{data}',
'</H1>'
].join(""),
{
compiled: true
})
},
lastname: {
xtype:'textfield',
css:'lastname'
}
},
applyFirstname : function (config) {
return Ext.factory(config, Ext.Component, this.getFirstname());
},
updateFirstname : function (newName) {
if (newName) {
this.add(newName);
}
},
applyLastname : function (config) {
return Ext.factory(config, Ext.Component, this.getLastname());
},
updateLastname : function (newAge) {
if (newAge) {
this.add(newAge);
}
},
applyFirstName: function (config) {
return Ext.factory(config, 'Ext.Component', this.getLastname());
},
updateRecord: function(record) {
if (!record) {
return;
}
this.getFirstname().setData({data:record.get("firstName")});
this.callParent(arguments);
}
});
The store
var store = Ext.create('Ext.data.Store', {
//give the store some fields
model: 'model1',
//filter the data using the firstName field
sorters: 'firstName',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
groupFn: function (record) {
return record.get('firstName')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
The list
xtype: 'list',
useSimpleItems: false,
defaultType: 'basic-dataitem',
id: 'list',
ui: 'round',
//bind the store to this list
store: store
Below is my code to display three comboboxes, which will be Filter by severity, start release and end release. When I refresh the page I want comboboxes to remember what was selected earlier. Now it shows the current release in both the comboboxes.
Any help on this
launch: function() {
var that = this;
this.down('#SevFilter').add({
xtype: 'rallyattributecombobox',
cls: 'filter',
itemId: 'severity',
model: 'Defect',
labelWidth: 117,
fieldLabel : 'Filter By Severity:',
field: 'Severity',
allEntryText: '-- ALL --',
allowNoEntry: true,
_insertNoEntry: function(){
var record;
var doesNotHaveAllEntry = this.store.count() < 1 || this.store.getAt(0).get(this.displayField) !== this.allEntrylText;
if (doesNotHaveAllEntry) {
record = Ext.create(this.store.model);
console.log("record value", record);
record.set(this.displayField, this.allEntryText);
record.set(this.valueField, "-1");
this.store.insert(0, record);
}
/*var doesNotHaveNoEntry = this.store.count() < 2 || this.store.getAt(1).get(this.displayField) !== this.noEntryText;
if (doesNotHaveNoEntry) {
record = Ext.create(this.store.model);
record.set(this.displayField, this.noEntryText);
record.set(this.valueField, null);
this.store.insert(1, record);
}*/
},
listeners: {
//ready: this._onSevComboBoxLoad,
select: this._onSevComboBoxSelect,
scope: this
}
});
var button = this.down('#goButton');
button.on('click', this.goClicked, this);
this.down('#SevFilter').add({
xtype: 'rallyreleasecombobox',
//multiSelect: true,
itemId: 'priorityComboBox',
fieldLabel: 'Release Start:',
model: 'release',
width: 400,
valueField: 'ReleaseStartDate',
displayField: 'Name',
// multiSelect: true,
//field: 'Name',
_removeFunction: function(){
console.log("this.store");
},
listeners: {
//select: this._onSelect,
select: this._onFirstReleaseSelect,
scope: this
}
});
this.down('#SevFilter').add({
xtype: 'rallyreleasecombobox',
itemId: 'priorityComboBox2',
fieldLabel: 'Release End:',
model: 'release',
//multiSelect: true,
stateId: 'rally.technicalservices.trend.defect.release',
stateful: true,
stateEvents: ['change'],
width: 400,
valueField: 'ReleaseDate',
displayField: 'Name',
listeners: {
change: function(box) {
var start_date = this.down('#priorityComboBox2').getDisplayField();
this.logger.log(start_date);
},
ready: this._removeFutureReleases,
select: this._onSecondReleaseSelect,
// ready: this._onLoad,
scope: this
},
});
},
In javascript you may use localstorage.
Here is an app example that retains State and Release selections in respective compboboxes when page is refreshed:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{html:'Select a Filter checkbox to filter the grid'},
{
xtype: 'container',
itemId: 'StateFilter'
},
{
xtype: 'container',
itemId: 'ReleaseFilter'
}
],
launch: function() {
document.body.style.cursor='default';
this._createFilterBox('State');
this._createFilterBox('Release');
},
_createFilterBox: function(property){
this.down('#'+property+'Filter').add({
xtype: 'checkbox',
cls: 'filter',
boxLabel: 'Filter table by '+property,
id: property+'Checkbox',
scope: this,
handler: this._setStorage
});
this.down('#'+property+'Filter').add({
xtype: 'rallyattributecombobox',
cls: 'filter',
id: property+'Combobox',
model: 'Defect',
field: property,
value: localStorage.getItem(property+'Filtervalue'), //setting default value
listeners: {
select: this._setStorage,
ready: this._setStorage,
scope: this
}
});
},
_setStorage: function() {
localStorage.setItem('StateFiltervalue',Ext.getCmp('StateCombobox').getValue());
localStorage.setItem('ReleaseFiltervalue',Ext.getCmp('ReleaseCombobox').getValue());
console.log('localStorage State: ', localStorage.StateFiltervalue,', localStorage Release:', localStorage.ReleaseFiltervalue);
this._getFilter();
},
_getFilter: function() {
var filter = Ext.create('Rally.data.wsapi.Filter',{property: 'Requirement', operator: '=', value: 'null'});
filter=this._checkFilterStatus('State',filter);
filter=this._checkFilterStatus('Release',filter);
if (this._myGrid === undefined) {
this._makeGrid(filter);
}
else{
this._myGrid.store.clearFilter(true);
this._myGrid.store.filter(filter);
}
},
_checkFilterStatus: function(property,filter){
if (Ext.getCmp(property+'Checkbox').getValue()) {
var filterString=Ext.getCmp(property+'Combobox').getValue()+'';
var filterArr=filterString.split(',');
var propertyFilter=Ext.create('Rally.data.wsapi.Filter',{property: property, operator: '=', value: filterArr[0]});
var i=1;
while (i < filterArr.length){
propertyFilter=propertyFilter.or({
property: property,
operator: '=',
value: filterArr[i]
});
i++;
}
filter=filter.and(propertyFilter);
}
return filter;
},
_makeGrid:function(filter){
this._myGrid = Ext.create('Rally.ui.grid.Grid', {
itemId:'defects-grid',
columnCfgs: [
'FormattedID',
'Name',
'State',
'Release'
],
context: this.getContext(),
storeConfig: {
model: 'defect',
context: this.context.getDataContext(),
filters: filter
}
});
this.add(this._myGrid);
}
});
The source is available here.
You could use Sencha localstorage proxy. This way you can keep consistency in your project and use a localstorage based store across all your code.
You can use stateful and stateId configurations to enable last selection. Here is an example of my code. Here what I am doing is to create a custom combobox that will show two options: Platform and program. Then for stateId, you can use any string that you want:
_createCategoryFilter: function()
{
// The data store containing the list of states
var platformTypeList = Ext.create('Ext.data.Store',
{
fields: ['abbr', 'name'],
data : [
{"abbr":"PLAN", "name":"Platform"},
{"abbr":"CURR", "name":"Program"},
//...
]
});
// Create the combo box, attached to the states data store
var platformTypeFilter = Ext.create('Ext.form.ComboBox',
{
fieldLabel: 'Select category',
store: platformTypeList,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
stateful: true,
stateId: 'categoryFilter',
listeners:
{
afterrender: function(param)
{
console.log('afterrender - category param is', param.rawValue);
CategoryFilterValue = param.rawValue;
LoadInformation();
},
select: function(param)
{
console.log('select - category param is', param.rawValue);
CategoryFilterValue = param.rawValue;
},
scope: this,
}
});
this.add(platformTypeFilter);
},
so I am trying to modify the example Cumulative flow chart here so that it has a release dropdown, making it so that it only shows information pertaining to a given release. My problem is that when a new release is selected from the release dropdown, the graph does not reload itself, and so it never actually shows information pertinent to the selected release. I think I have implemented the listeners correctly but I am not sure, so I am wondering if someone could tell me why this is happening and how to fix it. Thanks! My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Historical Summary</title>
<script type="text/javascript" src="/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CFDCalculator', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
config: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
getMetrics: function() {
return _.map(this.getStateFieldValues(), function(stateFieldValue) {
return {
as: stateFieldValue,
groupByField: this.getStateFieldName(),
allowedValues: [stateFieldValue],
f: 'groupByCount',
display: 'area'
};
}, this);
}
});
Ext.define('Rally.example.CFDChart', {
extend: 'Rally.app.App',
requires: [
'Rally.example.CFDCalculator'
],
launch: function() {
this.add({
xtype: 'rallyreleasecombobox',
fieldLabel: 'Filter by Release:',
project: this.getContext().getProject(),
//value: Rally.util.Ref.getRelativeUri(this.getContext().getRelease()),
listeners: {
select: this._onSelect,
ready: this._onLoad,
scope: this
}
});
},
_onLoad: function() {
this.add({
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
//context: this.getContext();
});
},
_onSelect: function() {
var histChart = this.down('rallychart');
histChart.refresh({
storeConfig: {
filters: [this._getOwnerFilter()]
}
});
},
_getOwnerFilter: function() {
//var userCombo = this.down('rallyusersearchcombobox');
var releaseValue = this.down('rallyreleasecombobox');
return {
property: 'Release',
operator: '=',
value: releaseValue.getValue()
};
},
/**
* Generate the store config to retrieve all snapshots for stories and defects in the current project scope
* within the last 30 days
*/
_getStoreConfig: function() {
return {
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'TestSet' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) }
},
fetch: ['ScheduleState'],
hydrate: ['ScheduleState'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity
};
},
/**
* Generate a valid Highcharts configuration object to specify the chart
*/
_getChartConfig: function() {
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Project Cumulative Flow: User Stories & Test Sets'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 1,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
}
});
Rally.launchApp('Rally.example.CFDChart', {
name: 'Historical summary: test cases, stories, and defects'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Your code errors with "Uncaught TypeError: undefined is not a function" on line
histChart.refresh
I modified example of ProjectCumulativeFlow to filter by Release. Full code is in this github repo.
Instead of extending Rally.app.App, I extended Rally.app.TimeboxScopedApp.
SnapshotStore may filter by Release, but requires ObjectID.
Here is the find:
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'Defect' ] },
Release: this.getContext().getTimeboxScope().record.data.ObjectID,
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID
}
To update the app after Release selection check if the chart already exists (if yes, destroy it):
onScopeChange: function() {
if (this.down('#mychart')) {
this.down('#mychart').destroy();
}
this.add({
xtype: 'rallychart',
itemId: 'mychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
});
},
I am new to Sencha Touch. I have a list inside a view. I would like to refer to the list with in initial function of the view. And with in the function, I am going to set store to the list.
My View:
Ext.define('NCAPP.view.tablet.MainMenu',{
extend:'Ext.Container',
xtype:'mainMenu',
id:'mainMenu',
requires:['Ext.TitleBar','Ext.dataview.List'],
config:{
loggedInUser:'',
fullscreen:true,
tabBarPosition: 'top',
items:[{
xtype:'titlebar',
title:'NetCenter APP',
items:[{
xtype:'list',
id:'menuList',
itemCls:'listItem'
}
]
}]
},
initialize: function () {
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Loading ...'
});
var moduleStore=Ext.create('NCAPP.store.Module');
moduleStore.load({
callback:function(records,operation,success){
Ext.Viewport.setMasked(false);
// I would like to refer to the list here and set store to it
var menu=this.menulist;
menu.setStore(moduleStore);
console.log(records);
},
scope:this
});
}
});
Can anyone help me please? Thanks
My Model:
Ext.define('NCAPP.model.Module', {
extend:'Ext.data.Model',
config:{
fields:[
{ name:'id', type: 'int'},
{ name: 'name', type: 'string'},
{ name: 'description', type:'string'}
]
}
});
And my store:
Ext.define('NCAPP.store.Module',{
extend:'Ext.data.Store',
config: {
model:'NCAPP.model.Module',
autoLoad:false,
proxy: {
type:'rest',
url:NCAPP.app.baseApiUrl+'/user/module/1/',
noCache: false,
//limitParam: false,
//enablePagingParams: false,
// startParam: false,
reader: {
type:'json',
rootProperty:'modules'
}
}
}
});
Since you've already set id for your list, then you just need to use Ext.getCmp() to retrieve your list:
var menu = Ext.getCmp("menuList");
menu.setStore(moduleStore);
To populate the list afterwards, try refresh:
menu.refresh();
I am trying to hide the column if all the cells in the column are empty. I am trying to do this in the column listener by iterating through the store but I guess the store isnt populated at that time. any suggestions to achieve this functionality?
Ext.define('com.abc.MyGrid' , {
extend: 'Ext.grid.Panel',
store : 'MyStore',
columns : [{
text : 'col1',
sortable : true,
dataIndex : 'col1'
}, {
text : 'col2 ',
sortable : true,
dataIndex : 'col2',
listeners:{
"beforerender": function(){
console.log(this.up('grid').store);
this.up('grid').store.each(function(record,idx){
// if all are null for record.get('col1')
// hide the column
console.log(record.get('col1'));
});
}
}
}
})
But this is isnt working. Basically the store loop in the column listener "before render" is not executing where as the above console(this.up('grid').store) prints the store with values.
Here you go, it doesn't handle everything but should be sufficient.
Ext.define('HideColumnIfEmpty', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.hideColumnIfEmpty',
mixins: {
bindable: 'Ext.util.Bindable'
},
init: function(grid) {
this.grid = grid;
this._initStates();
this.grid.on('reconfigure', this._initStates, this);
},
_initStates: function(store, columns) {
var store = this.grid.getStore(),
columns = this.grid.columns;
this.bindStore(store);
this.columns = columns;
if(store.getCount() > 0) {
this._maybeHideColumns();
}
},
/**
*#implement
*/
getStoreListeners: function() {
return {
load: this._maybeHideColumns
};
},
_maybeHideColumns: function() {
var columns = this.columns,
store = this.store,
columnKeysMc = new Ext.util.MixedCollection();
Ext.Array.forEach(columns, function(column) {
columnKeysMc.add(column.dataIndex, column);
});
Ext.Array.some(store.getRange(),function(record){
//don't saw off the branch you are sitting on
//eachKey does not clone
var keysToRemove = [];
columnKeysMc.eachKey(function(key) {
if(!Ext.isEmpty(record.get(key))) {
keysToRemove.push(key);
}
});
Ext.Array.forEach(keysToRemove, function(k) {
columnKeysMc.removeAtKey(k);
});
return columnKeysMc.getCount() === 0;
});
columnKeysMc.each(function(column) {
column.hide();
});
}
});
Here is an example:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' },
{ text: 'Says Doh', dataIndex: 'saysDoh'}
],
plugins: {ptype: 'hideColumnIfEmpty'},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
You can see in the example that saysDoh column is hidden.
If you want to iterate over the store, you need to put a listener on the load event of your store. The beforerender doesn't mean that your store is already loaded.
I would put the creation of you store in the initComponent. Something like this:
Ext.define('com.abc.MyGrid', {
extend: 'Ext.grid.Panel',
columns: [{
text: 'col1',
sortable: true,
dataIndex: 'col1'
}, {
text: 'col2 ',
sortable: true,
dataIndex: 'col2'
},
initComponent: function () {
var me = this;
//Create store
var myStore = Ext.create('MyStore');
myStore.load(); // You can remove this if autoLoad: true on your store.
//Listen to load event (fires when loading has completed)
myStore.on({
load: function (store, records, success) {
store.each(function (record, idx) {
console.log(record.get('col1'));
});
}
});
//Apply the store to your grid
Ext.apply(me, {
store: myStore
});
me.callParent();
}
});