Question

我正在尝试创建自定义容器，但无法确定如何执行此操作。

我需要它看起来像这样： enter image description here

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

问题：

1）我应该为此做些什么？ 2）如何为不同的页面实现不同的高级搜索表单？ 3）如何为控制器可以与之交互并操纵dom的标题放置一个setter？

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

感谢

Answer 1

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

我不确定“不同页面的高级表单”你能详细了解一下吗？您是否希望以某种方式自动生成搜索表单？
扩展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', {
   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);
   }
})

Answer 2

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

所有这些都是粗略的意见。它们可能会有所不同，具体取决于您的要求。

Extjs 4.02 - 需要自定义组件

2 个答案: