PDA

View Full Version : Second EditorGrid Render, Editors do not work



adbox
10 Mar 2009, 9:33 AM
Here is how the problem works.

I open a record into a tab, and a grid editors is one of the items of that tab.

The first time the record is opened, the Editorgrid is editable.

... I x out.

The second time the record is opened, the EditorGrid is un-editable. I recieve FB errors.

Here is my function code


//get id of selected items
function f_bopp_quotes_openRecord(){
var GRID_BOPP_QUOTES = Ext.getCmp('id_grid_bopp_quotes');
var selection = GRID_BOPP_QUOTES.selModel.getSelections();


if (GRID_BOPP_QUOTES.selModel.getCount()==1)
{
var selects = []; selects.push(selection[0].json.id); var selects_array = Ext.encode(selects);

//load data relative to slection
DS_BOPP_QUOTES_2.baseParams = { task: 'OPENRECORD', selects: selects_array };
DS_BOPP_QUOTES_2.load();
DS_BOPP_QUOTES_3.baseParams = {task: 'LINEITEMS',selects: selects_array };
DS_BOPP_QUOTES_3.load();
DS_BOPP_QUOTES_2.on('load', function(){


/////////////SET OPEN QUOTE INTO TAB WINDOW
Ext.getCmp('tabs_default').insert(0,{
id: 'id_tab_bopp_open_quote',
title: DS_BOPP_QUOTES_2.collect('company_name'),
listeners: {activate: f_quoteSwitch},
layout:'fit', border:false, closable:true,
items: {
labelAlign:'top', labelWidth: 75,
layout:'table', id: 'id_bopp_quotes_table',
layoutConfig: {columns: 3, valign:top},
autoScroll: true,
defaults: { valign:'top'},
items: [{
title:'Customer Information',
layout:'form',
colspan:1,
autoWidth:true,
rowspan:1,
bodyStyle: 'padding-left:10px; width:100%;
text-align:left;padding-top:10px;padding-bottom:10px;padding-right:10px; ',
items: [
{xtype:'textfield',fieldLabel: 'First Name',name: 'first_name',
width: 50,autoWidth:true,anchor:'95%',value: DS_BOPP_QUOTES_2.collect('first_name')},
],
},
{

title:'Line Items',
xtype:'editorgrid',
id:'id_bopp_quotes_lineitems',
colspan: 3, rowspan: 1, bodyStyle: 'text-align:center;padding:0px;', height:300,
store: DS_BOPP_QUOTES_3,
cm: CM_BOPP_QUOTES_2,
enableColLock:false, autoExpandColumn: 'service_description',
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
}
}],
buttons: [
{
text:'Send Quote',
handler: f_send,
},
{
text: 'Save',
handler: f_save,
},
{
text: 'Print',
handler: f_bopp_quotes_print,
},
{
text: 'Close',
handler: f_close
}],
});


//set active tab
Ext.getCmp('tabs_default').setActiveTab('id_tab_bopp_open_quote');
},false,{single: true} );//end function unique()

}//end if rows selected is equal to one
}//end f_open()
Firebug Errors


this.field is null...getValue()()ext-all-debug.js (line 21492)completeEdit()(undefined)ext-all-debug.js (line 21410)startEdit()(div.x-grid3-cell-inner, "Proof")ext-all-debug.js (line 21354)(?)()()ext-all-debug.js (line 33773)getViewWidth()()ext-base.js (line 9)chrome://firebug/content/blank.gif return this.field.getValue();

adbox
11 Mar 2009, 7:23 AM
I think this is a bug, but I have maxed out my capabilities in moving froward., and installed a handful of random overrides dealing with grid editors. But it may be a common mistake that I've not learned how to avoid yet... :s

jsakalos
11 Mar 2009, 10:26 AM
post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase)

adbox
11 Mar 2009, 12:13 PM
Working showcase:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->


<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
var viewport = new Ext.Viewport
( {

layout: 'border',
id: 'main',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel',
height: 63,
html: 'hhh',
},{

region: 'west',
xtype: 'panel',
split: true,
width: 200,
border: false,
collapsible: true,
collapseMode: 'mini',
bodyStyle:'padding:5px;',
items: [{
frame:true,
title: 'BookletPrintingPros',
collapsible:true,
titleCollapse: true

}
]
},{

region: 'center',
xtype: 'tabpanel',
//xtype:'ddtabpanel',
id: 'tabs_default',
autoScroll: true,
layoutOnTabChange:true,
//begin tabs
activeTab: 0,
items: [
{
id: 'id_tab_summary',
title: 'Summary',
closable:true,
html:'hello',
},
]
},{
id: 'id_nav_east',
region: 'east',
xtype: 'panel',
collapsed:true,
collapsible: true,
collapseMode: 'mini',
autoScroll: true,
split: true,
width: 200,



}]
});
//end declared layout

///////////////DATA STORE
var myData = [
['1',2,3,4,5],
['1',2,3,4,5],
];


DS_BOPP_QUOTES = new Ext.data.SimpleStore({
fields: [
{name: '1'},
{name: '2', type: 'string'},
{name: '3', type: 'string'},
{name: '4', type: 'string'},
{name: '5', type: 'string'}
]
});
DS_BOPP_QUOTES.loadData(myData);

DS_BOPP_QUOTES_3 = new Ext.data.SimpleStore({
fields: [
{name: '1'},
{name: '2', type: 'string'},
{name: '3', type: 'string'},
{name: '4', type: 'string'},
{name: '5', type: 'string'}
]
});
DS_BOPP_QUOTES_3.loadData(myData);



//////////////////////////////////////////////////////////////////////////////////QUOTE MANAGEMENT CODE

//////////COLLUMN MODEL
CM_BOPP_QUOTES = new Ext.grid.ColumnModel(
[{
header: '#',
readOnly: true,
dataIndex: '1',
width: 90,
hidden: false,


},{
header: 'Last Name',
dataIndex: '2',
width: 90,


},{
header: 'First Name',
dataIndex: '3',
width: 90,

},{
header: 'Company Name',
dataIndex: '4',
width: 170,

},{
header: 'Phone',
readOnly: true,
dataIndex: '5',
width: 100,
}
]
);



//////////COLLUMN MODEL for LINE ITEMS
var bopp_q_e= Ext.form;
CM_BOPP_QUOTES_2 = new Ext.grid.ColumnModel(
[{
header: false,
sortable: false,
dataIndex: '1',
hidden: true,

},
{
header: 'Name',
sortable: false,
readOnly: false,
dataIndex: '2',
width: 200,
align: 'left',
hidden: false,
editor: new bopp_q_e.TextField({
allowBlank: false
})

},{
header: '#',
readOnly: false,
sortable: false,
dataIndex: '3',
width:100,
editor: new bopp_q_e.NumberField({
allowBlank: true,
allowNegative: false,
maxValue: 100000000})

},{
header: 'Description',
name: 'service_description',
id: 'service_description',
readOnly: false,
align: 'left',
sortable: false,
dataIndex: '4',
width:300,
editor: new bopp_q_e.TextField({
allowBlank: true,
})
},{
header: 'Cost',
readOnly: false,
sortable: false,
dataIndex: '5',
width:100,
editor: new bopp_q_e.NumberField({
allowBlank: true,
allowNegative: false,
maxValue: 100000000})
}
]
);



Ext.getCmp('tabs_default').insert(0,{
id: 'id_tab_bopp_quotes',
view:'table',
title: 'BOPP Quotes',
bodyStyle:'padding-left:20px;padding-right:20px;width:100%;',
border: true,
closable:true,
items:[{
html: "<br>",
border: false
},
{
xtype: 'panel',
border: true,
title: 'Quotes',
bodyStyle:'padding:1px;',
split: true,
collapsible: true,
collapseMode: 'mini',
items: [{
id: 'id_grid_bopp_quotes',
xtype: 'grid',
height:350,
tbar:[
{
text: 'Open',
tooltip:'Open Record.',
handler: f_bopp_quotes_openRecord,
iconCls: 'print'
}

] ,
store: DS_BOPP_QUOTES,
cm: CM_BOPP_QUOTES,
enableColLock:false,
clicksToEdit:1,
}],
}]


});
//set active tab
Ext.getCmp('tabs_default').setActiveTab('id_tab_bopp_quotes');
/////////////////FUNCTION OPEN/EDIT CUSTOMER////////////////////////////////////
function f_bopp_quotes_openRecord(){

var GRID = Ext.getCmp('id_grid_bopp_quotes');


//SET-UP ARRY TO OPEN RECORD(S)
if (GRID.selModel.getCount()==1)
{
var tab = Ext.getCmp('id_tab_bopp_open_quote');
if (tab)
{
Ext.MessageBox.alert('Notice', 'Quote Already Open');
}
else
{

Ext.getCmp('tabs_default').insert(0,{
id: 'id_tab_bopp_open_quote',
title: 'hello',
layout:'fit',
border:false,
closable:true,
xtype:'form',
//autoScroll: true,
items: {
labelAlign:'top',
labelWidth: 75,
layout:'table',
id: 'id_bopp_quotes_table',
layoutConfig: {columns: 3, valign:top},
bodyStyle: 'padding-left:5px; width:90%;text-align:center;padding-left:20px;padding-right:40px;padding-bottom:5px;padding-top:20px;',
autoScroll: true,
//autoWidth:true,
defaults: { valign:'top', bodyStyle: ''
},
items: [{
title:'Line Items',
xtype:'editorgrid',
id:'id_bopp_quotes_lineitems',
colspan: 3,
rowspan: 1,
bodyStyle: 'text-align:center;padding:0px;',
height:300,
store: DS_BOPP_QUOTES_3,
cm: CM_BOPP_QUOTES_2,
enableColLock:false,
autoExpandColumn: 'service_description',
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),

},{
title:'Employee Comments',
colspan:3,
rowspan:1,
autoWidth:true,
bodyStyle: 'padding-left:10px; width:100%;text-align:left;padding-top:10px;padding-right:10px;padding-bottom:10px; ',
items: [{xtype:'textarea',fieldLabel: 'Employee Comments',id:'employee_comments',anchor:'95%',width:800,height:300,
value: 'Hi the quote you requested. To place your order point your web browser to the link provided below. We will review your order and contact you for verification. \n\n<br><br>\n\n<br><br>If you have any questions at all please respond directly to this email and a representative will answer them as soon as possible. If you would like to request another quote just follow the link below.<br><br>\n\n<a href=http://www.postcardpros.com/orders/verify_order.php?quote_number://www.postcardpros.com/upload.php> Upload your artwork.</a><br>\n<a href=http://www.postcardpros.com/accounts/login.php> Login to view your Account.</a><br>\n<a href=http://www.postcardpros.com/quotes/quote.php> Request an additional quote.</a><br><br><br>\n\n Sincerely,<br>\n',}

],
},] ,
},

});

//if quote is already addressed then change these paramaters


//set active tab
Ext.getCmp('tabs_default').setActiveTab('id_tab_bopp_open_quote');

//refresh lineitem editorgrid
function f_refresh(){
DS_BOPP_QUOTES_3.reload();
}


//adds line item to open quote
function f_addLineItem()
{
var grid = Ext.getCmp('id_bopp_quotes_lineitems');
var values = {};
values['service_name'] = ' ';
values['service_quantity'] = ' ';
values['service_description'] = ' ';
values['service_cost'] = ' ';
values['service_include'] = '1';
record = new Ext.data.Record(values);
DS_BOPP_QUOTES_3.add(record);
}





function f_close(){
DS_BOPP_QUOTES.reload();
Ext.getCmp('tabs_default').remove('id_tab_bopp_open_quote');
Ext.getCmp('tabs_default').setActiveTab('id_tab_bopp_quotes');

}







}//end else

}//end if
if (GRID.selModel.getCount()==0)
{
Ext.MessageBox.alert('Notice','Please select record to open');

}
if (GRID.selModel.getCount()>1)
{
Ext.MessageBox.alert('Notice','Please select single record.');
}
}




//////////////COLOR TEXT OF STATUS/////////////
function f_bopp_quotes_alterColor(value, cell, record, rowIndex, colIndex, store){
//alert(store);
if(value=='New')
{
var org = "green";
cell.attr = 'style="color:'+org+'"';
}
if (value=='Addressed')
{
var org = "grey";
cell.attr = 'style="color:'+org+'"';
}
return value;
}



///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////CLOSE ONREADY///////////////////////////////////////////////////////

});
</script>

</head>
<body>
</body>

</html>

jsakalos
11 Mar 2009, 12:49 PM
I was playing a bit with it but the code is too complex and hard to read to find the problem fast.

Somebody else?

mjlecomte
11 Mar 2009, 1:20 PM
I was playing a bit with it but the code is too complex and hard to read to find the problem fast.

Somebody else?

I agree.

OP. You should at least post some working code. I'll paste what I did to reformat and do some slight trimming to get down to the point of your problems. If you want help in the future I suggest you trim your code down as far as possible to where you get the problem exposed.

Case in point it looks like you should be posting a tabpanel with a grid in it. No need to even post code to plop it into a viewport. No need to include code to add line items, or refresh, no need to have 5 columns when your problem would show up with 1, etc.

For starters you have trailing commas galore.

You have several places you haven't defined a layout.

Looks like the meat of your problem is that you re-use id's. id's must be unique on a page.

You would be well served to break your code up into discernible chunks and then operate with those chunks.



Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
id: 'main',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel',
height: 63,
html: 'hhh'//,
}, {
region: 'west',
xtype: 'panel',
split: true,
width: 200,
//what is the layout for the child items?
items: [{
title: 'West',
collapsible: true,
titleCollapse: true
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs_default',
autoScroll: true,
layoutOnTabChange: true,
activeTab: 0,
items: [
{
id: 'id_tab_summary',
title: 'Summary',
closable: true,
html: 'hello'//,
}//,
]
}, {
id: 'id_nav_east',
region: 'east',
xtype: 'panel',
collapsed: true,
collapsible: true,
collapseMode: 'mini',
autoScroll: true,
split: true,
width: 200//,
}]
});

var myData = [
['1', 2, 3, 4, 5],
['1', 2, 3, 4, 5]//,
];

DS_BOPP_QUOTES = new Ext.data.SimpleStore({
fields: [{
name: '1'
}, {
name: '2',
type: 'string'
}, {
name: '3',
type: 'string'
}, {
name: '4',
type: 'string'
}, {
name: '5',
type: 'string'
}]
});

DS_BOPP_QUOTES.loadData(myData);

DS_BOPP_QUOTES_3 = new Ext.data.SimpleStore({
fields: [{
name: '1'
}, {
name: '2',
type: 'string'
}, {
name: '3',
type: 'string'
}, {
name: '4',
type: 'string'
}, {
name: '5',
type: 'string'
}]
});
DS_BOPP_QUOTES_3.loadData(myData);


CM_BOPP_QUOTES = new Ext.grid.ColumnModel([{
header: '#',
readOnly: true,
dataIndex: '1',
width: 90,
hidden: false//,
}, {
header: 'Last Name',
dataIndex: '2',
width: 90//,
}, {
header: 'First Name',
dataIndex: '3',
width: 90//,
}, {
header: 'Company Name',
dataIndex: '4',
width: 170//,
}, {
header: 'Phone',
readOnly: true,
dataIndex: '5',
width: 100//,
}]);

// huh?
var bopp_q_e = Ext.form;


CM_BOPP_QUOTES_2 = new Ext.grid.ColumnModel([{
header: false,
sortable: false,
dataIndex: '1',
hidden: true//,
}, {
header: 'Name',
sortable: false,
readOnly: false,
dataIndex: '2',
width: 200,
editor: new bopp_q_e.TextField({
allowBlank: false
})

}, {
header: '#',
readOnly: false,
sortable: false,
dataIndex: '3',
width: 100,
editor: new bopp_q_e.NumberField({
allowBlank: true,
allowNegative: false,
maxValue: 100000000
})
}, {
header: 'Description',
name: 'service_description',
id: 'service_description',
dataIndex: '4',
width: 300,
editor: new bopp_q_e.TextField({
allowBlank: true//,
})
}, {
header: 'Cost',
readOnly: false,
sortable: false,
dataIndex: '5',
width: 100,
editor: new bopp_q_e.NumberField({
allowBlank: true,
allowNegative: false,
maxValue: 100000000
})
}]);

Ext.getCmp('tabs_default').insert(0, {
id: 'id_tab_bopp_quotes',
//view?
view: 'table',
title: 'BOPP Quotes',
bodyStyle: 'padding-left:20px;padding-right:20px;width:100%;',
border: true,
closable: true,
//layout for child items?
items: [{
html: "<br>",
border: false
}, {
xtype: 'panel',
border: true,
title: 'Quotes',
bodyStyle: 'padding:1px;',
split: true,
collapsible: true,
collapseMode: 'mini',
//layout for child items?
items: [{
id: 'id_grid_bopp_quotes',
xtype: 'grid',
height: 350,
tbar: [{
text: 'Open',
tooltip: 'Open Record.',
handler: f_bopp_quotes_openRecord,
iconCls: 'print'
}],
store: DS_BOPP_QUOTES,
cm: CM_BOPP_QUOTES,
enableColLock: false,
clicksToEdit: 1//,
}]//,
}]


});

Ext.getCmp('tabs_default').setActiveTab('id_tab_bopp_quotes');

function f_bopp_quotes_openRecord(){

var GRID = Ext.getCmp('id_grid_bopp_quotes');


if (GRID.selModel.getCount() == 1) {
var tab = Ext.getCmp('id_tab_bopp_open_quote');
if (tab) {
Ext.MessageBox.alert('Notice', 'Quote Already Open');
}
else {

Ext.getCmp('tabs_default').insert(0, {
id: 'id_tab_bopp_open_quote',
title: 'hello',
layout: 'fit',
border: false,
closable: true,
xtype: 'form',
items: {
labelAlign: 'top',
labelWidth: 75,
layout: 'table',
id: 'id_bopp_quotes_table',
layoutConfig: {
columns: 3,
valign: top
},
bodyStyle: 'padding-left:5px; width:90%;text-align:center;padding-left:20px;padding-right:40px;padding-bottom:5px;padding-top:20px;',
autoScroll: true,
defaults: {
valign: 'top',
bodyStyle: ''
},
items: [{
title: 'Line Items',
xtype: 'editorgrid',
id: 'id_bopp_quotes_lineitems',
colspan: 3,
rowspan: 1,
bodyStyle: 'text-align:center;padding:0px;',
height: 300,
store: DS_BOPP_QUOTES_3,
cm: CM_BOPP_QUOTES_2,
enableColLock: false,
autoExpandColumn: 'service_description',
clicksToEdit: 1,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: false
})//,
}, {
title: 'Employee Comments',
colspan: 3,
rowspan: 1,
autoWidth: true,
bodyStyle: 'padding-left:10px; width:100%;text-align:left;padding-top:10px;padding-right:10px;padding-bottom:10px; ',
items: [{
xtype: 'textarea',
fieldLabel: 'Employee Comments',
id: 'employee_comments',
anchor: '95%',
width: 800,
height: 300,
value: 'tive will answer them as soon as possible. If you would like to request another quote just follow the link below.<br><br>\n\n<a href=http://www.postcardpros.com/orders/verify_order.php?quote_number://www.postcardpros.com/upload.php> Upload your artwork.</a><br>\n<a href=http://www.postcardpros.com/accounts/login.php> Login to view your Account.</a><br>\n<a href=http://www.postcardpros.com/quotes/quote.php> Request an additional quote.</a><br><br><br>\n\n Sincerely,<br>\n' //,
}]//,
}//,
]//,
}//,
});

Ext.getCmp('tabs_default').setActiveTab('id_tab_bopp_open_quote');

function f_refresh(){
DS_BOPP_QUOTES_3.reload();
}

function f_addLineItem(){
var grid = Ext.getCmp('id_bopp_quotes_lineitems');
var values = {};
values['service_name'] = ' ';
values['service_quantity'] = ' ';
values['service_description'] = ' ';
values['service_cost'] = ' ';
values['service_include'] = '1';
record = new Ext.data.Record(values);
DS_BOPP_QUOTES_3.add(record);
}

function f_close(){
DS_BOPP_QUOTES.reload();
Ext.getCmp('tabs_default').remove('id_tab_bopp_open_quote');
Ext.getCmp('tabs_default').setActiveTab('id_tab_bopp_quotes');
}

}//end else
}//end if
if (GRID.selModel.getCount() == 0) {
Ext.MessageBox.alert('Notice', 'Please select record to open');

}
if (GRID.selModel.getCount() > 1) {
Ext.MessageBox.alert('Notice', 'Please select single record.');
}
}




function f_bopp_quotes_alterColor(value, cell, record, rowIndex, colIndex, store){
//alert(store);
if (value == 'New') {
var org = "green";
cell.attr = 'style="color:' + org + '"';
}
if (value == 'Addressed') {
var org = "grey";
cell.attr = 'style="color:' + org + '"';
}
return value;
}
});

adbox
11 Mar 2009, 5:04 PM
Hey thanks. I just spend a good while combing through all the trailing commas. I had no clue they would be so troublesome... I'm finding this out today working with IE7.

Well, I thought that when I destroyed the tab, every child item and it's id would be destroyed.

Should I move away from the id system if I am using tabs, and try a variable system? If I cannot control the opening and reopening of records into tabs by id, what do you recommend. Or can I?

mjlecomte
11 Mar 2009, 5:09 PM
I'm under the assumption you might open multiple records (tabs I guess?) using this code:



function f_bopp_quotes_openRecord(){

var GRID = Ext.getCmp('id_grid_bopp_quotes');


if (GRID.selModel.getCount() == 1) {
var tab = Ext.getCmp('id_tab_bopp_open_quote');
if (tab) {
Ext.MessageBox.alert('Notice', 'Quote Already Open');
}
else {

Ext.getCmp('tabs_default').insert(0, {
id: 'id_tab_bopp_open_quote',


That's just one example. If you use that you've created two tabs with the same id. I guess you could give each tab an id corresponding to something akin to the record id. To me it looks like you're using a static id though for all tabs.

mjlecomte
11 Mar 2009, 5:10 PM
Don't forget to scan the code I posted for other issues you seem to have with layout, etc.

adbox
12 Mar 2009, 5:13 AM
Don't forget to scan the code I posted for other issues you seem to have with layout, etc.

I did, the layout error with the view:table was a mistake I made when sizing down the code...., thank you again.

The strange thing is that when I comment out the id's ('id_tab_bopp_customers' & ''id_grid_bopp_customers'), the error still happens. This can be replicated with the working showcase.

So This makes me assume that it's not a problem with duplicate ids.

And also, I am still under the impression that if a tab is then it's child comonent's ids are destroyed. So this isn't true?

mjlecomte
12 Mar 2009, 5:19 AM
post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase)

Post an updated, clean, working showcase. See the link for how to do this. Hopefully the code you post has addressed any prior suggestions.

adbox
12 Mar 2009, 6:31 AM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->


<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
///////////////DATA STORE
var myData = [['1',2,3,4,5],['1',2,3,4,5],];


DS_1 = new Ext.data.SimpleStore({
fields: [{name: '1'}]
});


DS_2 = new Ext.data.SimpleStore({
fields: [{name: '1'}]
});

DS_1.loadData(myData);

DS_2.loadData(myData);


//////////COLLUMN MODEL FOR GRID
CM_1 = new Ext.grid.ColumnModel(
[{
header: '#',

readOnly: true,

dataIndex: '1',

width: 90,

hidden: false

}]
);



//////////COLUMN MODEL FOR EDITORGRID
var bopp_q_e= Ext.form;
CM_2 = new Ext.grid.ColumnModel(
[{

header: '#',

readOnly: false,

dataIndex: '1',

width: 200,

editor: new bopp_q_e.TextField({

allowBlank: false

})

}]
);

//render opening panel that will house tabs
var panel = new Ext.Panel({

layout: 'fit',

renderTo: Ext.getBody(),

width: 500,

height:700,

items: {
xtype: 'tabpanel',

id: 'tabs_default',

activeTab: 0,

layoutOnTabChange:true,

items:{

title: 'Grid',

closable:true,

id: 'grid',

xtype: 'grid',

height: 350,

width: 500,

store: DS_1,

cm: CM_1,

tbar: [{

text: 'Open',

tooltip:'Open Record.',

handler: f_openRecord

}]

}
}

});



//Function to open record into new tab.
function f_openRecord(){

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

if (GRID.selModel.getCount()==1)
{
var tab = Ext.getCmp('id_open_record');

if (tab){Ext.MessageBox.alert('Notice', 'Quote Already Open');}
else
{
Ext.getCmp('tabs_default').insert(0,{

id: 'id_open_record',

title: 'Gird Editor',

layout:'fit',

closable:true,

xtype:'form',

items: {

title:'Line Items',

xtype:'editorgrid',

id:'id_bopp_quotes_lineitems',

height:300,

store: DS_2,

cm: CM_2,

clicksToEdit:1,

selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
}
});//end insert new tab

//set active tab
Ext.getCmp('tabs_default').setActiveTab('id_open_record');

}//end else

}//end if

}

////////////////////////////////////////CLOSE ONREADY///////////////////////////////////////////////////////
});
</script>

</head>
<body>
</body>
</html>

jsakalos
12 Mar 2009, 6:42 AM
I do not want to be harsh, but tell me, how can I read or debug the code formatted this way:
http://extjs.eu/wrong-code-format.png

mjlecomte
12 Mar 2009, 6:59 AM
Goes back to my earlier comment of :

You would be well served to break your code up into discernible chunks and then operate with those chunks.


Perhaps you would have realized you're destroying stores, column model and attempting to reuse the store widgets.

Try this. By the way, you still have trailing commas, other issues.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>
<!-- ** CSS ** --><!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../ext-all-debug.js">
</script>
<!-- overrides to base library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){
//trailing comma
//var myData = [ ['1',2,3,4,5], ['1',2,3,4,5], ];
var myData = [['1', 2, 3, 4, 5], ['1', 2, 3, 4, 5]];

DS_1 = new Ext.data.SimpleStore({
fields: [{
name: '1'
}]
});


DS_1.loadData(myData);

CM_1 = new Ext.grid.ColumnModel([{
header: '#',
readOnly: true,
dataIndex: '1',
width: 90,
hidden: false
}]);
//what is this for? the alias isn't any shorter
var bopp_q_e = Ext.form;

var panel = new Ext.Panel({
layout: 'fit',
renderTo: Ext.getBody(),
width: 200,
height: 200,
items: {
xtype: 'tabpanel',
id: 'tabs_default',
activeTab: 0,
layoutOnTabChange: true,
items: {
title: 'Grid',
closable: true,
id: 'grid',
xtype: 'grid',
// height: 350,
// width: 500,
store: DS_1,
cm: CM_1,
tbar: [{
text: 'Open',
tooltip: 'Open Record.',
handler: f_openRecord
}]
}
}
});

function f_openRecord(btn, e){

var GRID = Ext.getCmp('grid');
var rec = GRID.selModel.getSelected();
if (rec) {

var tab = Ext.getCmp('id_open_record');
if (tab) {
Ext.MessageBox.alert('Notice', 'Quote Already Open');
}
else {
DS_2 = new Ext.data.SimpleStore({
fields: [{
name: '1'
}]
});
DS_2.loadData(myData);

CM_2 = new Ext.grid.ColumnModel([{
header: '#',
sortable: false,
readOnly: false,
dataIndex: '1',
width: 200,
editor: new bopp_q_e.TextField({
allowBlank: false
})
}]);
Ext.getCmp('tabs_default').insert(0, {
id: 'id_open_record',
title: 'Gird Editor',
layout: 'fit',
closable: true,
xtype: 'form',
items: {
title: 'Line Items',
xtype: 'editorgrid',
id: 'id_bopp_quotes_lineitems',
height: 300,
store: DS_2,
cm: CM_2,
clicksToEdit: 1,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: false
})
}
});
Ext.getCmp('tabs_default').setActiveTab('id_open_record');
}
}
}
});
</script>
</head>
<body>
</body>
</html>

adbox
12 Mar 2009, 8:10 AM
I do not want to be harsh, but tell me, how can I read or debug the code formatted this way:


:)) well you have an ugly problem there. That's my fault. I'm dumb...It looked ugly when I posted it in this forum box, so I modified it so it would look better, and that messed it up for you when you copied and pasted.

Here is the un-botched version:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->


<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
///////////////DATA STORE
var myData = [
['1',2,3,4,5],
['1',2,3,4,5],
];


DS_1 = new Ext.data.SimpleStore({
fields: [
{name: '1'}
]
});


DS_2 = new Ext.data.SimpleStore({
fields: [
{name: '1'}
]
});

DS_1.loadData(myData);
DS_2.loadData(myData);

//////////COLLUMN MODEL FOR GRID
CM_1 = new Ext.grid.ColumnModel(
[{
header: '#',

readOnly: true,

dataIndex: '1',

width: 90,

hidden: false

}]
);



//////////COLUMN MODEL FOR EDITORGRID
var bopp_q_e= Ext.form;
CM_2 = new Ext.grid.ColumnModel(
[{

header: '#',

sortable: false,

readOnly: false,

dataIndex: '1',

width: 200,

editor: new bopp_q_e.TextField({
allowBlank: false
})

}]
);


var panel = new Ext.Panel({



layout: 'fit',

renderTo: Ext.getBody(),

width: 500,

height:700,

items: {
xtype: 'tabpanel',

id: 'tabs_default',

activeTab: 0,

layoutOnTabChange:true,

items:{

title: 'Grid',

closable:true,

id: 'grid',

xtype: 'grid',

height: 350,

width: 500,

store: DS_1,

cm: CM_1,

tbar: [{

text: 'Open',

tooltip:'Open Record.',

handler: f_openRecord

}]

}
}

});



/////////////////Function to open record into new tab.
function f_openRecord(){

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



if (GRID.selModel.getCount()==1)
{
var tab = Ext.getCmp('id_open_record');

if (tab){Ext.MessageBox.alert('Notice', 'Quote Already Open');}
else
{
Ext.getCmp('tabs_default').insert(0,{
id: 'id_open_record',

title: 'Gird Editor',

layout:'fit',

closable:true,

xtype:'form',

items: {

title:'Line Items',

xtype:'editorgrid',

id:'id_bopp_quotes_lineitems',

height:300,

store: DS_2,

cm: CM_2,

clicksToEdit:1,

selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
}
});//end insert new tab

//set active tab
Ext.getCmp('tabs_default').setActiveTab('id_open_record');

}//end else

}//end if

}

////////////////////////////////////////CLOSE ONREADY///////////////////////////////////////////////////////
});

</script>

</head>
<body>
</body>
</html>

adbox
12 Mar 2009, 8:23 AM
Goes back to my earlier comment of :


Perhaps you would have realized you're destroying stores, column model and attempting to reuse the store widgets.

Try this. By the way, you still have trailing commas, other issues.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>
<!-- ** CSS ** --><!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../ext-all-debug.js">
</script>
<!-- overrides to base library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){
//trailing comma
//var myData = [ ['1',2,3,4,5], ['1',2,3,4,5], ];
var myData = [['1', 2, 3, 4, 5], ['1', 2, 3, 4, 5]];

DS_1 = new Ext.data.SimpleStore({
fields: [{
name: '1'
}]
});


DS_1.loadData(myData);

CM_1 = new Ext.grid.ColumnModel([{
header: '#',
readOnly: true,
dataIndex: '1',
width: 90,
hidden: false
}]);
//what is this for? the alias isn't any shorter
var bopp_q_e = Ext.form;

var panel = new Ext.Panel({
layout: 'fit',
renderTo: Ext.getBody(),
width: 200,
height: 200,
items: {
xtype: 'tabpanel',
id: 'tabs_default',
activeTab: 0,
layoutOnTabChange: true,
items: {
title: 'Grid',
closable: true,
id: 'grid',
xtype: 'grid',
// height: 350,
// width: 500,
store: DS_1,
cm: CM_1,
tbar: [{
text: 'Open',
tooltip: 'Open Record.',
handler: f_openRecord
}]
}
}
});

function f_openRecord(btn, e){

var GRID = Ext.getCmp('grid');
var rec = GRID.selModel.getSelected();
if (rec) {

var tab = Ext.getCmp('id_open_record');
if (tab) {
Ext.MessageBox.alert('Notice', 'Quote Already Open');
}
else {
DS_2 = new Ext.data.SimpleStore({
fields: [{
name: '1'
}]
});
DS_2.loadData(myData);

CM_2 = new Ext.grid.ColumnModel([{
header: '#',
sortable: false,
readOnly: false,
dataIndex: '1',
width: 200,
editor: new bopp_q_e.TextField({
allowBlank: false
})
}]);
Ext.getCmp('tabs_default').insert(0, {
id: 'id_open_record',
title: 'Gird Editor',
layout: 'fit',
closable: true,
xtype: 'form',
items: {
title: 'Line Items',
xtype: 'editorgrid',
id: 'id_bopp_quotes_lineitems',
height: 300,
store: DS_2,
cm: CM_2,
clicksToEdit: 1,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: false
})
}
});
Ext.getCmp('tabs_default').setActiveTab('id_open_record');
}
}
}
});
</script>
</head>
<body>
</body>
</html>


hmmm. this code works. Destroying stores and CMs... Thanks for this, this helps a lot with my understanding. I didnt know that destroying a gid would destroy it's assigned DS and CM... Is that the case?

jsakalos
12 Mar 2009, 8:24 AM
You must be kidding. This is better?
http://extjs.eu/wrong-code-format2.png

adbox
12 Mar 2009, 8:29 AM
You must be kidding. This is better?
http://extjs.eu/wrong-code-format2.png


no. I assumed it would be better. I was not kidding though. You and I, our editors are different. what is pretty and neat for me is ugly for you. ...

mjlecomte
12 Mar 2009, 10:05 AM
Take your code and run it through
http://jsbeautifier.org/
and then
http://jslint.com

That will format your code so it is indented properly WITH SPACES NOT TABS, and then also clean up all of the trailing commas issues.

You would run just the javascript through the above two. Take that resulting formatted code and plop it inside the html document and test that it runs locally as you expect, and then post it into the forum.

mjlecomte
12 Mar 2009, 10:09 AM
As of 2.2.1 I don't know that stores are destroyed, I'd have to double check the code as far as column models goes as well, but I suspect that's the case as the code you've tested attests to. In Ext 3.x I forget what the situation is, I think there was some threads/discussion about possibly having the store destroyed automatically based on some config, but I'm not sure, the thought there being that a store might be still used by another widget.

You'll go farther if you inspect the source code yourself. I don't claim to know it all, sometimes just takes a little peek under the hood to see what may be going on.

mjlecomte
12 Mar 2009, 10:12 AM
Here's Ext.grid.GridPanel destroy template method:


onDestroy : function(){
if(this.rendered){
var c = this.body;
c.removeAllListeners();
c.update("");
Ext.destroy(this.view, this.loadMask);
}
Ext.destroy(this.colModel);
Ext.grid.GridPanel.superclass.onDestroy.call(this);
},


I don't see anything in Ext 3.x svn yet for autoDestroy of store, so looks like it's your responsibility to destroy the store if you're not using it to prevent memory leak.

mjlecomte
12 Mar 2009, 10:22 AM
For store see:
http://extjs.com/forum/showthread.php?p=302235#post302235
and
http://extjs.com/forum/showthread.php?p=290263#post290263

adbox
12 Mar 2009, 10:25 AM
Take your code and run it through
http://jsbeautifier.org/
and then
http://jslint.com

That will format your code so it is indented properly WITH SPACES NOT TABS, and then also clean up all of the trailing commas issues.

You would run just the javascript through the above two. Take that resulting formatted code and plop it inside the html document and test that it runs locally as you expect, and then post it into the forum.


word thanks for these.

I made changes based on your example and rendered my DS and CM for the grideditor within the same function that its called from. This cleared it up and no more problems.

Thank allot to both of you for helping me through this.