Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Answers
    1
    Vote Rating
    0
    new2extjs is on a distinguished road

      0  

    Default Answered: Displaying results in one tab panel as output of operation in another tab panel

    Answered: Displaying results in one tab panel as output of operation in another tab panel


    I have two tab panels. In 1st tab, I will send an ajax request to the server. Upon success, the result should be displayed in 2nd tab panel. However initially both the panels are rendered before the ajax request is made and this request is done only after a button is pressed in 1st panel. Now, my problem is that my 2nd panel is already rendered initially and how can my 2nd panel know that the request was successful , fetch the output of ajax request and display the result only if it was successful?

  2. by mistake

  3. #2
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    You can specify both a success and a failure callback when you trigger the Ajax request.

    see http://docs.sencha.com/ext-js/4-0/#!...method-request

    The success callback function could then call a method on the second panel and pass the loaded contents.

    Not sure if you use the new MVC framework or a 'classic' architecture.

    You could also define a custom 'tabload' event and have the Ajax.request callback function fire this event (with the loaded content as argument).

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Answers
    1
    Vote Rating
    0
    new2extjs is on a distinguished road

      0  

    Default


    Thanks a lot for the reply.
    I am using MVC framework.
    Can you please explain more about custom 'tabload' event, what should be written in it and how to fire it?

    Isn't there any function in extjs to re-render or update the content of the panel so that it would load the panel again?

  5. #4
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    You can fire events on any object that extends from Ext.util.Observable e.g. any Component. For custom events you need to register the event with .addEvent([eventname]) once (in the constructor). You can then register listeners on the object with .on([eventname], [listener]) and fireEvents with .fireEvent([eventname], [arguments]).

    You can also use Ext.Application as application-wide event-bus.


    A solution *without* custom event would look like this:

    In your controller, register a click handler on your button. The click handler sends off the Ajax request with a success callback.
    Your callback function needs a reference to the TabPanel (the one holding the first and second tab). In the callback you can then obtain the 2nd tab from the TabPanel reference and do whatever you need to do with it.


    Isn't there any function in extjs to re-render or update the content of the panel so that it would load the panel again?
    You could, for instance, use Panel#load to update the panel contents with the loaded html.

  6. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Answers
    1
    Vote Rating
    0
    new2extjs is on a distinguished road

      0  

    Default


    Hi,
    Thanks a lot for reply.
    I tried the second solution without custom event.
    After the ajax request is called, I called a function which will be executed in the second tab. The function gets an array of objects and I want to display them items of the panel. I tried to load the panel from the function but it doesn't recognize it saying that it is undefined, may be because the panel is outside the function. How can I resolve this issue?

    Code:
    var Panel = new Ext.Panel({
       id: 'pPanel',
       title: 'Plots',
       height: 500,
       width: '70%',   
       layout: 'fit',
       autoScroll: 'true',
       
       items:[]
      });
    
    //The function that is called after ajax request
    loadcontent:function(){
    puts the content into an array and I am trying to display it like this:
     //for adding items to the panel
      for (var i=0; i < array.length; i++) {
       Panel.add(
       { xtype: 'component',
        autoEl: {
         tag: 'img',
         src: array[i],
         width: 700,
         align: 'middle'
        }
          });
      };
    //Both of them gave an error and content wasnot loaded in the panel.
       Ext.getCmp('pPanel').load(array[i]);
      or
       Panel.load(Image.array[i]);
    }
    Thanks in advance.

  7. #6
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    I need to see more code to give specific feedback.


    Code:
    Ext.getCmp('pPanel').load(array[i]);
    Not sure what you are trying to do here. Once you add child items to the panel there should be no need to load anything.
    Adding items to an already rendered panel should make the changes appear instantly. Just to make sure you could call panel.doLayout() to force arranging the elements.

    Also, you are not adding simple html to the panel, you are adding Ext UI components. There is a big difference!!

    For one you will require a proper layout to be set on your panel, otherwise the items will not get arranged correctly: 'fit' layout will not work - try the 'auto' layout (is the default if you don't specify a layout) - or maybe 'hbox' or 'vbox' for the start since 'auto' can be tricky sometimes.

    Maybe just add a component with html: array[i] for debugging purposes to rule out problems with the IMG component.

    Depending on what you are planning to do with the images in the panel later, a better approach might be to use a XTemplate on the panel (see the tpl config property), then just call panel.update() and pass in the urls as parameter.


    For your panel reference: for now you should use Ext.getCmp to make it easier. Later you should worry about the 'scope' of your loadcontent function and find a better way to obtain a reference to your panel instance.

Thread Participants: 1