认识ExtJs的开发包(基础必备)

以下转载自:http://www.cnblogs.com/knowledgesea/p/3597786.html

下载路径:http://www.sencha.com/products/extjs/download/

解压有20多兆,别怕,真正运行的没这么大。认识下这个包的文件结构吧。

 

  • builds目录是ExtJs压缩后的代码,经过压缩后的代码体积小,加载快。
  • docs中是ExtJs文档,包括ExtJs的API,算是开发过程中必备法宝啦吧。
  • examples中是官方的演示实例。
  • locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文,把他引入页面中,会将提示等显示信息自动转化为中文简体。
  • overview是ExtJs的功能简述,其中从整体上阐述啦ExtJs的功能和结构。
  • pkgs中是ExtJs各部分功能的打包文件
  • resource是ExtJs要用到的图片文件与样式表文件,ExtJs引以为傲的漂亮外观就全部由这个目录中的文件所控制。
  • src是未压缩的源代码目录。
  • bootstrap.js是ExtJs库的引导文件,通过参数可以自动切换ext-all.js和ext-all-debyg.js。
  • ext-all.js文件是ExtJs的核心库,是必须要引入的。
  • ext-all-debug.js文件是ext-all.js的调试版,在调试时需要使用的调试版本文件。 

ExtJs命名规范

1.类的命名规范

  • 类名仅可包含字母、数字。数字大多数情况下不推荐使用,除非是在一些技术术语中。不要使用中划线、下划线等非字符
    MyCompany.useful_util.Debug_Toolbar //不要使用下划线 
    MyCompany.util.Base64 //技术术语可以包含数字
     
  • 类应该通过正确命名的“包(Packages)”来组织。最小包情况时,类名应该紧随最顶层的“名字空间(Namespace)”:

    MyCompany.data.CoolProxy //“包”通过“.”来组织 
    MyCompany.Application //最小包情况 
  • 最顶层的“名字空间(Namespaces)”和“类名(ClassNames)”应该使用“驼峰命名法(CamelCased)”,其他都是用小写字母:

    MyCompany.form.action.AutoLoad 
  • 非Sencha官方发布的类,不要使用“Ext”作为最顶层名字空间。

  • 缩写词也要遵守“驼峰命名法(CamelCased)” :

    Ext.data.JSONProxy 替换为Ext.data.JsonProxy 
    
    MyCompary.parser.HTMLParser 替换为 MyCompany.util.HtmlParser 
    
    MyCompany.server.HTTP 替换为MyCompany.server.Http 

 2、源文件的命名规则

  • 类名直接映射到文件存储路径,每个类一个文件:
     Ext.util.Observable 存储在 path/to/src/Ext/util/Observable.js 
    
    Ext.form.action.Submit 存储在 path/to/src/Ext/form/action/Submit.js 
    
    MyOrg.chart.axis.Numeric 存储在 path/to/src/MyOrg/chart/axis/Numeric.js  

3、方法和变量的命名规则 

  • 方法和变量命名同类一样,仅可包含字母、数字。数字大多数情况下不推荐使用,除非是在一些技术术语中。不要使用中划线、下划线等非字符; 
  • 方法和变量命名应该使用“驼峰命名法(CamelCased)”,缩写词也一样;
    复制代码
    encodeUsingMd5() //技术术语可以包含数字 
    
    getHTML()  //替换为getHtml() 
    
    getJSONResponse()   //替换为getJsonResponse()  
    
    parseXMLContent()   //替换为parseXmlContent()
    
    var isGoodName
    var base64Encoder //技术术语可以包含数字
    var xmlReader 
    var httpServer 
    复制代码

4、属性的命名规则 

  • 非静态的类属性命名规则同上;

  • 静态的类属性命名全部使用大写字母:

EXT基本方法、属性(onReady、define、create) 

onReady:只有在Ext框架全部加载完后才能在客户端的代码中使用Ext,而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后,所要执行的函数。 

调用onReady方法时可以带三个参数, 
 
第一个参数是必须的,表示要执行的函数或匿名函数,
 
第二参数表示函数的作用域,
 
第三个参数表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可。 
复制代码
<script type="text/javascript">
        function sayHellow() {
            alert("hi , everyone !");  //可执行
            Ext.Msg.alert("title", "hi , everyone !");  //报错,关于呈现Ext元素组件的都只能在onReady中执行。
        }
         sayHellow()
        // Ext.onReady(sayHellow);   
    </script> 
复制代码

define:创建类,可以继承其他类,也可以被继承

复制代码
Ext.onReady(function () {
            //创建一个类,类名:TextClass,具有两个属性:A、B
            Ext.define('TextClass', {
                A: 'a',
                B: 'b'
            });
            //实例化类
            var textClass = new TextClass();
            //输出属性名
            Ext.Msg.alert('类属性', textClass.A + " " + textClass.B);  //textClass.A结果为a,textClass.B结果为b
        }); 
复制代码
复制代码
Ext.onReady(function () {
            //创建一个类,类名:TextClass,具有两个属性:A、B
            Ext.define('TextClass', {
                A: 'a',
                B: 'b'
            });
            //创建一个类,继承TextClass
            Ext.define("TextClass2", {
                extend: 'TextClass', //继承TextClass
                C: 'c'//TextClass2特有的属性
            })
            var textClass2 = new TextClass2();
            Ext.Msg.alert("TextClass2属性", textClass2.A + " " + textClass2.B + " " + textClass2.C)  //输出结果为 a b c
        }); 
复制代码

create :实例化类,在EXTJS4中建议用create方法实例化类

复制代码
 Ext.onReady(function () {
            //创建一个类,类名:TextClass,具有两个属性:A、B
            Ext.define('TextClass', {
                A: 'a',
                B: 'b'
            });

            var textClass = Ext.create("TextClass")

            Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B)  //输出结果为 a b
        });  
复制代码

EXT基本方法、属性(apply、applyIf、constructor)

ExtJS面向对象 这文中有介绍。 

复制代码
 Ext.onReady(function () {
             //创建一个类,类名:TextClass,具有两个属性:A、B
             Ext.define('TextClass', {
                 A: 'a',
                 B: 'b',
                 constructor: function (o) {
                     //复制o中的所有属性到自身
                     Ext.apply(this, o);
                 }
             });

             var textClass = Ext.create("TextClass", {
                 A: 'A',
                 B: 'B',
                 C: 'C'
             })

             Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B + ' ' + textClass.C)  //显示 : A B C
         }); 
复制代码
复制代码
Ext.onReady(function () {
             //创建一个类,类名:TextClass,具有两个属性:A、B
             Ext.define('TextClass', {
                 A: 'a',
                 B: 'b',
                 constructor: function (o) {
                     //复制o中的所有属性到自身,如果类中存在同名属性,就不复制
                     Ext.applyIf(this, o);
                 }
             });

             var textClass = Ext.create("TextClass", {
                 A: 'A',
                 B: 'B',
                 C: 'C'
             })

             Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B + ' ' + textClass.C)  //显示 a b C
         });  
复制代码

EXT基本方法、属性(mixins、statics、config、require)

mixins类似于面向对象中的多继承

复制代码
Ext.onReady(function () {
             //创建一个类,类名:TextClass,具有两个属性:A、B
             Ext.define('TextClass', {
                 A: 'a',
                 B: 'b'
             });
             //创建一个类,类名:TextClass,具有两个属性:A、B
             Ext.define('TextClass2', {
                 C: 'c',
                 write: function () {
                     alert('A:' + this.A + ';B:' + this.B + ';C:' + this.C)   
                 }
             })
             Ext.define('TextClass3', {
                 //继承TextClass、TextClass2
                 mixins: {
                     TextClass: 'TextClass',
                     TextClass2: 'TextClass2'
                 }
             })
             var textClass = Ext.create("TextClass3")
             textClass.write();   //显示结果:A:a;B:b;C:c

         });  
复制代码

statics定义静态变量

复制代码
Ext.onReady(function () {
             //创建一个类,类名:TextClass,具有两个属性:A、B
             Ext.define('TextClass', {
                 A: 'a',
                 B: 'b',
                 statics: {
                     C: 'C'
                 }
             });
             //没有实例化TextClass类
             Ext.Msg.alert('TextClass类的静态属性C的值是:', TextClass.C)   //显示结果:C
         }); 
复制代码

config:属性包装器,为属性提供get和set方法 

复制代码
Ext.onReady(function () {
             //创建一个类,类名:TextClass,具有两个属性:A、B
             Ext.define('TextClass', {
                 A: 'a',
                 B: 'b',
                 statics: {
                     C: 'C'
                 },
                 config: {
                     configProperty: 'how can i get this property'

                 }
             });
             var textClass = Ext.create('TextClass');
             //通过set方法设置属性的值,注意,包装器会把属性的头字母大写
             textClass.setConfigProperty("set this property's value");
             //通过get方法展示属性值
             Ext.Msg.alert('configProperty属性的值是:', textClass.getConfigProperty());  //显示结果:set this property's value
         });  
复制代码

require:动态加载js文件,这个页面需要用到哪些组件,然后就预先加载,多余不用加载的组件就不管他.提高运行速度.一般写在脚本开始的地方。

Ext.require([
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.layout.container.Border'
]); 

EXT对象选择

Ext对象分为3种:htm控件,EXTJS元素,EXTJS组件(html控件--封装-->ExtJs元素--封装-->extjs组件)

  •  选择html控件:Ext.getDom(对象的ID)
  •   选择EXT元素:Ext.get(对象的ID)     
  •  选择EXT组件:Ext.getCmp(对象的ID) 

1、Ext.getDom和Ext.get方法

复制代码
<html>
<head>
    <title>Index</title>
    <link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Extjs4/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //通过Ext.get方法获取第一个文本框对象,返回的是Ext元素
            Ext.get("text1").set({
                value: 'Ext.get方法获取的Ext元素'
            });
            //通过Ext.getDom方法获取第二个文本框对象,返回的是html控件
            Ext.getDom("text2").value = "Ext.getDom方法获取的html控件";
            //通过Ext.get方法获取第三个文本框对象,返回的是Ext元素,通过Ext元素的dom属性,返回html控件
            //注:通过EXT元素的dom属性,可以将EXT元素转换为对应的html控件
            Ext.get("text3").dom.value = "Ext.get方法获取的Ext元素,通过dom属性转化为html控件"
        });

    </script>
</head>
<body>
    <div id="Ext4-Panel">
        输入框1:<input type="text" id="text1" style="width:400px"/><br />
        输入框2:<input type="text" id="text2" style="width:400px"/><br />
        输入框3:<input type="text" id="text3" style="width:400px"/><br />
        <input type="button" id="show" value="展示选择结果" />
    </div>
</body>
</html> 
复制代码

2、Ext.getCmp方法

复制代码
<html>
<head>
    <title>Index</title>
    <link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Extjs4/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //创建一个panel
            Ext.create("Ext.panel.Panel", {
                //id
                id: 'myPanel',
                //标题
                title: 'Ext的panel组件',
                //渲染到id为“ExtComponent”的<div>标签
                renderTo: 'ExtComponent',
                //
                width: 300,
                //
                height: 300
            })
            setTimeout('Ext.getCmp("myPanel").setTitle("使用getCmp获取组件")', 5000);   //5秒后标题变为:“使用getCmp获取组件”            
        });

    </script>
</head>
<body>
   <div id="ExtComponent">   
   </div>
</body>
</html> 
复制代码

 3、通过CSS语法选择EXT组件

复制代码
<html>
<head>
    <title>Index</title>
    <link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Extjs4/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //创建一个panel
            Ext.create("Ext.panel.Panel", {
                //标题
                title: '第一个panel',
                //渲染到id为“myPanel1”的<div>标签
                renderTo: 'myPanel1',
                //
                width: 300,
                //
                height: 100,
                items: [{
                    //这个panel包含一个textfield组件
                    xtype: 'textfield',
                    name: 'name',
                    fieldLabel: 'Name'
                }, {
                    //这个panel包含一个textfield组件
                    xtype: 'textfield',
                    name: 'age',
                    fieldLabel: 'Age'
                }]
            })
            //创建一个panel
            Ext.create("Ext.panel.Panel", {
                title: '第二个panel',
                renderTo: 'myPanel2',
                width: 300,
                height: 150,
                items: [{
                    //这个panel包含另一个panel
                    xtype: 'panel',
                    height: '50',
                    items: [{
                        //被包含的panel包含一个textfield组件
                        xtype: 'textfield',
                        name: 'telephone',
                        fieldLabel: 'Telephone'
                    }]
                }, {
                    //这个panel包含一个textfield组件
                    xtype: 'textfield',
                    name: 'address',
                    fieldLabel: 'address'
                }]
            })

            var one = Ext.ComponentQuery.query("panel [title=第一个panel]")[0].title;
            //Ext.Msg.alert("Title", one); //显示结果 : 第一个panel
            Ext.ComponentQuery.query("textfield")[0].value = "123";
            var two = Ext.ComponentQuery.query("textfield")[2].name;
            //第一个textfield组件并不是标题为name的那个文本框(第三个才是),
            //这是应为EXT框架会根据需要自动生成一些组件,所以在选择特定组件的时候,最好不要通过索引,而是通过特定的属性
            //Ext.Msg.alert("Title", two); //显示结果 : name
            var three = Ext.ComponentQuery.query('textfield[name=name]')[0].name;
            Ext.Msg.alert("Title", three); //显示结果 : name
            //获取标题为“第二个panel”的panel组件下面的所有textfiled组件
            Ext.ComponentQuery.query('panel[title=第二个panel] textfield')
            //获取标题为“第二个panel”的panel组件下一层的所有textfiled组件
            Ext.ComponentQuery.query('panel[title=第二个panel]>textfield')

        });
    </script>
</head>
<body>
    <div id="myPanel1">
    </div>
    <div id="myPanel2">
    </div>
</body>
</html> 
复制代码

4、up、down、child方法

up:根据CSS语法获取当前组件上层的控件,如果有多个符合条件,只返回第一个

down:根据CSS语法获取当前组件下层的控件,如果有多个符合条件,只返回第一个

child:根据CSS语法获取当前组件下一层的控件,如果有多个符合条件,只返回第一个

up方法: 

            //获取属性name为telephone的textfield组件
            var t = Ext.ComponentQuery.query("textfield[name=telephone]")[0]
            //获取组件t上面的第一个panel组件
            t.up("panel");

 child方法:

            //获取属性title为"第二个panel"的panel组件
            var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0]
            //获取组件t下面一层的属性name为“address”的textfield组件
            t.child("textfield[name=address]");

 down方法:

            //获取属性title为"第二个panel"的panel组件
            var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0]
            //获取组件t下面一层的属性name为“address”的textfield组件
            //注意,用child方法时无法取到了,因为child方法只能取组件t下面一层的控件
            t.down("textfield[name=telephone]");
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Extjs Lib Extjs Lib Extjs Lib Extjs Lib extjs库存管理数据库脚本 --创建数据库 create database GCCargoManage on primary( name='cargoManage_data', fileName='E:\DBBase\GCCargoManage.mdf', size=10MB, filegrowth=10% ) log on( name='cargoManage_log', fileName='E:\DBBase\GCCargoManage.ldf', size=1MB, maxsize=20MB, filegrowth=10% ) go use GCCargoManage go -- 一.系统管理模块(1.系统用户表 2.短信信息表 3.系统配置表) create table systemUsers( --1.系统用户表 id int identity(1,1) primary key, --id loginName varchar(20) not null, --登录名 password varchar(20) not null, --密码 userName varchar(20), --用户姓名 position varchar(20), --职位 grade int, --级别 0:管理员,1:普通 status int, --启用状态 0停用,1启用 createDate datetime, --创建时间 ) go create table shortMessage( --2.短信信息表 id int identity(1,1) primary key, --id mobile varchar(20) not null, --接收号码 com int, --端口号(1,2.....) content varchar(255), --发送内容 status int, --发送状态 appointSendDate datetime, --定制发送时间 realitySendDate datetime, --实际发送时间 receiveName varchar(20), --接收人姓名 ) go create table systemConfiguration( --3.系统配置表 id int identity(1,1) primary key , --id manageFee money, --管理费 electricityFee money, --电度费用 waterFee money, --水吨费用 shortMessageSendDate int --短信发送时间 //改hzw ) go -- 二.档口管理(1. 档口数据表, 2. 档口用户数据结构, 3. 档口与用户关系表结构, 4.档口详细费用表, 5.档口费用表 ) create table shop( --1. 档口数据表 id int identity primary key, --id shopCode varchar(20) not null, --区域棚号(档口号) area varchar(20), --区域(A区B区) shopRent money, --档口租金 remark varchar(255), --备注 status int , --启用状态(0停用,1启用) createDate dateTime, --创建时间 updateDate dateTime, --修改时间 ) go create table shopUser( --2. 档口用户数据结构 id int identity(1,1) primary key, --id userName varchar(50), --用户名称 tel varchar(20), --用户电话 email varchar(50), --Email prepareMoney money, --预交金额 remark varchar(255), --备注 status int , --启用状态(0停用,1启用(默认)) createDate datetime , --创建时间 updateDate datetime, --修改时间 ) go create table shopInUser( --3.档口与用户关系表结构 id int identity primary key , --ID shopId int, --档口ID shopUserId int, --用户ID extractMoney money, --佣金率(提成) cooperation int , --是否合作(0否 1是) mainBusiness varchar(200), --主要业务 rentMoney money, --租金 sendRentDate dateTime, --租赁开始时间 endRentDate dateTime, --租赁结束时间 remark varchar(255), --备注 status int , --启用状态 createDate dateTime, --创建时间 updateDate dateTime, --修改时间 ) go create table shopDetailCost( --4.档口详细费用表 id int identity(1,1) primary key, --ID shopId int , --档口ID shopUserId int, --用户ID lastMonthWaterMeter int, --上月水表数 thisMonthWaterMeter int, --本月水表数 thisMonthWaterMoney money, --本月水费 lastMonthElectricityMeter int, --上月电表数 thisMonthElectricityMeter int, --本月电表数 thisMonthElectricityMoney money, --本月电费 createDate datetime, --录入时间 systemUserId int , --录入人(外键ID) date varchar(20), --所属日期(如2011-01) ) go create table shopSumCost( --5.档口总费用表 id int identity(1,1) primary key, --id shopId int , --档口ID shopUserId int, --用户ID sumMoney money, --总费用(租金+管理费+水,电费) remark varchar(255), --备注 status int, --状态(是否扣除) shortMessageStatus int, --是否已发送短信 createDate dateTime, --录入时间 systemUserId int , --录入人(外键ID) ) go --三. 货物管理(1. 进货单表, 2. 进货单详细表, 3. 出货单表, 4.出货单详细表) create table enterCargo( --1. 进货单表 id int identity(1,1) primary key, --id code varchar(255) not null, --实际流水号(现实收据单号) shopId int , --档口ID shopUserId int, --用户ID remark varchar(255), --备注 createDate dateTime, --创建时间 updateDate dateTime, --修改时间 ) go create table detailEnterCargo( --2. 进货单详细表 id int identity(1,1) primary key, --id enterCargoId int , --进货单ID(外键) variety varchar(255), --品种 unit varchar(20), --单位 number int, --数量 remark varchar(255), --备注 createDate dateTime, --创建时间 ) go create table outCargo( id int identity(1,1) primary key, --id realityCode varchar(255), shopId int , --档口ID shopUserId int, --用户ID supplierTel varchar(20), --供应商电话 purchaseName varchar(20), --采购商名称 purchaseTel varchar(20), --采购商电话 purchaseAddress varchar(255), --采购商地址 businessWay int , --付款方式 advanceMoney money, --定金 remainingMoney money, --余额 sumMoney money, --总金额 freight money, --运费 remark varchar(255), --备注 createDate dateTime, --创建时间 updateDate dateTime, --修改时间 ) go create table detailOutCargo( --4.出货单详细表 id int identity(1,1) primary key, --id outCargoId int, --出货单ID inventoryId int, --库存表ID(外键) number int , --出售数量 extractMoney money, --佣金率(提成) remark varchar(255), --备注 createDate dateTime, --创建时间 ) --四. 库存管理(1. 库存表) create table inventory( id int identity(1,1) primary key, --id shopUserId int, --档口用户ID(外键) varietyName varchar(255), --品种名称 specification varchar(255), --规格 unit varchar(255), --单位 number int , --数量(库存数量) remark varchar(255), --备注 reserveFiled1 varchar(255), --备用字段1 reserveFiled2 varchar(255), --备用字段2 reserveFiled3 varchar(255), --备用字段3 ) go --五.系统日志(1. 系统记录表) create table sysLog( id int identity(1,1) primary key, --id systemUserId int, --操作者ID content varchar(255), --操作记录(内容) date dateTime, --操作时间 ) go
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值