Using dojo widgets within Ext JS Layout

AndrewBrown1 — Sat, 11 Dec 2021 15:40:37 GMT

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.

topic Using dojo widgets within Ext JS Layout in ArcGIS JavaScript Maps SDK Questions

Using dojo widgets within Ext JS Layout