君子王焕

博客园 首页 新随笔 联系 订阅 管理

ToolBar

首先Ext.Toolbar,对这个控件用的很多,但是功能不太多,一般的就在toolBar上放一堆Button或者label之类的用来进行很多事件的触发或者操作甚至跳转页面,而label等只用来显示提示语。

Ipms.office985.ConstructionProjectGroupGridPanel_ToolBar = function (store, view) {

    ……

    this._buttonRefresh = new Ext.Toolbar.Button({
        iconCls: 'icon-refresh',
        text: '刷新',
        minWidth: 60,
        store: store,
        handler: function () {
            this.store.load();
        },
        tooltip: '<b>刷新列表</b><br/>更新包列表'
    })
    this._buttonReset = new Ext.Toolbar.Button({
        iconCls: 'icon-reset',
        text: '重置',
        minWidth: 60,
        store: store,
        handler: function () {
            //清空筛选条件
            var filters = Ext.getCmp('ConstructionBeforeBuildGridPanel')._filters;
            filters.clearFilters();
        },
        tooltip: '<b>重置列表</b><br/>清空查询条件,重置列表'
    });
    var items = [this._buttonCollapseAll, this._buttonExpandAll, new Ext.Toolbar.Fill(), this._buttonRefresh, this._buttonReset];
    //其中的Ext.Toolbar.Fill()是我很喜欢的小控件,可以直接将toolBar分成前后两部分
Ipms.office985.ConstructionProjectGroupGridPanel_ToolBar.superclass.constructor.call(this, {
        items: items,//可以先定义一个items也可以直接将所有内容以数组的形式都放到这里
        height: 25
    });

}
Ext.extend(Ipms.office985.ConstructionProjectGroupGridPanel_ToolBar, Ext.Toolbar);

Button

Button平时见的很多,因为在其他环境中用的少,所以在其他地方我不太熟悉Button的用法,但是在Extjs中Button如果要调用外边的Panel内部的东西需要自己重新定义一个连接button自己和panel的方式,然后才可以调用

    this._buttonSave = new Ext.Button({
        minWidth: 80,
        text: '保 存',
        panel: this,
        handler: this._onButtonSave_Click//如果要直接使用这个事件的话,必须在button的定义上面定义函数,如果不在上面定义,需要在下面定义一个click事件
        this._buttonSave.on('click', this._onButtonSave_Click);当在函数内部调用panel内部的控件值或变量时,就要button.panel.*,相当于父子兄弟的关系
    });

Msg

          

在Extjs中最简单的而且最符合Extjs界面风格的信息提示框大概也就算Ext.Msg.alert('','');前边是标题,后边是提示语内容。或者是显示的内容比较丰富甚至有多个按钮的提示框

        Ext.MessageBox.show({
            title: '请确认!',
            msg: '您是否完成项目成员的填写?<br />注意:项目提交后将不能更改项目成员!',
            buttons: Ext.MessageBox.YESNO,//此时是yes或no两个按钮,另外我还见过Ext.Msg.OK,只有一个按钮或Ext.MessageBox.YESNOCANCEL有三个按钮
            scope: this,
            fn: function (button) {
                if (button == 'yes')
                    this.save(button);
                if (button == 'no') { }
            },
            icon: Ext.MessageBox.QUESTION//显示的提示图片,另外有 Ext.MessageBox.WARNING
        });//如果这个show是在一个button的handler内部出现的,如
    this.beforeSaveConfirm = function (button) {}则fn后边的那个button和本行中的button不是一个button,但是可以在'button'参数后面加另外的参数,
定义在外部panel的变量如果不是this.*形式的定义都可以直接调用的。

到这里我平时经常用到的Extjs的控件的一部分就差不多了,当然还有window那一串,其实那一串和panel的东西差不多,写着写着就体会到代码即是文档的话真是真理。因为除了添加注释再添加注释外,没有代码的单独文档实在是不好写。于是就先到这里吧,以后再慢慢补充。

posted on 2013-05-21 21:28  君子王焕  阅读(1179)  评论(0编辑  收藏  举报