Console is clear. Grid is empty (only column titles are shown). How can I check if data is correctly loaded to the store? It seems to me that the store's autoLoad method is not triggered somehow. Here is the grid:
Ext.define('NameSpace.view.Clients', {
requires: [
'Ext.tree.Panel',
'Ext.grid.Panel'
],
extend: 'Ext.tab.Panel',
title: 'Clients',
alias: 'widget.viewClients',
items: [
{
xtype: 'panel',
title: 'All Clients',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'treepanel',
title: 'Tree Panel',
width: 200,
resizable: true
},
{
xtype: 'gridpanel',
title: 'Clients List',
store: Ext.getStore('storeClients'),
flex: '1',
columns: [
{ text: 'Name', dataIndex: 'first_name' },
{ text: 'Last Name', dataIndex: 'last_name' },
{ text: 'Phone Number', dataIndex: 'phone' }
]
}
]
}
],
initComponent: function () {
this.callParent(arguments);
}
});
And here is the store (Model contains nothing but extend and fields configs):
Ext.define('NameSpace.store.Clients', {
extend: 'Ext.data.JsonStore',
proxy: {
type: 'ajax',
url: 'http://test.local/client',
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true,
constructor: function (config) {
this.initConfig(config);
}
});
Ext.create('NameSpace.store.Clients', {
model: 'Clients',
storeId: 'storeClients'
});
Move
model: 'Clients',
storeId: 'storeClients'
into store definition, and get rid of store creation call. Store will be created automatically.
Why do you override the store constructor?
If you actually need to do it, you should add this.callParent(arguments) to the constructor, otherwise the original constructor (which does a lot) won't run.
You just need to change
store: Ext.getStore('storeClients')
To This :
store: 'Clients'
I think you need to write field when you create store.
i.e.
fields:[ 'first_name', 'last_name', 'phone']
Related
View:
{
xtype: 'combo',
anchor: '100%',
reference: 'il',
fieldLabel: 'İl',
name: 'il',
forceSelection: true,
typeAhead: true,
displayField: 'il',
store: 'il',
cls :'text-font',
baseCls :'fieldcolor',
valueField: 'il'
},
{
xtype: 'combobox',
anchor: '100%',
reference: 'ilce',
fieldLabel: 'İlce',
name: 'ilce',
forceSelection: true,
typeAhead: true,
displayField: 'ilce',
store: 'ilce',
filters: {
property: 'il',
value: 'ilid'
},
cls :'text-font',
baseCls :'fieldcolor',
valueField: 'ilce'
},
Model:
Ext.define('ertg.model.ilmodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'il'
},
{
name: 'ilid'
}
]
});
Another model:
Ext.define('ertg.model.ilcemodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'ilce'
},
{
name: 'ilid'
}
]
});
Hi guys,This my comboboxes is run error .error this:Uncaught TypeError: me.store.getFilters is not a function
at constructor.onEndUpdateFilters
Whats Problem ??
Thanks
Ertugrul
xtype combobox simply has no filters {} config. in order to filter the entries of a combobox, one has to configure an event listener, which then calls store.filter(), while passing on the property & value to filter for... just see the API docs: it's config filters vs. method filter ...while both of them belong to the store - and not the combobox. the docs for Ext.util.Filter are also relevant.
based upon the provided code below, I'd suggest to write it alike this (the requires should already be loaded by the store class, would omit them, too... only know that I never require any them):
Ext.define('ertg.store.ilce', {
extend: 'Ext.data.Store',
requires: ['ertg.model.ilcemodel'],
model: 'ertg.model.ilcemodel',
storeId: 'ilce',
filters: null,
proxy: {
type: 'ajax',
url: 'resources/data/ilce.json',
reader: {type: 'json'},
writer: {type: 'json'}
}
});
My live search grid works fine but when I click on next page or do other thing about the grid, the search grid lose highlight terms search,does anyone help me what do I do? I want to keep highlighted terms search in all page. Thanks
bellow a snippet of my code:
var pagingStore = Ext.create('Ext.data.Store', {
proxy: {
type: 'memory',
enablePaging: true
},
remoteFilter: true,
pageSize: 5
}),
remoteStore = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'js/json/pagingStore.json',
reader: {
rootProperty: 'items'
}
},
fields: ['name', 'email', 'phone', 'type']
});
remoteStore.load(function () {
pagingStore.getProxy().setData(remoteStore.getRange());
pagingStore.load();
});
var bbar = new Ext.PagingToolbar({
store: pagingStore, //the store you use in your grid
displayInfo: true,
items: [ {
xtype: 'textfield',
name: 'searchField',
id: 'txtfield',
fieldLabel:'Search:',
labelAlign:'right',
emptyText:'search...',
width: 300,
listeners: {
change: {
fn: onTextFieldChange
}
}
}
]
});
bbar.down('#refresh').hide();
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
id: 'gridPanel',
store: pagingStore,
columns: [{
text: 'Name',
dataIndex: 'name',
filterable: true
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
},
{
text: 'Type',
dataIndex: 'type'
}],
bbar: bbar,
renderTo: Ext.getBody()
});
So I answer my own question, I've created a highlight() method and put it on the container: after field search input on each click, the highlight stay on the search terms: ;)
cont.getEl().on({
click: {
fn: highlight
}
});
There are so many issues I found about different problems with grid paging but still can't find the answer to mine.
I want to load some data from googleapis to extjs grid with ability of paging.
Let say we can query Google JSON API using the following link.
https://www.googleapis.com/books/v1/volumes?fields=totalItems,items(id,volumeInfo/title,volumeInfo/subtitle,volumeInfo/authors,volumeInfo/publishedDate,volumeInfo/description,volumeInfo/imageLinks)&q=Neuromarketing&maxResults=40&startIndex=0
As you can see, I can query as much records per time as 'maxResults' and from the 'startIndex' position.
The short example of json is
{
"totalItems": 298,
"items": [
{
..
First, I've defined a Model and a Store:
Ext.define('MyApp.view.main.Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'publishedDate', mapping: 'volumeInfo.publishedDate'},
{name: 'title', mapping: 'volumeInfo.title'}
]
});
Ext.define('MyApp.view.main.Books', {
extend: 'Ext.data.Store',
model: 'MyApp.view.main.Book',
buffered: true,
pageSize: 15,
alias: 'store.books',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'https://www.googleapis.com/books/v1/volumes?fields=totalItems,items(id,volumeInfo/title,volumeInfo/subtitle,volumeInfo/authors,volumeInfo/publishedDate,volumeInfo/description,volumeInfo/imageLinks)',
extraParams: {
q : 'Javascript',
maxResults : 15,
startIndex : 0
},
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'totalItems'
}
}
});
Second, I've defined a View
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'MyApp.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [
{
region: 'center',
xtype: 'tabpanel',
reference: 'tabPanel',
items:[
{
title: 'Result',
reference: 'tabPanelResultTab',
layout: 'fit',
items: [{
xtype: 'grid',
reference: 'grid',
title: 'Books',
dockedItems: [{
xtype: 'pagingtoolbar',
bind: {
store: '{summary}'
},
dock: 'bottom',
displayInfo: true
}],
bind: {
store: '{summary}'
},
columns: [
{ text: 'Google ID', dataIndex: 'id', flex: 1 },
{ text: 'Title', dataIndex: 'title', flex: 4 },
{ text: 'Published Date', dataIndex: 'publishedDate', flex: 1}
]
}]
}]
}]
});
Third, I've defined ViewModel
Ext.define('MyApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
requires: [
'MyApp.view.main.Books'
],
alias: 'viewmodel.main',
data: {
name: 'MyApp'
},
stores: {
summary: {
type: 'books'
}
}
});
So now, when I click next page on pagingtoolbar, the loading image pops up, then loads exact the same data on the 2nd page I saw on the 1st page. I still don't understand, how to tell PagingToolbar to query from next 'startIndex'. Is it possible to change 'start' and 'limit' variables to my 'startIndex' and maxResults'?
Yes, you can configure it at the proxy level. See startParam and limitParam.
I have a nested list in my application, and when users make a selection they are taken to a detailCard with some options. One of these options is to "confirm" their selection. Once confirmed, the selection should be removed from the list. This works on the server side, so if the app is refreshed the selection is gone. However I was hoping to remove the selection in the treeStore itself and refresh the view somehow so that users can immediately see the effect of their confirmation. I was following a tutorial for nestedList that I can't seem to find anymore, and this code is based on that:
var itemId = '';
Ext.define('MyApp.view.MainView',
{
extend: 'Ext.tab.Panel',
xtype: 'main',
alias: "widget.mainview",
requires: [
'Ext.dataview.NestedList',
'Ext.data.proxy.JsonP'
],
config:
{
tabBarPosition: 'bottom',
items: [
{
xtype: 'nestedlist',
title: 'Listings',
iconCls: 'home',
displayField: 'listingValue',
scrollable: true,
detailCard:
{
xtype: 'panel',
scrollable: true,
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
readOnly: true,
title: 'Schedule Information:',
items: [
{
name: 'from',
id: 'from',
xtype: 'textareafield',
label: 'From',
readOnly: true
},
{
name: 'to',
id: 'to',
xtype: 'textareafield',
label: 'To',
readOnly: true
},
{
name: 'moreInfo',
id: 'moreinfo',
xtype: 'textfield',
label: 'More Info',
readOnly: true
},
]
},
{
xtype: 'container',
flex: 1,
items: [
{
xtype: 'button',
text: 'Confirm',
action: 'confirmSelection',
margin: '10 5',
padding: '5',
ui: 'confirm'
}]
}]
},
listeners:
{
itemtap: function (nestedList, list, index,
element, post)
{
var detailCard = this.getDetailCard();
detailCard.setHtml('');
itemId = post.get('id');
Ext.getCmp('from').setValue(post.get(
'from'));
Ext.getCmp('to').setValue(post.get('to'));
Ext.getCmp('moreinfo').setValue(post.get(
'moreinfo'));
}
},
store:
{
type: 'tree',
fields: [
'id', 'from', 'to', 'fromcity', 'tocity',
'time', 'address',
{
name: 'leaf',
defaultValue: true
},
{
name: 'listingValue',
convert: function (value, record)
{
listingValue = '$<b>' + record.get(
'address') + '</b> ' + record
.get('fromcity') + ' to ' +
record.get('tocity');
return listingValue;
}
}
],
root:
{
leaf: false
},
proxy:
{
type: 'jsonp',
url: 'http://myURL.com/page.php?action=go',
reader:
{
type: 'json',
rootProperty: 'root'
}
}
}
},
{
title: 'Dashboard',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Dashboard'
},
]
}]
}
});
I have no idea what to do at this point, because the store is set up in the view and I'm not sure how to access it in my controller. I learned about treeStore.removeAll() and treeStore.load(), but how can I call those functions in a controller when the store is set up without any type of reference name? Is there a way I can remove the user's selection and display the view, or perhaps reload the view altogether so it can retrieve the new list from the server?
Because my list is on the first page of my app, I managed to get away with window.location.reload(); and reloading the whole app. Its not the most elegant solution, but the changes are reflected.
I won't accept my own answer just yet in case someone comes along with a better solution.
I'm trying to make data grid with paging using ExtJs framework, but unfortunately my code doesn't work. Maybe some of you has already settled this such problem.
Json-reply from server is:
{
"totalCount":"2",
"companies":[
{
"id":"1",
"name":"Name1",
"region":"Reg1",
"address":"Addr1",
"dealCount":"3",
"dealAmount":"19250",
"latestDealDate":"2012-01-09"
},
{
"id":"2",
"name":"Name2",
"region":"Reg2",
"address":"Addr2",
"dealCount":"2",
"dealAmount":"12150",
"latestDealDate":"2012-01-08"
}
]
}
JavaScript code, which creates store, grid, e.t.c. is:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.layout.*'
]);
Ext.onReady(function(){
// Define data model
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
'name', 'region', 'address',
{
name: 'dealCount',
type: 'int'
},
{
name: 'dealAmount',
type: 'int'
},
{
name: 'latestDealDate',
type: 'string'
}
],
idProperty: 'id'
});
// Create data store
var companies = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'Company',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php'
}),
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
// Create data grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
store: companies,
columns: [
{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Region',
dataIndex: 'region'
},
{
text: 'Address',
dataIndex: 'address'
},
{
text: 'Deal Count',
dataIndex: 'dealCount'
},
{
text: 'Deal Amount',
dataIndex: 'dealAmount'
},
{
text: 'Latest Deal Date',
dataIndex: 'latestDealDate'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: companies,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
// Load first data page
companies.loadPage(1);
});
Firebug shows, that server responds with json-data, but grid remains empty. How can I fix it?
You should define reader inside proxy (at least that helped for me). Eg:
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php',
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
})
})
Working sample: http://jsfiddle.net/ycDzL/3/