ExtJS 基础学习-1

来源：互联网发布：慈溪行知职高家在逍林编辑：程序博客网时间：2024/06/06 00:28

1.Ext.onReady() 相当于Java中的main()，js代码在此运行

Ext.onReady(function() {    //代码区}

2.Ext.each( )
Ext.each方法表示迭代一个数组，数组中每个成员都将调用一次所传函数，直到函数返回false才停止执行。如果传递的数组并非一个真正的数组，所传递的函数只调用它一次。
Ext.each( Array/NodeList/Mixed array, Function fn, Object scope)

3.Ext.data.Record构造器是提供JSON对象的映射

var custRecord = new Ext.data.Record.create([{name: 'custNum', mapping: 'CUST_NUM'},    ...]);

name : 在记录中标志一个字段的名字,它通常用于引用指定字段
mapping : 当在Ext.data.Reader中创建记录时，如何将json对象中指定属性值映射到此字段。

var custReader = new Ext.data.JsonReader({ // 读取json数据的Reader   idProperties : 'custId',    root : 'json.data'    }, custRecord);

idProperties : 该属性是指定每一个行对象中究竟哪一个是记录的ID字段
root : 该属性是指定包含所有行对象的数组

4.创建表单面板FormPanel

var infoForm = new Ext.FormPanel( {    autoHeight:true,            //是否自动高度    autoWidth :true,            //是否自动宽度    height : 600,               //面板高度    width: '99%',               //面板宽度    frame : true,                   autoScroll : true,           //是否有滚动条    title : "客户经理统一视图",    //面板标题    items : [{                   //面板内包含的子项            layout : 'column',   //column布局            items : [{                  columnWidth : .50,          //列宽                xtype : 'fieldset',         //xtype类型                title : '客户管理',          //子项标题                collapsible : false,        //是否可折叠                height:900,                labelWidth : 120,          //标签宽度                bodyStyle: {padding: '0,5px,0,5px'},                items : [{                    layout : 'form',                    items : [{                        xtype : 'textfield',                        fieldLabel : '客户总数',                        readOnly : true,    //是否只读                        name : 'custNum',   //对应上面映射                        value:'0',          //没有查到数据时的默认值                        labelStyle : 'text-align:right;',                                            //样式:文字对齐方式                        anchor : '70%'                     },{                        xtype : 'textfield',                        fieldLabel : '零售客户数',                        readOnly : true,                        value:'0',                        name : 'perCustNum',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },,{                        xtype : 'textfield',                        fieldLabel : '私人银行客户数',                        readOnly : true,                        name : 'pbCustCnt',                        value:'0',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '高净值客户数',                        readOnly : true,                        name : 'perHiCustCnt',                        value:'0',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '优质客户数',                        readOnly : true,                        value:'0',                        name : 'perQtCustCnt',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '潜力客户数',                        readOnly : true,                        value:'0',                        name : 'perPtlCustCnt',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '普通客户数',                        readOnly : true,                        name : 'perNlCustCnt',                        value:'0',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '对公客户数',                        readOnly : true,                        name : 'comCustNum',                        value:'0',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '高端客户数',                        readOnly : true,                        value:'0',                        name : 'comHiCustCnt',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '优质客户数',                        readOnly : true,                        value:'0',                        name : 'comQtCustCnt',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '中端客户数',                        readOnly : true,                        value:'0',                        name : 'comMdCustCnt',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    },{                        xtype : 'textfield',                        fieldLabel : '普通客户数',                        readOnly : true,                        value:'0',                        name : 'comNlCustCnt',                        labelStyle : 'text-align:right;',                        anchor : '70%'                    }]                }]            },{                    columnWidth : .50,                    xtype : 'fieldset',                    title : '存款业绩',                    collapsible : false,                    height:330,                                 labelWidth : 120,                    bodyStyle: {padding: '0,5px,0,5px'},                    items : [{                        layout : 'form',                        items : [{                            xtype : 'textfield',                            fieldLabel : '存款账户数',                            readOnly : true,                            name : 'deptAcctNum',                            value:'0',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '存款账户时点余额',                            readOnly : true,                            value:'￥0.00',                            name : 'deptBalSum',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '存款账户月日均',                            readOnly : true,                            value:'￥0.00',                            name : 'deptMAvgBal',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '存款账户年日均',                            readOnly : true,                            name : 'deptYAvgBal',                            value:'￥0.00',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '对公存款账户时点',                            readOnly : true,                            name : 'comBalSum',                            value:'￥0.00',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '对公存款账户月日均',                            readOnly : true,                            value:'￥0.00',                            name : 'comDeptMAvgBal',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '对公存款账户年日均',                            readOnly : true,                            value:'￥0.00',                            name : 'comDeptYAvgBal',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '个人存款账户时点',                            readOnly : true,                            name : 'perBalSum',                            value:'￥0.00',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '个人存款账户月日均',                            readOnly : true,                            name : 'perDeptMAvgBal',                            value:'￥0.00',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        },{                            xtype : 'textfield',                            fieldLabel : '个人存款账户年日均',                            readOnly : true,                            value:'￥0.00',                            name : 'perDeptYAvgBal',                            labelStyle : 'text-align:right;',                            anchor : '70%'                        }]                    }],                     buttons : [{             //创建按钮                        text : '<font color="red">点击查看贷款业绩详情</font>',                                         hidden: false,       //是否隐藏按钮                        handler: function(){ //按钮的功能                        var url=basepath+'/contents/pages           /performanceDistributeManage/performanceSearch.jsp'                        parent.booter.indexLocate(212,url);     } }]});

frame
如果为true，panel具有全部阴影，即panel的整个body区域全部填充背景，否则只在四周渲染一个1像素的边框(默认值为 false)。
bodyStyle
1px，2px，3px，4px是指当前容器的body区域的内补丁，分别是上边1px，右边2px，下边3px，左边4px，body区域是paenl中的内容和边框中间的距离。
ancho
一般与布局column一起使用，以文本组件为例：columnWidth的值乘以anchor的值，即为本组件所占的长度。anchor不可与设置长度的属性width同时出现，否则，width属性无效。

5.请求的代码

Ext.Ajax.request({              //异步请求url : basepath+ '/custMgrCustView-Action.json',   //要请求的路径    method : 'GET',             //请求的方式    success :function(response){//success : 服务器处理成功返回的情况             if(custReader.readRecords(Ext.util.JSON.decode(response.responseText)).totalRecords > 0){        var datas = custReader.readRecords(Ext.util.JSON.decode(response.responseText)).records[0].data;        for(var itm in datas){            if(infoForm.getForm().findField(itm)){                              infoForm.getForm().findField(itm).setValue(datas[itm]);        }     }}else{        Ext.MessageBox.alert("提示信息","没有相关数据！");    }}

6.Viewport容器

var viewport = new Ext.Viewport({        //新建Viewport容器    layout : 'fit',                      //使用fit布局    autoScroll : true,                   //是否设置自动滚动条    items : [{ items : [infoForm]    }]});

案例示意图

案例示意图

7.xtype详解
xtype就是一个代表类（Class）的标识名字，xtype可作为Ext控件的简写，都会对应一个Ext控件。可以自定义这个xtype，通过自定义的Ext控件来绑定，由Ext.reg方法去注册xtype。我们在使用 ExtJs 创建组件时可以使用
new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120})；
还可以直接用 xtype的对象形式来创建组件，比如在面板的 items 属性中，尤其是多个组件或需要写许多的 ExtJs 相关代码时，推荐使用xtype。两种形式的写法如下：

items: [new Ext.form.TextField({fieldLabel:'姓名', id:'name', width:120}),new Ext.form.TextField({fieldLabel:'密码', id:'passwd', inputType:'password', width:120}),new Ext.form.DateField({fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120})]

替换成用 xtype 写法就如下(可以免去很多的 new …)

items: [{xtype:'textfield', fieldLabel:'姓名', id:'name', width:120},{xtype:'textfield', fieldLabel:'密码', id:'passwd', inputType:'password', width:120},{xtype:'datefield', fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120}]

xtype 与组件的对应关系

基本组件： xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton 带下拉选项菜单的按钮 buttongroup Ext.ButtonGroup 编组按钮(Since 3.0) slider Ext.Slider 滑动条 progress Ext.ProgressBar 进度条 statusbar Ext.StatusBar 状态条 colorpalette Ext.ColorPalette 调色板 datepicker Ext.DatePicker 日期选择面板容器及数据类组件 xtype Class 描述 window Ext.Window 窗口 viewport Ext.ViewPort 视口，即浏览器的视口，能随之伸缩 box Ext.BoxComponent 盒子组件，相当于一个

component Ext.Component 组件 container Ext.Container 容器 panel Ext.Panel 面板 tabpanel Ext.TabPanel 选项面板 treepanel Ext.tree.TreePanel 树型面板 flash Ext.FlashComponent 显示 Flash 的组件 grid Ext.grid.GridPanel 表格 editorgrid Ext.grid.EditorGridPanel 可编辑的表格 propertygrid Ext.grid.PropertyGrid 属性表格 editor Ext.Editor 编辑器 dataview Ext.DataView 数据显示视图 listview Ext.ListView 列表视图工具栏组件： xtype Class 描述 paging Ext.PagingToolbar 分页工具条 toolbar Ext.Toolbar 工具栏 tbbutton Ext.Toolbar.Button 工具栏按钮 tbfill Ext.Toolbar.Fill 工具栏填充区 tbitem Ext.Toolbar.Item 工具条项目 tbseparator Ext.Toolbar.Separator 工具栏分隔符 tbspacer Ext.Toolbar.Spacer 工具栏空白 tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮 tbtext Ext.Toolbar.TextItem 工具栏文本项菜单组件： xtype Class 描述 menu Ext.menu.Menu 菜单 colormenu Ext.menu.ColorMenu 颜色选择菜单 datemenu Ext.menu.DateMenu 日期选择菜单 menubaseitem BaseItem menucheckitem Ext.menu.CheckItem 选项菜单项 menuitem Ext.menu.Item menuseparator Ext.menu.Separator 菜单分隔线 menutextitem Ext.menu.TextItem 文本菜单项
表单及表单域组件： xtype Class 描述 form Ext.FormPanel/Ext.form.FormPanel 表单面板 checkbox Ext.form.Checkbox 多选框 combo Ext.form.ComboBox 下拉框 datefield Ext.form.DateField 日期选择项 timefield Ext.form.TimeField 时间录入项 field Ext.form.Field 表单字段 fieldset Ext.form.FieldSet 表单字段组 hidden Ext.form.Hidden 表单隐藏域 htmleditor Ext.form.HtmlEditor HTML 编辑器 label Ext.form.Label 标签 numberfield Ext.form.NumberField 数字编辑器 radio Ext.form.Radio 单选按钮 textarea Ext.form.TextArea 多行文本框 textfield Ext.form.TextField 表单文本框 trigger Ext.form.TriggerField 触发录入项 checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2) displayfield Ext.form.DisplayField 仅显示，不校验/不被提交的文本框 radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2) 图表组件： xtype Class 描述 chart Ext.chart.Chart 图表组件 barchart Ext.chart.BarChart 柱状图 cartsianchart Ext.chart.CartesianChart columnchart Ext.chart.ColumnChart linechart Ext.chart.LineChart 连线图 piechart Ext.chart.PieChart 扇形图数据集 Store： xtype Class 描述 arraystore Ext.data.ArrayStore directstore Ext.data.DirectStore groupingstore Ext.data.GroupingStore jsonstore Ext.data.JsonStore simplestore Ext.data.SimpleStore store Ext.data.Store xmlstore Ext.data.XmlStore

xtype参考文献：http://www.studyofnet.com/news/135.html

8.常用布局layout详解
1. 常用布局
(1)ContainerLayout：默认布局方式，其他布局继承该类进行扩展功能。
显示：将内部组件以垂直方式叠加。如下所示：
组件一…..
组件二…..

(2)FormLayout：产生类似表单的外观。
显示：将内部组件以垂直方式叠加。

(3)ColumnLayout：将组件以水平方式放置。如下所示
组件一[第一列] 组件二[第二列] 组件三[第三列]

(4)BorderLayout：有五个位置，即上、下、左、右、中，开发的时候经常用来做后台框架的布局，如下所示：

上左中右下

(5)AccordionLayout：手风琴布局，可以折叠的布局。开发的时候常用来对左侧的功能列表进行分类，如下图所示：
折叠状态—
展开状态[包含内容一和二]—
内容一–
内容二–
折叠状态—

(6)FitLayout：强迫子组件填充满容器布局。

(7)TableLayout：表格布局，含有行与列的概念。

2.实例
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <!--ExtJs框架开始-->    <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>    <script type="text/javascript" src="/Ext/ext-all.js"></script><script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>    <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />    <!--ExtJs框架结束-->    <script type="text/javascript">        Ext.onReady(function () {            //------ContainerLayout开始------//            var box1 = new Ext.BoxComponent({                autoEl: {                    tag: 'div',                    style:'background:red;                           width:300px;                           height:30px',                    html: 'box1'                }            });            var box2 = new Ext.BoxComponent({                autoEl: {                    tag: 'div',                    style: 'background:yellow;                            width:300px;                            height:30px',                    html: 'box2'                }            });            var box3 = new Ext.BoxComponent({                autoEl: {                    tag: 'div',                    style: 'background:blue;                            height:30px;                            color:#fff',                    html: 'box3'                }            });            var containerlayout = new Ext.Container({                layout: 'form',                items: [box1, box2, box3],                renderTo: 'ContainerLayout'            });            //------ContainerLayout结束-----//            //------FormLayout开始------//            var formlayout = new Ext.Panel({                title: 'FormLayout',                layout: 'form',                items: [                new Ext.form.TextField({ fieldLabel: '用户名' }),                new Ext.form.TextField({ fieldLabel: '密码' }),                new Ext.form.TextField({ fieldLabel: '重复密码' })                ],                renderTo: 'FormLayout'            });            //------FormLayout结束------//            //------ColumnLayout开始------//            var ColumnLayout = new Ext.Panel({                width: 600,                title: 'ColumnLayout',                layout: 'column',                items: [                    new Ext.form.FormPanel({                         title: '第一列',                         labelWidth: 50,                         items: [                        new Ext.form.TextField({                         fieldLabel: '用户名' })]                    }),                        title: '第二列',                         labelWidth: 50,                         items: [                        new Ext.form.TextField({                        fieldLabel: '密码' })]                    }),                    new Ext.form.FormPanel({                         title: '第三列',                         labelWidth: 80,                         items: [                         new Ext.form.TextField({                         fieldLabel: '重复密码' })]                    })                ],                renderTo: 'ColumnLayout'            });            //------ColumnLayout结束------//            //------BorderLayout开始------//            var BorderLayout = new Ext.Panel({                title: 'BorderLayout',                layout: 'border',                width: 1100,                height: 300,                items: [                    new Ext.Panel({                         title: '上北',                        html: '可以放个logo什么的' }),                    new Ext.Panel({                         title: '下南',                         region: 'south',                        html: '版权信息？',                        autoEl: 'center' }),                    new Ext.Panel({                        title: '中间',                        region: 'center',                        html: '主面板' }),                    new Ext.Panel({                        title: '左东',                        html: '树型菜单或是手风琴' }),                    new Ext.Panel({                        title: '右西',                        region: 'east',                        html: '常用功能或是去掉？' })                ],                renderTo: 'BorderLayout'            });            //------BorderLayout结束------//            //------AccordionLayout开始------//            var AccordionLayout = new Ext.Panel({                title: 'AccordionLayout',                layout: 'accordion',                height: 200,                items: [                    new Ext.Panel({                    title: '用户管理',                    new Ext.BoxComponent({                    autoEl: {                        tag: 'div',                        html: '用户管理'                    } })] }),                    new Ext.Panel({                    title: '角色管理',                    items: [                        new Ext.BoxComponent({                            autoEl: {                            tag: 'div',                            html: '角色管理'                            }                     })] }),                    new Ext.Panel({                    title: '系统管理',                    items: [                        new Ext.BoxComponent({                            autoEl: {                            tag: 'div',                            }                     })] })                ],                renderTo: 'AccordionLayout'            });            //------AccordionLayout结束------//            //------FitLayout结束------//            var FitLayout = new Ext.Panel({                title: 'FitLayout',                height: 100,                renderTo: 'FitLayout',                layout: 'fit',                items: [                    new Ext.Panel({                        bodyStyle: 'background:red',                    }),                    new Ext.Panel({                        bodyStyle: 'background:yellow',                        html: '这个panel不会显示，因为是fit布局' })                ]            });            var NoFitLayout = new Ext.Panel({                title: 'NoFitLayout',                height: 100,                renderTo: 'FitLayout',                items: [                    new Ext.Panel({                        bodyStyle: 'background:yellow',                        html: '未使用了fit布局,没有填充满' })                ]            });            //------FitLayout结束------//            //------TableLayout开始------//            var TableLayout = new Ext.Panel({                title: 'TableLayout',                layout: 'table',                layoutConfig: { columns: 3 },                defaults: {                    width: 133,                    height: 100,                    autoEl: 'center'                },                defaultType: 'panel',                items: [                    { html: '行1列1' },                    { html: '行1列2' },                    { html: '行[1,2]列3',                      rowspan: 2,                       height: 180 },                    { html: '行2列[1,2]',                      colspan: 2,                      width: 266 }                ],                renderTo: 'TableLayout'            });            //------TableLayout结束------//        });    </script></head><body>    <div id="ContainerLayout" style="float: left; width: 300px">        ContainerLayout：垂直方式放置    </div>    <div id="FormLayout" style="float: left; width: 240px; padding-left: 10px;">    </div>    <div id="ColumnLayout" style="float: left; width: 500px; padding-left: 10px;">    </div>    <div id="BorderLayout" style="padding: 10px 0px; clear: both">    </div>    <div id="AccordionLayout" style="width: 300px; float: left; height: 200px">    </div>    <div id="FitLayout" style="width: 300px; float: left; height: 200px; padding-left: 10px;">    </div>    <div id="TableLayout" style="width: 400px; float: left; padding-left: 10px;">    </div></body></html>

案例示意图

实例效果

layout布局参考文献：
http://www.cnblogs.com/iamlilinfeng/archive/2012/06/26/2563047.html

1 0