react-extjs 0.0.1

package/src/main.tsx

@@ -0,0 +1,2649 @@
+import { createRoot } from 'react-dom/client';
+import './styles/ext-theme.css';
+import { ensureDefaultTheme } from './util/theme';
+ensureDefaultTheme();
+import { useState, useRef, useEffect } from 'react';
+import { Button } from './components/Button';
+import { CycleButton, type CycleButtonHandle } from './components/CycleButton';
+import { DataView, type DataViewHandle } from './components/DataView';
+import { ListView, ListViewHandle } from './components/ListView';
+import { Editor, type EditorHandle } from './components/Editor';
+import { Panel, type PanelHandle } from './components/Panel';
+import { TabPanel, type TabItem, type TabPanelHandle } from './components/TabPanel';
+import { Menu, type MenuHandle } from './components/Menu';
+import {
+  FormPanel,
+  FormField,
+  TextField,
+  TextArea,
+  NumberField,
+  Checkbox,
+  Radio,
+  RadioGroup,
+  Hidden,
+  ComboBox,
+  TimeField,
+  DateField,
+  type TextFieldHandle,
+  type ComboBoxHandle,
+  type DateFieldHandle,
+  computeError,
+} from './components/Form';
+import { DisplayField } from './components/DisplayField';
+import { CheckboxGroup, type CheckboxGroupHandle } from './components/CheckboxGroup';
+import { SpinnerField } from './components/SpinnerField';
+import { QuickTip, type QuickTipHandle } from './components/QuickTip';
+import { Slider } from './components/Slider';
+import { ProgressBar, type ProgressBarHandle } from './components/ProgressBar';
+import { DatePicker } from './components/DatePicker';
+import { TreePanel, type TreeNodeData, type TreePanelHandle } from './components/Tree';
+import { Toolbar, type ToolbarHandle } from './components/Toolbar';
+import { Grid, type GridHandle } from './components/Grid';
+import { Window, type WindowHandle } from './components/Window';
+import { PagingToolbar, type PagingToolbarHandle } from './components/PagingToolbar';
+import { EditorGrid, type EditorGridHandle } from './components/EditorGrid';
+import { TreeGrid, type TreeGridNode, type TreeGridHandle } from './components/TreeGrid';
+import { FieldSet, type FieldSetHandle } from './components/FieldSet';
+import { MessageBox, type MessageBoxHandle } from './components/MessageBox';
+import { ToolTip, type ToolTipHandle } from './components/ToolTip';
+import { Accordion, type AccordionHandle } from './components/Accordion';
+import { ColorPalette, type ColorPaletteHandle } from './components/ColorPalette';
+import { ColorMenu, type ColorMenuHandle } from './components/ColorMenu';
+import { Resizable } from './components/Resizable';
+import { Box } from './components/Box';
+import { SplitBar } from './components/SplitBar';
+import { LoadMask } from './components/LoadMask';
+import { ButtonGroup, type ButtonGroupHandle } from './components/ButtonGroup';
+import { StatusBar, type StatusBarHandle } from './components/StatusBar';
+import { PropertyGrid, type PropertyGridHandle } from './components/PropertyGrid';
+import { BorderLayout } from './components/BorderLayout';
+import { Viewport, type ViewportHandle } from './components/Viewport';
+import { CardLayout } from './components/CardLayout';
+import { ColumnLayout } from './components/ColumnLayout';
+import { AnchorLayout } from './components/AnchorLayout';
+import { FitLayout } from './components/FitLayout';
+import { TableLayout } from './components/TableLayout';
+import { HtmlEditor, type HtmlEditorHandle } from './components/HtmlEditor';
+
+const tabs: TabItem[] = [
+  { title: 'Tab 1', content: <div style={{ padding: 10 }}>内容一</div> },
+  { title: 'Tab 2', iconCls: 'x-tab-tab-icon', content: <div style={{ padding: 10 }}>内容二（带图标）</div> },
+  { title: 'Tab 3（可关闭）', closable: true, content: <div style={{ padding: 10 }}>内容三</div> },
+  { title: 'Tab 4（禁用）', disabled: true, content: <div style={{ padding: 10 }}>内容四</div> },
+  { title: 'Tab 5', tabCls: 'x-tab-styled', content: <div style={{ padding: 10 }}>内容五（自定义 tabCls）</div> },
+];
+
+const treeData: TreeNodeData[] = [
+  {
+    id: 'n1', text: '系统管理', expanded: true, children: [
+      { id: 'n1-1', text: '用户管理', children: [
+        { id: 'n1-1-1', text: '新增用户' },
+        { id: 'n1-1-2', text: '用户列表', checked: true },
+      ] },
+      { id: 'n1-2', text: '角色管理', children: [
+        { id: 'n1-2-1', text: '角色分配' },
+      ] },
+      { id: 'n1-3', text: '权限配置', disabled: true },
+    ],
+  },
+  {
+    id: 'n2', text: '业务中心', expanded: true, children: [
+      { id: 'n2-1', text: '订单管理', children: [
+        { id: 'n2-1-1', text: '待发货' },
+        { id: 'n2-1-2', text: '已完成' },
+      ] },
+      { id: 'n2-2', text: '报表中心' },
+    ],
+  },
+  { id: 'n3', text: '帮助文档', expandable: true },
+];
+
+// TreeGrid 演示数据（与 reference/golden.js #treegrid 完全同构：3 列 Task/Duration/Assigned To，
+// t1/t2 初始展开，t3 expandable 折叠）。
+const treegridData: TreeGridNode[] = [
+  {
+    id: 't1', task: '项目规划', duration: 6, user: 'Alice', expanded: true, children: [
+      { id: 't1-1', task: '需求调研', duration: 3, user: 'Bob' },
+      { id: 't1-2', task: '方案设计', duration: 3, user: 'Carol' },
+    ],
+  },
+  {
+    id: 't2', task: '开发', duration: 12, user: 'Dave', expanded: true, children: [
+      { id: 't2-1', task: '前端', duration: 6, user: 'Eve' },
+      { id: 't2-2', task: '后端', duration: 6, user: 'Frank' },
+    ],
+  },
+  { id: 't3', task: '测试', duration: 4, user: 'Grace', expandable: true },
+];
+
+// 表单校验演示（行为测试专用，不参与保真循环——无效态由 golden 静态 markInvalid 对应）。
+// 用外部「校验」按钮触发两字段校验，复刻 Ext FormPanel.getForm().isValid() 的客户端校验。
+const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function ValidateDemo() {
+  const nameRef = useRef<TextFieldHandle>(null);
+  const emailRef = useRef<TextFieldHandle>(null);
+  const validateAll = () => {
+    nameRef.current?.validate();
+    emailRef.current?.validate();
+  };
+  return (
+    <div data-testid="form-validate" style={{ width: 300 }}>
+      <FormPanel title="表单校验" width={300}>
+        <FormField fieldLabel="姓名">
+          <TextField
+            ref={nameRef}
+            name="name"
+            allowBlank={false}
+            invalidText="姓名不能为空"
+            width={180}
+          />
+        </FormField>
+        <FormField fieldLabel="邮箱">
+          <TextField
+            ref={emailRef}
+            name="email"
+            width={180}
+            validator={(v) => (emailRe.test(v) ? true : '邮箱格式不正确')}
+          />
+        </FormField>
+      </FormPanel>
+      <div style={{ marginTop: 8 }}>
+        <Button text="校验" onClick={validateAll} />
+      </div>
+    </div>
+  );
+}
+
+// 表单校验联动演示（跨字段校验 + 提交按钮随有效态联动，不参与保真循环）。
+// 确认密码字段的 validator 读取密码当前值（联动）；密码变更时若确认框已交互过则即时
+// 重校验确认字段，使其错误态随密码值刷新。等价于 Ext FormPanel 的跨字段校验与 monitorValid。
+function FormLinkageDemo() {
+  const [pwd, setPwd] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [touched, setTouched] = useState({ pwd: false, confirm: false });
+  const pwdRef = useRef<TextFieldHandle>(null);
+  const confirmRef = useRef<TextFieldHandle>(null);
+
+  const optsPwd = { allowBlank: false, invalidText: '请输入密码' } as const;
+  const optsConfirm = {
+    allowBlank: false,
+    invalidText: '请再次输入密码',
+    validator: (v: string) => (v === pwd ? true : '两次输入的密码不一致'),
+  } as const;
+
+  // 全部通过才允许提交（等价 Ext monitorValid），用纯函数计算，避免初始即标红。
+  const allValid =
+    computeError(pwd, optsPwd) === null && computeError(confirm, optsConfirm) === null;
+
+  // 联动：密码变化时（且确认框已交互过）即时重校验确认字段，错误态随密码刷新。
+  useEffect(() => {
+    if (touched.confirm) confirmRef.current?.validate();
+  }, [pwd, touched.confirm]);
+
+  return (
+    <div data-testid="form-linkage" style={{ width: 320 }}>
+      <FormPanel title="账户注册" width={320}>
+        <FormField fieldLabel="密码">
+          <TextField
+            ref={pwdRef}
+            name="pwd"
+            inputType="password"
+            allowBlank={false}
+            invalidText="请输入密码"
+            width={200}
+            value={pwd}
+            onChange={(v) => setPwd(v)}
+            onBlur={() => setTouched((t) => ({ ...t, pwd: true }))}
+          />
+        </FormField>
+        <FormField fieldLabel="确认密码">
+          <TextField
+            ref={confirmRef}
+            name="confirm"
+            inputType="password"
+            allowBlank={false}
+            invalidText="请再次输入密码"
+            width={200}
+            value={confirm}
+            validator={(v) => (v === pwd ? true : '两次输入的密码不一致')}
+            onChange={(v) => {
+              setConfirm(v);
+              setTouched((t) => ({ ...t, confirm: true }));
+            }}
+            onBlur={() => setTouched((t) => ({ ...t, confirm: true }))}
+          />
+        </FormField>
+      </FormPanel>
+      <div style={{ marginTop: 8 }}>
+        <Button
+          text="提交"
+          disabled={!allValid}
+          onClick={() => {
+            pwdRef.current?.validate();
+            confirmRef.current?.validate();
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+// 生成 TimeField 时间点数据源（'g:i A' 格式，对齐 Form.tsx 的 fmtTime），默认范围 12:00 AM–11:30 PM。
+function genTimes(increment: number, format = 'g:i A') {
+  const fmt = (h: number, m: number) => {
+    if (format === 'H:i') return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}`;
+    const period = h < 12 ? 'AM' : 'PM';
+    const hh = h % 12 === 0 ? 12 : h % 12;
+    return `${hh}:${m < 10 ? '0' + m : m} ${period}`;
+  };
+  const out: { value: string; text: string }[] = [];
+  for (let t = 0; t <= 1410; t += increment) {
+    const label = fmt(Math.floor(t / 60), t % 60);
+    out.push({ value: label, text: label });
+  }
+  return out;
+}
+
+// Panel 新能力夹具（对齐 Ext.Panel）：unstyled/fbar/disabled + 命令式 ref 句柄。
+// 无 golden 对应，仅入行为测试，不进保真像素循环。
+function PanelFeaturesDemo() {
+  const ref = useRef<PanelHandle>(null);
+  return (
+    <div data-testid="panel-features" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'flex-start' }}>
+      <div data-testid="panel-unstyled">
+        <Panel unstyled title="无样式" width={260}>
+          <p>plain 容器</p>
+        </Panel>
+      </div>
+      <div data-testid="panel-fbar">
+        <Panel title="带 fbar" frame width={260} fbar={<Toolbar items={[{ text: '左' }, { text: '右' }]} />}>
+          <p>正文</p>
+        </Panel>
+      </div>
+      <div data-testid="panel-disabled">
+        <Panel title="禁用" disabled width={260}>
+          <p>内容</p>
+        </Panel>
+      </div>
+      <div data-testid="panel-cmd">
+        <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
+          <Button text="折叠" onClick={() => ref.current?.collapse()} />
+          <Button text="展开" onClick={() => ref.current?.expand()} />
+          <Button text="改标题" onClick={() => ref.current?.setTitle('运行中标题')} />
+        </div>
+        <Panel ref={ref} title="命令式面板" collapsible titleCollapse width={260}>
+          <p>用上方按钮控制</p>
+        </Panel>
+      </div>
+      <div data-testid="panel-tc-default">
+        <Panel title="仅工具折叠" collapsible width={260}>
+          <p>点标题栏不折叠，仅 toggle 工具折叠</p>
+        </Panel>
+      </div>
+    </div>
+  );
+}
+
+// 演示：RowEditor 行编辑器（对齐 Ext.ux.grid.RowEditor）——双击行进入编辑，保存写回数据、取消丢弃，
+// 样式复用 ExtJS 官方 examples/ux/css/RowEditor.css，零新增手写 CSS。
+function RowEditorDemo() {
+  const [rows, setRows] = useState<Array<Record<string, unknown>>>([
+    { id: 1, name: '张三', email: 'zhangsan@example.com', age: 28, salary: 12000 },
+    { id: 2, name: '李四', email: 'lisi@example.com', age: 32, salary: 15000 },
+    { id: 3, name: '王五', email: 'wangwu@example.com', age: 45, salary: 9000 },
+    { id: 4, name: '赵六', email: 'zhaoliu@example.com', age: 23, salary: 11000 },
+  ]);
+  return (
+    <div data-testid="roweditor" style={{ width: 500 }}>
+      <Grid
+        title="行编辑器示例"
+        width={500}
+        stripeRows
+        rowEditor={{
+          clicksToEdit: 2,
+          saveText: '保存',
+          cancelText: '取消',
+          onCommit: (origIdx, newRow) => {
+            setRows((prev) => {
+              const next = prev.slice();
+              next[origIdx] = { ...next[origIdx], ...newRow };
+              return next;
+            });
+          },
+        }}
+        columns={[
+          { header: '姓名', dataIndex: 'name', width: 110, editor: 'text' },
+          { header: '邮箱', dataIndex: 'email', width: 200, editor: 'text' },
+          { header: '年龄', dataIndex: 'age', width: 70, align: 'right', editor: 'number' },
+          { header: '薪资', dataIndex: 'salary', width: 100, align: 'right', editor: 'number' },
+        ]}
+        data={rows}
+      />
+    </div>
+  );
+}
+
+// 演示：列分组表头（对齐 Ext.ux.grid.ColumnHeaderGroup）：表头顶部叠加一层跨列分组标题。
+function ColumnHeaderGroupDemo() {
+  return (
+    <div data-testid="colheader-group" style={{ width: 480 }}>
+      <Grid
+        title="列分组表头示例"
+        width={480}
+        stripeRows
+        headerGroups={[
+          [
+            { header: '客户信息', colspan: 2, align: 'center' },
+            { header: '订单信息', colspan: 3, align: 'center' },
+          ],
+        ]}
+        columns={[
+          { header: '姓名', dataIndex: 'name', width: 110 },
+          { header: '城市', dataIndex: 'city', width: 90 },
+          { header: '商品', dataIndex: 'product', width: 120 },
+          { header: '数量', dataIndex: 'qty', width: 80, align: 'right' },
+          { header: '金额', dataIndex: 'amount', width: 80, align: 'right' },
+        ]}
+        data={[
+          { name: '张三', city: '上海', product: '键盘', qty: 2, amount: 200 },
+          { name: '李四', city: '北京', product: '鼠标', qty: 5, amount: 250 },
+          { name: '王五', city: '广州', product: '显示器', qty: 1, amount: 1200 },
+        ]}
+      />
+    </div>
+  );
+}
+
+// 演示：Ext.ux.grid.LockingGridView —— 前两列锁定（姓名/城市），右侧解锁列在窄容器内横向滚动，
+// 纵向滚动两面板同步（样式复用 examples/ux/css/LockingGridView.css）。
+function LockingViewDemo() {
+  return (
+    <div data-testid="locking-view" style={{ width: 500 }}>
+      <Grid
+        title="锁定列视图示例"
+        width={500}
+        height={150}
+        stripeRows
+        columns={[
+          { header: '姓名', dataIndex: 'name', width: 110, locked: true },
+          { header: '城市', dataIndex: 'city', width: 90, locked: true, align: 'center' },
+          { header: '商品', dataIndex: 'product', width: 160 },
+          { header: '数量', dataIndex: 'qty', width: 80, align: 'right' },
+          { header: '金额', dataIndex: 'amount', width: 110, align: 'right' },
+          { header: '下单日期', dataIndex: 'date', width: 130 },
+        ]}
+        data={[
+          { name: '张三', city: '上海', product: '机械键盘', qty: 2, amount: 200, date: '2026-01-12' },
+          { name: '李四', city: '北京', product: '无线鼠标', qty: 5, amount: 250, date: '2026-02-03' },
+          { name: '王五', city: '广州', product: '27寸显示器', qty: 1, amount: 1200, date: '2026-03-21' },
+          { name: '赵六', city: '深圳', product: 'USB-C 扩展坞', qty: 3, amount: 540, date: '2026-04-09' },
+          { name: '钱七', city: '杭州', product: '降噪耳机', qty: 4, amount: 880, date: '2026-05-18' },
+          { name: '孙八', city: '成都', product: '人体工学椅', qty: 1, amount: 1600, date: '2026-06-27' },
+          { name: '周九', city: '武汉', product: '4K 摄像头', qty: 2, amount: 760, date: '2026-07-14' },
+          { name: '吴十', city: '南京', product: '固态硬盘', qty: 6, amount: 420, date: '2026-08-02' },
+          { name: '郑一', city: '西安', product: '机械臂', qty: 1, amount: 2300, date: '2026-09-11' },
+          { name: '冯二', city: '重庆', product: '网络交换机', qty: 2, amount: 980, date: '2026-10-23' },
+        ]}
+      />
+    </div>
+  );
+}
+
+function GridFiltersDemo() {
+  const data = [
+    { name: '张三', city: '上海', product: '机械键盘', qty: 2, amount: 200, date: '2026-01-12', visible: true },
+    { name: '李四', city: '北京', product: '无线鼠标', qty: 5, amount: 250, date: '2026-02-03', visible: false },
+    { name: '王五', city: '广州', product: '27寸显示器', qty: 1, amount: 1200, date: '2026-03-21', visible: true },
+    { name: '赵六', city: '深圳', product: 'USB-C 扩展坞', qty: 3, amount: 540, date: '2026-04-09', visible: true },
+    { name: '钱七', city: '杭州', product: '降噪耳机', qty: 4, amount: 880, date: '2026-05-18', visible: false },
+    { name: '孙八', city: '成都', product: '人体工学椅', qty: 1, amount: 1600, date: '2026-06-27', visible: true },
+    { name: '周九', city: '武汉', product: '4K 摄像头', qty: 2, amount: 760, date: '2026-07-14', visible: true },
+    { name: '吴十', city: '南京', product: '固态硬盘', qty: 6, amount: 420, date: '2026-08-02', visible: false },
+    { name: '郑一', city: '西安', product: '机械臂', qty: 1, amount: 2300, date: '2026-09-11', visible: true },
+    { name: '冯二', city: '重庆', product: '网络交换机', qty: 2, amount: 980, date: '2026-10-23', visible: true },
+  ];
+  return (
+    <div data-testid="gridfilters" style={{ width: 560 }}>
+      <Grid
+        title="GridFilters 列过滤示例"
+        width={560}
+        height={260}
+        stripeRows
+        columns={[
+          { header: '姓名', dataIndex: 'name', width: 90, filter: { type: 'string' } },
+          {
+            header: '城市',
+            dataIndex: 'city',
+            width: 90,
+            filter: { type: 'list', options: ['上海', '北京', '广州', '深圳', '杭州', '成都'] },
+          },
+          { header: '商品', dataIndex: 'product', width: 150, filter: { type: 'string' } },
+          { header: '数量', dataIndex: 'qty', width: 70, align: 'right', filter: { type: 'numeric' } },
+          { header: '金额', dataIndex: 'amount', width: 90, align: 'right', filter: { type: 'numeric' } },
+          { header: '下单日期', dataIndex: 'date', width: 120, filter: { type: 'date' } },
+          { header: '可见', dataIndex: 'visible', width: 60, align: 'center', filter: { type: 'boolean' } },
+        ]}
+        data={data}
+      />
+    </div>
+  );
+}
+
+// 演示：保真复现 examples/grid-filtering/grid-filter-local（Ext.ux.grid.GridFilters 经典官方示例）。
+// 列：Id(numeric) / Company(string) / Price(numeric) / Size(list) / Date(date) / Visible(boolean)，
+// 数据 27 行（来自 grid-filter.json），工具栏 Clear Filters / Show Filter Data 对齐原示例底部按钮。
+function GridFilterLocalDemo() {
+  const gridRef = useRef<GridHandle>(null);
+  const data = [
+    { id: 1, company: '3m Co', price: 71.72, date: '2007-09-01 00:00:00', size: 'large', visible: true },
+    { id: 2, company: 'Aloca Inc', price: 29.01, date: '2007-08-01 00:00:00', size: 'medium', visible: false },
+    { id: 3, company: 'Altria Group Inc', price: 83.81, date: '2007-08-03 00:00:00', size: 'large', visible: false },
+    { id: 4, company: 'American Express Company', price: 52.55, date: '2008-01-04 00:00:00', size: 'extra large', visible: true },
+    { id: 5, company: 'American International Group Inc.', price: 64.13, date: '2008-03-04 00:00:00', size: 'small', visible: true },
+    { id: 6, company: 'AT&T Inc.', price: 31.61, date: '2008-02-01 00:00:00', size: 'extra large', visible: false },
+    { id: 7, company: 'Boeing Co.', price: 75.43, date: '2008-01-01 00:00:00', size: 'large', visible: true },
+    { id: 8, company: 'Caterpillar Inc.', price: 67.27, date: '2007-12-03 00:00:00', size: 'medium', visible: true },
+    { id: 9, company: 'Citigroup, Inc.', price: 49.37, date: '2007-11-24 00:00:00', size: 'large', visible: true },
+    { id: 10, company: 'E.I. du Pont de Nemours and Company', price: 40.48, date: '2007-05-09 00:00:00', size: 'extra large', visible: false },
+    { id: 11, company: 'Exxon Mobile Corp', price: 68.1, date: '2007-12-12 00:00:00', size: 'large', visible: true },
+    { id: 12, company: 'General Electric Company', price: 34.14, date: '2008-06-16 00:00:00', size: 'extra large', visible: true },
+    { id: 13, company: 'General Motors Corporation', price: 30.27, date: '2006-12-07 00:00:00', size: 'medium', visible: true },
+    { id: 14, company: 'Hewlett-Packard Co.', price: 36.53, date: '2007-05-13 00:00:00', size: 'large', visible: true },
+    { id: 15, company: 'Honweywell Intl Inc', price: 38.77, date: '2006-11-07 00:00:00', size: 'medium', visible: false },
+    { id: 16, company: 'Intel Corporation', price: 19.88, date: '2007-01-09 00:00:00', size: 'small', visible: true },
+    { id: 17, company: 'International Business Machines', price: 81.41, date: '2005-01-21 00:00:00', size: 'extra large', visible: true },
+    { id: 18, company: 'Johnson & Johnson', price: 64.72, date: '2008-01-10 00:00:00', size: 'extra large', visible: true },
+    { id: 19, company: 'JP Morgan & Chase & Co', price: 45.73, date: '2008-02-20 00:00:00', size: 'large', visible: false },
+    { id: 20, company: "McDonald's Corporation", price: 36.76, date: '2007-06-12 00:00:00', size: 'large', visible: true },
+    { id: 21, company: 'Pfizer Inc', price: 27.96, date: '2007-12-30 00:00:00', size: 'small', visible: false },
+    { id: 22, company: 'The Coca-Cola Company', price: 45.07, date: '2007-01-30 00:00:00', size: 'medium', visible: false },
+    { id: 23, company: 'The Home Depot, Inc', price: 34.64, date: '2006-12-31 00:00:00', size: 'small', visible: true },
+    { id: 24, company: 'The Procter & Gamble Company', price: 61.91, date: '2007-04-08 00:00:00', size: 'extra large', visible: true },
+    { id: 25, company: 'United Technologies Corporation', price: 63.26, date: '2006-06-04 00:00:00', size: 'medium', visible: true },
+    { id: 26, company: 'Verizon Communications', price: 35.57, date: '2005-07-09 00:00:00', size: 'small', visible: false },
+    { id: 27, company: 'Wal-Mart Stores, Inc', price: 45.45, date: '2006-09-09 00:00:00', size: 'large', visible: true },
+  ];
+  const fmtDate = (v: string) => {
+    const d = new Date(v.replace(' ', 'T'));
+    if (isNaN(d.getTime())) return v;
+    const p = (n: number) => String(n).padStart(2, '0');
+    return `${p(d.getMonth() + 1)}/${p(d.getDate())}/${d.getFullYear()}`;
+  };
+  return (
+    <div data-testid="grid-filter-local" style={{ width: 700 }}>
+      <Grid
+        ref={gridRef}
+        title="Grid Filters Example"
+        width={700}
+        height={400}
+        stripeRows
+        autoExpandColumn="company"
+        columns={[
+          { header: 'Id', dataIndex: 'id', width: 45, filter: { type: 'numeric' } },
+          {
+            id: 'company',
+            header: 'Company',
+            dataIndex: 'company',
+            width: 200,
+            filter: { type: 'string' },
+          },
+          { header: 'Price', dataIndex: 'price', width: 70, align: 'right', filter: { type: 'numeric' } },
+          {
+            header: 'Size',
+            dataIndex: 'size',
+            width: 90,
+            filter: {
+              type: 'list',
+              options: ['small', 'medium', 'large', 'extra large'],
+            },
+          },
+          {
+            header: 'Date',
+            dataIndex: 'date',
+            width: 100,
+            renderer: (v: unknown) => fmtDate(String(v)),
+            filter: { type: 'date' },
+          },
+          { header: 'Visible', dataIndex: 'visible', width: 70, align: 'center', filter: { type: 'boolean' } },
+        ]}
+        data={data}
+      />
+      <Toolbar
+        style={{ marginTop: 4 }}
+        items={[
+          {
+            text: 'Clear Filter Data',
+            handler: () => gridRef.current?.clearFilters(),
+          },
+          {
+            text: 'All Filter Data',
+            handler: () =>
+              window.alert(JSON.stringify(gridRef.current?.getFilterData() ?? [])),
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+// 演示：TableGrid 保真（对齐 Ext.ux.grid.TableGrid / examples/grid/from-markup）：
+// 点击「Create grid」后，由一段 HTML <table> 标记生成 Grid（thead th → 列、tbody tr/td → 数据行），原版会移除源表格。
+const TABLEGRID_MARKUP = `<table cellspacing="0" id="the-table">
+  <thead>
+    <tr style="background:#eeeeee;">
+      <th>Name</th>
+      <th style="width: 40px;">Age</th>
+      <th>Sex</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td>Barney Rubble</td><td>32</td><td>Male</td></tr>
+    <tr><td>Fred Flintstone</td><td>33</td><td>Male</td></tr>
+    <tr><td>Betty Rubble</td><td>32</td><td>Female</td></tr>
+    <tr><td>Pebbles</td><td>1</td><td>Female</td></tr>
+    <tr><td>Bamm Bamm</td><td>2</td><td>Male</td></tr>
+  </tbody>
+</table>`;
+function TableGridDemo() {
+  const [created, setCreated] = useState(false);
+  return (
+    <div data-testid="tablegrid" style={{ width: 320 }}>
+      {!created ? (
+        <>
+          <Button text="Create grid" onClick={() => setCreated(true)} />
+          <div style={{ marginTop: 12 }} dangerouslySetInnerHTML={{ __html: TABLEGRID_MARKUP }} />
+        </>
+      ) : (
+        <Grid fromMarkup={TABLEGRID_MARKUP} stripeRows />
+      )}
+    </div>
+  );
+}
+
+// 演示：与 reference/golden.html 的布局/内容一致，供 Playwright 像素对比。
+function App() {
+  const [comboValue, setComboValue] = useState('sh');
+  const [filterValue, setFilterValue] = useState('bj');
+  const [sliderH, setSliderH] = useState(50);
+  const [sliderV, setSliderV] = useState(30);
+  const comboDynRef = useRef<ComboBoxHandle>(null);
+  const tfDynRef = useRef<ComboBoxHandle>(null);
+  const [tfDynValue, setTfDynValue] = useState('12:00 AM');
+  const dfDynRef = useRef<DateFieldHandle>(null);
+  const winDynRef = useRef<WindowHandle>(null);
+  const winMinRef = useRef<WindowHandle>(null);
+  const treeDynRef = useRef<TreePanelHandle>(null);
+  const propDynRef = useRef<PropertyGridHandle>(null);
+  const dvRef = useRef<DataViewHandle>(null);
+  const ptRef = useRef<PagingToolbarHandle>(null);
+  const nextDv = useRef(1);
+  const [comboDynValue, setComboDynValue] = useState('sh');
+  const [progressVal, setProgressVal] = useState(0.5);
+  const [progressTxt, setProgressTxt] = useState('加载中 50%');
+  const pbDynRef = useRef<ProgressBarHandle>(null);
+  const accDynRef = useRef<AccordionHandle>(null);
+  const [activeControlled, setActiveControlled] = useState<number | null>(0);
+  const [accEvent, setAccEvent] = useState('');
+  const cgDynRef = useRef<CheckboxGroupHandle>(null);
+  const bgDynRef = useRef<ButtonGroupHandle>(null);
+  const cycDynRef = useRef<CycleButtonHandle>(null);
+  const palDynRef = useRef<ColorPaletteHandle>(null);
+  const [showMessageBox, setShowMessageBox] = useState(true);
+  const [hboxPack, setHboxPack] = useState<'start' | 'center'>('start');
+  return (
+    <div style={{ padding: 24, display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'flex-start' }}>
+      <div data-testid="panel-frame">
+        <Panel frame title="Frame Panel" width={300} bodyPadding={10}>
+          <p>Frame panel body content.</p>
+        </Panel>
+      </div>
+      <div data-testid="panel-plain">
+        <Panel title="Plain Panel" width={300} bodyPadding={10}>
+          <p>Plain panel body content.</p>
+        </Panel>
+      </div>
+      <PanelFeaturesDemo />
+      <div data-testid="buttons" style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+        <Button text="普通按钮" />
+        <Button text="切换" enableToggle pressed />
+        <Button text="禁用" disabled />
+        <Button
+          text="带菜单"
+          arrowAlign="bottom"
+          menu={[
+            { text: '新建' },
+            { text: '打开' },
+            { separator: true },
+            { text: '保存' },
+            { text: '删除', disabled: true },
+          ]}
+        />
+      </div>
+      <div data-testid="tabpanel" style={{ width: 420 }}>
+        <TabPanel items={tabs} width={420} height={180} />
+      </div>
+      {/* TabPanel 动态增删演示：种子 2 个普通 tab，按钮「添加页」追加可自删的 tab；无 golden 对应，不入保真循环。 */}
+      <div data-testid="tabpanel-dynamic">
+        <DynamicTabDemo />
+      </div>
+      {/* TabPanel 溢出滚动（enableTabScroll）：窄容器 300 + 多 tabs 触发左右箭头，与 golden #tabscroll 同结构同尺寸。 */}
+      <div data-testid="tabscroll" style={{ width: 300 }}>
+        <TabPanel
+          enableTabScroll
+          width={300}
+          height={160}
+          activeTab={0}
+          items={[
+            { title: '首页', content: <div style={{ padding: 10 }}>首页内容</div> },
+            { title: '产品中心', content: <div style={{ padding: 10 }}>产品内容</div> },
+            { title: '解决方案', content: <div style={{ padding: 10 }}>方案内容</div> },
+            { title: '客户案例', content: <div style={{ padding: 10 }}>案例内容</div> },
+            { title: '服务支持', content: <div style={{ padding: 10 }}>服务内容</div> },
+            { title: '关于我们', content: <div style={{ padding: 10 }}>关于内容</div> },
+            { title: '联系我们', content: <div style={{ padding: 10 }}>联系内容</div> },
+          ]}
+        />
+      </div>
+      {/* Menu 动态增删演示（forwardRef + add/remove，对齐 Ext.menu.Menu.add/remove）。
+          种子 复制/粘贴/分隔/删除；「添加菜单项」追加一个可自删项；无 golden 对应。 */}
+      <div data-testid="menu-dynamic" style={{ position: 'relative' }}>
+        <DynamicMenuDemo />
+      </div>
+      {/* Menu 级联子菜单动态增删演示（getSubmenu 对「文件」子菜单动态增删）。无 golden 对应。 */}
+      <div data-testid="menu-cascade" style={{ position: 'relative' }}>
+        <CascadeMenuDemo />
+      </div>
+      {/* Toolbar 展示（按钮 + 文本 + 分隔符 + 右对齐填充） */}
+      <div data-testid="toolbar" style={{ width: 520 }}>
+        <Toolbar
+          width={520}
+          items={[
+            { xtype: 'tbtext', text: '用户管理' },
+            { xtype: 'button', text: '新增' },
+            { xtype: 'tbseparator' },
+            { xtype: 'button', text: '编辑' },
+            '->',
+            { xtype: 'button', text: '保存' },
+            { xtype: 'button', text: '删除', disabled: true },
+          ]}
+        />
+      </div>
+      {/* Toolbar 动态增删演示（forwardRef + add/remove，对齐 Ext.Toolbar.add/remove）。
+          种子 2 个按钮；「添加按钮」追加一个可自删的动态按钮；无 golden 对应，不入保真循环。 */}
+      <div data-testid="toolbar-dynamic" style={{ width: 600 }}>
+        <DynamicToolbarDemo />
+      </div>
+      {/* Toolbar 溢出（x-toolbar-more）：窄容器 + enableOverflow，尾部按钮收进 more 菜单。
+          与 golden #toolbar-overflow 同款：前 4 项可见，Format/Tools/Help 收进 more。 */}
+      <div data-testid="toolbar-overflow" style={{ width: 280 }}>
+        <Toolbar
+          width={280}
+          enableOverflow
+          items={[
+            { xtype: 'button', text: 'File' },
+            { xtype: 'button', text: 'Edit' },
+            { xtype: 'button', text: 'View' },
+            { xtype: 'button', text: 'Insert' },
+          ]}
+          overflowItems={[
+            { xtype: 'button', text: 'Format' },
+            { xtype: 'button', text: 'Tools' },
+            { xtype: 'button', text: 'Help' },
+          ]}
+        />
+      </div>
+      {/* PropertyGrid 演示（Ext.grid.PropertyGrid）：两列 Name/Value，根加 x-props-grid 类，
+          与 golden #propertygrid 同结构、同宽（300）、同 source。 */}
+      <div data-testid="propertygrid" style={{ width: 300 }}>
+        <PropertyGrid
+          width={300}
+          source={{
+            name: '演示窗口',
+            grouping: false,
+            autoFit: true,
+            borderWidth: 5,
+            created: new Date(2024, 5, 15), // 6/15/2024
+            ratio: 0.75,
+            enabled: true,
+          }}
+          propertyNames={{
+            name: '名称',
+            grouping: '分组',
+            autoFit: '自动适配',
+            borderWidth: '边框宽度',
+            created: '创建时间',
+            ratio: '比例',
+            enabled: '启用',
+          }}
+        />
+      </div>
+      {/* PropertyGrid 动态（命令式句柄：setSource / setProperty / removeProperty / addProperty）。 */}
+      <div data-testid="propertygrid-dynamic" style={{ width: 300, marginTop: 12 }}>
+        <PropertyGrid
+          ref={propDynRef}
+          width={300}
+          source={{ Name: '演示项目', Price: 100, Enabled: true }}
+        />
+        <div style={{ marginTop: 8 }}>
+          <Button text="添加属性" onClick={() => propDynRef.current?.addProperty('Version', '1.0')} />
+          <Button text="删除 Price" onClick={() => propDynRef.current?.removeProperty('Price')} style={{ marginLeft: 4 }} />
+          <Button text="修改 Name" onClick={() => propDynRef.current?.setProperty('Name', '改名为X')} style={{ marginLeft: 4 }} />
+          <Button text="整体替换" onClick={() => propDynRef.current?.setSource({ A: '甲', B: '乙' })} style={{ marginLeft: 4 }} />
+        </div>
+      </div>
+      {/* BorderLayout 演示（Ext.layout.BorderLayout）：五区，north/south 高 60，east/west 宽 120。
+          容器 600x400，与 golden #borderlayout 同结构、同尺寸。 */}
+      <BorderLayout
+        testId="borderlayout"
+        width={600}
+        height={400}
+        regions={[
+          { region: 'north', height: 60, title: 'North', html: 'North' },
+          { region: 'south', height: 60, title: 'South', html: 'South' },
+          { region: 'west', width: 120, title: 'West', html: 'West' },
+          { region: 'east', width: 120, title: 'East', html: 'East' },
+          { region: 'center', title: 'Center', html: 'Center' },
+        ]}
+      />
+      <BorderLayout
+        testId="borderlayout-collapsible"
+        width={600}
+        height={400}
+        regions={[
+          { region: 'north', height: 60, title: 'North', html: 'North', split: true, minSize: 40, maxSize: 200 },
+          { region: 'south', height: 60, title: 'South', html: 'South', collapsible: true, collapsed: true },
+          { region: 'west', width: 120, title: 'West', html: 'West', collapsible: true },
+          { region: 'east', width: 120, title: 'East', html: 'East' },
+          { region: 'center', title: 'Center', html: 'Center' },
+        ]}
+      />
+      <BorderLayout
+        testId="borderlayout-split"
+        width={600}
+        height={400}
+        regions={[
+          { region: 'north', height: 60, title: 'North', html: 'North' },
+          { region: 'south', height: 60, title: 'South', html: 'South', split: true, minSize: 40, maxSize: 200 },
+          { region: 'west', width: 120, title: 'West', html: 'West', split: true, minSize: 60, maxSize: 300 },
+          { region: 'east', width: 120, title: 'East', html: 'East' },
+          { region: 'center', title: 'Center', html: 'Center' },
+        ]}
+      />
+      <BorderLayout
+        testId="borderlayout-floatable"
+        width={600}
+        height={400}
+        regions={[
+          { region: 'north', height: 60, title: 'North', html: 'North' },
+          { region: 'south', height: 60, title: 'South', html: 'South' },
+          { region: 'west', width: 120, title: 'West', html: 'West', collapsible: true, floatable: true },
+          { region: 'east', width: 120, title: 'East', html: 'East', collapsible: true, floatable: true },
+          { region: 'center', title: 'Center', html: 'Center' },
+        ]}
+      />
+      {/* Viewport 演示（Ext.Viewport）：全屏 border 容器，复刻真实 Ext.Viewport 的 DOM
+           （div.x-viewport > .x-border-layout-ct > .x-border-panel 区域，区域 borderless）。
+           容器 600x400，与 golden #viewport 同结构、同尺寸，供像素对比。 */}
+      <Viewport
+        testId="viewport"
+        width={600}
+        height={400}
+        regions={[
+          { region: 'north', height: 60, title: 'North', html: 'North' },
+          { region: 'south', height: 60, title: 'South', html: 'South' },
+          { region: 'west', width: 120, title: 'West', html: 'West' },
+          { region: 'east', width: 120, title: 'East', html: 'East' },
+          { region: 'center', title: 'Center', html: 'Center' },
+        ]}
+      />
+      {/* Viewport 动态演示：通过 ref 调用句柄运行时增删 region / 改尺寸。 */}
+      <ViewportDynamicDemo />
+      {/* CardLayout 演示（Ext.layout.CardLayout）：一组卡片，同一时刻仅激活卡片可见，其余 display:none。
+          容器 300x200，与 golden #cardlayout 同结构同尺寸，供像素对比。 */}
+      <div data-testid="cardlayout" style={{ width: 300, height: 200 }}>
+        <CardLayout
+          width={300}
+          height={200}
+          items={[
+            { title: 'Card 1', html: '<p>Card 1 content</p>' },
+            { title: 'Card 2', html: '<p>Card 2 content</p>' },
+            { title: 'Card 3', html: '<p>Card 3 content</p>' },
+          ]}
+        />
+      </div>
+      {/* AnchorLayout 演示（Ext.layout.AnchorLayout）：子面板按 anchor 字符串（百分比/偏移）定位。
+          容器 400x300，与 golden #anchorlayout 同结构同尺寸，供像素对比。 */}
+      <AnchorLayout
+        testId="anchorlayout"
+        width={400}
+        height={300}
+        items={[
+          { title: 'A', html: 'A', anchor: '100% 40%' },
+          { title: 'B', html: 'B', anchor: '100% 40%' },
+          { title: 'C', html: 'C', anchor: '50% 20%' },
+        ]}
+      />
+      {/* FitLayout 演示（Ext.layout.FitLayout）：唯一子面板铺满容器，容器 400x300，
+          与 golden #fitlayout 同结构同尺寸，供像素对比。 */}
+      <FitLayout
+        testId="fitlayout"
+        width={400}
+        height={300}
+        item={{ title: 'Fit Panel', html: '<p>Fit content</p>' }}
+      />
+      {/* ColumnLayout 演示（Ext.layout.ColumnLayout）：固定列 + 比例列混排，容器宽 600，与 golden #columnlayout 同值。 */}
+      <ColumnLayout
+        testId="columnlayout"
+        width={600}
+        items={[
+          { title: '固定 150', html: 'A', width: 150 },
+          { title: '比例 0.3', html: 'B', columnWidth: 0.3 },
+          { title: '比例 0.4', html: 'C', columnWidth: 0.4 },
+          { title: '固定 100', html: 'D', width: 100 },
+        ]}
+      />
+      {/* Grid 展示（表头 + 数据行 + 斑马纹 + 选中行）。autoHeight，与 golden 对齐。 */}
+      <div data-testid="grid" style={{ width: 500 }}>
+        <Grid
+          title="用户列表"
+          width={500}
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 100 },
+            { header: '邮箱', dataIndex: 'email', width: 180 },
+            { header: '电话', dataIndex: 'phone', width: 140 },
+            { header: '年龄', dataIndex: 'age', width: 80, align: 'right' },
+          ]}
+          data={[
+            { name: '张三', email: 'zhangsan@example.com', phone: '13800138000', age: 28 },
+            { name: '李四', email: 'lisi@example.com', phone: '13900139000', age: 32 },
+            { name: '王五', email: 'wangwu@example.com', phone: '13700137000', age: 45 },
+            { name: '赵六', email: 'zhaoliu@example.com', phone: '13600136000', age: 23 },
+            { name: '钱七', email: 'qianqi@example.com', phone: '13500135000', age: 37 },
+            { name: '孙八', email: 'sunba@example.com', phone: '13400134000', age: 29 },
+          ]}
+          selectedRow={2}
+        />
+      </div>
+      {/* Grid 列菜单隐藏列演示（enableColumnHide 默认：邮箱列 hidden:true 初始隐藏，表头 hd-btn 点击打开列显示菜单）。与 golden #grid-colmenu 同结构供像素对比。 */}
+      <div data-testid="grid-colmenu" style={{ width: 500 }}>
+        <Grid
+          title="列可隐藏的列表"
+          width={500}
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 100 },
+            { header: '邮箱', dataIndex: 'email', width: 180, hidden: true },
+            { header: '电话', dataIndex: 'phone', width: 140 },
+            { header: '年龄', dataIndex: 'age', width: 80, align: 'right' },
+          ]}
+          data={[
+            { name: '张三', email: 'zhangsan@example.com', phone: '13800138000', age: 28 },
+            { name: '李四', email: 'lisi@example.com', phone: '13900139000', age: 32 },
+            { name: '王五', email: 'wangwu@example.com', phone: '13700137000', age: 45 },
+          ]}
+        />
+      </div>
+      {/* Grid 行选择展示（checkbox 模式：勾选列 + 行点击单选 + 表头全选）。默认无选中，与 golden #grid-select 同结构供像素对比。 */}
+      <div data-testid="grid-select" style={{ width: 390 }}>
+        <Grid
+          title="可勾选用户列表"
+          width={390}
+          selectionMode="checkbox"
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 100 },
+            { header: '邮箱', dataIndex: 'email', width: 150 },
+            { header: '电话', dataIndex: 'phone', width: 120 },
+          ]}
+          data={[
+            { name: '张三', email: 'zhangsan@example.com', phone: '13800138000' },
+            { name: '李四', email: 'lisi@example.com', phone: '13900139000' },
+            { name: '王五', email: 'wangwu@example.com', phone: '13700137000' },
+            { name: '赵六', email: 'zhaoliu@example.com', phone: '13600136000' },
+          ]}
+        />
+      </div>
+      {/* Grid 列拖拽重排演示（enableColumnReorder：拖拽表头整列移动，隐藏列保留在尾部）。 */}
+      <div data-testid="grid-reorder" style={{ width: 480 }}>
+        <Grid
+          title="可重排列"
+          width={480}
+          enableColumnReorder
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 120 },
+            { header: '邮箱', dataIndex: 'email', width: 160 },
+            { header: '电话', dataIndex: 'phone', width: 140 },
+            { header: '部门', dataIndex: 'dept', width: 100 },
+          ]}
+          data={[
+            { name: '张三', email: 'zhangsan@example.com', phone: '13800138000', dept: '研发' },
+            { name: '李四', email: 'lisi@example.com', phone: '13900139000', dept: '市场' },
+            { name: '王五', email: 'wangwu@example.com', phone: '13700137000', dept: '研发' },
+          ]}
+        />
+      </div>
+      {/* Grid 行拖拽重排演示（enableRowReorder：拖动数据行改变底层顺序，插入线指示落点）。 */}
+      <div data-testid="grid-rowreorder" style={{ width: 480 }}>
+        <Grid
+          title="可重排行"
+          width={480}
+          enableRowReorder
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 120 },
+            { header: '邮箱', dataIndex: 'email', width: 200 },
+            { header: '部门', dataIndex: 'dept', width: 160 },
+          ]}
+          data={[
+            { name: '张三', email: 'zhangsan@example.com', dept: '研发' },
+            { name: '李四', email: 'lisi@example.com', dept: '市场' },
+            { name: '王五', email: 'wangwu@example.com', dept: '研发' },
+            { name: '赵六', email: 'zhaoliu@example.com', dept: '财务' },
+            { name: '钱七', email: 'qianqi@example.com', dept: '市场' },
+          ]}
+        />
+      </div>
+      {/* Grid 列动态增删（addColumn/removeColumn 等价 Ext ColumnModel 运行时增删；沿用双轨，不破坏任何保真基线）。无 golden 对应，不入保真循环。 */}
+      <div data-testid="grid-coldynamic" style={{ width: 480 }}>
+        <GridColDynamicDemo />
+      </div>
+      {/* Grid 分组展示（GroupingView：按部门分组，分组头栏 + 组内行。列宽和=面板宽 480，与 golden #grouping 同结构供像素对比。 */}
+      <div data-testid="grouping" style={{ width: 480 }}>
+        <Grid
+          title="分组示例"
+          width={480}
+          groupField="dept"
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 120 },
+            { header: '部门', dataIndex: 'dept', width: 200 },
+            { header: '年龄', dataIndex: 'age', width: 160, align: 'right' },
+          ]}
+          data={[
+            { name: '张三', dept: '研发', age: 28 },
+            { name: '李四', dept: '研发', age: 32 },
+            { name: '王五', dept: '市场', age: 45 },
+            { name: '赵六', dept: '市场', age: 23 },
+            { name: '钱七', dept: '市场', age: 37 },
+            { name: '孙八', dept: '财务', age: 29 },
+          ]}
+        />
+      </div>
+      {/* Grid 分组汇总展示（GroupSummary：在分组基础上给列声明 summaryType 渲染每组底部汇总行；
+          样式复用 ExtJS 官方 examples/ux/css/GroupSummary.css，零新增手写 CSS） */}
+      <div data-testid="groupsummary" style={{ width: 480 }}>
+        <Grid
+          title="分组汇总示例"
+          width={480}
+          groupField="dept"
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 120 },
+            { header: '部门', dataIndex: 'dept', width: 200 },
+            { header: '薪资', dataIndex: 'salary', width: 90, align: 'right', summaryType: 'sum', summaryRenderer: (v) => '合计 ' + v },
+            { header: '年龄', dataIndex: 'age', width: 70, align: 'right', summaryType: 'average' },
+          ]}
+          data={[
+            { name: '张三', dept: '研发', salary: 12000, age: 28 },
+            { name: '李四', dept: '研发', salary: 15000, age: 32 },
+            { name: '王五', dept: '市场', salary: 9000, age: 45 },
+            { name: '赵六', dept: '市场', salary: 11000, age: 23 },
+            { name: '钱七', dept: '市场', salary: 8000, age: 37 },
+            { name: '孙八', dept: '财务', salary: 13000, age: 29 },
+          ]}
+        />
+      </div>
+      {/* RowEditor 行编辑器展示（双击行编辑，保存写回数据；样式复用 ExtJS 官方 RowEditor.css） */}
+      <RowEditorDemo />
+      {/* ColumnHeaderGroup 列分组表头展示（表头顶部跨列分组；样式复用 ExtJS 官方 ColumnHeaderGroup.css） */}
+      <ColumnHeaderGroupDemo />
+      {/* LockingGridView 锁定列视图展示（前两列锁定，右侧横向滚动，纵向同步；样式复用 ExtJS 官方 LockingGridView.css） */}
+      <LockingViewDemo />
+      {/* GridFilters 列过滤展示（表头菜单内 Filters 子菜单：字符串/数字区间/日期/列表/布尔；本地过滤） */}
+      <GridFiltersDemo />
+      {/* GridFilters 经典官方示例复现（examples/grid-filtering/grid-filter-local：六列+工具栏 Clear/Show） */}
+      <GridFilterLocalDemo />
+      {/* TableGrid 保真（对齐 Ext.ux.grid.TableGrid / examples/grid/from-markup：由 HTML 表格标记生成 Grid） */}
+      <TableGridDemo />
+      {/* EditorGrid 展示（可编辑 Grid：姓名/年龄单击编辑，与 golden 同款） */}
+      <div data-testid="editorgrid" style={{ width: 500 }}>
+        <EditorGrid
+          title="可编辑用户列表"
+          width={500}
+          columns={[
+            { header: '姓名', dataIndex: 'name', width: 100, editor: true },
+            { header: '邮箱', dataIndex: 'email', width: 180 },
+            { header: '电话', dataIndex: 'phone', width: 140 },
+            { header: '年龄', dataIndex: 'age', width: 80, align: 'right', editor: { type: 'number' } },
+          ]}
+          data={[
+            { name: '张三', email: 'zhangsan@example.com', phone: '13800138000', age: 28 },
+            { name: '李四', email: 'lisi@example.com', phone: '13900139000', age: 32 },
+            { name: '王五', email: 'wangwu@example.com', phone: '13700137000', age: 45 },
+          ]}
+        />
+      </div>
+
+      {/* EditorGrid 动态演示（Ext.EditorGrid）：通过 ref 调用句柄运行时增删改数据源 / 按坐标启动编辑。 */}
+      <EditorGridDynamicDemo />
+      {/* Window 展示（对话框：标题 + 关闭按钮 + 内容 + 底部按钮）。position:absolute 落入文档流供截图。 */}
+      <div data-testid="window" style={{ position: 'relative', width: 420, height: 260 }}>
+        <Window
+          title="用户详情"
+          width={400}
+          height={220}
+          buttons={[
+            { text: '确定' },
+            { text: '取消' },
+          ]}
+        >
+          <div style={{ padding: 10 }}>这是对话框的内容区域。</div>
+        </Window>
+      </div>
+      {/* Window 周边：maximizable + resizable（头部 maximize 工具 + 透明 SE/N 等缩放手柄） */}
+      <div data-testid="window-max" style={{ position: 'relative', width: 420, height: 260 }}>
+        <Window
+          title="窗口设置"
+          width={400}
+          height={220}
+          resizable
+          maximizable
+          buttons={[
+            { text: '确定' },
+            { text: '取消' },
+          ]}
+        >
+          <div style={{ padding: 10 }}>可缩放、可最大化的窗口。</div>
+        </Window>
+      </div>
+      {/* Window 周边：modal（.ext-el-mask 遮罩覆盖容器，容器 overflow:hidden 裁剪） */}
+      <div data-testid="window-modal" style={{ position: 'relative', width: 420, height: 320, overflow: 'hidden' }}>
+        <Window
+          title="确认操作"
+          width={360}
+          height={200}
+          left={30}
+          top={30}
+          modal
+          buttons={[
+            { text: '确认' },
+            { text: '取消' },
+          ]}
+        >
+          <div style={{ padding: 10 }}>此操作不可撤销。</div>
+        </Window>
+      </div>
+      {/* Window 最小化（minimizable 工具 + 运行时 minimize/expand 句柄）。
+          对齐 Ext 默认 minimize → fireEvent onMinimize（不整窗消失），这里折叠收起为仅标题栏，
+          标题栏 restore 展开工具或句柄 expand 可恢复。 */}
+      <div data-testid="window-min" style={{ width: 420 }}>
+        <div style={{ position: 'relative', height: 240 }}>
+          <Window
+            ref={winMinRef}
+            title="最小化演示"
+            width={400}
+            height={220}
+            minimizable
+            buttons={[{ text: '确定' }, { text: '取消' }]}
+          >
+            <div style={{ padding: 10 }}>可最小化的窗口。点击标题栏最小化工具，窗口折叠为仅标题栏；点标题栏上的展开工具恢复。</div>
+          </Window>
+        </div>
+        <div style={{ marginTop: 8 }}>
+          <Button text="展开（句柄）" onClick={() => winMinRef.current?.expand()} />
+        </div>
+      </div>
+      {/* Window 动态演示（对齐 Ext.Window 的运行时 show/hide/setTitle/maximize/restore 与内容替换）：
+          通过 WindowHandle 在运行时控制可见性、标题、最大化、内容。初始不可见。 */}
+      <div data-testid="window-dynamic" style={{ position: 'relative', width: 420, marginTop: 12 }}>
+        {/* 固定高度 relative 包裹盒：Window 为 absolute，需占位盒让下方控制按钮正常流入其下方（避免遮挡） */}
+        <div style={{ position: 'relative', height: 220 }}>
+          <Window
+            ref={winDynRef}
+            title="初始标题"
+            width={400}
+            height={220}
+            maximizable
+            visible={false}
+            buttons={[{ text: '确定' }, { text: '取消' }]}
+          >
+            <div style={{ padding: 10 }}>窗口初始内容</div>
+          </Window>
+        </div>
+        <div style={{ marginTop: 8 }}>
+          <Button text="打开窗口" onClick={() => winDynRef.current?.open()} />
+          <Button text="关闭窗口" onClick={() => winDynRef.current?.close()} style={{ marginLeft: 4 }} />
+          <Button text="改标题" onClick={() => winDynRef.current?.setTitle('动态标题')} style={{ marginLeft: 4 }} />
+          <Button text="最大化" onClick={() => winDynRef.current?.maximize()} style={{ marginLeft: 4 }} />
+          <Button text="还原" onClick={() => winDynRef.current?.restore()} style={{ marginLeft: 4 }} />
+          <Button
+            text="换内容"
+            onClick={() => winDynRef.current?.setContent(<div style={{ padding: 10 }}>已更新内容</div>)}
+            style={{ marginLeft: 4 }}
+          />
+        </div>
+      </div>
+      {/* PagingToolbar 展示（按钮 + 页码框 + displayInfo，与 golden 同款 50 条/页 10） */}
+      <div data-testid="paging" style={{ width: 520 }}>
+        <PagingToolbar total={50} pageSize={10} displayInfo activePage={1} />
+      </div>
+      {/* PagingToolbar 动态数据源（运行时 setTotal 重载 + 程序化翻页）。 */}
+      <div data-testid="paging-dynamic" style={{ width: 520, marginTop: 12 }}>
+        <PagingToolbar
+          ref={ptRef}
+          total={50}
+          pageSize={10}
+          displayInfo
+          activePage={1}
+        />
+        <div style={{ marginTop: 8 }}>
+          <Button text="重载 23 条" onClick={() => ptRef.current?.setTotal(23)} />
+          <Button text="重载 0 条" onClick={() => ptRef.current?.setTotal(0)} style={{ marginLeft: 4 }} />
+          <Button text="跳页 5" onClick={() => ptRef.current?.setPage(5)} style={{ marginLeft: 4 }} />
+          <Button text="下一页" onClick={() => ptRef.current?.next()} style={{ marginLeft: 4 }} />
+          <Button text="首页" onClick={() => ptRef.current?.first()} style={{ marginLeft: 4 }} />
+        </div>
+      </div>
+      {/* Menu 独立展示位（提前开发，单独验证保真）。Menu 是 position:absolute 浮层，
+          用 position:relative 容器包裹使其落入文档流供截图。 */}
+      <div data-testid="menu-standalone" style={{ position: 'relative', width: 160, height: 150 }}>
+        <Menu
+          items={[
+            { text: '新建' },
+            { text: '打开' },
+            { separator: true },
+            { text: '保存' },
+            { text: '删除', disabled: true },
+          ]}
+        />
+      </div>
+      {/* Menu 子菜单展示位（行为测试专用，不参与保真循环） */}
+      <div data-testid="menu-submenu" style={{ position: 'relative', width: 160, height: 150 }}>
+        <Menu
+          items={[
+            { text: '文件' },
+            { text: '编辑' },
+            { separator: true },
+            { text: '更多', menu: [{ text: '导出' }, { text: '导入' }] },
+            { text: '帮助', disabled: true },
+          ]}
+          onItemClick={(it) =>
+            document
+              .querySelector('[data-testid="menu-submenu"]')
+              ?.setAttribute('data-clicked', it.text ?? '')
+          }
+        />
+      </div>
+      {/* Form 展示（FormLayout + 多种字段）。labelWidth 与 Ext 默认一致。 */}
+      <div data-testid="form" style={{ width: 360 }}>
+        <FormPanel title="用户信息" width={360}>
+          <FormField id="f-name" fieldLabel="姓名">
+            <TextField width={200} emptyText="请输入姓名" />
+          </FormField>
+          <FormField id="f-email" fieldLabel="邮箱">
+            <TextField width={200} value="" />
+          </FormField>
+          <FormField id="f-age" fieldLabel="年龄">
+            <NumberField width={200} />
+          </FormField>
+          <FormField id="f-city" fieldLabel="城市">
+            <ComboBox width={200} data={[
+              { value: 'bj', text: '北京' },
+              { value: 'sh', text: '上海' },
+              { value: 'gz', text: '广州' },
+            ]} />
+          </FormField>
+          <FormField id="f-memo" fieldLabel="备注">
+            <TextArea width={320} rows={3} emptyText="多行备注" />
+          </FormField>
+          <FormField id="f-sub" fieldLabel="订阅" hideLabel>
+            <Checkbox boxLabel="接收邮件通知" defaultChecked />
+          </FormField>
+          <RadioGroup fieldLabel="性别" name="sex">
+            <Radio name="sex" boxLabel="男" inputValue="m" defaultChecked />
+            <Radio name="sex" boxLabel="女" inputValue="f" />
+          </RadioGroup>
+          <FormField id="f-birth" fieldLabel="出生日期">
+            <DateField width={200} />
+          </FormField>
+          <FormField id="f-time" fieldLabel="时间">
+            <TimeField width={200} />
+          </FormField>
+          {/* Hidden 无可见 UI，仅用于表单提交携带值 */}
+          <Hidden name="token" value="abc123" />
+        </FormPanel>
+      </div>
+      {/* DatePicker 独立常开展示位（供像素对比日历保真）。 */}
+      <div data-testid="datepicker" style={{ position: 'relative' }}>
+        <DatePicker />
+      </div>
+      {/* DatePicker 范围选择演示（rangeSelect：点击两日形成闭区间高亮，端点 x-date-selected + 区间内浅蓝背景）。
+          无 golden 对应，不入保真循环。 */}
+      <div data-testid="datepicker-range" style={{ position: 'relative', marginTop: 12 }}>
+        <DateRangeDemo />
+      </div>
+      {/* Form 校验演示（姓名必填 + 邮箱格式校验 + 外部校验按钮）。golden 静态 markInvalid 两字段对应无效态像素对比。 */}
+      <ValidateDemo />
+      {/* Form 校验联动演示（密码/确认密码跨字段校验 + 提交按钮随有效态联动）。无对应 golden，不入保真循环。 */}
+      <FormLinkageDemo />
+      {/* Tree 展示（TreePanel + 嵌套节点）。rootVisible:false 直接渲染子节点，与 golden 对齐（无外层 Panel）。 */}
+      <div data-testid="tree" style={{ width: 260 }}>
+        <TreePanel
+          rootVisible={false}
+          nodes={treeData}
+        />
+      </div>
+      {/* Tree 异步加载演示（loader 在展开无子节点节点时拉取子节点，等价于 AsyncTreeNode / TreeLoader）。 */}
+      <div data-testid="tree-async" style={{ width: 260 }}>
+        <TreePanel
+          rootVisible={false}
+          loader={(node) =>
+            new Promise<TreeNodeData[]>((resolve) => {
+              setTimeout(() => {
+                if (node.id === 'dept') {
+                  resolve([
+                    { id: 'dept-rd', text: '研发部' },
+                    { id: 'dept-mk', text: '市场部' },
+                  ]);
+                } else if (node.id === 'proj') {
+                  resolve([{ id: 'proj-1', text: '上线计划' }]);
+                } else {
+                  resolve([{ id: `${node.id}-leaf`, text: `${node.text} 详情` }]);
+                }
+              }, 150);
+            })
+          }
+          nodes={[
+            { id: 'dept', text: '部门', expandable: true },
+            { id: 'proj', text: '项目', expandable: true, children: [{ id: 'proj-seed', text: '种子任务' }] },
+          ]}
+        />
+      </div>
+      {/* Tree 节点拖拽重排演示（enableNodeReorder：同级 above/below 移动 + 拖入文件夹 append）。 */}
+      <div data-testid="tree-dd" style={{ width: 260 }}>
+        <TreePanel
+          rootVisible={false}
+          enableNodeReorder
+          nodes={[
+            { id: 'a', text: 'Alpha' },
+            { id: 'b', text: 'Beta' },
+            { id: 'c', text: 'Gamma' },
+            {
+              id: 'f', text: 'Folder', expanded: true, children: [
+                { id: 'f1', text: 'Item 1' },
+                { id: 'f2', text: 'Item 2' },
+              ],
+            },
+          ]}
+        />
+      </div>
+      {/* Tree 复选框级联演示（父节点 checked 控制子节点；子节点全选回写父节点）。 */}
+      <div data-testid="tree-check" style={{ width: 260 }}>
+        <TreePanel
+          rootVisible={false}
+          nodes={[
+            {
+              id: 'p1', text: '全选组', checked: true, expanded: true, children: [
+                { id: 'p1-a', text: '子项 A', checked: true },
+                { id: 'p1-b', text: '子项 B', checked: true },
+              ],
+            },
+            {
+              id: 'p2', text: '半选组', checked: false, expanded: true, children: [
+                { id: 'p2-a', text: '子项 C', checked: true },
+                { id: 'p2-b', text: '子项 D', checked: false },
+              ],
+            },
+          ]}
+        />
+      </div>
+      {/* Tree 动态增删（命令式句柄：appendChild / removeNode / updateNode / insertBefore）。 */}
+      <div data-testid="tree-dynamic" style={{ position: 'relative', width: 260, marginTop: 12 }}>
+        <TreePanel
+          ref={treeDynRef}
+          rootVisible={false}
+          nodes={[
+            {
+              id: 't1', text: '节点 1', expanded: true, children: [
+                { id: 't1a', text: '子节点 A' },
+                { id: 't1b', text: '子节点 B' },
+              ],
+            },
+            { id: 't2', text: '节点 2' },
+          ]}
+        />
+        <div style={{ marginTop: 8 }}>
+          <Button text="添加子节点" onClick={() => treeDynRef.current?.appendChild('t1', { id: 't' + Date.now(), text: '新子节点' })} />
+          <Button text="删除节点2" onClick={() => treeDynRef.current?.removeNode('t2')} style={{ marginLeft: 4 }} />
+          <Button text="重命名节点1" onClick={() => treeDynRef.current?.updateNode('t1', { text: '节点一(改)' })} style={{ marginLeft: 4 }} />
+          <Button text="插入到节点2前" onClick={() => treeDynRef.current?.insertBefore('t2', { id: 't' + Date.now(), text: '插入节点' })} style={{ marginLeft: 4 }} />
+          <Button text="添加根节点" onClick={() => treeDynRef.current?.appendChild(null, { id: 't' + Date.now(), text: '新根节点' })} style={{ marginLeft: 4 }} />
+        </div>
+      </div>
+      {/* ComboBox 独立展示（预选 'sh'，与 golden 的 #combo 同款；下拉展开态供像素对比）。 */}
+      <div data-testid="combo" style={{ width: 200 }}>
+        <ComboBox
+          width={200}
+          value={comboValue}
+          onChange={setComboValue}
+          data={[
+            { value: 'bj', text: '北京' },
+            { value: 'sh', text: '上海' },
+            { value: 'gz', text: '广州' },
+          ]}
+        />
+      </div>
+      {/* ComboBox 过滤演示：键入即按 text/value 过滤下拉项并展开，选中回填 display。 */}
+      <div data-testid="combo-filter" style={{ width: 220 }}>
+        <ComboBox
+          width={220}
+          value={filterValue}
+          onChange={setFilterValue}
+          data={[
+            { value: 'bj', text: '北京' },
+            { value: 'sh', text: '上海' },
+            { value: 'gz', text: '广州' },
+            { value: 'sz', text: '深圳' },
+            { value: 'hz', text: '杭州' },
+            { value: 'cd', text: '成都' },
+            { value: 'wh', text: '武汉' },
+            { value: 'xa', text: '西安' },
+          ]}
+        />
+      </div>
+      {/* ComboBox typeAhead 演示：键入前缀唯一匹配则自动补全剩余文本并高亮补全部分。 */}
+      <div data-testid="combo-typeahead" style={{ width: 220 }}>
+        <ComboBox
+          width={220}
+          typeAhead
+          data={[
+            { value: 'apple', text: 'Apple' },
+            { value: 'apricot', text: 'Apricot' },
+            { value: 'banana', text: 'Banana' },
+            { value: 'cherry', text: 'Cherry' },
+            { value: 'grape', text: 'Grape' },
+          ]}
+        />
+      </div>
+      {/* ComboBox 动态数据源演示（对齐 Ext combo.getStore().loadData / add / remove / setValue）。 */}
+      <div data-testid="combo-dynamic" style={{ width: 220, marginTop: 12 }}>
+        <ComboBox
+          ref={comboDynRef}
+          width={220}
+          value={comboDynValue}
+          onChange={setComboDynValue}
+          data={[
+            { value: 'bj', text: '北京' },
+            { value: 'sh', text: '上海' },
+            { value: 'gz', text: '广州' },
+          ]}
+        />
+        <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+          <Button text="添加 深圳" onClick={() => comboDynRef.current?.addItem({ value: 'sz', text: '深圳' })} />
+          <Button text="移除 上海" onClick={() => comboDynRef.current?.removeItem('sh')} />
+          <Button text="换源(新地市)" onClick={() => comboDynRef.current?.setData([
+            { value: 'nj', text: '南京' },
+            { value: 'hz', text: '杭州' },
+            { value: 'su', text: '苏州' },
+          ])} />
+        </div>
+      </div>
+      {/* Slider 滑块演示（水平 value=50 width=200 + 垂直 value=30 height=200），与 golden 的 #slider 同参数，供像素对比。 */}
+      <div data-testid="slider" style={{ display: 'flex', gap: 40, alignItems: 'flex-start' }}>
+        <div>
+          <div style={{ marginBottom: 4 }}>水平：<span data-testid="slider-h-val">{sliderH}</span></div>
+          <Slider
+            width={200}
+            defaultValue={50}
+            onChange={setSliderH}
+            onChangeComplete={setSliderH}
+          />
+        </div>
+        <div>
+          <div style={{ marginBottom: 4 }}>垂直：<span data-testid="slider-v-val">{sliderV}</span></div>
+          <Slider
+            height={200}
+            defaultValue={30}
+            vertical
+            onChange={setSliderV}
+            onChangeComplete={setSliderV}
+          />
+        </div>
+      </div>
+
+      {/* ProgressBar 演示（有文字 value=0.5 + 无文字 value=0.3，width=200），与 golden 的 #progress 同参数，供像素对比。 */}
+      <div data-testid="progress" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <ProgressBar id="progress-fill" width={200} value={progressVal} text={progressTxt} />
+        <ProgressBar id="progress-nofill" width={200} value={0.3} />
+      </div>
+      <Button text="进度 +30%" onClick={() => { setProgressVal(0.8); setProgressTxt('加载中 80%'); }} />
+      <Button text="进度重置" onClick={() => { setProgressVal(0); setProgressTxt(''); }} />
+
+      {/* ProgressBar 动态：通过句柄运行时改写进度/文字/宽度/reset，验证 forwardRef API 等效 Ext.ProgressBar。 */}
+      <div data-testid="progressbar-dynamic" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <ProgressBar id="pb-dyn" ref={pbDynRef} width={220} value={0.2} text="上传中 20%" />
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          <Button text="句柄 +40%" onClick={() => pbDynRef.current?.setProgress((pbDynRef.current.getValue() + 0.4), `上传中 ${Math.round((pbDynRef.current!.getValue() + 0.4) * 100)}%`)} />
+          <Button text="句柄改宽" onClick={() => pbDynRef.current?.setWidth(320)} />
+          <Button text="句柄 reset" onClick={() => pbDynRef.current?.reset()} />
+        </div>
+      </div>
+
+
+      {/* ColorPalette 演示（42 色，初始选中 #993300），与 golden #colorpalette 同参数，供像素对比。 */}
+      <div data-testid="colorpalette" style={{ position: 'relative', width: 150 }}>
+        <ColorPalette value="#993300" />
+      </div>
+
+      {/* ColorPalette 动态：句柄运行时增删色块、替换调色板、选中切换 */}
+      <div data-testid="colorpalette-dynamic" style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginTop: 12 }}>
+        <ColorPalette ref={palDynRef} value="#FF0000" />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <Button text="句柄加色" onClick={() => palDynRef.current?.addColor('123456')} />
+          <Button text="句柄删红" onClick={() => palDynRef.current?.removeColor('#FF0000')} />
+          <Button text="句柄替换" onClick={() => palDynRef.current?.setColors(['FFFFFF', '000000', '00FF00'])} />
+          <Button text="句柄选绿" onClick={() => palDynRef.current?.select('00FF00')} />
+        </div>
+      </div>
+
+      {/* Resizable 演示（pinned 全句柄，200×120 蓝底），与 golden #resizable 同参数，供像素对比。
+          wrapper 仅留白避免相邻演示压迫 6px 句柄条；el 自身即 #resizable。 */}
+      <div data-testid="resizable-wrap" style={{ position: 'relative', width: 240, height: 160 }}>
+        <Resizable
+          id="resizable"
+          testId="resizable"
+          width={200}
+          height={120}
+          pinned
+          handles="all"
+          minWidth={20}
+          minHeight={20}
+          style={{ background: '#c3d9ff' }}
+        />
+      </div>
+
+      {/* Box 布局演示（HBox / VBox，纯布局容器，复用 ext-all.css 的 .x-box* 规则零契约破坏）。
+          hbox 与 golden #box-hbox 同参数；vbox 与 golden #box-vbox 同参数。 */}
+      <Box
+        testId="box-hbox"
+        layout="hbox"
+        width={400}
+        height={200}
+        pack={hboxPack}
+        items={[
+          { width: 80, height: 80, style: { background: '#f0c0c0' } },
+          { width: 120, height: 60, style: { background: '#c0f0c0' } },
+          { width: 100, height: 100, style: { background: '#c0c0f0' } },
+        ]}
+      />
+      <Box
+        testId="box-vbox"
+        layout="vbox"
+        width={400}
+        height={200}
+        items={[
+          { width: 300, height: 50, style: { background: '#f0c0c0' } },
+          { width: 200, height: 70, style: { background: '#c0f0c0' } },
+          { width: 250, height: 60, style: { background: '#c0c0f0' } },
+        ]}
+      />
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <Button text="HBox pack 切换" onClick={() => setHboxPack((p) => (p === 'start' ? 'center' : 'start'))} />
+      </div>
+
+      {/* SplitButton 演示（Ext.SplitButton：主体走 handler、箭头展开菜单），与 golden #splitbutton 同参数。 */}
+      <div data-testid="splitbutton" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <Button
+          split
+          text="Options"
+          handler={() => {}}
+          menu={[
+            { text: 'Item 1', handler: () => {} },
+            { text: 'Item 2', handler: () => {} },
+            { text: 'Item 3', handler: () => {} },
+          ]}
+        />
+      </div>
+
+      {/* CycleButton 演示（Ext.CycleButton：主体点击循环切换、箭头展开菜单），与 golden #cyclebutton 同参数。 */}
+      <div data-testid="cyclebutton" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <CycleButton
+          showText
+          prependText="View as "
+          items={[
+            { text: 'text only', checked: true },
+            { text: 'HTML' },
+            { text: 'XML' },
+          ]}
+        />
+      </div>
+
+      {/* CycleButton 动态：句柄运行时增删改选项、切换激活项 */}
+      <div data-testid="cyclebutton-dynamic" style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 12 }}>
+        <CycleButton
+          ref={cycDynRef}
+          showText
+          prependText="View as "
+          items={[
+            { text: 'text only', checked: true },
+            { text: 'HTML' },
+            { text: 'XML' },
+          ]}
+        />
+        <Button text="句柄加项" onClick={() => cycDynRef.current?.addItem({ text: 'JSON' })} />
+        <Button text="句柄删首个" onClick={() => cycDynRef.current?.removeItem(0)} />
+        <Button text="句柄改标签" onClick={() => cycDynRef.current?.updateItem(0, { text: 'plain text' })} />
+        <Button text="句柄切第二项" onClick={() => cycDynRef.current?.setActive(1)} />
+      </div>
+
+      {/* DataView 演示（Ext.DataView：容器 x-data-view + 按 tpl 渲染 x-view-item，点击/拖拽框选），
+          与 golden #dataview 同参数（6 项、预选 index 1）。 */}
+      <div data-testid="dataview" style={{ width: 220 }}>
+        <DataView
+          multiSelect
+          selected={1}
+          data={[
+            { text: 'Item 1', value: '1' },
+            { text: 'Item 2', value: '2' },
+            { text: 'Item 3', value: '3' },
+            { text: 'Item 4', value: '4' },
+            { text: 'Item 5', value: '5' },
+            { text: 'Item 6', value: '6' },
+          ]}
+        />
+      </div>
+
+      {/* DataView 空数据演示（emptyText：data 为空时渲染提示节点，无 golden 对应，不入保真循环）。 */}
+      <div data-testid="dataview-empty" style={{ width: 220 }}>
+        <DataView multiSelect emptyText="没有数据" data={[]} />
+      </div>
+
+      {/* DataView 拖拽框选演示（multiSelect + 固定高度留出底部空白起拖区，供 rubber-band select 行为测试；无 golden 对应）。 */}
+      <div data-testid="dataview-drag" style={{ width: 220 }}>
+        <DataView
+          multiSelect
+          selected={[]}
+          height={260}
+          data={[
+            { text: 'Item 1', value: '1' },
+            { text: 'Item 2', value: '2' },
+            { text: 'Item 3', value: '3' },
+            { text: 'Item 4', value: '4' },
+          ]}
+        />
+      </div>
+
+      {/* DataView 动态数据源（addItem/removeByIndex/getItems/setSelected）：种子 4 项，按钮运行时增减；无 golden 对应。 */}
+      <div data-testid="dataview-dynamic" style={{ width: 220 }}>
+        <DataView
+          ref={dvRef}
+          multiSelect
+          selected={[0]}
+          data={[
+            { text: 'A', value: 'a' },
+            { text: 'B', value: 'b' },
+            { text: 'C', value: 'c' },
+            { text: 'D', value: 'd' },
+          ]}
+        />
+        <div style={{ marginTop: 8 }}>
+          <Button text="添加项" onClick={() => dvRef.current?.addItem({ text: `X${nextDv.current++}`, value: 'x' })} />
+          <Button text="删除首项" onClick={() => dvRef.current?.removeByIndex(0)} style={{ marginLeft: 4 }} />
+          <Button text="清空" onClick={() => dvRef.current?.clear()} style={{ marginLeft: 4 }} />
+          <Button text="选中全部" onClick={() => {
+            const n = dvRef.current?.getItems().length ?? 0;
+            dvRef.current?.setSelected(Array.from({ length: n }, (_, i) => i));
+          }} style={{ marginLeft: 4 }} />
+        </div>
+      </div>
+
+      {/* ListView 演示（Ext.list.ListView：列头 + 数据行，点击行选中、悬停高亮），与 golden #listview 同参数。 */}
+      <div data-testid="listview" style={{ width: 320 }}>
+        <ListView
+          width={320}
+          height={200}
+          multiSelect
+          value={[1]}
+          columns={[
+            { header: 'Name', dataIndex: 'name', width: 0.4 },
+            { header: 'Size', dataIndex: 'size', width: 0.2, align: 'right' },
+            { header: 'Modified', dataIndex: 'modified', width: 0.4 },
+          ]}
+          data={[
+            { name: 'report.pdf', size: '2067', modified: '08-12 09:30' },
+            { name: 'budget.xls', size: '1530', modified: '08-13 14:05' },
+            { name: 'notes.txt', size: '412', modified: '08-14 11:20' },
+            { name: 'photo.jpg', size: '8810', modified: '08-15 18:44' },
+            { name: 'index.html', size: '2333', modified: '08-16 08:01' },
+            { name: 'data.csv', size: '991', modified: '08-17 22:13' },
+          ]}
+        />
+      </div>
+
+      {/* ListView 动态增删演示（ref.add / ref.removeByIndex，对齐 Ext store add/remove），无 golden 对应、不入保真循环。 */}
+      <div data-testid="listview-dynamic" style={{ width: 320, marginTop: 24 }}>
+        <DynamicListViewDemo />
+      </div>
+
+      {/* Editor 演示（Ext.Editor：行内编辑浮层，x-editor > x-form-field-wrap > input.x-form-text），与 golden #editor 同参数。 */}
+      <div data-testid="editor" style={{ position: 'relative', width: 300, height: 50 }}>
+        <Editor value="Edit me" boundText="Edit me" width={180} height={22} />
+      </div>
+
+      {/* Editor 动态演示（Ext.Editor）：通过 ref 调用句柄运行时 startEdit / setValue / completeEdit / cancelEdit。 */}
+      <EditorDynamicDemo />
+
+      {/* TreeGrid 演示（3 列 Task/Duration/Assigned To，rootVisible:false），与 golden #treegrid 同参数。 */}
+      <div data-testid="treegrid" style={{ width: 500 }}>
+        <TreeGrid
+          title="Core Team Projects"
+          width={500}
+          height={300}
+          columns={[
+            { header: 'Task', dataIndex: 'task', width: 230 },
+            { header: 'Duration', dataIndex: 'duration', width: 100, align: 'center' },
+            { header: 'Assigned To', dataIndex: 'user', width: 150 },
+          ]}
+          data={treegridData}
+        />
+      </div>
+      {/* TreeGrid 动态演示（forwardRef + 句柄运行时增删改节点 / 展开折叠 / 选中）。 */}
+      <div data-testid="treegrid-dynamic" style={{ width: 500, marginTop: 12 }}>
+        <TreeGridDynamicDemo />
+      </div>
+
+      {/* FieldSet 动态字段增删演示（对齐 Ext FieldSet.add/remove）：种子 2 个联系人，按钮添加、每行自带删除按钮移除。无 golden 对应，不入保真循环。 */}
+      <DynamicFieldSetDemo />
+      {/* FieldSet 演示（独立 collapsible fieldset，legend 折叠工具 + 两个 textfield），与 golden #fieldset 同参数。 */}
+      <div data-testid="fieldset" style={{ width: 360 }}>
+        <FieldSet title="联系方式" collapsible width={360}>
+          <FormField fieldLabel="姓名">
+            <TextField width={200} />
+          </FormField>
+          <FormField fieldLabel="电话">
+            <TextField width={200} />
+          </FormField>
+        </FieldSet>
+      </div>
+
+      {/* MessageBox 演示（Ext.Msg.show：QUESTION 图标 + Yes/No/Cancel 居中），与 golden .x-window-dlg 同参数。
+          对话框为绝对定位，置于相对容器避免覆盖其他演示；点击关闭/任意按钮后隐藏（onClose 行为可测）。 */}
+      <div data-testid="messagebox" style={{ position: 'relative', width: 600, height: 170 }}>
+        {showMessageBox && (
+          <MessageBox
+            title="保存修改？"
+            msg="您正在关闭一个包含未保存修改的标签页。是否保存这些修改？"
+            width={400}
+            icon="question"
+            onClose={() => setShowMessageBox(false)}
+          buttons={[
+            { text: 'Yes', onClick: () => setShowMessageBox(false), width: 75 },
+            { text: 'No', onClick: () => setShowMessageBox(false), width: 75 },
+            { text: 'Cancel', onClick: () => setShowMessageBox(false), width: 75 },
+          ]}
+          />
+        )}
+      </div>
+      {/* MessageBox 动态演示（forwardRef + 句柄运行时改写标题/消息/图标与 show/hide）。 */}
+      <div data-testid="messagebox-dynamic" style={{ position: 'relative', width: 600, height: 170, marginTop: 8 }}>
+        <MessageBoxDynamicDemo />
+      </div>
+
+      {/* ToolTip 演示（固定位置 show，x-tip 圆角 + 标题 + 正文），与 golden #tooltip 同参数，供像素对比。 */}
+      <div data-testid="tooltip" style={{ position: 'relative', width: 240, height: 90 }}>
+        <ToolTip title="提示标题" html="这是提示内容，用于说明操作。" width={200} x={0} y={0} />
+      </div>
+      {/* ToolTip hover 触发演示（行为测试用：悬停目标显示 / 移出隐藏） */}
+      <div data-testid="tooltip-hover" style={{ marginTop: 8 }}>
+        <span
+          id="tooltip-trigger"
+          style={{ display: 'inline-block', padding: '4px 10px', border: '1px solid #99bbe8', background: '#fff', cursor: 'help' }}
+        >
+          悬停查看提示
+        </span>
+        <ToolTip target="#tooltip-trigger" html="悬停触发的提示内容。" showDelay={0} hideDelay={200} />
+      </div>
+      {/* ToolTip 动态演示（forwardRef + 句柄运行时 show/hide/setTitle/setBody）。 */}
+      <div data-testid="tooltip-dynamic" style={{ position: 'relative', marginTop: 8, width: 240, height: 90 }}>
+        <ToolTipDynamicDemo />
+      </div>
+      {/* Accordion 演示（根 Panel + 多个可折叠子 Panel，互斥展开），与 golden #accordion 同参数，供像素对比。 */}
+      <div data-testid="accordion" style={{ position: 'relative', width: 260, height: 300 }}>
+        <Accordion
+          title="Accordion"
+          width={260}
+          height={300}
+          defaultActiveIndex={0}
+          items={[
+            { title: 'Panel 1', html: '<p>Panel 1 content</p>' },
+            { title: 'Panel 2', html: '<p>Panel 2 content</p>' },
+            { title: 'Panel 3', html: '<p>Panel 3 content</p>' },
+          ]}
+        />
+      </div>
+      {/* Accordion 动态：通过句柄运行时增删改子面板 + 切换激活项，验证 forwardRef 单源数组 API。 */}
+      <div data-testid="accordion-dynamic" style={{ position: 'relative', width: 260, height: 300, marginTop: 12 }}>
+        <Accordion
+          ref={accDynRef}
+          title="Accordion (dynamic)"
+          width={260}
+          height={300}
+          defaultActiveIndex={0}
+          items={[
+            { title: 'Panel A', html: '<p>Panel A content</p>' },
+            { title: 'Panel B', html: '<p>Panel B content</p>' },
+          ]}
+        />
+        <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+          <Button text="句柄加 Panel" onClick={() => accDynRef.current?.addItem({ title: 'Panel C', html: '<p>Panel C content</p>' })} />
+          <Button text="句柄删首个" onClick={() => accDynRef.current?.removeItem(0)} />
+          <Button text="句柄改标题" onClick={() => accDynRef.current?.updateItem(0, { title: 'Panel A*' })} />
+        </div>
+      </div>
+      {/* Accordion 隐藏折叠工具（hideCollapseTool）：不渲染 x-tool-toggle，仅标题点击生效。 */}
+      <div data-testid="accordion-hidetool" style={{ position: 'relative', width: 260, height: 300, marginTop: 12 }}>
+        <Accordion
+          title="Accordion (hideCollapseTool)"
+          width={260}
+          height={300}
+          defaultActiveIndex={0}
+          hideCollapseTool
+          items={[
+            { title: 'Panel 1', html: '<p>Panel 1 content</p>' },
+            { title: 'Panel 2', html: '<p>Panel 2 content</p>' },
+          ]}
+        />
+      </div>
+      {/* Accordion 展开项置顶（activeOnTop）：展开的子面板冒泡到顶部。 */}
+      <div data-testid="accordion-ontop" style={{ position: 'relative', width: 260, height: 300, marginTop: 12 }}>
+        <Accordion
+          title="Accordion (activeOnTop)"
+          width={260}
+          height={300}
+          defaultActiveIndex={0}
+          activeOnTop
+          items={[
+            { title: 'Panel 1', html: '<p>Panel 1 content</p>' },
+            { title: 'Panel 2', html: '<p>Panel 2 content</p>' },
+            { title: 'Panel 3', html: '<p>Panel 3 content</p>' },
+          ]}
+        />
+      </div>
+      {/* Accordion 受控激活（activeIndex）+ 事件（onActiveChange/per-item onExpand/onCollapse）。 */}
+      <div data-testid="accordion-controlled" style={{ position: 'relative', width: 260, height: 300, marginTop: 12 }}>
+        <Accordion
+          title="Accordion (controlled)"
+          width={260}
+          height={300}
+          activeIndex={activeControlled}
+          onActiveChange={setActiveControlled}
+          items={[
+            { title: 'Panel 1', html: '<p>Panel 1 content</p>', onExpand: () => setAccEvent('1-expand'), onCollapse: () => setAccEvent('1-collapse') },
+            { title: 'Panel 2', html: '<p>Panel 2 content</p>', onExpand: () => setAccEvent('2-expand'), onCollapse: () => setAccEvent('2-collapse') },
+            { title: 'Panel 3', html: '<p>Panel 3 content</p>', onExpand: () => setAccEvent('3-expand'), onCollapse: () => setAccEvent('3-collapse') },
+          ]}
+        />
+        <div style={{ marginTop: 8 }}>
+          <Button text="激活2" onClick={() => setActiveControlled(1)} />
+          <Button text="激活3" onClick={() => setActiveControlled(2)} style={{ marginLeft: 4 }} />
+        </div>
+        <div data-testid="accordion-event-log" style={{ marginTop: 4, fontSize: 11 }}>{accEvent}</div>
+      </div>
+      {/* TimeField 演示（ComboBox 子类，时间点下拉），与 golden #timefield 同参数，供像素对比。 */}
+      <div data-testid="timefield" style={{ position: 'relative', width: 200 }}>
+        <TimeField width={200} increment={30} />
+      </div>
+      {/* TimeField 动态数据源演示（对齐 Ext TimeField 的 store 运行时编辑：
+          透传 ComboBoxHandle 的 setData/addItem/removeItem）。 */}
+      <div data-testid="timefield-dynamic" style={{ position: 'relative', width: 220, marginTop: 12 }}>
+        <TimeField ref={tfDynRef} width={220} increment={30} onChange={setTfDynValue} value={tfDynValue} />
+        <div style={{ marginTop: 8 }}>
+          <Button text="15 分钟粒度" onClick={() => tfDynRef.current?.setData(genTimes(15))} />
+          <Button text="加 11:45 PM" onClick={() => tfDynRef.current?.addItem({ value: '11:45 PM', text: '11:45 PM' })} />
+          <Button
+            text="移除 12:00 AM"
+            onClick={() => tfDynRef.current?.removeItem('12:00 AM')}
+            style={{ marginLeft: 4 }}
+          />
+        </div>
+      </div>
+      {/* DateField 动态数据源演示（对齐 Ext.DateField 的运行时 setMinValue/setMaxValue/setDisabledDays）：
+          通过 DateFieldHandle 在运行时改写可选范围与禁用星期，验证 DatePicker 的 x-date-disabled 实时刷新。 */}
+      <div data-testid="datefield-dynamic" style={{ position: 'relative', width: 220, marginTop: 12 }}>
+        <DateField ref={dfDynRef} width={220} value="08/15/2026" format="m/d/Y" />
+        <div style={{ marginTop: 8 }}>
+          <Button text="限制 8 月内" onClick={() => { dfDynRef.current?.setMinDate(new Date(2026, 7, 1)); dfDynRef.current?.setMaxDate(new Date(2026, 7, 31)); }} />
+          <Button
+            text="禁周末"
+            onClick={() => dfDynRef.current?.setDisabledDays([0, 6])}
+            style={{ marginLeft: 4 }}
+          />
+          <Button
+            text="解除限制"
+            onClick={() => { dfDynRef.current?.setMinDate(null); dfDynRef.current?.setMaxDate(null); dfDynRef.current?.setDisabledDays([]); }}
+            style={{ marginLeft: 4 }}
+          />
+        </div>
+      </div>
+
+      {/* SplitBar 演示（Ext.SplitBar：被缩放区域 + 分隔条，拖拽改变宽度）。
+          与 golden #splitbar 同结构（resizing 160×120 + splitter 6×120，grid-split.gif grip，placement LEFT）。
+          testId 直接落在 SplitBar 根（flex 容器），对齐 golden #splitbar。
+          包裹为整行（width:100%）避免拖拽溢出（resizing 最大 260）压到同排 LoadMask 遮罩层。 */}
+      <div style={{ width: '100%' }}>
+        <SplitBar
+          testId="splitbar"
+          size={160}
+          thickness={120}
+          placement="left"
+          minSize={60}
+          maxSize={260}
+          resizingStyle={{ background: '#e0e8f5' }}
+          resizingContent={<div style={{ padding: 8 }}>左面板内容</div>}
+        />
+      </div>
+      {/* LoadMask 演示（Ext.LoadMask / Ext.Element.mask）：300×160 容器 + 遮罩层 + 居中 Loading 框。
+          与 golden #loadmask 同容器尺寸、同文案、同 x-masked 类，供像素对比。
+          testId 直接落在 LoadMask 根（x-masked 容器），对齐 golden #loadmask。 */}
+      <LoadMask
+        testId="loadmask"
+        loading={true}
+        msg="Loading..."
+        width={300}
+        height={160}
+      >
+        <div style={{ padding: 12, font: '11px tahoma,arial,sans-serif', color: '#333' }}>面板内容（遮罩下方）</div>
+      </LoadMask>
+      {/* 受控演示（仅行为验证，无 golden 对应）：loading=false 不应渲染遮罩；自定义文案应生效。 */}
+      <LoadMask testId="loadmask-off" loading={false} width={200} height={100}>
+        <div style={{ padding: 8 }}>无遮罩内容</div>
+      </LoadMask>
+      <LoadMask testId="loadmask-custom" loading={true} msg="数据加载中..." width={200} height={100}>
+        <div style={{ padding: 8 }}>自定义文案</div>
+      </LoadMask>
+      {/* ButtonGroup 演示（Ext.ButtonGroup）：frame 圆角分组 + 标题 + table 布局排按钮。
+          与 golden #buttongroup 同结构（title 'Clipboard'，columns 3，3 个文本按钮），供像素对比。
+          包裹为整行避免与相邻组件溢出重叠。 */}
+      <div style={{ width: '100%' }}>
+        <ButtonGroup
+          testId="buttongroup"
+          title="Clipboard"
+          columns={3}
+          items={[
+            { text: 'Paste' },
+            { text: 'Copy' },
+            { text: 'Cut' },
+          ]}
+        />
+      </div>
+      {/* 无标题变体（仅行为验证）：加 x-btn-group-notitle，不渲染标题头。 */}
+      <div style={{ width: '100%' }}>
+        <ButtonGroup
+          testId="buttongroup-notitle"
+          columns={2}
+          items={[
+            { text: 'Bold' },
+            { text: 'Italic' },
+          ]}
+        />
+      </div>
+      {/* StatusBar 演示（Ext.ux.StatusBar）：Toolbar 子类 + 贪婪状态文本元素（.x-status-text）。
+          与 golden #statusbar 同结构（text 'OK' + iconCls 'x-status-valid'，items 经 '->' 右对齐）。
+          包裹整行避免与相邻组件重叠。 */}
+      <div style={{ width: '100%' }}>
+        <StatusBar
+          testId="statusbar"
+          width={520}
+          text="OK"
+          iconCls="x-status-valid"
+          items={[
+            { text: 'A Button' },
+            '-',
+            'Plain Text',
+          ]}
+        />
+      </div>
+      {/* 右对齐变体（仅行为验证）：statusAlign 'right'，状态文本落在 .x-toolbar-right-row。 */}
+      <div style={{ width: '100%' }}>
+        <StatusBar
+          testId="statusbar-right"
+          width={520}
+          statusAlign="right"
+          text="就绪"
+          iconCls="x-status-valid"
+          items={[
+            { text: '刷新' },
+            '-',
+            '用户信息',
+          ]}
+        />
+      </div>
+      {/* 动态状态（仅行为验证）：按钮切换 showBusy / clearStatus。 */}
+      <div style={{ width: '100%' }}>
+        <DynamicStatusBar />
+      </div>
+      {/* DisplayField 演示（Ext.form.DisplayField）：独立渲染为裸 div.x-form-display-field。
+          与 golden #displayfield 同值（'状态：已启用'），容器固定 300px 保证等宽，供像素对比。 */}
+      <div style={{ width: 300 }}>
+        <DisplayField testId="displayfield" value="状态：已启用" />
+      </div>
+      {/* 表单内带标签变体（仅行为验证）：由 FormField 包裹为 x-form-item > label + x-form-element。 */}
+      <div style={{ width: 300 }}>
+        <FormField fieldLabel="名称" labelWidth={80}>
+          <DisplayField id="df-name" value="张三" />
+        </FormField>
+      </div>
+      {/* CheckboxGroup 演示（Ext.form.CheckboxGroup）：独立渲染为 x-form-check-group > 多列。
+          与 golden #checkgroup 同结构（columns:2，4 项 篮球/足球/排球/游泳），供像素对比。 */}
+      <div style={{ width: 300 }}>
+        <CheckboxGroup
+          testId="checkgroup"
+          columns={2}
+          items={[
+            { boxLabel: '篮球', inputValue: 'b' },
+            { boxLabel: '足球', inputValue: 'f' },
+            { boxLabel: '排球', inputValue: 'v' },
+            { boxLabel: '游泳', inputValue: 's' },
+          ]}
+        />
+      </div>
+      {/* CheckboxGroup 动态：通过句柄运行时增删改选项，验证 forwardRef 单源数组 API。 */}
+      <div data-testid="checkgroup-dynamic" style={{ width: 300, marginTop: 12 }}>
+        <CheckboxGroup
+          ref={cgDynRef}
+          testId="checkgroup-dyn"
+          columns={2}
+          items={[
+            { boxLabel: '篮球', inputValue: 'b' },
+            { boxLabel: '足球', inputValue: 'f' },
+          ]}
+        />
+        <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+          <Button text="句柄加项" onClick={() => cgDynRef.current?.addItem({ boxLabel: '排球', inputValue: 'v' })} />
+          <Button text="句柄删首个" onClick={() => cgDynRef.current?.removeItem(0)} />
+          <Button text="句柄改标签" onClick={() => cgDynRef.current?.updateItem(0, { boxLabel: '篮球*' })} />
+        </div>
+      </div>
+      {/* ButtonGroup 动态：通过句柄运行时增删改按钮，验证 forwardRef 单源数组 API。 */}
+      <div data-testid="buttongroup-dynamic" style={{ width: '100%', marginTop: 12 }}>
+        <ButtonGroup
+          ref={bgDynRef}
+          testId="buttongroup-dyn"
+          title="Tools"
+          columns={3}
+          items={[
+            { text: 'New' },
+            { text: 'Open' },
+          ]}
+        />
+        <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+          <Button text="句柄加按钮" onClick={() => bgDynRef.current?.addItem({ text: 'Save' })} />
+          <Button text="句柄删首个" onClick={() => bgDynRef.current?.removeItem(0)} />
+          <Button text="句柄改文本" onClick={() => bgDynRef.current?.updateItem(0, { text: 'New*' })} />
+        </div>
+      </div>
+      {/* SpinnerField 演示（Ext.ux.form.SpinnerField）：TriggerField 子类，wrap 内含 input + spinner-trigger + splitter。
+          与 golden #spinner 同结构、同宽（194），供像素对比。 */}
+      <div style={{ width: 200 }}>
+        <SpinnerField
+          testId="spinner"
+          width={194}
+          value={5}
+          minValue={0}
+          maxValue={100}
+          incrementValue={1}
+        />
+      </div>
+
+      {/* QuickTip 演示（Ext.QuickTips）：展示的 tip 与 ToolTip 同结构（x-tip 9 宫格圆角 + 标题 + 正文）。
+          保真：#quicktip 容器内强制可见（visible）静态渲染 tip，供像素对比。
+          行为：下方 #qt-demo 携带 data-qtip/data-qtitle，hover 触发全局 tip（showDelay=0 加速测试）。 */}
+      <div style={{ width: 240, height: 90, position: 'relative' }}>
+        <QuickTip
+          testId="quicktip"
+          title="提示标题"
+          html="这是提示内容，用于说明操作。"
+          width={200}
+          visible
+          x={0}
+          y={0}
+        />
+      </div>
+      <div style={{ width: 200 }}>
+        <div
+          id="qt-demo"
+          data-qtip="QuickTip 内容"
+          data-qtitle="快捷提示"
+          style={{ padding: 8, border: '1px solid #99bbe8', background: '#fff' }}
+        >
+          悬停我查看 QuickTip
+        </div>
+        <QuickTip target="#qt-demo" title="快捷提示" text="QuickTip 内容" showDelay={0} hideDelay={0} />
+      </div>
+      {/* QuickTip 动态演示：无 target，由 ref 句柄驱动显隐与内容。 */}
+      <QuickTipDynamicDemo />
+      {/* HtmlEditor 演示（Ext.form.HtmlEditor）：x-html-editor-wrap > x-html-editor-tb(工具栏) + 隐藏 textarea + iframe。
+          宽 520、高 200，与 golden #htmleditor 同值，供像素对比。 */}
+      <HtmlEditor
+        testId="htmleditor"
+        width={520}
+        height={200}
+        value="<p>初始内容</p>"
+      />
+      <HtmlEditorDynamicDemo />
+      {/* ColorMenu 演示（Ext.menu.ColorMenu）：plain 菜单内含 ColorPalette（40 色）。
+          触发按钮点击展开浮层 .x-color-menu，与 golden #colormenu 同结构，供像素对比。 */}
+      <div data-testid="colormenu" style={{ position: 'relative' }}>
+        <ColorMenuDemo />
+      </div>
+      <ColorMenuDynamicDemo />
+      {/* TableLayout 演示（Ext.layout.TableLayout）：3 列网格，含 colspan/rowspan 跨格。
+          宽 360、列宽合计=面板宽，与 golden #tablelayout 同结构供像素对比。 */}
+      <TableLayout
+        testId="tablelayout"
+        title="Table Layout"
+        width={360}
+        columns={3}
+        items={[
+          { title: 'A', html: '<div>内容 A</div>', height: 80 },
+          { title: 'B', html: '<div>内容 B</div>', height: 80, colspan: 2 },
+          { title: 'C', html: '<div>内容 C</div>', height: 120, rowspan: 2 },
+          { title: 'D', html: '<div>内容 D</div>', height: 80 },
+          { title: 'E', html: '<div>内容 E</div>', height: 80 },
+        ]}
+      />
+      {/* RowNumberer 演示（Ext.grid.RowNumberer）：首列为自动行号列，行号右对齐、列宽 23。
+          网格宽 400（列宽和 353，右侧留白与 golden 一致），与 golden #rownumberer 同值，供像素对比。 */}
+      <div data-testid="rownumberer" style={{ width: 400 }}>
+        <Grid
+          title="带行号的列表"
+          width={400}
+          columns={[
+            { type: 'rownumberer', header: '', dataIndex: '_' },
+            { header: '姓名', dataIndex: 'name', width: 80 },
+            { header: '代码', dataIndex: 'code', width: 50 },
+            { header: '描述', dataIndex: 'desc', width: 200 },
+          ]}
+          data={[
+            { name: 'Alpha', code: 'A1', desc: '第一行描述' },
+            { name: 'Beta', code: 'B2', desc: '第二行描述' },
+            { name: 'Gamma', code: 'G3', desc: '第三行描述' },
+            { name: 'Delta', code: 'D4', desc: '第四行描述' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+// 动态字段增删演示：对齐 Ext.form.FieldSet.add / remove。种子 2 个联系人，
+// 「添加联系人」调用 ref.add 追加一行（行内自带删除按钮，调用 ref.remove 移除自身）。
+function DynamicFieldSetDemo() {
+  const fsRef = useRef<FieldSetHandle>(null);
+  const counter = useRef(0);
+  const addContact = () => {
+    const id = `contact-${counter.current++}`;
+    fsRef.current?.add(
+      <div
+        key={id}
+        data-dyn-id={id}
+        style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+      >
+        <FormField fieldLabel="联系人" labelWidth={60}>
+          <TextField width={160} emptyText="输入姓名" />
+        </FormField>
+        <Button text="删除" onClick={() => fsRef.current?.remove(id)} />
+      </div>,
+      id,
+    );
+  };
+  return (
+    <div data-testid="form-dynamic" style={{ width: 360 }}>
+      <FieldSet ref={fsRef} title="联系人列表" collapsible width={360}>
+        <div data-dyn-id="seed-0" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <FormField fieldLabel="联系人" labelWidth={60}>
+            <TextField width={160} defaultValue="张三" />
+          </FormField>
+        </div>
+        <div data-dyn-id="seed-1" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <FormField fieldLabel="联系人" labelWidth={60}>
+            <TextField width={160} defaultValue="李四" />
+          </FormField>
+        </div>
+      </FieldSet>
+      <div style={{ marginTop: 8 }}>
+        <Button text="添加联系人" onClick={addContact} />
+      </div>
+    </div>
+  );
+}
+
+// Toolbar 动态增删演示：种子 2 个按钮；「添加按钮」追加一个可自删的动态按钮。
+// Toolbar 动态增删演示：种子 2 个按钮；「添加按钮」追加一个可自删的动态按钮。
+function DynamicToolbarDemo() {
+  const tbRef = useRef<ToolbarHandle>(null);
+  const counter = useRef(0);
+  const addBtn = () => {
+    const id = `dyn-${counter.current++}`;
+    tbRef.current?.add(
+      { xtype: 'button', text: `动态${counter.current}`, handler: () => tbRef.current?.remove(id) },
+      id,
+    );
+  };
+  return (
+    <div>
+      <Toolbar
+        ref={tbRef}
+        width={600}
+        items={[
+          { xtype: 'tbtext', text: '操作' },
+          { xtype: 'button', text: '刷新' },
+        ]}
+      />
+      <div style={{ marginTop: 8 }}>
+        <Button text="添加按钮" onClick={addBtn} />
+      </div>
+    </div>
+  );
+}
+
+// ToolTip 动态演示：通过 ref 调用句柄运行时显示/隐藏/改写标题与正文。
+function ToolTipDynamicDemo() {
+  const tipRef = useRef<ToolTipHandle>(null);
+  return (
+    <div style={{ position: 'relative' }}>
+      <ToolTip
+        ref={tipRef}
+        title="初始标题"
+        html="初始内容"
+        width={200}
+        x={0}
+        y={0}
+        visible={false}
+      />
+      <div style={{ position: 'absolute', top: 50, left: 0, display: 'flex', gap: 8 }}>
+        <Button text="句柄显示" onClick={() => tipRef.current?.show()} />
+        <Button text="句柄隐藏" onClick={() => tipRef.current?.hide()} />
+        <Button text="改标题" onClick={() => tipRef.current?.setTitle('运行时标题')} />
+        <Button text="改内容" onClick={() => tipRef.current?.setBody('运行时改写的提示内容。')} />
+      </div>
+    </div>
+  );
+}
+
+// TreeGrid 动态演示：通过 ref 调用句柄运行时增删改节点 / 展开折叠 / 选中。
+function TreeGridDynamicDemo() {
+  const gridRef = useRef<TreeGridHandle>(null);
+  const initData: TreeGridNode[] = [
+    {
+      id: 't1',
+      task: '项目 A',
+      duration: '5d',
+      user: '张三',
+      expanded: true,
+      children: [
+        { id: 't1-1', task: '子任务 A1', duration: '2d', user: '李四' },
+        { id: 't1-2', task: '子任务 A2', duration: '3d', user: '王五' },
+      ],
+    },
+    { id: 't2', task: '项目 B', duration: '3d', user: '赵六' },
+  ];
+  return (
+    <div>
+      <TreeGrid
+        ref={gridRef}
+        title="动态项目树"
+        width={500}
+        height={260}
+        columns={[
+          { header: 'Task', dataIndex: 'task', width: 230 },
+          { header: 'Duration', dataIndex: 'duration', width: 100, align: 'center' },
+          { header: 'Assigned To', dataIndex: 'user', width: 150 },
+        ]}
+        data={initData}
+      />
+      <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <Button text="句柄加顶层节点" onClick={() => gridRef.current?.addNode(null, { id: 't3', task: '项目 C', duration: '1d', user: '钱七' })} />
+        <Button text="句柄改 t2" onClick={() => gridRef.current?.updateNode('t2', { task: '项目 B（改）' })} />
+        <Button text="句柄折叠 t1" onClick={() => gridRef.current?.collapse('t1')} />
+        <Button text="句柄选中 t2" onClick={() => gridRef.current?.select('t2')} />
+        <Button text="句柄删 t1" onClick={() => gridRef.current?.removeNode('t1')} />
+      </div>
+    </div>
+  );
+}
+
+// MessageBox 动态演示：通过 ref 调用句柄运行时改写标题/消息/图标与 show/hide。
+function MessageBoxDynamicDemo() {
+  const mbRef = useRef<MessageBoxHandle>(null);
+  return (
+    <div style={{ position: 'relative' }}>
+      <MessageBox
+        ref={mbRef}
+        title="初始标题"
+        msg="初始消息内容"
+        width={400}
+        icon="info"
+        buttons={[{ text: '确定', width: 75 }]}
+      />
+      <div style={{ position: 'absolute', top: 176, left: 0, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <Button text="改标题" onClick={() => mbRef.current?.setTitle('运行时标题')} />
+        <Button text="改消息" onClick={() => mbRef.current?.setMessage('运行时改写的消息内容。')} />
+        <Button text="改图标" onClick={() => mbRef.current?.setIcon('question')} />
+        <Button text="句柄隐藏" onClick={() => mbRef.current?.hide()} />
+        <Button text="句柄显示" onClick={() => mbRef.current?.show()} />
+      </div>
+    </div>
+  );
+}
+
+// Viewport 动态演示：通过 ref 调用句柄运行时增删 region / 改尺寸 / 改 region 内容。
+function ViewportDynamicDemo() {
+  const vpRef = useRef<ViewportHandle>(null);
+  return (
+    <div style={{ position: 'relative', marginTop: 12 }}>
+      <div style={{ marginBottom: 6, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <Button text="句柄加 East" onClick={() => vpRef.current?.addRegion({ region: 'east', width: 120, title: 'East', html: 'East' })} />
+        <Button text="句柄删 East" onClick={() => vpRef.current?.removeRegion('east')} />
+        <Button text="句柄改 North" onClick={() => vpRef.current?.updateRegion('north', { height: 90, title: 'North*' })} />
+        <Button text="句柄改尺寸" onClick={() => vpRef.current?.setSize(600, 380)} />
+      </div>
+      <Viewport
+        ref={vpRef}
+        testId="viewport-dynamic"
+        width={500}
+        height={300}
+        regions={[
+          { region: 'north', height: 60, title: 'North', html: 'North' },
+          { region: 'west', width: 120, title: 'West', html: 'West' },
+          { region: 'center', title: 'Center', html: 'Center' },
+        ]}
+      />
+    </div>
+  );
+}
+
+// QuickTip 动态演示：无 target，由 ref 句柄驱动显隐与内容。
+function QuickTipDynamicDemo() {
+  const qtRef = useRef<QuickTipHandle>(null);
+  return (
+    <div data-testid="quicktip-dynamic-demo" style={{ position: 'relative', marginTop: 12, minHeight: 170 }}>
+      <div style={{ marginBottom: 6, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <Button text="句柄显示" onClick={() => qtRef.current?.show()} />
+        <Button text="句柄隐藏" onClick={() => qtRef.current?.hide()} />
+        <Button text="句柄改标题" onClick={() => qtRef.current?.setTitle('运行时标题')} />
+        <Button text="句柄改文本" onClick={() => qtRef.current?.setText('运行时改写的提示正文。')} />
+      </div>
+      <QuickTip
+        ref={qtRef}
+        testId="quicktip-dynamic"
+        title="初始标题"
+        text="初始正文"
+        width={200}
+        y={90}
+      />
+    </div>
+  );
+}
+
+// Menu 动态增删演示：种子 复制/粘贴/分隔/删除；「添加菜单项」追加一个可自删项。
+function DynamicMenuDemo() {
+  const menuRef = useRef<MenuHandle>(null);
+  const counter = useRef(0);
+  const [open, setOpen] = useState(false);
+  const addItem = () => {
+    const id = `mi-${counter.current++}`;
+    menuRef.current?.add(
+      { text: `新项${counter.current}`, handler: () => menuRef.current?.remove(id) },
+      id,
+    );
+  };
+  return (
+    <div style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', gap: 8, marginBottom: 4 }}>
+        <Button text="打开菜单" onClick={() => setOpen((o) => !o)} />
+        <Button text="添加菜单项" onClick={addItem} />
+      </div>
+      {open && (
+        <div style={{ position: 'absolute', top: 30, left: 0, zIndex: 15000 }}>
+          <Menu
+            ref={menuRef}
+            items={[
+              { text: '复制' },
+              { text: '粘贴' },
+              { separator: true },
+              { text: '删除' },
+            ]}
+            onItemClick={() => setOpen(false)}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Menu 级联子菜单动态增删演示：根菜单含「文件」项（带子菜单），用 getSubmenu 对子菜单动态增删，
+// 等价于 Ext 运行时给某菜单项挂载/编辑级联子菜单。submenuAlwaysOpen 让子菜单常开以便演示与测试。
+function CascadeMenuDemo() {
+  const menuRef = useRef<MenuHandle>(null);
+  return (
+    <div style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', gap: 8, marginBottom: 4 }}>
+        <Button
+          text="添加子菜单项"
+          onClick={() => menuRef.current?.getSubmenu('seed-0')?.add({ text: '最近文件' }, 'sub-recent')}
+        />
+        <Button
+          text="移除子菜单项"
+          onClick={() => menuRef.current?.getSubmenu('seed-0')?.remove('seed-1')}
+        />
+      </div>
+      <div style={{ position: 'absolute', top: 30, left: 0, zIndex: 15000 }}>
+        <Menu
+          ref={menuRef}
+          submenuAlwaysOpen={0}
+          items={[
+            { text: '文件', menu: [{ text: '新建' }, { text: '打开' }] },
+            { text: '编辑' },
+            { separator: true },
+            { text: '帮助' },
+          ]}
+          onItemClick={() => {}}
+        />
+      </div>
+    </div>
+  );
+}
+
+// DatePicker 范围选择演示组件：rangeSelect 下点击两日形成闭区间高亮，回显选中区间文本。
+function DateRangeDemo() {
+  const [range, setRange] = useState<Date[]>([]);
+  const fmt = (d: Date) => `${d.getMonth() + 1}/${d.getDate()}`;
+  const label = range.length === 2 ? `${fmt(range[0])} – ${fmt(range[1])}` : range.length === 1 ? `起点 ${fmt(range[0])}` : '请选择区间';
+  return (
+    <div>
+      <div style={{ marginBottom: 4, fontSize: 12 }}>范围：{label}</div>
+      <DatePicker rangeSelect selectedDates={[]} onRangeSelect={setRange} />
+    </div>
+  );
+}
+
+// TabPanel 动态增删演示：种子 2 个普通 tab；「添加页」追加一个可自删（closable）的动态 tab。
+function DynamicTabDemo() {
+  const tpRef = useRef<TabPanelHandle>(null);
+  const counter = useRef(0);
+  const seed = [
+    { title: '概览', content: <div style={{ padding: 10 }}>概览内容</div> },
+    { title: '详情', content: <div style={{ padding: 10 }}>详情内容</div> },
+  ];
+  const addTab = () => {
+    const n = ++counter.current;
+    const key = tpRef.current?.add(
+      {
+        title: `新页${n}`,
+        closable: true,
+        content: <div style={{ padding: 10 }}>新页 {n} 内容</div>,
+      },
+      undefined,
+      true,
+    );
+    // 自删：点击 tab 上的 close 由 TabPanel 内部处理；此处额外演示程序化 remove
+    void key;
+  };
+  return (
+    <div>
+      <TabPanel
+        ref={tpRef}
+        width={420}
+        height={140}
+        items={seed}
+      />
+      <div style={{ marginTop: 8 }}>
+        <Button text="添加页" onClick={addTab} />
+      </div>
+    </div>
+  );
+}
+
+// ListView 动态增删演示：种子 3 行；「添加一行」追加新记录，「删除选中行」移除当前选中记录。
+function DynamicListViewDemo() {
+  const lvRef = useRef<ListViewHandle>(null);
+  const nRef = useRef(0);
+  const addRow = () => {
+    const n = ++nRef.current;
+    lvRef.current?.add({
+      name: `new-${n}.doc`,
+      size: String(100 * n),
+      modified: '08-18 10:00',
+    });
+  };
+  const delSel = () => {
+    const sel = lvRef.current?.getSelected() ?? [];
+    if (sel.length) lvRef.current?.removeByIndex(sel[0]);
+  };
+  return (
+    <div>
+      <ListView
+        ref={lvRef}
+        width={320}
+        height={200}
+        multiSelect
+        value={[0]}
+        columns={[
+          { header: 'Name', dataIndex: 'name', width: 0.4 },
+          { header: 'Size', dataIndex: 'size', width: 0.2, align: 'right' },
+          { header: 'Modified', dataIndex: 'modified', width: 0.4 },
+        ]}
+        data={[
+          { name: 'a.txt', size: '12', modified: '08-18 09:00' },
+          { name: 'b.txt', size: '34', modified: '08-18 09:10' },
+          { name: 'c.txt', size: '56', modified: '08-18 09:20' },
+        ]}
+      />
+      <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
+        <Button text="添加一行" onClick={addRow} />
+        <Button text="删除选中行" onClick={delSel} />
+      </div>
+    </div>
+  );
+}
+
+// ColorMenu 演示组件：触发按钮 + 受控 ColorMenu 浮层（对齐 Ext.Button + menu: ColorMenu）。
+function ColorMenuDemo() {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+  return (
+    <div ref={anchorRef} style={{ display: 'inline-block' }}>
+      <Button text="选择颜色" onClick={() => setOpen((o) => !o)} />
+      <ColorMenu open={open} anchorRef={anchorRef} onClose={() => setOpen(false)} onSelect={() => {}} />
+    </div>
+  );
+}
+
+// ColorMenu 动态演示：通过 ref 调用句柄运行时增删改色板 / 选中 / 开合浮层。
+// Editor 动态演示：通过 ref 调用句柄运行时 startEdit / setValue / completeEdit / cancelEdit。
+function EditorDynamicDemo() {
+  const ref = useRef<EditorHandle>(null);
+  return (
+    <div data-testid="editor-dynamic" style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start', position: 'relative', width: 300, height: 50 }}>
+      <Editor ref={ref} value="Base" boundText="Base" width={180} height={22} editing={false} allowBlur={false} />
+      <Button text="句柄开始编辑" onClick={() => ref.current?.startEdit()} />
+      <Button text="句柄设值" onClick={() => ref.current?.setValue('Dynamic')} />
+      <Button text="句柄完成" onClick={() => ref.current?.completeEdit()} />
+      <Button text="句柄取消" onClick={() => ref.current?.cancelEdit()} />
+    </div>
+  );
+}
+
+// EditorGrid 动态演示：通过 ref 调用句柄运行时增删改数据源 / 按坐标启动编辑。
+function EditorGridDynamicDemo() {
+  const ref = useRef<EditorGridHandle>(null);
+  return (
+    <div data-testid="editorgrid-dynamic" style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start', width: 500 }}>
+      <EditorGrid
+        ref={ref}
+        title="动态用户列表"
+        width={500}
+        columns={[
+          { header: '姓名', dataIndex: 'name', width: 100, editor: true },
+          { header: '邮箱', dataIndex: 'email', width: 180 },
+          { header: '电话', dataIndex: 'phone', width: 140 },
+          { header: '年龄', dataIndex: 'age', width: 80, align: 'right', editor: { type: 'number' } },
+        ]}
+        data={[
+          { name: '张三', email: 'zhangsan@example.com', phone: '13800138000', age: 28 },
+          { name: '李四', email: 'lisi@example.com', phone: '13900139000', age: 32 },
+          { name: '王五', email: 'wangwu@example.com', phone: '13700137000', age: 45 },
+        ]}
+      />
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <Button text="句柄加行" onClick={() => ref.current?.addRecord({ name: '赵六', email: 'zhao@example.com', phone: '13600136000', age: 20 })} />
+        <Button text="句柄删首行" onClick={() => ref.current?.removeRecord(0)} />
+        <Button text="句柄改首行名" onClick={() => ref.current?.updateRecord(0, { name: '改后张三' })} />
+        <Button text="句柄编辑首格" onClick={() => ref.current?.startEditAt(0, 'name')} />
+        <Button text="句柄提交编辑" onClick={() => ref.current?.commitEdit('编辑后姓名')} />
+        <Button text="句柄取消编辑" onClick={() => ref.current?.cancelEdit()} />
+      </div>
+    </div>
+  );
+}
+
+// HtmlEditor 动态演示：通过 ref 调用句柄运行时写值 / 切源码 / 禁用。
+function HtmlEditorDynamicDemo() {
+  const ref = useRef<HtmlEditorHandle>(null);
+  return (
+    <div data-testid="htmleditor-dynamic" style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
+      <HtmlEditor ref={ref} testId="htmleditor-dyn" width={400} height={160} value="<p>init</p>" />
+      <Button text="句柄设值" onClick={() => ref.current?.setValue('<p>dynamic</p>')} />
+      <Button text="句柄切源码" onClick={() => ref.current?.toggleSource()} />
+      <Button text="句柄禁用" onClick={() => ref.current?.setDisabled(true)} />
+    </div>
+  );
+}
+
+function ColorMenuDynamicDemo() {
+  const ref = useRef<ColorMenuHandle>(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
+  return (
+    <div data-testid="colormenu-dynamic" style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', position: 'relative' }}>
+      <div ref={anchorRef} style={{ display: 'inline-block' }}>
+        <Button
+          text="切换菜单"
+          onClick={() => {
+            if (ref.current?.isOpen()) ref.current.close();
+            else ref.current?.open();
+          }}
+        />
+      </div>
+      <ColorMenu ref={ref} anchorRef={anchorRef} />
+      <Button text="句柄加色" onClick={() => ref.current?.addColor('#123456')} />
+      <Button text="句柄删蓝" onClick={() => ref.current?.removeColor('#123456')} />
+      <Button text="句柄选绿" onClick={() => ref.current?.select('00FF00')} />
+    </div>
+  );
+}
+
+// StatusBar 动态状态演示：通过 ref 调用 setStatus / showBusy / clearStatus。
+function DynamicStatusBar() {
+  const ref = useRef<StatusBarHandle>(null);
+  return (
+    <div style={{ display: 'flex', gap: 8, alignItems: 'center', width: '100%' }}>
+      <StatusBar
+        ref={ref}
+        testId="statusbar-dynamic"
+        width={400}
+        text="就绪"
+        defaultText="就绪"
+        iconCls="x-status-valid"
+        items={[{ text: '动作' }]}
+      />
+      <button type="button" onClick={() => ref.current?.showBusy({ text: '处理中...' })}>
+        忙碌
+      </button>
+      <button type="button" onClick={() => ref.current?.setStatus({ text: '完成', iconCls: 'x-status-valid' })}>
+        完成
+      </button>
+      <button type="button" onClick={() => ref.current?.clearStatus()}>
+        清除
+      </button>
+    </div>
+  );
+}
+
+/**
+ * 保真关键：Ext 在启动时（EventManager.initExtCss）向 <body> 注入浏览器嗅探类
+ * （ext-webkit / ext-chrome / ext-mac / ext-linux 等），并向 <html> 注入 ext-strict。
+ * 大量 CSS 规则以这些类为前缀（如 `.ext-webkit .x-small-editor .x-form-text{padding-top:3px}`），
+ * 缺失会导致 toolbar 内表单字段等像素错位。React 端不加载 Ext 运行时，故在此等价的复刻注入。
+ */
+function applyExtBrowserClasses() {
+  const t = navigator.userAgent.toLowerCase();
+  const isIE = /msie/.test(t) && !/opera/.test(t);
+  const isIE7 = isIE && /msie 7/.test(t);
+  const isIE8 = isIE && /msie 8/.test(t);
+  const isGecko = /gecko/.test(t) && !/webkit/.test(t);
+  const isOpera = /opera/.test(t);
+  const isWebKit = /webkit/.test(t);
+  const isChrome = /chrome/.test(t);
+  const isSafari = /safari/.test(t) && !/chrome/.test(t);
+  const isMac = /macintosh|mac os x/.test(t);
+  const isLinux = /linux/.test(t);
+  const isStrict = document.compatMode === 'CSS1Compat';
+
+  const bodyCls: string[] = [];
+  if (isIE) bodyCls.push('ext-ie', isIE7 ? 'ext-ie7' : isIE8 ? 'ext-ie8' : 'ext-ie6');
+  else if (isGecko) bodyCls.push('ext-gecko', /rv:1\.8/.test(t) ? 'ext-gecko2' : 'ext-gecko3');
+  else if (isOpera) bodyCls.push('ext-opera');
+  else if (isWebKit) bodyCls.push('ext-webkit');
+
+  if (isSafari) bodyCls.push('ext-safari', /version\/2/.test(t) ? 'ext-safari2' : /version\/3/.test(t) ? 'ext-safari3' : 'ext-safari4');
+  else if (isChrome) bodyCls.push('ext-chrome');
+
+  if (isMac) bodyCls.push('ext-mac');
+  if (isLinux) bodyCls.push('ext-linux');
+
+  if (bodyCls.length) document.body.classList.add(...bodyCls);
+  if (isStrict) document.documentElement.classList.add('ext-strict');
+}
+
+applyExtBrowserClasses();
+
+// Grid 列动态增删演示：种子 3 列 + 「添加列」「移除「部门」列」。getColumns().length 断言列数变化。
+function GridColDynamicDemo() {
+  const gridRef = useRef<GridHandle>(null);
+  const data = [
+    { name: '张三', email: 'zhangsan@example.com', dept: '研发' },
+    { name: '李四', email: 'lisi@example.com', dept: '市场' },
+    { name: '王五', email: 'wangwu@example.com', dept: '研发' },
+  ];
+  const addColumn = () => {
+    gridRef.current?.addColumn(
+      {
+        header: '编号',
+        dataIndex: '__seq__',
+        width: 70,
+        align: 'center',
+        renderer: (_v, row) => `#${data.indexOf(row as (typeof data)[number]) + 1}`,
+      },
+      'seq',
+    );
+  };
+  const removeDept = () => gridRef.current?.removeColumn('dept');
+  return (
+    <div>
+      <Grid
+        ref={gridRef}
+        title="可增删列的列表"
+        width={480}
+        columns={[
+          { header: '姓名', dataIndex: 'name', width: 120 },
+          { header: '邮箱', dataIndex: 'email', width: 200 },
+          { header: '部门', dataIndex: 'dept', width: 160 },
+        ]}
+        data={data}
+      />
+      <div style={{ marginTop: 8 }}>
+        <Button text="添加「编号」列" onClick={addColumn} />
+        <span style={{ width: 8, display: 'inline-block' }} />
+        <Button text="移除「部门」列" onClick={removeDept} />
+      </div>
+    </div>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);