Develop Reference

ExtJS pagination is not working and Uncaught ReferenceError: store is not defined

Pagination is not working and my console is showing "Uncaught ReferenceError: store is not defined", I don't know where I am doing wrong.
I'm using eclipse for the development.
Below is my code please guide me I am new in ExtJS.
js_ext.js
Ext.onReady(function() {
var itemsPerPage = 6;
Ext.create('Ext.data.Store', {
storeId: 'mydata',
fields:[ 'title', 'desc', 'year', 'lang', 'name', 'rate', 'special'],
pageSize: itemsPerPage,
autoLoad: true,
proxy:{
type:'ajax',
url: 'mystoredata.js',
enablePaging: true,
reader: {
type: 'json',
rootProperty: 'items'
}
},
});
Ext.create('Ext.grid.Panel', {
title: 'Movie Grid',
store: 'mydata',
columns: [
{ text: 'Title', dataIndex: 'title', flex: .2 },
{ text: 'Description', dataIndex: 'desc', flex: 1 },
{ text: 'Release Year', dataIndex: 'year' },
{ text: 'Language', dataIndex: 'lang' },
{ text: 'Director', dataIndex: 'name' },
{ text: 'Rating', dataIndex: 'rate' },
{ text: 'Special Features', dataIndex: 'special', flex: .14}
],
height: 330,
fullscreen: true,
renderTo: 'mygrid',
selModel: {
selType: 'checkboxmodel'
},
tbar: {
xtype: 'pagingtoolbar',
displayInfo: true,
store: 'mydata',
pageSize: itemsPerPage
}
});
store.load({params:{start:0, limit:6}});
});
When I'm trying to use store.load function it throws the error store is not defined.

You have to assign the created store instance to a variable and then assign this variable to both your grid and paging toolbar:
var myStore = Ext.create('Ext.data.Store', { ...
...
store: myStore, // both in grid an paging toolbar
...
With autoLoad: true as you use you don't need to call load on the store.
You don't have to worry about setting start and limit, ExtJS will automatically add these as pageSize is set.

selectfield not loading on build

I am almost giving up. I’ve being trying for almost a month to develop an app using sencha touch 2.2.1 and sencha cmd 3.1.2.324. All works on development, but after create the production file (sencha app build) my selectfield do not load.
Actually I’d isolated all pages on the app and I am working just with few cards. From chrome I can check the webservice is called and return as expected. The console doesn’t show any error, but the selectfield remain empty.
Any clue?
Panel:
Ext.define('MySecondApp.view.Home', {
extend: 'Ext.Panel',
xtype: 'mg_home',
config:
{
title: 'Home',
id: 'tabHome',
iconCls: 'info',
layout: 'vbox',
xtype: 'panel',
items:
[
{docked: 'top',xtype: 'titlebar',title: 'Home'},
{
xtype: 'selectfield',
name: 'selectMesHome',
id: 'selectMesHome',
action: 'selectMesHome',
label: 'Mes', /*TODO*/
scrollable: true,
displayField: 'dc_data',
valueField: 'vl_data',
store: 'mesesHome'
},
{
xtype: 'panel',
id: 'home_content',
html: 'carregando...'
}
]
}
});
model:
Ext.define('MySecondApp.model.Meses', {
extend: 'Ext.data.Model',
config: {
fields :
[
{name:'dc_data', type:'string'},
{name:'vl_data', type:'string'}
]
}
});
store:
Ext.define('MySecondApp.store.mesesHome', {
extend: 'Ext.data.Store',
storeId: 'mesesHomeStore',
config: {
model: 'MySecondApp.model.Meses',
autoLoad: true,
proxy:
{
type: 'ajax',
url: 'http://www.meusgastos.com.br/touch/rest/meses.php',
reader:
{
type: 'json',
root: 'data'
}
}
}
});
ajax request some credentials previous saved (and tested, and working). The response will be:
{
"HEADER": [],
"vl_atual": "201308",
"data": [
{
"dc_data": "Agosto/2013",
"vl_data": "201308"
},
{
"dc_data": "Julho/2013",
"vl_data": "201307"
},
{
"dc_data": "Junho/2013",
"vl_data": "201306"
},
{
"dc_data": "Maio/2013",
"vl_data": "201305"
},
{
"dc_data": "Abril/2013",
"vl_data": "201304"
},
{
"dc_data": "Março/2013",
"vl_data": "201303"
}
]
}

Make these changes and try again
In Store (MySecondApp.store.mesesHome)
1) Put the storeId inside config
2) change reader root as rootProperty
So, store looks like this
Ext.define('MySecondApp.store.mesesHome', {
extend: 'Ext.data.Store',
config: {
storeId: 'mesesHomeStore',
model: 'MySecondApp.model.Meses',
autoLoad: true,
proxy:
{
type: 'ajax',
url: 'http://www.meusgastos.com.br/touch/rest/meses.php',
reader:
{
type: 'json',
rootProperty: 'data'
}
}
}
});
In view (MySecondApp.view.Home)
This change is not necessary, But still i suggest you to do this.
Give storeId to store property of selectfield
{
xtype: 'selectfield',
name: 'selectMesHome',
id: 'selectMesHome',
action: 'selectMesHome',
label: 'Mes', /*TODO*/
scrollable: true,
displayField: 'dc_data',
valueField: 'vl_data',
store: 'mesesHomeStore'
},

Sencha scroll bug android 2.3.5

After switching production mode on sencha touch 2 scroll seemed to nearly die on android 2 3 5 device, though on iphone/ipad everything works fine, any ideas?
im using Ext.NestedList
scroll:'vertical',
fullscreen:true,
thanks
Ext.define('front.view.Main', {
extend: 'Ext.data.Model',
require: ["Ext.data.proxy.SQL", "Ext.field.Search", "Ext.NestedList", "Ext.data.Store"],
config: {
fields: ['text'],
scrollable: {
direction: 'vertical'
}
},
listeners:{
intialize:function(){
}
}
});
treestore = Ext.create("Ext.NestedList", {
fullscreen: true,
scrollable: {
direction: 'vertical'
},
updateTitleText :false,
useTitleAsBackText: false,
defaultBackButtonText : null,
backText: '<div class="backtext"></div>',
tabBarPosition: 'bottom',
useToolbar:true,
id: 'mainPanel',
/*listConfig:{
itemTpl:'<div class="nav-element"><span style="" class="txt">{name}</span><span class="calc">'+f_count+'</span></div>'
},*/
title: '<div class="titleimg"></div>',
displayField: 'title',
store: {
storeId:'ms',
type: 'tree',
id: 'ListCard',
fields: [
'title','code','name','c_count',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'http://now-yakutsk.stairwaysoft.net/frontmodel/catlist.php?f_count='+f_count,
reader: {
type: 'json',
rootProperty: 'cat'
}
}
},

Wrong sort order in combobox with extjs

I'm having a data sort problem with a combobox.
Data source is JSON. Data is sorted in sql. Resulting set(in sql) and JSON result looks fine:
{"rows":[{"id":"TOT","txt":" Alle diagnosen"},{"id":"612","txt":"(acute) bloeding distale tract. digestivus*"},{"id":"042","txt":"(auto)-intoxicatie"},{"id":"402","txt":"(benigne) peptisch ulcus*"},{"id":"10","txt":"(bij)niertumor"},{"id":"652","txt":"(chorio)retinitis.. etc etc
Resulting data looks fine(=same sort order as JSON result) when I inspect the store with with firebug:
However, the resulting combobox has a different(wrong) sorting(first 2 are ok):
It is not sorted on the display value, nor on the id value. There is no sorter added anywwhere.
Combo:
{
xtype: 'combobox',
id: 'ComboDiag',
itemId: 'ComboDiag',
width: 280,
fieldStyle: '',
name: 'ComboDiag',
fieldLabel: 'Diagnose',
labelWidth: 90,
displayField: 'txt',
queryMode: 'local',
store: 'ComboDiagStore',
typeAhead: true,
valueField: 'id',
listeners: {
render: {
fn: me.onComboDiagRender,
scope: me
}
}
}
Store:
Ext.define('AppPitDash.store.ComboDiagStore', {
extend: 'Ext.data.Store',
alias: 'store.ComboDiagStore',
requires: [
'AppPitDash.model.ComboDiagModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'ComboDiagStore',
model: 'AppPitDash.model.ComboDiagModel',
proxy: {
type: 'ajax',
url: './php/get-data-diagCombo.php',
reader: {
type: 'json',
root: 'rows'
}
}
}, cfg)]);
}
});
Model:
Ext.define('AppPitDash.model.ComboDiagModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'txt'
}
]
});
I'm using Sencha Architect 2, first time.
This is rather an annoyance than a showstopper, but still help would be appreciated.

Try adding remoteSort: true to callParent method in store definition.

Try to use:
remoteGroup: true,
remoteSort: true,
sortInfo: { field: 'order', direction: 'DESC' },

ExtJS 4 tree panel items visible in Firefox but not in Chromium

I was creating Tree Panel similar to TreeGrid example with drag'n'drop. The only problem is that items are correctly shown in tree panel in Firefox browser whereas in Chromium tree grid is empty. How's that possible?
JSON data sent to server:
{"text":".","children": [
{
"id":null,
"name":"en",
"visible":false,
"expanded":true,
"leaf":false,
"children":{
"id":5,
"name":"/",
"visible":false,
"expanded":true,
"leaf":true,
"children":[]
}
}]
}
Model
Ext.define('Example.model.WebTreeItem', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id', type: 'int', defaultValue: 0},
{name: 'visible', type: 'boolean' },
{name: 'name', type: 'string' }
]
});
Store
Ext.define('Example.store.WebTreeItems', {
extend: 'Ext.data.TreeStore',
model: 'Example.model.WebTreeItem',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read : 'getlist.json'
},
reader: {
type: 'json'
}
}
});
View
Ext.define('Example.view.webitem.Tree', {
extend: 'Ext.tree.Panel',
alias : 'widget.webtreeitem',
title : 'Web items',
store: 'WebTreeItems',
rootVisible: false,
multiSelect: true,
singleExpand: false,
collapsible: true,
selModel: Ext.create('Ext.selection.CheckboxModel'),
height: 800,
renderTo: 'webstructure-tree',
columns: [{
xtype: 'treecolumn',
text: 'Name',
flex: 2,
sortable: true,
dataIndex: 'name'
},{
xtype: 'booleancolumn',
text: 'Visible',
flex: 1,
dataIndex: 'visible',
sortable: false
}],
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
}]
});
Dependencies are loaded automatically using
Ext.Loader.setConfig({enabled:true});
Ext.application({
...
});
Any suggestion will be highly appreciated.

Well I thought that I was sending aforementioned JSON, but in fact I was sending something like this (quoted response with escaped quotes) and Chromium couldn't read it correctly
"{\"text\":\".\",\"children\": [
{
\"id\":null,
\"name\":\"en\",
\"visible\":false,
\"expanded\":true,
\"leaf\":false,
\"children\":{
\"id\":5,
\"name\":\"/\",
\"visible\":false,
\"expanded\":true,
\"leaf\":true,
\"children\":[]
}
}]
}"