Ext使用第一天

    最近工做中用到了Ext,對於剛接觸Ext的我來講簡直就是菜鳥還菜鳥,我問身邊的人Ext怎麼這麼難,他們告訴我叫我多看看Thinking  in  java,呵呵,他們說EXT用的是OO的思想,可是在個人印象中OO.equals("0"),不過也沒我想的那麼遭,Ext並非特難學,多是剛入門的緣由吧,其實Ext整體給個人感受就像JAVA中的SWING,無論是從佈局仍是從他處理的事件給個人整體的感受就是很像,雖然如今大部分的公司都不用SWING了,可是當初學SWING的時候仍是比較感興趣的,可是爲何學Ext就頭大呢,呵呵,無論怎麼樣既然選擇了幹開發那就好好學吧,學了總比沒學的好。不會思想那我就依葫蘆畫瓢吧。今天寫了Ext三個例子。都不較簡單,用的組件式FormPanel和grid。javascript

    1:FormPanelcss

        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');
});html

2:主要是實現佈局,佈局的整體圖:java

   

用的是borderlayout的佈局。實現也很簡單。實現代碼以下:web

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();
   
   
   
});json

3:這個專門學的一個grid中的Store類,其實這個才真正是學Ext入手的第一個例子。mvc

    學這個須要作如下步驟:eclipse

   (1):eclipse下建個web工程,在WwebContent下新建個js文件夾用來存放ext的插件。jsp

    (2):新建個本身用的文件夾,該文件夾下建三個文件分別是:xx.js,xx.jsp,xxx.xmlide

        其中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>

其實我寫的不算是博客,就是想記點東西而已,能對別人有幫助的話,我很開心,沒幫助的話 我本身當練習。有問題你們能夠多多指教。

相關文章
相關標籤/搜索