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'
}
}
},
Related
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.
I have a grid with a pagination. When I set a filter, the ajax request is successfully executed, the json return value looks fine and the filtered rows appear in my grid.
But the Loading... popup won't disappear and Firebug reports an error in ext-all-debug.js: TypeError: data is null (Line 134684). The code at that point is:
data = store.getData();
items = data.items; // error
I've checked my JS several times, but I can't find the problem.
Unfortunately I can't create a fiddle, since I use remote filtering. So here's the script:
Ext.onReady (function () {
Ext.define('FooModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'myId', type: 'int' },
{ name: 'myDate', type: 'date', dateFormat: 'Y-m-d H:i:s' },
{ name: 'myString', type: 'string' },
{ name: 'myFilename', type: 'string' },
{ name: 'myUser', type: 'string' }
]
});
Ext.define('FooStore', {
extend: 'Ext.data.Store',
model: 'FooModel',
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'ajax',
url: 'test.php',
reader: {
type: 'json',
rootProperty: 'import_files',
messageProperty: 'error',
}
},
remoteFilter: true,
remoteSort: true,
sorters: [{
property: 'myId',
direction: 'ASC'
}],
pageSize: 5
});
var theFooStore = new FooStore();
theFooStore.load({
callback: function(records, operation, success) {
if(!success) {
Ext.Msg.alert('Error', operation.getError());
}
}
});
Ext.define('FooGrid', {
extend: 'Ext.grid.Panel',
xtype: 'grid-filtering',
requires: [ 'Ext.grid.filters.Filters' ],
width: 1000,
height: 700,
renderTo: 'content',
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
store: theFooStore,
defaultListenerScope: true,
columns: [
{ dataIndex: 'myId', text: 'My Id', filter: 'number' },
{ xtype: 'datecolumn', dataIndex: 'myDate', text: 'My Date', renderer: Ext.util.Format.dateRenderer('d.m.Y'), filter: true },
{ dataIndex: 'myString', text: 'My String', filter: 'list' },
{ dataIndex: 'myFilename', text: 'My Filename',
renderer: function(value, meta, record) {
return Ext.String.format('{1}', record.data.myId, value);
},
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
{
dataIndex: 'myUser', text: 'My User',
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: theFooStore,
dock: 'bottom',
displayInfo: true
}]
});
new FooGrid();
});
And here's a sample json return value:
{
"success" : true,
"total" : 19,
"import_files" : [{
"myId" : "1",
"myFilename" : "foo bar.xlsx",
"myDate" : "2015-05-19 13:23:21",
"myUser" : "ABC",
"myString" : "Lorem ipsum"
},
...
]
}
Has someone experienced the same issue? What could it cause?
Just my luck. Found the answer shortly after posting the question.
Deleting the filter: 'list' option at my My String column is the solution.
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'
},
I would like to implement a tree panel with content loaded dynamically from the server (as Json) and with a custom data model. But I dont know how to define a model and a data store for that tree. Can you provide some examples? If possible, I'd like to conform to the sencha mvc recommendations (the model and the data store defined as separate classes).
I knew how to do it in extjs 3 but i'm lost in version 4.
Best regards
RG
I experimented with a new MVC approach recently, and I managed to get it work with the treepanel. Nothing special actually:
View:
Ext.define('RoleBuilder.view.RoleList', {
extend: 'Ext.tree.Panel',
alias: 'widget.roles',
title: 'Roles',
store: 'Roles'
});
Store:
Ext.define('RoleBuilder.store.Roles', {
extend: 'Ext.data.TreeStore',
model: 'RoleBuilder.model.Role',
requires: 'RoleBuilder.model.Role',
root: {
text: 'Roles',
expanded: true
},
proxy: {
type: 'ajax',
url: loadRolesUrl,
actionMethods: 'POST',
reader: {
type: 'json'
}
}
});
Model:
Ext.define('RoleBuilder.model.Role', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int', mapping: 'Id' },
{ name: 'text', type: 'string', mapping: 'Text' },
{ name: 'leaf', type: 'boolean', mapping: 'Leaf' },
{ name: 'loaded', type: 'boolean', mapping: 'Loaded', defaultValue: false },
{ name: 'Properties'},
{ name: 'expanded', defaultValue: true }
]
});
Controller:
Ext.define('RoleBuilder.controller.RoleList', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'roles': {
itemcontextmenu: this.onItemContextMenuClick,
itemclick: this.onItemClick
}
});
this.application.on({
'role-saved': Ext.Function.bind(this.onRoleSaved, this)
});
},
..... too long, but you got the idea.
Hope it will help.
I struggle so much to get this working. I want to share with you in case you need it.
Here is my view:
Ext.define("GiipIq.view.Problem", {
extend: "Ext.window.Window",
alias: "widget.problemwindow",
titleAlign: "center",
closable: false,
layout: "border",
autoShow: true,
maximizable: true,
draggable: false,
resizable: false,
x: 0,
y: 0,
width: Ext.getBody().getViewSize().width/2,
height: Ext.getBody().getViewSize().height/2,
id: "problem-window",
getEastPanel: function() {
return {
region: "west",
xtype: "treepanel",
title: "Problems",
width: 200,
split: true,
collapsible: false,
floatable: false,
rootVisible: false,
useArrows: true,
store: Ext.create("GiipIq.store.Problems"),
id: "problems",
dockedItems: [{
xtype: "toolbar",
dock: "bottom",
layout: "fit",
items: [{
xtype: "button",
text: 'Click to Run Selected Problems',
id: "run-problems-button"
}]
}],
listeners: {
checkchange: function(node, checkedStatus, options) {
console.log("vp");
}
}
};
},
getCentralPanel: function() {
return {
xtype: "tabpanel",
width: (Ext.getBody().getViewSize()/2) - 200,
bodyBorder: false,
items: [{
title: "Problem Description",
id: "problem-description-tab"
},{
xtype: "panel",
title: "Source Code",
},{
xtype: "panel",
title: "Big O Analysis",
}]
};
},
initComponent: function () {
this.items = [
this.getEastPanel(),
this.getCentralPanel()
];
this.callParent(arguments);
}
});
Here is my store:
Ext.define("GiipIq.store.Problems", {
extend: "Ext.data.TreeStore",
storeId:"problems-store",
model: "GiipIq.model.Problem",
});
Here is my model:
Ext.define("GiipIq.model.Problem", {
extend: "Ext.data.Model",
fields: [
{ name: "text", type: "string" },
{ name: "leaf", type: "bool" },
{ name: "expanded", type: "bool" },
{ name: "checked", type: "bool" }
],
proxy: {
type: "ajax",
actionMethods: { read: "GET" },
api: { read: "app/problems.json", },
reader: {
type: "json",
root: "children"
},
listeners: {
exception: function(proxy, response, operation, opts) {
if(typeof(operation.error) == "string") {
Ext.Msg.alert("Error", "Connection to server interrupted" + operation.error);
}
}
}
}
});
Here is my json:
{
success: true,
children: [{
text: "algorithms", expanded: true, leaf: false, checked: false, children: [
{ text: "bit manipulation", leaf: true, checked: true },
{ text: "brain teaser", leaf: true, checked: true }
]
},{
text: "data structures", expanded: true, checked: false, leaf: false, children: [
{ text: "array and strings", leaf: true, checked: true },
{ text: "linked lists", leaf: true, checked: false}
]
},{
text: "knowledge based", expanded: true, leaf: false, checked: false, children: [
{ text: "C and C++", leaf: true, checked: false},
{ text: "Java", leaf: true, checked: false}
]
}]
}
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\":[]
}
}]
}"