grid loadmask won't disappear while using PagingMemoryProxy - javascript

I am trying to create a grid with store having PagingMemoryProxy.
Pagination is working and I can see as well as change all pages
but the loadmask won't disappear so I am not able to edit the grid data.
here is my code
Ext.require('Ext.ux.data.PagingMemoryProxy');
var data = {
Accounts: [{
id: 1,
name: 'Ed Spencer'
}, {
id: 2,
name: 'Abe Elias'
}, {
id: 3,
name: 'Tom Elias'
}]
};
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'myStore',
pageSize: 2,
model: 'Account',
data : data,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
root: 'Accounts'
}
},
});
var pagingBar = new Ext.PagingToolbar({
store: store,
displayInfo: true,
displayMsg: 'Displaying Accounts {0} - {1} of {2}',
emptyMsg: "No Accounts to display"
});
var grid = new Ext.create('Ext.grid.Panel', {
title: 'Accounts',
store: store,
columns: [{
header: 'Id',
dataIndex: 'id',
editor: 'textfield'
}, {
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
pluginId: 'rowEditing'
})],
height: 200,
width: 400,
loadMask: false,
renderTo: "editor-grid",
bbar: pagingBar
});
Store load event is getting fired and I can see greyed out data behind the loading mask
Firbug is showing no error.
I am using Extjs 4.1.3. Any idea what's the problem.
Thanks in advance

Looks like a known bug, think its fixed in Extjs 4.2.1
As a temporary fix, you can hide the mask 'on store load' using
grid.getView().setLoading(false);
Sample here : https://fiddle.sencha.com/#fiddle/1v9

Related

ExtJS 4.2 - How to map array to a model field and display dynamically on a grid column?

I have this json data:
{
id: 1,
name: 'something',
description: 'somethingsomething',
customers: [{
id: 1,
username: 'cust1'
}, {
id: 2,
username: 'cust2'
}]
}
While I have no problems displaying the first three fields on the gridpanel, I however have an issue retrieving the array object for the customers field. My model goes like this:
fields: [
'id', {
name: 'name',
sortType: Ext.data.SortTypes.asUCString
},
'permanent', {
name: 'description',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'customers',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'username',
Type: Ext.data.SortTypes.asUCString,
mapping: 'customers[0].username'
}
]
When I try to access customers[0].username, it only retrieves the ones on that specified index. Removing the index number returns undefined as I assume it is looking for what index to return from. How do I properly retrieve all of customers: [] and display it to my grid where it is structured as:
{
xtype: 'gridpanel',
store: oStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
}
You can use convert function available in model.This convert function is used for some calculation purpose & map response data for our needs.For example I will map username as below:
fields: [
{
name:'username',
convert:function(value,model)
{
return model.data.customers.username;
}
}
]
Use same technique for id field.Reply if any issues.

grid live search extjs

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
}
});

Extjs issue with PagingToolbar - same data on the next page

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.

Sencha Touch 2: Reloading a treeStore in nestedList to reflect user selection

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.

ExtJs 4 Grid Paging

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/

Categories