gistfile1.rb

# This is an idea how it might become Lipsiadmin Grids in the future. 
# In particular we focused to bring them into reusable on other pages.
def grid
  grid = Ext.grid "List of all accounts" do |grid|
    #Some standard config
    grid.append  "/backend/accounts/store.js" # or :controller => :accounts, :action => :store, :format => :js
    grid.selection :checkbox
    grid.grouped true, "accounts.name"# true is default
    
    # Render:
    #   function test(){
    #     doSomeThing
    #   }
    # Ext.fn("test", "doSomeThing")
    
    # Render:
    #   Lipsiadmin.app.loadJs("/my/custom/1/javascript.js", { method: 'POST' });
    # Ext.load(:controller => "my/custom", :action => :javascript, :format => :js, :id => 1, :mehtod => "POST")
    
    # Render:
    #   Lipsiadmin.app.loadHtml("/my/custom/1/form", { method: 'GET' });
    # Ext.load(:controller => "my/custom", :action => :form, :id => 1)
        
    # Buttons
    grid.buttons do |buttons|
      buttons.add "Add", Ext.load(:action => :new), :icon => "...", :other => "..."
      buttons.add "Edit", Ext.load(:action => :edit, :id => grid.selected.id), :other => "..."
      buttons.add "Print" do |submenu|
        submenu.add "Print Invoice", Ext.fn("...")
        submenu.add "Print Account", Ext.fn("...")    
      end
    end

    # alternative you can simply do grid.buttons :defaults and they add "New, Edit, Delete"
    #
    # or
    #
    # grid.buttons :default do |buttons|
    #   buttons.add "Custom", ...
    #   buttons.add "Others", ...
    # end
    #
    # or you can define your standard buttons ex:
    #
    # def my_buttons
    #   Ext.buttons do |buttons|
    #     buttons.add "..."
    #     "..."
    #   end
    # end
    # 
    # then you can do:
    #
    # grid.buttons = my_buttons
    #
    # In this way add other than "New, Edit, Delete", "Custom" and "Others"!
    
    grid.columns do |col|
      col.add "Name",          "accounts.name",          :searchable => false,  :sortable => true
      col.add "Category Name", "accounts.category.name", :sortable => :false
      col.add "Created At",    "accounts.created_at",    :type => "date", :format => "c", :renderer => Ext.call("Ext.Util.DateRenderer", "m/d/y")
    end
    
    # alternative you can simply do 
    # 
    # grid.coumns :defaults, Account 
    # and they add all columns of Account Model.
    # 
    # or
    #
    # grid.coumns :default, Account do |buttons|
    #   col.add "Projects",      "accounts.projects.collect(&:name).join(", ")", :searchable => false,  :sortable => true  
    #   col.add "Category Name", "accounts.category.name", :sortable => :false
    #   ...
    # end
    # In this way add other than accounts columns "Projects" and "Category Name"!    
    
    # Extra Examples
    # 
    # Render:
    # 
    # grid.on('dblclick', function(){
    #   Ext.Msg.alert('Title', 'Content');
    # });
    #
    grid.on "dblclick" do
      Ext.call("Ext.Msg.alert", "Title", "Content")
    end
    
    grid.on "dblclick" do 
      Ext.call "Ext.Msg.alert", "Selected the row", "with name: #{Ext.grid.selected.name}"
    end
    
    grid.columns.first.on("dblclick") do
      Ext.call("Ext.Msg.alert", "Some", "One")
    end
    
    button = grid.buttons.get_by(:title, "Add")
    button = grid.buttons.get_by(:id, "add")
    col    = grid.columns.get_by(:id, "category_name")
    
    button.on("dblclick", Ext.fn("Ext.Msg.alert", "Hello World"))
    
    grid.append "/backend/accounts/grid_fn.js" # or :controller => :accounts, :action => :grid_fn, :format => :js
  end
  
  # Overwrite
  grid.columns.first = Ext.column "Naming", "..."
  
  respond_to do |format|
    format.js { grid.to_s # or grid.to_js }
  end
end

def store
  store = Ext.store Account.all(:include => :category) do |store|
    store.add store.name, :as => "accounts.name" #default do this
    store.add store.category.name #default they do :as => "accounts.category.name"
    store.add store.count, :as => "size"
    # or store.add :default
    # In this way add all columns of Account
  end
  
  respond_to do |format|
    format.json { store.to_json } 
    format.js   { store.to_s # or store.to_js }
  end
  
end

# Or you can make a file under /app/views/backend/accounts/grid_fn.js
def grid_fn
  render :js => "grid.on('dblclick', function(){ alert('Hello World') });"
end