Visualforce Componets And Edit The Records in Popup window

Controller:


public with sharing class QuickEditWithComponentController {  
    public boolean displayPopUp {get; set;}  
    public Case caseObj {get; set;}  
    public String stringCase {get; set;}  
    private List <Case> caseList;  
    public PageReference Save() {  
        displayPopUp = false;  
        update caseObj;  
        return null;  
    }  
    public QuickEditWithComponentController() {  
    }  
    public List<Case> getCaseList()  
    {  
        caseList = [Select Id, CaseNumber, Status, Priority, Type, Reason, Origin from Case LIMIT 10];  
        return caseList;  
    }  
    public void closePopup()  
    {  
        displayPopUp = false;  
    }  
    public void editAction()  
    {  
        caseObj = new Map<Id, Case>(caseList).get(stringCase);  
        displayPopUp = true;  
    }  

}




 TableComponen:

   <apex:component >  

             <apex:attribute name="caseListAttribute" description="The type of record we are viewing." type="Case[]"              required="true"/>            

             <apex:pageBlock >  

                <apex:pageBlockTable value="{!caseListAttribute}" var="c" id="pageBockTableId">  

                   <apex:column headerValue="Case Number">  

                     <apex:outputLink value="/{!c.Id}">{!c.CaseNumber}</apex:outputLink>  

                </apex:column>  

             <apex:column headerValue="Status" value="{!c.Status}"/>  

            <apex:column headerValue="Priority" value="{!c.Priority}"/>  

            <apex:column headerValue="Type" value="{!c.Type}"/>  

            <apex:column headerValue="Reason" value="{!c.Reason}"/>  

            <apex:column headerValue="Origin" value="{!c.Origin}"/>  

            <apex:column headerValue="Quick Edit">  

                <apex:commandButton value="Edit" Title="Edit Case" onclick="editButtonPress('{!c.Id}'); return false;" /> 

         </apex:column>  

        </apex:pageBlockTable>  

      </apex:pageBlock>  

    </apex:component>

        QuickEditComponent:

       <apex:component >  

          <apex:attribute name="record" description="The type of record we are viewing." type="Case" required="true"/> 

         <apex:pageBlock > 

        <apex:panelgrid columns="2" id="panelGridId">  

           Case Number :  

           <apex:outputfield value="{!record.caseNumber}" Id="caseNumber"/>   

            Status :   

           <apex:inputfield value="{!record.Status}" Id="statusfield"/>   

           Priority :   

          <apex:inputfield value="{!record.Priority}" Id="priorityField"/>   

           Type :   

           <apex:inputfield value="{!record.Type}" Id="typeField"/>   

           Case Reason : 

           <apex:inputfield value="{!record.Reason}" Id="reasonField"/>   

           Case Origin :  

          <apex:inputfield value="{!record.Origin}" Id="oroginField"/>   

          </apex:panelgrid>  

          </apex:pageBlock>

      </apex:component>

     

         Visualforce Page:

<apex:page controller="QuickEditWithComponentController">  

    <apex:form >  

        <!-- Display Cases -->  

        <c:TableComponent caseListAttribute="{!caseList}"/>   

        <!-- actionFunction to rerender Page component from custom component's button click event-->  

        <apex:actionFunction name="editButtonPress" action="{!editAction}" reRender="popup">  

            <apex:param name="fieldName" assignTo="{!stringCase}" value=""/>  

        </apex:actionFunction>  

        <!-- Quick Case edit panel-->  

        <apex:outputPanel id="popup" >  

            <apex:outputPanel styleClass="quickEditPanel " layout="block"   rendered="{!displayPopUp}">   

                

                

                <apex:commandButton value="X" title="Close the popup" action="{!closePopup}" styleClass="closeButton" rerender="popup"/>  

                <c:QuickEditComponent record="{!caseObj}"/>  

                

                <apex:commandButton title="Save Case" value="Save" action="{!Save}" styleClass="saveButton" rerender="pageBockTableId, popup"/>  

            </apex:outputPanel>  

        </apex:outputPanel>  

    </apex:form>  

    <style type="text/css">  

        .quickEditPanel {  

        background-color: white;  

        border-style: solid;  

        border-width: 2px;  

        padding: 10px;  

        position: absolute;  

        z-index: 9999;  

        width: 33%;  

        top: 20%;  

        left: 33%;  

        } 

    </style>

</apex:page>