extjs入门

最新推荐文章于 2024-11-08 14:35:14 发布

diaiyu5104

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rhhanli/archive/2013/04/18/3027886.html

版权

这几天刚刚开始学习extjs，把学习过程中容易出的问题汇总以供大家参考。

在学习过程中，我发现写代码时很容易与jquery的格式混淆，因此将详细的记录下来。

1、添加extjs的引用

</head>

2、开始写简单的extjs程序，我做了一个例子，添加人员信息，截图如下：

3、下面是完整的代码，注意这只是简单的客户端操作，并没有与服务器进行交互。

                                    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"
}]);

转载于:https://www.cnblogs.com/rhhanli/archive/2013/04/18/3027886.html