Sencha Offline Proxy - extjs

facing issue in Sencha offline proxy , when json received 100 records
offline proxy only add 50 records add in store here is my simple code
response.responseText [my ajax response], it returns reocords set
var data = Ext.decode(response.responseText);
for (var c=0; c < data.length; c++){
console.log(c);
var itemrecord = Ext.create('Inertia.model.InstallingCompany');
itemrecord.set(data[c]);
Ext.getStore('InstallingCompanies-offline').add(itemrecord);
}
console.log(c);
console.log(Ext.getStore('InstallingCompanies-offline').data.length);

For this you can use direct store.loadData() method of store.
In this FIDDLE, I have create a demo using gridpanel and Ext.data.Store. I hope this FIDDLE will help you or guide you to achieve your requirement.
Code Snippet
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
Ext.create('Ext.data.Store', {
storeId: 'topicsStore',
model: 'ForumThread'
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
Ext.create('Ext.grid.Panel', {
height: window.innerHeight,
title: 'Example of Store loadData() with GRID and Ajax Request',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('topicsStore'),
loadMask: true,
columns: [{
xtype: 'rownumberer',
width: 35,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true
}, {
text: "Author",
dataIndex: 'username',
flex: 0.5,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 90,
sortable: false
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
flex: 0.5,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false
}],
listeners: {
afterrender: function (cmp) {
var store = Ext.data.StoreManager.lookup('topicsStore'),
store1;
cmp.getEl().mask('Please wait..!');
Ext.Ajax.request({
url: 'topics.json',
success: function (data) {
var response = Ext.decode(data.responseText);
store.loadData(response.topics);
cmp.getEl().unmask();
//Add data using store.add() method in Store
store1 = Ext.create('Ext.data.Store', {
model: 'ForumThread'
});
response.topics.forEach(function (item) {
store1.add(item);
})
console.log(`total count of store1 data is ${store1.getCount()}`);
}
});
}
}
});

Related

Extjs Modern Grid column cell tool conditional iconCls

In a grid column config, I have a cell tool for which I'd like the iconCls of the tool to be conditional on the row record data.
},{
text: 'Favorite',
//dataIndex: 'favorite',
width: 80,
align: 'center',
cell: {
tools: {
play : {
iconCls:'x-fa yellow fa-star',
align:'center',
tooltip : 'Toggle Favorites',
handler: 'onFavoriteToggle'
}
}
}
}, {
I'd like the icon cls to be based on the row record favorite property (true/false), to be fa-star or fa-star-o
Does anyone know how to accomplish this?
I answered this elsewhere so I'll post it here as well for anyone else interested. You can use binding to do it:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Viewport.add({
xtype: 'grid',
itemConfig: {
viewModel: true
},
store: {
data: [{
name: 'A',
fav: false
}, {
name: 'B',
fav: true
}]
},
columns: [{
dataIndex: 'name'
}, {
text: 'Favorite',
width: 80,
align: 'center',
cell: {
tools: {
play : {
bind: {
iconCls:'x-fa yellow {record.fav ? "fa-star" : "fa-star-o"}',
},
align:'center',
tooltip : 'Toggle Favorites',
handler: function(grid, context) {
var r = context.record;
r.set('fav', !r.get('fav'));
}
}
}
}
}]
});
}
});
Fiddle
You can use renderer method of gridcolumn.
In renderer function you need to use gridcell.setTools() method.
In this FIDDLE, I have created a demo as per you requirement. Hope this will guide you or help you to achieve you requirement.
var companyStore = Ext.create('Ext.data.Store', {
fields: ['name', 'price', {
name: 'lastChange',
type: 'date'
}, {
name: 'favorite',
type: 'boolean'
}],
autoLoad: true,
pageSize: null,
proxy: {
type: 'ajax',
url: 'company.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Grid', {
title: 'Company Data',
store: companyStore,
columns: [{
text: 'Company',
flex: 1,
dataIndex: 'name'
}, {
text: 'Price',
flex: 1,
dataIndex: 'price',
formatter: 'usMoney'
}, {
text: 'Last Updated',
flex: 1,
dataIndex: 'lastChange',
formatter: 'date("d M Y")'
}, {
width: 100,
text:'Favorite',
align: 'center',
renderer: function (value, rec, col, cell) {
cell.setTools({
play: {
iconCls: rec.get('favorite') ? 'x-fa yellow fa-star' : 'x-fa yellow fa-star-o',
tooltip: 'Toggle Favorites'
}
});
}
}],
height: 500,
layout: 'fit',
renderTo: Ext.getBody(),
fullscreen: true
});

how to use bufferedrenderer instead of paging toolbar in extjs

{ extend: 'Ext.grid.Panel',
autoScroll: true,
layout: 'fit',
padding: '5 5 5 0',
width: 450,
selModel: {
mode: 'MULTI',
pruneRemoved: false
},
config: {
labels: {},
defSel: {},
keepSelections: true
},
initComponent: function() {
this.title = this.labels.MEAS_LIST_PANEL_TITLE;
var measStore = Optima.store.Measurement.create();
this.store = measStore;
this.columns = [{
text: 'list',
sortable: true,
dataIndex: 'name',
flex: 1
}, {
text: 'unit'
sortable: true,
dataIndex: 'unit',
flex: 1
}, {
text: 'sample'
sortable: true,
dataIndex: 'sampletime',
flex: 1
}, {
text: 'desc',
sortable: true,
id: 'desc',
dataIndex: 'desc',
flex: 1
}];
this.bbar = {
xtype: 'pagingtoolbar',
pageSize: 25,
store: measStore,
displayInfo: false
};
this.callParent(arguments);
}
});
You should use the buffered store.
Ext.create('Ext.data.BufferedStore', {
storeId: 'exampleStore',
autoLoad : true,
pageSize : 100,
fields: ['userId', 'id', 'title'],
proxy : {
type : 'ajax',
...
}
});
Then get rid of the paging toolbar since the buffered store will automatically page based off page size.
A BufferedStore maintains a sparsely populated map of pages corresponding to an extremely large server-side dataset.
For more details you can refer ExtJS Docs for BufferedStore
I have created an sencha fiddle demo this will show how it is working.
Ext.define('ForumThread', {//Define model
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.BufferedStore', {
model: 'ForumThread',
remoteGroup: true,
leadingBufferZone: 300,
pageSize: 50,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'https://www.sencha.com/forum/remote_topics/index.php',
reader: {
rootProperty: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function (store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function (store, operation) {
if (operation.getGrouper()) {
operation.setSorters(null);
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var grid = Ext.create('Ext.grid.Panel', {
width: '100%',
height: 500,
collapsible: true,
title: 'Buffer grid example with buffer store',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
features: [{
ftype: 'grouping',
hideGroupedHeader: false
}],
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true,
filter: true
}, {
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
filter: {
type: 'numeric'
}
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('d-M-Y h:i A'),
sortable: true,
groupable: false
}],
renderTo: Ext.getBody()
});

rally set default value for combo box

I have a combobox for State that successfully filters in Rally. The code below works. I want to add an enhancement and have the combobox default to 'In Progress'. I added defaultValue but it has no effect. Thanks for your help.
Rally.onReady(function() {
Ext.define('Rally.example.CustomStoreGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.wsapi.Store', {
model: 'defect',
autoLoad: true,
limit: 1000,
pageSize: 1000,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['FormattedID', 'Name', 'Severity', 'State', 'InProgressDate', 'c_PlannedDeliveryVersion']
});
},
_onSelect: function() {
var grid = this.down('rallygrid'), store = grid.getStore();
store.clearFilter(true);
store.filter(this._getStateFilter());
},
_getStateFilter: function() {
return {
property: 'State',
operator: '=',
defaultValue: 'In Progress',
value: this.down('#priorityComboBox').getValue()
};
},
_onDataLoaded: function(store, data) {
var records = _.map(data, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
return Ext.apply({
// Age: Math.round(((new Date() - record.get('InProgressDate')) / 86400000) * 10) / 10;
}, record.getData());
});
this.add({
xtype: 'rallyfieldvaluecombobox',
itemId: 'priorityComboBox',
fieldLabel: 'Filter by State:',
model: 'defect',
// multiSelect: true,
field: 'State',
listeners: {
select: this._onSelect,
// ready: this._onLoad,
scope: this
}
});
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
limit: 1000,
pageSize: 1000,
data: records
}),
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name',
dataIndex: 'Name',
flex: 1
},
{
text: 'Severity',
dataIndex: 'Severity'
},
{
text: 'State',
dataIndex: 'State'
},
{
text: 'Planned Delivery Version',
dataIndex: 'c_PlannedDeliveryVersion',
flex: 0.25
},
{
text: 'In Progress Date',
dataIndex: 'InProgressDate',
xtype: 'datecolumn',
format:'Y-m-d'
},
{
text: 'Age',
dataIndex: 'InProgressDate'
,
renderer: function(value) {
return Math.round(((new Date() - value) / 86400000) * 10) / 10;
}
}
]
});
}
});
Rally.launchApp('Rally.example.CustomStoreGrid', {
name: 'Custom Store Grid Example'
});
});
Using value config property sets the default value:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:{ html:'App SDK 2.0rc3 Docs'},
launch: function() {
this.add({
xtype: 'rallyfieldvaluecombobox',
model: 'UserStory',
field: 'ScheduleState',
value: 'In-Progress'
});
}
});

extjs: Grid Buffered Scrolling with Row Editing/Deletion/Addition

Has anybody seen any sample of extjs grid with buffered scrolling with new row, row editing and row deletion support?
Can CellEditing and RowEditing plugins be used with Buffered Scrolling?
Is row editing even possible with buffered scrolling?
Cheers,
Avi
I had opened a thread at Ext forum and got the response, insertion and deletion is NOT supported with buffered scrolling.
http://forums.ext.net/showthread.php?27969-Buffered-Scrolling-with-Row-Editing-Deletion-Addition&p=124559&posted=1#post124559
Cheers,
Avi
I changed this example http://docs.sencha.com/extjs/4.2.2/#!/example/grid/infinite-scroll.html, added the row editor. Open this example: http://jsfiddle.net/zAnZg/1/, click on record, change values and then click "Update"
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
remoteGroup: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
leadingBufferZone: 300,
pageSize: 100,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function(store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function(store, operation) {
if (operation.groupers && operation.groupers.length) {
delete operation.sorters;
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 1,
autoCancel: false,
listeners:{
edit: function(editor, e){
Ext.MessageBox.alert(
'Just create Ajax recuest here. Post changed record:<br/>' +
Ext.JSON.encode(e.record.data)
);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
collapsible: true,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
features:[{
ftype: 'grouping',
hideGroupedHeader: false
}],
plugins: [rowEditing],
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
editor: {
allowBlank: false
}
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}],
renderTo: Ext.getBody()
});
});

Adding an empty row to a grid

I am trying to add rows to my grid.
I saw an example in the docs:
onAddRouteClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
buying_vendor_id: 12,
country_code: '1',
route: 0
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
But i cant seem to make it work in my code.
This is my grid:
onBtnRoutesSearchClick: function(button, e, options){
var me = this;
var v_url = 'GetRoutes.jsp?' + Ext.urlEncode({'route_id': routeID, 'route_country_code' : routeCountryCode , 'route_vendor_id' : routeVendorID});
var newTab = Ext.create('Ext.panel.Panel', {
id: 'routes_pannel',
title: 'Routes',
autoScroll: true,
layout: {
type: 'fit'
},
closable: true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'buttonResetBid',
icon: 'images/Plus.png',
text: 'Add Row',
listeners: {
click: {
fn: me.onAddRouteClick,
scope: me
}
}
}
]
}
],
items: [{
id: 'routes_grid',
xtype: 'gridpanel',
autoShow: false,
autoScroll: true,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'buying_vendor_id', type: 'int', sortType: 'asInt'},
{name: 'country_code', type: 'int', sortType: 'asInt'},
{name: 'route', type: 'int', sortType: 'asInt'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: v_url,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'buying_vendor_id',
width: 100,
text: 'Buying Vendor'
},
{
xtype: 'gridcolumn',
dataIndex: 'country_code',
width: 100,
text: 'Country Code'
},
{
xtype: 'gridcolumn',
dataIndex: 'route',
width: 80,
text: 'Route'
}
],
}]
});
var panel = Ext.getCmp("MainTabPanelID");
panel.add(newTab).show();
1.Create your model
Ext.define('Product', {
extend: 'Ext.data.Model',
fields:
[
{ name: 'ProductID' },
{ name: 'ProductName' },
{ name: 'UnitPrice' },
{ name: 'UnitsInStock' }
]
});
2.create your rowEditing
var rEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners:
{
edit: function (editor, e) { });
}
});
3.get Store and create your grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
plugins: [rEditor],
title: 'Products',
columns:
[
],
dockedItems:
[
{
xtype: 'toolbar',
dock: 'top',
items:
[
{
xtype: 'button',
text: 'Yeni',
listeners:
{
click:
{
fn: function () {
store.insert(0, new Product());
rEditor.startEdit(0, 0);
}
}
}
}
]
}
],
width: 450,
renderTo: Ext.getElementById('hede')
});
So you are trying to add a record to store right?
OK, lets look at the Store API
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-add
Sample usage:
myStore.add({some: 'data'}, {some: 'other data'});
The best practice is to also create a Model class . Read the component guides on grid and the data package .

Resources