`
Action-人生
  • 浏览: 104054 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Ext.Window 的常见属性

阅读更多
Ext.Window 的常见属性:
    plain:true,(默认不是)
    resizable:false,(是否可以改变大小,默认可以)
    maximizable:true,(是否增加最大化,默认没有)
    draggable:false,(是否可以拖动,默认可以)
    minimizable:true,(是否增加最小化,默认无)
    closable:false,(是否显示关闭,默认有关闭)

//几个前面没有介绍的参数
1.closeAction:枚举值为:close(默认值),当点击关闭后,关闭window窗口  hide,关闭后,只是hidden窗口
3.constrain:true则强制此window控制在viewport,默认为false
4.modal:true为模式窗口,后面的内容都不能操作,默认为false
5.plain://true则主体背景透明,false则主体有小差别的背景色,默认为false

而pannel 和window是差不多的,比如构造参数我都可以直接通用:




一些常见配置参数:

1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false
3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false

4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为right

8.collapsible:设为true,显示右上角的收缩按钮,默认为false
9.draggable:true则可拖动,但需要你提供操作过程,默认为false

10.html:主体的内容
11.id:id值,通过id可以找到这个组件,建议一般加上这个id值
12.width:宽度
13.height:高度
13.title:标题

14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.

15.applyTo:(id)呈现在哪个html元素里面
16.contentEl:(id)呈现在哪个html元素里面,把el内的内容呈现 (如:contentEI='config'  <div id="config">...</div>
17.renderTo:(id)呈现在哪个html元素里面
eg:
Ext.onReady(function()
            {
                var panel = new Ext.Panel(
                {
                    title:"标题",
                    width:300,
                    height:200,
                    //frame:true,//圆角
                    plain:true,//方角 默认
                    collapsible:true,
                    tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")}},{text:"按钮2"}], //顶部工具栏
                                bbar:[{text:"按钮3"},{text:"按钮4"}],  //底部工具栏
                    html:'<h1>hello,my name is 274!</h1>',
                                        buttons:[{text:"按钮5"},{text:"按钮6"}], //footer部工具栏
                                        buttonAlign:"left"
                });          
                //win.show();
                panel.render("hello");
              
            });              

Tabpanel 使用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <title>学习ExtJS之Panel</title>
        <script type="text/javascript">
        Ext.onReady(function()
        {
            var tabs = new Ext.TabPanel({
            renderTo: 'hello',
            width:450,
            //height:200,
            activeTab: 0,
            frame:true,
          
            defaults:{autoHeight: true},
            items:[
                {contentEl:'script', title: '子面板1'},
                {contentEl:'markup', title: '子面板2'}
            ]
          
            });
            var tabs2 = new Ext.TabPanel({
            renderTo: document.body,
            activeTab: 0,
            width:600,
            height:250,
            plain:true,
            defaults:{autoScroll: true},
            items:[{
                    title: 'Normal Tab',
                    html: "My content was added during construction."
                },{
                    title: 'Ajax Tab 1',
                    autoLoad:'ajax1.htm'
                },{
                    title: 'Ajax Tab 2',
                    autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
                },{
                    title: 'Event Tab',
                    listeners: {activate: handleActivate},
                    html: "I am tab 4's content. I also have an event listener attached."
                },{
                    title: 'Disabled Tab',
                    disabled:true,
                    html: "Can't see me cause I'm disabled"
                }
            ]
            });
      
            function handleActivate(tab)
            {
                alert(tab.title + ' was activated.');
            }
        });             
       </script>
    </head>
    <body style="padding:10px;">
        <div id="hello">
          
        </div>
        <div id="script" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
        </div>
        <div id="markup" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
        </div>
        <br>
    </body>
</html>

对应的显示效果:

注意上面代码中使用了items 属性,表示子面板组。内容可以用html 元素ID 。比如:
items:[
             {contentEl:'script', title: 'Short Text'},
             {contentEl:'markup', title: 'Long Text'}
         ]
这样这两个子面板的内容将是ID为sript 和markup 的元素内容。
也可以,以html属性直接表示子面板的内容:
items:[
             {html:'script', title: 'Short Text'},
             {html:'markup', title: 'Long Text'}
         ]
语句解释: defaults:{autoHeight: true}, 默认自适应高度。当然这里面还可以设置为: defaults:{autoScroll: true},如果设置为 defaults:{autoScroll: true},高度就最好指定了。

下面还有一个tab面板,其子面板更多了。

我们发现renderTo 不仅可以绑在div (id) 也可以绑定在:document.body。

而其中比较特别的有:
1.autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
指切换到这个页面,内容显示为动态加载的,比如这里用了一个ajax方式,url 发送目标,params是参数形式。

2.listeners: {activate: handleActivate},
当面板切换到这个页面将触发事件:handleActivate

3.disabled:true,
指这个页面不能点击。

对于: plain:true, frame:true,
前者是子面板标题处样式,前者并无背景,后者有背景(看起来像个框架),请参看上图二者效果差异。

而activeTab:0 是指,默认显示(访问)的是哪一个子面板。0是第一次,如果不指定该属性,默认不显示子面板内容,只有当用户点击子面板后才显示。
分享到:
评论

相关推荐

    Ext.js教程和Ext.js API

    2. **类方法和属性**:每个类的构造函数、方法、属性、事件和配置选项的详细说明。 3. **示例代码**:为常见用法提供代码片段,帮助开发者快速理解和使用特定功能。 4. **事件和监听器**:解释如何注册事件监听器...

    Extjs使用Window最小化窗口

    1. **创建Window**:使用`Ext.create('Ext.window.Window', { ... })`来创建一个Window实例,设置相关的配置项,如宽度、高度、标题等。 2. **添加工具栏**:在Window的配置中,加入`dockedItems`,创建一个工具栏...

    Ext.ux.UploadDialog

    UploadDialog组件是在Ext.Window的基础上构建的,它提供了一个弹出对话框,用户可以在其中选择需要上传的文件。这个组件通常包含一个文件选择器、一个提交按钮以及一个进度条,用于跟踪上传进度。 3. **文件选择器...

    ExtJs4.2 Window常用方法

    根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性...以上是关于ExtJs 4.2 Window组件的一些常见配置属性和方法的详细介绍。希望这些内容能够帮助读者更好地理解和使用ExtJs中的Window组件。

    Ext JS 删除的代码

    在上述的代码段中,我们看到了一个特定的功能——“删除”操作,这在Ext JS的GridPanel中是非常常见的场景。这段代码展示了如何在Ext JS环境中实现用户交互,特别是涉及到数据的删除。 首先,`Ext.Toolbar`被用来...

    ext实例 ext操作步骤

    EXT提供了`Ext.Window`类来创建窗口,可以设置窗口大小、位置、标题、按钮等属性,并且可以包含其他EXT组件,如表格、表单等。 **EXT基本表格(GridPanel)介绍**:EXT的表格组件,即`Ext.grid.GridPanel`,是一种...

    基于Extjs的模态对话框

    在Web应用开发中,用户界面的设计与交互是至关重要的,其中模态对话框(Modal Dialog)是一种常见的元素,用于向用户提供信息或者获取用户的输入。在本篇内容中,我们将深入探讨如何利用Extjs这一强大的JavaScript...

    Extjs实用教程

    - **窗口(Ext.Window)**:用于创建弹出式的对话框或窗口,可以自定义标题、大小等属性。 - **布局(Layouts)**:包括CardLayout、BorderLayout等多种布局方式,用于控制组件间的排列。 - **表格(Grid)**:用于...

    老师整理的extjs学习笔记

    `Ext.Window` 是一个弹出窗口组件,通常用于显示对话框或模态窗口。下面是一个简单的 `Ext.Window` 示例: ```javascript new Ext.Window({ title: 'Example Window', width: 300, height: 200, layout: 'fit',...

    extjs xtype

    19. `window` - `Ext.Window`:浮动窗口,可以包含任意组件并提供关闭、最小化等操作。 除了`xtype`,`Ext.QuickTips.init()`是EXTJS中的一个方法,用于初始化快速提示功能。快速提示是EXTJS中的一个小弹出窗口,...

    ext生成树节点带链接

    其中,树形菜单(TreeMenu)是一种常见的UI组件,用于展示具有层次结构的数据。本文将详细介绍如何在ExtJS中生成树形菜单,并为每个子节点添加链接,以及如何通过点击这些链接触发相应的事件处理或页面跳转。 #### 2....

    ExtJS3总结内容

    - `window`: `Ext.Window` - `toolbarcomponents`: `paging`, `toolbar`, `tbbutton`, `tbfill`, `tbitem`, `tbseparator`, `tbspacer`, `tbsplit`, `tbtext` - `menucomponents`: `menu`, `colormenu`, `datemenu`,...

    ext培训第三讲.doc 3/4

    例如,创建一个窗口使用`new Ext.Window()`,而创建一个表格则使用`new Ext.GridPanel()`。 在组件的构造函数中,通常会传入一个配置对象,这个对象包含了创建组件所需的各项属性及其值。组件将依据这些属性值来...

    Ext 开发指南 学习资料

    顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来用的看这里 A.5. 想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还不会汉化ext A.7. 碰到使用ajax获得数据,或者提交数据出现乱码 A.8...

    extjs控件列表

    **Ext.Window** - **描述**: 可移动、可调整大小的窗口组件。 - **用途**: 创建独立的弹出窗口,用于显示额外信息或执行特定操作。 **Ext.ViewPort** - **描述**: 代表浏览器的可视区域,可自动调整大小以适应窗口...

    ext整理的一些知识

    `FormLayout`是Ext.NET中常见的布局方式,用于统一管理表单内控件的外观和行为。通过设置`HideLabels`、`itemCls`、`LabelAlign`、`LabelPad`、`LabelWidth`等属性,可以定制表单的样式和布局。 ### 10. Excel文件...

    Extjs4.0一些常见入门学习范例带注释详解

    在示例中,我们使用`Ext.require`来加载`Ext.Window`,然后在回调函数中创建并显示窗口。 5. 静态方法和属性(statics): `statics`属性用于定义类级别的方法和属性,可以通过类名直接调用。在`MyApp.Math`中,...

    找到的ExtJS实现多选下拉框3个代码

    Ext.create('Ext.window.Window', { title: '多选下拉框示例', width: 400, height: 300, items: [{ xtype: 'combobox', fieldLabel: '请选择', multiSelect: true, store: { fields: ['id', 'name'], ...

    extjs开发指导3.pdf

    Ext.create('Ext.window.Window', { title: '提示', width: 300, height: 200, layout: 'fit', items: [{ xtype: 'panel', html: 'JSON对象配置' }], buttons: [{ text: '确定', handler: function() { ...

    extjs tree 节点 链接 新窗口

    另一种是传统的`Ext.tree.TreeLoader`,它通过`url`属性来获取JSON格式的数据。这两种加载器的区别在于数据获取的机制和参数传递的方式。 `WebInvokeTreeLoader`通常用于AJAX请求,你可以通过监听`beforeload`事件...

Global site tag (gtag.js) - Google Analytics