Develop Reference

ExtJS: Infinite scrolling not working

I am trying to make a grid with Infinite scroll. I followed the example here
but when ever I run the app, there is the following error in the console
verticalScroller config is not supported
I am using ExtJS 6.0.1 classic.
Below is my grid and store configuration
Store
Ext.define('Premier.store.MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',
pageSize: 4, // items per page
buffered: true,
remoteSort: true,
remoteFilter: true,
proxy: {
type: 'rest',
url: '/api/MyController',
reader: {
type: 'json',
rootProperty: 'Data',
idProperty: 'ID',
totalProperty: 'TotalCount'
}
}
});
Grid
{
xtype: 'grid',
height: 90,
columns: [{
text: 'Name',
dataIndex: 'Name',
flex: 1,
editor: {
allowBlank: false
},
filter: {
type: 'string'
}
}],
// store: store,
store: {
type: 'mystore'
},
verticalScroller: {
xtype: 'paginggridscroller',
activePrefetch: false
},
selModel: 'rowmodel',
plugins: [{
ptype: 'rowediting',
clicksToEdit: 2
}, {
ptype: 'gridfilters'
}]
}

It appears I was using the wrong Example. I was using an example from ExtJS 4.0.
I followed the example here and it worked fine.

Extjs not loading data from store

I'm learning extJS and trying to create simple application following this and that guides.
My app.js file:
sstore = new Ext.data.Store({
autoLoad: true,
fields: ['firstName', 'lastName', 'educationId', 'townId'],
proxy: {
type: "ajax",
url: "data",
reader: {
type:"json",
root: "users"
}
}
});
Ext.application({
name: 'Application',
autoCreateViewport: true,
controllers: ['MainController']
});
Viewport.js:
Ext.define('Application.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: { type: "vbox", align: 'stretch' },
items : [{
xtype: 'mainList',
autoScroll: true
}]
});
List.js:
Ext.define('Application.view.List', {
extend: 'Ext.grid.Panel',
alias : 'widget.mainList',
title : 'Users',
store: sstore, // ***** LOOK HERE PLEASE *****
//store: 'Users',
columns: [
{ header: 'Имя', dataIndex: 'firstName' },
{ header: 'Фамилия', dataIndex: 'lastName' },
{ header: 'Образование', dataIndex: 'educationId'},
{ header: 'Город', dataIndex: 'townId'}
]
});
Store (Users.js) :
Ext.define('Application.store.Users', {
extend: 'Ext.data.Store',
storeId: 'usersStore',
//model: 'Application.model.User',
fields: ['firstName', 'lastName', 'educationId', 'townId'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data',
reader: {
type: 'json',
root: 'users'
}
},
onProxyLoad: function (aOperation) {
console.log('From store');
console.log(aOperation);
}
});
When I'm changing store: sstore on store: 'Users' in my List.js file, it's not loading any data, but with store created in app.js file, which lives in sstore variable, it works ok.
What I tried and it didn't help:
using memory proxy,
used store: Ext.data.StoreManager.lookup('usersStore'),
it's not problem with backend data (because sstore works fine)
I can see that the store from Users.js is loading (because the console output from onProxyLoad function).
This is what I see in a browser:
Full js app lives here
My view file is here
And I'm using extJS 4.2

This was really stupid. Problem was in onProxyLoad function. When I deleted it from store app worked as I expected.

Sencha touch 2 - list not showing up

I am getting pretty desperate about this code and have no idea why it is not working. I am trying to load list from json file. He is my code:
views:
main view
Ext.define('Alerts.view.Main', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar',
items: [{
xtype: 'button',
text: 'Alerts',
id: 'alertsButton',
handler : function(){
//alert('tap')
var pnl = Ext.getCmp('hiddenPanel');
pnl.showBy(this,"tl-bl");
}
}]
},
{
xtype: 'AlertsList'
},
{
xtype: 'panel',
id: 'hiddenPanel',
// We give it a left and top property to make it floating by default
left: 0,
top: 40,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Make it hidden by default
hidden: true,
// Set the width and height of the panel
width: 400,
height: 400,
// Here we specify the #id of the element we created in `index.html`
contentEl: 'content',
// Style the content and make it scrollable
styleHtmlContent: true,
scrollable: true,
// Insert a title docked at the top with a title
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Add new',
items: [{
iconCls: 'add',
iconAlign : 'right',
id: 'newIcon',
handler : function(){
alert('icon')
//var pnl = Ext.getCmp('hiddenPanel');
//pnl.showBy(this,"tl-bl");
}
}]
}
]
}
]
}
});
AlertsList view:
Ext.define('Alerts.view.AlertsList', {
extend: 'Ext.Container',
requires: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
fullscreen: true,
title: 'list',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'Alert',
itemTpl: '<h1>item<h1>{name}',
}
]
}
});
model:
Ext.define('Alerts.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
store:
Ext.define("Alerts.store.Alert", {
extend: 'Ext.data.Store',
config: {
model: "Alerts.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url : "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
When i run the code, app loads fine, without any warns/errors - console is clear.

The main reason of the wrong behavior is that the store was not created before. Try to add the following changes. Add alias: 'store.alerts' to Alert store. Then use it as store: {type: 'alerts'} in the AlertsList. As mentioned here, this creates a store instance for you. Also I found some issues with the app layout, so I attach here short version of your code with my changes:
Ext.define('Test.view.Main', {
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar'
}, {
xtype: 'AlertsList'
}]
}
});
Ext.define('Test.view.AlertsList', {
extend: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
store: {
type: 'alerts'
},
itemTpl: '<h1>item<h1>{name}',
}
});
Ext.define('Test.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
Ext.define("Test.store.Alert", {
extend: 'Ext.data.Store',
alias: 'store.alerts',
config: {
model: "Test.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url: "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});

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'
}
}
},

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\":[]
}
}]
}"