jxlib.uncompressed.js

Summary
jxlib.uncompressed.js
Functions
$jxdereferences a DOM Element to a JxLib object if possible and returns a reference to the object, or null if not defined.
JxJx is a global singleton object that contains the entire Jx library within it.
Functions
loadNextImgAn internal method actually populate the DOM element with the image source.
ElementElement is a global object provided by the mootools library.
ArrayExtensions to the javascript array object
Jx.StylesDynamic stylesheet class.
Jx.ObjectBase class for all other object in the JxLib framework.
Functions
Jx.Objectcreate a new instance of Jx.Object
initPluginsinternal function to initialize plugins on object creation
cleanupto be implemented by subclasses to do the actual work of destroying an object.
initvirtual initialization method to be implemented by sub-classes
generateIdUsed to generate a unique ID for Jx Objects.
Jx.WidgetBase class for all widgets (visual classes) in the JxLib Framework.
Properties and Functions
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
busy{Boolean} is the widget currently busy? 
domObjThe HTMLElement that represents this widget.
contentIsLoaded{Boolean} tracks the load state of the content, specifically useful in the case of remote content.
chromethe DOM element that contains the chrome
initsets up the base widget code and runs the render function.
makeChromecreate chrome on an element.
cleanupdestroy the widget and clean up any potential memory leaks
renderrender the widget, internal function called by the framework.
elementsa hash of elements extracted by processing the widget template
processElementsprocess the template of the widget and populate the elements hash with any objects.
checkRequestIs fired after a delay to check the request to make sure it’s not failing in AIR.
Jx.SelectionManage selection of objects.
Properties
selection{Array} an array holding the current selection
Functions
Jx.Selectioncreate a new instance of Jx.Selection
Jx.ListManage a list of DOM elements and provide an API and events for managing those items within a container.
Functions
Jx.Listcreate a new instance of Jx.List
initinternal method to initialize this object
cleanupdestroy the list and release anything it references
Jx.StackManage the zIndex of widgets
Properties
els{Array} the elements in the stack
base{Integer} the base z-index value of the first element in the stack
increment{Integer} the amount to increment the z-index between elements of the stack
Functions
setZIndexset the z-index of an element based on its position in the stack
Jx.RecordExtends: Jx.Object
Properties
dataThe data for this record
stateused to determine the state of this record.
columnsHolds a reference to the columns for this record.
Functions
processDataThis method takes the data passed in and puts it into the form the record needs it in.
resolveColDetermines which column is being asked for and returns it.
Jx.StoreExtends: Jx.Object
Properties
dataHolds the data for this store
indexHolds the current position of the store relative to the data and the pageIndex.
loadedTells whether the store has been loaded or not
readyUsed to determine if the store is completely initialized.
deletedtrack deleted records before they are purged
Functions
initinitialize the store, should be called by sub-classes
cleanupavoid memory leaks when a store is destroyed, should be called by sub-classes if overridden
Jx.CompareExtends: Jx.Object
Functions
_convertNormalizes numbers relative to the separator.
Jx.SortBase class for all of the sorting algorithm classes.
Events
onStart
onEnd
Properties
timerholds the timer instance
dataThe data to sort
ComparatorThe comparator to use in sorting
colThe column to sort by
Functions
startTimerSaves the starting time of the sort
stopTimerDetermines the time the sort took.
Jx.Sort.MergesortExtends: Jx.Sort
Functions
mergeSortDoes the physical sorting.
mergeDoes the work of merging to arrays in order.
Jx.Sort.HeapsortExtends: Jx.Sort
Functions
heapifyPuts the data in Max-heap order
siftDown
Jx.Sort.QuicksortExtends: Jx.Sort
Functions
quicksortInitiates the sorting.
partition
findMedianOfMediansParameters: l eft - the left hand, or lower, bound of the sort right - the right hand, or upper, bound of the sort
findMedianIndex
Jx.Sort.NativesortExtends: Jx.Sort
Functions
sortActually runs the sort on the data
Jx.Store.ResponseExtends: Jx.Object
Properties
codeThis is the success/failure code
dataThe data passed received by the protocol.
metaThe metadata received by the protocol
requestTypeone of ‘read’, ‘insert’, ‘delete’, or ‘update’
requestParamsThe parameters passed to the method that created this response
requestthe mootools Request object used in this operation (if one is actually used)
errorthe error data received from the called page if any.
Jx.Store.ProtocolExtends: Jx.Object
Jx.Store.Protocol.LocalExtends: Jx.Store.Protocol
Properties
dataThe data passed to the protocol
Jx.Store.Protocol.AjaxExtends: Jx.Store.Protocol
Functions
handleResponseCalled as an event handler for a returning request.
runcalled by update, delete, and insert methods that actually does the work of kicking off the request.
uniqueIdreturns a unique identifier to be used with queued requests
Jx.Store.StrategyExtends: Jx.Object
Functions
initinitialize the strategy, should be called by subclasses
Jx.Store.Strategy.FullExtends: Jx.Store.Strategy
Functions
initinitialize this strategy
loadStoreCalled as the event handler for the protocol’s dataLoaded event.
parseMetaDataTakes the meta property of the response object and puts the data where it belongs.
Jx.Store.Strategy.PaginateExtends: Jx.Store.Strategy
Properties
dataholds the pages of data keyed by page number.
cacheTimer
pageTracks the page the store currently holds.
itemsPerPageThe number of items on each page
Functions
initinitialize this strategy
loadStoreUsed to assist in the loading of data into the store.
loadDataThis method does the actual work of loading data to the store.
parseMetaDataTakes the metadata returned from the protocol and places it in the appropriate Vplaces.
expirePageIs called when a pages cache timer expires.
Jx.Store.Strategy.ProgressiveExtends: Jx.Store.Strategy.Paginate
Properties
startingPage
maxPages
loadedPages
loadAtOptions are ‘top’ or ‘bottom’.
Functions
initinitialize this strategy
loadStoreUsed to assist in the loading of data into the store.
loadDataThis method does the actual work of loading data to the store.
Jx.Store.Strategy.SaveExtends: Jx.Store.Strategy
Properties
failedChangesan array holding all failed requests
successfulChangesan array holding all successful requests
totalChangesThe total number of changes being processed.
Functions
initinitialize this strategy
onCompleteHandles processing of the response(s) from the protocol.
Jx.Store.Strategy.SortExtends: Jx.Store.Strategy
Properties
sortersan object listing the different sorters available
Functions
initinitialize this strategy
subSortDoes the actual group sorting.
doSortCalled to change the sorting of the data
resolveColresolves the given column identifier and resolves it to the actual column object in the store.
Jx.Store.ParserExtends: Jx.Object
Jx.Store.Parser.JSONExtends: Jx.Store.Parser
Jx.ButtonExtends: Jx.Widget
Properties
classesused to auto-populate this object with element references when processing templates
Functions
rendercreate a new button.
Jx.Button.FlyoutExtends: Jx.Button
Properties
contentClassesthe classes array for processing the contentTemplate
contentthe HTML element that contains the flyout content
Functions
renderconstruct a new instance of a flyout button.
clickHandlerhide flyout if the user clicks outside of the flyout
keypressHandlerhide flyout if the user presses the ESC key
Jx.ColorPaletteExtends: Jx.Widget
Properties
{HTMLElement} domObjthe HTML element representing the color panel
Functions
renderinitialize a new instance of Jx.ColorPalette
swatchOverhandle the mouse moving over a colour swatch by updating the preview
swatchClickhandle mouse click on a swatch by updating the color and hiding the panel.
changedhandle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.
alphaChangedhandle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).
updateSelectedupdate the colour panel user interface based on the current colour and alpha values
Jx.Button.ColorExtends: Jx.Button.Flyout
Properties
swatchthe color swatch element used to portray the currently selected color
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
Functions
rendercreates a new color button.
changedhandle the color changing in the palette by updating the preview swatch in the button and firing the change event.
updateSwatchUpdate the swatch color for the current color
Jx.MenuExtends: Jx.Widget
Properties
button{Jx.Button} The button that represents this menu in a toolbar and opens the menu.
subDomObj{HTMLElement} the HTML element that contains the menu items within the menu.
list{Jx.List} the list of items in the menu
Functions
deactivateDeactivate the menu by hiding it.
onMouseOverHandle the user moving the mouse over the button for this menu by showing this menu and hiding the other menu.
onMouseLeaveHandle the user moving the mouse off this button or menu by starting the hide process if so configured.
eventInMenudetermine if an event happened inside this menu or a sub menu of this menu.
Jx.Menu.ItemExtends: Jx.Button
Properties
owner{<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item.
Functions
setOwnerSet the owner of this menu item
hideHide the menu item.
showShow the menu item
clickedHandle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking
onmouseoverhandle the mouse moving over the menu item
Jx.ButtonSetExtends: Jx.Object
Properties
buttons{Array} array of buttons that are managed by this button set
Functions
buttonChangedHandle selection changing on the buttons themselves and activate the appropriate button in response.
Jx.Button.MultiExtends: Jx.Button
Properties
{<Jx.Button>} activeButtonthe currently selected button
buttons{Array} the buttons added to this multi button
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
Functions
renderconstruct a new instance of Jx.Button.Multi.
setButtonupdate the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
Jx.LayoutExtends: Jx.Object
Functions
windowResizewhen the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized
resizeresize the element controlled by this Jx.Layout object.
Jx.ToolbarExtends: Jx.Widget
Properties
list{Jx.List} the list that holds the items in this toolbar
domObj{HTMLElement} the HTML element that the toolbar lives in
isActiveWhen a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out.
Functions
addToadd this toolbar to a DOM element automatically creating a toolbar container if necessary
addAdd an item to the toolbar.
removeremove an item from a toolbar.
deactivateDeactivate the Toolbar (when it is acting as a menu bar).
isActiveIndicate if the toolbar is currently active (as a menu bar)
setActiveSet the active state of the toolbar (for menus)
setVisibleItemFor menus, they want to know which menu is currently open.
updateUpdates the size of the UL so that the size is always consistently the exact size of the size of the sum of the buttons.
Jx.Toolbar.ContainerExtends: Jx.Widget
Properties
domObj{HTMLElement} the HTML element that the container lives in
Functions
findFirstVisibleFinds the first visible button on the toolbar and saves a reference in the scroller object
scrollDoes the work of scrolling the toolbar to a specific position.
afterTweenRightUpdates pointers to buttons after the toolbar scrolls right
afterTweenLeftUpdates pointers to buttons after the toolbar scrolls left
getPreviousButtonFinds the button to the left of the first visible button
getNextButtonFinds the button to the right of the first visible button
Jx.Toolbar.ItemExtends: Object
Jx.PanelExtends: Jx.Widget
Functions
layoutContentthe sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area.
setLabelSet the label in the title bar of this panel
getLabelGet the label of the title bar of this panel
finalizeClean up the panel
maximizeMaximize this panel
setContentset the content of this panel to some HTML
setContentURLSet the content of this panel to come from some URL.
panelContentLoadedWhen the content of the panel is loaded from a remote URL, this method is called when the ajax request returns.
toggleCollapsesets or toggles the collapsed state of the panel.
closeCloses the panel (completely hiding it).
Jx.DialogExtends: Jx.Panel
Functions
resizeresize the dialog.
sizeChangedoverload panel’s sizeChanged method
toggleCollapsesets or toggles the collapsed state of the panel.
maximizeCalled when the maximize button of a dialog is clicked.
showshow the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.
hidehide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.
openURLopen the dialog and load content from the provided url.
openopen the dialog.
closeclose the dialog and trigger the onClose callback function if necessary
getKeyboardMethodsused by this and all child classes to have methods listen to keyboard events, returned object will be parsed to the events object of a MooTools Keyboard instance
setDragLimitcalculates the drag-dimensions of an given element to drag
Jx.SplitterExtends: Jx.Object
Properties
domObj{HTMLElement} the element being split
elements{Array} an array of elements that are displayed in each of the split areas
bars{Array} an array of the bars between each of the elements used to resize the split areas.
firstUpdate{Boolean} track the first resize event so that unexposed Jx things can be forced to calculate their size the first time they are exposed.
Functions
prepareElementPrepare a new, empty element to go into a split area.
prepareBarPrepare a new, empty bar to go into between split areas.
establishConstraintsSetup the initial set of constraints that set the behaviour of the bars between the elements in the split area.
dragHorizontalIn a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar.
dragVerticalIn a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar.
sizeChangedhandle the size of the container being changed.
horizontalResizeResize a horizontally layed-out container
verticalResizeResize a vertically layed out container.
Jx.PanelSetExtends: Jx.Widget
Properties
panels{Array} the panels being managed by the set
height{Integer} the height of the container, cached for speed
firstLayout{Boolean} true until the panel set has first been resized
Functions
maximizePanelMaximize a panel, taking up all available space (taking into consideration any minimum or maximum values)
Jx.Dialog.MessageExtends: Jx.Dialog
Functions
renderconstructs the dialog.
onOkCalled when the OK button is clicked.
createTexthandle change in language
Jx.Dialog.ConfirmExtends: Jx.Dialog
Functions
onClickcalled when any button is clicked.
Jx.TooltipExtends: Jx.Widget
Functions
renderCreates the tooltip
enterMethod run when the cursor passes over an element with a tip
leaveExecuted when the mouse moves out of an element with a tip
moveCalled when the mouse moves over an element with a tip.
positionCalled to position the tooltip.
Jx.FieldsetExtends: Jx.Widget
Properties
legenda holder for the legend Element
Jx.FormExtends: Jx.Widget
Properties
defaultActionthe default field to activate if the user hits the enter key in this form.
fieldsAn array of all of the single fields (not contained in a fieldset) for this form
pluginNamespacerequired variable for plugins
Functions
isValidDetermines if the form passes validation
Jx.FieldExtends: Jx.Widget
Properties
overtextOptionsThe default options Jx uses for mootools-more’s OverText plugin
fieldAn element representing the input field itself.
labelA reference to the label element for this field
tagA reference to the “tag” field of this input if available
idA computed, unique id attached to the input element of this field.
overTextThe overText instance for this field.
typeIndicates that this is a field type
classesThe classes to search for in the template.
Jx.Field.TextExtends: Jx.Field
Properties
typeThe type of this field
Jx.Dialog.PromptExtends: Jx.Dialog
Functions
onClickCalled when the OK button is clicked.
Jx.Panel.DataViewExtends: Jx.Panel
Functions
drawbegins the process of creating the items
createItemActually does the work of getting the data from the store and creating a single item based on the provided template
parseTemplateparses the provided template to determine which store columns are required to complete it.
enterItemFires mouseenter event
leaveItemFires mouseleave event
selectItemFires select event
unselectItemFires unselect event
addItemFires add event
removeItemFires remove event
createListCreates the list object
Jx.Panel.DataView.GroupExtends: Jx.Panel.DataView
Functions
drawactually does the work of creating the view
createListCreates the list object
Jx.ListItemExtends: Jx.Widget
Jx.ListViewExtends: Jx.Widget
Jx.Field.HiddenExtends: Jx.Field
Properties
typeThe type of this field
Jx.Field.FileExtends: Jx.Field
Properties
typeThe Field type used in rendering
formsholds all form references when we’re in multiple mode
Functions
copyValueCalled when the value in the actual file input changes and when the mouse moves out of it to copy the value into the “fake” text box.
mouseEnterCalled when the mouse enters the actual file input to make the fake button highlight.
mouseLeavecalled when the mouse leaves the actual file input to turn off the highlight of the fake button.
submitUploadCalled either after upload() or as a result of a successful call to get a progress ID.
pollUploadpolls the server for upload progress information
processProgressprocess the data returned from the request
uploadFailurecalled if there is a problem getting progress on the upload
processIFrameUploadCalled if we are not using progress and the IFrame finished loading the server response.
uploadCleanUpCleans up the hidden form and IFrame after a completed upload.
Jx.ProgressbarThe following just uses the defaults.
Properties
classesThe classes used in the template
barthe bar that is filled
textthe element that contains the text that’s shown on the bar (if any).
Jx.Panel.FileUploadExtends: Jx.Panel
Properties
domObjAAn HTML Element used to hold the interface while it is being constructed.
fileQueueAn array holding Jx.Field.File elements that are to be uploaded
Functions
renderSets up the upload panel.
moveToQueueCalled by Jx.Field.File’s fileSelected event.
uploadCalled when the user clicks the upload button.
fileUploadCompleteCalled when a single file is uploaded completely .
fileUploadErrorCalled when there is an error uploading a file.
removeUploadedFileRemoves the passed file from the upload queue upon it’s completion.
fileUploadProgressFunction to pass progress information to the progressbar instance in the file.
allUploadCompletedCalled when the Jx.Field.File completes uploading all files.
createTexthandle change in language
Jx.ColumnExtends: Jx.Object
Properties
gridholds a reference to the grid (an instance of Jx.Grid)
Functions
Jx.Columninitializes the column object
measureThis method does the dirty work of actually measuring a cell
Jx.ColumnsExtends: Jx.Object
Properties
columnsan array holding the actual instantiated column objects
rowTemplatea string holding a template for a single row of cells to be populated when rendering the store into a grid.
hasExpandableboolean indicates whether any of the columns are expandable or not, which affects some calculations for column widths
Functions
buildTemplatescreate the row template based on the current columns
getRowcreate a single row in the grid for a single record and populate the DOM elements for it.
createRulescreate CSS rules for the current grid object
Jx.RowExtends: Jx.Object
Properties
gridA reference to the grid that this row model belongs to
heightsThis will hold the calculated height of each row in the grid.
rulesA hash that will hold all of the CSS rules for the rows.
Functions
getRowHeaderCellcreates the TH for the row’s header
calculateHeights
Jx.PluginExtend: Jx.Object
Jx.Plugin.GridGrid plugin namespace
Jx.GridExtends: Jx.Widget
Properties
pluginNamespacethe required variable for plugins
columnsholds a reference to the columns object
rowHolds a reference to the row object
storeholds a reference to the Jx.Store that is the store for this grid
styleSheetthe name of the dynamic style sheet to use for manipulating styles
hooksa {Hash} of event names for tracking which events have actually been attached to the grid.
uniqueIdan auto-generated id that is assigned as a class name to the grid’s container for scoping generated CSS rules to just this grid
Functions
Jx.Grid
scrollhandle the grid scrolling by updating the position of the headers
drawStoreclears the grid and redraws the store.
drawRowthis method does the heavy lifting of drawing a single record into the grid
clickColumnHeaderhandle clicks on the column header
moveColumnHeaderhandle the mouse moving over the column header
clickRowHeaderhandle clicks on the row header
moveRowHeaderhandle the mouse moving over the row header
clickCellhandle clicks on cells in the grid
dblclickCellhandle doubleclicks on cells in the grid
moveCellhandle the mouse moving over cells in the grid
leaveGridhandle the mouse leaving the grid
changeTextrerender the grid when the language changes
addEventoverride default addEvent to also trigger wanting the event which will then cause the underlying events to be registered
Jx.Grid.RendererThis is the base class and namespace for all grid renderers.
Properties
domInsertboolean, indicates if the renderer needs to insert a DOM element instead of just outputing some templated HTML.
Jx.Grid.Renderer.TextThis is the default renderer for grid cells.
Jx.Grid.Renderer.CheckBoxRenders a checkbox into the cell.
Jx.Grid.Renderer.ButtonRenders a Jx.Button into the cell.
Jx.Plugin.Grid.SelectorExtends: Jx.Plugin
Properties
selectedHolds arrays of selected rows and/or columns and their headers
Functions
renderrequired for the renderer interface
toElementrequired for the Renderer interface
updateCheckColumncheck to see if a row needs to have its checkbox updated after its been drawn
afterGridRender
onCellClickdispatch clicking on a table cell
selectdispatches the grid click to the various selection methods
selectCellselect a cell
selectRowSelect a row and apply the jxGridRowSelected style to it.
setCheckField
selectRowHeaderApply the jxGridRowHeaderSelected style to the row header cell of a selected row.
selectColumnSelect a column.
selectColumnHeaderApply the jxGridColumnHeaderSelected style to the column header cell of a selected column.
checkSelectionChecks whether a row’s check box is/isn’t checked and modifies the selection appropriately.
checkAllChecks all checkboxes in the column the selector inserted.
Jx.Plugin.Grid.PrelighterExtends: Jx.Plugin
Functions
lighton
lightoff
lightdispatches the event to the various prelight methods.
prelightRowHeaderapply the jxGridRowHeaderPrelight style to the header cell of a row.
prelightColumnHeaderapply the jxGridColumnHeaderPrelight style to the header cell of a column.
prelightRowapply the jxGridRowPrelight style to row.
prelightColumnapply the jxGridColumnPrelight style to a column.
prelightCellapply the jxGridCellPrelight style to a cell.
Jx.Plugin.Grid.SorterExtends: Jx.Plugin
Properties
currentrefernce to the currently sorted column
directiontell us what direction the sort is in (either ‘asc’ or ‘desc’)
Functions
modifyHeaders
sortcalled when a grid header is clicked.
Jx.Plugin.Grid.ResizeExtends: Jx.Plugin
Properties
elsthe DOM elements by which the rows/columns are resized.
dragsthe Drag instances
Functions
removeHandlesclean up any handles we created
createHandlescreate handles that let the user drag to resize columns and rows
createTextrespond to a language change by updating the tooltip
Jx.Plugin.Grid.EditorExtends: Jx.Plugin
Properties
activeCellfield : Reference to the Jx.Field instance that will be created cell : Reference to the cell inside the table span : Reference to the Dom Element inside the selected cell of the grid oldValue : Old value of the cell from the grid’s store newValue : Object with <data> and <error> for better validation possibilites timeoutId : TimeoutId if the focus blurs the input.
keyboardInstance of a Mootols Keyboard Class
Functions
onCellClickdispatch clicking on a table cell
activateactivates the input field or breaks up if conditions are not fulfilled
setStylessets some styles for the Jx.Field elements...
showPopUpShows the PopUp of of the editor if it already exists, otherwise calls Method this.createPopUp
createPopUpcreates the popup for the requested cell.
setPopUpStylesAfterRendering
setPopUpButtonscreates the PopUp Buttons if enabled in options or deletes them if set to false
unsetActiveFieldresets the activeField and hides the popup
unsetPopUpresets the popup manually to be able to use it with different settings
cellValueIncrementWhether increments or decrements the value of the active cell if the dataType is numeric
cellIsInGriddetermins if the given coordinates are within the grid
addFormatterUriClickListenerlooks up for Jx.Formatter.Uri columns to disable the link and open the inline editor instead when CTRL is NOT pressed.
Jx.Plugin.DataViewThe namespace for all dataview plugins
Jx.SlideHides and shows an element without depending on a fixed width or height
Functions
initsets up the slide
handleClickevent handler for clicks on the trigger.
setDisplaycalled at the end of the animation to set the target’s width or height as well as other css values to the appropriate values
Jx.Plugin.DataView.GroupFolderExtends: Jx.Plugin
Properties
headerStateHash that holds the open/closed state of each header
Functions
setHeadersCalled after the dataview is rendered.
onSlideInCalled when a group opens.
onSlideOutCalled when a group closes.
Jx.Plugin.FieldField plugin namespace
Jx.Plugin.Field.ValidatorExtends: Jx.Plugin
Properties
validtells whether this field passed validation or not.
errorsarray of errors found on this field
Jx.Plugin.FormForm plugin namespace
Jx.Plugin.Form.ValidatorExtends: Jx.Plugin
Properties
errorMessagesselement holding
Functions
validateMethod that actually does the work of validating the fields in the form.
fieldFailedRefires the fieldValidationFailed event from the field validators it contains
fieldPassedRefires the fieldValidationPassed event from the field validators it contains
Jx.Plugin.ToolbarToolbar plugin namespace
Jx.Plugin.ToolbarContainer.TabMenuExtends: Jx.Plugin
Properties
tabsholds all of the tabs that we’re tracking
Jx.AdaptorBase class for all adaptor implementations.
Properties
columnsNeededWill hold an array of the column names needed for processing the template
Jx.Adaptor.TreeThis base class is used to change a store (a flat list of records) into the data structure needed for a Jx.Tree.
Properties
foldersA Hash containing all of the Jx.TreeFolders in this tree.
currentRecordAn integer indicating the last position we were at in the store.
Functions
checkFolderCalled by the disclose event of the tree to determine if we need to request additional items for a branch of the tree.
hasChildrenVirtual method to be overridden by sublcasses.
hasParentVirtual method to be overridden by sublcasses.
getParentIndexVirtual method to be overridden by sublcasses.
Jx.Adaptor.Tree.MpttThis class adapts a table adhering to the classic Parent-style “tree table”.
Jx.Adapter.Tree.ParentThis class adapts a table adhering to the classic Parent-style “tree table”.
Jx.Adaptor.ComboThe namespace for all combo adaptors
Jx.Menu.ContextExtends: Jx.Menu
Functions
showShow the context menu at the location of the mouse click
Jx.Menu.SeparatorExtends: Jx.Object
Properties
domObj{HTMLElement} the HTML element that the separator is contained within
owner{Jx.Menu, Jx.Menu.SubMenu} the menu that the separator is in.
Functions
setOwnerSet the ownder of this menu item
hideHide the menu item.
showShow the menu item
Jx.Menu.SubMenuExtends: Jx.Menu.Item
Properties
subDomObj{HTMLElement} the HTML container for the sub menu.
owner{Jx.Menu or <Jx.SubMenu>} the menu or sub menu that this sub menu belongs
visibleItem{<Jx.MenuItem>} the visible item within the menu
list{Jx.List} a list to manage menu items
Functions
setOwnerSet the owner of this sub menu
showShow the sub menu
hideHide the sub menu
addAdd menu items to the sub menu.
removeRemove a menu item from the menu
replaceReplace a menu item with another menu item
deactivateDeactivate the sub menu
isActiveIndicate if this sub menu is active
setActiveSet the active state of the Jx.Menu that contains this sub menu
setVisibleItemSet a sub menu of this menu to be visible and hide the previously visible one.
Jx.Splitter.SnapExtends: Jx.Object
Properties
snap{HTMLElement} the DOM element of the snap (the thing that gets clicked).
element{HTMLElement} An element of the Jx.Splitter that gets controlled by this snap
splitter{Jx.Splitter} the splitter that this snap is associated with.
layout{String} track the layout of the splitter for convenience.
Functions
toggleElementSnap the element open or closed.
sizeChangedHandle the size of the element changing to see if the toggle state has changed.
Jx.TabExtends: Jx.Button
Properties
content{HTMLElement} The content area that is displayed when the tab is active.
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
Functions
renderCreate a new instance of Jx.Tab.
Jx.TabSetExtends: Jx.Object
Properties
tabs{Array} array of tabs that are managed by this tab set
domObj{HTMLElement} The HTML element that represents this tab set in the DOM.
Functions
resizeTabBoxResize the tab set content area and propogate the changes to each of the tabs managed by the tab set.
addAdd one or more Jx.Tabs to the TabSet.
removeRemove a tab from this TabSet.
setActiveTabSet the active tab to the one passed to this method
Jx.TabBoxExtends: Jx.Widget
Properties
tabBar{Jx.Toolbar} the toolbar for this tab box.
tabSet{Jx.TabSet} the tab set for this tab box.
Functions
addAdd one or more Jx.Tabs to the TabBox.
removeRemove a tab from the TabSet.
Jx.Toolbar.SeparatorExtends: Jx.Object
Jx.TreeJx.Tree displays hierarchical data in a tree structure of folders and nodes.
Properties
ownsSelection{Boolean} indicates if this object created the Jx.Selection object or not.
list{Jx.List} the list object is used to manage the DOM elements of the items added to the tree.
Functions
cleanupClean up a Jx.Tree instance
updateUpdate the CSS of the Tree’s DOM element in case it has changed position
Jx.TreeItemExtends: Jx.Widget
Properties
domObj{HTMLElement} a reference to the HTML element that is the TreeItem in the DOM
owner{Object} the folder or tree that this item belongs to
Functions
finalizeClean up the TreeItem and remove all DOM references
finalizeItemClean up the TreeItem and remove all DOM references
updateUpdate the CSS of the TreeItem’s DOM element in case it has changed position
selectSelect a tree node.
getLabelGet the label associated with a TreeItem
setLabelset the label of a tree item
propertyChangedA property of an object has changed, synchronize the state of the TreeItem with the state of the object
Jx.TreeFolderA Jx.TreeFolder is an item in a tree that can contain other items.
Properties
tree{Jx.Tree} a Jx.Tree instance for managing the folder contents
Functions
updateUpdate the CSS of the TreeFolder’s DOM element in case it has changed position.
setSelectionsets the Jx.Selection object to be used by this folder.
Jx.SliderThis class wraps the mootools-more slider class to make it more Jx friendly
Functions
changeCalled when the slider moves
completeCalled when the slider stops moving and the mouse button is released.
Jx.NoticeExtends: Jx.ListItem
Functions
render
Jx.Notice.InformationA Jx.Notice subclass useful for displaying informational messages
Jx.Notice.SuccessA Jx.Notice subclass useful for displaying success messages
Jx.Notice.SuccessA Jx.Notice subclass useful for displaying warning messages
Jx.Notice.ErrorA Jx.Notice subclass useful for displaying error messages
Jx.NotifierExtends: Jx.ListView
Functions
renderrender the widget
Jx.Notifier.FloatA floating notice area for displaying notices, notices get chrome if the notifier has chrome
Functions
renderrender the widget
Jx.ScrollbarCreates a custom scrollbar either vertically or horizontally (determined by options).
Functions
renderrender the widget
scrollItscroll the content in response to the slider being moved.
Jx.FormatterExtends: Jx.Object
Jx.Formatter.NumberExtends: Jx.Formatter
Jx.Formatter.CurrencyExtends: Jx.Formatter.Number
Jx.Formatter.DateExtends: Jx.Formatter
Jx.Formatter.URIExtends: Jx.Formatter
Jx.Formatter.BooleanExtends: Jx.Formatter
Jx.Formatter.PhoneExtends: Jx.Formatter
Jx.Formatter.TextExtends: Jx.Formatter
Jx.Field.CheckExtends: Jx.Field
Properties
typeThe type of this field
Jx.Field.RadioExtends: Jx.Field
Properties
typeWhat kind of field this is
Functions
resetSets the field back to the value passed in the original options
Jx.Field.SelectExtends: Jx.Field
Properties
typeIndictes this type of field.
Functions
addOptionadd an option to the select list
removeOptionremoves an option from the select list
setValueSets the value property of the field
getValueReturns the current value of the field.
Jx.Field.TextareaExtends: Jx.Field
Properties
typeThe type of field this is.
errorClassThe class applied to error elements
Jx.Field.ButtonExtends: Jx.Field
Properties
typeThe type of this field
Jx.Field.ComboExtends: Jx.Field
Functions
valueChangedinvoked when the current value is changed
onKeyPressHandle the user pressing a key by looking for an ENTER key to set the value.
addadd a new item to the pick list
removeRemove the item at the given index.
Jx.Field.PasswordExtends: Jx.Field.Text
Jx.Field.ColorExtends: Jx.Field
Functions
onKeyUplistens to the keyup event and validates the input for a hex color

Functions

$jx

function $jx(id)

dereferences a DOM Element to a JxLib object if possible and returns a reference to the object, or null if not defined.

Jx

Jx is a global singleton object that contains the entire Jx library within it.  All Jx functions, attributes and classes are accessed through the global Jx object.  Jx should not create any other global variables, if you discover that it does then please report it as a bug

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Functions
loadNextImgAn internal method actually populate the DOM element with the image source.

Functions

loadNextImg

Jx.loadNextImg = function()

An internal method actually populate the DOM element with the image source.

Element

Element is a global object provided by the mootools library.  The functions documented here are extensions to the Element object provided by Jx to make cross-browser compatibility easier to achieve.  Most of the methods are measurement related.

While the code in these methods has been converted to use MooTools methods, there may be better MooTools methods to use to accomplish these things.  Ultimately, it would be nice to eliminate most or all of these and find the MooTools equivalent or convince MooTools to add them.

NOTE: Many of these methods can be replaced with mootools-more’s Element.Measure

Array

Extensions to the javascript array object

Jx.Styles

Dynamic stylesheet class.  Used for creating and manipulating dynamic stylesheets.

TBD: should we handle the case of putting the same selector in a stylesheet twice?  Right now the code that stores the index of each rule on the stylesheet is not really safe for that when combined with delete or get

This is a singleton and should be called directly, like so

// create a rule that turns all para text red and 15px.
var rule = Jx.Styles.insertCssRule("p", "color: red;", "myStyle");
rule.style.fontSize = "15px";

License

Copyright © 2009, Jon Bomgardner.  Additional code by Paul Spencer

This file is licensed under an MIT style license

Inspired by dojox.html.styles, VisitSpy by nwhite, http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

Jx.Object

Base class for all other object in the JxLib framework.  This class implements both mootools mixins Events and Options so the rest of the classes don’t need to.

The Initialization Pipeline

Jx.Object provides a default initialize method to construct new instances of objects that inherit from it.  No sub-class should override initialize unless you know exactly what you’re doing.  Instead, the initialization pipeline provides an init() method that is intended to be overridden in sub-classes to provide class-specific initialization as part of the initialization pipeline.

The basic initialization pipeline for a Jx.Object is to parse the parameters provided to initialize(), separate out options from other formal parameters based on the parameters property of the class, call init() and initialize plugins.

Parsing Parameters

Because each sub-class no longer has an initialize method, it no longer has direct access to parameters passed to the constructor.  Instead, a sub-class is expected to provide a parameters attribute with an array of parameter names in the order expected.  Jx.Object will enumerate the attributes passed to its initialize method and automatically place them in the options object under the appropriate key (the value from the array).  Parameters not found will not be present or will be null.

The default parameters are a single options object which is merged with the options attribute of the class.

Calling Init

Jx.Object fires the event ‘preInit’ before calling the init() method, calls the init() method, then fires the ‘postInit’ event.  It is expected that most sub-class specific initialization will happen in the init() method.  A sub-class may hook preInit and postInit events to perform tasks in one of two ways.

First, simply send onPreInit and onPostInit functions via the options object as follows (they could be standalone functions or functions of another object setup using .bind())

var preInit = function () {}
var postInit = function () {}

var options = {
  onPreInit: preInit,
  onPostInit: postInit,
  ...other options...
};

var dialog = new Jx.Dialog(options);

The second method you can use is to override the initialize method

var MyClass = new Class({
  Family: 'MyClass',
  initialize: function() {
    this.addEvent('preInit', this.preInit.bind(this));
    this.addEvent('postInit', this.postInit.bind(this));
    this.parent.apply(this, arguments);
  },
  preInit: function() {
    // something just before init() is called
  },
  postInit: function() {
    // something just after init() is called
  },
  init: function() {
    this.parent();
    // initialization code here
  }
});

When the object finishes initializing itself (including the plugin initialization) it will fire off the initializeDone event.  You can hook into this event in the same way as the events mentioned above.

Plugins

Plugins provide pieces of additional, optional, functionality.  They are not necessary for the proper function of an object.  All plugins should be located in the Jx.Plugin namespace and they should be further segregated by applicable object.  While all objects can support plugins, not all of them have the automatic instantiation of applicable plugins turned on.  In order to turn this feature on for an object you need to set the pluginNamespace property of the object.  The following is an example of setting the property:

var MyClass = new Class({
  Extends: Jx.Object,
  pluginNamespace: 'MyClass'
};

The absence of this property does not mean you cannot attach a plugin to an object.  It simply means that you can’t have Jx.Object create the plugin for you.

There are four ways to attach a plugin to an object.  First, simply instantiate the plugin yourself and call its attach() method (other class options left out for the sake of simplicity):

var MyGrid = new Jx.Grid();
var APlugin = new Jx.Plugin.Grid.Selector();
APlugin.attach(MyGrid);

Second, you can instantiate the plugin first and pass it to the object through the plugins array in the options object.

var APlugin = new Jx.Plugin.Grid.Selector();
var MyGrid = new Jx.Grid({plugins: [APlugin]});

The third way is to pass the information needed to instantiate the plugin in the plugins array of the options object:

var MyGrid = new Jx.Grid({
  plugins: [{
     name: 'Selector',
     options: {}    //options needed to create this plugin
  },{
     name: 'Sorter',
     options: {}
  }]
});

The final way, if the plugin has no options, is to pass the name of the plugin as a simple string in the plugins array.

var MyGrid = new Jx.Grid({
  plugins: ['Selector','Sorter']
});

Part of the process of initializing plugins is to call prePluginInit() and postPluginInit().  These events provide you access to the object just before and after the plugins are initialized and/or attached to the object using methods 2 and 3 above.  You can hook into these in the same way that you hook into the preInit() and postInit() events.

Destroying Jx.Object Instances

Jx.Object provides a destroy method that cleans up potential memory leaks when you no longer need an object.  Sub-classes are expected to implement a cleanup() method that provides specific cleanup code for each sub-class.  Remember to call this.parent() when providing a cleanup() method.  Destroy will also fire off 2 events: preDestroy and postDestroy.  You can hook into these methods in the same way as the init or plugin events.

The Family Attribute

the Family attribute of a class is used internally by JxLib to identify Jx objects within mootools.  The actual value of Family is unimportant to Jx.  If you do not provide a Family, a class will inherit it’s base class family up to Jx.Object.  Family is useful when debugging as you will be able to identify the family in the firebug inspector, but is not as useful for coding purposes as it does not allow for inheritance.

Events

preInit postInit prePluginInit postPluginInit initializeDone preDestroy postDestroy

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
Jx.Objectcreate a new instance of Jx.Object
initPluginsinternal function to initialize plugins on object creation
cleanupto be implemented by subclasses to do the actual work of destroying an object.
initvirtual initialization method to be implemented by sub-classes
generateIdUsed to generate a unique ID for Jx Objects.

Functions

Jx.Object

create a new instance of Jx.Object

Parameters

options{Object} optional parameters for creating an object.

initPlugins

initPlugins: function ()

internal function to initialize plugins on object creation

cleanup

cleanup: function ()

to be implemented by subclasses to do the actual work of destroying an object.

init

virtual initialization method to be implemented by sub-classes

generateId

generateId: function(prefix)

Used to generate a unique ID for Jx Objects.

Jx.Widget

Base class for all widgets (visual classes) in the JxLib Framework.  This class extends Jx.Object and adds the Chrome, ContentLoader, Addable, and AutoPosition mixins from the original framework.

ContentLoader

ContentLoader functionality provides a consistent mechanism for descendants of Jx.Widget to load content in one of four different ways:

  • using an existing element, by id
  • using an existing element, by object reference
  • using an HTML string
  • using a URL to get the content remotely

Chrome

Chrome is the extraneous visual element that provides the look and feel to some elements i.e. dialogs.  Chrome is added inside the element specified but may bleed outside the element to provide drop shadows etc.  This is done by absolutely positioning the chrome objects in the container based on calculations using the margins, borders, and padding of the jxChrome class and the element it is added to.

Chrome can consist of either pure CSS border and background colors, or a background-image on the jxChrome class.  Using a background-image on the jxChrome class creates four images inside the chrome container that are positioned in the top-left, top-right, bottom-left and bottom-right corners of the chrome container and are sized to fill 50% of the width and height.  The images are positioned and clipped such that the appropriate corners of the chrome image are displayed in those locations.

Busy States

Any widget can be set as temporarily busy by calling the setBusy(true) method and then as idle by calling setBusy(false).  By default, busy widgets display an event mask that prevents them from being clicked and a spinner image with a message.  By default, there are two configurations for the spinner image and message, one for ‘small’ widgets like buttons and inputs, and one for larger widgets like panels and dialogs.  The framework automatically chooses the most appropriate configuration so you don’t need to worry about it unless you want to customize it.

You can disable this behaviour entirely by setting busyMask: false in the widget options when creating the widget.

The mask and spinner functionality is provided by the MooTools Spinner class.  You can use any options documented for Spinner or Mask by setting the maskOptions option when creating a widget.

Events

Jx.Widget has several events called during it’s lifetime (in addition to the ones for its base class Jx.Object).

preRendercalled before rendering begins
postRendercalled after rendering is done
deferRendercalled when the deferRender option is set to true.  The first two events (pre- and post- render will NOT be called if deferRender is set to true).
contentLoadedcalled after content has been loaded successfully
contentLoadFailedcalled if content can not be loaded for some reason
addTocalled when a widget is added to another element or widget
busycalled just before the busy mask is rendered/removed

MooTools.Lang Keys

widget.busyMessagesets the message of the waiter component when used
Summary
Properties and Functions
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
busy{Boolean} is the widget currently busy? 
domObjThe HTMLElement that represents this widget.
contentIsLoaded{Boolean} tracks the load state of the content, specifically useful in the case of remote content.
chromethe DOM element that contains the chrome
initsets up the base widget code and runs the render function.
makeChromecreate chrome on an element.
cleanupdestroy the widget and clean up any potential memory leaks
renderrender the widget, internal function called by the framework.
elementsa hash of elements extracted by processing the widget template
processElementsprocess the template of the widget and populate the elements hash with any objects.
checkRequestIs fired after a delay to check the request to make sure it’s not failing in AIR.

Properties and Functions

classes

{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.  This allows developers to provide custom HTML structures without affecting the functionality of widgets.

busy

{Boolean} is the widget currently busy?  This should be considered an internal property, use the API methods <Jx.Widget::setBusy> and <Jx.Widget::isBusy> to manage the busy state of a widget.

domObj

The HTMLElement that represents this widget.

contentIsLoaded

{Boolean} tracks the load state of the content, specifically useful in the case of remote content.

chrome

the DOM element that contains the chrome

init

init: function()

sets up the base widget code and runs the render function.  Called by the Jx.Object framework for object initialization, should not be called directly.

makeChrome

makeChrome: function(element)

create chrome on an element.

Parameters

element{HTMLElement} the element to put the chrome on.

cleanup

cleanup: function()

destroy the widget and clean up any potential memory leaks

render

render: function()

render the widget, internal function called by the framework.

elements

a hash of elements extracted by processing the widget template

processElements

processElements: function(template,
classes)

process the template of the widget and populate the elements hash with any objects.  Also set any object references based on the classes hash.

checkRequest

checkRequest: function()

Is fired after a delay to check the request to make sure it’s not failing in AIR.

Jx.Selection

Manage selection of objects.

Example

var selection = new Jx.Selection();

Events

selectfired when an item is added to the selection.  This event may be changed by passing the eventToFire option when creating the selection object.
unselectfired when an item is removed from the selection.  This event may be changed by passing the eventToFire option when creating the selection object.

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
selection{Array} an array holding the current selection
Functions
Jx.Selectioncreate a new instance of Jx.Selection

Properties

selection

{Array} an array holding the current selection

Functions

Jx.Selection

create a new instance of Jx.Selection

Parameters

options{Object} options for the new instance

Jx.List

Manage a list of DOM elements and provide an API and events for managing those items within a container.  Works with Jx.Selection to manage selection of items in the list.  You have two options for managing selections.  The first, and default, option is to specify select: true in the constructor options and any of the Jx.Selection options as well.  This will create a default Jx.Selection object to manage selections.  The second option is to pass a Jx.Selection object as the third constructor argument.  This allows sharing selection between multiple lists.

Example

var list = new Jx.List('container',{
  hover: true,
  select: true,
  onSelect: function(el) {
    alert(el.get('html'));
  }
});
list.add(new Element('li', {html:'1'}));
list.add(new Element('li', {html:'2'}));
list.add(new Element('li', {html:'3'}));

Events

addfired when an item is added
removefired when an item is removed
mouseenterfired when the user mouses over an element
mouseleavefired when the user mouses out of an element
selectfired when an item is selected
unselectfired when an item is selected

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Functions
Jx.Listcreate a new instance of Jx.List
initinternal method to initialize this object
cleanupdestroy the list and release anything it references

Functions

Jx.List

create a new instance of Jx.List

Parameters

container{Mixed} an element reference or id of an element that will contain the items in the list
options{Object} an object containing optional parameters
selection{Jx.Selection} null or a Jx.Selection object.  If the select option is set to true, then list will use this selection object to track selections or create its own if no selection object is supplied.

init

init: function()

internal method to initialize this object

cleanup

cleanup: function()

destroy the list and release anything it references

Jx.Stack

Manage the zIndex of widgets

This is a singleton and should be called directly, like so

License

Copyright © 2010 Paul Spencer

This file is licensed under an MIT style license

Summary
Properties
els{Array} the elements in the stack
base{Integer} the base z-index value of the first element in the stack
increment{Integer} the amount to increment the z-index between elements of the stack
Functions
setZIndexset the z-index of an element based on its position in the stack

Properties

els

{Array} the elements in the stack

base

{Integer} the base z-index value of the first element in the stack

increment

{Integer} the amount to increment the z-index between elements of the stack

Functions

setZIndex

setZIndex: function(obj,
idx)

set the z-index of an element based on its position in the stack

Parameters

el{DOMElement} the element to set the z-index for
idx{Integer} optional, the index to assume for this object

Jx.Record

Extends: Jx.Object

This class is used as a representation (or container) for a single row of data in a Jx.Store.  It is not usually directly instantiated by the developer but rather by the store itself.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
dataThe data for this record
stateused to determine the state of this record.
columnsHolds a reference to the columns for this record.
Functions
processDataThis method takes the data passed in and puts it into the form the record needs it in.
resolveColDetermines which column is being asked for and returns it.

Properties

data

The data for this record

state

used to determine the state of this record.  When not null (meaning no changes were made) this should be one of

  • Jx.Record.UPDATE
  • Jx.Record.DELETE
  • Jx.Record.INSERT

columns

Holds a reference to the columns for this record.  These are usually passed to the record from the store.  This should be an array of objects where the objects represent the columns.  The object should take the form:

{
    name: <column name>,
    type: <column type>,
    ..additional options required by the record implementation...
}

The type of the column should be one of alphanumeric, numeric, date, boolean, or currency.

Functions

processData

processData: function (data)

This method takes the data passed in and puts it into the form the record needs it in.  This default implementation does nothing but assign the data to the data property but it can be overridden in subclasses to massge the data in any way needed.

Parameters

datathe data to process

resolveCol

resolveCol : function (col)

Determines which column is being asked for and returns it.

Parameters

cola number referencing a column in the store

Returns

the column object referred to

Jx.Store

Extends: Jx.Object

This class is the store.  It keeps track of data.  It allows adding, deleting, iterating, sorting etc...

For the most part the store is pretty “dumb” meaning it starts with very limited functionality.  Actually, it can’t even load data by itself.  Instead, it needs to have protocols, strategies, and a record class passed to it that it can use.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
dataHolds the data for this store
indexHolds the current position of the store relative to the data and the pageIndex.
loadedTells whether the store has been loaded or not
readyUsed to determine if the store is completely initialized.
deletedtrack deleted records before they are purged
Functions
initinitialize the store, should be called by sub-classes
cleanupavoid memory leaks when a store is destroyed, should be called by sub-classes if overridden

Properties

data

Holds the data for this store

index

Holds the current position of the store relative to the data and the pageIndex.  Zero-based index.

loaded

Tells whether the store has been loaded or not

ready

Used to determine if the store is completely initialized.

deleted

track deleted records before they are purged

Functions

init

init: function ()

initialize the store, should be called by sub-classes

cleanup

cleanup: function ()

avoid memory leaks when a store is destroyed, should be called by sub-classes if overridden

Jx.Compare

Extends: Jx.Object

Class that holds functions for doing comparison operations.  This class requires the mootools-more Date() extensions.

notes

Each function that does a comparison returns

0if equal.
1if the first value is greater that the second.
-1if the first value is less than the second.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
_convertNormalizes numbers relative to the separator.

Functions

_convert

Normalizes numbers relative to the separator.

Parameters

valthe number to normalize

Returns

the normalized value

Jx.Sort

Base class for all of the sorting algorithm classes.

Extends: Jx.Object

Events

onStart()called when the sort starts
onEnd()called when the sort stops

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Events
onStart
onEnd
Properties
timerholds the timer instance
dataThe data to sort
ComparatorThe comparator to use in sorting
colThe column to sort by
Functions
startTimerSaves the starting time of the sort
stopTimerDetermines the time the sort took.

Events

onStart

onEnd

Properties

timer

holds the timer instance

data

The data to sort

Comparator

The comparator to use in sorting

col

The column to sort by

Functions

startTimer

startTimer : function ()

Saves the starting time of the sort

stopTimer

stopTimer : function ()

Determines the time the sort took.

Jx.Sort.Mergesort

Extends: Jx.Sort

Implementation of a mergesort algorithm designed to work on Jx.Store data.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
mergeSortDoes the physical sorting.
mergeDoes the work of merging to arrays in order.

Functions

mergeSort

mergeSort : function (arr)

Does the physical sorting.  Called recursively.

Parameters

arrthe array to sort

returns: the sorted array

merge

merge : function (left,
right)

Does the work of merging to arrays in order.

parameters

leftthe left hand array
rightthe right hand array

returns: the merged array

Jx.Sort.Heapsort

Extends: Jx.Sort

Implementation of a heapsort algorithm designed to work on Jx.Store data.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
heapifyPuts the data in Max-heap order
siftDown

Functions

heapify

heapify : function (count)

Puts the data in Max-heap order

Parameters: countthe number of records we’re sorting

siftDown

siftDown : function (start,
end)
Parameters: startthe beginning of the sort range end - the end of the sort range

Jx.Sort.Quicksort

Extends: Jx.Sort

Implementation of a quicksort algorithm designed to work on Jx.Store data.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
quicksortInitiates the sorting.
partition
findMedianOfMediansParameters: l eft - the left hand, or lower, bound of the sort right - the right hand, or upper, bound of the sort
findMedianIndex

Functions

quicksort

quicksort : function (left,
right)

Initiates the sorting.  Is called recursively

Parameters

leftthe left hand, or lower, bound of the sort
rightthe right hand, or upper, bound of the sort

partition

partition : function (left,
right)

Parameters

leftthe left hand, or lower, bound of the sort
rightthe right hand, or upper, bound of the sort

findMedianOfMedians

findMedianOfMedians : function (left,
right)

Parameters: l eft - the left hand, or lower, bound of the sort right - the right hand, or upper, bound of the sort

findMedianIndex

findMedianIndex : function (left,
right,
shift)

Parameters

leftthe left hand, or lower, bound of the sort
rightthe right hand, or upper, bound of the sort

Jx.Sort.Nativesort

Extends: Jx.Sort

Implementation of a native sort algorithm designed to work on Jx.Store data.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
sortActually runs the sort on the data

Functions

sort

sort : function ()

Actually runs the sort on the data

Returns

the sorted data

Jx.Store.Response

Extends: Jx.Object

This class is used by the protocol to send information back to the calling strategy (or other caller).

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
codeThis is the success/failure code
dataThe data passed received by the protocol.
metaThe metadata received by the protocol
requestTypeone of ‘read’, ‘insert’, ‘delete’, or ‘update’
requestParamsThe parameters passed to the method that created this response
requestthe mootools Request object used in this operation (if one is actually used)
errorthe error data received from the called page if any.

Properties

code

This is the success/failure code

data

The data passed received by the protocol.

meta

The metadata received by the protocol

requestType

one of ‘read’, ‘insert’, ‘delete’, or ‘update’

requestParams

The parameters passed to the method that created this response

request

the mootools Request object used in this operation (if one is actually used)

error

the error data received from the called page if any.

Jx.Store.Protocol

Extends: Jx.Object

Base class for all protocols.  Protocols are used for communication, primarily, in Jx.Store.  It may be possible to adapt them to be used in other places but that is not their intended function.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Store.Protocol.Local

Extends: Jx.Store.Protocol

Based on the Protocol base class, the local protocol uses data that it is handed upon instantiation to process requests.

Constructor Parameters

dataThe data to use
optionsany options for the base protocol class

License

Copyright © 2009, Jon Bomgardner. inspired by the openlayers.org implementation of a similar system

This file is licensed under an MIT style license

Summary
Properties
dataThe data passed to the protocol

Properties

data

The data passed to the protocol

Jx.Store.Protocol.Ajax

Extends: Jx.Store.Protocol

This protocol is used to send and receive data via AJAX.  It also has the capability to use a REST-style API.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
handleResponseCalled as an event handler for a returning request.
runcalled by update, delete, and insert methods that actually does the work of kicking off the request.
uniqueIdreturns a unique identifier to be used with queued requests

Functions

handleResponse

handleResponse: function (response)

Called as an event handler for a returning request.  Parses the request’s response into the actual response object.

Parameters

responsethe response related to teh returning request.

run

run: function (record,
options,
method)

called by update, delete, and insert methods that actually does the work of kicking off the request.

Parameters

recordThe Jx.Record to work with
optionsOptions to pass to the request
methodThe name of the method calling this function

uniqueId

returns a unique identifier to be used with queued requests

Jx.Store.Strategy

Extends: Jx.Object

Base class for all Jx.Store strategies

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
initinitialize the strategy, should be called by subclasses

Functions

init

init: function ()

initialize the strategy, should be called by subclasses

Jx.Store.Strategy.Full

Extends: Jx.Store.Strategy

This is a strategy for loading all of the data from a source at one time.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
initinitialize this strategy
loadStoreCalled as the event handler for the protocol’s dataLoaded event.
parseMetaDataTakes the meta property of the response object and puts the data where it belongs.

Functions

init

init: function ()

initialize this strategy

loadStore

loadStore: function (resp)

Called as the event handler for the protocol’s dataLoaded event.  Checks the response for success and loads the data into the store if needed.

Parameters

respthe response from the protocol

parseMetaData

parseMetaData: function (meta)

Takes the meta property of the response object and puts the data where it belongs.

Parameters

metathe meta data object from the response.

Jx.Store.Strategy.Paginate

Extends: Jx.Store.Strategy

Store strategy for paginating results in a store.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
dataholds the pages of data keyed by page number.
cacheTimer
pageTracks the page the store currently holds.
itemsPerPageThe number of items on each page
Functions
initinitialize this strategy
loadStoreUsed to assist in the loading of data into the store.
loadDataThis method does the actual work of loading data to the store.
parseMetaDataTakes the metadata returned from the protocol and places it in the appropriate Vplaces.
expirePageIs called when a pages cache timer expires.

Properties

data

holds the pages of data keyed by page number.

cacheTimer

holds one or more cache timer idsone per page.  Each page is set to expire after a certain amount of time.

page

Tracks the page the store currently holds.

itemsPerPage

The number of items on each page

Functions

init

init: function ()

initialize this strategy

loadStore

loadStore: function (resp)

Used to assist in the loading of data into the store.  This is called as a response to the protocol finishing.

Parameters

respthe response object

loadData

loadData: function (data)

This method does the actual work of loading data to the store.  It is called when either the protocol finishes or setPage() has the data and it’s not expired.

Parameters

datathe data to load into the store.

parseMetaData

parseMetaData: function (meta)

Takes the metadata returned from the protocol and places it in the appropriate Vplaces.

Parameters

metathe meta data object returned from the protocol.

expirePage

expirePage: function (page)

Is called when a pages cache timer expires.  Will expire the page by erasing the page and timer.  This will force a reload of the data the next time the page is accessed.

Parameters

pagethe page number to expire.

Jx.Store.Strategy.Progressive

Extends: Jx.Store.Strategy.Paginate

Store strategy for progressively obtaining results in a store.  You can continually call nextPage() to get the next page and the store will retain all current data.  You can set a maximum number of records the store should hold and whether it should dropRecords when that max is hit.

License

Copyright © 2010, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
startingPage
maxPages
loadedPages
loadAtOptions are ‘top’ or ‘bottom’.
Functions
initinitialize this strategy
loadStoreUsed to assist in the loading of data into the store.
loadDataThis method does the actual work of loading data to the store.

Properties

startingPage

maxPages

loadedPages

loadAt

Options are ‘top’ or ‘bottom’.  Defaults to ‘bottom’.

Functions

init

init: function ()

initialize this strategy

loadStore

loadStore: function (resp)

Used to assist in the loading of data into the store.  This is called as a response to the protocol finishing.

Parameters

respthe response object

loadData

loadData: function (data)

This method does the actual work of loading data to the store.  It is called when either the protocol finishes or setPage() has the data and it’s not expired.

Parameters

datathe data to load into the store.

Jx.Store.Strategy.Save

Extends: Jx.Store.Strategy

A Store strategy class for saving data via protocols

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
failedChangesan array holding all failed requests
successfulChangesan array holding all successful requests
totalChangesThe total number of changes being processed.
Functions
initinitialize this strategy
onCompleteHandles processing of the response(s) from the protocol.

Properties

failedChanges

an array holding all failed requests

successfulChanges

an array holding all successful requests

totalChanges

The total number of changes being processed.  Used to determine when to fire off the storeChangesCompleted event on the store

Functions

init

init: function ()

initialize this strategy

onComplete

onComplete: function (response)

Handles processing of the response(s) from the protocol.  Each update/insert/delete will have an individual response.  If any responses come back failed we will hold that response and send it to the caller via the fired event.  This method is responsible for updating the status of each record as it returns and on inserts, it updates the primary key of the record.  If it was a delete it will remove it permanently from the store’s deleted array (provided it returns successful - based on the success attribute of the meta object).  When all changes have been accounted for the method fires a finished event and passes all of the failed responses to the caller so they can be handled appropriately.

Parameters

responsethe response returned from the protocol

Jx.Store.Strategy.Sort

Extends: Jx.Store.Strategy

Strategy used for sorting stores.  It can either be called manually or it can listen for specific events from the store.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
sortersan object listing the different sorters available
Functions
initinitialize this strategy
subSortDoes the actual group sorting.
doSortCalled to change the sorting of the data
resolveColresolves the given column identifier and resolves it to the actual column object in the store.

Properties

sorters

an object listing the different sorters available

Functions

init

init: function ()

initialize this strategy

subSort

subSort : function (data,
groupByCol,
sortByCol)

Does the actual group sorting.

Parameters

datawhat to sort
groupByColthe column that determines the groups
sortColthe column to sort by

returns: the result of the grouping/sorting

doSort

doSort : function (col,
sort,
data,
ret,
options)

Called to change the sorting of the data

Parameters

colthe column to sort by
sortthe kind of sort to use (see list above)
datathe data to sort (leave blank or pass null to sort data existing in the store)
retflag that tells the function whether to pass back the sorted data or store it in the store
optionsany options needed to pass to the sorter upon creation

returns: nothing or the data depending on the value of ret parameter.

resolveCol

resolveCol: function (col)

resolves the given column identifier and resolves it to the actual column object in the store.

Parameters

colthe name or index of the required column.

Jx.Store.Parser

Extends: Jx.Object

Base class for all parsers

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Store.Parser.JSON

Extends: Jx.Store.Parser

A Parser that handles encoding and decoding JSON strings

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Button

Extends: Jx.Widget

Jx.Button creates a clickable element that can be added to a web page.  When the button is clicked, it fires a ‘click’ event.

When you construct a new instance of Jx.Button, the button does not automatically get inserted into the web page.  Typically a button is used as part of building another capability such as a Jx.Toolbar.  However, if you want to manually insert the button into your application, you may use the <Jx.Button::addTo> method to append or insert the button into the page.

There are two modes for a button, normal and toggle.  A toggle button has an active state analogous to a checkbox.  A toggle button generates different events (down and up) from a normal button (click).  To create a toggle button, pass toggle: true to the Jx.Button constructor.

To use a Jx.Button in an application, you should to register for the ‘click’ event.  You can pass a function in the ‘onClick’ option when constructing a button or you can call the addEvent(‘click’, myFunction) method.  The addEvent method can be called several times, allowing more than one function to be called when a button is clicked.  You can use the removeEvent(‘click’, myFunction) method to stop receiving click events.

Example

var button = new Jx.Button(options);
button.addTo('myListItem'); // the id of an LI in the page.
Example:
var options = {
    imgPath: 'images/mybutton.png',
    tooltip: 'click me!',
    label: 'click me',
    onClick: function() {
        alert('you clicked me');
    }
};
var button = new Jx.Button(options);
button.addEvent('click', anotherFunction);

function anotherFunction() {
  alert('a second alert for a single click');
}

Events

clickthe button was pressed and released (only if type is not ‘toggle’).
downthe button is down (only if type is ‘toggle’)
upthe button is up (only if the type is ‘toggle’).

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
classesused to auto-populate this object with element references when processing templates
Functions
rendercreate a new button.

Properties

classes

used to auto-populate this object with element references when processing templates

Functions

render

render: function()

create a new button.

Jx.Button.Flyout

Extends: Jx.Button

Flyout buttons expose a panel when the user clicks the button.  The panel can have arbitrary content.  You must provide any necessary code to hook up elements in the panel to your application.

When the panel is opened, the ‘open’ event is fired.  When the panel is closed, the ‘close’ event is fired.  You can register functions to handle these events in the options passed to the constructor (onOpen, onClose).

The user can close the flyout panel by clicking the button again, by clicking anywhere outside the panel and other buttons, or by pressing the ‘esc’ key.

Flyout buttons implement <Jx.ContentLoader> which provides the hooks to insert content into the Flyout element.  Note that the Flyout element is not appended to the DOM until the first time it is opened, and it is removed from the DOM when closed.

It is generally best to specify a width and height for your flyout content area through CSS to ensure that it works correctly across all browsers.  You can do this for all flyouts using the .jxFlyout CSS selector, or you can apply specific styles to your content elements.

A flyout closes other flyouts when it is opened.  It is possible to embed flyout buttons inside the content area of another flyout button.  In this case, opening the inner flyout will not close the outer flyout but it will close any other flyouts that are siblings.

Example

var flyout = new Jx.Button.Flyout({
     label: 'flyout',
     content: 'flyoutContent',
     onOpen: function(flyout) {
         console.log('flyout opened');
     },
     onClose: function(flyout) {
         console.log('flyout closed');
     }
});

Events

openthis event is triggered when the flyout is opened.
closethis event is triggered when the flyout is closed.

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
contentClassesthe classes array for processing the contentTemplate
contentthe HTML element that contains the flyout content
Functions
renderconstruct a new instance of a flyout button.
clickHandlerhide flyout if the user clicks outside of the flyout
keypressHandlerhide flyout if the user presses the ESC key

Properties

contentClasses

the classes array for processing the contentTemplate

content

the HTML element that contains the flyout content

Functions

render

render: function()

construct a new instance of a flyout button.

clickHandler

clickHandler: function(e)

hide flyout if the user clicks outside of the flyout

keypressHandler

keypressHandler: function(e)

hide flyout if the user presses the ESC key

Jx.ColorPalette

Extends: Jx.Widget

A Jx.ColorPalette presents a user interface for selecting colors.  Currently, the user can either enter a HEX colour value or select from a palette of web-safe colours.  The user can also enter an opacity value.

A Jx.ColorPalette can be embedded anywhere in a web page using its addTo method.  However, a Jx.Button suJx.Tooltipbclass is provided (Jx.Button.Color) that embeds a colour panel inside a button for easy use in toolbars.

Colour changes are propogated via a change event.  To be notified of changes in a Jx.ColorPalette, use the addEvent method.

Example

Events

changetriggered when the color changes.
clickthe user clicked on a color swatch (emitted after a change event)

MooTools.lang keys

  • colorpalette.alphaLabel

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
{HTMLElement} domObjthe HTML element representing the color panel
Functions
renderinitialize a new instance of Jx.ColorPalette
swatchOverhandle the mouse moving over a colour swatch by updating the preview
swatchClickhandle mouse click on a swatch by updating the color and hiding the panel.
changedhandle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.
alphaChangedhandle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).
updateSelectedupdate the colour panel user interface based on the current colour and alpha values

Properties

{HTMLElement} domObj

the HTML element representing the color panel

Functions

render

render: function()

initialize a new instance of Jx.ColorPalette

swatchOver

swatchOver: function(e)

handle the mouse moving over a colour swatch by updating the preview

Parameters

e{Event} the mousemove event object

swatchClick

swatchClick: function(e)

handle mouse click on a swatch by updating the color and hiding the panel.

Parameters

e{Event} the mouseclick event object

changed

changed: function()

handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.

alphaChanged

alphaChanged: function()

handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).

updateSelected

updateSelected: function()

update the colour panel user interface based on the current colour and alpha values

Jx.Button.Color

Extends: Jx.Button.Flyout

A Jx.ColorPalette wrapped up in a Jx.Button.  The button includes a preview of the currently selected color.  Clicking the button opens the color panel.

A color button is essentially a Jx.Button.Flyout where the content of the flyout is a Jx.ColorPalette.  For performance, all color buttons share an instance of Jx.ColorPalette which means only one button can be open at a time.  This isn’t a huge restriction as flyouts already close each other when opened.

Example

var colorButton = new Jx.Button.Color({
    onChange: function(button) {
        console.log('color:' + button.options.color + ' alpha: ' +
                    button.options.alpha);
    }
});

Events

changefired when the color is changed.

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
swatchthe color swatch element used to portray the currently selected color
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
Functions
rendercreates a new color button.
changedhandle the color changing in the palette by updating the preview swatch in the button and firing the change event.
updateSwatchUpdate the swatch color for the current color

Properties

swatch

the color swatch element used to portray the currently selected color

classes

{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.  This allows developers to provide custom HTML structures without affecting the functionality of widgets.

Functions

render

render: function()

creates a new color button.

changed

changed: function(panel)

handle the color changing in the palette by updating the preview swatch in the button and firing the change event.

Parameters

panelJx.ColorPalette the palette that changed.

updateSwatch

updateSwatch: function()

Update the swatch color for the current color

Jx.Menu

Extends: Jx.Widget

A main menu as opposed to a sub menu that lives inside the menu.

TODO: Jx.Menu revisit this to see if Jx.Menu and Jx.SubMenu can be merged into a single implementation.

Example

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
button{Jx.Button} The button that represents this menu in a toolbar and opens the menu.
subDomObj{HTMLElement} the HTML element that contains the menu items within the menu.
list{Jx.List} the list of items in the menu
Functions
deactivateDeactivate the menu by hiding it.
onMouseOverHandle the user moving the mouse over the button for this menu by showing this menu and hiding the other menu.
onMouseLeaveHandle the user moving the mouse off this button or menu by starting the hide process if so configured.
eventInMenudetermine if an event happened inside this menu or a sub menu of this menu.

Properties

button

{Jx.Button} The button that represents this menu in a toolbar and opens the menu.

subDomObj

{HTMLElement} the HTML element that contains the menu items within the menu.

list

{Jx.List} the list of items in the menu

Functions

deactivate

deactivate: function()

Deactivate the menu by hiding it.

onMouseOver

Handle the user moving the mouse over the button for this menu by showing this menu and hiding the other menu.

Parameters

e{Event} the mouse event

onMouseLeave

onMouseLeave: function(e)

Handle the user moving the mouse off this button or menu by starting the hide process if so configured.

Parameters

e{Event} the mouse event

eventInMenu

eventInMenu: function(e)

determine if an event happened inside this menu or a sub menu of this menu.

Parameters

e{Event} the mouse event

Returns

{Boolean} true if the event happened in the menu or a sub menu of this menu, false otherwise

Jx.Menu.Item

Extends: Jx.Button

A menu item is a single entry in a menu.  It is typically composed of a label and an optional icon.  Selecting the menu item emits an event.

Jx.Menu.Item is represented by a Jx.Button with type MenuItem and the associated CSS changes noted in Jx.Button.  The container of a MenuItem is an ‘li’ element.

Example

Events

clickfired when the menu item is clicked.

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
owner{<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item.
Functions
setOwnerSet the owner of this menu item
hideHide the menu item.
showShow the menu item
clickedHandle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking
onmouseoverhandle the mouse moving over the menu item

Properties

owner

{<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item.

Functions

setOwner

setOwner: function(obj)

Set the owner of this menu item

Parameters

obj{Object} the new owner

hide

hide: function()

Hide the menu item.

show

Show the menu item

clicked

clicked: function(obj)

Handle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking

Parameters

obj{Object} an object containing an event property that was the user event.

onmouseover

handle the mouse moving over the menu item

Jx.ButtonSet

Extends: Jx.Object

A ButtonSet manages a set of Jx.Button instances by ensuring that only one of the buttons is active.  All the buttons need to have been created with the toggle option set to true for this to work.

Example

var toolbar = new Jx.Toolbar('bar');
var buttonSet = new Jx.ButtonSet();

var b1 = new Jx.Button({label: 'b1', toggle:true, contentID: 'content1'});
var b2 = new Jx.Button({label: 'b2', toggle:true, contentID: 'content2'});
var b3 = new Jx.Button({label: 'b3', toggle:true, contentID: 'content3'});
var b4 = new Jx.Button({label: 'b4', toggle:true, contentID: 'content4'});

buttonSet.add(b1,b2,b3,b4);

Events

changethe current button has changed

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
buttons{Array} array of buttons that are managed by this button set
Functions
buttonChangedHandle selection changing on the buttons themselves and activate the appropriate button in response.

Properties

buttons

{Array} array of buttons that are managed by this button set

Functions

buttonChanged

buttonChanged: function(button)

Handle selection changing on the buttons themselves and activate the appropriate button in response.

Parameters

button{Jx.Button} the button to make active.

Jx.Button.Multi

Extends: Jx.Button

Implements

Multi buttons are used to contain multiple buttons in a drop down list where only one button is actually visible and clickable in the interface.

When the user clicks the active button, it performs its normal action.  The user may also click a drop-down arrow to the right of the button and access the full list of buttons.  Clicking a button in the list causes that button to replace the active button in the toolbar and performs the button’s regular action.

Other buttons can be added to the Multi button using the add method.

This is not really a button, but rather a container for buttons.  The button structure is a div containing two buttons, a normal button and a flyout button.  The flyout contains a toolbar into which all the added buttons are placed.  The main button content is cloned from the last button clicked (or first button added).

The Multi button does not trigger any events itself, only the contained buttons trigger events.

Example

var b1 = new Jx.Button({
    label: 'b1',
    onClick: function(button) {
        console.log('b1 clicked');
    }
});
var b2 = new Jx.Button({
    label: 'b2',
    onClick: function(button) {
        console.log('b2 clicked');
    }
});
var b3 = new Jx.Button({
    label: 'b3',
    onClick: function(button) {
        console.log('b3 clicked');
    }
});
var multiButton = new Jx.Button.Multi();
multiButton.add(b1, b2, b3);

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
{<Jx.Button>} activeButtonthe currently selected button
buttons{Array} the buttons added to this multi button
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
Functions
renderconstruct a new instance of Jx.Button.Multi.
setButtonupdate the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.

Properties

{<Jx.Button>} activeButton

the currently selected button

buttons

{Array} the buttons added to this multi button

classes

{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.  This allows developers to provide custom HTML structures without affecting the functionality of widgets.

Functions

render

render: function()

construct a new instance of Jx.Button.Multi.

setButton

setButton: function(button)

update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.

Parameters

button{Jx.Button} The button to set as the active button

Jx.Layout

Extends: Jx.Object

Jx.Layout is used to provide more flexible layout options for applications

Jx.Layout wraps an existing DOM element (typically a div) and provides extra functionality for sizing that element within its parent and sizing elements contained within it that have a ‘resize’ function attached to them.

To create a Jx.Layout, pass the element or id plus an options object to the constructor.

Example

var myContainer = new Jx.Layout('myDiv', options);

Events

sizeChangefired when the size of the container changes

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Functions
windowResizewhen the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized
resizeresize the element controlled by this Jx.Layout object.

Functions

windowResize

windowResize: function()

when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized

resize

resize: function(options)

resize the element controlled by this Jx.Layout object.

Parameters

optionsnew options to apply, see <Jx.Layout.Options>

Jx.Toolbar

Extends: Jx.Widget

A toolbar is a container object that contains other objects such as buttons.  The toolbar organizes the objects it contains automatically, wrapping them as necessary.  Multiple toolbars may be placed within the same containing object.

Jx.Toolbar includes CSS classes for styling the appearance of a toolbar to be similar to traditional desktop application toolbars.

There is one special object, Jx.ToolbarSeparator, that provides a visual separation between objects in a toolbar.

While a toolbar is generally a dumb container, it serves a special purpose for menus by providing some infrastructure so that menus can behave properly.

In general, almost anything can be placed in a Toolbar, and mixed with anything else.

Example

The following example shows how to create a Jx.Toolbar instance and place two objects in it.

//myToolbarContainer is the id of a <div> in the HTML page.
function myFunction() {}
var myToolbar = new Jx.Toolbar('myToolbarContainer');

var myButton = new Jx.Button(buttonOptions);

var myElement = document.createElement('select');

myToolbar.add(myButton, new Jx.ToolbarSeparator(), myElement);

Events

addfired when one or more buttons are added to a toolbar
removefired when on eor more buttons are removed from a toolbar

Implements

Options

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
list{Jx.List} the list that holds the items in this toolbar
domObj{HTMLElement} the HTML element that the toolbar lives in
isActiveWhen a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out.
Functions
addToadd this toolbar to a DOM element automatically creating a toolbar container if necessary
addAdd an item to the toolbar.
removeremove an item from a toolbar.
deactivateDeactivate the Toolbar (when it is acting as a menu bar).
isActiveIndicate if the toolbar is currently active (as a menu bar)
setActiveSet the active state of the toolbar (for menus)
setVisibleItemFor menus, they want to know which menu is currently open.
updateUpdates the size of the UL so that the size is always consistently the exact size of the size of the sum of the buttons.

Properties

list

{Jx.List} the list that holds the items in this toolbar

domObj

{HTMLElement} the HTML element that the toolbar lives in

isActive

When a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out.

Functions

addTo

addTo: function(parent)

add this toolbar to a DOM element automatically creating a toolbar container if necessary

Parameters

parentthe DOM element or toolbar container to add this toolbar to.

add

add: function( )

Add an item to the toolbar.  If the item being added is a Jx component with a domObj property, the domObj is added.  If the item being added is an LI element, then it is given a CSS class of jxToolItem.  Otherwise, the thing is wrapped in a <Jx.ToolbarItem>.

Parameters

thing{Object} the thing to add.  More than one thing can be added by passing multiple arguments.

remove

remove: function(item)

remove an item from a toolbar.  If the item is not in this toolbar nothing happens

Parameters

item{Object} the object to remove

Returns

{Object} the item that was removed, or null if the item was not removed.

deactivate

deactivate: function()

Deactivate the Toolbar (when it is acting as a menu bar).

isActive

isActive: function()

Indicate if the toolbar is currently active (as a menu bar)

Returns

{Boolean}

setActive

setActive: function(b)

Set the active state of the toolbar (for menus)

Parameters

b{Boolean} the new state

setVisibleItem

setVisibleItem: function(obj)

For menus, they want to know which menu is currently open.

Parameters

obj{Jx.Menu} the menu that just opened.

update

update: function ()

Updates the size of the UL so that the size is always consistently the exact size of the size of the sum of the buttons.  This will keep all of the buttons on one line.

Jx.Toolbar.Container

Extends: Jx.Widget

A toolbar container contains toolbars.  A single toolbar container fills the available space horizontally.  Toolbars placed in a toolbar container do not wrap when they exceed the available space.

Events

addfired when one or more toolbars are added to a container
removefired when one or more toolbars are removed from a container

Implements

Options Events {<Jx.Addable>}

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
domObj{HTMLElement} the HTML element that the container lives in
Functions
findFirstVisibleFinds the first visible button on the toolbar and saves a reference in the scroller object
scrollDoes the work of scrolling the toolbar to a specific position.
afterTweenRightUpdates pointers to buttons after the toolbar scrolls right
afterTweenLeftUpdates pointers to buttons after the toolbar scrolls left
getPreviousButtonFinds the button to the left of the first visible button
getNextButtonFinds the button to the right of the first visible button

Properties

domObj

{HTMLElement} the HTML element that the container lives in

Functions

findFirstVisible

findFirstVisible: function()

Finds the first visible button on the toolbar and saves a reference in the scroller object

scroll

scroll: function(direction)

Does the work of scrolling the toolbar to a specific position.

Parameters

directionwhether to scroll left or right

afterTweenRight

afterTweenRight: function(currentButton)

Updates pointers to buttons after the toolbar scrolls right

Parameters

currentButtonthe button that was currently first before the scroll

afterTweenLeft

afterTweenLeft: function(previousButton)

Updates pointers to buttons after the toolbar scrolls left

Parameters

previousButtonthe button that was to the left of the first visible button.

getPreviousButton

getPreviousButton: function(currentButton)

Finds the button to the left of the first visible button

Parameters

currentButtonthe first visible button

getNextButton

getNextButton: function(currentButton)

Finds the button to the right of the first visible button

Parameters

currentButtonthe first visible button

Jx.Toolbar.Item

Extends: Object

Implements: Options

A helper class to provide a container for something to go into a Jx.Toolbar.

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Jx.Panel

Extends: Jx.Widget

A panel is a fundamental container object that has a content area and optional toolbars around the content area.  It also has a title bar area that contains an optional label and some user controls as determined by the options passed to the constructor.

Example

Events

closefired when the panel is closed
collapsefired when the panel is collapsed
expandfired when the panel is opened

MooTools.lang Keys

  • panel.collapseTooltip
  • panel.collapseLabel
  • panel.expandlabel
  • panel.maximizeTooltip
  • panel.maximizeLabel
  • panel.restoreTooltip
  • panel.restoreLabel
  • panel.closeTooltip
  • panel.closeLabel

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Functions
layoutContentthe sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area.
setLabelSet the label in the title bar of this panel
getLabelGet the label of the title bar of this panel
finalizeClean up the panel
maximizeMaximize this panel
setContentset the content of this panel to some HTML
setContentURLSet the content of this panel to come from some URL.
panelContentLoadedWhen the content of the panel is loaded from a remote URL, this method is called when the ajax request returns.
toggleCollapsesets or toggles the collapsed state of the panel.
closeCloses the panel (completely hiding it).

Functions

layoutContent

layoutContent: function()

the sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area.

setLabel

setLabel: function(s)

Set the label in the title bar of this panel

Parameters

s{String} the new label

getLabel

getLabel: function()

Get the label of the title bar of this panel

Returns

{String} the label

finalize

finalize: function()

Clean up the panel

maximize

maximize: function()

Maximize this panel

setContent

setContent : function (html)

set the content of this panel to some HTML

Parameters

html{String} the new HTML to go in the panel

setContentURL

setContentURL : function (url)

Set the content of this panel to come from some URL.

Parameters

url{String} URL to some HTML content for this panel

panelContentLoaded

panelContentLoaded: function(html)

When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns.

Parameters

html{String} the html return from xhr.onSuccess

toggleCollapse

toggleCollapse: function(state)

sets or toggles the collapsed state of the panel.  If a new state is passed, it is used, otherwise the current state is toggled.

Parameters

stateoptional, if passed then the state is used, otherwise the state is toggled.

close

close: function()

Closes the panel (completely hiding it).

Jx.Dialog

Extends: Jx.Panel

A Jx.Dialog implements a floating dialog.  Dialogs represent a useful way to present users with certain information or application controls.  Jx.Dialog is designed to provide the same types of features as traditional operating system dialog boxes, including:

  • dialogs may be modal (user must dismiss the dialog to continue) or non-modal
  • dialogs are movable (user can drag the title bar to move the dialog around)
  • dialogs may be a fixed size or allow user resizing.

Jx.Dialog uses <Jx.ContentLoader> to load content into the content area of the dialog.  Refer to the <Jx.ContentLoader> documentation for details on content options.

Example

var dialog = new Jx.Dialog();

Events

opentriggered when the dialog is opened
closetriggered when the dialog is closed
changetriggered when the value of an input in the dialog is changed
resizetriggered when the dialog is resized

Extends

Jx.Dialog extends Jx.Panel, please go there for more details.

MooTools.lang Keys

  • dialog.resizeToolTip

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Functions
resizeresize the dialog.
sizeChangedoverload panel’s sizeChanged method
toggleCollapsesets or toggles the collapsed state of the panel.
maximizeCalled when the maximize button of a dialog is clicked.
showshow the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.
hidehide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.
openURLopen the dialog and load content from the provided url.
openopen the dialog.
closeclose the dialog and trigger the onClose callback function if necessary
getKeyboardMethodsused by this and all child classes to have methods listen to keyboard events, returned object will be parsed to the events object of a MooTools Keyboard instance
setDragLimitcalculates the drag-dimensions of an given element to drag

Functions

resize

resize: function(width,
height,
autoPosition)

resize the dialog.  This can be called when the dialog is closed or open.

Parameters

widththe new width
heightthe new height
autoPositionboolean, false by default, if resizing an open dialog setting this to true will reposition it according to its position rules.

sizeChanged

sizeChanged: function()

overload panel’s sizeChanged method

toggleCollapse

toggleCollapse: function(state)

sets or toggles the collapsed state of the panel.  If a new state is passed, it is used, otherwise the current state is toggled.

Parameters

stateoptional, if passed then the state is used, otherwise the state is toggled.

maximize

maximize: function ()

Called when the maximize button of a dialog is clicked.  It will maximize the dialog to match the size of its parent.

show

show : function( )

show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.

hide

hide : function()

hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.

openURL

openURL: function(url)

open the dialog and load content from the provided url.  If you don’t provide a URL then the dialog opens normally.

Parameters

url<String> the url to load when opening.

open

open: function()

open the dialog.  This may be delayed depending on the asynchronous loading of dialog content.  The onOpen callback function is called when the dialog actually opens

close

close: function()

close the dialog and trigger the onClose callback function if necessary

getKeyboardMethods

used by this and all child classes to have methods listen to keyboard events, returned object will be parsed to the events object of a MooTools Keyboard instance

@return Object

setDragLimit

setDragLimit : function(reference)

calculates the drag-dimensions of an given element to drag

Parameters

  • reference {Object} (optional) the element|elementId|object to set the limits

Jx.Splitter

Extends: Jx.Object

a Jx.Splitter creates two or more containers within a parent container and provides user control over the size of the containers.  The split can be made horizontally or vertically.

A horizontal split creates containers that divide the space horizontally with vertical bars between the containers.  A vertical split divides the space vertically and creates horizontal bars between the containers.

Example

MooTools.lang Keys

  • splitter.barToolTip

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
domObj{HTMLElement} the element being split
elements{Array} an array of elements that are displayed in each of the split areas
bars{Array} an array of the bars between each of the elements used to resize the split areas.
firstUpdate{Boolean} track the first resize event so that unexposed Jx things can be forced to calculate their size the first time they are exposed.
Functions
prepareElementPrepare a new, empty element to go into a split area.
prepareBarPrepare a new, empty bar to go into between split areas.
establishConstraintsSetup the initial set of constraints that set the behaviour of the bars between the elements in the split area.
dragHorizontalIn a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar.
dragVerticalIn a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar.
sizeChangedhandle the size of the container being changed.
horizontalResizeResize a horizontally layed-out container
verticalResizeResize a vertically layed out container.

Properties

domObj

{HTMLElement} the element being split

elements

{Array} an array of elements that are displayed in each of the split areas

bars

{Array} an array of the bars between each of the elements used to resize the split areas.

firstUpdate

{Boolean} track the first resize event so that unexposed Jx things can be forced to calculate their size the first time they are exposed.

Functions

prepareElement

prepareElement: function()

Prepare a new, empty element to go into a split area.

Returns

{HTMLElement} an HTMLElement that goes into a split area.

prepareBar

prepareBar: function()

Prepare a new, empty bar to go into between split areas.

Returns

{HTMLElement} an HTMLElement that becomes a bar.

establishConstraints

establishConstraints: function()

Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area.

dragHorizontal

dragHorizontal: function(obj)

In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar.

Parameters

obj{HTMLElement} the bar that was dragged

dragVertical

dragVertical: function(obj)

In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar.

Parameters

obj{HTMLElement} the bar that was dragged

sizeChanged

sizeChanged: function()

handle the size of the container being changed.

horizontalResize

horizontalResize: function()

Resize a horizontally layed-out container

verticalResize

verticalResize: function()

Resize a vertically layed out container.

Jx.PanelSet

Extends: Jx.Widget

A panel set manages a set of panels within a DOM element.  The PanelSet fills its container by resizing the panels in the set to fill the width and then distributing the height of the container across all the panels.  Panels can be resized by dragging their respective title bars to make them taller or shorter.  The maximize button on the panel title will cause all other panels to be closed and the target panel to be expanded to fill the remaining space.  In this respect, PanelSet works like a traditional Accordion control.

When creating panels for use within a panel set, it is important to use the proper options.  You must override the collapse option and set it to false and add a maximize option set to true.  You must also not include options for menu and close.

Example

var p1 = new Jx.Panel({collapse: false, maximize: true, content: 'c1'});
var p2 = new Jx.Panel({collapse: false, maximize: true, content: 'c2'});
var p3 = new Jx.Panel({collapse: false, maximize: true, content: 'c3'});
var panelSet = new Jx.PanelSet('panels', [p1,p2,p3]);

MooTools.lang Keys

  • panelset.barTooltip

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
panels{Array} the panels being managed by the set
height{Integer} the height of the container, cached for speed
firstLayout{Boolean} true until the panel set has first been resized
Functions
maximizePanelMaximize a panel, taking up all available space (taking into consideration any minimum or maximum values)

Properties

panels

{Array} the panels being managed by the set

height

{Integer} the height of the container, cached for speed

firstLayout

{Boolean} true until the panel set has first been resized

Functions

maximizePanel

maximizePanel: function(panel)

Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values)

Jx.Dialog.Message

Extends: Jx.Dialog

Jx.Dialog.Message is an extension of Jx.Dialog that allows the developer to display a message to the user.  It only presents an OK button.

MooTools.lang Keys

  • message.okButton

License

Copyright © 2009, Jonathan Bomgardner

This file is licensed under an MIT style license

Summary
Functions
renderconstructs the dialog.
onOkCalled when the OK button is clicked.
createTexthandle change in language

Functions

render

render: function ()

constructs the dialog.

onOk

onOk: function ()

Called when the OK button is clicked.  Closes the dialog.

createText

handle change in language

Jx.Dialog.Confirm

Extends: Jx.Dialog

Jx.Dialog.Confirm is an extension of Jx.Dialog that allows the developer to prompt their user with e yes/no question.

MooTools.lang Keys

  • confirm.affirmitiveLabel
  • confirm.negativeLabel

License

Copyright © 2009, Jonathan Bomgardner

This file is licensed under an MIT style license

Summary
Functions
onClickcalled when any button is clicked.

Functions

onClick

onClick: function (value)

called when any button is clicked.  It hides the dialog and fires the close event passing it the value of the button that was pressed.

Jx.Tooltip

Extends: Jx.Widget

An implementation of tooltips.  These are very simple tooltips that are designed to be instantiated in javascript and directly attached to the object that they are the tip for.  We can only have one Tip per element so we use element storage to store the tip object and check for it’s presence before creating a new tip.  If one is there we remove it and create this new one.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
renderCreates the tooltip
enterMethod run when the cursor passes over an element with a tip
leaveExecuted when the mouse moves out of an element with a tip
moveCalled when the mouse moves over an element with a tip.
positionCalled to position the tooltip.

Functions

render

render : function ()

Creates the tooltip

enter

enter : function (event)

Method run when the cursor passes over an element with a tip

Parameters

eventthe event object

leave

leave : function (event)

Executed when the mouse moves out of an element with a tip

Parameters

eventthe event object

move

move : function (event)

Called when the mouse moves over an element with a tip.

Parameters

eventthe event object

position

position : function (event)

Called to position the tooltip.

Parameters

eventthe event object

Jx.Fieldset

Extends: Jx.Widget

This class represents a fieldset.  It can be used to group fields together.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
legenda holder for the legend Element

Properties

legend

a holder for the legend Element

Jx.Form

Extends: Jx.Widget

A class that represents an HTML form.  You add fields using either Jx.Form.add() or by using the field’s .addTo() method.  You can get all form values or set them using this class.  It also handles validation of fields through the use of a plugin (Jx.Plugin.Form.Validator).

Jx.Form has the ability to submit itself via normal HTTP submit as well as via AJAX.  To submit normally you simply call the submit() function.  To submit by AJAX, call ajaxSubmit().  If the form contains Jx.Field.File instances it will either submit all of the files individually and then the data, or it will submit data with the last File instance it finds.  This behavior is dependant on the uploadFilesFirst option (which defaults to false).

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
defaultActionthe default field to activate if the user hits the enter key in this form.
fieldsAn array of all of the single fields (not contained in a fieldset) for this form
pluginNamespacerequired variable for plugins
Functions
isValidDetermines if the form passes validation

Properties

defaultAction

the default field to activate if the user hits the enter key in this form.  Set by specifying default: true as an option to a field.  Will only work if the default is a Jx button field or an input of a type that is a button

fields

An array of all of the single fields (not contained in a fieldset) for this form

pluginNamespace

required variable for plugins

Functions

isValid

isValid : function (evt)

Determines if the form passes validation

Parameters

evtthe MooTools event object

Jx.Field

Extends: Jx.Widget

This class is the base class for all form fields.

Example

MooTools.lang Keys

  • field.requiredText

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
overtextOptionsThe default options Jx uses for mootools-more’s OverText plugin
fieldAn element representing the input field itself.
labelA reference to the label element for this field
tagA reference to the “tag” field of this input if available
idA computed, unique id attached to the input element of this field.
overTextThe overText instance for this field.
typeIndicates that this is a field type
classesThe classes to search for in the template.

Properties

overtextOptions

The default options Jx uses for mootools-more’s OverText plugin

field

An element representing the input field itself.

label

A reference to the label element for this field

tag

A reference to the “tag” field of this input if available

id

A computed, unique id attached to the input element of this field.

overText

The overText instance for this field.

type

Indicates that this is a field type

classes

The classes to search for in the template.  Not required, but we look for them.

Jx.Field.Text

Extends: Jx.Field

This class represents a text input field.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
typeThe type of this field

Properties

type

The type of this field

Jx.Dialog.Prompt

Extends: Jx.Dialog

Jx.Dialog.Prompt is an extension of Jx.Dialog that allows the developer to display a message to the user and ask for a text response.

MooTools.lang Keys

  • prompt.okButton
  • prompt.cancelButton

License

Copyright © 2009, Jonathan Bomgardner

This file is licensed under an MIT style license

Summary
Functions
onClickCalled when the OK button is clicked.

Functions

onClick

onClick: function (value)

Called when the OK button is clicked.  Closes the dialog.

Jx.Panel.DataView

Extends: Jx.Panel

This panel extension takes a standard Jx.Store (or subclass) and displays each record as an item using a provided template.  It sorts the store as requested before doing so.  The class only creates the HTML and has no default CSS display.  All styling must be done by the developer using the control.

Events

renderDonefires when the panel completes creating all of the items.

License

Copyright © 2009, Jonathan Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
drawbegins the process of creating the items
createItemActually does the work of getting the data from the store and creating a single item based on the provided template
parseTemplateparses the provided template to determine which store columns are required to complete it.
enterItemFires mouseenter event
leaveItemFires mouseleave event
selectItemFires select event
unselectItemFires unselect event
addItemFires add event
removeItemFires remove event
createListCreates the list object

Functions

draw

draw: function ()

begins the process of creating the items

createItem

createItem: function ()

Actually does the work of getting the data from the store and creating a single item based on the provided template

parseTemplate

parseTemplate: function (template)

parses the provided template to determine which store columns are required to complete it.

Parameters

templatethe template to parse

enterItem

enterItem: function(item,
list)

Fires mouseenter event

Parameters

itemthe item that is the target of the event
listthe list this item is in.

leaveItem

leaveItem: function(item,
list)

Fires mouseleave event

Parameters

itemthe item that is the target of the event
listthe list this item is in.

selectItem

selectItem: function(item,
list)

Fires select event

Parameters

itemthe item that is the target of the event
listthe list this item is in.

unselectItem

unselectItem: function(item,
list)

Fires unselect event

Parameters

itemthe item that is the target of the event
listthe list this item is in.

addItem

addItem: function(item,
list)

Fires add event

Parameters

itemthe item that is the target of the event
listthe list this item is in.

removeItem

removeItem: function(item,
list)

Fires remove event

Parameters

itemthe item that is the target of the event
listthe list this item is in.

createList

createList: function(container,
options)

Creates the list object

Parameters

containerthe container to use in the list
optionsthe options for the list

Jx.Panel.DataView.Group

Extends: Jx.Panel.DataView

This extension of Jx.Panel.DataView that provides for grouping the items by a particular column.

License

Copyright © 2009, Jonathan Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
drawactually does the work of creating the view
createListCreates the list object

Functions

draw

draw: function ()

actually does the work of creating the view

createList

createList: function(container,
options,
manager)

Creates the list object

Parameters

containerthe container to use in the list
optionsthe options for the list
managerJx.Selection which selection obj to connect to this list

Jx.ListItem

Extends: Jx.Widget

Events

License

Copyright © 2009, DM Solutions Group.

This file is licensed under an MIT style license

Jx.ListView

Extends: Jx.Widget

Events

License

Copyright © 2009, DM Solutions Group.

This file is licensed under an MIT style license

Jx.Field.Hidden

Extends: Jx.Field

This class represents a hidden input field.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
typeThe type of this field

Properties

type

The type of this field

Jx.Field.File

Extends: Jx.Field

This class is designed to work with an iFrame and APC upload progress.  APC is a php specific technology but any server side implementation that works in the same manner should work.  You can then wire this class to the progress bar class to show progress.

The other option is to not use progress tracking and just use the base upload which works through a hidden iFrame.  In order to use this with Jx.Form you’ll need to add it normally but keep a reference to it.  When you call Jx.Form.getValues() it will not return any file information.  You can then call the Jx.Field.File.upload() method for each file input directly and then submit the rest of the form via ajax.

MooTools.lang Keys

  • file.browseLabel

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
typeThe Field type used in rendering
formsholds all form references when we’re in multiple mode
Functions
copyValueCalled when the value in the actual file input changes and when the mouse moves out of it to copy the value into the “fake” text box.
mouseEnterCalled when the mouse enters the actual file input to make the fake button highlight.
mouseLeavecalled when the mouse leaves the actual file input to turn off the highlight of the fake button.
submitUploadCalled either after upload() or as a result of a successful call to get a progress ID.
pollUploadpolls the server for upload progress information
processProgressprocess the data returned from the request
uploadFailurecalled if there is a problem getting progress on the upload
processIFrameUploadCalled if we are not using progress and the IFrame finished loading the server response.
uploadCleanUpCleans up the hidden form and IFrame after a completed upload.

Properties

type

The Field type used in rendering

forms

holds all form references when we’re in multiple mode

Functions

copyValue

copyValue: function ()

Called when the value in the actual file input changes and when the mouse moves out of it to copy the value into the “fake” text box.

mouseEnter

mouseEnter: function ()

Called when the mouse enters the actual file input to make the fake button highlight.

mouseLeave

mouseLeave: function ()

called when the mouse leaves the actual file input to turn off the highlight of the fake button.

submitUpload

submitUpload: function (data)

Called either after upload() or as a result of a successful call to get a progress ID.

Parameters

dataOptional.  The data returned from the call for a progress ID.

pollUpload

pollUpload: function ()

polls the server for upload progress information

processProgress

processProgress: function (data)

process the data returned from the request

Parameters

dataThe data from the request as an object.

uploadFailure

uploadFailure: function (xhr)

called if there is a problem getting progress on the upload

processIFrameUpload

processIFrameUpload: function ()

Called if we are not using progress and the IFrame finished loading the server response.

uploadCleanUp

uploadCleanUp: function ()

Cleans up the hidden form and IFrame after a completed upload.  Set this.options.debug to true to keep this from happening

Jx.Progressbar

Example

The following just uses the defaults.

var progressBar = new Jx.Progressbar();
progressBar.addEvent('update',function(){alert('updated!');});
progressBar.addEvent('complete',function(){
     alert('completed!');
     this.destroy();
});

progressbar.addTo('container');

var total = 90;
for (i=0; i < total; i++) {
     progressbar.update(total, i);
}

Events

onUpdateFired when the bar is updated
onCompletefires when the progress bar completes it’s fill

MooTools.lang keys

  • progressbar.messageText
  • progressbar.progressText

Copyright © 2010 by Jonathan Bomgardner Licensed under an mit-style license

Summary
Properties
classesThe classes used in the template
barthe bar that is filled
textthe element that contains the text that’s shown on the bar (if any).

Properties

classes

The classes used in the template

bar

the bar that is filled

text

the element that contains the text that’s shown on the bar (if any).

Jx.Panel.FileUpload

Extends: Jx.Panel

This class extends Jx.Panel to provide a consistent interface for uploading files in an application.

MooTools.lang Keys

  • upload.buttonText

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
domObjAAn HTML Element used to hold the interface while it is being constructed.
fileQueueAn array holding Jx.Field.File elements that are to be uploaded
Functions
renderSets up the upload panel.
moveToQueueCalled by Jx.Field.File’s fileSelected event.
uploadCalled when the user clicks the upload button.
fileUploadCompleteCalled when a single file is uploaded completely .
fileUploadErrorCalled when there is an error uploading a file.
removeUploadedFileRemoves the passed file from the upload queue upon it’s completion.
fileUploadProgressFunction to pass progress information to the progressbar instance in the file.
allUploadCompletedCalled when the Jx.Field.File completes uploading all files.
createTexthandle change in language

Properties

domObjA

An HTML Element used to hold the interface while it is being constructed.

fileQueue

An array holding Jx.Field.File elements that are to be uploaded

Functions

render

render: function ()

Sets up the upload panel.

moveToQueue

moveToQueue: function (filename)

Called by Jx.Field.File’s fileSelected event.  Moves the selected file into the upload queue.

upload

upload: function ()

Called when the user clicks the upload button.  Runs the upload process.

fileUploadComplete

fileUploadComplete: function (data,
file)

Called when a single file is uploaded completely .

Parameters

datathe data returned from the event
filenamethe filename of the file we’re tracking

fileUploadError

fileUploadError: function (data,
filename)

Called when there is an error uploading a file.

Parameters

datathe data passed back from the server, if any.
filethe file we’re tracking

removeUploadedFile

removeUploadedFile: function (filename)

Removes the passed file from the upload queue upon it’s completion.

Parameters

filethe file we’re tracking

fileUploadProgress

fileUploadProgress: function (data,
file)

Function to pass progress information to the progressbar instance in the file.  Only used if we’re tracking progress.

allUploadCompleted

Called when the Jx.Field.File completes uploading all files.  Sets upload button to disabled and fires the allUploadCompleted event.

createText

handle change in language

Jx.Column

Extends: Jx.Object

The class used for defining columns for grids.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
gridholds a reference to the grid (an instance of Jx.Grid)
Functions
Jx.Columninitializes the column object
measureThis method does the dirty work of actually measuring a cell

Properties

grid

holds a reference to the grid (an instance of Jx.Grid)

Functions

Jx.Column

initializes the column object

measure

measure : function (text,
klass,
rowHeader,
row)

This method does the dirty work of actually measuring a cell

Parameters

textthe text to measure
klassa string indicating and extra classes to add so that css classes can be taken into account. rowHeader - row -

Jx.Columns

Extends: Jx.Object

This class is the container for all columns needed for a grid.  It consolidates many functions that didn’t make sense to put directly in the column class.  Think of it as a model for columns.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
columnsan array holding the actual instantiated column objects
rowTemplatea string holding a template for a single row of cells to be populated when rendering the store into a grid.
hasExpandableboolean indicates whether any of the columns are expandable or not, which affects some calculations for column widths
Functions
buildTemplatescreate the row template based on the current columns
getRowcreate a single row in the grid for a single record and populate the DOM elements for it.
createRulescreate CSS rules for the current grid object

Properties

columns

an array holding the actual instantiated column objects

rowTemplate

a string holding a template for a single row of cells to be populated when rendering the store into a grid.  The template is constructed from the individual column templates once the store has been loaded.

hasExpandable

boolean indicates whether any of the columns are expandable or not, which affects some calculations for column widths

Functions

buildTemplates

buildTemplates: function()

create the row template based on the current columns

getRow

getRow: function(tr,
record)

create a single row in the grid for a single record and populate the DOM elements for it.

Parameters

tr{DOMElement} the TR element to insert the row into
record{Jx.Record} the record to create the row for

createRules

createRules: function(styleSheet,
scope)

create CSS rules for the current grid object

Jx.Row

Extends: Jx.Object

A class defining a grid row.

Inspired by code in the original Jx.Grid class

License

Original Copyright © 2008, DM Solutions Group Inc.  This version Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
gridA reference to the grid that this row model belongs to
heightsThis will hold the calculated height of each row in the grid.
rulesA hash that will hold all of the CSS rules for the rows.
Functions
getRowHeaderCellcreates the TH for the row’s header
calculateHeights

Properties

grid

A reference to the grid that this row model belongs to

heights

This will hold the calculated height of each row in the grid.

rules

A hash that will hold all of the CSS rules for the rows.

Functions

getRowHeaderCell

getRowHeaderCell : function (text)

creates the TH for the row’s header

calculateHeights

calculateHeights : function ()

Jx.Plugin

Extend: Jx.Object

Base class for all plugins.  In order for a plugin to be used it must extend from this class.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Plugin.Grid

Grid plugin namespace

License

This version Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Grid

Extends: Jx.Widget

A tabular control that has fixed, optional, scrolling headers on the rows and columns like a spreadsheet.

Jx.Grid is a tabular control with convenient controls for resizing columns, sorting, and inline editing.  It is created inside another element, typically a div.  If the div is resizable (for instance it fills the page or there is a user control allowing it to be resized), you must call the resize() method of the grid to let it know that its container has been resized.

When creating a new Jx.Grid, you can specify a number of options for the grid that control its appearance and functionality.  You can also specify plugins to load for additional functionality.  Currently Jx provides the following plugins

Prelighterprelights rows, columns, and cells
Selectorselects rows, columns, and cells
Sortersorts rows by specific column
Editorallows editing of cells if the column permits editing

Jx.Grid renders data that comes from an external source.  This external source, called the store, must be a Jx.Store or extended from it.

Events

gridCellEnter(cell, list)called when the mouse enters a cell
gridCellLeave(cell, list)called when the mouse leaves a cell
gridCellClick(cell)called when a cell is clicked
gridRowEnter(cell, list)called when the mouse enters a row header
gridRowLeave(cell, list)called when the mouse leaves a row header
gridRowClick(cell)called when a row header is clicked
gridColumnEnter(cell, list)called when the mouse enters a column header
gridColumnLeave(cell, list)called when the mouse leaves a column header
gridColumnClick(cell)called when a column header is clicked
gridMouseLeave()called when the mouse leaves the grid at any point.

License

Copyright © 2008, DM Solutions Group Inc.  This version Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
pluginNamespacethe required variable for plugins
columnsholds a reference to the columns object
rowHolds a reference to the row object
storeholds a reference to the Jx.Store that is the store for this grid
styleSheetthe name of the dynamic style sheet to use for manipulating styles
hooksa {Hash} of event names for tracking which events have actually been attached to the grid.
uniqueIdan auto-generated id that is assigned as a class name to the grid’s container for scoping generated CSS rules to just this grid
Functions
Jx.Grid
scrollhandle the grid scrolling by updating the position of the headers
drawStoreclears the grid and redraws the store.
drawRowthis method does the heavy lifting of drawing a single record into the grid
clickColumnHeaderhandle clicks on the column header
moveColumnHeaderhandle the mouse moving over the column header
clickRowHeaderhandle clicks on the row header
moveRowHeaderhandle the mouse moving over the row header
clickCellhandle clicks on cells in the grid
dblclickCellhandle doubleclicks on cells in the grid
moveCellhandle the mouse moving over cells in the grid
leaveGridhandle the mouse leaving the grid
changeTextrerender the grid when the language changes
addEventoverride default addEvent to also trigger wanting the event which will then cause the underlying events to be registered

Properties

pluginNamespace

the required variable for plugins

columns

holds a reference to the columns object

row

Holds a reference to the row object

store

holds a reference to the Jx.Store that is the store for this grid

styleSheet

the name of the dynamic style sheet to use for manipulating styles

hooks

a {Hash} of event names for tracking which events have actually been attached to the grid.

uniqueId

an auto-generated id that is assigned as a class name to the grid’s container for scoping generated CSS rules to just this grid

Functions

Jx.Grid

scroll

scroll : function ()

handle the grid scrolling by updating the position of the headers

drawStore

drawStore: function()

clears the grid and redraws the store.  Does not draw the column headers, that is handled by the render() method

drawRow

drawRow: function(record,
index,
position)

this method does the heavy lifting of drawing a single record into the grid

Parameters

record{Jx.Record} the record to render
index{Integer} the row index of the record in the store
position{String} ‘top’ or ‘bottom’ (default ‘bottom’) position to put the new row in the grid.

clickColumnHeader

clickColumnHeader: function(e)

handle clicks on the column header

moveColumnHeader

moveColumnHeader: function(e)

handle the mouse moving over the column header

clickRowHeader

clickRowHeader: function(e)

handle clicks on the row header

moveRowHeader

moveRowHeader: function(e)

handle the mouse moving over the row header

clickCell

clickCell: function(e)

handle clicks on cells in the grid

dblclickCell

dblclickCell: function(e)

handle doubleclicks on cells in the grid

moveCell

moveCell: function(e)

handle the mouse moving over cells in the grid

leaveGrid

leaveGrid: function(e)

handle the mouse leaving the grid

changeText

changeText : function(lang)

rerender the grid when the language changes

addEvent

addEvent: function(name,
fn)

override default addEvent to also trigger wanting the event which will then cause the underlying events to be registered

Jx.Grid.Renderer

This is the base class and namespace for all grid renderers.

Extends: Jx.Widget We extended Jx.Widget to take advantage of templating support.

Summary
Properties
domInsertboolean, indicates if the renderer needs to insert a DOM element instead of just outputing some templated HTML.

Properties

domInsert

boolean, indicates if the renderer needs to insert a DOM element instead of just outputing some templated HTML.  Renderers that do use domInsert will be slower.

Jx.Grid.Renderer.Text

This is the default renderer for grid cells.  It works the same as the original column implementation.  It needs a store, a field name, and an optional formatter as well as other options.

Extends: Jx.Grid.Renderer

Jx.Grid.Renderer.CheckBox

Renders a checkbox into the cell.  Allows options for connecting the cell to a model field and propogating changes back to the store.

Extends: Jx.Grid.Renderer

Jx.Grid.Renderer.Button

Renders a Jx.Button into the cell.  You can add s many buttons as you’d like per column by passing button configs in as an array option to options.buttonOptions

Extends: Jx.Grid.Renderer

Jx.Plugin.Grid.Selector

Extends: Jx.Plugin

Grid plugin to select rows, columns, and/or cells.

Original selection code from Jx.Grid’s original class

License

Original Copyright © 2008, DM Solutions Group Inc.  This version Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
selectedHolds arrays of selected rows and/or columns and their headers
Functions
renderrequired for the renderer interface
toElementrequired for the Renderer interface
updateCheckColumncheck to see if a row needs to have its checkbox updated after its been drawn
afterGridRender
onCellClickdispatch clicking on a table cell
selectdispatches the grid click to the various selection methods
selectCellselect a cell
selectRowSelect a row and apply the jxGridRowSelected style to it.
setCheckField
selectRowHeaderApply the jxGridRowHeaderSelected style to the row header cell of a selected row.
selectColumnSelect a column.
selectColumnHeaderApply the jxGridColumnHeaderSelected style to the column header cell of a selected column.
checkSelectionChecks whether a row’s check box is/isn’t checked and modifies the selection appropriately.
checkAllChecks all checkboxes in the column the selector inserted.

Properties

selected

Holds arrays of selected rows and/or columns and their headers

Functions

render

render: function()

required for the renderer interface

toElement

toElement: function()

required for the Renderer interface

updateCheckColumn

updateCheckColumn: function(index,
record)

check to see if a row needs to have its checkbox updated after its been drawn

Parameters

index{Integer} the row that was just rendered
record{Jx.Record} the record that was rendered into that row

afterGridRender

afterGridRender: function ()

onCellClick

onCellClick: function(cell)

dispatch clicking on a table cell

select

select : function (cell)

dispatches the grid click to the various selection methods

selectCell

selectCell: function(cell)

select a cell

Parameters

cell{DOMElement} the cell element to select

selectRow

selectRow: function (row,
silently)

Select a row and apply the jxGridRowSelected style to it.

Parameters

row{Integer} the row to select

setCheckField

setCheckField: function (row,
checked)

selectRowHeader

selectRowHeader: function (row)

Apply the jxGridRowHeaderSelected style to the row header cell of a selected row.

Parameters

row{Integer} the row header to select

selectColumn

selectColumn: function (col)

Select a column.  This deselects a previously selected column.

Parameters

col{Integer} the column to select

selectColumnHeader

selectColumnHeader: function (col)

Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column.

Parameters

col{Integer} the column header to select

checkSelection

checkSelection: function (event)

Checks whether a row’s check box is/isn’t checked and modifies the selection appropriately.

Parameters

columnJx.Column that created the checkbox
field<Jx.Field.Checkbox> instance that was checked/unchecked created the checkbox

checkAll

checkAll: function ()

Checks all checkboxes in the column the selector inserted.

Jx.Plugin.Grid.Prelighter

Extends: Jx.Plugin

Grid plugin to prelight rows, columns, and cells

Inspired by the original code in Jx.Grid

License

Original Copyright © 2008, DM Solutions Group Inc.  This version Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Functions
lighton
lightoff
lightdispatches the event to the various prelight methods.
prelightRowHeaderapply the jxGridRowHeaderPrelight style to the header cell of a row.
prelightColumnHeaderapply the jxGridColumnHeaderPrelight style to the header cell of a column.
prelightRowapply the jxGridRowPrelight style to row.
prelightColumnapply the jxGridColumnPrelight style to a column.
prelightCellapply the jxGridCellPrelight style to a cell.

Functions

lighton

lighton : function (cell)

lightoff

lightoff : function (cell)

light

light: function (cell,
on)

dispatches the event to the various prelight methods.

prelightRowHeader

prelightRowHeader : function (row,
on)

apply the jxGridRowHeaderPrelight style to the header cell of a row.  This removes the style from the previously pre-lit row header.

Parameters

row{Integer} the row to pre-light the header cell of

prelightColumnHeader

prelightColumnHeader : function (col,
on)

apply the jxGridColumnHeaderPrelight style to the header cell of a column.  This removes the style from the previously pre-lit column header.

Parameters

col{Integer} the column to pre-light the header cell of
onflag to tell if we’re lighting on or off

prelightRow

prelightRow : function (row,
on)

apply the jxGridRowPrelight style to row.  This removes the style from the previously pre-lit row.

Parameters

row{Integer} the row to pre-light
onflag to tell if we’re lighting on or off

prelightColumn

prelightColumn : function (col,
on)

apply the jxGridColumnPrelight style to a column.  This removes the style from the previously pre-lit column.

Parameters

col{Integer} the column to pre-light
onflag to tell if we’re lighting on or off

prelightCell

prelightCell : function (cell,
on)

apply the jxGridCellPrelight style to a cell.  This removes the style from the previously pre-lit cell.

Parameters

cellthe cell to lighton/off
onflag to tell if we’re lighting on or off

Jx.Plugin.Grid.Sorter

Extends: Jx.Plugin

Grid plugin to sort the grid by a single column.

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
currentrefernce to the currently sorted column
directiontell us what direction the sort is in (either ‘asc’ or ‘desc’)
Functions
modifyHeaders
sortcalled when a grid header is clicked.

Properties

current

refernce to the currently sorted column

direction

tell us what direction the sort is in (either ‘asc’ or ‘desc’)

Functions

modifyHeaders

modifyHeaders: function()

sort

sort: function(el)

called when a grid header is clicked.

Parameters

cellThe cell clicked

Jx.Plugin.Grid.Resize

Extends: Jx.Plugin

Grid plugin to enable dynamic resizing of column width and row height

License

Copyright © 2009, DM Solutions Group.

This file is licensed under an MIT style license

Summary
Properties
elsthe DOM elements by which the rows/columns are resized.
dragsthe Drag instances
Functions
removeHandlesclean up any handles we created
createHandlescreate handles that let the user drag to resize columns and rows
createTextrespond to a language change by updating the tooltip

Properties

els

the DOM elements by which the rows/columns are resized.

drags

the Drag instances

Functions

removeHandles

removeHandles: function()

clean up any handles we created

createHandles

createHandles: function()

create handles that let the user drag to resize columns and rows

createText

respond to a language change by updating the tooltip

Jx.Plugin.Grid.Editor

Extends: Jx.Plugin

Grid plugin to enable inline editing within a cell

Original selection code from Jx.Grid’s original class

License

Original Copyright © 2008, DM Solutions Group Inc.  This version Copyright © 2009, Conrad Barthelmes.

This file is licensed under an MIT style license

Summary
Properties
activeCellfield : Reference to the Jx.Field instance that will be created cell : Reference to the cell inside the table span : Reference to the Dom Element inside the selected cell of the grid oldValue : Old value of the cell from the grid’s store newValue : Object with <data> and <error> for better validation possibilites timeoutId : TimeoutId if the focus blurs the input.
keyboardInstance of a Mootols Keyboard Class
Functions
onCellClickdispatch clicking on a table cell
activateactivates the input field or breaks up if conditions are not fulfilled
setStylessets some styles for the Jx.Field elements...
showPopUpShows the PopUp of of the editor if it already exists, otherwise calls Method this.createPopUp
createPopUpcreates the popup for the requested cell.
setPopUpStylesAfterRendering
setPopUpButtonscreates the PopUp Buttons if enabled in options or deletes them if set to false
unsetActiveFieldresets the activeField and hides the popup
unsetPopUpresets the popup manually to be able to use it with different settings
cellValueIncrementWhether increments or decrements the value of the active cell if the dataType is numeric
cellIsInGriddetermins if the given coordinates are within the grid
addFormatterUriClickListenerlooks up for Jx.Formatter.Uri columns to disable the link and open the inline editor instead when CTRL is NOT pressed.

Properties

activeCell

Containing Objects

field : Reference to the Jx.Field instance that will be created cell : Reference to the cell inside the table span : Reference to the Dom Element inside the selected cell of the grid oldValue : Old value of the cell from the grid’s store newValue : Object with <data> and <error> for better validation possibilites timeoutId : TimeoutId if the focus blurs the input. data : Reference to the cell data fieldOptions : Reference to the field options of this column

keyboard

Instance of a Mootols Keyboard Class

Functions

onCellClick

onCellClick: function(cell)

dispatch clicking on a table cell

activate

activate: function(cell)

activates the input field or breaks up if conditions are not fulfilled

@todo Field validation

Parameters

@var {Object} cell Table Element @return void

setStyles

setStyles : function(cell)

sets some styles for the Jx.Field elements...

Parameters

@var celltable cell of the grid @return void

showPopUp

showPopUp : function(cell)

Shows the PopUp of of the editor if it already exists, otherwise calls Method this.createPopUp

Parameters

@var celltable cell of the grid

createPopUp

createPopUp : function(cell)

creates the popup for the requested cell.

COMMENT: this could also be an jx.dialog..? if we use jx.dialog, maybe without a title element?  Maybe a jx.dialog is too much for this little thing?

Parameters

@var celltable cell of the grid

setPopUpStylesAfterRendering

setPopUpStylesAfterRendering: function()
  • measures the widths of the buttons to set a new min-width for the popup because custom labels could break the min-width and force a line-break
  • resets the size of the field to make it fit inside the popup (looks nicer)

@return void

setPopUpButtons

setPopUpButtons : function()

creates the PopUp Buttons if enabled in options or deletes them if set to false

@return void

unsetActiveField

unsetActiveField: function()

resets the activeField and hides the popup

@return void

unsetPopUp

unsetPopUp : function()

resets the popup manually to be able to use it with different settings

cellValueIncrement

cellValueIncrement : function(bool)

Whether increments or decrements the value of the active cell if the dataType is numeric

Parameters @var {Boolean} bool @return void

cellIsInGrid

cellIsInGrid: function(row,
index)

determins if the given coordinates are within the grid

Parameters

@var {Integer} row @var {Integer} index @return {Boolean}

addFormatterUriClickListener

addFormatterUriClickListener : function()

looks up for Jx.Formatter.Uri columns to disable the link and open the inline editor instead when CTRL is NOT pressed. set option linkClickListener to false to disable this

Jx.Plugin.DataView

The namespace for all dataview plugins

Jx.Slide

Hides and shows an element without depending on a fixed width or height

Copyright 2009 by Jonathan Bomgardner License: MIT-style

Summary
Functions
initsets up the slide
handleClickevent handler for clicks on the trigger.
setDisplaycalled at the end of the animation to set the target’s width or height as well as other css values to the appropriate values

Functions

init

init: function ()

sets up the slide

handleClick

handleClick: function ()

event handler for clicks on the trigger.  Starts the slide process

setDisplay

setDisplay: function ()

called at the end of the animation to set the target’s width or height as well as other css values to the appropriate values

Jx.Plugin.DataView.GroupFolder

Extends: Jx.Plugin

Plugin for DataViewallows folding/unfolding of the groups in the grouped dataview

License

Copyright © 2009, Jonathan Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
headerStateHash that holds the open/closed state of each header
Functions
setHeadersCalled after the dataview is rendered.
onSlideInCalled when a group opens.
onSlideOutCalled when a group closes.

Properties

headerState

Hash that holds the open/closed state of each header

Functions

setHeaders

setHeaders: function ()

Called after the dataview is rendered.  Sets up the Jx.Slide instance for each header.  It also sets the initial state of each header so that if the dataview is redrawn for some reason the open/closed state is preserved.

onSlideIn

onSlideIn: function (header)

Called when a group opens.

Parameters

headerthe header that was clicked.

onSlideOut

onSlideOut: function (header)

Called when a group closes.

Parameters

headerthe header that was clicked.

Jx.Plugin.Field

Field plugin namespace

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Plugin.Field.Validator

Extends: Jx.Plugin

Field plugin for enforcing validation when a field is not used in a form.

License

Copyright © 2009, Jonathan Bomgardner.  Parts inspired by mootools-more’s Form.Validator class

This file is licensed under an MIT style license

Summary
Properties
validtells whether this field passed validation or not.
errorsarray of errors found on this field

Properties

valid

tells whether this field passed validation or not.

errors

array of errors found on this field

Jx.Plugin.Form

Form plugin namespace

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Plugin.Form.Validator

Extends: Jx.Plugin

Form plugin for enforcing validation on the fields in a form.

License

Copyright © 2009, Jonathan Bomgardner.  Parts inspired by mootools-more’s Form.Validator class

This file is licensed under an MIT style license

Summary
Properties
errorMessagesselement holding
Functions
validateMethod that actually does the work of validating the fields in the form.
fieldFailedRefires the fieldValidationFailed event from the field validators it contains
fieldPassedRefires the fieldValidationPassed event from the field validators it contains

Properties

errorMessagess

element holding

Functions

validate

validate: function ()

Method that actually does the work of validating the fields in the form.

fieldFailed

fieldFailed: function (field,
validator)

Refires the fieldValidationFailed event from the field validators it contains

fieldPassed

fieldPassed: function (field,
validator)

Refires the fieldValidationPassed event from the field validators it contains

Jx.Plugin.Toolbar

Toolbar plugin namespace

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Plugin.ToolbarContainer.TabMenu

Extends: Jx.Plugin

This plugin provides a menu of tabs in a toolbar (similar to the button in firefox at the end of the row of tabs).  It is designed to be used only when the toolbar contains tabs and only when the container is allowed to scroll.  Also, this plugin must be added directly to the Toolbar container.  You can get a reference to the container for a Jx.TabBox by doing

var tabbox = new Jx.TabBox();
var toolbarContainer = document.id(tabBox.tabBar).getParent('.jxBarContainer').retrieve('jxBarContainer');

You can then use the attach method to connect the plugin.  Otherwise, you can add it via any normal means to a directly instantiated Container.

License

Copyright © 2010, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
tabsholds all of the tabs that we’re tracking

Properties

tabs

holds all of the tabs that we’re tracking

Jx.Adaptor

Base class for all adaptor implementations.  Provides a place to locate all common code and the Jx.Adaptor namespace.  Since it extends Jx.Plugin all adaptors will be able to be used as plugins for their respective classes.  Also as such, they must have the attach() and detach() methods.

Adaptors are specifically used to conform a Jx.Store to any one of the different widgets (i.e.  Jx.Tree, Jx.ListView, etc...) that could benefit from integration with the store.  This approach was taken to minimize data access code in the widgets themselves.  Widgets should have no idea where the data/items come from so that they will be usable in the broadest number of situations.

Copyright 2010 by Jonathan Bomgardner License: mit-style

Summary
Properties
columnsNeededWill hold an array of the column names needed for processing the template

Properties

columnsNeeded

Will hold an array of the column names needed for processing the template

Jx.Adaptor.Tree

This base class is used to change a store (a flat list of records) into the data structure needed for a Jx.Tree.  It will have 2 subclasses: <Jx.Adapter.Tree.Mptt> and Jx.Adapter.Tree.Parent.

Copyright 2010 by Jonathan Bomgardner License: mit-style

Summary
Properties
foldersA Hash containing all of the Jx.TreeFolders in this tree.
currentRecordAn integer indicating the last position we were at in the store.
Functions
checkFolderCalled by the disclose event of the tree to determine if we need to request additional items for a branch of the tree.
hasChildrenVirtual method to be overridden by sublcasses.
hasParentVirtual method to be overridden by sublcasses.
getParentIndexVirtual method to be overridden by sublcasses.

Properties

folders

A Hash containing all of the Jx.TreeFolders in this tree.

currentRecord

An integer indicating the last position we were at in the store.  Used to allow the adaptor to pick up rendering items after we request additional data.

Functions

checkFolder

checkFolder: function (folder)

Called by the disclose event of the tree to determine if we need to request additional items for a branch of the tree.

hasChildren

Virtual method to be overridden by sublcasses.  Determines if a specific node has any children.

hasParent

Virtual method to be overridden by sublcasses.  Determines if a specific node has a parent node.

getParentIndex

Virtual method to be overridden by sublcasses.  Determines the store index of the parent node.

Jx.Adaptor.Tree.Mptt

This class adapts a table adhering to the classic Parent-style “tree table”.

This class requires an MPTT (Modified Preorder Tree Traversal) table.  The MPTT has a ‘left’ and a ‘right’ column that indicates the order of nesting.  For more details see the sitepoint.com article at http://articles.sitepoint.com/article/hierarchical-data-database

if useAjax option is set to true then this adapter will send an Ajax request to the server, through the store’s strategy (should be Jx.Store.Strategy.Progressive) to request additional nodes.

Copyright 2010 by Jonathan Bomgardner License: mit-style

Jx.Adapter.Tree.Parent

This class adapts a table adhering to the classic Parent-style “tree table”.

Basically, the store needs to have a column that will indicate the parent of each row.  The root(s) of the tree should be indicated by a “-1” in this column.  The name of the “parent” column is configurable in the options.

if the monitorFolders option is set to true then this adapter will send an Ajax request to the server, through the store’s strategy (should be Jx.Store.Strategy.Progressive) to request additional nodes.  Also, a column indicating whether this is a folder needs to be set as there is no way to tell if a node has children without it.

Copyright 2010 by Jonathan Bomgardner License: mit-style

Jx.Adaptor.Combo

The namespace for all combo adaptors

Jx.Menu.Context

Extends: Jx.Menu

A Jx.Menu that has no button but can be opened at a specific browser location to implement context menus (for instance).

Example

Events

TODOadd open/close events?

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Functions
showShow the context menu at the location of the mouse click

Functions

show

show : function(e)

Show the context menu at the location of the mouse click

Parameters

e{Event} the mouse event

Jx.Menu.Separator

Extends: Jx.Object

A convenience class to create a visual separator in a menu.

Example

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
domObj{HTMLElement} the HTML element that the separator is contained within
owner{Jx.Menu, Jx.Menu.SubMenu} the menu that the separator is in.
Functions
setOwnerSet the ownder of this menu item
hideHide the menu item.
showShow the menu item

Properties

domObj

{HTMLElement} the HTML element that the separator is contained within

owner

{Jx.Menu, Jx.Menu.SubMenu} the menu that the separator is in.

Functions

setOwner

setOwner: function(obj)

Set the ownder of this menu item

Parameters

obj{Object} the new owner

hide

Hide the menu item.

show

Show the menu item

Jx.Menu.SubMenu

Extends: Jx.Menu.Item

Implements: <Jx.AutoPosition>, <Jx.Chrome>

A sub menu contains menu items within a main menu or another sub menu.

The structure of a SubMenu is the same as a Jx.Menu.Item with an additional unordered list element appended to the container.

Example

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
subDomObj{HTMLElement} the HTML container for the sub menu.
owner{Jx.Menu or <Jx.SubMenu>} the menu or sub menu that this sub menu belongs
visibleItem{<Jx.MenuItem>} the visible item within the menu
list{Jx.List} a list to manage menu items
Functions
setOwnerSet the owner of this sub menu
showShow the sub menu
hideHide the sub menu
addAdd menu items to the sub menu.
removeRemove a menu item from the menu
replaceReplace a menu item with another menu item
deactivateDeactivate the sub menu
isActiveIndicate if this sub menu is active
setActiveSet the active state of the Jx.Menu that contains this sub menu
setVisibleItemSet a sub menu of this menu to be visible and hide the previously visible one.

Properties

subDomObj

{HTMLElement} the HTML container for the sub menu.

owner

{Jx.Menu or <Jx.SubMenu>} the menu or sub menu that this sub menu belongs

visibleItem

{<Jx.MenuItem>} the visible item within the menu

list

{Jx.List} a list to manage menu items

Functions

setOwner

setOwner: function(obj)

Set the owner of this sub menu

Parameters

obj{Object} the owner

show

show: function()

Show the sub menu

hide

hide: function()

Hide the sub menu

add

add: function(item,
position)

Add menu items to the sub menu.

Parameters

item{<Jx.MenuItem>} the menu item to add.  Multiple menu items can be added by passing multiple arguments to this function.

remove

remove: function(item)

Remove a menu item from the menu

Parameters

item{<Jx.MenuItem>} the menu item to remove

replace

replace: function(item,
withItem)

Replace a menu item with another menu item

Parameters

what{<Jx.MenuItem>} the menu item to replace
withWhat{<Jx.MenuItem>} the menu item to replace it with

deactivate

deactivate: function(e)

Deactivate the sub menu

Parameters

e{Event} the event that triggered the menu being deactivated.

isActive

isActive: function()

Indicate if this sub menu is active

Returns

{Boolean} true if the Jx.Menu that ultimately contains this sub menu is active, false otherwise.

setActive

setActive: function(isActive)

Set the active state of the Jx.Menu that contains this sub menu

Parameters

isActive{Boolean} the new active state

setVisibleItem

setVisibleItem: function(obj)

Set a sub menu of this menu to be visible and hide the previously visible one.

Parameters

obj{<Jx.SubMenu>} the sub menu that should be visible

Jx.Splitter.Snap

Extends: Jx.Object

A helper class to create an element that can snap a split panel open or closed.

Example

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
snap{HTMLElement} the DOM element of the snap (the thing that gets clicked).
element{HTMLElement} An element of the Jx.Splitter that gets controlled by this snap
splitter{Jx.Splitter} the splitter that this snap is associated with.
layout{String} track the layout of the splitter for convenience.
Functions
toggleElementSnap the element open or closed.
sizeChangedHandle the size of the element changing to see if the toggle state has changed.

Properties

snap

{HTMLElement} the DOM element of the snap (the thing that gets clicked).

element

{HTMLElement} An element of the Jx.Splitter that gets controlled by this snap

splitter

{Jx.Splitter} the splitter that this snap is associated with.

layout

{String} track the layout of the splitter for convenience.

Functions

toggleElement

toggleElement: function()

Snap the element open or closed.

sizeChanged

Handle the size of the element changing to see if the toggle state has changed.

Jx.Tab

Extends: Jx.Button

A single tab in a tab set.  A tab has a label (displayed in the tab) and a content area that is displayed when the tab is active.  A tab has to be added to both a Jx.TabSet (for the content) and Jx.Toolbar (for the actual tab itself) in order to be useful.  Alternately, you can use a Jx.TabBox which combines both into a single control at the cost of some flexibility in layout options.

A tab is a <Jx.ContentLoader> and you can specify the initial content of the tab using any of the methods supported by <Jx.ContentLoader::loadContent>.  You can acccess the actual DOM element that contains the content (if you want to dynamically insert content for instance) via the Jx.Tab::content property.

A tab is a button of type toggle which means that it emits the up and down events.

Example

var tab1 = new Jx.Tab({
    label: 'tab 1',
    content: 'content1',
    onDown: function(tab) {
        console.log('tab became active');
    },
    onUp: function(tab) {
        console.log('tab became inactive');
    }
});

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
content{HTMLElement} The content area that is displayed when the tab is active.
classes{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.
Functions
renderCreate a new instance of Jx.Tab.

Properties

content

{HTMLElement} The content area that is displayed when the tab is active.

classes

{<Hash>} a hash of object properties to CSS class names used to automatically extract references to important DOM elements when processing a widget template.  This allows developers to provide custom HTML structures without affecting the functionality of widgets.

Functions

render

render : function( )

Create a new instance of Jx.Tab.  Any layout options passed are used to create a Jx.Layout for the tab content area.

Jx.TabSet

Extends: Jx.Object

A TabSet manages a set of Jx.Tab content areas by ensuring that only one of the content areas is visible (i.e. the active tab).  TabSet does not manage the actual tabs.  The instances of Jx.Tab that are to be managed as a set have to be added to both a TabSet and a Jx.Toolbar.  The content areas of the Jx.Tabs are sized to fit the content area that the TabSet is managing.

Example

var tabBar = new Jx.Toolbar('tabBar');
var tabSet = new Jx.TabSet('tabArea');

var tab1 = new Jx.Tab('tab 1', {contentID: 'content1'});
var tab2 = new Jx.Tab('tab 2', {contentID: 'content2'});
var tab3 = new Jx.Tab('tab 3', {contentID: 'content3'});
var tab4 = new Jx.Tab('tab 4', {contentURL: 'test_content.html'});

tabSet.add(t1, t2, t3, t4);
tabBar.add(t1, t2, t3, t4);

Events

tabChangethe current tab has changed

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
tabs{Array} array of tabs that are managed by this tab set
domObj{HTMLElement} The HTML element that represents this tab set in the DOM.
Functions
resizeTabBoxResize the tab set content area and propogate the changes to each of the tabs managed by the tab set.
addAdd one or more Jx.Tabs to the TabSet.
removeRemove a tab from this TabSet.
setActiveTabSet the active tab to the one passed to this method

Properties

tabs

{Array} array of tabs that are managed by this tab set

domObj

{HTMLElement} The HTML element that represents this tab set in the DOM.  The content areas of each tab are sized to fill the domObj.

Functions

resizeTabBox

resizeTabBox: function()

Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set.

add

add: function()

Add one or more Jx.Tabs to the TabSet.

Parameters

tab{Jx.Tab} an instance of Jx.Tab to add to the tab set.  More than one tab can be added by passing extra parameters to this method.

remove

remove: function(tab)

Remove a tab from this TabSet.  Note that it is the caller’s responsibility to remove the tab from the Jx.Toolbar.

Parameters

tab{Jx.Tab} the tab to remove.

setActiveTab

setActiveTab: function(tab)

Set the active tab to the one passed to this method

Parameters

tab{Jx.Tab} the tab to make active.

Jx.TabBox

Extends: Jx.Widget

A convenience class to handle the common case of a single toolbar directly attached to the content area of the tabs.  It manages both a Jx.Toolbar and a Jx.TabSet so that you don’t have to.  If you are using a TabBox, then tabs only have to be added to the TabBox rather than to both a Jx.TabSet and a Jx.Toolbar.

Example

var tabBox = new Jx.TabBox('subTabArea', 'top');

var tab1 = new Jx.Button.Tab('Tab 1', {contentID: 'content4'});
var tab2 = new Jx.Button.Tab('Tab 2', {contentID: 'content5'});

tabBox.add(tab1, tab2);

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
tabBar{Jx.Toolbar} the toolbar for this tab box.
tabSet{Jx.TabSet} the tab set for this tab box.
Functions
addAdd one or more Jx.Tabs to the TabBox.
removeRemove a tab from the TabSet.

Properties

tabBar

{Jx.Toolbar} the toolbar for this tab box.

tabSet

{Jx.TabSet} the tab set for this tab box.

Functions

add

add : function()

Add one or more Jx.Tabs to the TabBox.

Parameters

tab{Jx.Tab} an instance of Jx.Tab to add to the tab box.  More than one tab can be added by passing extra parameters to this method.  Unlike Jx.TabSet, tabs do not have to be added to a separate Jx.Toolbar.

remove

remove : function(tab)

Remove a tab from the TabSet.

Parameters

tab{Jx.Tab} the tab to remove.

Jx.Toolbar.Separator

Extends: Jx.Object

A helper class that represents a visual separator in a Jx.Toolbar

Example

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Jx.Tree

Jx.Tree displays hierarchical data in a tree structure of folders and nodes.

Example

Extends: Jx.Widget

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
ownsSelection{Boolean} indicates if this object created the Jx.Selection object or not.
list{Jx.List} the list object is used to manage the DOM elements of the items added to the tree.
Functions
cleanupClean up a Jx.Tree instance
updateUpdate the CSS of the Tree’s DOM element in case it has changed position

Properties

ownsSelection

{Boolean} indicates if this object created the Jx.Selection object or not.  If true then the selection object will be destroyed when the tree is destroyed, otherwise the selection object will not be destroyed.

list

{Jx.List} the list object is used to manage the DOM elements of the items added to the tree.

Functions

cleanup

cleanup: function()

Clean up a Jx.Tree instance

update

update: function(shouldDescend,
isLast)

Update the CSS of the Tree’s DOM element in case it has changed position

Parameters

shouldDescend{Boolean} propagate changes to child nodes?

Jx.TreeItem

Extends: Jx.Widget

An item in a tree.  An item is a leaf node that has no children.

Jx.TreeItem supports selection via the click event.  The application is responsible for changing the style of the selected item in the tree and for tracking selection if that is important.

Example

Events

clicktriggered when the tree item is clicked

Implements

EventsMooTools Class.Extras
OptionsMooTools Class.Extras

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
domObj{HTMLElement} a reference to the HTML element that is the TreeItem in the DOM
owner{Object} the folder or tree that this item belongs to
Functions
finalizeClean up the TreeItem and remove all DOM references
finalizeItemClean up the TreeItem and remove all DOM references
updateUpdate the CSS of the TreeItem’s DOM element in case it has changed position
selectSelect a tree node.
getLabelGet the label associated with a TreeItem
setLabelset the label of a tree item
propertyChangedA property of an object has changed, synchronize the state of the TreeItem with the state of the object

Properties

domObj

{HTMLElement} a reference to the HTML element that is the TreeItem in the DOM

owner

{Object} the folder or tree that this item belongs to

Functions

finalize

finalize: function()

Clean up the TreeItem and remove all DOM references

finalizeItem

Clean up the TreeItem and remove all DOM references

update

update : function(isLast)

Update the CSS of the TreeItem’s DOM element in case it has changed position

Parameters

isLast{Boolean} is the item the last one or not?

select

select: function()

Select a tree node.

getLabel

getLabel: function()

Get the label associated with a TreeItem

Returns

{String} the name

setLabel

setLabel: function(label)

set the label of a tree item

propertyChanged

propertyChanged : function(obj)

A property of an object has changed, synchronize the state of the TreeItem with the state of the object

Parameters

obj{Object} the object whose state has changed

Jx.TreeFolder

A Jx.TreeFolder is an item in a tree that can contain other items.  It is expandable and collapsible.

Example

Extends

Jx.TreeItem

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Properties
tree{Jx.Tree} a Jx.Tree instance for managing the folder contents
Functions
updateUpdate the CSS of the TreeFolder’s DOM element in case it has changed position.
setSelectionsets the Jx.Selection object to be used by this folder.

Properties

tree

{Jx.Tree} a Jx.Tree instance for managing the folder contents

Functions

update

update: function(shouldDescend,
isLast)

Update the CSS of the TreeFolder’s DOM element in case it has changed position.

Parameters

shouldDescend{Boolean} propagate changes to child nodes?
isLast{Boolean} is this the last item in the list?

Returns

{Jx.TreeFolder} a reference to this for chaining

setSelection

setSelection: function(selection)

sets the Jx.Selection object to be used by this folder.  Used to propogate a single selection object throughout a tree.

Parameters

selection{Jx.Selection} the new selection object to use

Returns

{Jx.TreeFolder} a reference to this for chaining

Jx.Slider

This class wraps the mootools-more slider class to make it more Jx friendly

Copyright 2009 by Jonathan Bomgardner License: MIT-style

Summary
Functions
changeCalled when the slider moves
completeCalled when the slider stops moving and the mouse button is released.

Functions

change

change: function (step)

Called when the slider moves

complete

complete: function (step)

Called when the slider stops moving and the mouse button is released.

Jx.Notice

Extends: Jx.ListItem

Events

MooTools.lang Keys

  • notice.closeTip

License

Copyright © 2009, DM Solutions Group.

This file is licensed under an MIT style license

Functions

render

render: function ()

Jx.Notice.Information

A Jx.Notice subclass useful for displaying informational messages

Jx.Notice.Success

A Jx.Notice subclass useful for displaying success messages

Jx.Notice.Success

A Jx.Notice subclass useful for displaying warning messages

Jx.Notice.Error

A Jx.Notice subclass useful for displaying error messages

Jx.Notifier

Extends: Jx.ListView

Events

License

Copyright © 2009, DM Solutions Group.

This file is licensed under an MIT style license

Summary
Functions
renderrender the widget

Functions

render

render: function ()

render the widget

Jx.Notifier.Float

A floating notice area for displaying notices, notices get chrome if the notifier has chrome

Extends: Jx.Notifier

Events

License

Copyright © 2009, DM Solutions Group.

This file is licensed under an MIT style license

Summary
Functions
renderrender the widget

Functions

render

render: function ()

render the widget

Jx.Scrollbar

Creates a custom scrollbar either vertically or horizontally (determined by options).  These scrollbars are designed to be styled entirely through CSS.

Copyright 2009 by Jonathan Bomgardner License: MIT-style

Based in part on ‘Mootools CSS Styled Scrollbar’ on http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/

Summary
Functions
renderrender the widget
scrollItscroll the content in response to the slider being moved.

Functions

render

render: function ()

render the widget

scrollIt

scrollIt: function (step)

scroll the content in response to the slider being moved.

Jx.Formatter

Extends: Jx.Object

Base class used for specific implementations to coerce data into specific formats

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Formatter.Number

Extends: Jx.Formatter

This class formats numbers.  You can have it do the following

  • replace the decimal separator
  • use/add a thousands separator
  • change the precision (number of decimal places)
  • format negative numbers with parenthesis

Example

MooTools.lang Keys

  • ’formatter.number’.decimalSeparator
  • ’formatter.number’.thousandsSeparator

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Formatter.Currency

Extends: Jx.Formatter.Number

This class formats numbers as US currency.  It actually runs the value through Jx.Formatter.Number first and then updates the returned value as currency.

Example

MooTools.lang Keys

  • ’formatter.currency’.sign

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Formatter.Date

Extends: Jx.Formatter

This class formats dates using the mootools-more’s Date extensions.  See the -more docs for details of supported formats for parsing and formatting.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Formatter.URI

Extends: Jx.Formatter

This class formats URIs using the mootools-more’s URI extensions.  See the -more docs for details of supported formats for parsing and formatting.

@url http://mootools.net/docs/more/Native/URI

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Formatter.Boolean

Extends: Jx.Formatter

This class formats boolean values.  You supply the text values for true and false in the options.

Example

MooTools.lang Keys

  • ’formatter.boolean’.true
  • ’formatter.boolean’.false

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Formatter.Phone

Extends: Jx.Formatter

Formats data as phone numbers.  Currently only US-style phone numbers are supported.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Formatter.Text

Extends: Jx.Formatter

This class formats strings by limiting them to a maximum length and replacing the remainder with an ellipsis.

Example

License

Copyright © 2010, Hughes Gauthier.

This file is licensed under an MIT style license

Jx.Field.Check

Extends: Jx.Field

This class represents a radio input field.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
typeThe type of this field

Properties

type

The type of this field

Jx.Field.Radio

Extends: Jx.Field

This class represents a radio input field.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
typeWhat kind of field this is
Functions
resetSets the field back to the value passed in the original options

Properties

type

What kind of field this is

Functions

reset

reset: function ()

Sets the field back to the value passed in the original options

Jx.Field.Select

Extends: Jx.Field

This class represents a form select field.

These fields are rendered as below.

<div id='' class=''>
   <label for=''>A label for the field</label>
   <select id='' name=''>
     <option value='' selected=''>text</option>
   </select>
</div>

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
typeIndictes this type of field.
Functions
addOptionadd an option to the select list
removeOptionremoves an option from the select list
setValueSets the value property of the field
getValueReturns the current value of the field.

Properties

type

Indictes this type of field.

Functions

addOption

addOption: function (item,
position)

add an option to the select list

Parameters

itemThe option to add.
position (optional)an integer index or the string ‘top’.
  • default is to add at the bottom.

removeOption

removeOption: function (item)

removes an option from the select list

Parameters

itemThe option to remove.

setValue

setValue: function (v)

Sets the value property of the field

Parameters

vThe value to set the field to.

getValue

getValue: function ()

Returns the current value of the field.

Jx.Field.Textarea

Extends: Jx.Field

This class represents a textarea field.

These fields are rendered as below.

<div id='' class=''>
   <label for=''>A label for the field</label>
   <textarea id='' name='' rows='' cols=''>
     value/ext
   </textarea>
</div>

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Summary
Properties
typeThe type of field this is.
errorClassThe class applied to error elements

Properties

type

The type of field this is.

errorClass

The class applied to error elements

Jx.Field.Button

Extends: Jx.Field

This class represents a button.

Example

License

Copyright © 2009, DM Solutions Group

This file is licensed under an MIT style license

Summary
Properties
typeThe type of this field

Properties

type

The type of this field

Jx.Field.Combo

Extends: Jx.Field

Example

Events

change -

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Summary
Functions
valueChangedinvoked when the current value is changed
onKeyPressHandle the user pressing a key by looking for an ENTER key to set the value.
addadd a new item to the pick list
removeRemove the item at the given index.

Functions

valueChanged

valueChanged: function()

invoked when the current value is changed

onKeyPress

onKeyPress: function(e)

Handle the user pressing a key by looking for an ENTER key to set the value.

Parameters

e{Event} the keypress event

add

add: function()

add a new item to the pick list

Parameters

options{Object} object with properties suitable to be passed to a <Jx.Menu.Item.Options> object.  More than one options object can be passed, comma separated or in an array.

remove

remove: function(idx)

Remove the item at the given index.  Not implemented.

Parameters

idx{Mixed} the item to remove by reference or by index.

Jx.Field.Password

Extends: Jx.Field.Text

This class represents a password input field.

Example

License

Copyright © 2009, Jon Bomgardner.

This file is licensed under an MIT style license

Jx.Field.Color

Extends: Jx.Field

This class provides a Jx.Field.Text in combination with a Jx.Button.Color to have a Colorpicker with an input field.

License

Copyright © 2010, Paul Spener, Fred Warnock, Conrad Barthelmes

This file is licensed under an MIT style license

Summary
Functions
onKeyUplistens to the keyup event and validates the input for a hex color

Functions

onKeyUp

onKeyUp : function(ev)

listens to the keyup event and validates the input for a hex color

function $jx(id)
dereferences a DOM Element to a JxLib object if possible and returns a reference to the object, or null if not defined.
Jx.loadNextImg = function()
An internal method actually populate the DOM element with the image source.
initPlugins: function ()
internal function to initialize plugins on object creation
cleanup: function ()
to be implemented by subclasses to do the actual work of destroying an object.
generateId: function(prefix)
Used to generate a unique ID for Jx Objects.
init: function()
sets up the base widget code and runs the render function.
makeChrome: function(element)
create chrome on an element.
cleanup: function()
destroy the widget and clean up any potential memory leaks
render: function()
render the widget, internal function called by the framework.
processElements: function(template,
classes)
process the template of the widget and populate the elements hash with any objects.
checkRequest: function()
Is fired after a delay to check the request to make sure it’s not failing in AIR.
init: function()
internal method to initialize this object
cleanup: function()
destroy the list and release anything it references
setZIndex: function(obj,
idx)
set the z-index of an element based on its position in the stack
Base class for all other object in the JxLib framework.
processData: function (data)
This method takes the data passed in and puts it into the form the record needs it in.
resolveCol : function (col)
Determines which column is being asked for and returns it.
init: function ()
initialize the store, should be called by sub-classes
cleanup: function ()
avoid memory leaks when a store is destroyed, should be called by sub-classes if overridden
startTimer : function ()
Saves the starting time of the sort
stopTimer : function ()
Determines the time the sort took.
Base class for all of the sorting algorithm classes.
mergeSort : function (arr)
Does the physical sorting.
merge : function (left,
right)
Does the work of merging to arrays in order.
heapify : function (count)
Puts the data in Max-heap order
siftDown : function (start,
end)
quicksort : function (left,
right)
Initiates the sorting.
partition : function (left,
right)
findMedianOfMedians : function (left,
right)
Parameters: l eft - the left hand, or lower, bound of the sort right - the right hand, or upper, bound of the sort
findMedianIndex : function (left,
right,
shift)
sort : function ()
Actually runs the sort on the data
Extends: Jx.Object
handleResponse: function (response)
Called as an event handler for a returning request.
run: function (record,
options,
method)
called by update, delete, and insert methods that actually does the work of kicking off the request.
init: function ()
initialize the strategy, should be called by subclasses
Extends: Jx.Object
init: function ()
initialize this strategy
loadStore: function (resp)
Called as the event handler for the protocol’s dataLoaded event.
parseMetaData: function (meta)
Takes the meta property of the response object and puts the data where it belongs.
init: function ()
initialize this strategy
loadStore: function (resp)
Used to assist in the loading of data into the store.
loadData: function (data)
This method does the actual work of loading data to the store.
parseMetaData: function (meta)
Takes the metadata returned from the protocol and places it in the appropriate Vplaces.
expirePage: function (page)
Is called when a pages cache timer expires.
Extends: Jx.Store.Strategy
init: function ()
initialize this strategy
loadStore: function (resp)
Used to assist in the loading of data into the store.
loadData: function (data)
This method does the actual work of loading data to the store.
init: function ()
initialize this strategy
onComplete: function (response)
Handles processing of the response(s) from the protocol.
init: function ()
initialize this strategy
subSort : function (data,
groupByCol,
sortByCol)
Does the actual group sorting.
doSort : function (col,
sort,
data,
ret,
options)
Called to change the sorting of the data
resolveCol: function (col)
resolves the given column identifier and resolves it to the actual column object in the store.
Extends: Jx.Object
Base class for all widgets (visual classes) in the JxLib Framework.
render: function()
create a new button.
Extends: Jx.Widget
render: function()
construct a new instance of a flyout button.
clickHandler: function(e)
hide flyout if the user clicks outside of the flyout
keypressHandler: function(e)
hide flyout if the user presses the ESC key
render: function()
initialize a new instance of Jx.ColorPalette
swatchOver: function(e)
handle the mouse moving over a colour swatch by updating the preview
swatchClick: function(e)
handle mouse click on a swatch by updating the color and hiding the panel.
changed: function()
handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.
alphaChanged: function()
handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).
updateSelected: function()
update the colour panel user interface based on the current colour and alpha values
Extends: Jx.Button
render: function()
creates a new color button.
changed: function(panel)
handle the color changing in the palette by updating the preview swatch in the button and firing the change event.
updateSwatch: function()
Update the swatch color for the current color
Manage a list of DOM elements and provide an API and events for managing those items within a container.
deactivate: function()
Deactivate the menu by hiding it.
onMouseLeave: function(e)
Handle the user moving the mouse off this button or menu by starting the hide process if so configured.
eventInMenu: function(e)
determine if an event happened inside this menu or a sub menu of this menu.
Extends: Jx.Widget
setOwner: function(obj)
Set the owner of this menu item
hide: function()
Hide the menu item.
clicked: function(obj)
Handle the user clicking on the menu item, overriding the Jx.Button::clicked method to facilitate menu tracking
buttonChanged: function(button)
Handle selection changing on the buttons themselves and activate the appropriate button in response.
render: function()
construct a new instance of Jx.Button.Multi.
setButton: function(button)
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
windowResize: function()
when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized
resize: function(options)
resize the element controlled by this Jx.Layout object.
addTo: function(parent)
add this toolbar to a DOM element automatically creating a toolbar container if necessary
add: function( )
Add an item to the toolbar.
remove: function(item)
remove an item from a toolbar.
deactivate: function()
Deactivate the Toolbar (when it is acting as a menu bar).
isActive: function()
Indicate if the toolbar is currently active (as a menu bar)
setActive: function(b)
Set the active state of the toolbar (for menus)
setVisibleItem: function(obj)
For menus, they want to know which menu is currently open.
update: function ()
Updates the size of the UL so that the size is always consistently the exact size of the size of the sum of the buttons.
findFirstVisible: function()
Finds the first visible button on the toolbar and saves a reference in the scroller object
scroll: function(direction)
Does the work of scrolling the toolbar to a specific position.
afterTweenRight: function(currentButton)
Updates pointers to buttons after the toolbar scrolls right
afterTweenLeft: function(previousButton)
Updates pointers to buttons after the toolbar scrolls left
getPreviousButton: function(currentButton)
Finds the button to the left of the first visible button
getNextButton: function(currentButton)
Finds the button to the right of the first visible button
layoutContent: function()
the sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area.
Extends: Jx.Object
setLabel: function(s)
Set the label in the title bar of this panel
getLabel: function()
Get the label of the title bar of this panel
finalize: function()
Clean up the panel
maximize: function()
Maximize this panel
setContent : function (html)
set the content of this panel to some HTML
setContentURL : function (url)
Set the content of this panel to come from some URL.
panelContentLoaded: function(html)
When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns.
toggleCollapse: function(state)
sets or toggles the collapsed state of the panel.
close: function()
Closes the panel (completely hiding it).
Extends: Jx.Widget
resize: function(width,
height,
autoPosition)
resize the dialog.
sizeChanged: function()
overload panel’s sizeChanged method
toggleCollapse: function(state)
sets or toggles the collapsed state of the panel.
maximize: function ()
Called when the maximize button of a dialog is clicked.
show : function( )
show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.
open: function()
open the dialog.
hide : function()
hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.
close: function()
close the dialog and trigger the onClose callback function if necessary
openURL: function(url)
open the dialog and load content from the provided url.
setDragLimit : function(reference)
calculates the drag-dimensions of an given element to drag
prepareElement: function()
Prepare a new, empty element to go into a split area.
prepareBar: function()
Prepare a new, empty bar to go into between split areas.
establishConstraints: function()
Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area.
dragHorizontal: function(obj)
In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar.
dragVertical: function(obj)
In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar.
sizeChanged: function()
handle the size of the container being changed.
horizontalResize: function()
Resize a horizontally layed-out container
verticalResize: function()
Resize a vertically layed out container.
maximizePanel: function(panel)
Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values)
Extends: Jx.Panel
render: function ()
constructs the dialog.
onOk: function ()
Called when the OK button is clicked.
onClick: function (value)
called when any button is clicked.
render : function ()
Creates the tooltip
enter : function (event)
Method run when the cursor passes over an element with a tip
leave : function (event)
Executed when the mouse moves out of an element with a tip
move : function (event)
Called when the mouse moves over an element with a tip.
position : function (event)
Called to position the tooltip.
isValid : function (evt)
Determines if the form passes validation
Extends: Jx.Widget
onClick: function (value)
Called when the OK button is clicked.
draw: function ()
begins the process of creating the items
createItem: function ()
Actually does the work of getting the data from the store and creating a single item based on the provided template
parseTemplate: function (template)
parses the provided template to determine which store columns are required to complete it.
enterItem: function(item,
list)
Fires mouseenter event
leaveItem: function(item,
list)
Fires mouseleave event
selectItem: function(item,
list)
Fires select event
unselectItem: function(item,
list)
Fires unselect event
addItem: function(item,
list)
Fires add event
removeItem: function(item,
list)
Fires remove event
createList: function(container,
options)
Creates the list object
Extends: Jx.Panel
draw: function ()
actually does the work of creating the view
createList: function(container,
options,
manager)
Creates the list object
copyValue: function ()
Called when the value in the actual file input changes and when the mouse moves out of it to copy the value into the “fake” text box.
mouseEnter: function ()
Called when the mouse enters the actual file input to make the fake button highlight.
mouseLeave: function ()
called when the mouse leaves the actual file input to turn off the highlight of the fake button.
submitUpload: function (data)
Called either after upload() or as a result of a successful call to get a progress ID.
pollUpload: function ()
polls the server for upload progress information
processProgress: function (data)
process the data returned from the request
uploadFailure: function (xhr)
called if there is a problem getting progress on the upload
processIFrameUpload: function ()
Called if we are not using progress and the IFrame finished loading the server response.
uploadCleanUp: function ()
Cleans up the hidden form and IFrame after a completed upload.
render: function ()
Sets up the upload panel.
moveToQueue: function (filename)
Called by Jx.Field.File’s fileSelected event.
upload: function ()
Called when the user clicks the upload button.
fileUploadComplete: function (data,
file)
Called when a single file is uploaded completely .
fileUploadError: function (data,
filename)
Called when there is an error uploading a file.
removeUploadedFile: function (filename)
Removes the passed file from the upload queue upon it’s completion.
fileUploadProgress: function (data,
file)
Function to pass progress information to the progressbar instance in the file.
Extends: Jx.Widget
measure : function (text,
klass,
rowHeader,
row)
This method does the dirty work of actually measuring a cell
buildTemplates: function()
create the row template based on the current columns
getRow: function(tr,
record)
create a single row in the grid for a single record and populate the DOM elements for it.
createRules: function(styleSheet,
scope)
create CSS rules for the current grid object
getRowHeaderCell : function (text)
creates the TH for the row’s header
calculateHeights : function ()
Extends: Jx.Object
scroll : function ()
handle the grid scrolling by updating the position of the headers
drawStore: function()
clears the grid and redraws the store.
drawRow: function(record,
index,
position)
this method does the heavy lifting of drawing a single record into the grid
clickColumnHeader: function(e)
handle clicks on the column header
moveColumnHeader: function(e)
handle the mouse moving over the column header
clickRowHeader: function(e)
handle clicks on the row header
moveRowHeader: function(e)
handle the mouse moving over the row header
clickCell: function(e)
handle clicks on cells in the grid
dblclickCell: function(e)
handle doubleclicks on cells in the grid
moveCell: function(e)
handle the mouse moving over cells in the grid
leaveGrid: function(e)
handle the mouse leaving the grid
changeText : function(lang)
rerender the grid when the language changes
addEvent: function(name,
fn)
override default addEvent to also trigger wanting the event which will then cause the underlying events to be registered
Extend: Jx.Object
render: function()
required for the renderer interface
toElement: function()
required for the Renderer interface
updateCheckColumn: function(index,
record)
check to see if a row needs to have its checkbox updated after its been drawn
afterGridRender: function ()
onCellClick: function(cell)
dispatch clicking on a table cell
select : function (cell)
dispatches the grid click to the various selection methods
selectCell: function(cell)
select a cell
selectRow: function (row,
silently)
Select a row and apply the jxGridRowSelected style to it.
setCheckField: function (row,
checked)
selectRowHeader: function (row)
Apply the jxGridRowHeaderSelected style to the row header cell of a selected row.
selectColumn: function (col)
Select a column.
selectColumnHeader: function (col)
Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column.
checkSelection: function (event)
Checks whether a row’s check box is/isn’t checked and modifies the selection appropriately.
checkAll: function ()
Checks all checkboxes in the column the selector inserted.
lighton : function (cell)
lightoff : function (cell)
light: function (cell,
on)
dispatches the event to the various prelight methods.
prelightRowHeader : function (row,
on)
apply the jxGridRowHeaderPrelight style to the header cell of a row.
prelightColumnHeader : function (col,
on)
apply the jxGridColumnHeaderPrelight style to the header cell of a column.
prelightRow : function (row,
on)
apply the jxGridRowPrelight style to row.
prelightColumn : function (col,
on)
apply the jxGridColumnPrelight style to a column.
prelightCell : function (cell,
on)
apply the jxGridCellPrelight style to a cell.
modifyHeaders: function()
sort: function(el)
called when a grid header is clicked.
removeHandles: function()
clean up any handles we created
createHandles: function()
create handles that let the user drag to resize columns and rows
onCellClick: function(cell)
dispatch clicking on a table cell
activate: function(cell)
activates the input field or breaks up if conditions are not fulfilled
setStyles : function(cell)
sets some styles for the Jx.Field elements...
showPopUp : function(cell)
Shows the PopUp of of the editor if it already exists, otherwise calls Method this.createPopUp
createPopUp : function(cell)
creates the popup for the requested cell.
setPopUpStylesAfterRendering: function()
setPopUpButtons : function()
creates the PopUp Buttons if enabled in options or deletes them if set to false
unsetActiveField: function()
resets the activeField and hides the popup
unsetPopUp : function()
resets the popup manually to be able to use it with different settings
cellValueIncrement : function(bool)
Whether increments or decrements the value of the active cell if the dataType is numeric
cellIsInGrid: function(row,
index)
determins if the given coordinates are within the grid
addFormatterUriClickListener : function()
looks up for Jx.Formatter.Uri columns to disable the link and open the inline editor instead when CTRL is NOT pressed.
init: function ()
sets up the slide
handleClick: function ()
event handler for clicks on the trigger.
setDisplay: function ()
called at the end of the animation to set the target’s width or height as well as other css values to the appropriate values
setHeaders: function ()
Called after the dataview is rendered.
onSlideIn: function (header)
Called when a group opens.
onSlideOut: function (header)
Called when a group closes.
validate: function ()
Method that actually does the work of validating the fields in the form.
fieldFailed: function (field,
validator)
Refires the fieldValidationFailed event from the field validators it contains
fieldPassed: function (field,
validator)
Refires the fieldValidationPassed event from the field validators it contains
A Jx.TreeFolder is an item in a tree that can contain other items.
checkFolder: function (folder)
Called by the disclose event of the tree to determine if we need to request additional items for a branch of the tree.
show : function(e)
Show the context menu at the location of the mouse click
Extends: Jx.Menu.Item
setOwner: function(obj)
Set the ownder of this menu item
Extends: Jx.Button
setOwner: function(obj)
Set the owner of this sub menu
show: function()
Show the sub menu
hide: function()
Hide the sub menu
add: function(item,
position)
Add menu items to the sub menu.
remove: function(item)
Remove a menu item from the menu
replace: function(item,
withItem)
Replace a menu item with another menu item
deactivate: function(e)
Deactivate the sub menu
isActive: function()
Indicate if this sub menu is active
setActive: function(isActive)
Set the active state of the Jx.Menu that contains this sub menu
setVisibleItem: function(obj)
Set a sub menu of this menu to be visible and hide the previously visible one.
Extends: Jx.Object
toggleElement: function()
Snap the element open or closed.
render : function( )
Create a new instance of Jx.Tab.
resizeTabBox: function()
Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set.
add: function()
Add one or more Jx.Tabs to the TabSet.
Extends: Jx.Button
remove: function(tab)
Remove a tab from this TabSet.
setActiveTab: function(tab)
Set the active tab to the one passed to this method
Extends: Jx.Widget
Extends: Jx.Object
add : function()
Add one or more Jx.Tabs to the TabBox.
remove : function(tab)
Remove a tab from the TabSet.
Manage selection of objects.
cleanup: function()
Clean up a Jx.Tree instance
update: function(shouldDescend,
isLast)
Update the CSS of the Tree’s DOM element in case it has changed position
finalize: function()
Clean up the TreeItem and remove all DOM references
update : function(isLast)
Update the CSS of the TreeItem’s DOM element in case it has changed position
select: function()
Select a tree node.
getLabel: function()
Get the label associated with a TreeItem
setLabel: function(label)
set the label of a tree item
propertyChanged : function(obj)
A property of an object has changed, synchronize the state of the TreeItem with the state of the object
Jx.Tree displays hierarchical data in a tree structure of folders and nodes.
update: function(shouldDescend,
isLast)
Update the CSS of the TreeFolder’s DOM element in case it has changed position.
setSelection: function(selection)
sets the Jx.Selection object to be used by this folder.
change: function (step)
Called when the slider moves
complete: function (step)
Called when the slider stops moving and the mouse button is released.
Extends: Jx.Widget
render: function ()
Extends: Jx.ListItem
Extends: Jx.Widget
render: function ()
render the widget
render: function ()
render the widget
render: function ()
render the widget
scrollIt: function (step)
scroll the content in response to the slider being moved.
Extends: Jx.Object
Extends: Jx.Formatter
reset: function ()
Sets the field back to the value passed in the original options
addOption: function (item,
position)
add an option to the select list
removeOption: function (item)
removes an option from the select list
setValue: function (v)
Sets the value property of the field
getValue: function ()
Returns the current value of the field.
valueChanged: function()
invoked when the current value is changed
onKeyPress: function(e)
Handle the user pressing a key by looking for an ENTER key to set the value.
add: function()
add a new item to the pick list
remove: function(idx)
Remove the item at the given index.
Extends: Jx.Field
onKeyUp : function(ev)
listens to the keyup event and validates the input for a hex color
Extends: Jx.Button.Flyout
Extends: Jx.Widget
Extends: Jx.Object
This is the base class and namespace for all grid renderers.
Extends: Jx.Object
Extends: Jx.Widget
This class adapts a table adhering to the classic Parent-style “tree table”.
{HTMLElement} The content area that is displayed when the tab is active.
Extends: Jx.Widget
Extends: Jx.ListView
Close