Store Issue - Ext JS

最新推荐文章于 2025-07-08 00:33:24 发布

最新推荐文章于 2025-07-08 00:33:24 发布 · 105 阅读

文章标签：

#EXT #CSS #JavaScript #prototype #YUI #ViewUI

extJs 专栏收录该内容

281 篇文章

订阅专栏

本文探讨了在使用ExtJS框架时遇到的问题：当Grid的数据源（Store）被清空后，尝试插入新记录时出现的错误。通过提供示例代码，详细描述了触发错误的具体步骤，并分享了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jack - I have been looking at some of the examples involving Grids - and just to help my understanding of how they work have been altering some of you examples so that I can add and remove rows from a grid.

When using a Store, if I either:
(1) use the removeAll method or
(2) remove records using the remove method individually until no records are left

then when I next attempt to insert a new record at position 0, I get the following error:

r.data has no properties
Firefox points to Line 21194 in ext-all-debug.js:

p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);

As long as there is one record in the grid I can add in new records ok - but as soon as all the rows have been removed this error occurs. If I then try to insert a new first row a second time it works and no error occurs. Then if you remove all rows and try to add in a new first row you don't get the r.data error! You can get it to throw the error again - if you remove one more row than actually exists - all a bit strange!

I've included below the code to highlight the issue and to see if its something i've missed or if there is a bug.
Cheers.

Below is the modified code for the array-grid.html example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Array Grid Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
	    <script type="text/javascript" src="../../yui-utilities.js"></script>
	    <script type="text/javascript" src="../../ext-yui-adapter.js"></script>
	    <script type="text/javascript" src="../../ext-all-debug.js"></script>
    <script type="text/javascript" src="array-grid.js"></script>
    <link rel="stylesheet" type="text/css" href="grid-examples.css" />
    <link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<h1>Array Grid Example</h1>
<div id="grid-example" style="overflow: hidden; width: 535px; height: 225px;"></div>
</br><a title="empty" onmousedown="emptyTable()">Click to remove row 0</a>
</br><a title="empty" onmousedown="minimalTable()">Click to add new row at position 0</a>
</body>
</html>

and the modified array-grid.js javascript:

var testTable = null;
var Example2 = {
	init : function(){
		testTable = new myTable();
	}
};

function myTable(){
	this.ds = new Ext.data.Store({
		        proxy: new Ext.data.MemoryProxy(myData),
		        reader: new Ext.data.ArrayReader({id: 0}, [
                       {name: 'company'},
                       {name: 'price', type: 'float'},
                       {name: 'change', type: 'float'},
                       {name: 'pctChange', type: 'float'},
                       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                  ])
        });
    this.ds.load();
    
    this.Plant = Ext.data.Record.create([
       {name: 'company', type: 'string'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
      ]);
    
    // the DefaultColumnModel expects this blob to define columns. It can be extended to provide 
    // custom or reusable ColumnModels
    this.colModel = new Ext.grid.ColumnModel([
		{header: "Company", width: 200, sortable: true, locked:false, dataIndex: 'company'}, 
		{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, 
		{header: "Change", width: 75, sortable: true, renderer: myTable.change, dataIndex: 'change'}, 
		{header: "% Change", width: 75, sortable: true, renderer: myTable.pctChange, dataIndex: 'pctChange'},
		{header: "Last Updated", width: 85, sortable: true, renderer: myTable.italic, dataIndex: 'lastChange'}
	]);
	
	// create the Grid
    this.grid = new Ext.grid.Grid('grid-example', {
        ds: this.ds,
        cm: this.colModel
    });

    this.grid.render();
    
    this.grid.getSelectionModel().selectFirstRow();
}

myTable.prototype.italic = function(value){
    return '' + value + '';
}

// example of custom renderer function
myTable.prototype.change = function(val){
    if(val > 0){
        return '<span style="color:green;">' + val + '</span>';
    }else if(val < 0){
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
}
// example of custom renderer function
myTable.prototype.pctChange = function(val){
    if(val > 0){
        return '<span style="color:green;">' + val + '%</span>';
    }else if(val < 0){
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
}

myTable.prototype.changeValues = function(changeOption)
{
	var locds = this.grid.getDataSource();
	
	if (changeOption == 1)
	{
//		locds.removeAll();	
		var rec = locds.getAt(0);
		locds.remove(rec);
	}
	else if (changeOption == 2)
	{
		var Plant = Ext.data.Record.create([
                       {name: 'company', type: 'string'},
                       {name: 'price', type: 'float'},
                       {name: 'change', type: 'float'},
                       {name: 'pctChange', type: 'float'},
                       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
      	]);
		
		var p = new Plant({
			
			 company: 'Honeywell Intl Inc',
			 price: 38.77,
			 change: 0.05,
			 pctChange: 0.13,
			 lastChange: '9/1 12:00am'
            });

		locds.insert(0, p);

	}

}
    
Ext.onReady(Example2.init, Example2, true);   

var myData = [
			['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
		];

function emptyTable()
{
	testTable.changeValues(1);
}

function minimalTable()
{
	testTable.changeValues(2);
}

02-25-2007, 10:16 AM

Can you put up a link somewhere that I can open it in a debugger?

02-25-2007, 10:50 AM

Fraid not - but if you take the code above - place it into two files array-grid.html and array-grid.js and make sure they are both in the examples/grid folder then you can run it locally.