PDA

View Full Version : grid is not defined for grid.startEditing



noog
9 Nov 2010, 6:00 AM
hello
i have some problem creating a simple function for inserting new data

this is a part of my code

xtype: 'button',
cls : 'x-btn-icon',
icon : 'images/icons/add.png',
handler : function () {
Ext.getCmp('gridmenu').getStore().insert(
0,
new article_model({
title_article : 'new moie',
texte_article : 'texte',
})
);
grid.startEditing(0,0);
}
and the error is :

grid is not defined
grid.startEditing(0,0);
this is the entire code

/*
* File: MyViewport.ui.js
* Date: Tue Nov 09 2010 13:07:15 GMT+0100 (CET)
*
* This file was generated by Ext Designer version xds-1.0.2.14.
* http://www.extjs.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/

MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {

var article_model = Ext.data.Record.create ([
'title_doc', 'texte_doc'
]);


this.items = [
{
xtype: 'panel',
title: 'mapforge v3',
region: 'north'
},
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
width: 100,
items: [
{
xtype: 'panel',
title: 'Tab 1',
width: 1045,
layout: 'border',
items: [
{
xtype: 'panel',
layout: 'fit',
region: 'west',
width: 276,
items: [
{
xtype: 'grid',
title: 'Projets',
store: 'StoreDoc',
id: 'gridmenu',
ref: '../../../grid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'title_doc',
header: 'label',
sortable: true,
width: 300,
id: 'label'
}
],
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'buttongroup',
title: 'Buttons',
columns: 2,
items: [
{
xtype: 'button',
cls : 'x-btn-icon',
icon : 'images/icons/add.png',
handler : function () {
Ext.getCmp('gridmenu').getStore().insert(
0,
new article_model({
title_article : 'new moie',
texte_article : 'texte',
})
);
grid.startEditing(0,0);
}
} ,
{
xtype: 'button',

cls : 'x-btn-icon',
icon : 'images/icons/delete.png',
handler : function (){
//Ext.Msg.alert('Boo', 'here i am');
var sm = Ext.getCmp('gridmenu').getSelectionModel();
var sel = sm.getSelected();
if(sm.hasSelection()){
Ext.Msg.show ({
title : 'Remove Movie',
buttons : Ext.MessageBox.YESNOCANCEL,
msg : 'Remove '+sel.data.title_doc+'?',
fn:function(btn){
if(btn == 'yes') {
Ext.getCmp('gridmenu').getStore().remove(sel);
}
}
})
}
}
}
]
}
]
}
}
]
},
{
xtype: 'panel',
layout: 'fit',
region: 'center',
items: [
{
xtype: 'form',
id: 'workspace',
flex : 1,
title: 'workspace',
autoScroll: true,

items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
fieldLabel: 'titre',
anchor: '100%',
id: 'title_doc'
},
{
xtype: 'htmleditor',
anchor: '100%',
height: 150,
fieldLabel: 'texte',
id: 'texte_doc'
}
]
}
],
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'buttongroup',

columns: 2,
items: [
{
xtype: 'button',
cls : 'x-btn-icon',
icon : 'images/icons/disk.png',
handler : function () {


Ext.Msg.alert('Boo', 'here i am');
//Ext.getCmp('workspace').getForm().submit();










//grid.startEditing(0,0);
}
}
]
}
]
}
}
]
}
]
} ,
{
xtype: 'panel',
title: 'Tab 3',
tbar: {
xtype: 'mytoolbar'
}
}
]
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
thanks for your help !

plalx
9 Nov 2010, 9:28 AM
How do you expect the grid variable to be defined?

Try adding:



var grid = Ext.getCmp('gridmenu');


Using Ext.getCmp internally is not a good practice tought, you should store a reference to the grid so that you can access it directly. The fact that the whole code is written in the viewport definition makes those things harder... I strongly recommend that you read Writing A Big Application In Ext (http://www.sencha.com/learn/Tutorial:Writing_a_Big_Application_in_Ext).

noog
12 Nov 2010, 2:28 AM
hello
i have read the article "wrting a big application in ext" so i try to externalize some elements
my first example : i have this in my main code

tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'buttongroup',

columns: 2,
items: [
{
xtype: 'button',
cls : 'x-btn-icon',
icon : 'images/icons/disk.png',
handler : function () {
Ext.Msg.alert('Boo', 'here i am');
//Ext.getCmp('workspace').getForm().submit();
//grid.startEditing(0,0);
}
}
]
}
]
}
i change for this

tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'save_form'
}
]
}

and after i create two new files
this one

save_form = Ext.extend(saveui, {
initComponent: function() {
saveui.superclass.initComponent.call(this);
}
});
Ext.reg('save_form', save_form);

and this one

saveui = Ext.extend(Ext.Toolbar, {
initComponent: function() {
this.items = [
{
xtype: 'buttongroup',
text: 'projet',
columns: 2,
items: [
{
xtype: 'button',
cls : 'x-btn-icon',
text : 'test save',
icon : 'images/icons/disk.png',
handler : function () {
Ext.Msg.alert('Boo', 'here i am');
}
}
]
}
];
saveui.superclass.initComponent.call(this);
}
});

and i add this new files in my html file

<script type="text/javascript" src="save.ui.js"></script>
<script type="text/javascript" src="save.js"></script>
but nothing happens in my interface
what's wrong ?
thks for your help