`
atgoingguoat
  • 浏览: 195158 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

extjs 3.1 组件 使用

    博客分类:
  • js
阅读更多


  1.  

     

      Ext.Window

 

使用new Ext.Window(),创建一个表格则使用new Ext.GridPanel()。当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。

 

 

<%@ page language="java" contentType="text/html; charset=GBK"
 pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  <title>formpanel</title>
 <link rel="stylesheet" type="text/css"
   href="<%=request.getContextPath()%>/css/ext2/ext-all.css" />

 

    </style>

  <script src="<%=request.getContextPath()%>/js/ext2/ext-base.js"></script>
  <script src="<%=request.getContextPath()%>/js/ext2/ext-all.js"></script>

 

<script language="javascript" type="">
Ext.onReady(function(){

 

var w=new Ext.Window({
           contentEl:"win",//主体显示的html元素,也可以写为el:"win"
           width:300,
           height:200,
           title:"标题"
        });
        w.show();

 

});
</script>

 

    </head>
    <body>
   
        <div id="win" ></div>
    </body>
</html>

 

 

 

 

 

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

 

//需要显示下show()方法,默认的窗口是可拖动的,可关闭的,可拖动大小的
w.show()

 

/*******************************************/

 

  •   Ext.TabPanel

Ext.TabPanel这个东西是最常用的组件之一,它继承自Ext.Panel。因为继承自Ext.Panel,所以,它也是由header、tbar、body、bbar、footer这几个部分构成。

 

 

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>formpanel</title>
 <link rel="stylesheet" type="text/css"
			href="<%=request.getContextPath()%>/css/ext2/ext-all.css" />

    </style>

		<script src="<%=request.getContextPath()%>/js/ext2/ext-base.js"></script>
		<script src="<%=request.getContextPath()%>/js/ext2/ext-all.js"></script>

<script language="javascript" type="">
Ext.onReady(function(){
    var tabsDemo=new Ext.TabPanel({
            renderTo:Ext.getBody(),
            width:300,
            activeTab:0,//当前激活标签
            frame:true,
            items:[{
                      contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
                      title:"Ext.TabPanel",
                      closable:true//是否现实关闭按钮,默认为false
            },{
                      contentEl:"tabTwo",
                      title:"我爱老婆"
            }]
    });
});


</script>

    </head>
    <body>
    
        <div id="win" ></div>
    </body>
</html>


 

 

 

 

 

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>formpanel</title>
 <link rel="stylesheet" type="text/css"
			href="<%=request.getContextPath()%>/css/ext2/ext-all.css" />

    </style>

		<script src="<%=request.getContextPath()%>/js/ext2/ext-base.js"></script>
		<script src="<%=request.getContextPath()%>/js/ext2/ext-all.js"></script>

<script language="javascript" type="">
        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>


 

 

 

 

 

  •  Ext.Panel

 Table 布局由类Ext.layout.TableLayout 定义,名称为table,该布局负责把容器中的子元素按照类似普通html 标签。

 

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>formpanel</title>
 <link rel="stylesheet" type="text/css"
			href="<%=request.getContextPath()%>/css/ext2/ext-all.css" />

    </style>

		<script src="<%=request.getContextPath()%>/js/ext2/ext-base.js"></script>
		<script src="<%=request.getContextPath()%>/js/ext2/ext-all.js"></script>

<script language="javascript" type="">
      Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
title:"Ext.Panel容器组件",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"左元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
] }
);
});
            
       </script>
    </head>
    <body style="padding:10px;">
        <div id="hello"></div>
        <br>
    </body>
</html>


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

代码布置如图:

 

 

  • 大小: 46.4 KB
  • sb.rar (164.5 KB)
  • 下载次数: 1
  • 大小: 6.4 KB
  • 大小: 4.7 KB
  • 大小: 59.4 KB
  • 大小: 25.3 KB
分享到:
评论

相关推荐

    ExtJs3.1目前所有例子源代码

    2. **研究组件使用**:分析不同示例中组件的配置和事件处理,理解它们的功能和用法。 3. **学习布局管理**:通过查看不同布局的例子,学习如何根据需要调整组件的位置和大小。 4. **数据交互实践**:查看如何使用...

    extJS3.1源码及demo

    在"extJS3.1源码及demo"这个资源中,你将找到ExtJS 3.1.0的完整源代码和相关的示例。源码的分析对于深入理解框架的工作原理至关重要,特别是对于那些想要进行定制化开发或者优化性能的开发者来说。源码包含了各种...

    ExtJs 3.1的一些小例子源代码

    ExtJs 3.1是该框架的一个重要版本,它包含了大量的组件和功能,如数据绑定、布局管理、可拖拽和可扩展的组件系统。这个版本提升了性能,并修复了一些已知问题,使得开发复杂的用户界面更加高效。 2. **组件系统** ...

    ExtJS3.1-3.3中文API文档.zip

    这个"ExtJS3.1-3.3中文API文档.zip"包含了从3.1版本到3.3版本的中文API文档,是学习和开发基于ExtJS应用的重要参考资料。 中文API文档通常包含以下几个主要部分: 1. **基础类库**:这部分介绍Ext的基础类,如...

    Aptana 的 Extjs 3.1 插件

    使用Aptana的ExtJS 3.1插件,开发者可以享受到更顺畅的开发流程,特别是在处理复杂的组件和布局时。然而,值得注意的是,随着ExtJS的更新迭代,新的版本可能会引入新的特性和API,因此,对于最新的项目,可能需要...

    ExtJs 3.1的一些实例源码.zip

    这个压缩包文件"ExtJs 3.1的一些实例源码.zip"很可能包含了一系列使用ExtJs 3.1编写的示例代码,这些示例可以用于学习和理解如何在实际项目中应用该框架。 首先,让我们来深入了解一下ExtJs 3.1的主要特性: 1. **...

    玉琴蝶园之ExtJs3.1目前(6月7日)所有例子源代码

    这个压缩包"玉琴蝶园之ExtJs3.1目前(6月7日)所有例子源代码"包含了ExtJS 3.1版本的全部示例源码,是学习和理解ExtJS 3.1功能和用法的重要资源。 首先,`index.html` 文件通常是应用程序的入口点,它会加载必要的库...

    ExtJS 3.1 下拉框 与aps.net绑定使用

    在ExtJS 3.1 版本中,下拉框(ComboBox)是常见的组件,常用于创建选择列表,类似于HTML中的`&lt;select&gt;`元素。它提供了丰富的功能,如搜索、过滤和自定义渲染等。在ASP.NET环境下,我们可以利用ExtJS的Ajax能力与...

    Extjs3.1插件

    在"Extjs3.1插件"这个主题中,我们主要关注的是ExtJS 3.1版本及其相关的插件。ExtJS 3.1包含了核心库、组件、布局、数据包和各种实用工具。这些组件包括按钮、表格、表单、树形视图、面板、菜单、图表等,几乎涵盖了...

    Extjs3.1+struts2+spring2.5+hibernate3.5环境

    "Extjs3.1+struts2+spring2.5+hibernate3.5环境"是一个经典的Java Web开发组合,每个组件都有其特定的角色和功能。以下是这些技术的详细说明: 1. **ExtJS 3.1**: ExtJS是一款基于JavaScript的前端用户界面(UI)...

    ExtJS 使用Flash上传

    在ExtJS中,我们可以创建一个自定义的组件,该组件利用Flash来处理文件上传。关键在于集成`SWFObject.js`库,这是一个轻量级的JavaScript库,用于嵌入和操作Flash对象。`SWFObject.js`允许我们在HTML页面中无缝地...

    ExtJs 3.1 XmlTreeLoader Example Error

    在描述中提到了几个关键词,如"ExtJs3.1XmlTreeLoaderExampleError", "XmlTreeLoader错误", "TreePanelError"等,这些都是指向调试过程中可能遇到的错误类型。实际上,错误的来源可能包含但不限于以下几个方面: 1....

    Extjs kindeditor整合 demo

    3. 初始化KindEditor:在ExtJS的回调函数中,使用KindEditor的API来初始化编辑器,指定容器元素(通常是ExtJS组件的DOM元素)。 4. 处理交互:可能需要监听KindEditor的事件,比如内容改变,然后更新ExtJS的数据模型...

    EXTJS3.2-3.3中文API和包

    开发者可以通过这个文档了解如何使用EXTJS 3.2的各个组件,例如Grid、Form、TreePanel等,以及如何进行数据绑定和Ajax通信。 2. "Ext3.1-3.3中文API.CHM" 则涵盖了EXTJS 3.1到3.3版本的API,这使得开发者可以对比...

    Extjs4.0、Extjs3.0教程CHM版和PDF版,中文版API

    它们详细阐述了ExtJS的基本概念、组件使用、事件处理和数据绑定等内容,对于初学者来说,是深入理解框架的好资料。Ext Core是ExtJS的一个精简版本,包含了核心的组件和功能,适合那些只需要轻量级解决方案的项目。 ...

    Ext 树的级联选择扩展插件使用说明

    ExtJS是一个强大的JavaScript库,它提供了丰富的组件来处理这类问题。本篇文章将聚焦于Ext JS中的一个特定功能——级联选择的树形控件,并探讨其扩展插件的使用方法。 在Ext JS中,树形控件(Tree)是一种常见的...

    ExtJS3.1.0

    7. **API文档**:标签中的"ExtJS3.1 api"表明随附的“ExtJS实用开发指南.chm”文件提供了详细的API文档,这对于开发者理解和使用框架的各种功能至关重要。 8. **主题与皮肤**:ExtJS 3.1.0 允许开发者自定义主题和...

    ExtJS4下拉树组件

    ### ExtJS4 下拉树组件知识点详解 ...综上所述,ExtJS4下的下拉树组件提供了一个强大的工具,能够帮助开发者构建高效、灵活且易于使用的用户界面。通过合理配置参数和扩展功能,可以满足各种应用场景的需求。

Global site tag (gtag.js) - Google Analytics