当前位置：文江博客话题详情

Extjs 4.02 - 需要自定义组件

发布于 2024-12-11 14:19:30 字数 347 浏览 5 评论 0原文

我正在尝试创建一个自定义容器，但不知道如何去做。

我需要它看起来像这样：在此处输入图像描述

（不要注意它是 RTL，这只是一个入门的草图）其中橙色字体是我希望成为 H1 元素的页面标题。它有一个简单搜索和一个高级搜索，当单击搜索按钮旁边的小箭头时，高级搜索会弹出。

问题：

1）我应该为此扩展什么？ 2）如何为不同的页面实现不同的高级搜索形式？ 3）如何为控制器可以与 dom 交互并操作 dom 的标题放置一个设置器？

基本上任何建议都会很好，因为我需要一个起点。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯了 2024-12-18 14:19:30

有很多方法可以做到这一点，但这就是我要做的。

我不确定“不同页面的高级表单”，您能详细说明一下吗？您是否希望以某种方式自动生成搜索表单？
扩展Ext.form.Panel，并为字段使用表格布局
请参阅：http://docs。 sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table

在面板上使用“tbar”而不是设置“title”。您可以放置搜索组合、tbfill，然后放置“标题”的 tbtext。为了方便起见，您可以覆盖面板的 setTitle 函数来操作此 tbtext 字段，而不是正常行为。像这样的事情：

Ext.define('MyApp.view.MyForm', {
   扩展：'Ext.form.Panel',
   别名：'widget.myform',
   布局：{
    类型：'表'，
    列：4，
        表属性：{
            风格： {
                宽度：'100%'
            }
        }         
   },
   //重写setTitle
   设置标题：函数（标题）{
    Ext.getCmp(this.id + "_search_combo").setText(标题)
   },
   默认值：{
    xtype:"组合",
    //这里是组合配置的其余部分
   },
   项目：[{
    //...   
   }],
   初始化组件：函数（配置）{
      这个.tbar = tbar:[{
            xtype:"组合",
            //...
            id:this.id + "_search_combo"
        },{
            xtype：“tbfill”
        },{
            xtype:"tbText",
            cls：“我的表单标题”，
            值：this.title||""
        }]

        //防止默认标题行为
        删除这个标题
        this.callParent(参数);
   }
})

There are lots of ways of doing this, but this is what I would do.

I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table

use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:

Ext.define('MyApp.view.MyForm', {
   extend: 'Ext.form.Panel',
   alias:'widget.myform',
   layout:{
    type: 'table',
    columns: 4,
        tableAttrs: {
            style: {
                width: '100%'
            }
        }         
   },
   //overridden setTitle
   setTitle:function(title){
    Ext.getCmp(this.id + "_search_combo").setText(title)
   },
   defaults:{
    xtype:"combo",
    //rest of combo config here
   },
   items:[{
    //...   
   }],
   initComponent:function(config){
      this.tbar = tbar:[{
            xtype:"combo",
            //...
            id:this.id + "_search_combo"
        },{
            xtype:"tbfill"
        },{
            xtype:"tbText",
            cls:"my_form_title",
            value:this.title||""
        }]

        //prevent default title behavior
        delete this.title
        this.callParent(arguments);
   }
})

回复收藏 0 原文

薄荷港 2024-12-18 14:19:30

我建议您从 Ext.panel.Panel 本身进行扩展，并劫持所有这些自定义项目的 dom，添加搜索栏等。如果您不想要任何来自 Ext.panel.Panel 的奇特东西，您还可以从 Ext.Component 或 Ext.container.Container 扩展它（以包含更多组件），甚至是最低的Ext.util.Observable。
看来您可能需要扩展一些Ext.menu.Menu并定义一些不同的输入框集，以便您可以从创建浮动菜单中受益（如果这就是您想要的））。或者，如果您有时间，您甚至可以从 Ext.Component 扩展并构建您自己的自定义组件，甚至更低的 Ext.util.Observable。
二传手？它将在（1）中的扩展组件中：）

所有这些都作为粗略的意见。根据您的要求，它们可能会有所不同。