I'm only asking this because I've seemingly tried everything I can find, and it has to be easier than I'm making it.
I'm working with Sencha Touch (EXTJS knowledge is still helpful). When I console.log the store, it shows no items/data. I am getting a good response from the store's load call, but it's not making it into the store. I appreciate the help.
Model:
Ext.define('NQT.model.NENEventsModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'regionId', type: 'int', mapping: 'regionId'},
{name: 'regionName', type: 'string', mapping: 'regionName'},
{name: 'state', type: 'string', mapping: 'state'},
{name: 'switchId', type: 'int', mapping: 'switchId'},
{name: 'switchName', type: 'string', mapping: 'switchName'}
]
});
Store:
Ext.define('NQT.store.NENEventsStore',
{
extend: 'Ext.data.Store',
storeId: 'NENEventsStore',
config: {
model: 'NQT.model.NENEventsModel',
proxy: {
type: 'jsonp',
url: 'http://this_is_not_the_url.com:8080/rest/json',
method: 'GET',
pageParam: false,
startParam: false,
limitParam: false,
noCache: false,
reader: {
type: 'json',
rootProperty: ''
}
}
}
});
Part of view:
var eventsStore = Ext.create('NQT.store.NENEventsStore');
{
xtype: 'grid',
titleBar: false,
store: eventsStore,
columns: [
{text: 'regionId', dataIndex: 'regionId', width: 150},
{text: 'regionName', dataIndex: 'regionName', width: 150},
{text: 'state', dataIndex: 'state', width: 150},
{text: 'switchId', dataIndex: 'switchId', width: 150},
{text: 'switchName', dataIndex: 'switchName', width: 150}
]
},
{
xtype: 'button',
docked: 'bottom',
text: 'Reload Grid',
handler: function () {
console.log(eventsStore);
eventsStore.load();
}
}
JSON Sample:
[{"regionId":1,"regionName":"NY Metro","state":"NJ","switchId":167,"switchName":"Jersey City 1"},
{"regionId":1,"regionName":"NY Metro","state":"NY","switchId":2029,"switchName":"Farmingdale 1"},
{"regionId":4,"regionName":"New England","state":"CT","switchId":203,"switchName":"Wallingford 1"}]
As Evan Trimboli pointed out, my response was not as good as I thought it was; it was missing the Ext.data.JsonP.callback that should have preceded it. I created a web service for the URL so I could make the call properly without being a security risk.
Part of the service:
<?php
$app->group('/secret', function () use ($app) {
$app->get('/getData', function () use ($app) {
$callback = $app->request()->get('callback');
$events = file_get_contents("http://example_url.com:8080/this/is/the/path");
if(!empty($callback)){
$app->contentType('application/javascript');
echo sprintf("%s(%s)", $callback, $events);
} else {
echo $events;
}
});
});
?>
Related
I am trying to load my data from the xmll to tagfield. But I am not sure what is getting failed. Can anybody please suggest me what is going wrong here.
I am using store for tagfield which is in different function. I don'y know even not able to do debugging also over there.
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store: this.TagStore,
//displayField: 'show',
valueField: 'id',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
debugger;
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'value',
mapping: "ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "TITLE",
type: 'string'
}],
proxy: new Ext.data.HttpProxy({
type: 'ajax',
actionMethods: {
read: "GET"
},
url: "localhost/MyApp/resources/data.xml",
headers: {
'Accept': 'application/json; charset=utf-8'
},
reader: {
type: 'xml',
rootProperty: 'R.D.Result'
},
extraParams: {
strIPXML: strIPXML
}
})
});
}
});
MyXml :
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>
Can anybody help me how to load data through xml in extJS
Just got sometime to play with your issue on sencha fiddle, Here is the basic working code (Atleast seeing tagfield store populated). Used: Ext JS 5.1.1.451 - Gray
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store:Ext.getStore('TagStore'),
displayField: 'name',
valueField: 'value',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId:'TagStore',
fields: [{
name: 'value',
mapping: "#ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "#TITLE",
type: 'string'
}],
proxy: {
type: 'ajax',
url: "data1.xml",
reader: {
type: 'xml',
record: 'E',
rootProperty:'EMAIL'
}
}
});
return combstore;
}
});
var form = Ext.create('MyApp.view.main.List');
form.TagStore();
var store = Ext.getStore('TagStore');
form.child('[xtype=tagfield]').bindStore(store);
}
});
data1.xml
<?xml version="1.0" encoding="UTF-8"?>
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>
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.
My ExtJS Grid is not showing my store data. Using ExtJS 5
This is my grid (it's within a hbox):
{
xtype: 'grid',
title: 'Company Manager',
id: 'companyGrid',
flex: 1,
plugins: 'rowediting',
columnLines: true,
store: Ext.data.StoreManager.lookup('companyStore'),
columns: {
items: [{
header: 'ID',
dataIndex: 'id',
},
{
header: 'Name',
dataIndex: 'name',
},
{
header: 'Token',
dataIndex: 'access_token'
},
]
}
}
This is my store (I use the Google Extension of Sencha and it's filled with my data so this works + the ending }); were ignored by the coding block):
var companyStore = Ext.create('Ext.data.Store', {
storeId: 'companyStore',
proxy: {
type: 'ajax',
url: 'resources/data/company.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'access_token',
type: 'string'
}],
autoLoad: true
});
Does anyone know were I went wrong here?
I have tried: Reloading the store, checking if the store is actually filled, refreshing the grid view.
Nothing I tried worked and I decided to ask you guys for advice :)
#Evan Trimboli
You made me think and I fiddled arround for a second and found the following solution.
Instead of using the
store : Ext.data.StoreManager.lookup('companyStore'),
I used
bind : '{companyStore}',
And moved the define store towards the CompanyModel.js file :) now it works properly!!!!
Thanks :D
I tried to code EXTJS Grid using jsp. I modify the EXTJS example to get data from jsp page, but the data is not loaded.
Could you please help ?
grid js
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './js/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'data.jsp'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'threadid'
},
[
{name: 'title'},
{name: 'postid'},
{name: 'username'},
{name: 'lastpost'},
{name: 'excerpt'},
{name: 'userid'},
{name: 'dateline'},
{name: 'forumtitle'},
{name: 'forumid'},
{name: 'replycount'},
{name: 'lastposter'}
]),
baseParams: {
abc: 123
}
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
disableSelection: true,
loadMask: true,
// grid columns
columns:[{
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
sortable: false
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 150,
sortable: true
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
renderTo: 'topic-grid'
});
// trigger the data store load
store.loadPage(1);
});
</script>
jsp, data.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%
String data = "{\"totalCount\":\"1\",\"topics\":[{\"title\":\"XTemplate with in EditorGridPanel\",\"threadid\":\"133690\",\"username\":\"kpr#emco\",\"userid\":\"272497\",\"dateline\":\"1305604761\",\"postid\":\"602876\",\"forumtitle\":\"Ext 3.x: Help\",\"forumid\":\"40\",\"replycount\":\"2\",\"lastpost\":\"1305857807\",\"lastposter\":\"kpr#emco\",\"excerpt\":\"Hi\"}]}";
out.println(data);
System.out.println(data);
%>
None of your json column titles seem to match up with your ExtJS model.
The model needs to have the same column names as the data so that it knows where to put the data.
UPDATE
I'm confounded by your store data model implementation. I've never seen it implemented as the second argument for a new JsonReader.
But because you are using baseParam config I assume that you are using ExtJS 3.x not 4.x and I am admittedly not very familiar with 3.x so that may be a legal data model implementation.
In ExtJS 4.x the data model is usually implemented as a separate object than the store, something like this:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'title', type: 'string'},
{name: 'postid', type: 'int'},
{name: 'username', type: 'string'},
{name: 'lastpost', type: 'int'},
{name: 'excerpt', type: 'string'},
{name: 'userid', type: 'int'},
{name: 'dateline', type: 'int'},
{name: 'forumtitle', type: 'string'},
{name: 'forumid', type: 'int'},
{name: 'replycount', type: 'int'},
{name: 'lastposter', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'data.jsp',
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid'
}
}
});
I am not sure how this works in other versions of ExtJS if you are actually using 3.x, you will have to check your own ExtJS documentation. Also as suggested, you should be seeing an error message in your browser's error console. That will tell you exactly what the problem is.
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\":[]
}
}]
}"