PDA

View Full Version : getSelectionModel is not a function



lpastor
14 Aug 2009, 8:43 AM
Hello,

I have modified the resful example. I use a Tabpanel, where I call a function SampleGrid() that display a grid with editor.

That's work, I can see my grid in the tabpanel and I can edit it.

But I can't Add or Delete, I have an error in firebug SampleGrid.getSelectionModel is not a function or SampleGrid.store isn't defined.




var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},
items:[ new SampleGrid(),{
title: 'Another Tab',
html: Ext.example.bogusMarkup
}]
});


My function in another file :


SampleGrid = function(){

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: 'app.php/users'
});

// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data'
}, [
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}
]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter();

// Typical Store collecting the Proxy, Reader and Writer together.

var store = new Ext.data.Store({
id: 'user',
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
listeners: {
write : function(store, action, result, response, rs) {
App.setAlert(response.success, response.message);
//setAlert(response.success, response.message);
store.load(); // Ajouté pour forcer le rafraichissement - Add to force the refresh of the data - LP

}
}
});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
];

// load the store immeditately
store.load();

var task = {
run: store.reload,
scope: store,
interval:5000
};

Ext.TaskMgr.start(task);
//Ext.TaskMgr.stop(task);

// use RowEditor for editing
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners:{
beforeedit: function () {
Ext.TaskMgr.stop(task);
},
beforehide: function () {
//afteredit: function () {
Ext.TaskMgr.start(task);
}
}
});

// Create a typical GridPanel with RowEditor plugin
//var userGrid = new Ext.grid.GridPanel({
SampleGrid.superclass.constructor.call(this, {
//renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
autoScroll: true,
height: 300,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: onDelete

}, '-'],
viewConfig: {
forceFit: true
}
});


function onAdd(btn, ev) {

var u = new SampleGrid.store.recordType({
first : '',
last: '',
email : ''
});
editor.stopEditing();
SampleGrid.store.insert(0, u);
editor.startEditing(0);
}

function onDelete() {
var rec = SampleGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
SampleGrid.store.remove(rec);

}

// to capture ALL events use:
/*
Ext.util.Observable.prototype.fireEvent =
Ext.util.Observable.prototype.fireEvent.createInterceptor(function() {
console.log(this.name);
console.log(arguments);
return true;
});
*/

}

Ext.extend(SampleGrid, Ext.grid.GridPanel);

hendricd
14 Aug 2009, 9:18 AM
@Ipastore -- You are treating the className SampleGrid as an instance of itself in your handlers.

Placing private functions in your constructor that reference the className accomplished nothing.

If you must continue with private functions, it should look like this:




SampleGrid.superclass.constructor.call(this, {
//renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
autoScroll: true,
height: 300,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: onAdd, // <- will work, but bad form
handler: this.onAddColumn // <-proper way
scope : this

}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: onDelete,
scope : this

}, '-'],
viewConfig: {
forceFit: true
}
});


function onAdd(btn, ev) {

var u = new (this.store.recordType)({
first : '',
last: '',
email : ''
});
editor.stopEditing();
SampleGridthis.store.insert(0, u);
editor.startEditing(0);
}

function onDelete() {
var rec = SampleGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
SampleGridthis.store.remove(rec);

}

Ext.extend(SampleGrid, Ext.grid.GridPanel,{
onAddColumn : function(btn,ev){
..............
}
});

lpastor
14 Aug 2009, 11:42 AM
Thank you very much Hendricd for your reply,

I make the change, but now window don't appear and I have an error : SampleGrid.superclass is undefined row 16 with firebug

Is it because I use in a function ?



SampleGrid = function(){

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners:{
beforeedit: function () {
Ext.TaskMgr.stop(task);
},
beforehide: function () {
//afteredit: function () {
Ext.TaskMgr.start(task);
}
}
});

SampleGrid.superclass.constructor.call(this, {
//renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
autoScroll: true,
height: 300,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: this.onAddColumn, // <-proper way
scope : this

}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: this.onDelete,
scope : this

}, '-'],
viewConfig: {
forceFit: true
}
});

Ext.extend(SampleGrid, Ext.grid.GridPanel,{
onAddColumn: function(btn,ev){
var u = new (this.store.recordType)({
first : '',
last: '',
email : ''
});
editor.stopEditing();
this.store.insert(0, u);
editor.startEditing(0);
},
onDelete: function() {
var rec = this.getSelectionModel().getSelected();
if (!rec) {
return false;
}
this.store.remove(rec);

}
});

}
This is the main code :





// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: 'app.php/users'
});

// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data'
}, [
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}
]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter();

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'user',
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
listeners: {
write : function(store, action, result, response, rs) {
App.setAlert(response.success, response.message);
store.load(); // Ajouté pour forcer le rafraichissement - Add to force the refresh of the data - LP

}
}
});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
];

// load the store immeditately
store.load();

var task = {
run: store.reload,
scope: store,
interval:5000
};

Ext.TaskMgr.start(task);
//Ext.TaskMgr.stop(task);

//#######################################################################################################
Ext.onReady(function() {
Ext.QuickTips.init();

Ext.state.Manager.setProvider(new Ext.state.SessionProvider({state: Ext.appState}));


var button = Ext.get('show-btn');

button.on('click', function(button){

//Ext.Msg.alert('Link', store.getCount() + ' - ' + store.getTotalCount());

Ext.get('show-btn').dom.disabled = true; // Pour désactiver le bouton

// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[new SampleGrid(),{
title: 'Another Tab',
html: Ext.example.bogusMarkup
}]
});

// Panel for the west
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Window({
title: 'Layout Window',
closable:true,
width:600,
height:350,
//border:false,
plain:true,
layout: 'border',
items: [nav, tabs]
});

win.show(this);

win.on('close', function(){Ext.get('show-btn').dom.disabled = false;}); // Pour réactiver le bouton

});

});

lpastor
14 Aug 2009, 12:10 PM
\:D/The solution :


SampleGrid = function(){

SampleGrid.superclass.constructor.call(this, {
//renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
autoScroll: true,
height: 300,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: this.onAddColumn,
scope : this

}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: this.onDelete,
scope : this

}, '-'],
viewConfig: {
forceFit: true
}
});
}

Ext.extend(SampleGrid, Ext.grid.GridPanel,{
onAddColumn: function(btn,ev){
var u = new (this.store.recordType)({
first : '',
last: '',
email : ''
});
editor.stopEditing();
this.store.insert(0, u);
editor.startEditing(0);
},
onDelete: function() {
var rec = this.getSelectionModel().getSelected();
if (!rec) {
return false;
}
this.store.remove(rec);

}
});

Thank a lot Hendricd for your help, that saw me the good way...

Laurent