Sencha Touch: Problem loading form: Cannot read property "OffsetBoundary of undefined" - javascript

So I have a form and its respective store. The store works fine and it keeps the data in localStorage, but when I open the app again and try to update the form with the data from localStorage it doesn't work!
Any help would be much appreciated!
...
var optionsModel = new Ext.regModel('Options',{
fields: [ {name:'id', type:'int'}, 'language', 'range', 'limit', 'filters'],
proxy: { type: 'localstorage', id: 'options' }
});
...
Options = new Ext.Panel({
id: 'options',
floating: true,
hidden: true,
scroll: 'vertical',
hideOnMaskTap: false,
width:'50%',
autoHeight:true,
style:'min-width:300px;',
items: [{
title: 'Options',
xtype: 'form',
id: 'optionsForm',
items: [{
xtype: 'hiddenfield',
name: 'id',
value: 1
},{
xtype: 'fieldset',
title: 'Language',
defaults: {
labelWidth: '65%'
},
items: [{
xtype: 'selectfield',
name: 'language',
value: 'EN',
labelWidth: 0,
options: [{
text: 'English',
value: 'EN',
selected:true
}, {
text: 'Português',
value: 'PT'
}]
}]
},{
xtype: 'fieldset',
title: 'Limits',
defaults: {
// labelAlign: 'right'
labelWidth: '40%',
xtype: 'sliderfield',
},
items: [{
name: 'range',
label: 'Range',
value:1,
increment:1,
minValue: 1,
maxValue: 10
},{
name: 'limit',
label: 'Limit',
value:25,
increment:5,
minValue: 10,
maxValue: 50
}]
}],
store: new Ext.data.Store({
storeId: 'OptionsStore',
model: 'Options',
}),
/**
* Add custom event listener
*/
addEventListener: function(){
Options.on('beforeshow',this.loadSettings,this);
Options.on('beforehide',this.saveAction,this);
},
/**
* load user settings from store in the form
*/
loadSettings: function(){
this.store.load();
var data = this.store.getAt(0).data;
if (Ext.isObject(data)) {
var conf = Ext.ModelMgr.create({
id:1,
language: data.language,
limit: data.limit,
range: data.range
},
'Options'
);
console.log(data);
this.setValues({filters:"",id:1,language:"PT",limit:25,range:10}); // I've tried this.load() too.
}
},
/**
* Save form user settings model in store
*/
saveAction: function() {
var data = this.getValues();
var conf = Ext.ModelMgr.create({
id:1,
language: data.language,
limit: data.limit,
range: data.range
},
'Options'
);
this.store.loadData([]);
this.store.sync();
this.store.add(conf);
this.store.sync();
}
}]
});
...
Home.on('activate',function(){
Options.getComponent('optionsForm').addEventListener();
},this,{single:true});
...

As it turns out, the frameworks is still a bit buggy when it comes to forms and their respective input fields. I ended up creating JSON files to store the data for the translations and used an Ext.Sheet to mask out the Options panel (overcoming another bug). Code below..
...
function include(filename)
{
var head = document.getElementsByTagName('head')[0];
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}
var text = new Array();
include('app/lang/en.js'); // JSON file with English translation
include('app/lang/pt.js'); // JSON file withe Portuguese translation
function langText(lang,el) {
return text[lang][el];
}
...
var OptionsStorage = JSON.parse(window.localStorage.getItem('f2t-options'));
if(OptionsStorage == null) { //load defaults
OptionsStorage = new Object();
OptionsStorage.language = "EN";
}
window.localStorage.setItem('f2t-options',JSON.stringify(OptionsStorage));
Ext.apply(Ext.MessageBox.YES, {text: langText(OptionsStorage.language,'Yes')});
Ext.apply(Ext.MessageBox.NO, {text: langText(OptionsStorage.language,'No')});
...
var OptionsMask = new Ext.Sheet({
modal:false,
fullscreen:true,
stretchX: true,
stretchY: true,
style:'background:rgba(0,0,0,0.3) !important;', //style like a mask
addEventListener: function(){
this.el.on('click',function(){Options.hide();});
}
});
var Options = new Ext.Panel({
id: 'options',
floating: true,
modal: false,
hideOnMaskTap: false,
listeners:{
beforeshow: function(){
OptionsMask.show();
},
afterrender: function(){
OptionsMask.addEventListener();
},
hide: function(){
OptionsMask.hide();
updateNearby();
}
},
items: [{
xtype: 'form',
id: 'optionsForm',
items: [{
xtype: 'fieldset',
title: langText(OptionsStorage.language,'Language'),
items: [{
xtype: 'selectfield',
name: 'language',
value: OptionsStorage.language,
options: [{
text: 'English',
value: 'EN',
selected: (this.value == OptionsStorage.language)?true:false
}, {
text: 'Português',
value: 'PT',
selected: (this.value == OptionsStorage.language)?true:false
}],
listeners:{
change: function(){
Options.getComponent('optionsForm').saveAction();
// TRANSLATE STUFF
}
}
}]
}]
}]
}],
/**
* Save user settings in localstorage
*/
saveAction: function() {
var data = this.getValues();
OptionsStorage = new Object();
OptionsStorage.language = data.language;
window.localStorage.removeItem('f2t-options');
window.localStorage.setItem('f2t-options',JSON.stringify(OptionsStorage));;
}
}]
});

Related

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

Through ViewModel stores I'm getting this JSON data;
{
"success": true,
"msg": "OK",
"count": 2,
"data": [
{
"firstname": "BLA",
"lastname": "BLALA",
"isactive": true,
...
},
{
"firstname": "BLAAA",
"lastname": "BLALAAA",
"isactive": false,
...
}
I have two grids on one panel and one of them will load data only with isactive: true field, other grid will load only with false. So where and how I need to filtering store to load specified data to grids?
Here is VM;
Ext.define('MyApp.view.ListingVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.listing',
requires: [...],
reference: 'loyaltyvm',
stores: {
// Should I define the filter on here?
bonusTrans: {
storeId: 'bonusTrans',
// reference: 'bonusTrans',
model: 'MyApp.model.BonusTrans',
autoLoad: true,
session: true,
pageSize: MyApp.Globals.LIST_PAGE_SIZE
}
}
});
This is panel's grid sample where defined both of Grids. I've tried several way to get store and filtering but couldn't be succes;
getColumns: function () {
var me = this;
var panelItems = [
{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch', pack: 'start'},
items: [
xtype: 'bonustrans',
flex: 1,
title: 'Current Bonus',
getListCols: function () {
var me = this;
debugger;
// var activeStore = Ext.getStore('bonusTrans');
// var activeStore = me.viewModel.get('bonusTrans');
// var view = me.getView();
// var vm = view.getViewModel();
// var vm.getStore('bonusTrans')
// var activeStore = me.getViewModel().getStore('bonusTrans');
var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
activeStore.filter('isactive', 'true');
var listCols = [
{
xtype: 'firstnamecol',
flex: 1
},
{
xtype: 'checkoutcol'
},
{
xtype: 'bonustotalcol'
}
];
return listCols;
}
//... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.
Use chained stores, fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.container.Viewport({
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
stores: {
everything: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json'
}
},
active: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: true
}]
},
inactive: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: false
}]
}
}
},
items: [{
flex: 1,
xtype: 'gridpanel',
title: 'Active',
bind: '{active}',
columns: [{
dataIndex: 'name'
}]
}, {
flex: 1,
xtype: 'gridpanel',
title: 'Inactive',
bind: '{inactive}',
columns: [{
dataIndex: 'name'
}]
}]
});
}
});
The way of chained stores is surely the best,
here you can see a working fiddle on classic
and here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
var storeAll = Ext.create('Ext.data.Store', {
storeId: 'storeAll',
fields: [{
name: 'firstname'
}, {
name: 'lastname'
}, {
name: 'active'
}],
data: [{
firstname: 'test1',
lastname: 'test1',
active: true
}, {
firstname: 'test2',
lastname: 'test2',
active: true
}, {
firstname: 'test3',
lastname: 'test3',
active: false
}]
}),
chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: true
}]
}),
chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: false
}]
});
Ext.create({
xtype: 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'gridpanel',
title: 'grid ALL',
store: storeAll,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid active',
store: chainedStoreActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid inactive',
store: chainedStoreNoActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}],
renderTo: Ext.getBody()
});
}
});
The global or the "allelements" store, need to be a global store, the chained ones can be created in a viewmodel of a view.

Ext JS grid sort sent as a String instead of JSON

I am trying to implement server-side sorting with Sencha Ext JS and noticed something odd. The paging portion of the JSON looks fine but the sort property is set as a String and not an Array:
Actual:
{"page":1,"start":0,"limit":50,"sort":"[{\"property\":\"firstName\",\"direction\":\"ASC\"}]"}
Expected:
{"page":1,"start":0,"limit":50,"sort":[{"property":"firstName","direction":"ASC"}]}
ExtJs Code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
Ext.define('Customer',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'companyName', type: 'string'}
]
});
Ext.onReady(function(){
var itemsPerPage = 50; // Paging
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
// autoLoad: true,
autoLoad: {start: 0, limit: itemsPerPage},
autoSync: true,
model: 'Customer',
remoteSort: true,
proxy: {
paramsAsJson: true,
actionMethods: {
read: 'POST'
},
type: 'rest', // was... 'ajax',
url: '/customers',
reader: {
type: 'json',
root: 'content',
totalProperty: 'totalElements'
},
writer: {
type: 'json'
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
bufferedRenderer: false,
store: store,
columns: [
{text: "ID", width: 120, dataIndex: 'id', sortable: true},
{text: "First Name", flex: 1, dataIndex: 'firstName', sortable: true, editor: 'textfield'},
{text: "Last Name", width: 125, dataIndex: 'lastName', sortable: true, editor: 'textfield'},
{text: "Company Name", width: 125, dataIndex: 'companyName', sortable: true}
],
forceFit: true,
height:210,
split: true,
region: 'north',
plugins: [rowEditing],
// Paging
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
});
// define a template to use for the detail view
var customerTplMarkup = [
'ID: {id}<br/>',
'First Name: {firstName}<br/>',
'Last Name: {lastName}<br/>',
'Company Name: {companyName}<br/>'
];
var customerTpl = Ext.create('Ext.Template', customerTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
title: 'Customer List',
width: 580,
height: 400,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Please select a customer to see additional details.'
}]
});
// update panel body on selection change
grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
if (selectedRecord.length) {
var detailPanel = Ext.getCmp('detailPanel');
detailPanel.update(customerTpl.apply(selectedRecord[0].data));
}
});
});
i added beforeload listener to the store
here is a working example:
listeners: {
beforeload: function(store, operation, eOpts){
var sort = [];
var filter = [];
if(operation._sorters){
for(var i = 0; i< operation._sorters.length; i++){
var direction = operation._sorters[i]._direction;
var property = operation._sorters[i]._property;
sort.push({
"direction" : direction,
"property" : property
});
}
operation._proxy.extraParams = {sort:sort};
}
if(operation._filters){
for(var i = 0; i< operation._filters.length; i++){
var operator = operation._filters[i]._operator;
var property = operation._filters[i]._property;
var value = operation._filters[i]._value;
filter.push({
"operator" : operator,
"property" : property,
"value" : value
});
}
operation._proxy.extraParams = {filter:filter};
}
}
}

Get container's record on "initialize" in Sencha Touch

I have a listContainer and on tap of any item in the list, I open another page known as editContainer with the record from list. In the edit page, I want to disable a dropdown based on the value of another field, is there any way I can get the values in record in the initialize function of editContainer? Here is my code:-
onListItemTap:function(dataview,index,target,record,e,eOpts)
{
if(record)
this.editContainer = Ext.create('myApp.view.EditContainer',{title:'Edit Data'});
this.editContainer.setRecord(record);
this.getMainNav().push(this.editContainer);
}
Above code opens editContainer when a list item is selected. Below is my EditContainer
Ext.define('myApp.view.EditContainer', {
extend: 'Ext.Container',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Select'
],
config: {
id: 'editContainer',
autoDestroy: false,
layout: 'fit',
items: [
{
xtype: 'formpanel',
id: 'editFormPanel',
padding: 10,
styleHtmlContent: true,
autoDestroy: false,
layout: 'fit',
items: [
{
xtype: 'fieldset',
id: 'nameFieldSet',
autoDestroy: false,
items: [
{
xtype: 'textfield',
id: 'siteName',
itemId: 'mytextfield',
label: 'Name',
labelWidth: '35%',
name: 'name'
},
{
xtype: 'selectfield',
id: 'role',
itemId: 'myselectfield4',
label: 'Role',
labelWidth: '35%',
name: 'role',
options: [
{
text: 'Unassigned',
value: 'Unassigned'
},
{
text: 'Role1',
value: 'role1'
}
]
},
{
xtype: 'selectfield',
id: 'type',
label: 'Type',
labelWidth: '35%',
name: 'type',
options: [
{
text: 'Default',
value: 'Default'
},
{
text: 'Custom',
value: 'custom'
}
]
},
{
xtype: 'selectfield',
id: 'roleValue',
label: 'Role Value',
labelWidth: '35%',
name: 'rolevalue',
options: [
{
text: 'value1',
value: 'value1'
},
{
text: 'value2',
value: 'value2'
},
{
text: 'value3',
value: 'value3'
}
]
}
]
}
]
}
],
listeners: [
{
fn: 'onTextfieldKeyup',
event: 'keyup',
delegate: 'textfield'
},
{
fn: 'onSelectfieldChange',
event: 'change',
delegate: 'selectfield'
}
]
},
onTextfieldKeyup: function(textfield, e, eOpts) {
this.fireEvent('change', this);
},
onSelectfieldChange: function(selectfield, newValue, oldValue, eOpts) {
this.fireEvent('change', this);
},
initialize: function() {
this.callParent();
var record;
//Code to disable roleValue selectfield if Role is unassigned.
},
updateRecord: function(newRecord) {
var me = this,
myPanel = me.down('#editFormPanel');
if(myPanel)
myPanel.setRecord(newRecord);
},
saveRecord: function() {
var me =this,
myStore = Ext.data.StoreManager.lookup('MyStore');
var formPanel = me.down('#editFormPanel'),
record = formPanel.getRecord();
formPanel.updateRecord(record);
return record;
}
});
Since creating your editContainer and setting its data are two different steps in your code you can't use the initialize method of the editContainer.
But you can override the setRecord method of the editContainer, so it additionally disables the dropdown.
Since you push the editContainer onto a navigation view you could also use the activate event of the editContainer to disable the dropdown.
Maybe you can create a quick store on the fly, as a place to have a reference to that data...
//in your controller where you set the record
var mod = Ext.define('app.model.PanelDataModel', {
extend: 'Ext.data.Model',
config: {
fields: [
'roleValue'
]
}
});
var sto = Ext.create('Ext.data.Store', {
model: mod,
id:'PanelDataStore'
});
sto.add({
roleValue: record.roleValue
});
sto.sync();
//Now in your panel's initialize method:
var pstore = Ext.getStore('PanelDataStore');
pstore.load();
if(pstore.data.all[0].data.roleValue == 'unassigned'){
Ext.getCmp('roleValue').setDisabled(true);
}

ExtJS Store Not Loading From Proxy

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

How to access plugin in ExtJs MVC

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

Categories