My application loads pages into a layout dynamically.

When the page initially loads into the browser, it sets up the application menus and other controls that are common to the application.

A page is then loaded into a content panel and all it's controls added and rendered, in easyui this results in divs being appended to the body for all the elements rendered.

Problem is, when I load another page (without refreshing the browser) using the built in common menus, all of the combos and panels and other elements don't get removed from the body, meaning that the page keeps on and on growing in size with every page that is loaded and it gets slower and slower.

So what is the solution to this, is it possible to make eui append all panels etc etc to a specific div rather than to the body ?

If this is possible then in my function that loads a new page, I can .remove() all of the elements that were loaded by the previous page, this will solve the problem.

So, how can I get easyui to append it's hidden panels to a specific div rather than directly to the body ?

Thanks, it's all working now

Thanks very much, but that is 400 lines of code that includes drag and drop and lots of other stuff I don't need.

Can you let me know how to get the datagrid to reload with a new column definition as I have a solution that uses much less code and my code is already way too big with all of my extensions :-)

Many Thanks

I have looped through the columns and added an index to each record to indicate the order I want them to be displayed in, then I have an existing keysort() function that re-orders the array, this works fine.

I have also found that you can re-order the columns by re-initialising the datagrid:

Code:

function keysort(array, key) {if(!array) return; return array.sort(function(a, b) {var x = a[key]; var y = b[key];return ((x < y) ? -1 : ((x > y) ? 1 : 0));});}
dg.datagrid({columns:[keysort(dg.datagrid('options').columns[0],'index')]});

dg.datagrid('reload');
dg.datagrid('fitColumns');
dg.datagrid('getPanel').panel('doLayout');

However how can I get the datagrid to refresh it's columns, I have tried various methods such as reload, fitColumns and also tried to get the panel to refresh, but not will meke the datagrid display the new column order:

How can I change the order that the columns are displayed in after the datagrid has been rendered and loaded ?

What I would like to do is to provide an array of field names and have the table columns change to be in the same order as the array:

Code:

var order = ['five','three','one','two','four']
dg.datagrid('order',order);

I will save this order into a cookie and use it when the page is reloaded to present the columns in the user's desired order.

Ultimately it would be good if this order could be used before the datagrid is rendered instead of loading the hard-coded columns array and then re-sorting again after.

But it also needs to be changed on the fly so that when the user selects a different order, the loaded datagrid column order changes automatically.

Is there an event that could be called before the columns are loaded i.e. a columnLoadFilter() that performs the same way that the row load Filter does.

This would be a nice enhancement !

Thanks so much

[Update]

I need to save the resized height of a panel to local storage / cooke and then when the user opens the page again set the panel to the previous height.

I do not need help saving and getting cookies, but how can I capture the user resizing a panel which is inside a layout ??

Code:

<layout id="sqlpan">
  <region=north>
  <region=center>

$(document).ready(function() {

  setTimeout(function(){
    $('#sqlpan').layout('panel', 'north').panel({
      onResize: function(h,w) {
        [save h to cookie]
      }
    }).resize({height:[get h from cookie]})
  })

})

Update - it appears that you have to wrap it in a timeout to push to the bottom of the stack as the layout is not ready when the document ready() fires.

But how can I programatically resize the HEIGHT of the north panel ??

Thanks, yes that works.

Is it possible to not show a textbox filter on certain columns ?

Thanks so much, that will work.

I need to be able to hook into an event that is fired before any easyui element is rendered in order to switch it's label text with the language of the user.

I already have this working for Input Labels and are for datagrid are using the onBeforeOpen() event, but the change of text is visible to the user and they can see it change, I need to change it before the element is rendered.

If I don't add a delay to push it to the bottom of the stack, then the translation does not work as the element are not yet created.

Code:

  onBeforeOpen: function(){
    var me = $(this);
    setTimeout(function(){
      me.find('tr.datagrid-header-row td[field] .datagrid-cell > span:first-of-type').each(function(){ 
        $(this).text(eui.translate($(this).text()));
      })
    }) 
  }

I am really looking for a method that I can use globally, or an event that is fired for every element just before it gets rendered in order to change the label without the user seeing the change ?!

Hi;

Is it possible to return a tree like object containing the menus and children from the menu() class ?

i.e

Code:

$('#mm').menu('getItems');

Thanks

Hi;

Do you have any examples of how to create a context menu on a menu item ?

I have this:

Code:

$('#item').on("contextmenu", function (e) {
          e.preventDefault();
          var node = $(e.target).parent('.menu-item');
          if(node.length > 0){
            $('#mencm').menu('show',{left:e.pageX,top:e.pageY});
          }
        })

But when I move my mouse to the context menu the main menu disappears ?


Thanks

Hi;

I need to prevent changes to numberbox and numberspinner based on doing some validation on the new value and old value and this CANNOT be done using a validRule as the formulas maybe complex and involve many variables.

What I really need is an onBeforeChange(nv,ov) method that allows me to return false to prevent the change.

Thanks

Hello;

Any solutions for this ??