注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

 
 
 

日志

 
 
关于我

风流茶说合,酒是色媒人,古往今来,浪涛依旧,我辈今朝,叱咤风云,

网易考拉推荐

ext学习笔记  

2010-03-31 11:07:25|  分类: ext |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

呵呵 接触ext2.0一个月了,总结了些东西,都是些实用的技巧,呵呵与大家分享.

(有些是网上抄来的~别骂偶~)

1.modal:true这个放在Ext.window里作用是让window成为一个模式窗口,这样当这个窗口弹出后,他的父窗口不可用.

2.当一个Ext.window的closeAction有两种选择close/hide(完全关闭/隐藏)close就是把此window destroy。

hide是把此window隐藏,这样做的复用性比较强,注:如果要重新渲染这个window的html,需要window.body.update(‘html’)。

3.请教,如何单击grid上某行,让它前面的checkbox不跟着选中

sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});

4.Ext.form的错误提示:

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

qtip: 当鼠标移动到控件上面时显示提示

title: 在浏览器的标题显示,但是测试结果是和qtip一样的

under: 在控件的底下显示错误提示

side: 在控件右边显示一个错误图标,鼠标指向图标时显示错误提示

[element id]: 错误提示显示在指定id的HTML元件中

ext学习笔记 - 大将军 - 我的博客

5.如果需要定义控件有两种方法(以gridPanel为例子)

a.new Ext.grid.GridPanel({

      ........

})

b.{

       xtype:’gridpanel’,

       ........

}

使用new 的方式是立即创建组件 而使用xtype则是延迟创建 这样的好处是当需要渲染此组件时才创建 类似hibernate的延迟加载 都是为了提高效率!

6.在JS中把JSON字符串转为对象,Ext.decode ( )

   在JS中把对象转为JSON字符串,Ext.encode ( )

7.ext获得html标签ext.get(‘id’).dom.value

8.可扩展的grid

   (1)首先引入JS:RowExpander.js

   (2)定义这个控件

   var expander = new Ext.grid.RowExpander({

        tpl : new Ext.Template(

             //{userName}是data的值

            '<p><b>用户名:</b> {userName}</p><br>',

            '<p><b>登陆名:</b> {loginName}</p><br>',

            '<p><b>职务:</b> {office}</p><br>',

            '<p><b>部门:</b> {organize}</p><br>',

            '<p><b>用户类型:</b> {userType}</p><br>',

            '<p><b>锁定状态:</b> {lockStatus}</p>'

        )

    });

(3)在Ext.grid.ColumnModel中加入它

(4)在Ext.grid.GridPanel中也要加入它

9.可以在容器组件中把hideLabels设置为true,这样将不会显示容器中字段的标签了

10.使用enter键代替tab键切换焦点

    var el =Ext.get('例如:formmane');

    var map = new Ext.KeyMap(el, {

        key: Ext.EventObject.ENTER,

        fn: function(){

          event.keyCode=9;

        }

    });

11.Ext.get方法是获取一个元素,你可以通过他来修改控件的属性

   Ext.getCmp方法是获得一个Ext控件,你可以通过他来调用控件的方法

12.combo(这个是抄来的但是很有用)

属性介绍:在items里,类型(xtype)设置成combo。

在这里定义了一个sotre属性,就是选择值存储的地方,因为是在客户端的数据,所以使用了一个简单存储(SimpleStore)。

在存储里,我们通过一个数组定义了retrunValue和displayText两个字段。

retrunValue字段指定是提交给后台的值

displayText字段指定是在下拉中显示的选择值。

然后我们在data里定义了几组数据(data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]),我们可以看到,每组数据都是根据fiedls的定义来组成的,数组里第一个值就是retrunValue的值,第二个值就是displayText的值,例如[1,'小学'],就表示retrunValue是1,displayText是小学。下面就是很重要的一步了,设置下拉选择框的值和显示文本。

本例中设置了下拉选择框的提交值对象的是存储中的retrunValue字段(valueField :"retrunValue"),显示文本是存储中的displayText字段(displayField: "displayText"),通过这两个设置就可将存储中的数据和下拉框对应起来。

因为数据是在本地,所以设置了模式为local(mode: 'local')。

该下拉列表只允许选择,不允许输入(editable: false),

而且是必须选择一个选项(forceSelection: true)。

在没有选择值时显示为选择学历(emptyText:'选择学历')。

提交form时,该项如果没有选择,则提示错误信息“请选择学历”(blankText:'请选择学历')。

该选项值不允许为空(allowBlank:false)。

大家要注意的是hiddenName和name属性,name只是改下拉的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到结构的,这个大家一定要注意。

因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。

如果要为控件设置默认值,就设置属性value,value的值要设置为提交给后台的值,不要设置为显示文本。例如本例要设置大学为默认值得,则设置value的值为6。

{

    xtype:'combo',

    store: new Ext.data.SimpleStore({

        fields: ["retrunValue", "displayText"],

        data: [

            [1,'小学'], [2,'初中'], [3,'高中'], [4,'中专'], [5,'大专'], [6,'大学']

        ]

    }),

    valueField :"retrunValue",

    displayField: "displayText",

    mode: 'local',

    forceSelection: true,

    blankText:'请选择学历',

    emptyText:'选择学历',

    hiddenName:'education',

    editable: false,

    triggerAction: 'all',

    allowBlank:false,

    fieldLabel: '学历',

    name: 'education',

    anchor:'90%'

}

13.分页参数

        bbar: new Ext.PagingToolbar({

        pageSize: 15,

        store: ds,

        displayInfo: true,

        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',

        paramNames : {start: 'begin', limit: 'end'},

        emptyMsg: "没有记录"

    })

这样当你需要ds.load({params:{begin:0,end:15}});时就可以修改参数名了。

14.刷新树,在某些操作(如添加或删除节点)执行后,需要即时刷新树

tree.root.reload()

15.切记:当控件用allowBlank :false(验证不为空)时,如果此控件的value不能为’’,如果需要为空要这么写:value:undefined

  评论这张
 
阅读(425)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017