PDA

View Full Version : how to display the data in the gridPanel?



zhangyonghui
4 Aug 2010, 11:34 PM
I use the gridPanel to display the data dynamically,but the data can not display.I don't kown why!So,please help me.
There are my code.

Ext.namespace("com.branchitech.taskmanager");

/**
* ??????????????
*/
com.branchitech.taskmanager.DatasByTagsDisplay = function(config){
config = config || {};
config = this._initConfig(config);
com.branchitech.taskmanager.DatasByTagsDisplay.superclass.constructor.call(this,config);
};

Ext.extend(com.branchitech.taskmanager.DatasByTagsDisplay,Ext.grid.GridPanel,{
//?????
_initConfig : function(config){
var defaultConfig = this._initDefaultConfig();
Ext.applyIf(config,defaultConfig);//?????????????
return config;
},

//???????
_initDefaultConfig : function(){
var sm = this._initSm();
var store = this._initStore();
var columns = this._initColumns();
var buttons = this._initButtons();
var pageBar = this._initPageBar(store);
var defaultConfig = {
id : "DATAS-PANEL",//id?
viewConfig : { //????
forceFit: true,
deferEmptyText: true,
emptyText : "<font color = 'red'>??????</font>"
},
autoScroll : true,//???
autoSizeColumns : true,//??????
autoHeight : true,//??????
//height : 400,
//autoExpandColumn : "data",
sm : sm,
store : store,
cm : columns,
tbar : buttons,
bbar : pageBar
};
return defaultConfig;
},

//???sm
_initSm : function(){
var sm = new Ext.grid.RowSelectionModel({
singleSelect : true
});
return sm;
},

//???store
_initStore : function(){
return com.branchitech.taskmanager.dataStore;
},

//???column
_initColumns : function(){
var columns = new Ext.grid.ColumnModel([
{header: "????", width: 200, sortable: true, dataIndex: 'title'},
{header: "????", width: 400, sortable: true, renderer: this.formatDescription, dataIndex: 'description'},
{header: "??????", width: 200, sortable: true, dataIndex: 'source'}
//{header: "????", width: 200, sortable: true}
]);
return columns;
},

//??????????
_initButtons : function(){
var buttons = [];
var button1 = new Ext.Button({
text : "button1"
});
buttons.push(button1);
return buttons;
},
//????????
_initPageBar : function(store){
var pageBar = new Ext.PagingToolbar({
store : store,
pageSize : 6,
displayInfo : true,
displayMsg : "???{0}????{1}?????{2}???",
emptyMsg : "????"
})
return pageBar;
},

//??????????????50??????
formatDescription : function(description){
alert(description);
}
});

com.branchitech.taskmanager.dataRecord = Ext.data.Record.create([
{
name : 'title',
type : "String"
},
{
name : 'description',
type : "String"
},
{
name : 'source',
type : "String"
}
]);

com.branchitech.taskmanager.dataStore = new Ext.data.JsonStore({
autoLoad : true,
proxy : new Ext.data.HttpProxy(
{
url : "../test/json/datas.json"
}
),
reader: new Ext.data.JsonReader(
{
'totalProperty': "results",
root: "rows"
},
com.branchitech.taskmanager.dataRecord
)
});

the datas.json is:

{
'results' : 2,
'rows' : [
{'title': '????','description': '??????','source' : '??????'},
{'title': '????','description': '??????','source' : '??????'}
]
}

Condor
4 Aug 2010, 11:45 PM
1. type:'String' is not a valid type. You want type:'string' (small s).
2. JsonStore doesn't have a reader config option. You want a normal Ext.data.Store.

zhangyonghui
6 Aug 2010, 3:12 AM
Yes,you are right. The Ext.data.JsonStore does not have a reader config option and a proxy config option.The reader config option is instead of "totalProperty"?"root"?"fields" config option,and the url option is instead of the proxy config option.So there are the correct code.See below.
Ext.namespace("com.branchitech.taskmanager");
/**
* ??????????????
*/
com.branchitech.taskmanager.DatasByTagsDisplay = function(config){
config = config || {};
config = this._initConfig(config);
com.branchitech.taskmanager.DatasByTagsDisplay.superclass.constructor.call(this,config);
};
Ext.extend(com.branchitech.taskmanager.DatasByTagsDisplay,Ext.grid.GridPanel,{
//?????
_initConfig : function(config){
var defaultConfig = this._initDefaultConfig();
Ext.applyIf(config,defaultConfig);//?????????????
return config;
},

//???????
_initDefaultConfig : function(){
var sm = this._initSm();
var store = this._initStore();
var columns = this._initColumns();
var buttons = this._initButtons();
var pageBar = this._initPageBar(store);
var defaultConfig = {
id : "DATAS-PANEL",//id?
el : "dataList",
viewConfig : { //????
forceFit: true,
deferEmptyText: true,
emptyText : "<font color = 'red'>??????</font>"
},
autoScroll : true,//???
autoSizeColumns : true,//??????
autoHeight : true,//??????
//height : 400,
sm : sm,
store : store,
cm : columns,
tbar : buttons,
bbar : pageBar
};
return defaultConfig;
},

//???sm
_initSm : function(){
var sm = new Ext.grid.RowSelectionModel({
singleSelect : true
});
return sm;
},

//???store
_initStore : function(){
return com.branchitech.taskmanager.dataStore;
},

//???column
_initColumns : function(){
var columns = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "????",sortable: true, dataIndex: 'title'},
{header: "????",sortable: true, renderer: this.formatDescription, dataIndex: 'description'},
{header: "??????", sortable: true, dataIndex: 'source'}
//{header: "????", width: 200, sortable: true}
]);
return columns;
},

//??????????
_initButtons : function(){
var buttons = [];
var button1 = new Ext.Button({
text : "button1"
});
buttons.push(button1);
return buttons;
},

//????????
_initPageBar : function(store){
var pageBar = new Ext.PagingToolbar({
store : store,
pageSize : 6,
displayInfo : true,
displayMsg : "???{0}????{1}?????{1}???",
emptyMsg : "????"
})
return pageBar;
},

//??????????????50??????
formatDescription : function(description){
description = description.substr(0,50);
//description = description.substring() + "...";
if(description.length >= 50){
description = description + "..."
}
return description;
}
});
com.branchitech.taskmanager.dataStore = new Ext.data.JsonStore({
autoLoad : true,
url : "../test/json/datas.json",
//'totalProperty': "results",
root: "rows",
fields : [
{
name : "title",
type : "string"
},
{
name : "description",
type : "string"
},
{
name : "source",
type : "string"
}
]
});