PDA

View Full Version : Extjs and jquery help



teja_0080
29 Apr 2011, 12:49 AM
Hi,
can one please help me out here. I'm new to extJs.
I need to display a window on the page load ( the page should be grayed out, with the window active and overlapping) , the window should contain a textbox and label and a submit button. Now i want to apply autocomplete plugin of Jquery to the textbox with in the window. i tried adding the jquery adapter but in vain also once the window is displayed the page is not grayed out am i missing any config option please help.. the below is my code




Ext.onReady(function() {
win = new Ext.Window({
layout: 'fit',
width: 350,
height: 120,
closeAction: 'hide',
plain: true,
title: 'CompanySelect',
items: new Ext.FormPanel({
itemId: 'form',
labelAlign: 'right',
defaults: { width: 200 },
defaultType: 'textfield',
frame: true,
items: [{
fieldLabel: 'CompanyName',
name: 'company',
itemId: 'company'
}]
}),
buttons: [{
text: 'Submit'
}, {
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
var tb = win.getComponent('form');
var b = tb.getComponent('company').getId();
//alert(b);
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#company").autocomplete(data);
});



and the HTML is




<link rel="stylesheet" href="jquery/jquery.autocomplete.css"/>
<script type="text/javascript" language="javascript" src="jquery/jquery-1.4.2.min.js"> </script>
<script type="text/javascript" language="javascript" src="jquery/jquery.autocomplete.js" > </script>
<link rel="stylesheet" href="ext-3.3.1/ext-3.3.1/resources/css/ext-all.css" type="text/css" />
<!--<script language ="javascript" type="text/javascript" src= "ext-3.3.1/ext-3.3.1/adapter/ext/ext-base.js"></script>-->
<script language ="javascript" type="text/javascript" src= "ext-3.3.1/ext-3.3.1/adapter/jquery/ext-jquery-adapter.js"></script>
<script language ="javascript" type= "text/javascript" src ="ext-3.3.1/ext-3.3.1/ext-all.js" ></script>


Thanks in advance.

pmatsumura
29 Apr 2011, 1:47 AM
Set the config option modal to true on your window. Also try http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.Window

teja_0080
29 Apr 2011, 2:02 AM
yea thanks for the reply.

Can you please help me out regarding Jquery. i need to apply Jquery autocomplete feature to the textbox with in the modal window.

pmatsumura
29 Apr 2011, 2:53 AM
What is in variable "b"? Does it look like this ext-comp-1145? If it does, then try this:


$('#' + b).autocomplete(data);

teja_0080
29 Apr 2011, 7:18 AM
yea it looks like ext-comp-1004, i tried the way you proposed but in vain... any another idea.?

pmatsumura
29 Apr 2011, 9:08 AM
What does
console.log($('#' + b).val()); output?