Extjs 4.02 - 需要自定义组件

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

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

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

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

问题:

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

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

谢谢

I am trying to create a custom container but can't figure just how to do it.

I need it to look like this:
enter image description here

(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.

Questions:

1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?

basically any advice will be good as I need a start point.

thanks

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

疯了 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);
       }
    })
    
薄荷港 2024-12-18 14:19:30
  1. 我建议您从 Ext.panel.Panel 本身进行扩展,并劫持所有这些自定义项目的 dom,添加搜索栏等。如果您不想要任何来自 Ext.panel.Panel 的奇特东西,您还可以从 Ext.ComponentExt.container.Container 扩展它(以包含更多组件),甚至是最低的Ext.util.Observable

  2. 看来您可能需要扩展一些Ext.menu.Menu并定义一些不同的输入框集,以便您可以从创建浮动菜单中受益(如果这就是您想要的) )。或者,如果您有时间,您甚至可以从 Ext.Component 扩展并构建您自己的自定义组件,甚至更低的 Ext.util.Observable

  3. 二传手?它将在(1)中的扩展组件中:)

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

  1. I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.

  2. It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.

  3. The setter? It will be in the extended component in (1) then :)

All of these serve as rough opinions. They could be different depends on your requirement.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文