Ext使用第一天

    最近工做中用到了Ext,对于刚接触Ext的我来讲简直就是菜鸟还菜鸟，我问身边的人Ext怎么这么难，他们告诉我叫我多看看Thinking  in  java，呵呵，他们说EXT用的是OO的思想，可是在个人印象中OO.equals("0")，不过也没我想的那么遭，Ext并非特难学，多是刚入门的缘由吧，其实Ext整体给个人感受就像JAVA中的SWING,无论是从布局仍是从他处理的事件给个人整体的感受就是很像，虽然如今大部分的公司都不用SWING了，可是当初学SWING的时候仍是比较感兴趣的，可是为何学Ext就头大呢，呵呵，无论怎么样既然选择了干开发那就好好学吧，学了总比没学的好。不会思想那我就依葫芦画瓢吧。今天写了Ext三个例子。都不较简单，用的组件式FormPanel和grid。

    1：FormPanel

        Ext.onReady(function(){
   
    //Ext.QuickTips.init();
    //Ext.form.Field.prototype.msgTarget='side';
   
    var simple=new Ext.FormPanel({
        labelWidth:75,
        frame:true,
        title:'',
        bodyStyle:'padding:5px 5px 0',
        width:350,
   
        defaultType:'textfield',
       
        items:[
        {fieldLabel:'业务日期从',
                name:'trStartDate',
                allowBlank:false,
                blankText:'业务日期不能为空'},
                {fieldLabel:'到业务日期为止',
                 name:'trStopDate',
                 allowBlank:false,
                 blankText:'业务日期不能为空'
                },
                {
                fieldLabel:'机构号',
                name:'orgCode',
                allowBlank:false,
                blankText:'机构号不能为空'
                },
                {
                    fieldLabel:'柜员',
                    name:'trTelr',
                    allowBlank:false,
                    blankText:'柜员号不能为空'
                },{
                    fieldLabel:'总张数',
                    name:'allCount',
                    allowBlank:false,
                    blankText:'总张数不能为空'
                }],
            buttons:[{
                text:'肯定',
                handler:function(){}   
            },
            {
                text:'提交',
                handler:function(){}
            }
            ]
    });
    simple.render('ycyhScanPanel');
});

2:主要是实现布局，布局的整体图：

   

用的是borderlayout的布局。实现也很简单。实现代码以下：

Ext.onReady(function(){
    Ext.useShims=true;
    function setFontSize(name, size){
        return "<font size=" + size + ">" + name + "</font>";
        }
    //东边布局用到的数据
    var eastImagePanel=new Ext.Panel({
        id:"showImagePanel",
        width:800,
        height:385,
        autoScroll:false,
        region:"center",
        html:'<iframe name="imageFrame" id="imageFrame" scrolling="no" frameborder="0" width="100%" height="100%" src="../ShowImage.jsp?imageWidth=750&imageHeight=320"></iframe>'
    });
    //西边布局用到的数据
    var vchGridData={
            totalCount:0,
            vchFileRows:[]
    };
    var vchGridStore=new Ext.data.Store({
        autoDestroy:false,
        remoteSort:true,
        proxy:new Ext.data.MemoryProxy(vchGridData),
        reader:new Ext.data.JsonReader({
            idProperty:"vchId",
            root:"vchFileRows",
            totalProperty:"totalCount",
            fields:[
                    {name:"ck",type:"bool"},
                    {name:"vchType",type:"string"},
                    {name:"vchId",type:"string"},
                    {name:"mainFlag"}
                    ]
        })
    });
    //西边凭证类布局面板
    function setImageFileType(value){
        var imageFileType;
        try{
            imageFileType=_jsonObj.imageFileTypeViewMap[value];
            if(imageFileType==""||imageFileType==null){
                return value;
            }else{
                return imageFileType;
            }
        }catch(e){
            return value;
        }
    }
    var checkColumn=new Ext.grid.CheckColumn({
        header:"",
        dataIndex:"ck",
        width:5,
        sortable:false,
        menuDisabled:true
    });
   
    var vchFileGridCM=new Ext.grid.ColumnModel({
        defaults:{
        sortable:false
            },
        columns:[
               checkColumn,

                {
                    header:"凭证名称",
                    dataIndex:"vchType",
                    width:110,
                    renderer: setImageFileType //setImageFileType  某function
                },
                {
                    header:"流水号",
                    dataIndex:"cltseq",
                    width:70,
                    menuDisabled:true
                },{
                    id:"vchId",
                    header:"vchId",
                    dataIndex:"vchId",
                    hidden:true
                }]
    });
    var westVchGridPanel=new Ext.grid.EditorGridPanel({
        store:vchGridStore,//数据来源
        cm:vchFileGridCM,//复选框
        sm:new Ext.grid.RowSelectionModel({singleSelect:true}),//只能进行单选
        width:312,
        height:385,
        title:"凭证信息",
        frame:false,
        plugins:checkColumn,
        clickToEdit:2,
        border:false,
        split:true,
        columnLines:true,
        region:"west",
        collapsible:true,
        enableDragDrop:true,
        loadMask:{msg:"加载数据中，请稍候..."},
        trackMouseOver:true,
        viewConfig:{
            scrollOffset:0,
            forceFit:true
        }
       
    });
   
   
    //南边面板及布局
    var dsTradeGridData={
            dsTradeRows:[]
    };
    var dsTradeGridCM=new Ext.grid.ColumnModel({
        defaults:{
        sortable:false
    },
    columns:[
             {
                 header:"流水号",
                 dataIndex:"cltSeq",
                 width:40,
                 menuDisabled:true,
                 sortable:true
             },
             {
                 header:"金额",
                 dataIndex:"txnAmt",
                 width:50,
                 menuDisabled:true,
                 sortable:true
             },{
                 id:"pkId",
                 header:"pkId",
                 dataIndex:"pkId",
                 hidden:true
             }
             ]
    });
    var dsTradeGridStore=new Ext.data.Store({
        autoDestroy:true,
        proxy:new Ext.data.MemoryProxy(dsTradeGridData),
        reader:new Ext.data.JsonReader({
            idProperty:"pkId",
            root:"dsTradeRows",
            totalProperty:"results",
            fields:[{name:"cltSeq",type:"string"},{name:"txnAmt",type:"string"},{name:"txnCde",type:"string"},{name:"accNo",type:"string"}]
        })
    });
    var dsTradeGrid=new Ext.grid.EditorGridPanel({
        store:dsTradeGridStore,
        cm:dsTradeGridCM,
        sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
        width:800,
        height:150,
        title:"流水信息",
        frame:false,
        clicksToEdit:2,
        border:false,
        columnLines:true,
        region:"west",
        split:true,
        loadMask:true,
        trackMouseOver:true,
        viewConfig:{
            scrollOffset:0,
            forceFit:true
        }
    });
    dsTradeGridStore.load({
        callback:function(){
       
        }
    });
    var dsTradeNumLabel=new Ext.form.Label({
        //anchor:"100%",
        html:setFontSize("流水号", 2),
        x:15,
        y:5
    });
    var dsTradeNumField=new Ext.form.TextField({
        //anchor:"98%",
        x:70,
        y:5,
        width:160
    });
    var amountLabel=new Ext.form.Label({
        html:setFontSize("金额", 2),
        x:15,
        y:30
    });
    var amountField=new Ext.form.TextField({
        anchor:"98%",
        x:70,
        y:30,
        width:160
    });
    var accountLabel=new Ext.form.Label({
        html:setFontSize("帐号",2),
        x:15,
        y:55
    });
    var accountField=new Ext.form.TextField({
        anchor:"98%",
        x:70,
        y:55,
        width:160
    });
    var searchDSTradeButton=new Ext.Button({
        anchor:"98%",
        text:setFontSize("查询流水",2),
        x:190,
        y:95
    });
   
    searchDSTradeButton.on("click",function(){
        //loadServerDSTrades();
    });
   
   
   
   
   
    var sourthTradePanel_R=new Ext.Panel({
        title:"请输入凭证信息",
        anchor:"100%",
        width:250,
        height:150,
        layout:"absolute",
        region:"center",
        items:[
               dsTradeNumLabel,amountLabel,dsTradeNumField,amountField,accountLabel,accountField,searchDSTradeButton
               ]
    });
    var sourthTradePanel=new Ext.Panel({
        width:800,
        height:180,
        layout:"border",
        region:"south",
        split:true,
        items:[dsTradeGrid,sourthTradePanel_R]
    });
    var submitButton=new Ext.Button({
        text:setFontSize("提交",2),
        x:700,
        style:{
        marginLeft:'50px'
    },
//        width:300,
//        height:150,
        y:5
    });
    submitButton.on("click",function(){
       
    });
   
    var insertExceptionBillButton=new Ext.Button({
        text:setFontSize("异常处理",2),
    style:{
        marginLeft:'60px'
    },
        x:500,
        y:5
    });
    insertExceptionBillButton.on("click",function(){
       
    });
   
    var gouduiButton=new Ext.Button({
        text:setFontSize("勾对",2),
//        width:300,
//        height:150,
    style:{
        marginLeft:'70px'
    },
        x:600,
        y:5
    });
   
    gouduiButton.on("click",function(){
       
    });
   
   
    //北边按钮面板
    var northButtonPanel=new Ext.Panel({
        width:800,
        height:35,
        layout:"absolute",
        region:"north",
        items:[insertExceptionBillButton,gouduiButton,submitButton]
    });
    //设置面板,及布局
    var ycyhCheckPanel=new Ext.Panel({
        id:"cyp",
        title:"信息核对",
        width:800,
        height:600,
        layout:"border",
        region:"center",
        renderTo:"ycyhCheckPanel",
        items:[northButtonPanel,sourthTradePanel,westVchGridPanel,eastImagePanel]
    });
   
    //设置整个面板的可见区域
    var ycyhCheckViewport=new Ext.Viewport({
        width:800,
        height:600,
        layout:"border",
        items:[ycyhCheckPanel]
    });
    ycyhCheckPanel.getEl().center();
    ycyhCheckPanel.focus();
//    ycyhCheckPanel.render();
   
   
   
});

3：这个专门学的一个grid中的Store类，其实这个才真正是学Ext入手的第一个例子。

    学这个须要作如下步骤：

   （1）：eclipse下建个web工程，在WwebContent下新建个js文件夹用来存放ext的插件。

    （2）：新建个本身用的文件夹，该文件夹下建三个文件分别是：xx.js,xx.jsp,xxx.xml

        其中xx.xml是用来存放数据的，xx.jsp是用来进行展示的，xx.js是用来控制的，这个就有点体现了MVC的思想，OO思想大部分都蕴含着MVC的思想.

      （3）mvc中的内容

            （a）：xx.js的内容

                Ext.onReady(function(){

                var ds=new Ext.data.Store({
                    proxy:new Ext.data.HttpProxy({url:'/tests/extlx/getUserList.xml'}),
                    reader:new Ext.data.XmlReader({
                    record:'item',
                    id:'ID',
                    totalRecords:"recCount"
                    },
                    ['Name','bIsAdministrator','bIsActive','tsDateLastLogin'])
                });
            ds.on('load',function(storeObj,recordList,paramsObj){
                alert('getUserList.xml中的记录加载完毕\n当前取得的记录数:'+storeObj.getCount());
            });
        ds.load({params:{start:0,limit:25}});
    });

        （b）：xx.xml的内容：

            <userList>
    <recCount>99</recCount>
    <item>
    <ID>2350</ID>
    <Name>燚</Name>
    <bisAdministrator>0</bisAdministrator>
    <bIsActive>1</bIsActive>
    <tsDateLastLogin>2007-05-01T14:34:57</tsDateLastLogin>
    </item>
    <item>
    <ID>2351</ID>
    <Name>炎 炎</Name>
    <bisAdministrator>0</bisAdministrator>
    <bIsActive>1</bIsActive>
    <tsDateLastLogin>2007-05-01T14:34:23</tsDateLastLogin>
    </item>
</userList>

(C):xx.jsp

   jsp就是用来引入js脚本的。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    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">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/extjs3.1.1/resources/css/ext-all.css"/>
<script type="text/javascript"
    src="<%=request.getContextPath()%>/js/extjs3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/extjs3.1.1/ext-all.js"></script>

<script type="text/javascript"
    src="<%=request.getContextPath()%>/extlx/extlx.js"></script>
</head>
<body>

</body>
</html>

其实我写的不算是博客，就是想记点东西而已，能对别人有帮助的话，我很开心，没帮助的话 我本身当练习。有问题你们能够多多指教。