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\":[]
}
}]
}"
Related
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.
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 want to get an infinite scrolling grid with extjs4 and a c# backend... i am setting the proxy api in my controller..
My Model:
Ext.define('appname.model.training.course.TrainingRequirementList', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{ name: 'ID', type: 'int', convert: null },
{ name: 'EmployeeName', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'StatusText', type: 'string' },
{ name: 'Status', type: 'int' },
{ name: 'Priority', type: 'string' },
{ name: 'Date', type: 'string' },
{ name: 'Cost', type: 'string' },
{ name: 'CanApprove', type: 'bool' },
{ name: 'CanRequest', type: 'bool' },
{ name: 'ConfirmStatus', type: 'string' },
{ name: 'PlanId', type: 'int'}
]
});
My Grid:
{
xtype: 'gridpanel',
flex: 1,
padding: '0 10 10 10',
minHeight: 200,
verticalScroller: {
xtype: 'paginggridscroller'
},
store: {
model: 'appname.model.training.course.TrainingRequirementList',
pageSize: 200,
autoLoad: true,
buffered: true,
remoteSort: true,
sorters: {
property: 'Date',
direction: 'DESC'
},
proxy: {
type: 'direct',
extraParams: {
total: 50000
},
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
}
},
columns:
[{
text: Lang.Main.Employeee,
dataIndex: 'EmployeeName',
flex: 1,
filterable: true
},
{
text: Lang.Main.Course,
dataIndex: 'Description',
flex: 1,
filterable: true
},
{
text: Lang.Main.Status,
dataIndex: 'StatusText',
flex: 1,
filterable: true
},
{
text: Lang.Main.Priority,
dataIndex: 'Priority',
flex: 1
},
{
text: Lang.Main.Date,
dataIndex: 'Date',
flex: 1
},
{
text: Lang.Main.Cost,
dataIndex: 'Cost',
flex: 1,
filterable: true
},
{
text: Lang.Main.Actions,
flex: 1,
align: 'center',
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'Design/icons/cog_edit.png',
tooltip: Lang.Main.Open,
handler: function (grid, rowIndex, colIndex, item) {
this.onGridOpen(grid.getStore().getAt(rowIndex));
}
}]
}],
selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}
setting proxy in controoler:
view.grid.getStore().setProxy({
type: 'direct',
model: 'appname.model.training.course.TrainingRequirementList',
api: { read: SCT.Service.Training.Plan.GetFilteredRequirements },
extraParams: { total: 50000 },
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
});
additional information about my view:
Ext.define('appname.view.training.course.TrainingRequirements',
{
extend: 'Ext.panel.Panel',
require: [ 'Ext.grid.PagingScroller'],
My grid is only loading the first 200 rows and the scrollbar is only as big as it would be for 200 rows.. :/ ...
the server response with entries like this:
{"ID":99,"PlanId":23,"firstname":"name","lastname":"name","Comment":"","Status":3,"ConfirmType":0,"Priority":"entry","DesiredDate":null,"StartDate":new Date(1354107600000),"ActualCost":180,"EstimatedCost":0,"row":201,"TotalCount":8568,"EmployeeName":"some, name","Description":"","StatusText":"state","Date":"28.11.2012","Cost":"EUR 180"}
what am i missing???
UPDATE
When i scroll down the script is loading the second page also.. still nothing more...
if you ned more information dont hesitate to ask
Does your server include the correct TotalCount value in the response?
Edit:
According to your reader's configuration, your server should answer with data formatted this way (of course your response should also be valid JSON, here Javascript is used for illustration):
{
// total property at the root level of response object
TotalCount: 8568,
// root for items data, configured as "ID" in your reader (you should probably
// change that to something like "records" or "data" to better express meaning)
ID: [
// individual fields data
{ID: 1, EmployeeName: 'Foo', ...},
{ID: 2, EmployeeName: 'Bar', ...},
...
]
// if you had, for example, a successProperty, it would go here too
,success: true
}
In your case, it seems that your TotalCount is mixed in every item data?
You're right about the implementation on the server side: it should simply be the total number of records, so something like COUNT(*) in the database.
One more thing: new Date(1354107600000) is not valid JSON. You should use a string and cast it to a date once the JSON has been decoded. For example, in your model, your could configure the field type to have Ext handle this for your: {name: 'Date', type: 'date', format: 'd.m.Y'}.