abrown31

Using dojo widgets within Ext JS Layout

Discussion created by abrown31 on Sep 18, 2012
I'm using a slightly modified version of the Ext JS layout example in the code snippets section. In the bottom window, I have a tabpanel that creates tabs depending on how many point layers were selected using my "select" tool. Since I already have a dojox enhancedgrid working from another website, I would like to apply the code to generate this dojo enhanced grid dynamically within the tabs of the Ext JS layout. Is this possible?

In order to save time and effort, I would like to try to reuse the enhanced table, since it is highly customized. I am already using the compact version of the framework. Here is part of my code thus far:

selectGrid = new dojox.grid.EnhancedGrid({
                        query: {
                            OBJECTID: '*'
                        },

                        clientSort: true,
                        autowidth: true,
                        structure: fieldNameArr,
                        rowsPerPage: 30,
                        plugins: {
                            indirectSelection: {
                                name: "Select",
                                field: "Select",
                                width: "70px",
                                styles: "text-align: center;"

                            }//indirect
                        }//plugins
                    });//selectGrid




The Ext JS tab panel has an id of "tabpanel1". When I set the 'html' equal to the enhancedGrid, 'selectGrid', it comes out as a bunch of unformatted, garbage text:

;attributes:[object NamedNodeMap];clientTop:0;firstChild:[object Text];prefix:null;spellcheck:true;isContentEditable:false;nodeType:1;offsetWidth:0;translate:true;childElementCount:4;nextElementSibling:null;childNodes:[object NodeList];title:;style:[object CSSStyleDeclaration];children:[object


Ext.getCmp("tabpanel1").add({
                        title: "title",
                        html: selectGrid,
                        closable: true
                    });
                    selectGrid.setStore(selectStore);

So, as you can see, I cannot get the table to render within the tab. I have the correct .css files referenced, too.

I apologize for any dumb mistakes, as I am still a newbie at this.

Thanks.

Outcomes