Extjs 4.02 - необходим пользовательский компонент

Question

Я пытаюсь создать собственный контейнер, но не могу понять, как это сделать.

Мне нужно, чтобы он выглядел так:

(не платитеОбратите внимание, что это RTL, это всего лишь набросок для начала), где оранжевые шрифты - это заголовок страницы, который я хотел бы использовать в качестве элемента H1.Он имеет простой поиск и расширенный поиск, который открывается, когда нажимается маленькая стрелка рядом с кнопкой поиска.

Вопросы:

1) Что мне для этого расширить?2) Как я могу реализовать различные формы предварительного поиска для разных страниц?3) как мне установить сеттер для заголовка, с которым контроллеры могут взаимодействовать и манипулировать dom?

в принципе любой совет будет хорош, так как мне нужна начальная точка.

спасибо

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

1. Я бы посоветовал вам просто выйти из Ext.panel.Panel и захватить дом для всех этих настраиваемых предметов, добавить его в строку поиска и т. Д. Если вам не нужны какие-либо необычные вещи из Ext.panel.Panel Вы также можете расширить его с Ext.Component или Ext.container.Container (чтобы он содержал больше компонентов) и даже на самые низкие Ext.util.Observable.

2. Похоже, вам может потребоваться расширить несколько Ext.menu.Menu и определить какой-то другой набор полей ввода, чтобы вы могли выиграть от создания всплывающего меню (если это то, что вы хотите). Или, если у вас есть время, вы можете просто перейти от Ext.Component и создать свой собственный настраиваемый компонент, или даже ниже, Ext.util.Observable.

3. Сеттер? Это будет в расширенном компоненте в (1) затем:)

Все это служит грубым мнением. Они могут отличаться в зависимости от вашего требования.