PDA

View Full Version : support :: Jquery with EXTjs 4



NCN
1 May 2012, 9:51 AM
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
1 May 2012, 12:15 PM
Have a look at:
http://loianegroner.com/2011/08/how-to-use-extjs-4-jquery-together/

Regards,
Scott.

NCN
2 May 2012, 11:31 PM
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
3 May 2012, 3:18 AM
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
3 May 2012, 3:30 AM
HI karthiks416 Thanks for help. :)

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

Thanks in advance !!!