backspace and arrows keys are not on input textbox

[koolfreak]

Hi,

I have this issue when i put a textbox in a panel. and here is the code:

 var cw = Ext.create('Ext.Viewport', {
        layout: {
            type: 'border'
        },
 .......

,{
            region: 'center',
            layout: 'border',
            border: false,
            items: [{
                region: 'center',
                autoScroll:true,
                minWidth: 500,
                title: '<img width="20" height="18" style="vertical-align:middle;" src="images/images-design/icon-folder.png">&nbsp;Folder Contents',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{xtype: 'panel', id: 'topMenu',border:false,bodyStyle:{'background-color': '#FFF'},width:'100%',height: topMenuHeight}]
                }]
            },

and in the panel "topMenu" code:

function writeFolderContentsHeader(){
            
        var browsedoc_header =     '<div style="height:30px;padding-top:5px;width: 100%;">'+
                                     '<div style="float: left; padding: 5px;">'+
                                        'Items found:&nbsp;<span id="resultSizeLabel"></span>&nbsp;'+
                                    '</div>'+
                                    '<div style="float: right; margin-right: 10px;">'+
                                        '<table >'+
                    ......

'<td>'+
                                                    '<input type="text" style="border:1px solid #FFFFFF;width:20px;" id="gotoPageMark" value="" disabled="true"/>&nbsp;of&nbsp;'+
                                                '</td>'+

..................

return  browsedoc_header;

$('#topMenu').html(writeMenu()+writeFolderContentsHeader()+writeTableColumnHeader());

The input text that id of "gotoPageMark", for no apparent reason the backspace key is not functioning but the rest is ok. How can I make it work the backspace?

Cheers.
Eman

[mitchellsimoens]

Are you mixing Ext JS and jQuery together? If so, why?

[koolfreak]

Yes, Im using Ext JS and JQuery together, because we have special layouting requirement in our main page, which the resizable pane. I cannot find any good implementation in JQuery that suit our needs as ExtJS does(Viewport and etc...).

Is there any issues mixing the JQuery and ExtJS together? If so, how can I solve my issue?

Cheers.

[mitchellsimoens]

You are making the client download two frameworks and jQuery usually isn't needed for what Ext JS can do. When I see it happen, 100% of the time is because someone is familiar with jQuery and they don't want to or don't have the time to actually learn Ext JS but they need to use Ext JS.

[koolfreak]

Most of my teammates knows jQuery and the app is already built using jQuery.

When I see it happen, 100% of the time is because someone is familiar with jQuery and they don't want to or don't have the time to actually learn Ext JS but they need to use Ext JS.

- I agree to this, because there is no time to train/learn Ext JS.

Btw, how can I solve my issue on backspace? I already try .innerHTML and still wont work. There is no error message thrown in firebug.

cheers.

[koolfreak]

I try some extjs domquery to insertHtml:

Ext.get('topMenu').insertHtml('afterEnd',writeMenu()+writeFolderContentsHeader()+writeTableColumnHeader());

but when rendered, the input and select textbox is not anymore clickable and also in IE it htrows an error saying it has extra ')'?

any idea on how to resolve this?

cheers.