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

最强学习笔记---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

分享到:
评论

相关推荐

    基于CST软件的三维超材料能带计算及其应用

    内容概要:本文介绍了如何利用CST软件进行三维超材料的能带计算。首先概述了三维超材料的独特性质及其广泛应用前景,接着简要介绍了CST软件的功能特点。随后详细阐述了能带计算的具体步骤,包括模型建立、材料参数设置、网格划分与求解设置以及最终的计算与结果分析。最后给出了一段Python代码示例,展示了如何处理CST输出的数据并绘制能带图。文章强调了计算机模拟技术对于深入了解超材料电子结构和物理性质的重要性。 适合人群:从事材料科学研究的专业人士,尤其是对三维超材料和电磁场模拟感兴趣的科研工作者和技术人员。 使用场景及目标:适用于希望借助CST软件开展三维超材料能带计算的研究项目,旨在提高对超材料的理解,推动相关领域的技术创新和发展。 其他说明:文中提供的Python代码仅为示例,在实际操作时可根据具体情况进行调整优化。同时,掌握CST软件的基本操作和电磁理论基础知识有助于更好地理解和应用本文内容。

    基于FPGA的永磁同步伺服系统设计:电流环及矢量控制实现

    内容概要:本文详细介绍了基于FPGA的永磁同步伺服系统的矢量控制设计,涵盖了从电流环到速度环的关键模块实现。具体包括Clarke和Park变换、PI调节器、AD7606采样、正交编码器反馈以及SVPWM生成等部分。文中提供了详细的Verilog代码片段,展示了各个模块的具体实现方法和技术细节。特别强调了定点数处理、时序设计和跨时钟域处理等方面的技术挑战及其解决方案。 适合人群:具备一定FPGA开发经验和电机控制基础知识的研发人员。 使用场景及目标:适用于希望深入了解FPGA在电机控制应用中的具体实现方式,特别是矢量控制和电流环设计的专业人士。目标是掌握FPGA平台下高效、低延迟的电机控制系统设计方法。 阅读建议:由于涉及大量具体的Verilog代码和硬件设计细节,建议读者在阅读过程中结合实际项目进行实验和调试,以便更好地理解和掌握相关技术。

    飞机大战:从运动方程到战斗系统的全链路设计解析

    经典飞机大战游戏是理解实时交互系统设计的绝佳载体。本文将深入剖析现代空战游戏的核心模块,涵盖刚体运动学、弹道轨迹优化、碰撞检测算法等关键技术,揭示二维游戏背后复杂的三维数学建模过程。

    scratch少儿编程逻辑思维游戏源码-冰塔.zip

    scratch少儿编程逻辑思维游戏源码-冰塔.zip

    scratch少儿编程逻辑思维游戏源码-弹跳(4).zip

    scratch少儿编程逻辑思维游戏源码-弹跳(4).zip

    COMSOL焊接热源模型解析:双椭球、高斯旋转体与柱状体热源的应用与优化

    内容概要:本文详细介绍了COMSOL软件中三种常见的焊接热源模型——双椭球热源、高斯旋转体热源和柱状体热源。双椭球热源适用于模拟移动热源(如激光焊、电弧焊),通过调整轴向系数a1和a2来控制热流分布;高斯旋转体热源适合小范围焊接,采用三维高斯函数描述热流密度;柱状体热源则用于深熔焊场景,特点是计算速度快。文中还提供了每种模型的具体代码实现,并强调了调试时需要注意的关键点,如时间步长、网格加密等。此外,作者分享了一些实用技巧,如将热源参数设置为全局变量并利用参数扫描功能提高调试效率。 适合人群:从事焊接工艺仿真、材料加工领域的研究人员和技术人员,以及对COMSOL建模感兴趣的工程技术人员。 使用场景及目标:帮助用户选择合适的热源模型进行焊接模拟,确保模拟结果的准确性;提供具体的代码实现和调试方法,使用户能够快速掌握并应用于实际项目中。 其他说明:文中提到的热源模型不仅限于理论介绍,还包括实际操作中的注意事项和优化建议,有助于提升模拟效果和工作效率。

    基于RBF神经网络的PID控制器在PMSM转速环中的Simulink模型设计与性能分析

    内容概要:本文介绍了将基于RBF神经网络的PID控制器应用于永磁同步电机(PMSM)转速环控制的方法及其性能优势。传统的PID控制器在面对非线性和时变系统时存在参数整定困难的问题,而引入RBF神经网络可以实现实时在线调参,提高系统的灵活性和鲁棒性。文中详细描述了Simulink模型的设计,特别是Matlab s-function模块中RBF神经网络的具体实现,包括高斯函数激活和带惯性的权值更新机制。实验结果显示,在转速突变情况下,改进后的控制器能够迅速稳定系统,超调量控制在2%以内,调节时间较传统方法缩短约40%,并且在负载变化时表现出色,无需重新整定参数。 适合人群:从事电机控制系统研究和开发的技术人员,尤其是对PID控制器优化感兴趣的工程师。 使用场景及目标:适用于需要提升PMSM转速环控制精度和响应速度的应用场合,如工业自动化设备、机器人等领域。目标是通过引入智能算法解决传统PID控制器参数整定难题,提高系统性能。 阅读建议:关注RBF神经网络与PID控制器结合的具体实现细节,特别是在Matlab s-function模块中的编码技巧以及参数调整策略。同时,注意学习率的选择和动量项的作用,这对于实际应用至关重要。

    scratch少儿编程逻辑思维游戏源码-GTA 6.zip

    scratch少儿编程逻辑思维游戏源码-GTA 6.zip

    scratch少儿编程逻辑思维游戏源码-仓鼠跑酷.zip

    scratch少儿编程逻辑思维游戏源码-仓鼠跑酷.zip

    scratch少儿编程逻辑思维游戏源码-超级麦克世界.zip

    scratch少儿编程逻辑思维游戏源码-超级麦克世界.zip

    scratch少儿编程逻辑思维游戏源码-400年.zip

    scratch少儿编程逻辑思维游戏源码-400年.zip

    少儿编程scratch项目源代码文件案例素材-气球足球.zip

    少儿编程scratch项目源代码文件案例素材-气球足球.zip

    少儿编程scratch项目源代码文件案例素材-沙漠迷城.zip

    少儿编程scratch项目源代码文件案例素材-沙漠迷城.zip

    scratch少儿编程逻辑思维游戏源码-比谁高.zip

    scratch少儿编程逻辑思维游戏源码-比谁高.zip

    少儿编程scratch项目源代码文件案例素材-乾坤大挪移.zip

    少儿编程scratch项目源代码文件案例素材-乾坤大挪移.zip

    scratch少儿编程逻辑思维游戏源码-菜鸟跳跃.zip

    scratch少儿编程逻辑思维游戏源码-菜鸟跳跃.zip

    【C++编程语言】核心特性详解、学习笔记

    内容概要:本文档详细介绍了C++语言的基础知识、高级特性及其应用。首先,文档回顾了C++对C语言的扩展,包括面向对象编程的支持、增强的语法特性(如命名空间、引用、常量处理等)。接着,深入探讨了类和对象的使用,涵盖构造函数、析构函数、拷贝构造函数、深浅拷贝等重要概念。文档还讲解了单例模式的设计与实现、C++面向对象模型的核心要素(如this指针、静态成员、友元函数)、继承与派生的关系及其实现细节、多态性的原理与应用。此外,文档详细介绍了C++的模板机制、类型转换、异常处理机制、输入输出流操作、STL(标准模板库)的容器和算法等内容。每个部分都通过具体的代码示例和解释,帮助读者理解和掌握C++的关键特性和最佳实践。 适合人群:具备一定编程基础,尤其是熟悉C语言的开发者;希望深入了解C++语言特性和面向对象编程思想的程序员;从事C++开发工作的工程师和技术爱好者。 使用场景及目标:①掌握C++语言的核心概念和高级特性;②理解并能够应用面向对象编程的基本原则和模式;③学习如何使用STL容器和算法优化代码性能;④提升C++程序的健壮性和可维护性,特别是在处理复杂数据结构和算法时;⑤掌握异常处理和类型转换的最佳实践,确保程序的稳定性和安全性。 其他说明:本文档不仅提供了理论知识,还结合了大量实例代码,便于读者边学边练。对于每一个知识点,文档都力求做到详尽解释,确保读者能够透彻理解并灵活运用。文档内容全面覆盖了C++编程的各个方面,从基础语法到高级特性,适合不同层次的学习者逐步深入学习。

    电气铁路柔性过分相技术:60°换相波形稳定分析及其实现方法

    内容概要:本文详细探讨了电气铁路柔性过分相技术中的60°换相波形稳定问题。首先介绍了柔性过分相的基本概念及其重要性,接着重点讨论了60°换相波形稳定对系统运行效率和稳定性的影响。文中还阐述了实现换相波形稳定的多种方法,如先进控制算法、实时监测设备以及滤波器的应用。最后,通过引用相关文献和实例,进一步验证了换相波形稳定的重要性和可行性。 适合人群:从事电气铁路系统设计、维护的技术人员,以及对该领域感兴趣的科研人员。 使用场景及目标:适用于希望深入了解电气铁路柔性过分相技术的专业人士,旨在帮助他们掌握60°换相波形稳定的相关理论和技术手段,提升系统性能。 其他说明:文章结合了理论分析与实际案例,提供了丰富的参考资料,有助于读者全面理解并应用于实际工作中。

Global site tag (gtag.js) - Google Analytics