ExtJs入门学习

00 ExtJs开始框架

<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../Ext/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />

01 入口

Ext.onReady(function(){
    // 至关于jquery $(function(){}) 入口同样
})

02 经常使用组件

new 方法来生成一个组件实例

窗体-Window组件

var win = new Ext.Window({
    // 生成一个窗口组件 而后在窗口上添加其余元素来 完成特定的模块功能
    title: "窗口",
    width: 100,
    height: 100,
    html: "<div>hello world</div>", //插入html代码 生成窗体内容
    maximizable: true,
    minimizable: true,
    closable: true,
    items: // 在window上放置其余元素组件form
    // ... 
});
win.show();//显示

表单- FormPanel

var form = new Ext.form.FormPanel({
     frame: true,
     title: '表单标题',
     style: 'margin:10px',
     html: '<div style="padding:10px">这里表单内容</div>',
     items: [textuser,textpwd] //用来放置其余元素
     buttons: //放置按钮
});

文本框- TextField

// 初始化标签Ext:Qtips属性
Ext.QiuckTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; //提示出现的位置
var text = new Ext.form.TextField({
    width: 200,
    allowBlank: false, // 容许空白
    maxLength: 20,
    //inputType: ''
    name: "username",
    fieldLabel: "用户名",
    blankText: "请输入用户名", // 用来空白提示
    //...
});

按钮- Button

var confirmClick = function(){};
var btn = new Ext.Button({
    text: "confirm",
    //handler: listeners{}  添加事件方法
    handler: confirmClick
})

数字字段NumberField 隐藏字段Hidden 日期字段DataField

var numberField = new Ext.form.NumberField({});
var hidden = new Ext.form.Hidden({});
var dataField = new Ext.form.DataField({});

单选框RadioGroup 复选框CheckBoxGroup

var radioGroup = new Ext.form.RadioGroup({});
var chkBoxGroup =  new Ext.form.CheckBoxGroup({});

下拉列表- Combobox

//建立数据源[数组数据源]
        var combostore = new Ext.data.ArrayStore({
            fields: ['id', 'name'],
            data: [[1, '团员'], [2, '党员'], [3, '其余']]
        });
        //建立Combobox
        var combobox = new Ext.form.ComboBox({
            fieldLabel: '政治面貌',
            store: combostore,
            displayField: 'name',
            valueField: 'id',
            triggerAction: 'all',
            emptyText: '请选择...',
            allowBlank: false,
            blankText: '请选择政治面貌',
            editable: false,
            mode: 'local'
        });
        //Combobox获取值
        combobox.on('select', function () {
            alert(combobox.getValue());
        })

列表和树 GridPanel TreePanel

var grid = new Ext.grid.GridPanel({});
var tree = new Ext.tree.TreePanel({});
// 这两个组件主要是用来呈现数据的

其余

03 小结

• ExtJS是一个很是棒的Ajax框架，能够用来开发富有华丽外观的富客户端应用，能使b/s应用更加具备活力.
• 了解认识经常使用的Extjs的组件
• ext-login-demo

04 参考资料

李林峰ExtJs入门教程
extjs-百度百科
extjs是什么-博客园