CODEWITHSUNDEEP
javascriptextjsextjs4
AMember
AMember

Reputation: 3057

Extjs 4.02 - Custom component needed

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

Upvotes: 1

Views: 597

Answers (2)

Mark Porter
Mark Porter

Reputation: 1630

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

Upvotes: 2

Lionel Chan
Lionel Chan

Reputation: 8059

  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.

Upvotes: 1

Related Questions