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 相关文章推荐
javascript 学习之旅 (1)
Feb 05 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
django之session与分页(实例讲解)
2017/11/13 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python print出共轭复数的方法详解
2019/06/25 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
python 如何调用 dubbo 接口
2020/09/24 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
什么是数据抽象
2016/11/26 面试题
软件售后服务承诺书
2014/05/21 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript