support :: Jquery with EXTjs 4

[NCN]

Is Jquery support Extjs 4 ???

if yes, can you please share one example with me. where jquery is used with Extjs 4.

Thanks in advance !!!

[scottmartin]

Have a look at:
http://loianegroner.com/2011/08/how-...uery-together/

Regards,
Scott.

[NCN]

I want to used any Jquery components with Extjs 4. do we have any example where we are using Jquery components in extjs4 and the data transformation is going on.

how to do this ??

can someone help me out in this.
thanks in advance !!!

[karthiks416]

Hi,

We can include Jquery with Ext-Js 4. Already, a straight forward example was provided.
However, I will add my point. Here is an example to integrate slider functionality in a panel.

1.Include Jquery library files in Index.html.


In Js file, add html and listeners as mentioned below. Add your css styles. You are done!!!

xtype: 'panel',
componentCls: '',
height: 150,
style: 'header{background-color:#004466};',
bodyStyle: 'background-color:#E8E8E8',
preventHeader: false,
title: 'South Panel',
region: 'south',
html :'<div class="navi"></div> <a class="prev">prev</a> <div class="scrollable"><div class="items"> <div id="test"> <img src="testImages/logosmall.gif" rel="#mies1"></div> <div><img src="testImages/expand-button.png" rel="#mies1"></div> <div><img src="testImages/report_icon.png" rel="#mies1"></div> <div><img src="testImages/Scheduled-Tasks.png" rel="#mies1"></div> <div><img src="testImages/Scheduled-Tasks.png" rel="#mies1"></div> <div><img src="testImages/Scheduled-Tasks.png" rel="#mies1"></div> <div rel="#mies1"> text </div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> </div> </div> <a class="next">next</a><p> <button type="button" onclick="api.begin()">begin</button> <button type="button" onclick="api.prev()">&lt;</button> <button type="button" onclick="api.next()">&gt;</button> <button type="button" onclick="api.end()">end</button> </p> <div class="simple_overlay" id="mies1"> <img src="testImages/logosmall.gif"/> <div class="details"> <h3>APP</h3> <h4>Version 2.X</h4> <p>Architecture Team </p></div></div>',
listeners :
{ render: function() {
alert('hi');
$(function() {
window.api = $(".scrollable").scrollable({ mousewheel: true, size: 3 })
.navigator({idPrefix: 'a', history: false}).data("scrollable");

api.onBeforeSeek(function() {
// return false;
});
});
$(document).ready(function() {
$("img[rel]").overlay();
$("div[rel]").overlay();
});
} }
// jQuery


},

[NCN]

HI karthiks416 Thanks for help.

can you please provide me the zip of your code, would be the great help.

Thanks in advance !!!