select firstRow has Problem [Archive]

Dengqiao Huang

15 Jan 2012, 10:21 PM

Browser versions tested against:

IE 9 ,Firefox 10

Description:

If the "refresh" event select the first row, rendering error.

Test Case:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../Ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="../../ext4/ext-all-dev.js"></script>
<script type="text/javascript" src="../../ext4/src/diag/layout/Context.js"></script>
<script type="text/javascript" src="../../ext4/src/diag/layout/ContextItem.js">
<script type="text/javascript" src="../../Ext4/locale/Ext-lang-zh_CN.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">

Ext.define('Order', {
extend: 'Ext.data.Model',
fields: [
{name:'OrderID',type:"int"},
'CustomerID','CustomerName',
{name:'OrderDate',type:"date",format:"Y-m-d"}
],
idProperty:"OrderID",
hasMany:{model:"OrderDetail",name:"OrderDetails",foreignKey:"OrderID"}
});

Ext.define('OrderDetail',{
extend: 'Ext.data.Model',
fields: [
{name:'OrderID',type:"int"},
{name:'ProductID',type:"int"},
{name:'UnitPrice',type:"float"},
{name:'Quantity',type:"int"},
{name:'Discount',type:"float"},
'ProductName'
]
});

Ext.onReady(function(){
if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){
Ext.BLANK_IMAGE_URL="./images/s.gif";
}

//在此添加ExtJS代码

Ext.create("Ext.data.Store",{
model:'Order',
pageSize:50,
proxy: {
type: 'ajax',
api:{
read:'Customer.ashx?act=OrderList'
},
reader:{
type: 'json',
root:"data"
}
},
storeId:"OrderStore"
})

Ext.create("Ext.data.Store",{
model:'OrderDetail',
storeId:"OrderDetailStore"
})

Ext.create("Ext.data.TreeStore",{
proxy: {
type: 'ajax',
url:"Customer.ashx?act=CustomerList"
},
storeId:"CustomerStore"
})

Ext.create("Ext.Viewport",{
layout:"border",
padding: 5,
items:[
{xtype:"treepanel",
title:"Customer",
region:"west",
weight:50,
collapsible: true,
rootVisible:false,
store:"CustomerStore",
width:200,
minWidth:100,
weight:50,
split:true,
viewConfig:{
listeners:{
refresh:function(){
//this.select(0);
}
}
},
listeners:{
selectionchange:function(model,sels){
if(sels.length>0){
var rs=sels[0],
store=Ext.StoreMgr.lookup("OrderStore");
store.proxy.extraParams.CustomerID=rs.data.id;
store.load();
}
}
}
},
{xtype:"gridpanel",
title:"Order",
region:"center",
minWidth:200,
minHeight:200,
tbar:{xtype:"pagingtoolbar",store:"OrderStore"},
selMode:{mode:"SINGLE"},
collapsible: true,
columns:[
{xtype:"rownumberer",sortable:false,width:60},
{text:'Order ID',dataIndex:'OrderID'},
{text:'Customer ID',dataIndex:'CustomerID'},
{text:'Customer',dataIndex:'CustomerName',sortable:false,flex:1},
{xtype:"datecolumn",text:'Order Date',dataIndex:'OrderDate',format:"Y-m-d",width:100}
],
viewConfig:{
listeners:{
refresh:function(){
this.select()
}
}
},
listeners:{
selectionchange:function(model,rs){
if(rs.length>0){
var g=Ext.getCmp("DetailsGrid"),
store=model.view.store;
g.store.loadRecords(rs[0].OrderDetailsStore.data.items);
}
}
}
},
{xtype:"gridpanel",
id:"DetailsGrid",
title:"Order Details",
region:"south",
split:true,
height:300,
minHeight:200,
collapsible: true,
columns:[
{xtype:"rownumberer",sortable:false,width:60},
{text:'Product Name',dataIndex:'ProductName',sortable:false,flex:1},
{xtype:"numbercolumn",text:'Price',dataIndex:'UnitPrice',align:"right",format:"0,0.00"},
{xtype:"numbercolumn",text:'Quantity',dataIndex:'Quantity',format:"0,0"},
{xtype:"numbercolumn",text:'Discount',dataIndex:'Discount',format:"0,0.00"}
]
}
]
});

});
</script>
</body>
</html>

Has “this.select(0)” in TreePanel：
30728

No “this.select(0)” in TreePanel：
30729

evant

15 Jan 2012, 10:51 PM

You'll need to provide more info, I can't reproduce this using B1 or the latest code:

Ext.onReady(function() {

var tree = Ext.create('Ext.tree.Panel', {
renderTo: document.body,
width: 200,
height: 250,
root: {
text: 'Foo',
expanded: true,
children: [{
text: 'An item',
leaf: true
}]
},
viewConfig: {
listeners: {
refresh: function(){
this.select(0);
}
}
}
});

});

Not sure what the grids have to do with the test case, so I've removed them.

Dengqiao Huang

15 Jan 2012, 11:13 PM

I change the TreeStore:

Ext.create("Ext.data.TreeStore",{
proxy: {
type: 'ajax',
url:"tree.js"
},
storeId:"CustomerStore"
})

tree.js:

[
{
"id": "all",
"text": "All",
"leaf": true
},
{
"id": "ALFKI",
"text": "Alfreds Futterkiste",
"leaf": true
},
{
"id": "ANATR",
"text": "Ana Trujillo Emparedados y helados",
"leaf": true
},
{
"id": "ANTON",
"text": "Antonio Moreno Taquería",
"leaf": true
},
{
"id": "AROUT",
"text": "Around the Horn",
"leaf": true
},
{
"id": "BERGS",
"text": "Berglunds snabbk?p",
"leaf": true
},
{
"id": "BLAUS",
"text": "Blauer See Delikatessen",
"leaf": true
},
{
"id": "BLONP",
"text": "Blondesddsl père et fils",
"leaf": true
},
{
"id": "BOLID",
"text": "Bólido Comidas preparadas",
"leaf": true
},
{
"id": "BONAP",
"text": "Bon app'",
"leaf": true
},
{
"id": "BOTTM",
"text": "Bottom-Dollar Markets",
"leaf": true
},
{
"id": "BSBEV",
"text": "B's Beverages",
"leaf": true
},
{
"id": "CACTU",
"text": "Cactus Comidas para llevar",
"leaf": true
},
{
"id": "CENTC",
"text": "Centro comercial Moctezuma",
"leaf": true
},
{
"id": "CHOPS",
"text": "Chop-suey Chinese",
"leaf": true
},
{
"id": "COMMI",
"text": "Comércio Mineiro",
"leaf": true
},
{
"id": "CONSH",
"text": "Consolidated Holdings",
"leaf": true
},
{
"id": "WANDK",
"text": "Die Wandernde Kuh",
"leaf": true
},
{
"id": "DRACD",
"text": "Drachenblut Delikatessen",
"leaf": true
},
{
"id": "DUMON",
"text": "Du monde entier",
"leaf": true
},
{
"id": "EASTC",
"text": "Eastern Connection",
"leaf": true
},
{
"id": "ERNSH",
"text": "Ernst Handel",
"leaf": true
},
{
"id": "FAMIA",
"text": "Familia Arquibaldo",
"leaf": true
},
{
"id": "FISSA",
"text": "FISSA Fabrica Inter. Salchichas S.A.",
"leaf": true
},
{
"id": "FOLIG",
"text": "Folies gourmandes",
"leaf": true
},
{
"id": "FOLKO",
"text": "Folk och f? HB",
"leaf": true
},
{
"id": "FRANR",
"text": "France restauration",
"leaf": true
},
{
"id": "FRANS",
"text": "Franchi S.p.A.",
"leaf": true
},
{
"id": "FRANK",
"text": "Frankenversand",
"leaf": true
},
{
"id": "FURIB",
"text": "Furia Bacalhau e Frutos do Mar",
"leaf": true
},
{
"id": "GALED",
"text": "Galería del gastrónomo",
"leaf": true
},
{
"id": "GODOS",
"text": "Godos Cocina Típica",
"leaf": true
},
{
"id": "GOURL",
"text": "Gourmet Lanchonetes",
"leaf": true
},
{
"id": "GREAL",
"text": "Great Lakes Food Market",
"leaf": true
},
{
"id": "GROSR",
"text": "GROSELLA-Restaurante",
"leaf": true
},
{
"id": "HANAR",
"text": "Hanari Carnes",
"leaf": true
},
{
"id": "HILAA",
"text": "HILARION-Abastos",
"leaf": true
},
{
"id": "HUNGC",
"text": "Hungry Coyote Import Store",
"leaf": true
},
{
"id": "HUNGO",
"text": "Hungry Owl All-Night Grocers",
"leaf": true
},
{
"id": "ISLAT",
"text": "Island Trading",
"leaf": true
},
{
"id": "KOENE",
"text": "K?niglich Essen",
"leaf": true
},
{
"id": "LACOR",
"text": "La corne d'abondance",
"leaf": true
},
{
"id": "LAMAI",
"text": "La maison d'Asie",
"leaf": true
},
{
"id": "LAUGB",
"text": "Laughing Bacchus Wine Cellars",
"leaf": true
},
{
"id": "LAZYK",
"text": "Lazy K Kountry Store",
"leaf": true
},
{
"id": "LEHMS",
"text": "Lehmanns Marktstand",
"leaf": true
},
{
"id": "LETSS",
"text": "Let's Stop N Shop",
"leaf": true
},
{
"id": "LILAS",
"text": "LILA-Supermercado",
"leaf": true
},
{
"id": "LINOD",
"text": "LINO-Delicateses",
"leaf": true
},
{
"id": "LONEP",
"text": "Lonesome Pine Restaurant",
"leaf": true
},
{
"id": "MAGAA",
"text": "Magazzini Alimentari Riuniti",
"leaf": true
},
{
"id": "MAISD",
"text": "Maison Dewey",
"leaf": true
},
{
"id": "MEREP",
"text": "Mère Paillarde",
"leaf": true
},
{
"id": "MORGK",
"text": "Morgenstern Gesundkost",
"leaf": true
},
{
"id": "NORTS",
"text": "North/South",
"leaf": true
},
{
"id": "OCEAN",
"text": "Océano Atlántico Ltda.",
"leaf": true
},
{
"id": "OLDWO",
"text": "Old World Delicatessen",
"leaf": true
},
{
"id": "OTTIK",
"text": "Ottilies K?seladen",
"leaf": true
},
{
"id": "PARIS",
"text": "Paris spécialités",
"leaf": true
},
{
"id": "PERIC",
"text": "Pericles Comidas clásicas",
"leaf": true
},
{
"id": "PICCO",
"text": "Piccolo und mehr",
"leaf": true
},
{
"id": "PRINI",
"text": "Princesa Isabel Vinhos",
"leaf": true
},
{
"id": "QUEDE",
"text": "Que Delícia",
"leaf": true
},
{
"id": "QUEEN",
"text": "Queen Cozinha",
"leaf": true
},
{
"id": "QUICK",
"text": "QUICK-Stop",
"leaf": true
},
{
"id": "RANCH",
"text": "Rancho grande",
"leaf": true
},
{
"id": "RATTC",
"text": "Rattlesnake Canyon Grocery",
"leaf": true
},
{
"id": "REGGC",
"text": "Reggiani Caseifici",
"leaf": true
},
{
"id": "RICAR",
"text": "Ricardo Adocicados",
"leaf": true
},
{
"id": "RICSU",
"text": "Richter Supermarkt",
"leaf": true
},
{
"id": "ROMEY",
"text": "Romero y tomillo",
"leaf": true
},
{
"id": "SANTG",
"text": "Santé Gourmet",
"leaf": true
},
{
"id": "SAVEA",
"text": "Save-a-lot Markets",
"leaf": true
},
{
"id": "SEVES",
"text": "Seven Seas Imports",
"leaf": true
},
{
"id": "SIMOB",
"text": "Simons bistro",
"leaf": true
},
{
"id": "SPECD",
"text": "Spécialités du monde",
"leaf": true
},
{
"id": "SPLIR",
"text": "Split Rail Beer & Ale",
"leaf": true
},
{
"id": "SUPRD",
"text": "Suprêmes délices",
"leaf": true
},
{
"id": "THEBI",
"text": "The Big Cheese",
"leaf": true
},
{
"id": "THECR",
"text": "The Cracker Box",
"leaf": true
},
{
"id": "TOMSP",
"text": "Toms Spezialit?ten",
"leaf": true
},
{
"id": "TORTU",
"text": "Tortuga Restaurante",
"leaf": true
},
{
"id": "TRADH",
"text": "Tradi??o Hipermercados",
"leaf": true
},
{
"id": "TRAIH",
"text": "Trail's Head Gourmet Provisioners",
"leaf": true
},
{
"id": "VAFFE",
"text": "Vaffeljernet",
"leaf": true
},
{
"id": "VICTE",
"text": "Victuailles en stock",
"leaf": true
},
{
"id": "VINET",
"text": "Vins et alcools Chevalier",
"leaf": true
},
{
"id": "WARTH",
"text": "Wartian Herkku",
"leaf": true
},
{
"id": "WELLI",
"text": "Wellington Importadora",
"leaf": true
},
{
"id": "WHITC",
"text": "White Clover Markets",
"leaf": true
},
{
"id": "WILMK",
"text": "Wilman Kala",
"leaf": true
},
{
"id": "WOLZA",
"text": "Wolski Zajazd",
"leaf": true
}
]

This is only in the "TreeStore" of data will occur when the remote data.
30730

Firebug tips：
el is null
el.addCls.apply(el, arguments);
ext-all-dev.js (43917 Lines)