extjsml 0.0.2

data/lib/extclasses/fieldset.rb

@@ -0,0 +1,61 @@
+class ExtFieldset < ExtNode
+  include Magic::Title
+
+  @@ALIAS_CONFIG ={
+    :text => :title
+  }
+
+  def initialize(config, parent)
+    @default_config = {
+      layout: 'anchor',
+      animCollapse: true,
+      labelAlign: "right",
+      # collapsed: true,
+      # checkboxToggle: true,
+      autoHeight: true
+      # columnWidth: 0.5
+    }
+    super("fieldset", config, parent) 
+  end
+
+  def to_extjs(at_deep = 0)
+    col_label_width = []
+    x = self.find_field_elements.map do |c|
+      [c.config[:fieldLabel], c.parent.config[:col_index], c.parent.config[:labelWidth] ]
+    end
+    self.find_field_elements.each do |c|
+      i = c.parent.config[:col_index] || 0
+      next unless i
+      unless col_label_width[i] 
+        col_label_width[i] = []
+      end
+      col_label_width[i] << c.parent.config[:labelWidth]
+    end
+    max_label_width = []
+    col_label_width.each_with_index do |c, i|
+      max_label_width[i] = c.compact.max
+    end
+
+    # update max label within every fields container
+    self.find_field_elements.each do |c|
+      i = c.parent.config[:col_index] || 0
+      c.parent.config[:labelWidth] = max_label_width[i]
+    end
+
+    if @config[:labelWidth]
+      @config.merge!({ :defaults => { :labelWidth => @config[:labelWidth] } } )
+      # if set a button at the last child
+      if @childs.last.xtype == "button"
+        btn_style = @childs.last.config[:style]
+        new_btn_style = btn_style.dup if btn_style
+        new_btn_style ||= "{}"
+        fix_style = "margin-left: #{@config[:labelWidth]+5}px; margin-bottom: 0.5em; }"
+        new_btn_style.gsub!("}", fix_style)
+        @childs.last.config[:style] = new_btn_style
+      end
+      @config.delete :labelWidth
+    end
+
+    super(at_deep)
+  end
+end

data/lib/extclasses/filefield.rb

@@ -0,0 +1,18 @@
+# depend ux
+class	ExtFilefield < ExtNode
+  include FormField  
+
+  @@ALIAS_CONFIG = {
+    :text => :buttonText
+  }
+
+	def initialize(config, parent)
+    @default_config = {
+      width: 355,
+      labelAlign: "right",
+      buttonText: "Browse"
+    }
+		super('fileuploadfield',config, parent)
+	end
+end
+

data/lib/extclasses/form.rb

@@ -0,0 +1,33 @@
+class ExtForm < ExtNode
+  # include Magic::Toolbar
+
+  def initialize(config, parent)
+    @default_config = {
+      # padding: 10,
+      autoHeight: true,
+      layout: 'anchor',
+      border: false
+    }
+    super('form', config, parent) 
+  end
+
+  def to_extjs(at_deep = 0)
+    if @childs.last.xtype == "toolbar"
+      # get only item form toolbar
+      @config.merge! :fbar => @childs.last.to_extjs(at_deep + 1)
+
+      @childs.pop
+    end
+
+    if @childs.first.xtype == "toolbar"
+      @config.merge! :tbar => @childs.first.to_extjs(at_deep + 1)
+      @childs.slice!(0)
+    end
+    if find("paging",{:recursive => 1})
+      @config.merge! :bbar => find("paging").to_extjs(at_deep + 1)
+      self.remove_childs "paging"
+    end
+
+    super at_deep
+  end
+end

data/lib/extclasses/grid.rb

@@ -0,0 +1,141 @@
+class	ExtGrid < ExtNode
+  include Magic::Store
+  include Magic::Title
+
+  @@ALIAS_CONFIG = {
+    :text => :title
+  }
+
+	def initialize(config, parent)
+    @default_config = {
+      title: "My Grid",
+      # enableHdMenu: false,
+      columnLines: true,
+      sm: "",
+      selector: "row",
+      # enableColumnmove: false,
+      viewConfig: { 
+        forceFit: true,
+        emptyText: "No record"
+        # for expanding row to show any infomation
+        # enableRowBody: true
+      },
+      frame: false,
+      width: "auto",
+      loadMask: true,
+      # TODO dummy store
+      store: [],
+      height: 200
+      # columns: [
+      #   { id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
+      #   { header: 'Price', dataIndex: 'price'},
+      #   { header: 'Change', dataIndex: 'change'},
+      #   { header: '% Change', dataIndex: 'pctChange'},
+      #   {
+      #     header: 'Last Updated', width: 135, dataIndex: 'lastChange',
+      #     xtype: 'datecolumn', format: 'M d, Y'
+      #   }
+      # ]
+    }
+    
+		super('grid',config, parent)
+	end
+  
+  # TODO refactor 
+  def to_extjs(at_deep = 0)
+    # columns
+    cols = []
+    self.childs.each do |c|
+      cols << c.to_extjs(at_deep) unless c.xtype.match(/column$/).nil?
+    end
+    @config.merge! :columns => cols unless cols.nil?
+    
+    # rowselection type : row | rows, cell | cells, checkbox | checkboxs
+    #
+    # unless @config[:selector].nil?
+    #   # generate random js variable name
+    #   require "securerandom"
+    #   var = SecureRandom.urlsafe_base64.gsub(/\d|\W/,'')
+    #   case @config[:selector]
+    #   when "row"
+    #     @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.RowSelectionModel({ singleSelect: true }))</js>)"
+    #   when "rows"
+    #     @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.RowSelectionModel({ singleSelect: false }))</js>)"
+    #   # TODO
+    #   # when "cell"
+    #   #   @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.CellSelectionModel())</js>)" 
+    #   when "checkbox"
+    #     @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.CheckboxSelectionModel({ singleSelect: true, header: '' }))</js>)"
+    #     @config[:columns].unshift("<js>this._#{var}</js>")
+    #   when "checkboxs"
+    #     @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.CheckboxSelectionModel())</js>)"
+    #     @config[:columns].unshift("<js>this._#{var}</js>")
+    #   end
+    #   @config.delete :selector 
+    # end
+
+    toolbar = self.find("toolbar", {recursive: 1})
+    @config.merge! :tbar => toolbar.to_extjs(at_deep + 1) if toolbar
+
+    rand_store_id = nil
+    if @config[:store] == []
+
+      data_xtype = ExtUtil.data_xtype
+      data_cols = []
+
+      @config[:columns].each do |c|
+        if c.is_a? Hash
+          if data_xtype.include? c[:xtype]
+            data_cols << "{ name: '#{c[:dataIndex]}' }"
+          end
+        end
+      end
+
+      rand_store_id = ExtUtil.random_id
+      if @config[:restful]
+        @config[:url] = @config[:restful]
+      end
+
+      fetch_type = @config[:url] ? (@config[:restful] ? "rest" : "ajax") : "memory"
+      if data_cols.count > 0
+        @config[:store] = %Q{ <js>(
+          this.#{rand_store_id} = new Ext.data.JsonStore({
+            storeId: \"#{rand_store_id}\",
+            pageSize: #{@config[:pageSize] || default_page_size},
+            proxy: {
+              url: \"#{@config[:url]}\",
+              type: \"#{fetch_type}\",
+              reader: { type: \"json\", root: \"data\" }
+            },
+            fields: [#{data_cols.join(',')}]
+          }))
+        </js>}.strip
+
+        # remove internal usaged config
+        @config.delete :url
+        @config.delete :restful
+      end
+      @config.delete :pageSize
+      # auto create json store
+    end
+
+    # set paging
+    paging = self.find("pagingtoolbar")
+    if paging
+      paging.override_config :store => ("<js>this.#{rand_store_id}</js>" || @config[:store])
+      unless @config[:store] =~ /<js>/
+        paging.override_config :store => (rand_store_id || @config[:store])
+      end
+      @config.merge! :bbar => paging.to_extjs(at_deep + 1)
+    end
+
+    # grid does not allow to have items
+    self.childs = []
+
+    super(at_deep)
+  end
+
+  def default_page_size
+    25 
+  end
+end

data/lib/extclasses/gridcolumn.rb

@@ -0,0 +1,19 @@
+class ExtGridcolumn < ExtNode
+  include Magic::Column
+  @@ALIAS_CONFIG = {
+    :text => :header,
+    :name => :dataIndex
+  }
+  def initialize(config, parent)
+    @default_config = {}
+
+    super "gridcolumn", config, parent
+  end
+
+  def to_extjs(at_deep = 0)
+    if self.child_of? "editorgrid" and @config[:editor].nil?
+      @config.merge! :editor => { :xtype => "textfield" }
+    end
+    super at_deep 
+  end
+end

data/lib/extclasses/hidden.rb

@@ -0,0 +1,7 @@
+class ExtHidden < ExtNode
+  include FormField
+  def initialize(config, parent)
+    @default_config = {}
+    super "hidden", config, parent
+  end
+end

data/lib/extclasses/htmleditor.rb

@@ -0,0 +1,15 @@
+class ExtHtmleditor < ExtNode
+  include FormField
+
+  @@ALIAS_CONFIG = {
+    :text => :fieldLabel
+  }
+
+  def initialize(config, parent)
+    @default_config = {
+      :labelAlign => "right" 
+    }
+
+    super "htmleditor", config, parent
+  end
+end

data/lib/extclasses/label.rb

@@ -0,0 +1,10 @@
+class ExtLabel < ExtNode
+  include Magic::Text
+  def initialize(config, parent)
+    @default_config = {
+       
+    }
+    super("label", config, parent)
+    
+  end
+end

data/lib/extclasses/numbercolumn.rb

@@ -0,0 +1,30 @@
+class ExtNumbercolumn < ExtNode
+  include Magic::Column
+  
+  @@ALIAS_CONFIG = {
+    :text => :header,
+    :name => :dataIndex
+  }
+  
+  def initialize(config, parent)
+
+    @default_config = {
+      :align => "right", 
+      :sortable => true,
+      :format => "0,000"
+    }
+
+    super "numbercolumn", config, parent
+  end
+
+  def to_extjs(at_deep = 0)
+    if self.child_of? "editorgrid"
+      if @config[:editor].nil?
+        @config.merge! :editor => { :xtype => "numberfield" }
+      else
+        @config[:editor].merge! :xtype => "numberfield", :format => @config[:format] || "0,000.00"
+      end
+    end
+    super at_deep 
+  end
+end

data/lib/extclasses/numberfield.rb

@@ -0,0 +1,19 @@
+class ExtNumberfield < ExtNode
+  include FormField
+
+  @@ALIAS_CONFIG = {
+    :text => :fieldLabel 
+  }
+
+  def initialize(config, parent)
+    @default_config = {
+      labelAlign: "right",
+      decimalPrecision: 2,
+      decimalSeparator: '.',
+      allowDecimal: true,
+      allowNegative: false,
+      cls: "number"
+    }
+    super "numberfield", config, parent 
+  end
+end

data/lib/extclasses/paging.rb

@@ -0,0 +1,12 @@
+class ExtPaging < ExtNode
+  def initialize(config, parent)
+    @default_config = {
+      start: 0,
+      limit: 20,
+      displayInfo: true,
+      dock: "bottom",
+      displayMsg: "Displaying {0} - {1} of {2}"
+    }
+    super('pagingtoolbar', config, parent)
+  end
+end

data/lib/extclasses/panel.rb

@@ -0,0 +1,29 @@
+class ExtPanel < ExtNode
+  include Magic::Title
+
+  @@ALIAS_CONFIG = {
+    :text => :title
+  }
+  
+	def initialize(options, parent)
+    @default_config = {
+      :padding => 5,
+      # :height => 200,
+      :title => 'Title By Default',
+      :autoHeight => true
+    }
+		super("panel", options, parent)	
+	end
+
+  def to_extjs(at_deep = 0)
+    if find("toolbar", { :recursive => 1})
+      @config.merge! :tbar => find("toolbar").to_extjs(at_deep + 1)
+      self.remove_childs "toolbar"
+    end
+    if find("paging", { :recursive => 1})
+      @config.merge! :bbar => find("paging").to_extjs(at_deep + 1)
+      self.remove_childs "paging"
+    end
+    super at_deep
+  end
+end

data/lib/extclasses/passwordfield.rb

@@ -0,0 +1,27 @@
+class	ExtPasswordfield < ExtNode
+  include FormField  
+
+  @@ALIAS_CONFIG = {
+    :text => :fieldLabel
+  }
+
+	def initialize(config, parent)
+    @default_config = {
+      :width => 150,
+      :autoCreate => {
+        :tag => "input",
+        :type => "password",
+        :autocomplete => "off"
+      }
+    }
+    if config[:autoCreate]
+      @default_config.merge! config[:autoCreate]
+      config.delete :autoCreate
+    end
+    if config[:emptyText]
+      @default_config[:autoCreate][:placeholder] = config[:emptyText]
+      config.delete :emptyText 
+    end
+		super('textfield', config, parent)
+	end
+end

data/lib/extclasses/pivotgrid.rb

@@ -0,0 +1,91 @@
+class	ExtPivotgrid < ExtNode
+  include Magic::Store
+  include Magic::Title
+
+  @@ALIAS_CONFIG = {
+    :text => :title
+  }
+
+	def initialize(config, parent)
+    @default_config = {
+      title: "My Grid",
+      # enableHdMenu: false,
+      columnLines: true,
+      sm: "",
+      selector: "row",
+      # enableColumnmove: false,
+      viewConfig: { 
+        forceFit: true,
+        emptyText: "No record"
+        # for expanding row to show any infomation
+        # enableRowBody: true
+      },
+      frame: true,
+      width: "auto",
+      loadMask: true,
+      # TODO dummy store
+      store: [],
+      height: 200
+      # columns: [
+      #   { id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
+      #   { header: 'Price', dataIndex: 'price'},
+      #   { header: 'Change', dataIndex: 'change'},
+      #   { header: '% Change', dataIndex: 'pctChange'},
+      #   {
+      #     header: 'Last Updated', width: 135, dataIndex: 'lastChange',
+      #     xtype: 'datecolumn', format: 'M d, Y'
+      #   }
+      # ]
+    }
+    
+		super('pivotgrid',config, parent)
+	end
+  
+  # TODO refactor 
+  def to_extjs(at_deep = 0)
+    # columns
+    cols = []
+    self.childs.each do |c|
+      cols << c.to_extjs(at_deep) unless c.xtype.match(/column$/).nil?
+    end
+    @config.merge! :columns => cols unless cols.nil?
+    
+    # rowselection type : row | rows, cell | cells, checkbox | checkboxs
+    unless @config[:selector].nil?
+      # generate random js variable name
+      require "securerandom"
+      var = SecureRandom.urlsafe_base64.gsub(/\d|\W/,'')
+      case @config[:selector]
+      when "row"
+        @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.RowSelectionModel({ singleSelect: true }))</js>)"
+      when "rows"
+        @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.RowSelectionModel({ singleSelect: false }))</js>)"
+      # TODO
+      # when "cell"
+      #   @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.CellSelectionModel())</js>)" 
+      when "checkbox"
+        @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.CheckboxSelectionModel({ singleSelect: true, header: '' }))</js>)"
+        @config[:columns].unshift("<js>this._#{var}</js>")
+      when "checkboxs"
+        @config.merge! :sm => "<js>(this._#{var} = new Ext.grid.CheckboxSelectionModel())</js>)"
+        @config[:columns].unshift("<js>this._#{var}</js>")
+      end
+      @config.delete :selector 
+    end
+
+    toolbar = self.find("toolbar", {recursive: 1})
+    @config.merge! :tbar => toolbar.to_extjs(at_deep + 1) if toolbar
+
+    paging = self.find("paging")
+    if paging
+      unless @config[:store] =~ /<js>/
+        paging.override_config :store => @config[:store]
+      end
+      @config.merge! :bbar => paging.to_extjs(at_deep + 1)
+    end
+
+    # grid not allow to have items
+    self.childs = []
+    super(at_deep)
+  end
+end