Ext第一周 史上最强学习笔记---GridPanel(基础篇)


Posted in Javascript onDecember 29, 2008

如果你想实现什么特效,这个文字不适合你,但如果你想Ext文章,我想鄙人的小文非常适合你。
另:这篇教程是建立在Ext2.2上的。这个很多教程都没说明。让人很糊涂。我在此特别说明
网上很多教程,但是实际使用并不是很多,我想作为一个星期一个星期的总结来给各位网络上的朋友带来帮助。希望各位有用。我会从每个细节都说明,尽量不漏掉作为初学者需要知道的基础知识。第一次写教程,见笑了。
因为我学这个是这样一个过程,通过一个控件了解其他的控件,剩下的就是属性查API了。API我自己在翻译CHM版的。因为是个人操作。所以时间有限。。大家见谅。
在Ext下。首先接触的一定是Grid。我也是如此。我是因为 Grid与Ext结缘。
下面先说一下Ext类的申明形式。
以Grid为例
Js代码

var grid=new Ext.form.GridPanel({ 
这里是属性。 
}); 
var grid=new Ext.form.GridPanel({ 
这里是属性。 
});

这个申明和java的面向对象很相似。以new关键词作为建立GridPanel类的实例,关于面向对象的基础知识就不在这里展开了。只是在写这个总结的时候常用到面向对象的概念。个人觉得学程序,不管你学不学java。think in java必须看完,如果你想学好最好看英文版。因为一句话你可以反复的揣摩。加深印象。我才看到一半都觉得他对一个人的程序思维起很大的作用。好了不走题了。
知道OOP的都知道,在类的里面有一个构造器,在实现类的实例的时候将会初始化这个构造器内的属性值或者调用方法。
但是在Ext中的属性赋值不是“=”而是":"。
上面说的是理论的,实际上过程就是这样。
var grid = new Ext.form.GridPanel();实例化一个类的对象。
{}里面包含的就是传递给这个类的初始化属性值。因为核心代码我还没研究,也没到那份上,所以具体如何传递和实现就不说明了,在以后的Ext学习经验里会说明的。
那将上面的例子扩展一下。
Java代码 
var grid=new Ext.form.GridPanel({ 
id: 'list-account-panel', 
ds: dataStore, 
cm: userCM, 
sm: selectBoxModel, 
tbar: menubar, 
bbar: pagingbar, 
loadMask: {msg: 数据加载中...'}, 
layout: 'fit', 
autoScroll:true 
}); 
var grid=new Ext.form.GridPanel({ 
id: 'list-account-panel', 
ds: dataStore, 
cm: userCM, 
sm: selectBoxModel, 
tbar: menubar, 
bbar: pagingbar, 
loadMask: {msg: 数据加载中...'}, 
layout: 'fit', 
autoScroll:true 
});

这些是常用的属性,将从这里向其他的部分扩展出去。
这样就申明了一个实力对象并且将其初始化。
你明白了这个过程,如果是真的理解了,只要你熟悉了API .了解到组件的属性和其定义的方法,你可以去创建任何你想要的组件了。如GridPanel.Panel,Tree.其实道理是胡同的。好了,将好这个关键的基础部分,后面的就是属性了,有兴趣的可以继续看。
有些教程里面这里会用到Ext2.2的一个属性el,这个属性是将控件绑定到指定的页面元素中,但是就因为这个el,而将大家的思维固定在了只能绑定在页面元素中了。事实上,有时候要将grid加入tabPanel中的。这个时候就不需要el。有时候创建自己的GridPanel新类并继承GridPanel类。在创建过程中使用ext.applyif方法,讲新类里没有而原有类里有的属性复制过来。这样在调用新类的时候,新类的传递可以传递el这样单独的属性值。我已经建立好一个类的封装。下面会说到我说的这个扩展类的封装。先把grid的基本知识说完。
看看上面说的例子吧,id,是这个Ext组建的唯一id号,在整个项目里面id号要尽可能唯一,这方便自己识别也不容易出其他问题。比如说tabPanel组件的html调用的时候就会出现id问题。
ds,这是设置数据源。
例子具体代码如下:
Java代码 
dataStore = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
url: 'php/article_list.php', 
disableCaching:false 
}), 
reader: new Ext.data.JsonReader({ 
root: 'results', 
totalProperty: 'total', 
id:'id' 
},[ 
{name: 'id'}, 
{name: 'name'}, 
{name: 'typename'}, 
{name: 'time'}, 
]) 
}); 
this.dataStore.load({params:{start:0, limit:this.myPageSize}}); 
dataStore = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
url: 'php/article_list.php', 
disableCaching:false 
}), 
reader: new Ext.data.JsonReader({ 
root: 'results', 
totalProperty: 'total', 
id:'id' 
},[ 
{name: 'id'}, 
{name: 'name'}, 
{name: 'typename'}, 
{name: 'time'}, 
]) 
}); 
this.dataStore.load({params:{start:0, limit:this.myPageSize}}); 这里要说明的东西很多。。 
一个网站上面既然用到了Ext肯定不会是静态的,因为我最多的是于服务器交互而不是直接读取XML文件。所以我这里使用了服务器读取资料的例子。 
proxy: new Ext.data.HttpProxy({ 
url: 'php/article_list.php', 
disableCaching:false 
});

这个很简单了啊。一看就明白。HttpProxy这是向本地的文件中传递数据请求。简单点理解就是这样。核心代码没研究,具体操作过程不名。但是作为类。只需要知道怎么用就成了。
但这里有个概念,用到了匿名函数。不能说匿名函数吧。。。怎么说呢。。。
proxy属性是通过一种形式向文件发送请求。。属性赋值可以是已经创建好的实例名,也可以是个以new关键词新建的匿名实例。这样说不知道能否明白。
后面的属性reader是设定这个数据源的数据读取方式。这个例子是用的jsonReader.还可以用ArreyReader。这个看具体需求了。属性值可以是对象也可以是匿名实例对象。好像也可以是方法。没试过,只是个设想。
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 style="COLOR: #000000">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,我想鄙人的小文非常适合你。
Javascript 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
一个可复用的vue分页组件
May 15 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
extjs grid取到数据而不显示的解决
Dec 29 #Javascript
extjs form textfield的隐藏方法
Dec 29 #Javascript
Javascript valueOf 使用方法
Dec 28 #Javascript
Javascript typeof 用法
Dec 28 #Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 #Javascript
JS option location 页面跳转实现代码
Dec 27 #Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 #Javascript
You might like
重置版游戏视频
2020/04/09 魔兽争霸
PHP SEO优化之URL优化方法
2011/04/21 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
对python中的argv和argc使用详解
2018/12/15 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python-for循环的内部机制
2020/06/12 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
2014年学习雷锋活动总结
2014/03/01 职场文书
高中生职业规划范文
2014/03/09 职场文书
售后服务质量承诺书
2015/04/29 职场文书
图神经网络GNN算法
2022/05/11 Python