My code is as follows (I can post more if it would help you help me!):
//var store = myGrid.getStore();
var store = Ext.data.StoreManager.get("CountrySpecificStore")
console.log(store);
The console gives me this upon execution of the lines above:
[Ext.Loader] Synchronously loading 'CountrySpecific'; consider adding
Ext.require('CountrySpecific') above Ext.onReady
ext-dev.js:8894 GET
[localhost]/extjs/CountrySpecific.js?_dc=1395952634289 404 (Not
Found)
ext-dev.js:10587 Uncaught Error: [Ext.Loader] Failed loading
synchronously via XHR: 'CountrySpecific.js'; please verify that the
file exists. XHR status code: 404 ext-dev.js:10857
Instead of http://localhost/extjs/CountrySpecific.js?_dc=1395952634289 it should be calling my proxy which is defined as:
Ext.define('RateManagement.store.CountrySpecificStore', {
extend: 'Ext.data.Store',
model: 'RateManagement.model.CountrySpecific',
proxy: {
type: 'rest',
format: 'json',
url: '/intake/sap/rates/CountrySpecific'
},
autoSync: true,
autoLoad: true
});
How can I make it call http://localhost/intake/sap/rates/CountrySpecific?
Note: I am using ExtJS 4.2.1.
Edit: Here is my Grid, where I am using using the store:
Ext.define('RateManagement.view.Grids.CountrySpecificGrid', {
extend: 'Ext.grid.Panel',
requires:['Ext.ux.CheckColumn'],
xtype: 'CountrySpecificGrid',
store: 'RateManagement.store.CountrySpecificStore',
plugins: [{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting',
pluginId: 'rowediting'
}],
tbar: [{
text: 'Add Rate',
handler: function(button) {
var myGrid = button.up('grid');
//console.log(myGrid);
var myPlugin = myGrid.getPlugin('rowediting');
myPlugin.cancelEdit();
var r = Ext.create('CountrySpecific', {
id: '',
hostCountryId: '',
hostCountry: '',
rate: 0,
currencyId: '',
rateTypeId: '',
frequencyCode: '',
perFamilyMember: '',
familySize: 0
});
//var store = myGrid.getStore();
var store = Ext.data.StoreManager.get("CountrySpecificStore")
console.log(store);
// todo: create guid and add to store
store.insert(0, r);
myPlugin.startEdit(0, 0);
}
}],
features: [{
ftype: 'filters',
encode: false,
local: true,
filters: [
{ type: 'string', dataIndex:'hostCountry' },
{ type: 'numeric', dataIndex:'rate' },
{ type: 'string', dataIndex:'currencyId' }
]
}],
columns: [
{text: 'Host Country', dataIndex: 'hostCountry', width:150},
{text: 'Rate', dataIndex: 'rate', xtype: 'numbercolumn',
editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }},
{text: 'Rate Currency', dataIndex: 'currencyId', xtype: 'currency-column' },
{text: 'Frequency', xtype: 'rate-type-column' },
{text: 'PerFamilyMember', dataIndex: 'perFamilyMember', xtype: 'checkcolumn',
editor: {xtype: 'checkbox',cls: 'x-grid-checkheader-editor'}},
{text: 'Family Size', dataIndex: 'familySize',
editor: { xtype: 'numberfield', minValue: 0, invalidText: 'Family Size must be positive.' }}
]
});
It seems like you're using the StoreManager to get a store, which hasn't been registered before, so he tries to dynamically load the definition.
Since the only information he got is "CountrySpecificStore" he tries to find this class in the ExtJS directory.
You have to require the store class in the class that calls Ext.data.StoreManager.get("CountrySpecificStore")
My problem was I needed to declare my model variable like this:
var r = Ext.create('RateManagement.model.CountrySpecific', {
id: '',
hostCountryId: '',
hostCountry: '',
rate: 0,
currencyId: '',
rateTypeId: '',
frequencyCode: '',
perFamilyMember: '',
familySize: 0
});
Then, I was able to simply:
var store = myGrid.getStore();
Related
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.
I have a gridpanel on a panel window that loads a certain store:
xtype: 'gridpanel',
store: custStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
id: 'playerslist-grid-id',
itemId: 'playerslist-grid-id',
viewConfig: {
deferEmptyText: false,
emptyText: 'No records yet'
},
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
hidden: bHide,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
The custStore variable is handled like this.
var oMe = this;
oController = EcommBackoffice.Global.app_var.getController('CustomerTagsController'),
cStore = oController.getCustomerListStore(),
cDetails = cStore.first(),
customers = [];
customers = cDetails.get('customers');
var custStore = Ext.create('Ext.data.ArrayStore', {
model: 'CustomerList',
data: customers
});
I needed to put it in an array store as the data object is nested like so:
{
id: 1,
name: 'test',
description: 'test',
customers: [{
id: 001,
username: 'bob'
}, {
id: 001,
username: 'terese'
}, {
id: 001,
username: 'dab'
}, {
id: 001,
username: 'bba'
}, {
id: 001,
username: 'hello'
}]
}
On my controller I process a function that places custStore to it and other parameters before a request.
click: function() {
oController.addPlayerToTag(newPlayer, tagId, custStore);
}
Problem: How do I reload custStore on the gridpanel I'm on after a successful callback? I tried using custStore.load() but nothing happened.
If I understand correctly, you get a new array of customers back from the server and need to refresh the grid with that array. In that case I think you need to call setData on the custStore, passing in the new array of customers. Not sure if 4.2 has this method. If not, try setting custStore.data property.
If that alone doesn't work, try also calling reconfigure on the grid, passing in the custStore.
I am trying to add a toolbar to my grid with an "Add New Record" button.
The code example provided by Sencha is here:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}],
//etc...
});
Example: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html
I am having trouble applying this to my code since I use the MVC pattern. This is my code:
Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
extend: 'Ext.grid.Panel',
xtype: 'AirShipmentGrid',
plugins: [
{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting'
},
'bufferedrenderer'
],
tbar: [{
text: 'Add Rate',
//iconCls: 'rate-add',
handler : function() {
rowEditing.cancelEdit(); // rowEditing is not defined...
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0); // rowEditing is not defined...
}
}],
// etc...
});
How can I access the "rowEditing" plugin so as to call it's required methods?
the handler from the buttons gets a reference to the button as a first argument. You can use that reference with a componentquery to get a reference to your grid panel that houses it. The gridPanel has a getPlugin method with which you can fetch a plugin based on a pluginId.The only thing you have to make sure of is to give the plugin a pluginId, otherwise the Grid cannot find it. This should work:
Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
extend: 'Ext.grid.Panel',
xtype: 'AirShipmentGrid',
plugins: [
{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting',
pluginId: 'rowediting'
},
'bufferedrenderer'
],
tbar: [{
text: 'Add Rate',
//iconCls: 'rate-add',
handler : function(button) {
var grid = button.up('gridpanel');
var rowEditing = grid.getPlugin('rowediting');
rowEditing.cancelEdit(); // rowEditing is now defined... :)
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0); // rowEditing is not defined...
}
}],
// etc...
});
Cheers, Rob
EDIT: added complete example:
- Go to http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/grid/row-editing.html
- Open the javascript console
- Paste the below code in there
It will create a second grid with a button that finds the row editing plugin and cancels your edit. doubleclick a row to start editing, click the button in the tbar to cancel it. Works like a charm. Make sure you have specified the pluginId, otherwise the grid's getPlugin method cannot find it.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function() {
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email', {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
}, {
name: 'salary',
type: 'float'
}, {
name: 'active',
type: 'bool'
}
]
});
// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
eDate = Ext.Date,
now = new Date(),
getRandomInt = Ext.Number.randomInt,
generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() < now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start: eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name: name,
email: name.toLowerCase().replace(' ', '.') + '#sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.MONTH, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 105,
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')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Cancel editing Plugin',
handler: function(button) {
var myGrid = button.up('grid');
var myPlugin = myGrid.getPlugin('rowediting')
myPlugin.cancelEdit();
console.log(myPlugin);
}
}],
plugins: [{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting',
pluginId: 'rowediting'
}]
});
});
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 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