tag:blogger.com,1999:blog-1691872865366176972.post3456680246917243256..comments2023-05-29T18:02:21.021+02:00Comments on Elvis is still in the building: Dynamic GridPanel for ExtJs 4Elvis Hsuhttp://www.blogger.com/profile/00425608105614748484noreply@blogger.comBlogger55125tag:blogger.com,1999:blog-1691872865366176972.post-38113544846279954612013-12-19T17:48:47.962+01:002013-12-19T17:48:47.962+01:00Hi, Muglee,
You are very welcome. Does it work fo...Hi, Muglee,<br /><br />You are very welcome. Does it work for you? <br /><br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-16312178315834457792013-12-19T17:46:29.729+01:002013-12-19T17:46:29.729+01:00Thank you so muchThank you so muchMugleehttps://www.blogger.com/profile/10473643123921523727noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-77266590213078515422013-12-19T17:17:37.994+01:002013-12-19T17:17:37.994+01:00Hi, Muglee,
Have a look at the following link:
ht...Hi, Muglee,<br /><br />Have a look at the following link:<br />http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-cfg-plugins<br /><br />In you config object, you need to place cellediting plugin<br /><br />plugins: [{ptype: 'cellediting', clicksToEdit: 1}],<br /><br />Cheers,<br /><br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-18918267795867972512013-12-19T17:09:08.467+01:002013-12-19T17:09:08.467+01:00Thanks Elvis for your reply . can you please give ...Thanks Elvis for your reply . can you please give a hint of how to do CRUDE operations on dynamicgrid. I am not able to display textbox from jsonMugleehttps://www.blogger.com/profile/10473643123921523727noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-1852188292313347962013-12-19T16:59:02.799+01:002013-12-19T16:59:02.799+01:00Hi Ken,
Thanks for your reply.I am able to display...Hi Ken,<br />Thanks for your reply.I am able to display the grid properly.Thsi post is awesome.<br />I am trying to build dynsmic grid that does CRUDE operation. SO far i am not abe to display the Textboxes in dynamic grid .Below is my json<br /><br />{<br /> "gridName": "MugdhaGrid",<br /> "columns": [<br /> {<br /> "editor": {<br /> "xtype": "textfield"<br /> },<br /> "hidden": false,<br /> "sortable": true,<br /> "width": 100,<br /> "dataIndex": "First_Name",<br /> "header": "First_Name"<br /> },<br /> {<br /> "editor": {<br /> "xtype": "textfield"<br /> },<br /> "hidden": false,<br /> "sortable": true,<br /> "width": 100,<br /> "dataIndex": "id",<br /> "header": "id"<br /> },<br /> {<br /> "editor": {<br /> "xtype": "textfield"<br /> },<br /> "hidden": false,<br /> "sortable": true,<br /> "width": 100,<br /> "dataIndex": "Salary",<br /> "header": "Salary"<br /> },<br /> {<br /> "editor": {<br /> "xtype": "textfield"<br /> },<br /> "hidden": false,<br /> "sortable": true,<br /> "width": 100,<br /> "dataIndex": "Last_Name",<br /> "header": "Last_Name"<br /> }<br /> ],<br /> "gridData": [<br /> {<br /> "id": "1",<br /> "Last_Name": "Churi",<br /> "First_Name": "Sita",<br /> "Salary": "5000"<br /> },<br /> {<br /> "id": "2",<br /> "Last_Name": "Smith",<br /> "First_Name": "Jen",<br /> "Salary": "6000"<br /> },<br /> {<br /> "id": "3",<br /> "Last_Name": "Pitt",<br /> "First_Name": "Brad",<br /> "Salary": "2000"<br /> },<br /> {<br /> "id": "4",<br /> "Last_Name": "Cruise",<br /> "First_Name": "Tom",<br /> "Salary": "8000"<br /> }<br /> ],<br /> "metaData": {<br /> "root": "gridData",<br /> "idProperty": "dynaGridId",<br /> "fields": [<br /> {<br /> "name": "First_Name",<br /> "type": "string"<br /> },<br /> {<br /> "name": "id",<br /> "type": "string"<br /> },<br /> {<br /> "name": "Salary",<br /> "type": "string"<br /> },<br /> {<br /> "name": "Last_Name",<br /> "type": "string"<br /> }<br /> ]<br /> }<br />}<br /><br />Can anybody please tell me whats wrong in the code? <br />Mugleehttps://www.blogger.com/profile/10473643123921523727noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-29562346017424134362013-12-19T16:49:21.096+01:002013-12-19T16:49:21.096+01:00Hi, Ken,
Can you show me your config code?
Cheer...Hi, Ken,<br /><br />Can you show me your config code?<br /><br />Cheers,<br /><br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-47832646026259308732013-12-19T14:30:19.032+01:002013-12-19T14:30:19.032+01:00Is it my app or what, Row hover highlighting is no...Is it my app or what, Row hover highlighting is not working with this exampleAnonymoushttps://www.blogger.com/profile/12217021792111315669noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-5812413070970921172013-12-19T10:17:03.137+01:002013-12-19T10:17:03.137+01:00At beginning of your page, between head tags, you ...At beginning of your page, between head tags, you should have the following configuration in your Javascript section. Before Ext.onReady()<br /> <br />Ext.Loader.setConfig({enabled: true});<br />Ext.Loader.setPath('Ext.ux', '../Scripts/Library/Ext/ux');<br />Ext.require(['Ext.ux.grid.DynamicGridPanel', '*']);<br /><br />Your "Ext.ux.grid.DynamicGridPanel" should have the file name "DynamicGridPanel.js" under "../Script/Library/Ext/ux/grid/" folder. So the whole path of your file would be "../Script/Library/Ext/ux/grid/DynamicGridPanel.js"Elvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-81152090773815907872013-12-18T16:47:43.052+01:002013-12-18T16:47:43.052+01:00Hi,
I am getting error as
Ext.ux.grid.DynamicGrid...Hi,<br />I am getting error as <br />Ext.ux.grid.DynamicGridPanel is undefined, i do not see ux folder in extjs4.2 , do ineed to put extra js in my 4.2 folder?Mugleehttps://www.blogger.com/profile/10473643123921523727noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-30265722084371289702013-10-04T09:45:21.615+02:002013-10-04T09:45:21.615+02:00console.log(grid.getView().getHeaderCt().getGridCo...console.log(grid.getView().getHeaderCt().getGridColumns()); this is giving me an empty array too.Anonymoushttps://www.blogger.com/profile/12217021792111315669noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-26042029777058535382013-10-03T17:17:01.456+02:002013-10-03T17:17:01.456+02:00Hi, Anoop,
Thank for your recommendation. The dyna...Hi, Anoop,<br />Thank for your recommendation. The dynamic grid concept is same as your suggestion. I just wrap these loose calls into a class as I use dynamic grid quite often. I thought it would be easier for me.<br /><br />Thanks again,<br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-37355416369307025162013-10-03T17:12:14.413+02:002013-10-03T17:12:14.413+02:00Hi, Ken,
My suggestion would be looking at this li...Hi, Ken,<br />My suggestion would be looking at this link <br /><br />http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.grid.header.Container-method-getGridColumns<br /><br />to get all columns of this grid.<br /><br />I assume the returned data does not contain any information about the hidden status of each column. So you can use below method to get visible columns of current grid.<br /><br />http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.grid.header.Container-method-getVisibleGridColumns<br /><br />You can cross reference them and cache the result in anywhere of your application for future use.<br /><br />Hope this helps,<br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-55315542173319401012013-10-03T16:19:14.985+02:002013-10-03T16:19:14.985+02:00I want to grab the state of the columns and use th...I want to grab the state of the columns and use them somewhere else... i.e .. if have like 10 columns in the grid, the user can hide/un-hide any 3 of them.. now i want to grab now all this columns with their current states and use that information somewhere else in my application..Anonymoushttps://www.blogger.com/profile/12217021792111315669noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-65213112562303810622013-10-03T15:47:32.026+02:002013-10-03T15:47:32.026+02:00Hi, Ken,
Could you please give more information ab...Hi, Ken,<br />Could you please give more information about what you want to achieve?<br /><br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-52363311026846236142013-10-01T10:16:38.956+02:002013-10-01T10:16:38.956+02:00myGrid .columns returns an empty array. I want to...myGrid .columns returns an empty array. I want to get all the columns non-hidden, and send them to the serverAnonymoushttps://www.blogger.com/profile/12217021792111315669noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-79681478883157493432013-05-06T09:03:24.336+02:002013-05-06T09:03:24.336+02:00The same can be achieved without using dynamic gri...The same can be achieved without using dynamic grid concept....<br /><br />* Define an empty store with empty fields.<br />* Define a empty grid with the defined store.<br />* Generate columns & data.<br />* Make an ajax call for the function.<br /> ex : test.php?cmd=generateData<br />* assign the columns to the grid.<br /> ex : grid.reconfigure(store, result.columns);<br />* load the data returned as result from ajax<br /> ex : grid.store.loadData(result.data);<br /><br />NOTE : result is response from the PHP function.<br /><br />Regards,<br />Anoop Pete<br />anoop.pete@gmail.comAnonymoushttps://www.blogger.com/profile/10762710145198662391noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-63654719738474847902013-01-16T18:50:09.212+01:002013-01-16T18:50:09.212+01:00I found the mistake, have to change xtype to dynam...I found the mistake, have to change xtype to dynamicGridPanel and it works great. Thanks very much for all your help, your code helped me alot.iamcodinghttps://www.blogger.com/profile/17189146025916701323noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-69079165251720693002013-01-15T16:14:44.757+01:002013-01-15T16:14:44.757+01:00Hi,
It says "name is undefined" when I ...Hi,<br /><br />It says "name is undefined" when I add xtype: 'dynamicgrid', what is going wrong? Sorry to bother you again, can you please help me out?iamcodinghttps://www.blogger.com/profile/17189146025916701323noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-43572945317570818762013-01-11T07:37:13.232+01:002013-01-11T07:37:13.232+01:00Hi Elvis,
PHP was simple, I was able to do and it...Hi Elvis,<br /><br />PHP was simple, I was able to do and it works like a charm. But now as I am trying with MVC type, having some issues, I will show simple code, can you please help me correct it?<br /><br />VIEW<br />======================================================================<br />Ext.define('MyApp.view.MyPanel', {<br /> extend: 'Ext.panel.Panel',<br /> <br /> requires: ['Ext.ux.grid.DynamicGridPanel'],<br /><br /> height: 346,<br /> width: 716,<br /> layout: {<br /> type: 'absolute'<br /> },<br /> title: 'My Panel',<br /><br /> initComponent: function() {<br /> var me = this;<br /><br /> Ext.applyIf(me, {<br /> items: [<br /> {<br /> xtype: 'gridpanel',<br /> x: 20,<br /> y: 20,<br /> autoRender: true,<br /> xtype:'dynamicgrid',<br /> height: 140,<br /> width: 410,<br /> title: 'My Grid Panel',<br /> store: 'MyJsonStore'<br /> },<br /> {<br /> xtype: 'pagingtoolbar',<br /> x: 20,<br /> y: 160,<br /> height: 30,<br /> width: 410,<br /> displayInfo: true,<br /> store: 'MyJsonStore'<br /> }<br /> ]<br /> });<br /><br /> me.callParent(arguments);<br /> }<br /><br />});<br />======================================================================<br /><br />MODEL<br />======================================================================<br />Ext.define('MyApp.model.MyModel', {<br /> extend: 'Ext.data.Model',<br /><br /> proxy: {<br /> type: 'rest',<br /> url: 'dynamic.php'<br /> }<br />});<br />======================================================================<br /><br />STORE<br />======================================================================<br />Ext.define('MyApp.store.MyJsonStore', {<br /> extend: 'Ext.data.Store',<br /><br /> requires: [<br /> 'MyApp.model.MyModel'<br /> ],<br /><br /> constructor: function(cfg) {<br /> var me = this;<br /> cfg = cfg || {};<br /> me.callParent([Ext.apply({<br /> autoLoad: true,<br /> storeId: 'MyJsonStore',<br /> model: 'MyApp.model.MyModel',<br /> pageSize: 50<br /> }, cfg)]);<br /> }<br />});<br />======================================================================iamcodinghttps://www.blogger.com/profile/17189146025916701323noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-63139151297242004482013-01-10T14:51:54.125+01:002013-01-10T14:51:54.125+01:00Hi Elvis, I tried you coding, it works good, my PH...Hi Elvis, I tried you coding, it works good, my PHP input will just have a query which forms JSON response, but your example returns with fields and columns, so now I am trying to modify server code. And also I am working with MVC type, trying for that, I will let you know if everything is successful.<br /><br />Thanks again for your code :).iamcodinghttps://www.blogger.com/profile/17189146025916701323noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-65711512383302599042013-01-10T03:38:47.665+01:002013-01-10T03:38:47.665+01:00Hi,
I have added the client and server side examp...Hi, <br />I have added the client and server side example on the original post. I hope this can help you out.<br /><br />Regards,<br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-64296169270425837692013-01-09T12:06:39.227+01:002013-01-09T12:06:39.227+01:00MVC type will be better :).MVC type will be better :).iamcodinghttps://www.blogger.com/profile/17189146025916701323noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-83971702563010689802013-01-09T10:57:24.329+01:002013-01-09T10:57:24.329+01:00Hi Elvis,
1. If I change type to 'json', ...Hi Elvis,<br /><br />1. If I change type to 'json', it takes totalProperty showing all pages and making url from server side, but doesn't form data in the grid since metaData is actually coming from DynamicReader.js which we are stopping with 'json' type. So metachange will not have dynamic model that will be created to reconfigure.<br />2. Tried removing all properties, it does work with just 'dynamicReader' type and root mentioned in it.<br />3. If I change 'metachange' to 'load' it will not have metaData, so obviously won't form grid.<br /><br />I am using 4.2.0 now, initially started with 4.1.1, shifted to this for better performance.<br /><br />May be I can try with your plugin, I should just call in my VIEW right? Seems like from your comments, I have to create a model also. I have to try paging in it. A working example in github or somewhere will be of great help :).<br /><br />BTW thanks for your replies.iamcodinghttps://www.blogger.com/profile/17189146025916701323noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-23736139306401630832013-01-09T01:00:20.635+01:002013-01-09T01:00:20.635+01:00Hi,
Can you try few changes?
1. Change your read...Hi,<br />Can you try few changes?<br /> 1. Change your reader type from 'dynamicReader' to 'json'<br /> 2. Remove all *Property since the metaData should provide these parameters<br /> 3. Remove DataStore's listener 'metachange' to 'load' and use the one <br /> I have in the original post.<br /><br />What version of ExtJs are you using? Try 4.0.7 or 4.1.1a because both versions work for me with my recommended changes. I found out some issues on your DynamicDataReader class.<br /><br />Regards,<br />ElvisElvis Hsuhttps://www.blogger.com/profile/00425608105614748484noreply@blogger.comtag:blogger.com,1999:blog-1691872865366176972.post-64747026055067101482013-01-08T08:28:41.816+01:002013-01-08T08:28:41.816+01:00Those count and total are just examples, that was ...Those count and total are just examples, that was edited, I tried with exact totalProperty, didn't do. May be I should do something in the listener which is reconfiguring grid for paging also?iamcodinghttps://www.blogger.com/profile/17189146025916701323noreply@blogger.com