Question

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

I need it to look like this:

(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

Answer 1

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);
     }
  })