View Full Version : Grid Tool Bar With Buttons

14 Aug 2014, 11:00 AM
I am very new to 'Extjs' controls but good at JavaScript and Jquery ,please help me out in find the solution for below scenario

Note : I am on extjs 3.2.1

Our application basically has one HTML page in which all the Extjs controls are dynamically loaded with respect to user interface .

'Viewport.js' file is main JavaScript file which has three panels ,one keeps the Menu tree ,Second keeps the four different tabs and third one is footer tab

.In Second panel has four different tabs(Account,Bid,Maintenance,Report) ,on every click on tab same panel will be destroyed/remove all then new object is loaded .

In one of the Tab(Maintenance) i have 'form' which has - Grid with Tool Bar which has 'Paging tool Bar' and normal four button .
When Use clicks 'New Request' on toolbar .'Viewport.js' removes all the controls from 'form' using RemoveAll() and loads new form.

Problem :

1. ToolBar is new enhancement added wherein previously there were only just 4 button.One the tool bar is added the RemoveAll() wont destroy the object and create new .

After RemoveAll() non of the Extjs function works i.e. selText(),isDirty() .New screen loads but still it is freezed .

If i remove pagination from tool bar everything works perfect .

Note : Check NewRequest listener 'click' event from which new screen creation is called


var pendingPagingToolbar = new Ext.PagingToolbar({
pageSize: recordsPerPage //** set the records on the page
,store: store_AM_Requests_Dashboard
,displayInfo: true
,emptyMsg: ''
,vtype: null
,autoDestroy: false
,preventMark: true
,prependButtons: true

var AM_Dashboard_RequestsGrid = {
id: 'AM_RequestsGrid'
,xtype: 'grid'
,store: store_AM_Requests_Dashboard
,autoScroll : true
,hideBorders: true
,loadMask: true
//,bbar: [ pendingPagingToolbar ]
,tbar: [ pendingPagingToolbar,
xtype: 'button'
,id : 'dashToggleBtn_newRquest'
,text: 'New Request'
,width: 'auto'
,icon: 'resources/images/request_add_20121102.png'
,tooltip: 'Create a new Request for this parent/subparent'
,listeners: {
'click': function(){
fnConsoleLog('Click Requests Tab - NEW REQUEST button'
+ '\n calls fnSetProfileOrRequest(\'request\')'
+ '\n calls fnNewRequest()'
if(profileOrRequest !== 'request'){
fnNewRequest(); //** call to create new AM Request
},'-' //** vertical spacer
//** reportType toggle button group. calls fnDashboardToggle() to determine report to show
id: 'dashToggleBtn_Pending'
,text: 'Pending'
,enableToggle: true
,tooltip: 'Shows all pending requests'
,pressed: true
,toggleGroup: 'requestsToggle'
,toggleHandler: fnDashboardToggle
,icon: 'resources/images/request_pending_20121102.png'
},'-' //** vertical spacer
id: 'dashToggleBtn_InProgress'
,text: 'In Progress'
,enableToggle: true
,tooltip: 'Shows all In Progress requests'
,toggleGroup: 'requestsToggle'
,toggleHandler: fnDashboardToggle
,icon: 'resources/images/request_in_progress_20121102.png'
},'-' //** vertical spacer
id: 'dashToggleBtn_Completed'
,text: 'Completed'
,enableToggle: true
,tooltip: 'Shows all Completed requests'
,toggleGroup: 'requestsToggle'
,toggleHandler: fnDashboardToggle
,icon: 'resources/images/request_completed_20121102.png'
},'-' //** vertical spacer
id: 'dashToggleBtn_Removed'
,text: 'Removed'
,enableToggle: true
,tooltip: 'Shows all Removed requests'
,toggleGroup: 'requestsToggle'
,toggleHandler: fnDashboardToggle
,icon: 'resources/images/request_remove_20121102.png'
,'-' //** vertical spacer
,{ //** toggle to show all requests in the grid, or only those for the current parent via fnDashboardToggle()
id: 'dashToggleBtn_AllRequests'
,text: 'All Requests'
,enableToggle: true
,icon: 'resources/images/toggle.png'
,tooltip: 'Shows requests of all applicable parents'
,toggleHandler: fnDashboardToggle
,'-' // vertical spacer
id: 'AM_request_refresh'
,xtype: 'button'
,tooltip: 'Refresh the data!'
,text: 'Refresh'
,icon: 'resources/images/refresh.gif'
,listeners: {
click: function () {
,'-' // vertical spacer
,{ //** spacer
id: 'spacer',
text: ''

15 Aug 2014, 9:32 AM
Any Luck ,Sencha Team !

15 Aug 2014, 7:05 PM
Are you using IE? or what?

I'm trying to isolate an issue in which a removeAll(true) results in an exception in IE (ExtJS, but is fine in Chrome. In my case the component type that is being destroyed at the time of the exception is a FieldSet containing a RadioGroup. Since the toolbar is also a container with embedded components, it may be the same underlying bug in ExtJS (or IE).

Determine if an exception is occurring. Something like:

try {
} catch(err) {

18 Aug 2014, 6:45 AM
Hello rich ,
I have the same issue in all browsers .

Below are different ways which i tried to resolve

1. Try to add other controls (other than Pagination) it works perfect but not Paging
2. Try to destroy the Pagination before navigation / loading new object to Form
3. Try to destroy Grid
4. Try to keep Paging object Globally
5. Used Jquery to Destroy object
6. Try to destroy the Store which is referenced to Pagination

Non of the above worked .

My assumption :
Object.RemoveAll() method was not able to destroy completely the Page control/Store and creates problem.Since its not destroyed and throws exception non of the Methods in Object.form works i.e. Object.form.setTittle etc


19 Aug 2014, 12:59 PM
Team ,
Can you help me out in resolving the issue ?