Extjs基础(二)

1.2.1HtmlEditor

var win = Ext.create('Ext.window.Window', {
    title: '文本编辑器',
    width: 300,
    height: 300,
    frame: true,
    renderTo: Ext.getBody(),
    html: '文本内容',
    autoShow: true,
    layout: 'fit',
    items: {
        xtype: 'htmleditor',
        enableColors: false,
        enableAlignments: false
    }
});

1.2.2信息录入窗口

Ext.onReady(function () {
     //姓名
    var txtusername = new Ext.form.TextField({
        width: 130,
        allowBlank: false,
        maxLength: 4,
        name: 'username',
        fieldLabel: '姓名',
        blankText: '请输入姓名',
        maxLengthText: '姓名不能超过4个字符'
    });
    //政治面貌数据源
    var combostore = new Ext.data.ArrayStore({
        fields: ['id', 'name'],
        data: [[1, '团员'], [2, '党员'], [3, '其他']]
    });
    //政治面貌下拉列表
    var cobpolitical = new Ext.form.ComboBox({
        width: 130,
        allowBlank: false,
        fieldLabel: '政治面貌',
        store: combostore,
        displayField: 'name',
        valueField: 'id',
        triggerAction: 'all',
        emptyText: '请选择...',
        blankText: '请选择政治面貌',
        editable: false,
        mode: 'local'
    });
    //毕业院校
    var txtgraduateschool = new Ext.form.TextField({
        width: 130,
        allowBlank: false,
        maxLength: 10,
        name: 'graduateschool',
        fieldLabel: '毕业院校',
        blankText: '请输入毕业院校',
        maxLengthText: '毕业院校不能超过10个字符'
    });
    //通信地址
    var txtaddress = new Ext.form.TextField({
        width: 130,
        allowBlank: false,
        maxLength: 30,
        name: 'address',
        fieldLabel: '通信地址',
        blankText: '请输入通信地址',
        maxLengthText: '通信地址不能超过30个字符'
    });
    var column1 = {
        columnWidth: .28,
        layout: 'form',
        items: [
            txtusername, cobpolitical, txtgraduateschool, txtaddress
        ]
    };
    //性别
    var rdosex = new Ext.form.RadioGroup({
        fieldLabel: '性别',
        width: 130,
        style: 'padding-top:3px;height:17px;',
        items: [{name: 'sex', inputValue: '0', boxLabel: '男', checked: true}, {
            name: 'sex',
            inputValue: '1',
            boxLabel: '女'
        }]
    });
    //身高
    var numheight = new Ext.form.NumberField({
        fieldLabel: '身高',
        width: 117,
        decimalPrecision: 0,
        minValue: 1,
        maxValue: 400,
        name: 'height',
        unitText: ' cm',
        allowBlank: false,
        blankText: '请输入身高'
    });
    //毕业专业
    var txtprofessional = new Ext.form.TextField({
        width: 130,
        allowBlank: false,
        maxLength: 30,
        name: 'professional',
        fieldLabel: '毕业专业',
        blankText: '请输入毕业专业',
        maxLengthText: '毕业专业不能超过30个字符'
    });
    //联系电话
    var txtphone = new Ext.form.TextField({
        width: 130,
        allowBlank: false,
        maxLength: 20,
        name: 'phone',
        fieldLabel: '联系电话',
        blankText: '请输入联系电话',
        maxLengthText: '联系电话不能超过20个字符'
    });
    //第二列包含4行
    var column2 = {
        columnWidth: .28,
        layout: 'form',
        items: [rdosex, numheight, txtprofessional, txtphone]
    };
      //年龄
    var numage = new Ext.form.NumberField({
        fieldLabel: '年龄',
        width: 117,
        decimalPrecision: 0,
        minValue: 1,
        maxValue: 60,
        name: 'age',
        unitText: ' 岁',
        allowBlank: false,
        blankText: '请输入年龄'
    });
    //体重
    var numweight = new Ext.form.NumberField({
        fieldLabel: '体重',
        width: 117,
        decimalPrecision: 0,
        minValue: 1,
        maxValue: 300,
        name: 'age',
        unitText: ' kg',
        allowBlank: false,
        blankText: '请输入体重'
    });
    //毕业日期
    var dategraduation = new Ext.form.DateField({
        fieldLabel: '毕业日期',
        name: 'graduationdate',
        width: 117,
        format: 'Y-m-d',
        editable: false,
        allowBlank: false,
        blankText: '请选择毕业日期'
    });
        var column3 = {
        columnWidth: .25,
        layout: 'form',
        items: [numage, numweight, dategraduation]
    };
       //创建div组件
    var imagebox = new Ext.Component({
        autoEl: {
            style: 'width:65px;height:60px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:10px;margin-bottom:8px',
            tag: 'div',
            id: 'imageshow',
            html: '暂无相片'
        }
    });
    var uploadbutton = new Ext.Button({
        text: '上传相片',
        style: 'margin:0px auto;',
        handler: function () {
            alert('弹出新窗体上传相片!');
        }
    });
    var column4 = {
        columnWidth: .16,
        layout: 'form',
        items: [imagebox, uploadbutton]
    };
     //招聘来源
    var checksource = new Ext.form.CheckboxGroup({
        fieldLabel: '招聘来源',
        style: 'padding-top:3px;height:17px;',
        items: [{
            boxLabel: '报纸招聘',
            inputValue: '0'
        }, {
            boxLabel: '校园招聘',
            inputValue: '1'
        }, {
            boxLabel: '人才市场',
            inputValue: '2'
        }, {
            boxLabel: '招聘网站',
            inputValue: '3'
        }]
    });
    //创建文本上传域
    var exteditor = new Ext.form.HtmlEditor({
        fieldLabel: '其他信息',
        width: 745,
        height: 200
    });
    //表单
    var form = new Ext.form.FormPanel({
        frame: true,
        title: '员工信息表',
        style: 'margin:10px',
        labelWidth: 70,
        buttonAlign: 'center',
        items: [{
            layout: 'column',
            items: [
                column1,
                column2,
                column3,
                column4
            ]
        }, checksource,
            exteditor
        ],
        buttons: [{
            text: '保存',
            handler: function () {
                alert('保存方法!')
            }
        }, {
            text: '重置',
            handler: function () {
                alert('重置方法!')
            }
        }]
    });
    //窗体
    var win = new Ext.Window({
        title: '窗口',
        width: 900,
        height: 580,
        resizable: true,
        modal: true,
        closable: true,
        maximizable: true,
        minimizable: true,
        buttonAlign: 'center',
        items: form
    });
    win.show();
    // form.show();
});

1.2.3布局(layout)
该小节主要讲解常用的布局方式,就是把我们想要将控件放在指定的位置。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="extjs/theme-triton/resources/theme-triton-all.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        //------ContainerLayout开始------//
        var box1 = new Ext.Component({
            autoEl: {
                tag: 'div',
                style: 'background:red;width:300px;height:30px',
                html: 'box1'
            }
        });
        var box2 = new Ext.Component({
            autoEl: {
                tag: 'div',
                style: 'background:yellow;width:300px;height:30px',
                html: 'box2'
            }
        });
        var box3 = new Ext.Component({
            autoEl: {
                tag: 'div',
                style: 'background:blue;width:300px;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: '第一列', columnWidth: .33, labelWidth: 50, items: [
                        new Ext.form.TextField({fieldLabel: '用户名'})]
                }),
                new Ext.form.FormPanel({
                    title: '第二列', columnWidth: .33, labelWidth: 50, items: [
                        new Ext.form.TextField({fieldLabel: '密码'})]
                }),
                new Ext.form.FormPanel({
                    title: '第三列', columnWidth: .34, 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: '上北', region: 'north', html: '可以放个logo什么的'}),
                new Ext.Panel({title: '下南', region: 'south', html: '版权信息？', autoEl: 'center'}),
                new Ext.Panel({title: '中间', region: 'center', html: '主面板'}),
                new Ext.Panel({title: '左东', region: 'west', 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: '用户管理', items: [new Ext.Component({autoEl: {tag: 'div', html: '用户管理'}})]}),
                new Ext.Panel({title: '角色管理', items: [new Ext.Component({autoEl: {tag: 'div', html: '角色管理'}})]}),
                new Ext.Panel({title: '系统管理', items: [new Ext.Component({autoEl: {tag: 'div', html: '系统管理'}})]})
            ],
            renderTo: 'AccordionLayout'
        });
        //------AccordionLayout结束------//
        //------FitLayout结束------//
        var FitLayout = new Ext.Panel({
            title: 'FitLayout',
            height: 100,
            renderTo: 'FitLayout',
            layout: 'fit',
            items: [
                new Ext.Panel({bodyStyle: 'background:red', html: '使用了fit布局,填充满'}),
                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结束------//
        // form.show();
    });
</script>
<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>

1.2.4GridPanel
先来看一个简单的用法:

//1.定义Model
Ext.define("User", {
    extend: "Ext.data.Model",
    //字段名称
    fields: [
        {name: 'name', type: 'string'},
        {name: 'age', type: 'int'},
        {name: 'phone', type: 'string'}
    ]
});
//2.创建store
var store = Ext.create("Ext.data.Store", {
    //引用model
    model: "User",
    autoLoad: true,//自动渲染
    pageSize: 5,
    proxy: {
        type: "ajax",
        url: "GridHandler.ashx",
        reader: {
            type: 'json',
            root: "rows"
        }
    },
    //字段名称需要和model中定义一致
    data: [
        {name: 'Ed', age: 22, phone: '1324343434'},
        {name: 'body', age: 12, phone: '656756756'},
        {name: 'wifi', age: 21, phone: '3546465'},
        {name: 'setter', age: 10,phone:'34546465'},
    ],
    //自动渲染
    autoLoad: true
});

//3.创建grid
var grid = Ext.create("Ext.grid.Panel", {
    store: store,//引用store
    width: 800,
    height: 600,
    margin: 30,
    columnLines: true,
    renderTo: Ext.getBody(),
    selType: "checkboxmodel",//显示复选按钮
    columns: [//列名,dataIndex:引用fields中字段名,flex:1列宽自适应
        {text: '姓名', dataIndex: 'name', flex: 1},
        {text: '年龄', dataIndex: 'age', flex: 1},
        {text: '电话', dataIndex: 'phone', flex: 1}
    ],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){
                console.log('click el');
            }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

常用配置项：
xtype：列类型
text：列头显示的文字
dataIndex：绑定的字段名
width：宽度
flex：自动适应的宽度
sortable：是否可排序，默认为是
hideable：是否可隐藏，默认为是
locked：锁定列，将列锁定在grid的开头，当grid出现滚动条的时候该属性比较有用。默认为否
lockable：是否可锁定，默认为否
format：格式化字符串，常用于日期、数字的格式化。日期：‘Y-m-d’；日期时间：‘Y-m-d H:i:s’；数字：‘0,000.00’（带有千位分隔符、保留两位小数）、‘0.00’（保留两位小数），‘0’（不保留小数）
renderer：自定义绘制方法，可以是Ext.util.Format中定义好的方法名称，也可以是自定义否function，该方法接收下面的参数：value、metadata、record、rowIndex、colIndex、store、view，并需要一个用来显示的返回值。
editor：编辑器，当使用编辑插件的时候才会起作用。
设置可编辑:

RowEditing:设置编辑器为行编辑。
获取选中数据：
//监听一个事件

listeners: {
//单击事件
    click: {
        element: 'el', //没有事件不会触发
        fn: function () {
            var length = grid.getSelection().length;
            //当前使用model的一行数据,返回数组,若是选中多行则返回多行数组
            var rows = grid.getSelection();
            for (var index = 0; index < length; index++) {
                //取出每一行的数据
                var name = rows[index].get('name');
                var age = rows[index].get('age');
                var phone = rows[index].get('phone');
                alert('name:' + name + 'age:' + age + '--phone:' + phone);
            }
        }
    }

1.2.5TreePanel
先来看一个简单的例子：

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        children: [
            {
                text: '城市列表', children: [{
                    text: '淮安', children: [{
                        text: '金湖', leaf: true,//设置为叶子节点,表示下面没有数据了,则不可以再展开
                    }, {
                        text: '涟水', leaf: true,
                    }],
                }, {
                    text: '苏州', children: [{
                        text:'太仓',leaf:true
                    },{
                        text:'吴中',leaf:true
                    }],
                }, {
                    text: '南京'
                }]
            }, {
                text: '国家'
            }
        ]
    }
});
Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 400,
    height: 350,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

1.2.6MessageBox
1.提示框的语法：
Ext.MessageBox.alert(String title,String msg,Function fun,Objec scope);
title:标题
msg:提示内容
fn：关闭之后的回调函数
scope:作用域
通常情况下,使用更多的是title和msg两个属性,举个例子：
1.
Ext.MessageBox.alert(“提示框”,”提示信息”);
2.
Ext.MessageBox.alert(“提示框”,”提示信息”,function(btn){
alert(“提示框被关闭了”+btn);
});
函数参数则为点击的按钮,ok就是ok，x则为cancel

2.输入框
语法：
Ext.MessageBox.prompt(String title,String msg,Function fn,Object scope,
Boolean/Number/multiline);
如果为true或者为数字则运行输入多行。
例如：

Ext.MessageBox.prompt("输入框","请输入你的姓名:",function(btn,text){
    alert("你点击了："+btn+"你输入了："+text);
});

例如：

Ext.MessageBox.prompt("输入框","请输入你的姓名:",function(btn,text){
    alert("你点击了："+btn+"你输入了："+text);
},this,true);

也可以不适用true,使用具体的数值指定高度。

3.确认框
语法：
Ext.MessageBox.confirm(String title,String msg,Function fn,Object scope);
例如：

Ext.MessageBox.confirm("确认", "请点击下面按钮进行确认", function (btn) {
    Ext.MessageBox.alert("你点击了" + btn);
});

4.自定义消息框：
语法：
Ext.MessageBox.show(Object config);
使用json格式可以传递很多数据进去，常用属性为：
title:消息框标题
msg:内容
width:宽度
multiline:是否显示多行文本
closeable:是否显示关闭按钮
buttons：按钮
icon:图标
fn：回调函数
例如：

Ext.MessageBox.show({
    title: '标题',
    msg: '自定义对话框',
    width:'300',
    multiline:true,
    closable:false,
    buttons:Ext.MessageBox.YESNOCANCEL,
    icon:Ext.MessageBox.QUESTION,
    fn:function (btn,text) {
     Ext.MessageBox.alert("你点击了"+btn+"内容是:"+text);
    }
});

buttons:
OK
CANCEL
OKCANCEL
YESNO
YESNOCANCEL
icon:
INFO
WARNING
QUESTION
ERROR
1.2.7Toast
看名字本质就是一个弹出通知框,一会就自动消失的那种。

Ext.toast({
    height:200,//设置高
    width:200,//设置宽
    title:'提示信息',//标题
    html:'欢迎学习extjs',
    timeout:3000 //多久后消失
});