jxlib. | |
Functions | |
$jx | 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. |
Functions | |
loadNextImg | An internal method actually populate the DOM element with the image source. |
Element | Element is a global object provided by the mootools library. |
Array | Extensions to the javascript array object |
Jx. | Dynamic stylesheet class. |
Jx. | Base class for all other object in the JxLib framework. |
Functions | |
Jx. | create a new instance of Jx.Object |
initPlugins | internal function to initialize plugins on object creation |
cleanup | 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 | Used to generate a unique ID for Jx Objects. |
Jx. | Base 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? |
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 | sets up the base widget code and runs the render function. |
makeChrome | create chrome on an element. |
cleanup | destroy the widget and clean up any potential memory leaks |
render | render the widget, internal function called by the framework. |
elements | a hash of elements extracted by processing the widget template |
processElements | process the template of the widget and populate the elements hash with any objects. |
checkRequest | Is fired after a delay to check the request to make sure it’s not failing in AIR. |
Jx. | Manage selection of objects. |
Properties | |
selection | {Array} an array holding the current selection |
Functions | |
Jx. | create a new instance of Jx.Selection |
Jx.List | Manage a list of DOM elements and provide an API and events for managing those items within a container. |
Functions | |
Jx.List | create a new instance of Jx.List |
init | internal method to initialize this object |
cleanup | destroy the list and release anything it references |
Jx. | Manage 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 | |
setZIndex | set the z-index of an element based on its position in the stack |
Jx. | Extends: Jx.Object |
Properties | |
data | The data for this record |
state | used to determine the state of this record. |
columns | Holds a reference to the columns for this record. |
Functions | |
processData | This method takes the data passed in and puts it into the form the record needs it in. |
resolveCol | Determines which column is being asked for and returns it. |
Jx. | Extends: Jx.Object |
Properties | |
data | Holds the data for this store |
index | Holds the current position of the store relative to the data and the pageIndex. |
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 | initialize the store, should be called by sub-classes |
cleanup | avoid memory leaks when a store is destroyed, should be called by sub-classes if overridden |
Jx. | Extends: Jx.Object |
Functions | |
_convert | Normalizes numbers relative to the separator. |
Jx.Sort | Base class for all of the sorting algorithm classes. |
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 | Saves the starting time of the sort |
stopTimer | Determines the time the sort took. |
Jx. | Extends: Jx.Sort |
Functions | |
mergeSort | Does the physical sorting. |
merge | Does the work of merging to arrays in order. |
Jx. | Extends: Jx.Sort |
Functions | |
heapify | Puts the data in Max-heap order |
siftDown | |
Jx. | Extends: Jx.Sort |
Functions | |
quicksort | Initiates the sorting. |
partition | |
findMedianOfMedians | Parameters: l eft - the left hand, or lower, bound of the sort right - the right hand, or upper, bound of the sort |
findMedianIndex | |
Jx. | Extends: Jx.Sort |
Functions | |
sort | Actually runs the sort on the data |
Jx. | Extends: Jx.Object |
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. | Extends: Jx.Object |
Jx. | Extends: Jx.Store.Protocol |
Properties | |
data | The data passed to the protocol |
Jx. | Extends: Jx.Store.Protocol |
Functions | |
handleResponse | Called as an event handler for a returning request. |
run | called by update, delete, and insert methods that actually does the work of kicking off the request. |
uniqueId | returns a unique identifier to be used with queued requests |
Jx. | Extends: Jx.Object |
Functions | |
init | initialize the strategy, should be called by subclasses |
Jx. | Extends: Jx.Store.Strategy |
Functions | |
init | initialize this strategy |
loadStore | Called as the event handler for the protocol’s dataLoaded event. |
parseMetaData | Takes the meta property of the response object and puts the data where it belongs. |
Jx. | Extends: Jx.Store.Strategy |
Properties | |
data | holds the pages of data keyed by page number. |
cacheTimer | |
page | Tracks the page the store currently holds. |
itemsPerPage | The number of items on each page |
Functions | |
init | initialize this strategy |
loadStore | Used to assist in the loading of data into the store. |
loadData | This method does the actual work of loading data to the store. |
parseMetaData | Takes the metadata returned from the protocol and places it in the appropriate Vplaces. |
expirePage | Is called when a pages cache timer expires. |
Jx. | Extends: Jx.Store.Strategy.Paginate |
Properties | |
startingPage | |
maxPages | |
loadedPages | |
loadAt | Options are ‘top’ or ‘bottom’. |
Functions | |
init | initialize this strategy |
loadStore | Used to assist in the loading of data into the store. |
loadData | This method does the actual work of loading data to the store. |
Jx. | Extends: Jx.Store.Strategy |
Properties | |
failedChanges | an array holding all failed requests |
successfulChanges | an array holding all successful requests |
totalChanges | The total number of changes being processed. |
Functions | |
init | initialize this strategy |
onComplete | Handles processing of the response(s) from the protocol. |
Jx. | Extends: Jx.Store.Strategy |
Properties | |
sorters | an object listing the different sorters available |
Functions | |
init | initialize this strategy |
subSort | Does the actual group sorting. |
doSort | Called to change the sorting of the data |
resolveCol | resolves the given column identifier and resolves it to the actual column object in the store. |
Jx. | Extends: Jx.Object |
Jx. | Extends: Jx.Store.Parser |
Jx. | Extends: Jx.Widget |
Properties | |
classes | used to auto-populate this object with element references when processing templates |
Functions | |
render | create a new button. |
Jx. | Extends: Jx.Button |
Properties | |
contentClasses | the classes array for processing the contentTemplate |
content | the HTML element that contains the flyout content |
Functions | |
render | construct a new instance of a flyout button. |
clickHandler | hide flyout if the user clicks outside of the flyout |
keypressHandler | hide flyout if the user presses the ESC key |
Jx. | Extends: Jx.Widget |
Properties | |
{HTMLElement} domObj | the HTML element representing the color panel |
Functions | |
render | initialize a new instance of Jx.ColorPalette |
swatchOver | handle the mouse moving over a colour swatch by updating the preview |
swatchClick | handle mouse click on a swatch by updating the color and hiding the panel. |
changed | handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX. |
alphaChanged | handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100). |
updateSelected | update the colour panel user interface based on the current colour and alpha values |
Jx. | Extends: Jx.Button.Flyout |
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. |
Functions | |
render | creates a new color button. |
changed | handle the color changing in the palette by updating the preview swatch in the button and firing the change event. |
updateSwatch | Update the swatch color for the current color |
Jx.Menu | Extends: 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 | |
deactivate | 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. |
onMouseLeave | Handle the user moving the mouse off this button or menu by starting the hide process if so configured. |
eventInMenu | determine if an event happened inside this menu or a sub menu of this menu. |
Jx. | Extends: Jx.Button |
Properties | |
owner | {<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item. |
Functions | |
setOwner | Set the owner of this menu item |
hide | Hide the menu item. |
show | Show the menu item |
clicked | Handle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking |
onmouseover | handle the mouse moving over the menu item |
Jx. | Extends: Jx.Object |
Properties | |
buttons | {Array} array of buttons that are managed by this button set |
Functions | |
buttonChanged | Handle selection changing on the buttons themselves and activate the appropriate button in response. |
Jx. | Extends: Jx.Button |
Properties | |
{<Jx. | 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. |
Functions | |
render | construct a new instance of Jx.Button.Multi. |
setButton | update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons. |
Jx. | Extends: Jx.Object |
Functions | |
windowResize | when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized |
resize | resize the element controlled by this Jx.Layout object. |
Jx. | Extends: 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 |
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 | add this toolbar to a DOM element automatically creating a toolbar container if necessary |
add | Add an item to the toolbar. |
remove | remove an item from a toolbar. |
deactivate | Deactivate the Toolbar (when it is acting as a menu bar). |
isActive | Indicate if the toolbar is currently active (as a menu bar) |
setActive | Set the active state of the toolbar (for menus) |
setVisibleItem | For menus, they want to know which menu is currently open. |
update | 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. |
Jx. | Extends: Jx.Widget |
Properties | |
domObj | {HTMLElement} the HTML element that the container lives in |
Functions | |
findFirstVisible | Finds the first visible button on the toolbar and saves a reference in the scroller object |
scroll | Does the work of scrolling the toolbar to a specific position. |
afterTweenRight | Updates pointers to buttons after the toolbar scrolls right |
afterTweenLeft | Updates pointers to buttons after the toolbar scrolls left |
getPreviousButton | Finds the button to the left of the first visible button |
getNextButton | Finds the button to the right of the first visible button |
Jx. | Extends: Object |
Jx. | Extends: Jx.Widget |
Functions | |
layoutContent | 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 | Set the label in the title bar of this panel |
getLabel | Get the label of the title bar of this panel |
finalize | Clean up the panel |
maximize | Maximize this panel |
setContent | set the content of this panel to some HTML |
setContentURL | Set the content of this panel to come from some URL. |
panelContentLoaded | When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns. |
toggleCollapse | sets or toggles the collapsed state of the panel. |
close | Closes the panel (completely hiding it). |
Jx. | Extends: Jx.Panel |
Functions | |
resize | resize the dialog. |
sizeChanged | overload panel’s sizeChanged method |
toggleCollapse | sets or toggles the collapsed state of the panel. |
maximize | Called when the maximize button of a dialog is clicked. |
show | show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible. |
hide | hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog. |
openURL | open the dialog and load content from the provided url. |
open | open the dialog. |
close | 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 |
setDragLimit | calculates the drag-dimensions of an given element to drag |
Jx. | Extends: 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 | |
prepareElement | Prepare a new, empty element to go into a split area. |
prepareBar | Prepare a new, empty bar to go into between split areas. |
establishConstraints | Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area. |
dragHorizontal | In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar. |
dragVertical | In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar. |
sizeChanged | handle the size of the container being changed. |
horizontalResize | Resize a horizontally layed-out container |
verticalResize | Resize a vertically layed out container. |
Jx. | Extends: 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 | |
maximizePanel | Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values) |
Jx. | Extends: Jx.Dialog |
Functions | |
render | constructs the dialog. |
onOk | Called when the OK button is clicked. |
createText | handle change in language |
Jx. | Extends: Jx.Dialog |
Functions | |
onClick | called when any button is clicked. |
Jx. | Extends: Jx.Widget |
Functions | |
render | Creates the tooltip |
enter | Method run when the cursor passes over an element with a tip |
leave | Executed when the mouse moves out of an element with a tip |
move | Called when the mouse moves over an element with a tip. |
position | Called to position the tooltip. |
Jx. | Extends: Jx.Widget |
Properties | |
legend | a holder for the legend Element |
Jx.Form | Extends: Jx.Widget |
Properties | |
defaultAction | the default field to activate if the user hits the enter key in this form. |
fields | An array of all of the single fields (not contained in a fieldset) for this form |
pluginNamespace | required variable for plugins |
Functions | |
isValid | Determines if the form passes validation |
Jx. | Extends: Jx.Widget |
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. |
Jx. | Extends: Jx.Field |
Properties | |
type | The type of this field |
Jx. | Extends: Jx.Dialog |
Functions | |
onClick | Called when the OK button is clicked. |
Jx. | Extends: Jx.Panel |
Functions | |
draw | begins the process of creating the items |
createItem | Actually does the work of getting the data from the store and creating a single item based on the provided template |
parseTemplate | parses the provided template to determine which store columns are required to complete it. |
enterItem | Fires mouseenter event |
leaveItem | Fires mouseleave event |
selectItem | Fires select event |
unselectItem | Fires unselect event |
addItem | Fires add event |
removeItem | Fires remove event |
createList | Creates the list object |
Jx. | Extends: Jx.Panel.DataView |
Functions | |
draw | actually does the work of creating the view |
createList | Creates the list object |
Jx. | Extends: Jx.Widget |
Jx. | Extends: Jx.Widget |
Jx. | Extends: Jx.Field |
Properties | |
type | The type of this field |
Jx. | Extends: Jx.Field |
Properties | |
type | The Field type used in rendering |
forms | holds all form references when we’re in multiple mode |
Functions | |
copyValue | 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 | Called when the mouse enters the actual file input to make the fake button highlight. |
mouseLeave | called when the mouse leaves the actual file input to turn off the highlight of the fake button. |
submitUpload | Called either after upload() or as a result of a successful call to get a progress ID. |
pollUpload | polls the server for upload progress information |
processProgress | process the data returned from the request |
uploadFailure | called if there is a problem getting progress on the upload |
processIFrameUpload | Called if we are not using progress and the IFrame finished loading the server response. |
uploadCleanUp | Cleans up the hidden form and IFrame after a completed upload. |
Jx. | The following just uses the defaults. |
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. | Extends: Jx.Panel |
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 | Sets up the upload panel. |
moveToQueue | Called by Jx.Field.File’s fileSelected event. |
upload | Called when the user clicks the upload button. |
fileUploadComplete | Called when a single file is uploaded completely . |
fileUploadError | Called when there is an error uploading a file. |
removeUploadedFile | Removes the passed file from the upload queue upon it’s completion. |
fileUploadProgress | Function to pass progress information to the progressbar instance in the file. |
allUploadCompleted | Called when the Jx.Field.File completes uploading all files. |
createText | handle change in language |
Jx. | Extends: Jx.Object |
Properties | |
grid | holds a reference to the grid (an instance of Jx.Grid) |
Functions | |
Jx. | initializes the column object |
measure | This method does the dirty work of actually measuring a cell |
Jx. | Extends: Jx.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. |
hasExpandable | boolean indicates whether any of the columns are expandable or not, which affects some calculations for column widths |
Functions | |
buildTemplates | create the row template based on the current columns |
getRow | create a single row in the grid for a single record and populate the DOM elements for it. |
createRules | create CSS rules for the current grid object |
Jx.Row | Extends: Jx.Object |
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 | creates the TH for the row’s header |
calculateHeights | |
Jx. | Extend: Jx.Object |
Jx. | Grid plugin namespace |
Jx.Grid | Extends: Jx.Widget |
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 | handle the grid scrolling by updating the position of the headers |
drawStore | clears the grid and redraws the store. |
drawRow | this method does the heavy lifting of drawing a single record into the grid |
clickColumnHeader | handle clicks on the column header |
moveColumnHeader | handle the mouse moving over the column header |
clickRowHeader | handle clicks on the row header |
moveRowHeader | handle the mouse moving over the row header |
clickCell | handle clicks on cells in the grid |
dblclickCell | handle doubleclicks on cells in the grid |
moveCell | handle the mouse moving over cells in the grid |
leaveGrid | handle the mouse leaving the grid |
changeText | rerender the grid when the language changes |
addEvent | override default addEvent to also trigger wanting the event which will then cause the underlying events to be registered |
Jx. | This is the base class and namespace for all grid renderers. |
Properties | |
domInsert | boolean, indicates if the renderer needs to insert a DOM element instead of just outputing some templated HTML. |
Jx. | This is the default renderer for grid cells. |
Jx. | Renders a checkbox into the cell. |
Jx. | Renders a Jx.Button into the cell. |
Jx. | Extends: Jx.Plugin |
Properties | |
selected | Holds arrays of selected rows and/or columns and their headers |
Functions | |
render | required for the renderer interface |
toElement | required for the Renderer interface |
updateCheckColumn | check to see if a row needs to have its checkbox updated after its been drawn |
afterGridRender | |
onCellClick | dispatch clicking on a table cell |
select | dispatches the grid click to the various selection methods |
selectCell | select a cell |
selectRow | Select a row and apply the jxGridRowSelected style to it. |
setCheckField | |
selectRowHeader | Apply the jxGridRowHeaderSelected style to the row header cell of a selected row. |
selectColumn | Select a column. |
selectColumnHeader | Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column. |
checkSelection | Checks whether a row’s check box is/isn’t checked and modifies the selection appropriately. |
checkAll | Checks all checkboxes in the column the selector inserted. |
Jx. | Extends: Jx.Plugin |
Functions | |
lighton | |
lightoff | |
light | dispatches the event to the various prelight methods. |
prelightRowHeader | apply the jxGridRowHeaderPrelight style to the header cell of a row. |
prelightColumnHeader | apply the jxGridColumnHeaderPrelight style to the header cell of a column. |
prelightRow | apply the jxGridRowPrelight style to row. |
prelightColumn | apply the jxGridColumnPrelight style to a column. |
prelightCell | apply the jxGridCellPrelight style to a cell. |
Jx. | Extends: Jx.Plugin |
Properties | |
current | refernce to the currently sorted column |
direction | tell us what direction the sort is in (either ‘asc’ or ‘desc’) |
Functions | |
modifyHeaders | |
sort | called when a grid header is clicked. |
Jx. | Extends: Jx.Plugin |
Properties | |
els | the DOM elements by which the rows/columns are resized. |
drags | the Drag instances |
Functions | |
removeHandles | clean up any handles we created |
createHandles | create handles that let the user drag to resize columns and rows |
createText | respond to a language change by updating the tooltip |
Jx. | Extends: Jx.Plugin |
Properties | |
activeCell | 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. |
keyboard | Instance of a Mootols Keyboard Class |
Functions | |
onCellClick | dispatch clicking on a table cell |
activate | activates the input field or breaks up if conditions are not fulfilled |
setStyles | sets some styles for the Jx.Field elements... |
showPopUp | Shows the PopUp of of the editor if it already exists, otherwise calls Method this.createPopUp |
createPopUp | creates the popup for the requested cell. |
setPopUpStylesAfterRendering | |
setPopUpButtons | creates the PopUp Buttons if enabled in options or deletes them if set to false |
unsetActiveField | resets the activeField and hides the popup |
unsetPopUp | resets the popup manually to be able to use it with different settings |
cellValueIncrement | Whether increments or decrements the value of the active cell if the dataType is numeric |
cellIsInGrid | determins if the given coordinates are within the grid |
addFormatterUriClickListener | looks up for Jx.Formatter.Uri columns to disable the link and open the inline editor instead when CTRL is NOT pressed. |
Jx. | The namespace for all dataview plugins |
Jx. | Hides and shows an element without depending on a fixed width or height |
Functions | |
init | sets up the slide |
handleClick | event handler for clicks on the trigger. |
setDisplay | 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. | Extends: Jx.Plugin |
Properties | |
headerState | Hash that holds the open/closed state of each header |
Functions | |
setHeaders | Called after the dataview is rendered. |
onSlideIn | Called when a group opens. |
onSlideOut | Called when a group closes. |
Jx. | Field plugin namespace |
Jx. | Extends: Jx.Plugin |
Properties | |
valid | tells whether this field passed validation or not. |
errors | array of errors found on this field |
Jx. | Form plugin namespace |
Jx. | Extends: Jx.Plugin |
Properties | |
errorMessagess | element holding |
Functions | |
validate | Method that actually does the work of validating the fields in the form. |
fieldFailed | Refires the fieldValidationFailed event from the field validators it contains |
fieldPassed | Refires the fieldValidationPassed event from the field validators it contains |
Jx. | Toolbar plugin namespace |
Jx. | Extends: Jx.Plugin |
Properties | |
tabs | holds all of the tabs that we’re tracking |
Jx. | Base class for all adaptor implementations. |
Properties | |
columnsNeeded | Will hold an array of the column names needed for processing the template |
Jx. | This base class is used to change a store (a flat list of records) into the data structure needed for a Jx.Tree. |
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. |
Functions | |
checkFolder | 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. |
hasParent | Virtual method to be overridden by sublcasses. |
getParentIndex | Virtual method to be overridden by sublcasses. |
Jx. | This class adapts a table adhering to the classic Parent-style “tree table”. |
Jx. | This class adapts a table adhering to the classic Parent-style “tree table”. |
Jx. | The namespace for all combo adaptors |
Jx. | Extends: Jx.Menu |
Functions | |
show | Show the context menu at the location of the mouse click |
Jx. | Extends: 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 | |
setOwner | Set the ownder of this menu item |
hide | Hide the menu item. |
show | Show the menu item |
Jx. | Extends: 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 | |
setOwner | Set the owner of this sub menu |
show | Show the sub menu |
hide | Hide the sub menu |
add | Add menu items to the sub menu. |
remove | Remove a menu item from the menu |
replace | Replace a menu item with another menu item |
deactivate | Deactivate the sub menu |
isActive | Indicate if this sub menu is active |
setActive | Set the active state of the Jx.Menu that contains this sub menu |
setVisibleItem | Set a sub menu of this menu to be visible and hide the previously visible one. |
Jx. | Extends: 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 | |
toggleElement | 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 |
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 | |
render | Create a new instance of Jx.Tab. |
Jx. | Extends: 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 | |
resizeTabBox | Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set. |
add | Add one or more Jx.Tabs to the TabSet. |
remove | Remove a tab from this TabSet. |
setActiveTab | Set the active tab to the one passed to this method |
Jx. | Extends: Jx.Widget |
Properties | |
tabBar | {Jx.Toolbar} the toolbar for this tab box. |
tabSet | {Jx.TabSet} the tab set for this tab box. |
Functions | |
add | Add one or more Jx.Tabs to the TabBox. |
remove | Remove a tab from the TabSet. |
Jx. | Extends: Jx.Object |
Jx.Tree | Jx.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 | |
cleanup | Clean up a Jx.Tree instance |
update | Update the CSS of the Tree’s DOM element in case it has changed position |
Jx. | Extends: 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 | |
finalize | Clean up the TreeItem and remove all DOM references |
finalizeItem | Clean up the TreeItem and remove all DOM references |
update | Update the CSS of the TreeItem’s DOM element in case it has changed position |
select | Select a tree node. |
getLabel | Get the label associated with a TreeItem |
setLabel | set the label of a tree item |
propertyChanged | A property of an object has changed, synchronize the state of the TreeItem with the state of the object |
Jx. | A 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 | |
update | Update the CSS of the TreeFolder’s DOM element in case it has changed position. |
setSelection | sets the Jx.Selection object to be used by this folder. |
Jx. | This class wraps the mootools-more slider class to make it more Jx friendly |
Functions | |
change | Called when the slider moves |
complete | Called when the slider stops moving and the mouse button is released. |
Jx. | Extends: Jx.ListItem |
Functions | |
render | |
Jx. | A Jx.Notice subclass useful for displaying informational messages |
Jx. | A Jx.Notice subclass useful for displaying success messages |
Jx. | A Jx.Notice subclass useful for displaying warning messages |
Jx. | A Jx.Notice subclass useful for displaying error messages |
Jx. | Extends: Jx.ListView |
Functions | |
render | render the widget |
Jx. | A floating notice area for displaying notices, notices get chrome if the notifier has chrome |
Functions | |
render | render the widget |
Jx. | Creates a custom scrollbar either vertically or horizontally (determined by options). |
Functions | |
render | render the widget |
scrollIt | scroll the content in response to the slider being moved. |
Jx. | Extends: Jx.Object |
Jx. | Extends: Jx.Formatter |
Jx. | Extends: Jx.Formatter.Number |
Jx. | Extends: Jx.Formatter |
Jx. | Extends: Jx.Formatter |
Jx. | Extends: Jx.Formatter |
Jx. | Extends: Jx.Formatter |
Jx. | Extends: Jx.Formatter |
Jx. | Extends: Jx.Field |
Properties | |
type | The type of this field |
Jx. | Extends: Jx.Field |
Properties | |
type | What kind of field this is |
Functions | |
reset | Sets the field back to the value passed in the original options |
Jx. | Extends: Jx.Field |
Properties | |
type | Indictes this type of field. |
Functions | |
addOption | add an option to the select list |
removeOption | removes an option from the select list |
setValue | Sets the value property of the field |
getValue | Returns the current value of the field. |
Jx. | Extends: Jx.Field |
Properties | |
type | The type of field this is. |
errorClass | The class applied to error elements |
Jx. | Extends: Jx.Field |
Properties | |
type | The type of this field |
Jx. | Extends: Jx.Field |
Functions | |
valueChanged | invoked when the current value is changed |
onKeyPress | Handle the user pressing a key by looking for an ENTER key to set the value. |
add | add a new item to the pick list |
remove | Remove the item at the given index. |
Jx. | Extends: Jx.Field.Text |
Jx. | Extends: Jx.Field |
Functions | |
onKeyUp | listens to the keyup event and validates the input for a hex color |
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
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Functions | |
loadNextImg | An internal method actually populate the DOM element with the image source. |
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
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
// create a rule that turns all para text red and 15px. var rule = Jx.Styles.insertCssRule("p", "color: red;", "myStyle"); rule.style.fontSize = "15px";
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
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.
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.
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.
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 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.
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 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.
preInit postInit prePluginInit postPluginInit initializeDone preDestroy postDestroy
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Functions | |
Jx. | create a new instance of Jx.Object |
initPlugins | internal function to initialize plugins on object creation |
cleanup | 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 | Used to generate a unique ID for Jx Objects. |
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 functionality provides a consistent mechanism for descendants of Jx.Widget to load content in one of four different ways:
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.
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.
Jx.Widget has several events called during it’s lifetime (in addition to the ones for its base class Jx.Object).
preRender | called before rendering begins |
postRender | called after rendering is done |
deferRender | called 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). |
contentLoaded | called after content has been loaded successfully |
contentLoadFailed | called if content can not be loaded for some reason |
addTo | called when a widget is added to another element or widget |
busy | called just before the busy mask is rendered/removed |
widget.busyMessage | sets the message of the waiter component when used |
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? |
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 | sets up the base widget code and runs the render function. |
makeChrome | create chrome on an element. |
cleanup | destroy the widget and clean up any potential memory leaks |
render | render the widget, internal function called by the framework. |
elements | a hash of elements extracted by processing the widget template |
processElements | process the template of the widget and populate the elements hash with any objects. |
checkRequest | Is fired after a delay to check the request to make sure it’s not failing in AIR. |
Manage selection of objects.
var selection = new Jx.Selection();
select | fired when an item is added to the selection. This event may be changed by passing the eventToFire option when creating the selection object. |
unselect | fired when an item is removed from the selection. This event may be changed by passing the eventToFire option when creating the selection object. |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
selection | {Array} an array holding the current selection |
Functions | |
Jx. | create a new instance of Jx.Selection |
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.
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'}));
add | fired when an item is added |
remove | fired when an item is removed |
mouseenter | fired when the user mouses over an element |
mouseleave | fired when the user mouses out of an element |
select | fired when an item is selected |
unselect | fired when an item is selected |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
create a new instance of Jx.List
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. |
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
data | The data for this record |
state | used to determine the state of this record. |
columns | Holds a reference to the columns for this record. |
Functions | |
processData | This method takes the data passed in and puts it into the form the record needs it in. |
resolveCol | Determines which column is being asked for and returns it. |
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.
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.
data | the data to process |
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
data | Holds the data for this store |
index | Holds the current position of the store relative to the data and the pageIndex. |
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 | initialize the store, should be called by sub-classes |
cleanup | avoid memory leaks when a store is destroyed, should be called by sub-classes if overridden |
Extends: Jx.Object
Class that holds functions for doing comparison operations. This class requires the mootools-more Date() extensions.
Each function that does a comparison returns
0 | if equal. |
1 | if the first value is greater that the second. |
-1 | if the first value is less than the second. |
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Base class for all of the sorting algorithm classes.
Extends: Jx.Object
onStart() | called when the sort starts |
onEnd() | called when the sort stops |
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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 | Saves the starting time of the sort |
stopTimer | Determines the time the sort took. |
Extends: Jx.Sort
Implementation of a quicksort algorithm designed to work on Jx.Store data.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Functions | |
quicksort | Initiates the sorting. |
partition | |
findMedianOfMedians | Parameters: l eft - the left hand, or lower, bound of the sort right - the right hand, or upper, bound of the sort |
findMedianIndex |
Extends: Jx.Object
This class is used by the protocol to send information back to the calling strategy (or other caller).
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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. |
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Extends: Jx.Store.Protocol
Based on the Protocol base class, the local protocol uses data that it is handed upon instantiation to process requests.
data | The data to use |
options | any options for the base protocol class |
Copyright © 2009, Jon Bomgardner. inspired by the openlayers.org implementation of a similar system
This file is licensed under an MIT style license
Properties | |
data | The data passed to the protocol |
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Functions | |
handleResponse | Called as an event handler for a returning request. |
run | called by update, delete, and insert methods that actually does the work of kicking off the request. |
uniqueId | returns a unique identifier to be used with queued requests |
Extends: Jx.Store.Strategy
This is a strategy for loading all of the data from a source at one time.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Functions | |
init | initialize this strategy |
loadStore | Called as the event handler for the protocol’s dataLoaded event. |
parseMetaData | Takes the meta property of the response object and puts the data where it belongs. |
Extends: Jx.Store.Strategy
Store strategy for paginating results in a store.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
data | holds the pages of data keyed by page number. |
cacheTimer | |
page | Tracks the page the store currently holds. |
itemsPerPage | The number of items on each page |
Functions | |
init | initialize this strategy |
loadStore | Used to assist in the loading of data into the store. |
loadData | This method does the actual work of loading data to the store. |
parseMetaData | Takes the metadata returned from the protocol and places it in the appropriate Vplaces. |
expirePage | Is called when a pages cache timer expires. |
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.
Copyright © 2010, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
startingPage | |
maxPages | |
loadedPages | |
loadAt | Options are ‘top’ or ‘bottom’. |
Functions | |
init | initialize this strategy |
loadStore | Used to assist in the loading of data into the store. |
loadData | This method does the actual work of loading data to the store. |
Extends: Jx.Store.Strategy
A Store strategy class for saving data via protocols
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
failedChanges | an array holding all failed requests |
successfulChanges | an array holding all successful requests |
totalChanges | The total number of changes being processed. |
Functions | |
init | initialize this strategy |
onComplete | Handles processing of the response(s) from the protocol. |
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.
response | the response returned from the protocol |
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
sorters | an object listing the different sorters available |
Functions | |
init | initialize this strategy |
subSort | Does the actual group sorting. |
doSort | Called to change the sorting of the data |
resolveCol | resolves the given column identifier and resolves it to the actual column object in the store. |
doSort : function ( col, sort, data, ret, options )
Called to change the sorting of the data
col | the column to sort by |
sort | the kind of sort to use (see list above) |
data | the data to sort (leave blank or pass null to sort data existing in the store) |
ret | flag that tells the function whether to pass back the sorted data or store it in the store |
options | any options needed to pass to the sorter upon creation |
returns: nothing or the data depending on the value of ret parameter.
Extends: Jx.Object
Base class for all parsers
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Extends: Jx.Store.Parser
A Parser that handles encoding and decoding JSON strings
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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.
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'); }
click | the button was pressed and released (only if type is not ‘toggle’). |
down | the button is down (only if type is ‘toggle’) |
up | the button is up (only if the type is ‘toggle’). |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
classes | used to auto-populate this object with element references when processing templates |
Functions | |
render | create a new button. |
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.
var flyout = new Jx.Button.Flyout({ label: 'flyout', content: 'flyoutContent', onOpen: function(flyout) { console.log('flyout opened'); }, onClose: function(flyout) { console.log('flyout closed'); } });
open | this event is triggered when the flyout is opened. |
close | this event is triggered when the flyout is closed. |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
contentClasses | the classes array for processing the contentTemplate |
content | the HTML element that contains the flyout content |
Functions | |
render | construct a new instance of a flyout button. |
clickHandler | hide flyout if the user clicks outside of the flyout |
keypressHandler | hide flyout if the user presses the ESC key |
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.
change | triggered when the color changes. |
click | the user clicked on a color swatch (emitted after a change event) |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
{HTMLElement} domObj | the HTML element representing the color panel |
Functions | |
render | initialize a new instance of Jx.ColorPalette |
swatchOver | handle the mouse moving over a colour swatch by updating the preview |
swatchClick | handle mouse click on a swatch by updating the color and hiding the panel. |
changed | handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX. |
alphaChanged | handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100). |
updateSelected | update the colour panel user interface based on the current colour and alpha values |
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.
var colorButton = new Jx.Button.Color({ onChange: function(button) { console.log('color:' + button.options.color + ' alpha: ' + button.options.alpha); } });
change | fired when the color is changed. |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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. |
Functions | |
render | creates a new color button. |
changed | handle the color changing in the palette by updating the preview swatch in the button and firing the change event. |
updateSwatch | Update the swatch color for the current color |
changed: function( panel )
handle the color changing in the palette by updating the preview swatch in the button and firing the change event.
panel | Jx.ColorPalette the palette that changed. |
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.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 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. |
onMouseLeave | Handle the user moving the mouse off this button or menu by starting the hide process if so configured. |
eventInMenu | determine if an event happened inside this menu or a sub menu of this menu. |
{Jx.Button} The button that represents this menu in a toolbar and opens the menu.
{Jx.List} the list of items in the menu
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.
click | fired when the menu item is clicked. |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
owner | {<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item. |
Functions | |
setOwner | Set the owner of this menu item |
hide | Hide the menu item. |
show | Show the menu item |
clicked | Handle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking |
onmouseover | handle the mouse moving over the menu item |
{<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item.
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.
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);
change | the current button has changed |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
buttons | {Array} array of buttons that are managed by this button set |
Functions | |
buttonChanged | Handle selection changing on the buttons themselves and activate the appropriate button in response. |
buttonChanged: function( button )
Handle selection changing on the buttons themselves and activate the appropriate button in response.
button | {Jx.Button} the button to make active. |
Extends: Jx.Button
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.
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);
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
{<Jx. | 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. |
Functions | |
render | construct a new instance of Jx.Button.Multi. |
setButton | update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons. |
setButton: function( button )
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
button | {Jx.Button} The button to set as the active button |
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.
var myContainer = new Jx.Layout('myDiv', options);
sizeChange | fired when the size of the container changes |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Functions | |
windowResize | when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized |
resize | resize the element controlled by this Jx.Layout object. |
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.
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);
add | fired when one or more buttons are added to a toolbar |
remove | fired when on eor more buttons are removed from a toolbar |
Options
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | add this toolbar to a DOM element automatically creating a toolbar container if necessary |
add | Add an item to the toolbar. |
remove | remove an item from a toolbar. |
deactivate | Deactivate the Toolbar (when it is acting as a menu bar). |
isActive | Indicate if the toolbar is currently active (as a menu bar) |
setActive | Set the active state of the toolbar (for menus) |
setVisibleItem | For menus, they want to know which menu is currently open. |
update | 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. |
{Jx.List} the list that holds the items in this toolbar
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.
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>.
thing | {Object} the thing to add. More than one thing can be added by passing multiple arguments. |
setVisibleItem: function( obj )
For menus, they want to know which menu is currently open.
obj | {Jx.Menu} the menu that just opened. |
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.
add | fired when one or more toolbars are added to a container |
remove | fired when one or more toolbars are removed from a container |
Options Events {<Jx.Addable>}
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
domObj | {HTMLElement} the HTML element that the container lives in |
Functions | |
findFirstVisible | Finds the first visible button on the toolbar and saves a reference in the scroller object |
scroll | Does the work of scrolling the toolbar to a specific position. |
afterTweenRight | Updates pointers to buttons after the toolbar scrolls right |
afterTweenLeft | Updates pointers to buttons after the toolbar scrolls left |
getPreviousButton | Finds the button to the left of the first visible button |
getNextButton | Finds the button to the right of the first visible button |
Extends: Object
Implements: Options
A helper class to provide a container for something to go into a Jx.Toolbar.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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.
close | fired when the panel is closed |
collapse | fired when the panel is collapsed |
expand | fired when the panel is opened |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Functions | |
layoutContent | 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 | Set the label in the title bar of this panel |
getLabel | Get the label of the title bar of this panel |
finalize | Clean up the panel |
maximize | Maximize this panel |
setContent | set the content of this panel to some HTML |
setContentURL | Set the content of this panel to come from some URL. |
panelContentLoaded | When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns. |
toggleCollapse | sets or toggles the collapsed state of the panel. |
close | Closes the panel (completely hiding it). |
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.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:
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.
var dialog = new Jx.Dialog();
open | triggered when the dialog is opened |
close | triggered when the dialog is closed |
change | triggered when the value of an input in the dialog is changed |
resize | triggered when the dialog is resized |
Jx.Dialog extends Jx.Panel, please go there for more details.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Functions | |
resize | resize the dialog. |
sizeChanged | overload panel’s sizeChanged method |
toggleCollapse | sets or toggles the collapsed state of the panel. |
maximize | Called when the maximize button of a dialog is clicked. |
show | show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible. |
hide | hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog. |
openURL | open the dialog and load content from the provided url. |
open | open the dialog. |
close | 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 |
setDragLimit | calculates the drag-dimensions of an given element to drag |
resize: function( width, height, autoPosition )
resize the dialog. This can be called when the dialog is closed or open.
width | the new width |
height | the new height |
autoPosition | boolean, false by default, if resizing an open dialog setting this to true will reposition it according to its position rules. |
show : function( )
show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.
hide : function()
hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.
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.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | Prepare a new, empty element to go into a split area. |
prepareBar | Prepare a new, empty bar to go into between split areas. |
establishConstraints | Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area. |
dragHorizontal | In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar. |
dragVertical | In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar. |
sizeChanged | handle the size of the container being changed. |
horizontalResize | Resize a horizontally layed-out container |
verticalResize | Resize a vertically layed out container. |
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.
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]);
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values) |
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.
Copyright © 2009, Jonathan Bomgardner
This file is licensed under an MIT style license
Functions | |
render | constructs the dialog. |
onOk | Called when the OK button is clicked. |
createText | handle change in language |
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.
Copyright © 2009, Jonathan Bomgardner
This file is licensed under an MIT style license
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Extends: Jx.Widget
This class represents a fieldset. It can be used to group fields together.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
legend | a holder for the legend Element |
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).
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
defaultAction | the default field to activate if the user hits the enter key in this form. |
fields | An array of all of the single fields (not contained in a fieldset) for this form |
pluginNamespace | required variable for plugins |
Functions | |
isValid | Determines if the form passes validation |
Extends: Jx.Widget
This class is the base class for all form fields.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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. |
Extends: Jx.Field
This class represents a text input field.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
type | The type of this field |
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.
Copyright © 2009, Jonathan Bomgardner
This file is licensed under an MIT style license
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.
renderDone | fires when the panel completes creating all of the items. |
Copyright © 2009, Jonathan Bomgardner.
This file is licensed under an MIT style license
Functions | |
draw | begins the process of creating the items |
createItem | Actually does the work of getting the data from the store and creating a single item based on the provided template |
parseTemplate | parses the provided template to determine which store columns are required to complete it. |
enterItem | Fires mouseenter event |
leaveItem | Fires mouseleave event |
selectItem | Fires select event |
unselectItem | Fires unselect event |
addItem | Fires add event |
removeItem | Fires remove event |
createList | Creates the list object |
Extends: Jx.Panel.DataView
This extension of Jx.Panel.DataView that provides for grouping the items by a particular column.
Copyright © 2009, Jonathan Bomgardner.
This file is licensed under an MIT style license
Functions | |
draw | actually does the work of creating the view |
createList | Creates the list object |
createList: function( container, options, manager )
Creates the list object
container | the container to use in the list |
options | the options for the list |
manager | Jx.Selection which selection obj to connect to this list |
Extends: Jx.Widget
Copyright © 2009, DM Solutions Group.
This file is licensed under an MIT style license
Extends: Jx.Widget
Copyright © 2009, DM Solutions Group.
This file is licensed under an MIT style license
Extends: Jx.Field
This class represents a hidden input field.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
type | The type of this field |
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
type | The Field type used in rendering |
forms | holds all form references when we’re in multiple mode |
Functions | |
copyValue | 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 | Called when the mouse enters the actual file input to make the fake button highlight. |
mouseLeave | called when the mouse leaves the actual file input to turn off the highlight of the fake button. |
submitUpload | Called either after upload() or as a result of a successful call to get a progress ID. |
pollUpload | polls the server for upload progress information |
processProgress | process the data returned from the request |
uploadFailure | called if there is a problem getting progress on the upload |
processIFrameUpload | Called if we are not using progress and the IFrame finished loading the server response. |
uploadCleanUp | Cleans up the hidden form and IFrame after a completed upload. |
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); }
onUpdate | Fired when the bar is updated |
onComplete | fires when the progress bar completes it’s fill |
Copyright © 2010 by Jonathan Bomgardner Licensed under an mit-style license
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). |
Extends: Jx.Panel
This class extends Jx.Panel to provide a consistent interface for uploading files in an application.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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 | Sets up the upload panel. |
moveToQueue | Called by Jx.Field.File’s fileSelected event. |
upload | Called when the user clicks the upload button. |
fileUploadComplete | Called when a single file is uploaded completely . |
fileUploadError | Called when there is an error uploading a file. |
removeUploadedFile | Removes the passed file from the upload queue upon it’s completion. |
fileUploadProgress | Function to pass progress information to the progressbar instance in the file. |
allUploadCompleted | Called when the Jx.Field.File completes uploading all files. |
createText | handle change in language |
Extends: Jx.Object
The class used for defining columns for grids.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
holds a reference to the grid (an instance of Jx.Grid)
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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. |
hasExpandable | boolean indicates whether any of the columns are expandable or not, which affects some calculations for column widths |
Functions | |
buildTemplates | create the row template based on the current columns |
getRow | create a single row in the grid for a single record and populate the DOM elements for it. |
createRules | create CSS rules for the current grid object |
getRow: function( tr, record )
create a single row in the grid for a single record and populate the DOM elements for it.
tr | {DOMElement} the TR element to insert the row into |
record | {Jx.Record} the record to create the row for |
Extends: Jx.Object
A class defining a grid row.
Inspired by code in the original Jx.Grid class
Original Copyright © 2008, DM Solutions Group Inc. This version Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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 | creates the TH for the row’s header |
calculateHeights |
Extend: Jx.Object
Base class for all plugins. In order for a plugin to be used it must extend from this class.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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
Prelighter | prelights rows, columns, and cells |
Selector | selects rows, columns, and cells |
Sorter | sorts rows by specific column |
Editor | allows 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.
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. |
Copyright © 2008, DM Solutions Group Inc. This version Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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 | handle the grid scrolling by updating the position of the headers |
drawStore | clears the grid and redraws the store. |
drawRow | this method does the heavy lifting of drawing a single record into the grid |
clickColumnHeader | handle clicks on the column header |
moveColumnHeader | handle the mouse moving over the column header |
clickRowHeader | handle clicks on the row header |
moveRowHeader | handle the mouse moving over the row header |
clickCell | handle clicks on cells in the grid |
dblclickCell | handle doubleclicks on cells in the grid |
moveCell | handle the mouse moving over cells in the grid |
leaveGrid | handle the mouse leaving the grid |
changeText | rerender the grid when the language changes |
addEvent | override default addEvent to also trigger wanting the event which will then cause the underlying events to be registered |
holds a reference to the Jx.Store that is the store for this grid
drawRow: function( record, index, position )
this method does the heavy lifting of drawing a single record into the grid
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. |
This is the base class and namespace for all grid renderers.
Extends: Jx.Widget We extended Jx.Widget to take advantage of templating support.
Properties | |
domInsert | boolean, indicates if the renderer needs to insert a DOM element instead of just outputing some templated HTML. |
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
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
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
Extends: Jx.Plugin
Grid plugin to select rows, columns, and/or cells.
Original selection code from Jx.Grid’s original class
Original Copyright © 2008, DM Solutions Group Inc. This version Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
selected | Holds arrays of selected rows and/or columns and their headers |
Functions | |
render | required for the renderer interface |
toElement | required for the Renderer interface |
updateCheckColumn | check to see if a row needs to have its checkbox updated after its been drawn |
afterGridRender | |
onCellClick | dispatch clicking on a table cell |
select | dispatches the grid click to the various selection methods |
selectCell | select a cell |
selectRow | Select a row and apply the jxGridRowSelected style to it. |
setCheckField | |
selectRowHeader | Apply the jxGridRowHeaderSelected style to the row header cell of a selected row. |
selectColumn | Select a column. |
selectColumnHeader | Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column. |
checkSelection | Checks whether a row’s check box is/isn’t checked and modifies the selection appropriately. |
checkAll | Checks all checkboxes in the column the selector inserted. |
updateCheckColumn: function( index, record )
check to see if a row needs to have its checkbox updated after its been drawn
index | {Integer} the row that was just rendered |
record | {Jx.Record} the record that was rendered into that row |
checkSelection: function ( event )
Checks whether a row’s check box is/isn’t checked and modifies the selection appropriately.
column | Jx.Column that created the checkbox |
field | <Jx.Field.Checkbox> instance that was checked/unchecked created the checkbox |
Extends: Jx.Plugin
Grid plugin to prelight rows, columns, and cells
Inspired by the original code in Jx.Grid
Original Copyright © 2008, DM Solutions Group Inc. This version Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Functions | |
lighton | |
lightoff | |
light | dispatches the event to the various prelight methods. |
prelightRowHeader | apply the jxGridRowHeaderPrelight style to the header cell of a row. |
prelightColumnHeader | apply the jxGridColumnHeaderPrelight style to the header cell of a column. |
prelightRow | apply the jxGridRowPrelight style to row. |
prelightColumn | apply the jxGridColumnPrelight style to a column. |
prelightCell | apply the jxGridCellPrelight style to a cell. |
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.
col | {Integer} the column to pre-light the header cell of |
on | flag to tell if we’re lighting on or off |
Extends: Jx.Plugin
Grid plugin to sort the grid by a single column.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
current | refernce to the currently sorted column |
direction | tell us what direction the sort is in (either ‘asc’ or ‘desc’) |
Functions | |
modifyHeaders | |
sort | called when a grid header is clicked. |
Extends: Jx.Plugin
Grid plugin to enable dynamic resizing of column width and row height
Copyright © 2009, DM Solutions Group.
This file is licensed under an MIT style license
Properties | |
els | the DOM elements by which the rows/columns are resized. |
drags | the Drag instances |
Functions | |
removeHandles | clean up any handles we created |
createHandles | create handles that let the user drag to resize columns and rows |
createText | respond to a language change by updating the tooltip |
Extends: Jx.Plugin
Grid plugin to enable inline editing within a cell
Original selection code from Jx.Grid’s original class
Original Copyright © 2008, DM Solutions Group Inc. This version Copyright © 2009, Conrad Barthelmes.
This file is licensed under an MIT style license
Properties | |
activeCell | 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. |
keyboard | Instance of a Mootols Keyboard Class |
Functions | |
onCellClick | dispatch clicking on a table cell |
activate | activates the input field or breaks up if conditions are not fulfilled |
setStyles | sets some styles for the Jx.Field elements... |
showPopUp | Shows the PopUp of of the editor if it already exists, otherwise calls Method this.createPopUp |
createPopUp | creates the popup for the requested cell. |
setPopUpStylesAfterRendering | |
setPopUpButtons | creates the PopUp Buttons if enabled in options or deletes them if set to false |
unsetActiveField | resets the activeField and hides the popup |
unsetPopUp | resets the popup manually to be able to use it with different settings |
cellValueIncrement | Whether increments or decrements the value of the active cell if the dataType is numeric |
cellIsInGrid | determins if the given coordinates are within the grid |
addFormatterUriClickListener | looks up for Jx.Formatter.Uri columns to disable the link and open the inline editor instead when CTRL is NOT pressed. |
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
Hides and shows an element without depending on a fixed width or height
Copyright 2009 by Jonathan Bomgardner License: MIT-style
Functions | |
init | sets up the slide |
handleClick | event handler for clicks on the trigger. |
setDisplay | 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 |
Extends: Jx.Plugin
Plugin for DataView | allows folding/unfolding of the groups in the grouped dataview |
Copyright © 2009, Jonathan Bomgardner.
This file is licensed under an MIT style license
Properties | |
headerState | Hash that holds the open/closed state of each header |
Functions | |
setHeaders | Called after the dataview is rendered. |
onSlideIn | Called when a group opens. |
onSlideOut | Called when a group closes. |
Extends: Jx.Plugin
Field plugin for enforcing validation when a field is not used in a form.
Copyright © 2009, Jonathan Bomgardner. Parts inspired by mootools-more’s Form.Validator class
This file is licensed under an MIT style license
Properties | |
valid | tells whether this field passed validation or not. |
errors | array of errors found on this field |
Extends: Jx.Plugin
Form plugin for enforcing validation on the fields in a form.
Copyright © 2009, Jonathan Bomgardner. Parts inspired by mootools-more’s Form.Validator class
This file is licensed under an MIT style license
Properties | |
errorMessagess | element holding |
Functions | |
validate | Method that actually does the work of validating the fields in the form. |
fieldFailed | Refires the fieldValidationFailed event from the field validators it contains |
fieldPassed | Refires the fieldValidationPassed event from the field validators it contains |
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.
Copyright © 2010, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
tabs | holds all of the tabs that we’re tracking |
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
Properties | |
columnsNeeded | Will hold an array of the column names needed for processing the template |
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
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. |
Functions | |
checkFolder | 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. |
hasParent | Virtual method to be overridden by sublcasses. |
getParentIndex | Virtual method to be overridden by sublcasses. |
A Hash containing all of the Jx.TreeFolders in this tree.
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
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
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
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).
TODO | add open/close events? |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Extends: Jx.Object
A convenience class to create a visual separator in a menu.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | Set the ownder of this menu item |
hide | Hide the menu item. |
show | Show the menu item |
{Jx.Menu, Jx.Menu.SubMenu} the menu that the separator is in.
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.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | Set the owner of this sub menu |
show | Show the sub menu |
hide | Hide the sub menu |
add | Add menu items to the sub menu. |
remove | Remove a menu item from the menu |
replace | Replace a menu item with another menu item |
deactivate | Deactivate the sub menu |
isActive | Indicate if this sub menu is active |
setActive | Set the active state of the Jx.Menu that contains this sub menu |
setVisibleItem | Set a sub menu of this menu to be visible and hide the previously visible one. |
{Jx.Menu or <Jx.SubMenu>} the menu or sub menu that this sub menu belongs
{Jx.List} a list to manage menu items
isActive: function()
Indicate if this sub menu is active
{Boolean} true if the Jx.Menu that ultimately contains this sub menu is active, false otherwise.
setActive: function( isActive )
Set the active state of the Jx.Menu that contains this sub menu
isActive | {Boolean} the new active state |
Extends: Jx.Object
A helper class to create an element that can snap a split panel open or closed.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | Snap the element open or closed. |
sizeChanged | Handle the size of the element changing to see if the toggle state has changed. |
{HTMLElement} An element of the Jx.Splitter that gets controlled by this snap
{Jx.Splitter} the splitter that this snap is associated with.
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.
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'); } });
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | |
render | Create a new instance of Jx.Tab. |
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.
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.
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);
tabChange | the current tab has changed |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | |
resizeTabBox | Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set. |
add | Add one or more Jx.Tabs to the TabSet. |
remove | Remove a tab from this TabSet. |
setActiveTab | Set the active tab to the one passed to this method |
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.
tab | {Jx.Tab} the tab to remove. |
setActiveTab: function( tab )
Set the active tab to the one passed to this method
tab | {Jx.Tab} the tab to make active. |
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.
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);
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
tabBar | {Jx.Toolbar} the toolbar for this tab box. |
tabSet | {Jx.TabSet} the tab set for this tab box. |
Functions | |
add | Add one or more Jx.Tabs to the TabBox. |
remove | Remove a tab from the TabSet. |
{Jx.Toolbar} the toolbar for this tab box.
{Jx.TabSet} the tab set for this tab box.
add : function()
Add one or more Jx.Tabs to the TabBox.
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. |
Extends: Jx.Object
A helper class that represents a visual separator in a Jx.Toolbar
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Jx.Tree displays hierarchical data in a tree structure of folders and nodes.
Extends: Jx.Widget
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | |
cleanup | Clean up a Jx.Tree instance |
update | Update the CSS of the Tree’s DOM element in case it has changed position |
{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.
{Jx.List} the list object is used to manage the DOM elements of the items added to the tree.
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.
click | triggered when the tree item is clicked |
Events | MooTools Class.Extras |
Options | MooTools Class.Extras |
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
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 | Clean up the TreeItem and remove all DOM references |
finalizeItem | Clean up the TreeItem and remove all DOM references |
update | Update the CSS of the TreeItem’s DOM element in case it has changed position |
select | Select a tree node. |
getLabel | Get the label associated with a TreeItem |
setLabel | set the label of a tree item |
propertyChanged | A property of an object has changed, synchronize the state of the TreeItem with the state of the object |
A Jx.TreeFolder is an item in a tree that can contain other items. It is expandable and collapsible.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Properties | |
tree | {Jx.Tree} a Jx.Tree instance for managing the folder contents |
Functions | |
update | Update the CSS of the TreeFolder’s DOM element in case it has changed position. |
setSelection | sets the Jx.Selection object to be used by this folder. |
{Jx.Tree} a Jx.Tree instance for managing the folder contents
update: function( shouldDescend, isLast )
Update the CSS of the TreeFolder’s DOM element in case it has changed position.
shouldDescend | {Boolean} propagate changes to child nodes? |
isLast | {Boolean} is this the last item in the list? |
{Jx.TreeFolder} a reference to this for chaining
setSelection: function( selection )
sets the Jx.Selection object to be used by this folder. Used to propogate a single selection object throughout a tree.
selection | {Jx.Selection} the new selection object to use |
{Jx.TreeFolder} a reference to this for chaining
Extends: Jx.ListItem
Copyright © 2009, DM Solutions Group.
This file is licensed under an MIT style license
A Jx.Notice subclass useful for displaying informational messages
A Jx.Notice subclass useful for displaying success messages
A Jx.Notice subclass useful for displaying warning messages
A Jx.Notice subclass useful for displaying error messages
Extends: Jx.ListView
Copyright © 2009, DM Solutions Group.
This file is licensed under an MIT style license
A floating notice area for displaying notices, notices get chrome if the notifier has chrome
Extends: Jx.Notifier
Copyright © 2009, DM Solutions Group.
This file is licensed under an MIT style license
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
Extends: Jx.Object
Base class used for specific implementations to coerce data into specific formats
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Extends: Jx.Formatter
This class formats numbers. You can have it do the following
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Extends: Jx.Formatter
This class formats boolean values. You supply the text values for true and false in the options.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Extends: Jx.Formatter
Formats data as phone numbers. Currently only US-style phone numbers are supported.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Extends: Jx.Formatter
This class formats strings by limiting them to a maximum length and replacing the remainder with an ellipsis.
Copyright © 2010, Hughes Gauthier.
This file is licensed under an MIT style license
Extends: Jx.Field
This class represents a radio input field.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
type | The type of this field |
Extends: Jx.Field
This class represents a radio input field.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
type | What kind of field this is |
Functions | |
reset | Sets the field back to the value passed in the original options |
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>
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
type | Indictes this type of field. |
Functions | |
addOption | add an option to the select list |
removeOption | removes an option from the select list |
setValue | Sets the value property of the field |
getValue | Returns the current value of the field. |
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>
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
Properties | |
type | The type of field this is. |
errorClass | The class applied to error elements |
Extends: Jx.Field
This class represents a button.
Copyright © 2009, DM Solutions Group
This file is licensed under an MIT style license
Properties | |
type | The type of this field |
Extends: Jx.Field
change -
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
Functions | |
valueChanged | invoked when the current value is changed |
onKeyPress | Handle the user pressing a key by looking for an ENTER key to set the value. |
add | add a new item to the pick list |
remove | Remove the item at the given index. |
Extends: Jx.Field.Text
This class represents a password input field.
Copyright © 2009, Jon Bomgardner.
This file is licensed under an MIT style license
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.
Copyright © 2010, Paul Spener, Fred Warnock, Conrad Barthelmes
This file is licensed under an MIT style license
dereferences a DOM Element to a JxLib object if possible and returns a reference to the object, or null if not defined.
function $jx( id )
An internal method actually populate the DOM element with the image source.
Jx.loadNextImg = function()
internal function to initialize plugins on object creation
initPlugins: function ()
to be implemented by subclasses to do the actual work of destroying an object.
cleanup: function ()
Used to generate a unique ID for Jx Objects.
generateId: function( prefix )
sets up the base widget code and runs the render function.
init: function()
create chrome on an element.
makeChrome: function( element )
destroy the widget and clean up any potential memory leaks
cleanup: function()
render the widget, internal function called by the framework.
render: function()
process the template of the widget and populate the elements hash with any objects.
processElements: function( template, classes )
Is fired after a delay to check the request to make sure it’s not failing in AIR.
checkRequest: function()
internal method to initialize this object
init: function()
destroy the list and release anything it references
cleanup: function()
set the z-index of an element based on its position in the stack
setZIndex: function( obj, idx )
This method takes the data passed in and puts it into the form the record needs it in.
processData: function ( data )
Determines which column is being asked for and returns it.
resolveCol : function ( col )
initialize the store, should be called by sub-classes
init: function ()
avoid memory leaks when a store is destroyed, should be called by sub-classes if overridden
cleanup: function ()
Saves the starting time of the sort
startTimer : function ()
Determines the time the sort took.
stopTimer : function ()
Does the physical sorting.
mergeSort : function ( arr )
Does the work of merging to arrays in order.
merge : function ( left, right )
Puts the data in Max-heap order
heapify : function ( count )
siftDown : function ( start, end )
Initiates the sorting.
quicksort : function ( left, right )
partition : 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
findMedianOfMedians : function ( left, right )
findMedianIndex : function ( left, right, shift )
Actually runs the sort on the data
sort : function ()
Called as an event handler for a returning request.
handleResponse: function ( response )
called by update, delete, and insert methods that actually does the work of kicking off the request.
run: function ( record, options, method )
initialize the strategy, should be called by subclasses
init: function ()
initialize this strategy
init: function ()
Called as the event handler for the protocol’s dataLoaded event.
loadStore: function ( resp )
Takes the meta property of the response object and puts the data where it belongs.
parseMetaData: function ( meta )
initialize this strategy
init: function ()
Used to assist in the loading of data into the store.
loadStore: function ( resp )
This method does the actual work of loading data to the store.
loadData: function ( data )
Takes the metadata returned from the protocol and places it in the appropriate Vplaces.
parseMetaData: function ( meta )
Is called when a pages cache timer expires.
expirePage: function ( page )
initialize this strategy
init: function ()
Used to assist in the loading of data into the store.
loadStore: function ( resp )
This method does the actual work of loading data to the store.
loadData: function ( data )
initialize this strategy
init: function ()
Handles processing of the response(s) from the protocol.
onComplete: function ( response )
initialize this strategy
init: function ()
Does the actual group sorting.
subSort : function ( data, groupByCol, sortByCol )
Called to change the sorting of the data
doSort : function ( col, sort, data, ret, options )
resolves the given column identifier and resolves it to the actual column object in the store.
resolveCol: function ( col )
create a new button.
render: function()
construct a new instance of a flyout button.
render: function()
hide flyout if the user clicks outside of the flyout
clickHandler: function( e )
hide flyout if the user presses the ESC key
keypressHandler: function( e )
initialize a new instance of Jx.ColorPalette
render: function()
handle the mouse moving over a colour swatch by updating the preview
swatchOver: function( e )
handle mouse click on a swatch by updating the color and hiding the panel.
swatchClick: function( e )
handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.
changed: function()
handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).
alphaChanged: function()
update the colour panel user interface based on the current colour and alpha values
updateSelected: function()
creates a new color button.
render: function()
handle the color changing in the palette by updating the preview swatch in the button and firing the change event.
changed: function( panel )
Update the swatch color for the current color
updateSwatch: function()
Deactivate the menu by hiding it.
deactivate: function()
Handle the user moving the mouse off this button or menu by starting the hide process if so configured.
onMouseLeave: function( e )
determine if an event happened inside this menu or a sub menu of this menu.
eventInMenu: function( e )
Set the owner of this menu item
setOwner: function( obj )
Hide the menu item.
hide: function()
Handle the user clicking on the menu item, overriding the Jx.Button::clicked method to facilitate menu tracking
clicked: function( obj )
Handle selection changing on the buttons themselves and activate the appropriate button in response.
buttonChanged: function( button )
construct a new instance of Jx.Button.Multi.
render: function()
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
setButton: function( button )
when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized
windowResize: function()
resize the element controlled by this Jx.Layout object.
resize: function( options )
add this toolbar to a DOM element automatically creating a toolbar container if necessary
addTo: function( parent )
Add an item to the toolbar.
add: function( )
remove an item from a toolbar.
remove: function( item )
Deactivate the Toolbar (when it is acting as a menu bar).
deactivate: function()
Indicate if the toolbar is currently active (as a menu bar)
isActive: function()
Set the active state of the toolbar (for menus)
setActive: function( b )
For menus, they want to know which menu is currently open.
setVisibleItem: function( obj )
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.
update: function ()
Finds the first visible button on the toolbar and saves a reference in the scroller object
findFirstVisible: function()
Does the work of scrolling the toolbar to a specific position.
scroll: function( direction )
Updates pointers to buttons after the toolbar scrolls right
afterTweenRight: function( currentButton )
Updates pointers to buttons after the toolbar scrolls left
afterTweenLeft: function( previousButton )
Finds the button to the left of the first visible button
getPreviousButton: function( currentButton )
Finds the button to the right of the first visible button
getNextButton: function( currentButton )
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.
layoutContent: function()
Set the label in the title bar of this panel
setLabel: function( s )
Get the label of the title bar of this panel
getLabel: function()
Clean up the panel
finalize: function()
Maximize this panel
maximize: function()
set the content of this panel to some HTML
setContent : function ( html )
Set the content of this panel to come from some URL.
setContentURL : function ( url )
When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns.
panelContentLoaded: function( html )
sets or toggles the collapsed state of the panel.
toggleCollapse: function( state )
Closes the panel (completely hiding it).
close: function()
resize the dialog.
resize: function( width, height, autoPosition )
overload panel’s sizeChanged method
sizeChanged: function()
sets or toggles the collapsed state of the panel.
toggleCollapse: function( state )
Called when the maximize button of a dialog is clicked.
maximize: function ()
show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.
show : function( )
open the dialog.
open: function()
hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.
hide : function()
close the dialog and trigger the onClose callback function if necessary
close: function()
open the dialog and load content from the provided url.
openURL: function( url )
calculates the drag-dimensions of an given element to drag
setDragLimit : function( reference )
Prepare a new, empty element to go into a split area.
prepareElement: function()
Prepare a new, empty bar to go into between split areas.
prepareBar: function()
Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area.
establishConstraints: function()
In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar.
dragHorizontal: 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.
dragVertical: function( obj )
handle the size of the container being changed.
sizeChanged: function()
Resize a horizontally layed-out container
horizontalResize: function()
Resize a vertically layed out container.
verticalResize: function()
Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values)
maximizePanel: function( panel )
constructs the dialog.
render: function ()
Called when the OK button is clicked.
onOk: function ()
called when any button is clicked.
onClick: function ( value )
Creates the tooltip
render : function ()
Method run when the cursor passes over an element with a tip
enter : function ( event )
Executed when the mouse moves out of an element with a tip
leave : function ( event )
Called when the mouse moves over an element with a tip.
move : function ( event )
Called to position the tooltip.
position : function ( event )
Determines if the form passes validation
isValid : function ( evt )
Called when the OK button is clicked.
onClick: function ( value )
begins the process of creating the items
draw: function ()
Actually does the work of getting the data from the store and creating a single item based on the provided template
createItem: function ()
parses the provided template to determine which store columns are required to complete it.
parseTemplate: function ( template )
Fires mouseenter event
enterItem: function( item, list )
Fires mouseleave event
leaveItem: function( item, list )
Fires select event
selectItem: function( item, list )
Fires unselect event
unselectItem: function( item, list )
Fires add event
addItem: function( item, list )
Fires remove event
removeItem: function( item, list )
Creates the list object
createList: function( container, options )
actually does the work of creating the view
draw: function ()
Creates the list object
createList: function( container, options, manager )
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.
copyValue: function ()
Called when the mouse enters the actual file input to make the fake button highlight.
mouseEnter: function ()
called when the mouse leaves the actual file input to turn off the highlight of the fake button.
mouseLeave: function ()
Called either after upload() or as a result of a successful call to get a progress ID.
submitUpload: function ( data )
polls the server for upload progress information
pollUpload: function ()
process the data returned from the request
processProgress: function ( data )
called if there is a problem getting progress on the upload
uploadFailure: function ( xhr )
Called if we are not using progress and the IFrame finished loading the server response.
processIFrameUpload: function ()
Cleans up the hidden form and IFrame after a completed upload.
uploadCleanUp: function ()
Sets up the upload panel.
render: function ()
Called by Jx.Field.File’s fileSelected event.
moveToQueue: function ( filename )
Called when the user clicks the upload button.
upload: function ()
Called when a single file is uploaded completely .
fileUploadComplete: function ( data, file )
Called when there is an error uploading a file.
fileUploadError: function ( data, filename )
Removes the passed file from the upload queue upon it’s completion.
removeUploadedFile: function ( filename )
Function to pass progress information to the progressbar instance in the file.
fileUploadProgress: function ( data, file )
This method does the dirty work of actually measuring a cell
measure : function ( text, klass, rowHeader, row )
create the row template based on the current columns
buildTemplates: function()
create a single row in the grid for a single record and populate the DOM elements for it.
getRow: function( tr, record )
create CSS rules for the current grid object
createRules: function( styleSheet, scope )
creates the TH for the row’s header
getRowHeaderCell : function ( text )
calculateHeights : function ()
handle the grid scrolling by updating the position of the headers
scroll : function ()
clears the grid and redraws the store.
drawStore: function()
this method does the heavy lifting of drawing a single record into the grid
drawRow: function( record, index, position )
handle clicks on the column header
clickColumnHeader: function( e )
handle the mouse moving over the column header
moveColumnHeader: function( e )
handle clicks on the row header
clickRowHeader: function( e )
handle the mouse moving over the row header
moveRowHeader: function( e )
handle clicks on cells in the grid
clickCell: function( e )
handle doubleclicks on cells in the grid
dblclickCell: function( e )
handle the mouse moving over cells in the grid
moveCell: function( e )
handle the mouse leaving the grid
leaveGrid: function( e )
rerender the grid when the language changes
changeText : function( lang )
override default addEvent to also trigger wanting the event which will then cause the underlying events to be registered
addEvent: function( name, fn )
required for the renderer interface
render: function()
required for the Renderer interface
toElement: function()
check to see if a row needs to have its checkbox updated after its been drawn
updateCheckColumn: function( index, record )
afterGridRender: function ()
dispatch clicking on a table cell
onCellClick: function( cell )
dispatches the grid click to the various selection methods
select : function ( cell )
select a cell
selectCell: function( cell )
Select a row and apply the jxGridRowSelected style to it.
selectRow: function ( row, silently )
setCheckField: function ( row, checked )
Apply the jxGridRowHeaderSelected style to the row header cell of a selected row.
selectRowHeader: function ( row )
Select a column.
selectColumn: function ( col )
Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column.
selectColumnHeader: function ( col )
Checks whether a row’s check box is/isn’t checked and modifies the selection appropriately.
checkSelection: function ( event )
Checks all checkboxes in the column the selector inserted.
checkAll: function ()
lighton : function ( cell )
lightoff : function ( cell )
dispatches the event to the various prelight methods.
light: function ( cell, on )
apply the jxGridRowHeaderPrelight style to the header cell of a row.
prelightRowHeader : function ( row, on )
apply the jxGridColumnHeaderPrelight style to the header cell of a column.
prelightColumnHeader : function ( col, on )
apply the jxGridRowPrelight style to row.
prelightRow : function ( row, on )
apply the jxGridColumnPrelight style to a column.
prelightColumn : function ( col, on )
apply the jxGridCellPrelight style to a cell.
prelightCell : function ( cell, on )
modifyHeaders: function()
called when a grid header is clicked.
sort: function( el )
clean up any handles we created
removeHandles: function()
create handles that let the user drag to resize columns and rows
createHandles: function()
dispatch clicking on a table cell
onCellClick: function( cell )
activates the input field or breaks up if conditions are not fulfilled
activate: function( cell )
sets some styles for the Jx.Field elements...
setStyles : function( cell )
Shows the PopUp of of the editor if it already exists, otherwise calls Method this.createPopUp
showPopUp : function( cell )
creates the popup for the requested cell.
createPopUp : function( cell )
setPopUpStylesAfterRendering: function()
creates the PopUp Buttons if enabled in options or deletes them if set to false
setPopUpButtons : function()
resets the activeField and hides the popup
unsetActiveField: function()
resets the popup manually to be able to use it with different settings
unsetPopUp : function()
Whether increments or decrements the value of the active cell if the dataType is numeric
cellValueIncrement : function( bool )
determins if the given coordinates are within the grid
cellIsInGrid: function( row, index )
looks up for Jx.Formatter.Uri columns to disable the link and open the inline editor instead when CTRL is NOT pressed.
addFormatterUriClickListener : function()
sets up the slide
init: function ()
event handler for clicks on the trigger.
handleClick: 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
setDisplay: function ()
Called after the dataview is rendered.
setHeaders: function ()
Called when a group opens.
onSlideIn: function ( header )
Called when a group closes.
onSlideOut: function ( header )
Method that actually does the work of validating the fields in the form.
validate: function ()
Refires the fieldValidationFailed event from the field validators it contains
fieldFailed: function ( field, validator )
Refires the fieldValidationPassed event from the field validators it contains
fieldPassed: function ( field, validator )
Called by the disclose event of the tree to determine if we need to request additional items for a branch of the tree.
checkFolder: function ( folder )
Show the context menu at the location of the mouse click
show : function( e )
Set the ownder of this menu item
setOwner: function( obj )
Set the owner of this sub menu
setOwner: function( obj )
Show the sub menu
show: function()
Hide the sub menu
hide: function()
Add menu items to the sub menu.
add: function( item, position )
Remove a menu item from the menu
remove: function( item )
Replace a menu item with another menu item
replace: function( item, withItem )
Deactivate the sub menu
deactivate: function( e )
Indicate if this sub menu is active
isActive: function()
Set the active state of the Jx.Menu that contains this sub menu
setActive: function( isActive )
Set a sub menu of this menu to be visible and hide the previously visible one.
setVisibleItem: function( obj )
Snap the element open or closed.
toggleElement: function()
Create a new instance of Jx.Tab.
render : function( )
Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set.
resizeTabBox: function()
Add one or more Jx.Tabs to the TabSet.
add: function()
Remove a tab from this TabSet.
remove: function( tab )
Set the active tab to the one passed to this method
setActiveTab: function( tab )
Add one or more Jx.Tabs to the TabBox.
add : function()
Remove a tab from the TabSet.
remove : function( tab )
Clean up a Jx.Tree instance
cleanup: function()
Update the CSS of the Tree’s DOM element in case it has changed position
update: function( shouldDescend, isLast )
Clean up the TreeItem and remove all DOM references
finalize: function()
Update the CSS of the TreeItem’s DOM element in case it has changed position
update : function( isLast )
Select a tree node.
select: function()
Get the label associated with a TreeItem
getLabel: function()
set the label of a tree item
setLabel: function( label )
A property of an object has changed, synchronize the state of the TreeItem with the state of the object
propertyChanged : function( obj )
Update the CSS of the TreeFolder’s DOM element in case it has changed position.
update: function( shouldDescend, isLast )
sets the Jx.Selection object to be used by this folder.
setSelection: function( selection )
Called when the slider moves
change: function ( step )
Called when the slider stops moving and the mouse button is released.
complete: function ( step )
render: function ()
render the widget
render: function ()
render the widget
render: function ()
render the widget
render: function ()
scroll the content in response to the slider being moved.
scrollIt: function ( step )
Sets the field back to the value passed in the original options
reset: function ()
add an option to the select list
addOption: function ( item, position )
removes an option from the select list
removeOption: function ( item )
Sets the value property of the field
setValue: function ( v )
Returns the current value of the field.
getValue: function ()
invoked when the current value is changed
valueChanged: function()
Handle the user pressing a key by looking for an ENTER key to set the value.
onKeyPress: function( e )
add a new item to the pick list
add: function()
Remove the item at the given index.
remove: function( idx )
listens to the keyup event and validates the input for a hex color
onKeyUp : function( ev )