文档章节

Ext使用第一天

 燚想天开
发布于 2012/08/03 16:33
字数 1559
阅读 793
收藏 3
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>

其实我写的不算是博客,就是想记点东西而已,能对别人有帮助的话,我很开心,没帮助的话 我自己当练习。有问题大家可以多多指教。

 

 

© 著作权归作者所有

上一篇: DB2第一天
下一篇: JNI --&-- JNA
粉丝 0
博文 7
码字总数 5961
作品 0
昌平
私信 提问
加载中

评论(2)

燚想天开 博主
你学的怎么样啦。
张和祥
张和祥
刚开始学Ext,与君共勉!
《Ext JS模板与组件基本知识框架图----模板》

最近在整理Ext JS的模板和组件,在参考《Ext JS权威指南》,《Ext JS Web应用程序开发指南》,《Ext JS API》等相关书籍后才写下这篇《Ext JS模板与组件基本知识思维导图》,由于篇幅较长,所...

yaohong
2016/12/16
0
0
mysql中DATE_FORMAT()和str_to_date() 、to_days

定义和用法 DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据。 语法 DATE_FORMAT(date,format) date 参数是合法的日期。format 规定日期/时间的输出格式。 可以使用的格式有: 格式 描...

huluobotx
2015/09/24
1K
0
Mysql sql输出的时间转换

DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据。 format参数的格式有 %a 缩写星期名 %b 缩写月名 %c 月,数值 %D 带有英文前缀的月中的天 %d 月的天,数值(00-31) %e 月的天,数值(...

Code辉
2018/07/06
33
0
mysql DATE_FORMAT(date,format) 函数

今天遇到了使用 mysql dateformate(date,formate) 函数,摘录一下,希望对你有用。更为详细的解说,可以参考 这里 date 参数是合法的日期。format 规定日期/时间的输出格式。...

peiquan
2018/07/04
0
0
mysql中DATE_FORMAT用法根据时间按周、月、年等查询

定义和用法 DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据。 语法 DATE_FORMAT(date,format) date 参数是合法的日期。format 规定日期/时间的输出格式。 可以使用的格式有: 格式 描...

LCZ777
2016/09/09
141
0

没有更多内容

加载失败,请刷新页面

加载更多

75、GridFS

GridFS是MongoDB提供的用于持久化存储文件的模块,CMS使用Mongo DB存储数据,使用FGridFS可以快速集成开发。 工作原理: 在GridFS存储文件是将文件分块存储,文件会按照256KB的大小分割成多个...

lianbang_W
33分钟前
4
0
js bind 绑定this指向

本文转载于:专业的前端网站➱js bind 绑定this指向 1、示例代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>bind函数绑定this指向......

前端老手
36分钟前
4
0
CentOS Linux 7上将ISO映像文件写成可启动U盘

如今,电脑基本上都支持U盘启动,所以,可以将ISO文件写到U盘上,用来启动并安装操作系统。 我想将一个CentOS Linux 7的ISO映像文件写到U盘上,在CentOS Linux 7操作系统上,执行如下命令: ...

大别阿郎
43分钟前
4
0
深入vue-公司分享ppt

组件注册 全局注册 注册组件,传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({/*...*/})) 注册组件,传入一个选项对象(自动调用Vue.extend) Vue.component('my-comp...

莫西摩西
44分钟前
3
0
gitlab重置管理员密码

登录gitlab服务器 [root@localhost bin]# sudo gitlab-rails console productionLoading production environment (Rails 5.2.3)irb(main):001:0> u = User.where(email: 'admin@example.co......

King华仔o0
54分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部