`
shaohan126448
  • 浏览: 115806 次
  • 来自: 北京
社区版块
存档分类
最新评论

最强学习笔记---GridPanel(基础篇)

阅读更多

我不想教各位新手什么高级技术,因为我也在研究,只是想教大家一个思考的方向,能够具有举一反三的能力,能够真正学会Ext和开始深入了解。

如果你想实现什么特效,这个文字不适合你,但如果你想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,我想鄙人的小文非常适合你。
详细出处参考:http://www.jb51.net/article/16984.htm

分享到:
评论

相关推荐

    Gridpanel多表头的扩展

    在EXTJS框架中,Gridpanel是用于展示数据的常用组件,它提供了丰富的功能,如排序、分页、筛选等。当我们需要对数据进行更复杂的展示,例如按类别或层级分类时,多表头(Multi-Level Headers)就显得尤为重要。标题...

    ext.net 动态创建gridpanel

    GridPanel 是 ExtJS(Ext.NET 的基础)中的一个重要组件,用于展示数据表格。在这个场景中,我们将深入探讨如何使用Ext.NET代码动态创建GridPanel,并在各种窗口中灵活展示。 1. **动态创建GridPanel**: 在Ext...

    EXTJSEXT实例GridPanel.

    EXTJS是一个基于JavaScript的用户界面库,用于构建富客户端应用。...通过学习和实践这个例子,开发者可以快速掌握EXTJS中数据展示的核心技术。配合EXT提供的图片资源,可以帮助理解GridPanel在实际应用中的视觉效果。

    扩展GridPanel

    扩展的GridPanel,让其分页后保持选择状态

    gridpanel常用操作

    在本文中,我们将深入探讨`GridPanel`在Extnet框架中的常见操作,包括选择行、前后台方法调用、增删行以及弹出窗体的实现方式。这些操作是开发Web应用程序时处理数据表单和数据展示的关键部分。 首先,我们来看如何...

    给Extjs的GridPanel增加“合计”行

    这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要理解EXTJS的GridPanel结构。GridPanel由Store(数据存储)、ColumnModel(列模型)和View(视图)等主要部分组成。在...

    JavaScript.-Extjs基础学习笔记

    最后,`GridPanel`对象被创建,指定了渲染目标、数据源、列模型、选择模型等属性。 ### 总结 Extjs的Tab Panel和Grid组件提供了丰富的特性和自定义选项,使得开发者能够构建出既美观又功能强大的用户界面。通过...

    改变gridpanel的行颜色

    ### 改变GridPanel的行颜色 在使用GridPanel组件进行数据展示时,为了提高可读性和用户体验,我们经常需要对表格中的某些行或单元格进行颜色上的区分。本文将详细介绍如何通过不同的方法来实现这一功能,包括在加载...

    Ext.grid.GridPanel属性祥解

    ### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...

    Extjs入门教程(treePanel和GridPanel)

    总的来说,这门入门教程将带你进入ExtJS的世界,通过TreePanel和GridPanel的实践,你将掌握基本的组件使用和数据管理技巧,为构建更复杂的企业级应用打下基础。记得在实践中不断探索和实验,理论结合实际,才能真正...

    GridPanel中的单元格不能选中复制的解决方法

    "GridPanel中的单元格不能选中复制的解决方法" Ext.grid.GridPanel 是一个功能强大且广泛使用的Grid控件,但是它存在一个很大的缺陷:单元格的内容不能选中,没法选中就没法复制,这给用户带来了很多不便。这个...

    gridPanel添加按钮

    在IT行业中,尤其是在Web开发领域,`gridPanel`通常指的是数据网格组件,它用于展示和管理大量的结构化数据。在本话题中,我们讨论的是如何在`gridPanel`中添加按钮,这涉及到前端用户界面的设计和交互。`gridPanel`...

    Ext GridPanel 中实现加链接操作

    #### 一、Ext GridPanel 基础 在了解如何添加链接之前,我们首先需要理解 Ext GridPanel 的基本结构。Ext GridPanel 主要有以下几个组成部分: 1. **Store**:存储数据的模型。 2. **Column Model**:定义列的信息...

    ExtJS的GridPanel导出excel文件

    ExtJS的GridPanel导出excel文件,方便快捷易懂!

    ExtJs GridPanel双击事件获得双击的行

    本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    ExtJS 表格面板GridPanel完整例子

    ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...

    Ext的gridpanel控件二次加载问题

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要...

Global site tag (gtag.js) - Google Analytics