学习unigui【43】如何和控件打交道

对于我们来说，因为不熟悉HTML JS WEB等等，导致一条路走到黑。希望走通，就必须知道EXTJS。

这又是一个打的学习成本。如何对待：

 

不学 ExtJS（至少学到“能读懂/能改”那一层）会一直很痛，但不需要学成专家。你现在踩的坑本质是：UniGUI 的移动端控件外壳是 Delphi，真正的交互器官是 Ext JS Modern。你不懂它，就只能靠“猜事件/试 JS”，容易被内部生命周期反复打脸。

不过别慌：你已经通过这次把最难的那块——组件生命周期 + 覆盖默认行为 + 自建 picker + 动态 slot 数据——打通了。接下来要学的是“最低可用知识栈”。

---

你需要掌握到什么程度才够用

目标不是“写 Ext 应用”，而是：

• 看得懂 sender 到底是什么（Ext 组件实例）

• 知道什么时候它的子组件存在（afterCreate / expand / show 等）

• 会查组件结构：getItems() / getStore() / setData() / setValue()

• 会挂事件：on('pick') / on('show')

• 会做最常见的两种改法：

  1. 改数据源（store） → 让 UI 选项“消失/出现”

  2. 改默认行为（override） → 例如 field.showPicker = ...

到这层，你在 UniGUI 的前端交互就能“像人一样”开发，而不是“玄学调参”。

---

为什么你会觉得困难重重（真相版）

因为 UniGUI 的模式是“双语言双运行时”：

• Delphi：创建组件、设置属性、触发 Ajax

• 浏览器：ExtJS 组件渲染、事件、状态、store、picker、动画、布局

而你之前的需求恰好属于 纯前端状态机（滚轮 pick 的动态联动 + 选项集合裁剪）。
这类需求不掌握 ExtJS 的 store/slot/value/事件流，基本必痛。

---

最短学习路线（不绕路）

你别从 ExtJS 全套学起，太大了。按 UniGUI 实战学：

1) ExtJS Modern 的 4 个核心对象（先学这四个就够用）

• Component：组件实例（sender）

• Event：on() / listeners

• Store：数据源（列表/滚轮选项）getStore() / setData()

• Value：getValue() / setValue()（组件状态）

2) 你最该练的 6 个“动作”

1. console.log(sender, sender.initialConfig)

2. sender.getItems().items（看子组件）

3. slot.getStore().getData().items（看 store 数据）

4. store.setData([...])（改选项集合）

5. component.on('event', fn)（挂事件）

6. 覆盖：sender.someMethod = function(){...}（接管默认行为）

3) 一个“万能调试钩子”

以后你每次遇到“不生效”，先在 afterCreate 里加：

 

console.log('field=', sender, 'cfg=', sender.initialConfig); Ext.defer(function(){ console.log('items=', sender.getItems && sender.getItems().items); }, 500);

你会瞬间从“猜”变成“看见”。

---

但你不一定要系统学很久

更务实的说法是：
你只需要把 ExtJS 当成 UniGUI 移动端的“前端引擎”，掌握我上面那一小套操作，你就能解决 80% 的交互问题。

你今天这个 DatePicker 的方案，其实已经证明你具备学它的直觉了：
你抓到了关键点——store 决定选项集合、override 决定交互入口。