1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    0
    NCN is on a distinguished road

      0  

    Default Answered: support :: Jquery with EXTjs 4

    Answered: support :: Jquery with EXTjs 4


    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 !!!

  2. 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


    },

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Answers
    673
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    0
    NCN is on a distinguished road

      0  

    Default Hi Thanks for the reply

    Hi Thanks for the reply


    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 !!!

  5. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    3
    Answers
    1
    Vote Rating
    0
    karthiks416 is on a distinguished road

      0  

    Default Jquery with ExtJs4

    Jquery with ExtJs4


    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


    },

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    0
    NCN is on a distinguished road

      0  

    Default


    HI karthiks416 Thanks for help.

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

    Thanks in advance !!!

Thread Participants: 2