<SearchForm
    ID="findForm"
    dataSource="supplyItem"
    left="130"
    top="10"
    cellPadding="4"
    numCols="6"
>
    <fields>
        <field name="SKU"/>
        <field name="itemName" editorType="ComboBoxItem" optionDataSource="supplyItem" pickListWidth="250"/>
        <field name="findInCategory" editorType="CheckboxItem"
            title="Use category" defaultValue="true"/>
    </fields>
    <findItems><JS>
        function (categoryName) {
            var findValues;
            
            if (this.getValue('findInCategory') && lCategoryTree.selection.anySelected()) {
                // use tree category and form values
                if (categoryName == null) categoryName = lCategoryTree.getSelectedRecord().categoryName;
                findValues = {category:categoryName};
                isc.addProperties(findValues, this.getValues());
                
            } else if (categoryName == null) {
                // use form values only
                findValues = this.getValues();
                
            } else {
                // use tree category only
                findValues = {category:categoryName};
            }
            
            lItemList.filterData(findValues);
            
            lItemDetailTabs.clearDetails();
        }
    </JS></findItems>
</SearchForm>

<ListGrid
    ID="itemList"
    dataSource="supplyItem"
    useAllDataSourceFields="true"
    recordClick="this.updateDetails()"
    canEdit="true"
    modalEditing="true"
    cellChanged="this.updateDetails()"
    alternateRecordStyles="true"
    canDragRecordsOut="true"
    hoverWidth="200"
    hoverHeight="20"
    cellContextClick="return lItemListMenu.showContextMenu()"
    selectionType="single"
>
    <fields>
        <field name="itemName" title="Name" showHover="true"/>
        <field name="unitCost" formatCellValue="return isc.NumberUtil.toCurrencyString(parseFloat(value))"
               editorType="SpinnerItem">
            <editorProperties step="0.01"/>
        </field>
        <field name="SKU" canEdit="false"/>
        <field name="description" showHover="true"/>
        <field name="category" canEdit="false"/>
        <field name="inStock" width="55" align="center">
            <formatCellValue><JS>
                function (value, record, field, rowNum, colNum) {
                    if (value) return isc.Canvas.imgHTML("icons/16/checked.png",13,13);
                    else return isc.Canvas.imgHTML("icons/16/unchecked.png",13,13)
                }
            </JS></formatCellValue>
        </field>
        <field name="nextShipment" showIf="false"/>
    </fields>
    
    
    <updateDetails><JS>
        function () {
        
            var record = lItemList.getSelectedRecord();
            if (record == null) return lItemDetailTabs.clearDetails();
            
            if (lItemDetailTabs.getSelectedTabNumber() == 0) {
                // View tab: show selected record
                lItemViewer.setData(record) 
            } else {
                // Edit tab: edit selected record
                lItemDetailTabs.updateTab("editTab", lEditForm);
                lEditForm.editRecord(record);
            }
        }
    </JS></updateDetails>

</ListGrid>

<Menu 
    ID="itemListMenu"
>
    <data>
        <item title="Add New Item" icon="icons/16/icon_add.png">
            <click>
                lItemList.selection.deselectAll();
                lItemDetailTabs.selectTab(1);
                lItemList.updateDetails();
            </click>
        </item>
        <item isSeparator="true"/>
        <item title="Show Details" icon="icons/16/icon_view.png"
              click="lItemDetailTabs.selectTab(0); lItemList.updateDetails()"/>
        <item title="Edit Item" icon="icons/16/icon_edit.png"
              click="lItemDetailTabs.selectTab(1); lItemList.updateDetails()"/>
        <item title="Delete Item" icon="icons/16/icon_delete.png"
              click="lItemList.removeSelectedData(); lItemDetailTabs.clearDetails()"/>
    </data>
</Menu>

<TabSet
    ID="itemDetailTabs"
    tabSelected="lItemList.updateDetails()"
>    
    <tabs>
        <tab title="View" pane="itemViewer" ID="viewTab" width="70" icon="icons/16/icon_view.png"/>
        <tab title="Edit" pane="editForm" ID="editTab" width="70" icon="icons/16/icon_edit.png"/>
    </tabs>
    <clearDetails><JS>
        function () {
            var selectedTab = lItemDetailTabs.getSelectedTabNumber();
            if (selectedTab == 0) {
                // View tab: show empty message
                lItemViewer.setData();
            } else if (selectedTab == 1) {
                // Edit tab: show new record editor, or empty message
                if (lCategoryTree.getSelectedRecord() != null) {
                    lItemDetailTabs.updateTab("editTab", lEditForm);
                    lEditForm.editNewRecord({category:lCategoryTree.getSelectedRecord().categoryName});
                } else {
                    lItemDetailTabs.updateTab("editTab", lEditorMessage);
                }
            }
        }
    </JS></clearDetails>

</TabSet>

<JS>
findForm.getItem("itemName").addProperties({
    getPickListFilterCriteria : function () {
        var criteria = this.Super("getPickListFilterCriteria", arguments);
        if (this.form.getValue('findInCategory') && categoryTree.selection.anySelected()) {
            criteria.category = categoryTree.getSelectedRecord().categoryName;
        }
        return criteria
     }
});

categoryTree.fetchData();
</JS>

<JS>

var lCategoryTree = categoryTree;
var lFindForm = findForm;
var lEditForm = editForm;
var lItemList = itemList;
var lItemListMenu = itemListMenu;
var lItemDetailTabs = itemDetailTabs;
var lItemViewer = itemViewer;
var lEditorMessage = editorMessage;
</JS>

</isomorphicXML>