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

如果你想实现什么特效,这个文字不适合你,但如果你想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,我想鄙人的小文非常适合你。

时间: 2008-12-27

Coolite 中前台获取 GridPanel 当前选择行值的代码

主要目的 a. 掌握获取 GridPanel 当前行的各个字段值的方法 b. 掌握如何将前台数据传递到后台,并将后台操作结果返回到前台 c. 掌握如何获取和设置 button 和 textField 控件的文本值 主要内容 a. 我们先在页面中添加三个 ext 组件:store, menu,gridpanel b. 将 gridpanel 的contextmenuID 设置为 menu 控件的ID, 从而为GridPanel 添加右键菜单 复制代码 代码如下: <ext:Store ID="

Extjs4 GridPanel的主要配置参数详细介绍

1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMenu:

JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

表格GridPanel概述 ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义).而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同

Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中 如下图: 但是这个一般没有什么用处,只是用于后台取值的作用. so 加一个属性:hideable:false就可以搞定了 复制代码 代码如下: { header: "attendanceId", dataIndex: "attendanceId", hideable: false, hidden: true },

ExtJS GridPanel 根据条件改变字体颜色

1.在GridPanel中加入GridView 复制代码 代码如下: <View> <ext:GridView ID="GridView1" runat="server"> <GetRowClass Fn="setRowBg" /> </ext:GridView> </View> 2.加入js脚本 复制代码 代码如下: <script language="javascri

ExtJs设置GridPanel表格文本垂直居中示例

业务场景,需要实现最终效果图如下:  GridPanel代码如下配置: 复制代码 代码如下: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, ancho

ExtJs GridPanel简单的增删改实现代码

1.首先看下效果图: 2.ext代码 复制代码 代码如下: /// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" /> Ext.namespace('XQH.ExtJs.Frame'); XQH.ExtJs.Frame.RoleManage = function() { this.init(); }; Ext.extend(XQH.ExtJs.Frame.RoleMana

ExtJS 2.0 GridPanel基本表格简明教程

ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.ColumnModel定义.而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore.SimpleStroe.GroupingSto

virtualenv介绍及简明教程

virtualenv简介 在开发Python应用程序的时候,我们的系统上通常只会安装一个Python版本:例如 3.7.所有使用 pip 安装的第三方包都会被安装到Python的site-packages目录下.如果我们同时开发多个应用程序,而这些应用程序需要使用的某一个第三方包的版本各不相同,该怎么办?这种情况下,为每个应用程序"独立"安装一套Python运行环境显然是不现实的.这个难题,使用 virtualenv 可以轻易解决. virtualenv 是专门用来为应用程序维护多套相

基于Vue2.0+ElementUI实现表格翻页功能

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本.在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好.今天,经过两周多的完善, Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进. 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库. ElementUI的表格要求的数据类型为字典数组.我使用了py

微信小程序(微信应用号)开发工具0.9版安装详细教程

微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

Vue2.0父子组件传递函数的教程详解

Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递. 1. 通过props :需要从子组件传参数到父组件时适

Vue2.0+ElementUI实现表格翻页的实例

ElementUI的表格要求的数据类型为字典数组.我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可.取出后我将其存入redis数据库方便之后取用.取用时使用eval()函数再传到前端即可. 前端放置Pagination 分页器,我这里直接采用了完整功能的分页器. <el-pagination @size-change="handleSizeChange" @current-change=&q

Windows下安装Django框架的方法简明教程

本文实例讲述了Windows下安装Django框架的方法.分享给大家供大家参考,具体如下: 在idea上运行Python项目时,出现了如下错误,这是因为系统中只安装了Python,没有安装Django,有童鞋可能会问,什么是Django,博主的建议是去问度年或谷老师 既然报错的原因就是缺少Django,那我们现在就开始安装这个应用框架. 本站下载Django1.6:Django-1.6.11.tar.gz 官网下载: Django-1.6.11.tar.gz || Django-1.7.11.t

windows10系统安装mysql-8.0.13(zip安装) 的教程详解

安装环境说明 •系统版本:windows10 •mysql版本:mysql-8.0.13-winx64.zip •下载地址:http://mirrors.163.com/mysql/Downloads/MySQL-8.0/mysql-8.0.13-winx64.zip 解压安装包 •解压路径:D:\develop\software •解压后mysql根目录:D:\develop\software\mysql-8.0.13-winx64 原则: 安装目录不能有空格.不能有中文 配置文件 •my.i

win10下mysql 8.0.11 压缩版安装教程

本文为大家分享了mysql 8.0.11压缩版安装教程,供大家参考,具体内容如下 1. MySQL解压与配置 下载:链接地址 解压:比如解压到D:\mysql 配置:配置系统环境变量,MYSQL_HOME=D:\mysql\mysql-8.0.11-winx64 path新增路径:%MYSQL_HOME%\bin,保存退出. 2. 文件配置 在解压根目录mysql-8.0.11-winx64下创建my.ini文件,新增内容如下: [mysqld] # 设置3306端口 port=3306 # 设