在学习过程中，我发现写代码时很容易与jquery的格式混淆，因此将详细的记录下来。
1、添加extjs的引用
<head runat="server">
<title></title>
<link href="../ext-3.3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> --样式文件
<script src="../ext-3.3.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../ext-3.3.0/ext-all.js" type="text/javascript"></script>
<script src="../ext-3.3.0/ext-lang-zh_CN.js" type="text/javascript"></script>
</head>
2、开始写简单的extjs程序，我做了一个例子，添加人员信息，截图如下：
3、下面是完整的代码，注意这只是简单的客户端操作，并没有与服务器进行交互。
<script type="text/javascript"> Ext.onReady(function () { var JOB = Ext.data.Record.create([{//record创建，返回record name: "job" }]); new Ext.Window({ title: "添加人员", width: 500, height: 350, layout: "form", frame: true, plain: true, resizable: false, labelWidth: 60, defaultType: "textfield", defaults: { baseCls: "x-plain" }, bodyStyle: "padding:10px 0 0 10px", buttonAlign: "center", items: [{ xtype: "panel", layout: "column", items: [{ columnWidth: .5, layout: "form", defaultType: "textfield", baseCls: "x-plain", defaults: "width:160", labelWidth: 60, items: [{ fieldLabel: "姓名" }, { fieldLabel: "年龄", readonly: true, value: 25 }, { xtype: "datefield", width: 130, fieldLabel: "出生日期", value: "1989-04-20", format: "Y-m-d", listeners: { blur: function (_df) { var _age = _df.ownerCt.findByType("textfield")[1]; _age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1); } } }, { fieldLabel: "联系电话" }, { fieldLabel: "手机号码" }, { fieldLabel: "电子邮件" }, { fieldLabel: "性别", xtype: "combo", width: 130, mode: "local", //从本地读数据，默认为query，从服务器读数据 triggerAction: "all", //触发器被激活时执行 readonly: true, value: "男", displayField: "sex", //默认显示的字段名 store: new Ext.data.SimpleStore({ fields: ["sex"], data: [["男"], ["女"]] }) }] }, { columnWidth: .5, layout: "form", baseCls: "x-plain", labelWidth: 60, items: [{ xtype: "textfield", fieldLabel: "个人照片", width: 160, height: 175, inputType: "image" }] }] }, { fieldLabel: "身份证号", width: 400 }, { fieldLabel: "具体地址", width: 400 }, { xtype: "panel", layout: "column", defaults: { baseCls: "x-plain" }, items: [{ columnWidth: .4, layout: "form", labelWidth: 60, items: { xtype: "combo", fieldLabel: "职位", mode: "local", width: 120, triggerAction: "all", displayField: "job", readonly: true, listeners: { select: function (_combo, _record, _index) { _combo["selectitems"] = _record; //给combo加属性，selectitems如果存在直接引用，不存在则创建 } }, store: new Ext.data.SimpleStore({ fields: ["job"] //data: [["程序员"], ["医生"], ["经理"], ["主管"]] }) } }, { layout: "form", columnWidth: .2, items: { xtype: "button", text: "添加职位", handler: function () { var _window = this.ownerCt.ownerCt.ownerCt; var _job = _window.findByType("combo")[1]; Ext.MessageBox.prompt("添加职位", "职位名称", function (_btn, _text) { if (_btn == "ok") { var _store = this.store; _store.insert(0, new JOB({//插入数据 job: _text })); this.setValue(_text); this["selectitems"] = _store.getAt(0); } }, _job); } } }, { layout: "form", columnWidth: .2, items: { xtype: "button", text: "修改职位", handler: function () { var _window = this.ownerCt.ownerCt.ownerCt; var _job = _window.findByType("combo")[1]; if (_job["selectitems"] != null) { Ext.MessageBox.prompt("修改职位", "职位名称", function (_btn, _text) { if (_btn == "ok") { this["selectitems"].set("job", _text); this.setValue(_text); } }, _job, false, _job.getValue()); } } } }, { layout: "form", columnWidth: .2, items: { xtype: "button", text: "删除职位", handler: function () { var _window = this.ownerCt.ownerCt.ownerCt; var _job = _window.findByType("combo")[1]; if (_job["selectitems"] != null) { Ext.MessageBox.confirm("删除职位", "你确定要删除该职位吗？", function (_btn) { if (_btn == "yes") { try { this.store.remove(this["selectitems"]); } catch (_err) { } if (this.store.getCount() != 0) { this.setValue(this.store.getAt(0).get("job")); this["selectitems"] = this.store.getAt(0); } else { this.setValue(""); } } }, _job); } } } }] }], showLock: false, listeners: { show: function (_window) { if (!_window.showLock) { _window.findByType("textfield")[7].getEl().dom.src = "918.jpg"; _window.showLock = true; } // var _job = _window.findByType("combo")[1]; // var _store = _job.getStore(); // _job.setValue(_store.getAt(0).get("job")); // _job["selectitems"] = _store.getAt(0); //默认选择第一个 } }, buttons: [{ text: "确定" }, { text: "取消" }] }).show(); }); </script>
4、在浏览器查看，就可以看到效果了，下面列举编写extjs代码注意事项
1）页面初始化
Ext.onReady(function () { 这里是代码 }); 2）items items:{} 只有一个项时； items:[{},{},{}]有多个项时； 3）listeners格式 listeners:{ blur:function(){}, click:function(){} } 4)store存储数据 store: new Ext.data.SimpleStore({ fields: ["sex"], data: [["男"], ["女"]] }) 5）handler默认事件，如按钮的默认事件为click事件 handler: function () { } 6）record var JOB = Ext.data.Record.create([{//record创建，返回record name: "job" }]);
