PDA

View Full Version : Put A Grid In ComboBox —— Magic GridCombo



Mac_J
16 Jul 2011, 7:33 AM
I'm not good at Ext enough now. so there must be some bugs and urgly code. sorry.
But, I will keep improving it.
Here is an online demo. http://www.boarsoft.com/javascript/gridCombo/
I will build a jquery version later.

27021http://www.sencha.com/forum/attachment.php?attachmentid=27021&d=1310830018

ajaxvador
16 Jul 2011, 8:32 AM
+1 great plugin

Mac_J
16 Jul 2011, 5:45 PM
Thank you encourage me. Any advice, I will really appreciate your help.

Mac_J
16 Jul 2011, 6:13 PM
Does any one know this bug?
when you click checkbox on the header to select all rows of grid. the "selectionchange" event does not triggered.

Mac_J
23 Aug 2011, 5:47 AM
~o) I use

pickerAlign: 'bl'

fixed the postion issue of Magic GridCombo when first open picker.

Mac_J
5 Sep 2011, 8:04 PM
Magic GridComob was fixed and updated to 1.1.

Support remote query for typeAhead and minChars.
You can force it do query right now via press ENTER key.

Two important bug was fixed:

When use setValue() method before drop down picker, the selection status is incorrect.
please see changes about syncSelection().

multiSelect: true, work correctly now.
please see changes about GridComboBoxList.initComponent()

wki01
12 Sep 2011, 5:19 AM
Selection does not work properly in the case of single select.
(This only works if you first press the button "Set")
You can try in your sample page.
​Also ...


....
createPicker : function() {
var me = this, picker, menuCls = Ext.baseCSSPrefix + 'menu', opts = Ext.apply({
selModel : {
mode : me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating : true,
hidden : true,
ownerCt : me.ownerCt,
cls : me.el.up('.' + menuCls) ? menuCls : '',
store : me.store,
displayField : me.displayField,
focusOnToFront : false,
pageSize : me.pageSize,
gridCfg : me.gridCfg,
owner : me, <------- A comma too
}, me.listConfig, me.defaultListConfig);
....

Mac_J
12 Sep 2011, 6:11 PM
I just fixed that problem. I'm sorry for this mistake.

http://www.boarsoft.com/javascript/gridCombo/
http://www.boarsoft.com/javascript/download/gridCombo_1.1.1.zip (http://www.boarsoft.com/javascript/gridCombo/)
Here is the new file and demo.

Mac_J
4 Jan 2012, 12:08 AM
Fix two important bugs and added "setSubmitValue" method

deepak.sakpal
27 Jan 2012, 7:37 AM
First, it's a nice plugin. Thanks for sharing it with us.

Now, I have a small issue. HOME, CTRL+HOME, END, CTRL + END keys are not working when ComboBox is in expanded state. How can I make it work?

Thanks

Mac_J
29 Jan 2012, 6:19 PM
First, it's a nice plugin. Thanks for sharing it with us.

Now, I have a small issue. HOME, CTRL+HOME, END, CTRL + END keys are not working when ComboBox is in expanded state. How can I make it work?

Thanks

Hi, deepak.sakpal, Do you mean you need use those keys for Page or Grid?
The Ext Grid is using those keys. so........

deepak.sakpal
1 Feb 2012, 11:02 PM
What I mean is, when I'm typing something into the ComboBox, at some point if want to clear all the text that I typed then I want to use CTRL+HOME or CTRL+END keys to select all text and I will hit DELETE key to clear the text. But right now, CTRL+HOME or CTRL+END has no effect. It's not selecting the text. Also HOME & END keys are not working. Is there any solution for this?

Mac_J
2 Feb 2012, 1:14 AM
Thanks, I think I found the reason and fixed it, that took me half a day. lol.
try this now, I will release 1.2.2 for download later. if you can't wait, pls get it from there directly.
http://www.boarsoft.com/javascript/gridCombo/

deepak.sakpal
4 Feb 2012, 12:06 AM
thanks Mac_J :)

Dmoney
14 Feb 2012, 9:34 AM
I'm having trouble getting this working in an MVC pplication.

I create a view like this:



Ext.define('AM.view.detailPanel.importCombo', {
extend: 'Ext.form.field.GridComboBox',
alias: 'widget.importCombo',
store: 'mfgCombo',
fieldLabel: 'Grid ComboBox',
multiSelect: false,
displayField: 'mfgName',
valueField: 'mfgID',
width: 300,
labelWidth: 100,
labelAlign: 'right',
store: 'mfgCombo',
typeAhead: true,
queryMode: 'remote',
matchFieldWidth: false,
pickerAlign: 'bl',
gridCfg: {
store: 'mfgCombo',
height: 200,
width: 400,
columns: [{
text: 'No',
width: 40,
dataIndex: 'mfgID'
}, {
text: 'Subject',
width: 120,
dataIndex: 'mfgID'
}, {
text: 'Credit',
width: 60,
dataIndex: 'mfgName'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: 'mfgCombo',
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No data to display"
})
}


});


for testing purposes I'm just using a store that already existed to populate a normal combo box mfgCombo if I comment out the gridCombo the other combo with the same store works fine. They both have the same controller.

But when I try using the grid in a combo I get a firebug error :

store is undefined
store.on(listeners);


Any Ideas?

Mac_J
14 Feb 2012, 6:17 PM
Hi @Dmoney:
store: 'mfgCombo' --> store: mfgCombo,
That is an instance of Store not a String

Dmoney
14 Feb 2012, 8:47 PM
I think when using the MVC structure the store has to be a string. you reference the store by ID in MVC
http://www.sencha.com/learn/the-mvc-application-architecture/

Mac_J
14 Feb 2012, 9:58 PM
Oh, I never try MVC before. I took a look the code, but I have no enough time to test it for MVC now.
Can you do me a favour?
Please change "me.grid.store" to "me.grid.getStore()" in GridComboBoxList.js?
There are only two lines.
I think that may be caused by init process of GridComboBox and GridComboBoxList.
Tanks.

Mac_J
14 Feb 2012, 10:01 PM
Oh, I never try MVC before. I took a look the code, but I have no enough time to test it for MVC now.
Can you do me a favour?
Please change "me.grid.store" to "me.grid.getStore()" in GridComboBoxList.js?
There are only two lines.
I think that may be caused by init process of GridComboBox and GridComboBoxList.
Thanks.

Mac_J
14 Feb 2012, 10:18 PM
Why I can use ID for store? I made a store and give it's ID to two GridComboBox and another Combo, All of them works fine. :-/

Dmoney
15 Feb 2012, 10:13 AM
Ok I figured out my problem it was with the paging toolbar. I needed to change the toolbar store to use ext.getStore and everything works perfectly now! Thanks for the great Plugin!



bbar: Ext.create('Ext.PagingToolbar', {
store: Ext.getStore('mfgCombo'),
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No data to display"
})

Mac_J
15 Feb 2012, 5:33 PM
Enjoy! Good luck!

deepak.sakpal
26 Mar 2012, 2:53 AM
Hey Mac_J,

Lets assume that we have a combo box with queryMode = remote. If I type something in the combo box, it starts fetching the results matching the criteria. Let's assume that this takes a long time to load results. Now before the store is loaded with results, if type something else in the grid, a second request if fired to get the results for the new criteria. If the second request gets the result before the first request then the results are displayed in the grid. Now the problem is when the first request is loaded with results, it clear results displayed from first request and displays the results of the second request in the grid. But while doing this it also clears the contents typed in the combo box. How can we fix this issue? Hoe can we cancel the first request if a second request is initiated?

Please let me know if you need more information.

Mac_J
26 Mar 2012, 5:41 AM
pls try insert these lines at 198 line of GridComboBox.js. If it works, let me know.;)

if(me.doQueryTask)
me.doQueryTask.cancel();

deepak.sakpal
27 Mar 2012, 4:02 AM
Sometimes it works, sometimes it doesn't. When it doesn't work, it clear the data typed in combo box. How can I avoid it?

thanks

Mac_J
27 Mar 2012, 4:50 AM
Hmm...Can you revert it and try this new one at line 212.
I think typeAheadTask may be canceled too.
I'm busy these weeks, can you test it for me and tell me if it works, Thanks.

if (!me.queryCaching || me.lastQuery !== queryString) {
me.doQueryTask.cancel();
if(me.typeAheadTask)
me.typeAheadTask.cancel();

deepak.sakpal
27 Mar 2012, 5:13 AM
Sadly it's not working :(

innovar
27 Mar 2012, 5:27 AM
When I use this extension, I get the following errors:

Chrome via builtin Developer Tools:
Uncaught TypeError: Object [object Object[ has no method 'assertValue'

Firefox via Firebug:
me.assertValue is not a function

This is from GridComboBox.js in function beforeBlur (line 118).

innovar
27 Mar 2012, 11:09 AM
Another issue I'm seeing is that I'm listening for the 'change' event. This works with the regular combobox, but with the gridcombobox, I get the first event, but after that I don't get them anymore. Same with the 'select' event.

innovar
27 Mar 2012, 11:11 AM
I also added the following:

me.gridCfg.border = false;
+ me.gridCfg.store = me.store;
me.grid = Ext.create('Ext.grid.Panel', me.gridCfg);

to GridComboBoxList.js (line 120) so that I can use my inline defined store, instead of having to predefine it elsewhere.

Mac_J
27 Mar 2012, 6:35 PM
To Innovar
for assertValue(): I added a simple assertValue method to support "tabOnSelect", but only support single selection. pls get latest source file from here(via "view source"). I added that gridCfg.store line too.
http://boarsoft.com/javascript/gridCombo/index.php

for change event: I don't understand what you exact mean. If you want do somthing when the text in input box changes, you can use enableKeyEvents: true with keypress listener.

What do you think?

deepak.sakpal (http://www.sencha.com/forum/member.php?147040-deepak.sakpal) I still have no idea about that issue.
I just move "me.doQueryTask.cancel();" into onKeyUp().
If user type anything cancel all QueryTask may be make sense.
You can get latest update from my site too. Does this work?

deepak.sakpal
27 Mar 2012, 10:44 PM
"me.doQueryTask.cancel();" is not cancelling the search request.

Another problem, I wrote "me.doQueryTask.cancel();" on blur event to cancel the operation but it's not cancelling the request. I can see it pulling the data in firebug. If thing works then life will be much easier for me.

innovar
28 Mar 2012, 8:47 AM
To Innovar
for change event: I don't understand what you exact mean. If you want do somthing when the text in input box changes, you can use enableKeyEvents: true with keypress listener.

What do you think?

I don't think that will work. I have the gridcombobox configured so that the user must select one of my supplied values (they cannot enter their own values [e.g., forceSelection = true]). Furthermore, I have setup the grid to use a checkbox selection model with checkOnly config option set to true. So the user isn't entering via the keyboard, but via a mouse click.

Now, I have a number of these gridcomboboxes that chain together, so that one relies on the input of the above gridcomboboxes to determine which values it should show. So, whenever the value(s) in the combobox change (I have them set to multiSelect = true), the lower gridcomboboxes must reset their values accordingly.

I can't merely rely on the 'collapse' event, because a user could open a gridcombobox but still not (unselect) anything. I also can't rely merely on the 'select' event, since it won't fire if the user deselects everything. I was using the 'change' event successfully with the regular builtin combobox, but with the gridcombobox, that event only fires the first time there is a change and then stops firing.

innovar
28 Mar 2012, 11:46 AM
To Innovar
for assertValue(): I added a simple assertValue method to support "tabOnSelect", but only support single selection. pls get latest source file from here(via "view source"). I added that gridCfg.store line too.
http://boarsoft.com/javascript/gridCombo/index.php


I updated to v1.2.1 for GridComboBoxList and v1.2.3 for GridComboBox (are they supposed to be two different version numbers?). I notice that now multiSelect is broken. When I select 2 or more items in the list, when I collapse the gridcombobox the gridcombobox resets itself (nothing is selected).

Also, when I have a gridcombobox with 1 value, and that value is selected I can open up the gridcombobox, unselect and the value doesn't go away and then select the value and it will appear twice separated by a comma. Of course, when I collapse it all goes away.

Mac_J
2 Apr 2012, 12:43 AM
Try adding this to line 510 of GridComboBox.js

syncSelection : function() {
var me = this, pk = me.picker;
if (me.store.loading)
return;

I think we can't cancel a remote data load job.
Even we also canceled the doQueryTask, but the syncSelection() still be executed that clear you input.
Does this work?

Mac_J
2 Apr 2012, 1:38 AM
I don't think that will work. I have the gridcombobox configured so that the user must select one of my supplied values (they cannot enter their own values [e.g., forceSelection = true]). Furthermore, I have setup the grid to use a checkbox selection model with checkOnly config option set to true. So the user isn't entering via the keyboard, but via a mouse click.

Now, I have a number of these gridcomboboxes that chain together, so that one relies on the input of the above gridcomboboxes to determine which values it should show. So, whenever the value(s) in the combobox change (I have them set to multiSelect = true), the lower gridcomboboxes must reset their values accordingly.

I can't merely rely on the 'collapse' event, because a user could open a gridcombobox but still not (unselect) anything. I also can't rely merely on the 'select' event, since it won't fire if the user deselects everything. I was using the 'change' event successfully with the regular builtin combobox, but with the gridcombobox, that event only fires the first time there is a change and then stops firing.

I think you have to do that in grid listeners not in GridComboBox for now.

Mac_J
2 Apr 2012, 1:45 AM
I updated to v1.2.1 for GridComboBoxList and v1.2.3 for GridComboBox (are they supposed to be two different version numbers?). I notice that now multiSelect is broken. When I select 2 or more items in the list, when I collapse the gridcombobox the gridcombobox resets itself (nothing is selected).

Also, when I have a gridcombobox with 1 value, and that value is selected I can open up the gridcombobox, unselect and the value doesn't go away and then select the value and it will appear twice separated by a comma. Of course, when I collapse it all goes away.

sure? I just implemented assertValue() method. And the multi-select Online Demo is working.
You know, I didn't bind the Grid Selection events with ComboBox.
so you have to use the selection model of Grid directly for your purpose.

innovar
2 Apr 2012, 12:21 PM
Try adding this to line 510 of GridComboBox.js

syncSelection : function() {
var me = this, pk = me.picker;
if (me.store.loading)
return;

I think we can't cancel a remote data load job.
Even we also canceled the doQueryTask, but the syncSelection() still be executed that clear you input.
Does this work?

Is that for me?

Mac_J
2 Apr 2012, 6:34 PM
Is that for me?

No, that is for deepdak.sakpal, the others for you. :)

deepak.sakpal
3 Apr 2012, 4:06 AM
I'm using following code to cancel the loading of store:

cboPatientName.doQueryTask.cancel();
Ext.Ajax.abort(cboPatientName.store.proxy.activeRequest);
delete cboPatientName.store.proxy.activeRequest;


Try adding this to line 510 of GridComboBox.js

syncSelection : function() {
var me = this, pk = me.picker;
if (me.store.loading)
return;

I think we can't cancel a remote data load job.
Even we also canceled the doQueryTask, but the syncSelection() still be executed that clear you input.
Does this work?

deepak.sakpal
3 Apr 2012, 4:09 AM
Hi,

How to enable arrow keys i.e. down & up in this plugin. Lets say user type something in the combo box and press down arrow key so that the first record from the list should be selected & when down key is pressed again, next record is selected and so on.

Mac_J
5 Apr 2012, 5:38 PM
Hi,

How to enable arrow keys i.e. down & up in this plugin. Lets say user type something in the combo box and press down arrow key so that the first record from the list should be selected & when down key is pressed again, next record is selected and so on.

Thanks for your last tips. This is my plan for UP/DOWN
1、do query when UP and DOWN at onKeyUp()
2、select first record at onLoad()
3、If user press UP/DOWN again after data load, select next or prev record.

Can you try to implement this yourself first.
If you made it, I will put your name on as Author.
Thank you.

lxfliu
24 Apr 2012, 12:58 AM
不错的创意!感谢共享!

zeno
25 Apr 2012, 10:13 PM
Can you help fix the bug?

I updated my extjs to 4.1.0, but this component doesn't work if it has records in it.

but empty records works.

Thanks.

Mac_J
4 May 2012, 6:38 PM
This is the exeption we got

'Ext.DomQuery.compile(): Error parsing selector. Parsing failed at "."' when calling method: [nsIDOMEventListener::handleEvent]
chrome://firebug/content/net/spy.js
Line 812

Is there any Sencha Developer can help us? just some tips.

Mac_J
6 May 2012, 6:06 PM
GridComoBox Support Ext4.1 now!

ByteLess
20 Feb 2013, 8:00 AM
GridComoBox Support Ext4.1 now!

Thanks, any howto would be appreciated that how to implement this with Sencha Architect.

pra123@
21 Jun 2013, 8:59 AM
We are using this grid combobox. its displays data for me.
but we want to listen to itemCLick event when we click on grid row, it should fire the events, but its not firing
below is mine code..


var gridCmbMultiColumn = new Ext.ux.GridComboBox({
fieldLabel : 'Grid ComboBox',
multiSelect : false,
displayField : 'DisplayMember',
valueField : 'DisplayMember',
width : 250,
labelWidth : 100,
labelAlign: 'Left',
store : store,
typeAhead : true,
queryMode : 'local',
matchFieldWidth : false,
pickerAlign: 'bl',
gridCfg : {
store : store,
height: 200,
width: 400,
columns : [
{
text : 'ValueMember',
width : 100,
dataIndex : 'ValueMember'
},{
text : 'ContractBasis',
width : 100,
dataIndex : 'ContractBasisName'
}, {
text : 'ContractBasis',
width : 100,
dataIndex : 'ContractBasisName'
},{
text : 'Description',
width : 160,
dataIndex : 'Description'
}]
},
listeners: {
itemClick: {
fn: function testtrigger(p, r){
console.log('test item 1');
}
}
}
});


please help what i am doing wrong..
thanks,

Neethi
18 Aug 2013, 9:30 PM
Is there any download link for Extjs 3.x version of same plugin..

Thanks,
Neethi