Search Results

Search found 35 results on 2 pages for 'gridpanel'.

Page 1/2 | 1 2  | Next Page >

  • ExtJS GridPanel Scrollbar does not appear in IE7 but it does in Firefox, etc

    - by Snowright
    Setup I have an accordion layout containing a "properties" panel that nests two inner panels. The first inner panel holds a Ext.DataView, while the second panel is the Ext.grid.GridPanel in question. In the screenshot below, the white space containing the folder icon is the dataview, and below that is the gridpanel. Problem In Firefox, Chrome, and Opera, there is a scrollbar that appears when my gridpanel has an overflow of properties. It is only in Internet Explorer that it does not appear. I am, however, able to scroll using my mouse scroll button in all browsers, including IE. I've also tried removing our custom css file in case it was affecting it somehow, but there was no change in doing so. I'm not sure exactly what code I should show as I don't know where the exact problem is coming from but here is the code for the mainpanel and gridpanel. var mainPanel = new Ext.Panel({ id : 'main-property-panel', title : 'Properties', height : 350, autoWidth : true, tbar : [comboPropertyActions], items : [panel1] //panel1 holds the DataView }); var propertiesGrid = new Ext.grid.GridPanel({ stripeRows : true, height : mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight(), autoWidth : true, store : propertiesStore, cm : propertiesColumnModel }) //Add gridpanel to mainPanel mainPanel.add(propertiesGrid); mainPanel.doLayout(); Any help into the right direction would be greatly appreciated. Thank you.

    Read the article

  • Gridpanel auto resize on window resize

    - by imnotneo
    I'm using the array-grid extjs example to try and fit a gridpanel into a container window. The problem is on resizing the container window, the gridpanel doesn't automatically fit the new size. As I understand it that's how it's supposed to work. Here's the link to the example: http://www.extjs.com/deploy/dev/examples/grid/array-grid.html What I've done is changed the following.. // Added to gridpanel config layout: 'fit', viewConfig: { forceFit: true } // Window container var gridWindow = new Ext.Window({ items: [ grid ] }); // Instead of grid.render, use gridWindow.show(); gridWindow.show();

    Read the article

  • DateField in a gridpanel

    - by manale
    i have a gridpanel with a datefield column, when my application is in english the datefield is working fine, but when my application is using french my datefield language is changed to french but the time doesn't change in the gridpanel cell. so any idea?

    Read the article

  • GridPanel in Extjs is not loaded

    - by pho3nix
    I have this code in my application, but this not load any data. Data is accessible but wont display in my gridpanel, anyone have idea, why? Ext.onReady(function () { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var btnAdd = new Ext.Button({ id: 'btnAdd', text: 'Adicionar', iconCls: 'application_add', handler: function (s) { } }); var btnEdit = new Ext.Button({ id: 'btnEdit', text: 'Editar', iconCls: 'application_edit', handler: function (s) { } }); var btnRemove = new Ext.Button({ id: 'btnRemove', text: 'Apagar', iconCls: 'application_delete', handler: function (s) { } }); var tbar = new Ext.Toolbar({ items: [btnAdd, btnEdit, btnRemove] }); var formFind = new Ext.FormPanel({ height: 100 }); var store = new Ext.data.JsonStore({ remoteSort: true, idProperty: 'ContentId', root: 'rows', totalProperty: 'results', fields: [ { name: 'ContentId', type: 'int' }, { name: 'Name' }, { name: 'Version' }, { name: 'State' }, { name: 'CreatedDateTime' }, { name: 'PublishedDateTime'}, { name: 'CreatedByUser' }, { name: 'PublishedByUser' } ], proxy: new Ext.data.ScriptTagProxy({ url: '/Admin/ArticleList' }) }); store.setDefaultSort('ContentId', 'desc'); var paging = new Ext.PagingToolbar({ store: store, pageSize: 25, displayInfo: true, displayMsg: 'Foram encontrados {2} registos. Mostrando {0} de {1}', emptyMsg: "Nenhum registo encontrado." }); var grid = new Ext.grid.GridPanel({ id: 'grid', height: 700, store: store, loadMask: true, loadingText: 'Carregando...', autoHeight: true, cm: new Ext.grid.ColumnModel ([ { id: 'ContentId', dataIndex: 'ContentId', header: 'Identif.', width: 60, sortable: true }, { id: 'Name', dataIndex: 'Name', header: 'Titulo', width: 75, sortable: true }, { id: 'Version', dataIndex: 'Version', header: 'Versão', width: 75, sortable: true }, { id: 'State', dataIndex: 'State', header: 'Estado', width: 75, sortable: true }, { id: 'CreatedDateTime', dataIndex: 'CreatedDateTime', header: 'Data de Criação', width: 85, sortable: true }, { id: 'PublishedDateTime', dataIndex: 'PublishedDateTime', header: 'Data de Publicação', width: 75, sortable: true }, { id: 'CreatedByUser', dataIndex: 'CreatedByUser', header: 'Criado por', width: 75, sortable: true }, { id: 'PublishedByUser', dataIndex: 'PublishedByUser', header: 'Publicado por', width: 85, sortable: true } ]), stripeRows: true, viewConfig: { forceFit: true }, bbar: paging }); var panel = new Ext.Panel({ id: 'panel', renderTo: Ext.getBody(), layout: 'fit', tbar: tbar, items: [grid] }); store.load(); // trigger the data store load });

    Read the article

  • making certain cells of an ExtJS GridPanel un-editable

    - by synchronicity
    I currently have a GridPanel with the Ext.ux.RowEditor plugin. Four fields exist in the row editor: port, ip address, subnet and DHCP. If the DHCP field (checkbox) of the selected row is checked, I need to make the other three fields un-editable. I've been trying to perform this code when the beforeedit event is triggered, but to no avail... I've only found ways to make the entire column un-editable. My code so far: this.rowEditor.on({ scope: this, beforeedit: this.checkIfEditable }); checkIfEditable:function(rowEditor, rowIndex) { if(this.getStore().getAt(rowIndex).get('dhcp')) { // this function makes the entire column un-editable: this.getColumnModel().setEditable(2, false); // I want to make only the other three fields of the current row // uneditable. } } Please let me know if any clarification is needed. Any help potentially extending RowEditor to accomplish the target functionality would be greatly appreciated as well!

    Read the article

  • column resize issue in gridpanel

    - by xrx215
    I have a defect assigned to me which states that columns are difficult to resize on a grid. this appears to be true, the mouseover which triggers the col-resize cursor display is quite tiny. Is there a way to increase the "hot area" between colums in order to make the colum resize function more user friendly ?

    Read the article

  • Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained

    - by Micah
    I want to include an ExtJS GridPanel inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control. From my experiments, it appears that the GridPanel only resizes itself correctly if it's within a Viewport. For instance, with this code the GridPanel automatically resizes: new Ext.Viewport( { layout: 'anchor', items: [ { xtype: 'panel', title: 'foo', layout: 'fit', items: [ { xtype: 'grid', // define the grid here... but if I replace the first three lines with the lines below, it doesn't: new Ext.Panel( { layout: 'anchor', renderTo: 'RenderUntoThisDiv', The trouble is, Viewport always renders directly to the body of the HTML document, and I need to render within a particular div. If there is a way to get the GridPanel to resize itself correctly, despite not being contained in a ViewPort, that would be ideal. If not, if I could get the Viewport to render the elements within the div, I'd be fine with that. All of my ExtJS objects can be contained within the same div. Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?

    Read the article

  • Updating a field in a record dyanamically in extjs

    - by Daemon
    Scenario I want to update the column data of particular record in grid having store with static data. Here is my store: : : extend : 'Ext.data.Store', model : 'MyModel', autoLoad:true, proxy: { type: 'ajax', url:'app/data/data.json', reader: { type: 'json', root: 'users' } }, My data.json { 'users': [ { QMgrStatus:"active", QMgrName: 'R01QN00_LQYV', ChannelStatus:'active', ChannelName : 'LQYV.L.CLNT', MxConn: 50 } ] } What I am doing to update the record : var grid = Ext.getCmp('MyGrid'); var store = Ext.getStore('Mystore'); store.each(function(record,idx){ val = record.get('ChannelName'); if(val == "LQYV.L.CLNT"){ record.set('ChannelStatus','inactive'); record.commit(); } }); console.log(store); grid.getView().refresh(); MY PROBLEM I am getting the record updated over here.It is not getting reflected in my grid panel.The grid is using the same old store(static).Is the problem of static data? Or am I missing something or going somewhere wrong? Please help me out with this issue.Thanks a lot. MY EDIT I am tryng to color code the column based on the status.But here I am always getting the status="active" even though I am updating the store. What I am trying to do in my grid { xtype : 'grid', itemId : 'InterfaceQueueGrid', id :'MyGrid', store : 'Mytore', height : 216, width : 600, columns : [ { text: 'QueueMgr Status', dataIndex: 'QMgrStatus' , width:80 }, { text: 'Queue Manager \n Name', dataIndex: 'QMgrName' , width: 138}, { text: 'Channel Status',dataIndex: 'ChannelStatus' , width: 78,align:'center', renderer: function(value, meta, record) { var val = record.get('ChannelStatus'); console.log(val); // Here I am always getting status="active". if (val == 'inactive') { return '<img src="redIcon.png"/>'; }else if (val == 'active') { return '<img src="greenIcon.png"/>'; } } }, { text: 'Channel Name', align:'center', dataIndex: 'ChannelName', width: 80} { text: 'Max Connections', align:'center', dataIndex: 'MxConn', width: 80} ] }

    Read the article

  • what is the event to handle row scrolling in EXTJS Gridpanel?

    - by user1480705
    I am displaying data in a GridPanel. My requirement is to hide some menu items based on the row selections. I have this perfectly working when a user clicks or rightclicks - i am handling the event for rowclick and rowcontextmenu respecitvely. But i am facing issue to locate the event - If the user first clicks on the row and them use up and down arrows to move on to other rows. Thanks in Advance

    Read the article

  • Refresh Button in java

    - by lakshmi
    I need to make a simple refresh button for a gui java program I have the button made but its not working properly. I just am not sure what the code needs to be to make the button work. Any help would be really appreciated.I figured the code below ` public class CompanySample extends Panel { DBServiceAsync dbService = GWT.create(DBService.class); Panel panel = new Panel(); public Panel CompanySampledetails(com.viji.example.domain.Record trec, int count) { panel.setWidth(800); Panel borderPanel = new Panel(); Panel centerPanel = new Panel(); final FormPanel formPanel = new FormPanel(); formPanel.setFrame(true); formPanel.setLabelAlign(Position.LEFT); formPanel.setPaddings(5); formPanel.setWidth(800); final Panel inner = new Panel(); inner.setLayout(new ColumnLayout()); Panel columnOne = new Panel(); columnOne.setLayout(new FitLayout()); GridPanel gridPanel = null; if (gridPanel != null) { gridPanel.getView().refresh(); gridPanel.clear(); } gridPanel = new SampleGrid(trec); gridPanel.setHeight(450); gridPanel.setTitle("Company Data"); final RowSelectionModel sm = new RowSelectionModel(true); sm.addListener(new RowSelectionListenerAdapter() { public void onRowSelect(RowSelectionModel sm, int rowIndex, Record record) { formPanel.getForm().loadRecord(record); } }); gridPanel.setSelectionModel(sm); gridPanel.doOnRender(new Function() { public void execute() { sm.selectFirstRow(); } }, 10); columnOne.add(gridPanel); inner.add(columnOne, new ColumnLayoutData(0.6)); final FieldSet fieldSet = new FieldSet(); fieldSet.setLabelWidth(90); fieldSet.setTitle("company Details"); fieldSet.setAutoHeight(true); fieldSet.setBorder(false); final TextField txtcompanyname = new TextField("Name", "companyname", 120); final TextField txtcompanyaddress = new TextField("Address", "companyaddress", 120); final TextField txtcompanyid = new TextField("Id", "companyid", 120); txtcompanyid.setVisible(false); fieldSet.add(txtcompanyid); fieldSet.add(txtcompanyname); fieldSet.add(txtcompanyaddress); final Button addButton = new Button(); final Button deleteButton = new Button(); final Button modifyButton = new Button(); final Button refeshButton = new Button(); addButton.setText("Add"); deleteButton.setText("Delete"); modifyButton.setText("Modify"); refeshButton.setText("Refresh"); fieldSet.add(addButton); fieldSet.add(deleteButton); fieldSet.add(modifyButton); fieldSet.add(refeshButton); final ButtonListenerAdapter buttonClickListener = new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { if (button == refeshButton) { sendDataToServ("Refresh"); } } }; addButton.addListener(new ButtonListenerAdapter() { @Override public void onClick(Button button, EventObject e) { if (button.getText().equals("Add")) { sendDataToServer("Add"); } } private void sendDataToServer(String action) { String txtcnameToServer = txtcompanyname.getText().trim(); String txtcaddressToServer = txtcompanyaddress.getText().trim(); if (txtcnameToServer.trim().equals("") || txtcaddressToServer.trim().equals("")) { Window .alert("Incomplete Data. Fill/Select all the needed fields"); action = "Nothing"; } AsyncCallback ascallback = new AsyncCallback<String>() { @Override public void onFailure(Throwable caught) { Window.alert("Record not inserted"); } @Override public void onSuccess(String result) { Window.alert("Record inserted"); } }; if (action.trim().equals("Add")) { System.out.println("Before insertServer"); dbService.insertCompany(txtcnameToServer, txtcaddressToServer, ascallback); } } }); deleteButton.addListener(new ButtonListenerAdapter() { @Override public void onClick(Button button, EventObject e) { if (button.getText().equals("Delete")) { sendDataToServer("Delete"); } } private void sendDataToServer(String action) { String txtcidToServer = txtcompanyid.getText().trim(); String txtcnameToServer = txtcompanyname.getText().trim(); String txtcaddressToServer = txtcompanyaddress.getText().trim(); if (!action.equals("Delete")) { if (txtcidToServer.trim().equals("") || txtcnameToServer.trim().equals("") || txtcaddressToServer.trim().equals("")) { Window .alert("Incomplete Data. Fill/Select all the needed fields"); action = "Nothing"; } } else if (txtcidToServer.trim().equals("")) { Window.alert("Doesn't deleted any row"); } AsyncCallback ascallback = new AsyncCallback<String>() { @Override public void onFailure(Throwable caught) { // TODO Auto-generated method stub Window.alert("Record not deleted"); } @Override public void onSuccess(String result) { Window.alert("Record deleted"); } }; if (action.trim().equals("Delete")) { System.out.println("Before deleteServer"); dbService.deleteCompany(Integer.parseInt(txtcidToServer), ascallback); } } }); modifyButton.addListener(new ButtonListenerAdapter() { @Override public void onClick(Button button, EventObject e) { if (button.getText().equals("Modify")) { sendDataToServer("Modify"); } } private void sendDataToServer(String action) { // TODO Auto-generated method stub System.out.println("ACTION :----->" + action); String txtcidToServer = txtcompanyid.getText().trim(); String txtcnameToServer = txtcompanyname.getText().trim(); String txtcaddressToServer = txtcompanyaddress.getText().trim(); if (txtcnameToServer.trim().equals("") || txtcaddressToServer.trim().equals("")) { Window .alert("Incomplete Data. Fill/Select all the needed fields"); action = "Nothing"; } AsyncCallback ascallback = new AsyncCallback<String>() { @Override public void onFailure(Throwable caught) { Window.alert("Record not Updated"); } @Override public void onSuccess(String result) { Window.alert("Record Updated"); } }; if (action.equals("Modify")) { System.out.println("Before UpdateServer"); dbService.modifyCompany(Integer.parseInt(txtcidToServer), txtcnameToServer, txtcaddressToServer, ascallback); } } }); inner.add(new PaddedPanel(fieldSet, 0, 10, 0, 0), new ColumnLayoutData( 0.4)); formPanel.add(inner); borderPanel.add(centerPanel, new BorderLayoutData(RegionPosition.CENTER)); centerPanel.add(formPanel); panel.add(borderPanel); return panel; } public void sendDataToServ(String action) { AsyncCallback<com.viji.example.domain.Record> callback = new AsyncCallback<com.viji.example.domain.Record>() { @Override public void onFailure(Throwable caught) { System.out.println("Failure"); } public void onSuccess(com.viji.example.domain.Record result) { CompanySampledetails(result, 1); } }; dbService.getRecords(callback); } } class SampleGrid extends GridPanel { private static BaseColumnConfig[] columns = new BaseColumnConfig[] { new ColumnConfig("Name", "companyname", 120, true), new ColumnConfig("Address", "companyaddress", 120, true), }; private static RecordDef recordDef = new RecordDef(new FieldDef[] { new IntegerFieldDef("companyid"), new StringFieldDef("companyname"), new StringFieldDef("companyaddress") }); public SampleGrid(com.viji.example.domain.Record trec) { Object[][] data = new Object[0][];// getCompanyDataSmall(); MemoryProxy proxy = new MemoryProxy(data); ArrayReader reader = new ArrayReader(recordDef); Store store = new SimpleStore(new String[] { "companyid", "companyname", "companyaddress" }, new Object[0][]); store.load(); ArrayList<Company> Companydetails = trec.getCompanydetails(); for (int i = 0; i < Companydetails.size(); i++) { Company company = Companydetails.get(i); store.add(recordDef.createRecord(new Object[] { company.getCompanyid(), company.getCompanyName(), company.getCompanyaddress() })); } store.commitChanges(); setStore(store); ColumnModel columnModel = new ColumnModel(columns); setColumnModel(columnModel); } } `

    Read the article

  • java, swing, Gridlayout problem

    - by josh
    I have a panel with GridLayout But when I'm trying to run the program, only the first button out of 100 is shown. Futhermore, the rest appear only when I move the cursor over them. What's wrong with it? Here's the whole class(Life.CELLS=10 and CellButton is a class which extends JButton) public class MainLayout extends JFrame { public MainLayout() { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(650, 750); setLayout(new FlowLayout()); //setResizable(false); final JPanel gridPanel = new JPanel(new GridLayout(Life.CELLS, Life.CELLS)); for (int i=0; i<Life.CELLS; i++) { for (int j=0; j<Life.CELLS; j++) { CellButton jb = new CellButton(i, j); jb.setPreferredSize(new Dimension(jb.getIcon().getIconHeight(), jb.getIcon().getIconWidth())); buttons[i][j] = jb; grid[i][j] = false; gridPanel.add(jb); } } add(gridPanel); } } This is code of CellButton package classes; import javax.swing.JButton; import javax.swing.ImageIcon; import javax.swing.JFrame; public class CellButton extends JButton { private int x; private int y; boolean alive; ImageIcon icon; boolean next; // icons for grids final ImageIcon dead = new ImageIcon(JFrame.class.getResource("/images/image1.gif")); final ImageIcon live = new ImageIcon(JFrame.class.getResource("/images/image2.gif")); public CellButton(int X, int Y) { super(); x = X; y = Y; alive = false; icon = dead; setIcon(icon); } public int getX() { return x; } public int getY() { return y; } public boolean isAlive() { return alive; } public void relive() { alive = true; icon = live; setIcon(icon); } public void die() { alive = false; icon = dead; setIcon(icon); } public void setNext(boolean n) { next = n; } public boolean getNext() { return next; } public ImageIcon getIcon() { return icon; } }

    Read the article

  • how to refresh Window in extjs

    - by vaishali
    i have one window in that i passed two dynamic gridPanel 1)FeaturGrid 2)gvpropertywn. i want to refresh testWin (Window) how i can? can u pls help me? testWin = new Ext.Window({ id:'resultwindow', title: LangVarTestWinText, width: 400, height: 300, layout : 'border', closeAction:'hide', closable : true, //items:[FeaturGrid] items:[FeaturGrid,gvpropertywn] }); }

    Read the article

  • Ext JS UX - RowPanelExpander

    - by alexn
    I have this plugin. It works great with gridPanel. But there are some problems with editorGridPanel. After editing of some row plugin stops work. Maybe someone can fix this problem? I looked at code, but cant find answer....

    Read the article

  • Ext js - Dynamically changing content of Tab in a TabPanel

    - by 29er
    Hey, I have an (Ext JS) tab panel where the hidden tabs aren't loaded at all upon initial instantiation, (the only thing I set is the title). Upon 'activation' of a tab I want to call a method , which then instanstiates a new FormPanel/GridPanel and put this content into the tab. Can someone point me to a code example or give me tips on how to do this?? Thanks so much!

    Read the article

  • Editable grid with colorpallet

    - by diya
    I am using extjs 3.0. I am using Ext.grid.GridPanel..I want to make one column of this grid as editable column such that i want to create colorpallet in each row of this perticular column. How can i do this?

    Read the article

  • Instanciate a class with a given id in ExtJS

    - by Miller
    Hello, I would like to know if it is possible to instanciate a class by its id . For example we have a class extending Ext.grid.GridPanel with an id property, is it possible to instanciate the class just knowing his id (which is the component id in this case) ?

    Read the article

  • EXT JS toLayout on Viewport doesnt show anything...

    - by Nazariy
    After reading many example about adding new components in to existing container without reloading whole page I run in to small problem while combining tree and tabs inside Viewport component. What I'm trying to do is to register on click event to tree node and load in to content container new component, depending on node type it can be tabpanel, gridpanel or any other available component. here is short example of tree object: { xtype: 'treepanel', id: 'tree-panel', listeners: { click: function(n) { var content = Ext.getCmp('content-panel'); content.setTitle(n.attributes.qtip); //remove all components from content-panel content.removeAll(); content.add(dummy_tabs2); content.doLayout(); return; } }} All DOM manipulation went fine, everything registered properly, new Title shown, but dummy_tabs2 are not shown. I did try to set various properties for doLayout(true|false, true|false) but nothing happens. Am I doing something wrong?

    Read the article

  • Extjs - Getting more from the server

    - by fatnjazzy
    Hi, Is it possible to get every data from the server? for example, i want to get the columns items from the server Via Ajax/Proxy by sending json string? thanks var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'}, {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height: 350, width: 600, title: 'Array Grid', stateful: true, stateId: 'grid' });

    Read the article

  • Change ExtJS Grid Height in Javascript

    - by williamtroup
    How can I point at the object of a ExtJS Grid and manually set the height (in pixels)? For example, with this same: var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'}, {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height: 350, width: 600, title: 'Array Grid', // config options for stateful behavior stateful: true, stateId: 'grid' }); I would i be able to point at the "grid" object and then set the size of the grid? Any help would be fantastic!

    Read the article

  • fire click event for button

    - by Hadas
    I have column with buttons like this: var grid = new Ext.grid.GridPanel({ store: store, columns: [ { header: 'Issue',renderer: function(val){ return '<input type="button" class="btnissue" value="Issue" />'; }, dataIndex: 'btn', width: 49 } ], renderTo: Ext.get('Issuing') }); and I want to fire click event for this buttons. if I write : Ext.getCmp('btnissue').on('click',function(){ alert("message"); }); It say the button not exist. So how can I fire this event?

    Read the article

  • ExtJS: remove a grid from a tabpanel when its underlying store is empty

    - by Antonio
    Hi, I have TabPanel which contains, among other things, a Grid connected to a Store. Several events may remove elements from the store. I would like the Grid to be removed from the TabPanel when the store is empty and, possibly, to have a single place in my code to check for this event. I thought about using store listeners, but unfortunately this causes exceptions in Ext code. My assumption is that this happens because rendering is performed on the grid after this is removed from the tabpanel. Any idea on how to accomplish such a task without messing up Ext is much appreciated. Thanks :) By the way, this is a code excerpt: var myStore = new Ext.data.Store({ reader: new Ext.data.JsonReader({fields: MyRecord}), listeners:{ 'clear': function(store, recs) { myTabPanel.remove(myGrid); }, 'remove': function(store, rec, idx) { if (store.getCount() == 0) { myTabPanel.remove(myGrid); } } } }); var myGrid = new Ext.grid.GridPanel({ id: "myGrid", title: "A Grid", store: myStore, frame:false, border:false, columns: [ { header: 'Remove', align:'center', width: 45, sortable: false, renderer: function(value, metaData, record, rowIndex, colIndex, store) { return '<img src="images/remove.png" width="34" height="18"/>'; } },{ header: 'Some Data', dataIndex: 'data', sortable: true } ], listeners:{ 'cellclick':function(grid, rowIndex, colIndex, e){ var rec = myStore.getAt(rowIndex); if(colIndex == 0){ myStore.remove(rec); } } } }); var myTabPanel= new Ext.TabPanel({ activeTab: 0, items: [ fooPanel, barPanel, myGrid] });

    Read the article

1 2  | Next Page >