当前位置:编程学习 > JAVA >>

Ext [DDTabPanel、FoodImageField、ImageChooser]扩展组件

开发环境:
System:Windows
WebBrowser:IE6+、Firefox3+
JavaEE Server:tomcat5.0.2.8、tomcat6
IDE:eclipse、MyEclipse 6.5
开发依赖库:
JavaEE5、ext 2.2.2
Email:hoojo_@126.com
Blog:http://blog.csdn.net/IBM_hoojo
http://hoojo.cnblogs.com/
一、Ext.ux.panel.DDTabPanel组件
可以拖动tabPanel的组件



需要用到的文件
  

DDTabPanel组件文件:Ext.ux.panel.DDTabPanel.js
DDTabPanel运行示例文件:Ext.hoo.form.DDTabPanel.js
dd-arrow-down.gif 
代码如下
ddTabPanelExample.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Basic Component -- imageChooser</title>
        <meta http-equiv="pragma" content="no-cache"/>
        <meta http-equiv="cache-control" content="no-cache"/>
        <meta http-equiv="expires" content="0"/>
        <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="author" content="hoojo"/>
        <meta http-equiv="email" content="hoojo_@126.com"/>
        <meta http-equiv="ext-lib" content="version 3.2"/>
        <meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo"/>       
        <link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css"/>
        <link rel="stylesheet" type="text/css" href="../css/Ext.ux.ImageChooser.css"/>
        <link rel="stylesheet" type="text/css" href="../css/style.css"/>
        <script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext2/ext-all.js"></script>
        <script type="text/javascript" src="../ext2/build/locale/ext-lang-zh_CN-min.js"></script>
        <script type="text/javascript" src="Ext.ux.form.ImageField.js"></script>
        <script type="text/javascript" src="Ext.ux.ImageChooser.js"></script>
        <script type="text/javascript" src="chooser.js"></script>
        <script type="text/javascript" src="Ext.hoo.form.FoodImageField.js"></script>
  </head>
 
  <body>
          <div id="show" style="margin: 50px;"></div>
          <div id="showField" style="margin: 50px;"></div>
         
          <div id="buttons" style="margin:20px;"></div>
        <div id="images" style="margin:20px;width:600px;"></div>
         
  </body>
</html>
DDTabPanel.css
.dd-arrow-down.dd-arrow-down-invisible {
    display: none;
    visibility: hidden;
}
 
.dd-arrow-down {
    background-image: url(../images/dd-arrow-down.gif);
    display: block;
    visibility: visible;
    z-index: 20000;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}
 
html, body {
    font: 10pt "Segoe UI","Tahoma","Helvetica","Arial",sans-serif;
    padding: 5px;
}
 
#container {
    margin: 5px 10px;
}
Ext.ux.panel.DDTabPanel.js
/*global Ext*/
Ext.namespace('Ext.ux.panel');
/**
 * <p>A tab panel which supports drag and drop behaviour for tabs. Usage and configuration are identical to {@link Ext.TabPanel}, with the sole exception of two extra configuration options to adjust the drop arrow indicator position.</p>
 * <p>This extension can also be created using the <b>ddtabpanel</b> xtype.<br/> </p>
 * <p>Based on the code of <a href="http://extjs.com/forum/member.php?u=22731">thommy</a> and <a href="http://extjs.com/forum/member.php?u=37284">rizjoj</a> in the topic <a href="http://extjs.com/forum/showthread.php?t=23264">Draggable Panel in a TabPanel</a>.</p>
 * <p>Demo link: <a href="http://extjs-ux.org/repo/authors/Matti/trunk/Ext/ux/panel/DDTabPanel/demo.html">http://extjs-ux.org/repo/authors/Matti/trunk/Ext/ux/panel/DDTabPanel/demo.html</a>
 * <br />Forum thread: <a href="http://extjs.com/forum/showthread.php?p=264712">http://extjs.com/forum/showthread.php?p=264712</a><br/> </p>
 * <b>CSS Styles:</b>
 * <pre><code>.dd-arrow-down.dd-arrow-down-invisible {
    display: none;
    visibility: hidden;
}
.dd-arrow-down {
    background-image: url( <your_down_arrow_image> );
    display: block;
    visibility: visible;
    z-index: 20000;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
}</code></pre>
 * <br /><b>Example Usage:</b>
 * <pre><code>var tabs = new Ext.ux.panel.DDTabPanel({
    renderTo: Ext.getBody(),
    items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
});</code></pre>
 * @class Ext.ux.panel.DDTabPanel
 * @extends Ext.TabP

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,