`
shupili141005
  • 浏览: 120284 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类

Ext.Toolbar上的combo控件及其文本标签text同时隐藏/显示...

阅读更多

1. Toolbar上的combo控件及其文本标签text同时隐藏/显示:

state = url.slice(1,2);

tbar = new Ext.Toolbar([

            {
                text: "状态"
                ,hidden: (state!=='6')
            }
            ,{
                xtype: 'combo'
                ,hidden: (state!=='6')
                ,name: 'submitState',
              id: 'id_SubmitState',
              triggerAction: 'all',
        forceSelection :true,
        lazyInit :false,
        editable :false,
              width: 89,
        store: new Ext.data.SimpleStore({
                    fields: ["retrunValue", "displayText"],
                        data: [['', '请选择'], ['2', '合格'], ['3', '不合格'], ['01', '未检查']]
            }),
        mode: 'local',
        valueField: "retrunValue",
        displayField: "displayText",
        emptyText :'请选择',
        listeners: {
            select: function(){
                try {
                    t_serachType = 'simp';
                            searchInfo();
                } catch(ex) {
                    Ext.MessageBox.alert(ex);
                }
                }
        },
              anchor: '99%'
            }
]);

 

2. 隐藏 Ext.form.DateField 的触发(trigger)元素并使其所有的文本框(text field)显示格式为Y-m-d(2009-06-18):

2.1 隐藏 Ext.form.DateField 的触发(trigger)元素

items : [{
            xtype : 'datefield ',
            fieldLabel : '开始日期',
            name : 'fillinDate',
            id : 'fillinDate',
            format: 'Y-m-d ',
            hideTrigger: true, // True to hide the trigger element and display only the base text field(defaults to false)
            readOnly: true ,
            anchor : '95%'
               }]

2.2 使 DateField 所有的文本框(text field)显示格式为Y-m-d(2009-06-18),只要在 js 文件的开头加以下代码即可:

Ext.apply(Ext.form.DateField.prototype, {
    altFormats :'Y-m-dTH:i:s',
    format :'Y-m-d'
});

 

 

3. 在 Grid 中显示日期:

var sm = new Ext.grid.CheckboxSelectionModel({singleSelect: true});
var colM = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(), sm,

{header :'开始日期', width :100, sortable :true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex :'fillinDate'}

]);

 

var store = new Ext.data.JsonStore({
    url :'../contractIn/viewContractByYearCheckState.action?state=' + state,
    storeId :'ds',
    root :'contracts',
    totalProperty: 'recordCount',

    fields : [{name :'fillinDate', type :'date', dateFormat :'Y-m-dTH:i:s'}]

});

 

4. 如何获得 URl 所携带的参数?

可以利用 location.search 获得 URL 的参数。如不能可以在 location 前面加上 window,即 window.location.search

var url = location.search; // 如果 URL:http://localhost:8080/WebFrame.jsp?0&officeCode,则 url = ?0&officeCode

JS 数组的 slice 方法类似 java String 的 subString 方法。

var state = url.slice(1,2);     // 表示从数组 url 中去 index 为1的子字符串,state = 0

var userType = url.slice(3);  // 表示从数组 url index 为3开始直到末尾的子字符串,userType = officeCode

可以查 Javascript 的 API

 

5. Extjs中动态的改变TextFiled的emptyText:

    function searchByEmCode() {
    var tf = Ext.getCmp("text_Search");
    //下面两行用来设置默认值
       tf.emptyText = 'searchByEmCode';
       tf.setRawValue(tf.emptyText);
       tf.show();
    }

 

版权声明:

如果大家要转载本文,我非常荣幸。但请参加转载网址,谢谢!

分享到:
评论

相关推荐

    ext Panel+toolbar+button 实作带注释

    在`panel.js`中,你可能会找到创建Toolbar的代码,例如`Ext.create('Ext.toolbar.Toolbar', {...})`,然后在其中添加各种工具按钮。 `EXT Button`是EXT JS中最常用的交互元素之一,它用于触发某个动作或者导航到...

    Ext Js权威指南(.zip.001

    9.5.1 标签面板的构成及其运行流程:ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签面板的配置项、属性、方法和事件 / 462 9.5.3 使用标签页 / 463 9.5.4 可重用的标签页 / 465 9.6 视图与选择模型...

    Ext.js教程和Ext.js API

    虽然现在有更新的版本(如Ext JS 7.x),但学习旧版本有助于理解框架的发展历程,同时许多核心概念在新版本中依然适用。因此,对于那些正在维护基于Ext.js 3.0项目的人来说,这些资源尤为宝贵。

    Android 动态的隐藏/显示Toolbar.rar

    - `RecyclerView`是Android中用于显示可滚动列表的控件,我们可以通过监听它的滚动事件来控制`Toolbar`的隐藏和显示。 - 实现`RecyclerView.OnScrollListener`,并重写`onScrolled()`方法,根据滚动距离来判断是否...

    EXT核心API详解

    67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext....

    Ext组件描述,各个组件含义

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    前端项目-leaflet.toolbar.js.zip

    《前端项目——Leaflet.Toolbar.js深度解析》 在前端开发中,地图的交互性和用户体验往往对项目的成功至关重要。Leaflet库作为一款轻量级且功能强大的JavaScript库,为开发者提供了丰富的地图操作工具。而Leaflet....

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    `Ext.PagingToolbar`通常位于EXTJS的GridPanel下方,包含一系列的按钮和输入框,如“第一页”,“上一页”,“下一页”,“最后一页”以及当前页数和总页数的显示。用户可以通过点击这些按钮进行翻页,或者直接在...

    ToolBar居中添加控件

    此外,为了保证在不同设备和屏幕尺寸上控件居中,可能需要根据屏幕宽度动态调整控件的大小。可以通过`DisplayMetrics`获取屏幕信息,再计算控件的宽度以达到居中的效果。 总之,通过以上步骤,我们可以成功地在`...

    extjs帮助文档pdf版

    - `Ext.util.TextMetrics.getTextHeight(text, font)`: 获取文本高度。 #### 23. Ext.XTemplate 类 (P.21) - **概述**:提供了更高级的模板引擎。 - **常用方法**: - `Ext.XTemplate.compile(tpl, config)`: 编译...

    监听列表滚动来隐藏或显示Toolbar与浮动按钮

    在Android应用开发中,我们经常需要根据用户交互来动态调整界面元素的可见性,例如当用户滚动列表时,隐藏或显示顶部的ToolBar以及悬浮动作按钮(Floating Action Button, FAB)。这种效果能提供更好的用户体验,...

    ExtJs_xtype一览

    - `tbtext`:`Ext.Toolbar.TextItem`,在工具栏中添加文本。 4. **菜单组件** - `menu`:`Ext.menu.Menu`,创建下拉菜单。 - `colormenu`:`Ext.menu.ColorMenu`,颜色选择菜单。 - `datemenu`:`Ext.menu....

    extjs4.2 动态生成toolbar

    在 Toolbar.js 中,我们需要定义一个 Ext.zc.grid.Toolbar 类,该类继承自 Ext.toolbar.Toolbar,并且 alias 为 zc_grid_Toolbar。我们还需要在 render 事件中使用 Ext.Ajax.request 方法来请求后台的工具栏数据,并...

    Ext.ux.form.TinyMCETextArea

    Ext.ux.form.TinyMCETextArea 是一个在Extjs4框架下实现的组件,它将TinyMCE编辑器集成到了ExtJS的表单控件中,提供了富文本编辑的功能。这个组件是基于HTML5构建的,因此在兼容性和功能上能够满足现代网页应用的...

    ExtJS入门教程(超级详细)

    67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext....

    ExtJs组件类的对应表

    9. **`tbtext`** - `Ext.Toolbar.TextItem`,工具栏文本项,用于在工具栏上显示静态文本。 #### 菜单组件 1. **`menu`** - `Ext.menu.Menu`,菜单组件,用于创建上下文菜单或下拉菜单。 2. **`colormenu`** - `...

    Extjs实用教程

    - **TextItem**: `Ext.Toolbar.TextItem`,工具栏上的文本项。 3. **表单及字段组件** - **FormPanel**: `Ext.FormPanel`,表单容器。 - **Checkbox**: `Ext.form.Checkbox`,复选框。 - **ComboBox**: `Ext....

    extjs控件列表

    **Ext.Toolbar.TextItem** - **描述**: 工具栏文本项,用于在工具栏上显示文本。 - **用途**: 显示状态信息或简短提示。 #### 菜单组件 **Ext.menu.Menu** - **描述**: 菜单组件,用于创建下拉菜单或上下文菜单。 ...

    extJs xtype 类型

    9. **`tbtext`:** 工具栏文本项组件,用于在工具栏中插入文本标签,通过`Ext.Toolbar.TextItem`类实现。 #### 菜单组件 1. **`menu`:** 菜单组件,用于创建上下文菜单或菜单条,通过`Ext.menu.Menu`类实现。 2. *...

    在工具栏上添加Combo控件

    2. **添加Combo控件**:然后,从工具箱中找到ComboBox控件并将其拖放到ToolBar控件上。请注意,由于工具栏的空间限制,可能需要调整ComboBox的大小和样式,使其适应工具栏的布局。 3. **配置Combo控件**:设置...

Global site tag (gtag.js) - Google Analytics