new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
再来说这一部分。这是比较简洁和标准的JsonReader方式了。
先说明Json的数据格式，这个很重要，我在这个上面载了个大跟头，只知道用json数据传送，却不知道是什么格式。
（{"total":"5","results":["id":"28","name":"SamPeng","typename":"这是种类","time":"2008.02.02"]}）
这是一条返回记录。如果是多条。
（{"total":"5","results":["id":"28","name":"SamPeng","typename":"这是种类","time":"2008.02.02"，{第二条}，{第三条}，{第四条}]}）
能看明白吗？呵呵，不明白那我也多打几个字。总结一下。
如果是自己构建一个json数组给Ext的话。应该是这样的格式。
{test:'test'}
必须背这个大括号扩起来。
前面test就向上面申明的name属性，作为标记符号，告诉JsonReader获取这个数据后该如何截断处理。
我用的php写的返回我上面例子的返回json数据。
Echo $callback.'({"total":"'.$article_NUM.'","results":'.json_encode($result_array).'})';
看见了吗。我必须去构建这个json数组的格式，并且标记符号必须和jsonReader上的一样。
也就是total和results所截取的值是在这个返回里规定好了的。如果格式不同，将读不出数据来。
再回头看root属性，就是绑定results标记符号后面的json数据格式值了。在jsonReader后面的属性
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
就是来对json数组进行截取处理的。
最后进行加载。因为这只是个定义，并且进行实例化。并没对其进行任何操作。
这个很好理解。就像你洗衣服，把衣服仍进洗衣机了，但你不开开关，不接电源，衣服是不会干净的。
由于创建了这个Stroy数据源，所以可以对其进行调用他的方法了。Stroy下有一个方法是load。对其数据进行加载。也就是开始洗衣了。呵呵~
接下来回到上面的GridPanel的属性
cm: userCM
这是设定好表的列头。什么。你不知道什么叫列头。。你可以洗洗睡了。
Java代码
var cm = new Ext.grid.ColumnModel([
selectBoxModel,
{header:'文章序号',dataIndex:'id', tooltip: '文章编号'},
{header:'文章标题',dataIndex:'name',tooltip: '文章名称'},
{header:'文章类型',dataIndex:'typename',tooltip: '文章类别'},
{header:'修改时间',dataIndex:'time',tooltip: '修改时间'}
]);
cm.defaultSortable = false;
var cm = new Ext.grid.ColumnModel([
selectBoxModel,
{header:'文章序号',dataIndex:'id', tooltip: '文章编号'},
{header:'文章标题',dataIndex:'name',tooltip: '文章名称'},
{header:'文章类型',dataIndex:'typename',tooltip: '文章类别'},
{header:'修改时间',dataIndex:'time',tooltip: '修改时间'}
]);
cm.defaultSortable = false; 不想多说什么。。这里唯一要说明的：tooltip是开启鼠标提示。其他的和创建新实例没什么区别。new->类名->构造构造器->属性
defaultSortable是设置是否排序。我是设置的假，因为我的Ext没本地化，排序那个按钮按下来是个英文的。所以我设置了假。你也可以单独为列设置。
tbar: menubar,
bbar: pagingbar,
这两个属性是用来设置头部工具条和底部工具条的。工具条上可以有按钮。
这是底部和顶部的工具按钮。说明写在程序代码里。。我有写描述的习惯。
Java代码
var menubar = [{
<SPAN>text:'添加',
tooltip:'添加一个新文章',<SPAN>//按钮提醒功能</SPAN>
iconCls:'addItem',//<SPAN>图标拉。看英文都懂了</SPAN>
handler: function(){//<SPAN>handler属性后面是跟一个方法，是绑定你单击这个按钮后的事件处理</SPAN>
var createWin = new SamPeng.account.Create();//<SPAN>我是将文件打成类包的。所以这里直接创建实例。</SPAN>
createWin.show();//<SPAN>添加页面显示，这个方法就是省略了el绑定问题。</SPAN>
}
},'-',{
id: 'grid-edit-button',
text:'修改',
tooltip:'修改这条文章',
iconCls:'editItem',
disabled:true,
handler: function(){
var record = Ext.getCmp('list-account-panel').getSelectionModel().getSelected();
var editWin = new SamPeng.Grid.Edit({id: record.id});
editWin.show();//修改界面显示
}
},'-',{
id: 'grid-delete-button',
text:'删除',
tooltip:'删除选定的文章',
iconCls:'remove',
disabled:true,
handler: function(){
new SamPeng.Grid.DeleteItem({panel: 'list-account-panel'});
}
}];
var pagingbar = new Ext.PagingToolbar({
pageSize: this.myPageSize,
store: this.dataStore,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有数据"
}); //<SPAN>这是底部按钮，一个分页的底部。呃。。不知道该怎么说明，这个我是写好了直接copy的别人的。觉得这里没什么必要变化。</SPAN></SPAN>
var menubar = [{
text:'添加',
tooltip:'添加一个新文章',//按钮提醒功能
iconCls:'addItem',//图标拉。看英文都懂了
handler: function(){//handler属性后面是跟一个方法，是绑定你单击这个按钮后的事件处理
var createWin = new SamPeng.account.Create();//我是将文件打成类包的。所以这里直接创建实例。
createWin.show();//添加页面显示，这个方法就是省略了el绑定问题。
}
},'-',{
id: 'grid-edit-button',
text:'修改',
tooltip:'修改这条文章',
iconCls:'editItem',
disabled:true,
handler: function(){
var record = Ext.getCmp('list-account-panel').getSelectionModel().getSelected();
var editWin = new SamPeng.Grid.Edit({id: record.id});
editWin.show();//修改界面显示
}
},'-',{
id: 'grid-delete-button',
text:'删除',
tooltip:'删除选定的文章',
iconCls:'remove',
disabled:true,
handler: function(){
new SamPeng.Grid.DeleteItem({panel: 'list-account-panel'});
}
}];
var pagingbar = new Ext.PagingToolbar({
pageSize: this.myPageSize,
store: this.dataStore,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有数据"
}); //这是底部按钮，一个分页的底部。呃。。不知道该怎么说明，这个我是写好了直接copy的别人的。觉得这里没什么必要变化。 ok。基础部分讲完了。。。接下来的文章我会讲解将其封装在类里面并且作为继承GridPanel类的新类。
再次重复申明。在我这里你不可能得到完整的例子，不是我没有，而是我觉得那是在害你。你更需要的是去查API。知道方法格式，查一下API。剩下的不就是完成你的程序思想了么。感谢大家观看我的教程。谢谢。
很讨厌速食化的教程，但我不知道入了俗套没有。呵呵。希望对大家有所帮助。
转载者。。。我知道有这样的转载者的。连内容的实用性不看就转了。
转载者，请著名作者:SamPeng。谢谢。
我不想教各位新手什么高级技术，因为我也在研究，只是想教大家一个思考的方向，能够具有举一反三的能力，能够真正学会Ext和开始深入了解。如果你想实现什么特效，这个文字不适合你，但如果你想和我一起学习Ext，我想鄙人的小文非常适合你。
您可能感兴趣的文章: