`

ext学习笔记(转)

    博客分类:
  • Java
阅读更多
文章摘要:JSON------由键值组成的字符串。大括号对,表示对象,中括号表集合(即数组)。键要用双引号括起来,其后要加冒号,再跟值。一组键值之后,要再跟一组键修值要用逗号间隔。转义符是左倾斜线”” 在javaScript 中,很方便的把json字符串,转换成一系列对象.

-
JSON------由键值组成的字符串。大括号对,表示对象,中括号表集合(即数组)。

键要用双引号括起来,其后要加冒号,再跟值。一组键值之后,要再跟一组键修值要用逗号间隔。转义符是左倾斜线””

在javaScript 中,很方便的把json字符串,转换成一系列对象.



例1:运行跳出一个窗口:a:66"dd

<html>

    <head>

        <meta name="vs_defaultClientScript" content="JavaScript">

        <script>

            function jsontest(){

                var jsontext = '{"man":{"weight":"75kg","age":"24"},

"ar":["1","2","3"],"name":"a:66\"dd"}';

                var aman = eval("("+jsontext+")");

                alert(aman.man.weight);

                alert(aman.name);

            }

        </script>

    </head>

    <body onload="jsontest();">

    </body>

</html>



例2:

<html>

    <head>

        <meta name="vs_defaultClientScript" content="JavaScript">

        <script>

            function jsontest(){

                var aman= {"man":{"weight":"7115kg","age":"24"},

"ar":["1","2","3"]};

                alert(aman.man.weight);

                alert(aman.ar[0]);

            }

        </script>

    </head>

    <body onload="jsontest();">

    </body>

</html>





JSON-LIB
这是把一个bean 或map 或list 或xml 转成json字符串,也能把json字符串转成bean,xml

所依赖的包及下载点如下:

Json-lib:           http://json-lib.sourceforge.net/

EZMorph:         http://ezmorph.sourceforge.net

Collections:        http://jakarta.apache.org/commons/collections/

Commons-Lang:    http://jakarta.apache.org/commons/lang/

Commons-BeanUtils:http://commons.apache.org/beanutils/

commons-logging:  http://commons.apache.org/logging/

bean、map、list 、xml 与Json 相互转换源码
1 User.java



package javaapplication2;

public class User {

   private String no;

   private String name;

   public User(){}

   public void setNo(String no){ this.no=no; }

   public String getNo(){ return no; }

   public void setName(String name){  this.name=name; }

   public String getName(){  return name; }

}



2 test.java



package javaapplication2;

import java.lang.reflect.InvocationTargetException;

import java.util.List;

import java.util.ArrayList;

import java.util.Map;

import java.util.HashMap;

import net.sf.json.JSONObject;

import net.sf.json.JSONArray;

import org.apache.commons.beanutils.PropertyUtils;

import net.sf.json.xml.XMLSerializer;



public class test {

    public static void main(String args[]) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException{

        // list to jsonstr

        List list = new ArrayList();   

        list.add( "first" );   

        list.add( "second" );   

        JSONArray jsonArray = JSONArray.fromObject( list );   

        System.out.println("----1----" );

        System.out.println( jsonArray );

        System.out.println();

       

        // map to jsonstr

        Map map=new HashMap();

        map.put("d", list);

        map.put("e", "e1");

        JSONObject jobj=JSONObject.fromObject(map);

        System.out.println("----2----" );

        System.out.println(jobj ); 

        System.out.println();

        

        // bean to jsonstr

        User user=new User();

        user.setNo("001");

        user.setName("李四");

        jobj=JSONObject.fromObject(user);

        System.out.println("----3----" );

        System.out.println( jobj );

        System.out.println();

       

        //  jsonstr to object

        String str="{"d":["first","second"],"e":"e1"}";

        jobj=JSONObject.fromObject(str);

        System.out.println("----4----" );

        System.out.println( jobj.get("d"));

        System.out.println();

        

        Object bean = JSONObject.toBean( jobj );

        System.out.println("----5----" );

        System.out.println(PropertyUtils.getProperty( bean, "d" ) ) ;

        System.out.println();

       

        // jsonstr to bean

        str="{"name":"李四1","no":"002"}";

        jobj=JSONObject.fromObject(str);

        user = (User) JSONObject.toBean( jobj, User.class );

        System.out.println("----6----" );

        System.out.println(user.getName() ) ;

        System.out.println();

       

        /**

        * XML和JSON之间的转换,需要用到xom

        */

        jobj = new JSONObject( true );

        XMLSerializer xmls = new XMLSerializer();

        String xml = xmls.write(jobj);

        System.out.println("***7*** = " + xml);



        jobj = JSONObject.fromObject("{"name":"json","bool":true,"int":1}");

        xmls = new XMLSerializer();

        xml = xmls.write(jobj);

        System.out.println("***8*** = " + xml);



        jsonArray = JSONArray.fromObject("[1,2,3]");

        xmls = new XMLSerializer();

        xml = xmls.write( jsonArray );

        System.out.println("***9*** = " + xml);



        xml = "<a class="array"><e type="function" params="i,j">return matrix[i][j];</e></a> ";

        xmls = new XMLSerializer();

        jsonArray = (JSONArray) xmls.read( xml);

        System.out.println("***10*** = " + jsonArray );



    }

}





Ext 之框架篇
Ext2 相关包放在netbean6.1的 web resources下。

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />

        <script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>

<script type="text/javascript"

src="resources/ext21/ext-all.js"></script>

    </head>

    <script> 

        function fn() { alert('Hello World'); }

        Ext.onReady(fn);

    </script>       

    <body>

        <h2>ss</h2>

    </body>

</html>



javaScript调试
下载firefox.

下载fireBug插件。fireFox浏览器中的插件管理器中,可在线安装

Ext2.0之外观改变
Ext2组件的外观分成许多部份,这些部份通过css进行控控制。其中定义了一个核心的css,由baseCls参数指定。其他部份(css)的命名必须前缀baseCls值。当修改了baseCls的值时,ext2自动修改相关css的前缀。



fomPanel外观改变
源代码:aaa.jsp



<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />

        <link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/fyhC.css" />

        <script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>

<script type="text/javascript" src="resources/ext21/ext-all.js"></script>

    </head>

<script>  

    Ext.onReady( function (){

        var f=new Ext.form.FormPanel({

            renderTo:"hello",//定位到名为hello的Div节点

            title:"用户信息录入框",

            url:"login.do",

            baseParams:{aa:"bb"},

            baseCls:"fyh-panel",//外观核心参数

            itemCls:"fyh-panel-mc",

            height:600,

            width:800,

            labelWidth:200,

            labelAlign:"right",

            frame:true,

            defaults:{width:180,xtype:"textfield"},

            items:[

                {

                    xtype:"textfield",

                    name:"username",

                    fieldLabel:"姓名"

                },

                {

                    xtype:"textfield",

                    name:"password",

                    fieldLabel:"密码"

                }

            ],      

            buttons:[{

                text:"加载表单数据"

            }]  

        });         

    });

   



</script>       

    <body>

        <div id="hello"/>

    </body>

</html>



fyhC.css





fyh-panel {

    border:0pt solid yellow;

}

fyh-panel-tl {  /* 标题左 */

    background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll 0pt 0pt;

    border-bottom:1px solid #99BBE8;

    padding-left:6px;

}

.x-panel-tr { /* 标题右 */

    background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll right 0pt;

    padding-right:6px;

}

.fyh-panel-tc { /* 标题正中间 */

    background:transparent url(../images/default/dd/drop-add.gif) repeat-x scroll 0pt 0pt;

    overflow:hidden;

}

.fyh-panel-tl  .fyh-panel-header { /* 标题文本 */

    -x-system-font:none;

    background:transparent none repeat scroll 0% 0%;

    border:0pt none;

    color:#15428B;

    font-family:tahoma,arial,verdana,sans-serif;

    font-size:72px;

    font-size-adjust:none;

    font-stretch:normal;

    font-style:normal;

    font-variant:normal;

    font-weight:bold;

    line-height:normal;

    padding:5px 0pt 4px;

}

.fyh-panel-bwrap {

    overflow:hidden;

}

.fyh-panel-ml {/* 正中左 */

    background:#FFFFFF url(../images/default/panel/left-right.gif) repeat-y scroll 0pt 0pt;

    padding-left:6px;

}

.fyh-panel-mr {/* 正中右 */

    background:transparent url(../images/default/panel/left-right.gif) repeat-y scroll right 0pt;

    padding-right:6px;

}

.fyh-panel-mc {/* 正中 */

    -x-system-font:none;

    background:red none repeat scroll 0% 0%;

    border:0pt none;

    font-family:tahoma,arial,helvetica,sans-serif;

    font-size:24px;

    font-size-adjust:none;

    font-stretch:normal;

    font-style:normal;

    font-variant:normal;

    font-weight:normal;

    line-height:normal;

    margin:0pt;

    padding:6px 0pt 0pt;

}

.fyh-panel-body {

    overflow:hidden;

}

.fyh-panel-btns-ct {

    padding:16px;

}

.fyh-panel-btns-ct .fyh-panel-btns-center {

    text-align:center;

}

.fyh-panel-bc .x-panel-footer { /*脚下*/

       padding-bottom:6px;

}

.fyh-panel-bl { /*脚左*/

    background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll 0pt bottom;

    padding-left:6px;

}



.fyh-panel-br { /*脚右*/

    background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll right bottom;

    padding-right:6px;

}



.fyh-panel-bc { /*脚中*/

    background:transparent url(../images/default/panel/top-bottom.gif) repeat-x scroll 0pt bottom;

}



Ext 乱码解决
客记端加入以下语句:Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';

服务器端加入以下语句:arg1.setContentType("text/json; charset=utf-8");

Ext 得标签或dom节点,与服务器通信
Ext.get、Ext.select得到的节点与Ext.query得到的节点是不一样的。前者,与ext紧密结合;而后者与dom的节点紧密结合

Ext.get与Ext.select得到的节点,有一个load方法,与服务器进行通信。

客户端源码:aaa.jsp  

其中

dd.addClass("red”)是在ExtStart.css文件中定义的滤镜

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />

        <link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ExtStart.css" />

        <script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js">   </script>

<script type="text/javascript"

src="resources/ext21/ext-all.js"></script>

    </head>

<script>  

    Ext.onReady(function(){

        var dd= Ext.get('ss');//得id 值的标签

        dd.addClass("red");

        dd=Ext.select("h2") ;//得多个节点

        dd.addClass("green");

        Ext.select('h2').on('click', function() {

           alert("hello")

        });

      var dd1 =Ext.query("#ss");//得id值为ss的dom节点

        dd1 =Ext.query("span");//得节点名span的dom节点

      dd1 =Ext.query("*[id=bar]");//得节点名span的dom节点

      dd1=Ext.query("div ss");//取得div节点中id名为ss的dom节点

      dd1 =Ext.query(".bar");//得class为bar的dom节点

      dd1 =Ext.query("*");//得所有的dom节点

      dd1= Ext.query("*[class^=f]");//得所有class名开头是b的dom节点

      dd1= Ext.query("*[class$=r]");//得所有class名结尾是r的dom节点

      dd1= Ext.query("*[class*=o]");//得所有class名中有o的dom节点

      dd1= Ext.query("*{color=red}");//大括号表示取css中满足

      alert(dd1[0].tagName) ;

      alert(dd1[0].nodeName);

      alert(dd1[0].innerHTML);

      var dd= Ext.get('ss');//得id 值为ss的标签

      //dd.load与服务器通信

       dd.load({url:"login.do", //服务器网址

           params: 'aa=bar', text: 'Updating...' }); //向服务器传递参数

       dd.show();//更改标签为服务器内容

    });

                

</script>       

    <body>

        <h2>hello</h2>

         <div id="ss">dd</div>

        <h2 ><a href="http://www.sina.com.cn"> Hello World!</a></h2>

        <input id="btn" type="button" name="add" value="新窗口" />

        <input id="btnToBack" type="button" name="add" value="放到后台" />

        <input id="btnHide" type="button" name="add" value="隐" />

        <div id="bar" class="foo">

             I'm a div ==> my id: bar, my class: foo

             <span class="bar">

                 I'm a span within the div with a foo class

             </span>

             <a href="http://www.extjs.com" target="_blank">An ExtJs link</a>

        </div>

        <div id="foo" class="bar"> my id: foo, my class: bar

             <p>I'm a P tag within the foo div</p>

             <span class="bar">I'm a span within the div with a bar class</span>

             <a href="#">An internal link</a>

        </div>

    </body>

</html>



服务器端,部份源码:

其中:arg0是HttpServletRequest对象

arg1 是HttpServletResponse对象

完整源码见: ext与服务交互之Ext.Ajax.request

if (arg0.getParameter("aa").equals("bar")){

    arg1.getWriter().write(jsonArray.toString());

    arg1.getWriter().flush();

}



对话框使用
确定框



<script>  

      Ext.onReady(function(){

        Ext.MessageBox.confirm('登 陆', '确定吗?',fun);

      });



        function fun(btn) {

if(btn=='yes'){ alert(btn+'ss') }

return false;

        }

</script>  



消息框 



<script>  

      Ext.onReady(function(){

        Ext.MessageBox.alert('Hello', '确定吗',fun);

      });

      function fun(btn) { alert(btn+'Hello') }

  </script>



输入框1

<script>  

     Ext.onReady(function(){

        Ext.MessageBox.prompt('输入框', '随便输入一些东西',  fun);

     });

     function fun(btn,text) {

        alert('你刚刚点击了 ' + btn + ',刚刚输入了 ' + text);

     }

</script>     



输入框2

<script>  

        Ext.onReady(function(){

            Ext.MessageBox.show({

                title: '多行输入框',

                msg: '你可以输入好几行',

                width:300,

                buttons: Ext.MessageBox.OKCANCEL,

                multiline: true,

                fn:fun

            });

        });

        function fun(btn,text) {

             alert('你刚刚点击了 ' + btn + ',刚刚输入了 ' + text);

        }

    </script>



进度条

<script>  

    Ext.onReady(function(){

        Ext.MessageBox.show({

            title: '请等待',

            msg: '读取数据中',

            width:240,

            progress:true,

            closable:false

        });

    });



    var f = function(v){

        return function(){

            if(v == 11){

                Ext.MessageBox.hide();

            }else{

                Ext.MessageBox.updateProgress(v/10, '正在读取第 ' + v + ' 个,一共10个。');

            }

        };

    };

    for(var i = 1; i < 12; i++){

    setTimeout(f(i), i*1000);

    }



</script>       



布局管理
Panel  window 等都可指定布局管理器进行管理界面。

在panel的组件构建对象中,都有一个html属性,它可指一个div子节点。

而ext的大多数组件都可通过renderTo,让该组件挂在html指定节点中,这样就从外观上完成了面板的组件装配任务

表格布局管理器Ext.layout.TableLayou
最看好的一个管理器。像EXCEL一样,把一个板面分成具有统一大小的单元格构成的表格。一个组件在存放时,也可像excel一样合并单元格。即通过合并,让一个组件可占用多个单元格的位置。

表格布局管理器,要先指定总列数,而总行数不用指定。

表格布局管理器,是按先行后列的原则顺序装配对象。注意下面例子中的5678的编号。



例:把9个panel装配到一个panel中去。

效果图


总共是4行3列的表格Dragme1 与dragme6占了两行,而dragme2占了两列,看着怪是因为他们居中了。

Window 一样。把例中的panel改成window就行了

源代码



<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />

        <script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>

<script type="text/javascript" src="resources/ext21/ext-all.js"></script>

    </head>

<script>  

    Ext.onReady( function (){

    

      

       var dd= new Ext.Panel({

            title: 'Drag me',

            x: 100,

            y: 100,

            id:"dd",

            renderTo: Ext.getBody(),

            floating: true,//注意在ext2.中,在下面的panel中不能指定,否则显//示不出。严重郁闷。不过,也就是一个阴影属性罢了。

            frame: true,

            width: 350,

            height: 300,

            layout:"table",//指定了布局管理器为tableLayout

            layoutConfig: {//配置对象

                //定义了总列数

                columns: 3

            },

            // items 指定了要装配的对象。在这里都通过html装配了一个div

//节点。在这个节点中,将要挂接panel对象。在这个节点中,

//可指定一些css样式,控制要挂接对象的位置大小等。

            items: [{

                html: '<div id="aa1" ></div>',

                rowspan: 2,//占用两行

                colspan: 1 //占用一列

            },{

                html: '<div id="aa2" align=center ></div>',//这里的align=center

                //指定了要挂接对象居中显示

                rowspan: 1,

                colspan: 2

            },{

                html: '<div id="aa3"></div>',

                cellCls: 'highlight',

                rowspan: 1,

                colspan: 1

            },{

                html: '<div id="aa4"></div>',

                rowspan: 1,

                colspan: 1

            },{

                html: '<div id="aa5"></div>',

                rowspan: 1,


本文来自[Svn中文网]转发请保留本站地址:http://www.svn8.com/SVNSY/20080930/1037.html
分享到:
评论

相关推荐

    ext学习笔记代码

    ext学习笔记代码 ext学习笔记代码 ext学习笔记代码

    Gwt-ext学习笔记

    在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...

    Ext学习笔记

    Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址

    EXT学习笔记-项目应用实践

    这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...

    Ext学习和学习笔记

    里面包括Ext学习.doc和Ext学习笔记.doc两份资料。来自网上。

    Gwt-ext学习笔记之基础篇

    ### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....

    十分有用有帮助的EXT学习笔记

    以下是对EXT学习笔记中涉及的关键知识点的详细说明: 1. **EXT Form**: EXT中的表单组件是构建用户交互界面的重要部分。它们允许用户输入数据并将其提交到服务器。EXT Form支持多种字段类型,如文本框、选择框、...

    ext api,ext 学习笔记,SWFUpload_多文件上传及部分工具

    在EXT学习笔记中,"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念,这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...

    EXT学习笔记

    EXT学习笔记,是本人在一个月的学习期间整理的

    Gwt-Ext学习笔记之进级篇

    在GWT-Ext的学习过程中,首先你需要了解如何定义和实现远程服务。这是GWT的一个核心特性,它允许客户端和服务器之间的安全通信。在GWT中,远程服务调用通常涉及以下几部分: 1. **远程服务接口(Remote Service ...

    Ext学习笔记-个人版.doc

    Ext是一个JavaScript库,主要用于构建富客户端应用程序,尤其是那些基于Web的桌面级应用。它提供了一套完整的组件模型、布局管理、数据绑定以及丰富的用户界面组件,使得开发者能够创建出功能强大的交互式网页应用。...

Global site tag (gtag.js) - Google Analytics