Trouble with wxpython when using sizer with checklistbox

Question

When I try to use a sizer with the checklist box everything overlaps terribly. My goal is to have the checklistbox on the left and the input fields on the right of the window. I do not know whether the sizer is the solution but I thought it should offer a way to keep the checklistbox on the left and the input fields on the right. Ideally I would also have the ok button and cancel button centered underneath everything else.

import wx
import wx.lib.scrolledpanel



class MyForm(wx.Frame):

    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY, title='My Form')

        # Add a panel so it looks correct on all platforms
        self.panel = wx.Panel(self, wx.ID_ANY)
        # panel2 = wx.lib.scrolledpanel.ScrolledPanel(self,-1, size=(200,400), pos=(0,28), style=wx.SIMPLE_BORDER)
        # panel2.SetupScrolling()

        # bmp = wx.ArtProvider.GetBitmap(wx.ART_INFORMATION, wx.ART_OTHER, (16, 16))
        # titleIco = wx.StaticBitmap(self.panel, wx.ID_ANY, bmp)
        title = wx.StaticText(self.panel, wx.ID_ANY, 'My Title')





        # bmp = wx.ArtProvider.GetBitmap(wx.ART_TIP, wx.ART_OTHER, (16, 16))
        # inputOneIco = wx.StaticBitmap(self.panel, wx.ID_ANY, bmp)
        labelOne = wx.StaticText(self.panel, wx.ID_ANY, 'Input 1')
        inputTxtOne = wx.TextCtrl(self.panel, wx.ID_ANY, '')

        # inputTwoIco = wx.StaticBitmap(self.panel, wx.ID_ANY, bmp)
        labelTwo = wx.StaticText(self.panel, wx.ID_ANY, 'Input 2')
        inputTxtTwo = wx.TextCtrl(self.panel, wx.ID_ANY,'')

        # inputThreeIco = wx.StaticBitmap(self.panel, wx.ID_ANY, bmp)
        # labelThree = wx.StaticText(self.panel, wx.ID_ANY, 'Input 3')
        # inputTxtThree = wx.TextCtrl(self.panel, wx.ID_ANY, '')

        # inputFourIco = wx.StaticBitmap(self.panel, wx.ID_ANY, bmp)
        # labelFour = wx.StaticText(self.panel, wx.ID_ANY, 'Input 4')
        # inputTxtFour = wx.TextCtrl(self.panel, wx.ID_ANY, '')

        okBtn = wx.Button(self.panel, wx.ID_ANY, 'OK')
        cancelBtn = wx.Button(self.panel, wx.ID_ANY, 'Cancel')
        self.Bind(wx.EVT_BUTTON, self.onOK, okBtn)
        self.Bind(wx.EVT_BUTTON, self.onCancel, cancelBtn)

        finalSizer      = wx.BoxSizer(wx.HORIZONTAL)
        topSizer        = wx.BoxSizer(wx.VERTICAL)
        titleSizer      = wx.BoxSizer(wx.HORIZONTAL)
        inputOneSizer   = wx.BoxSizer(wx.HORIZONTAL)
        inputTwoSizer   = wx.BoxSizer(wx.HORIZONTAL)
        checkSizer      = wx.BoxSizer(wx.HORIZONTAL)
        # inputThreeSizer = wx.BoxSizer(wx.HORIZONTAL)
        # inputFourSizer  = wx.BoxSizer(wx.HORIZONTAL)
        btnSizer        = wx.BoxSizer(wx.HORIZONTAL)

        # titleSizer.Add(titleIco, 0, wx.ALL, 5)
        titleSizer.Add(title, 0, wx.ALL, 5)

        # inputOneSizer.Add(inputOneIco, 0, wx.ALL, 5)
        inputOneSizer.Add(labelOne, 0, wx.ALL, 5)

        inputOneSizer.Add(inputTxtOne, 1, wx.ALL|wx.EXPAND, 5)

        # inputTwoSizer.Add(inputTwoIco, 0, wx.ALL, 5)
        inputTwoSizer.Add(labelTwo, 0, wx.ALL, 5)
        inputTwoSizer.Add(inputTxtTwo, 1, wx.ALL|wx.EXPAND, 5)

        # inputThreeSizer.Add(inputThreeIco, 0, wx.ALL, 5)
        # inputThreeSizer.Add(labelThree, 0, wx.ALL, 5)
        # inputThreeSizer.Add(inputTxtThree, 1, wx.ALL|wx.EXPAND, 5)

        # inputFourSizer.Add(inputFourIco, 0, wx.ALL, 5)
        # inputFourSizer.Add(labelFour, 0, wx.ALL, 5)
        # inputFourSizer.Add(inputTxtFour, 1, wx.ALL|wx.EXPAND, 5)

        sampleList = ['zero', 'one', 'two', 'three', 'four', 'five',
                      'six', 'seven', 'eight', 'nine', 'ten', 'eleven',
                      'twelve', 'thirteen', 'fourteen']

        lb = wx.CheckListBox(self, -1, (10, 10), (200,400), sampleList)
        self.Bind(wx.EVT_LISTBOX, self.EvtListBox, lb)
        self.Bind(wx.EVT_CHECKLISTBOX, self.EvtCheckListBox, lb)
        lb.SetSelection(0)
        self.lb = lb
        checkSizer.Add(lb, 0, wx.ALL |wx.EXPAND | wx.LEFT, 5)
        checkSizer.Add(wx.StaticLine(self.panel), 0, wx.ALL|wx.EXPAND, 5)


        btnSizer.Add(okBtn, 0, wx.ALL, 5)
        btnSizer.Add(cancelBtn, 0, wx.ALL, 5)

        topSizer.Add(titleSizer, 0, wx.CENTER)
        # topSizer.Add(wx.StaticLine(self.panel,), 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(inputOneSizer, 0, wx.ALL|wx.EXPAND | wx.RIGHT, 5)
        topSizer.Add(inputTwoSizer, 0, wx.ALL|wx.EXPAND | wx.RIGHT, 5)
        # topSizer.Add(inputThreeSizer, 0, wx.ALL|wx.EXPAND, 5)
        # topSizer.Add(inputFourSizer, 0, wx.ALL|wx.EXPAND, 5)
        # topSizer.Add(wx.StaticLine(self.panel), 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(btnSizer, 0, wx.ALL|wx.CENTER, 5)



        # finalSizer.Add(lb, proportion=1, flag=wx.TOP | wx.EXPAND | wx.LEFT, border=5)
        finalSizer.Add(checkSizer, 1, wx.EXPAND | wx.LEFT, 5)
        # finalSizer.Add(inputTwoSizer, 1, wx.EXPAND | wx.LEFT, 5)

        finalSizer.Add(topSizer, 1, wx.EXPAND | wx.RIGHT, 5)

        self.panel.SetSizer(finalSizer)
        finalSizer.Fit(self)


    def EvtListBox(self, event):
        self.log.WriteText('EvtListBox: %s\n' % event.GetString())

    def EvtCheckListBox(self, event):
        index = event.GetSelection()
        label = self.lb.GetString(index)
        status = 'un'
        if self.lb.IsChecked(index):
            status = ''
        self.log.WriteText('Box %s is %schecked \n' % (label, status))
        self.lb.SetSelection(index)    # so that (un)checking also selects (moves the highlight)

    def onOK(self, event):
        # Do something
        print 'onOK handler'

    def onCancel(self, event):
        self.closeProgram()

    def closeProgram(self):
        self.Close()




# Run the program
if __name__ == '__main__':
    app = wx.PySimpleApp()
    frame = MyForm().Show()

    # import wx.lib.inspection
    # wx.lib.inspection.InspectionTool().Show()
    app.MainLoop()

Answer 1

I have found its easier to seperate out concerns

import wx
import wx.lib.scrolledpanel

class SizerMixin:
    def _hz(self,*widgets):
        sz = wx.BoxSizer(wx.HORIZONTAL)
        sz.AddMany(widgets)
        return sz
    def _label(self,label_text,*widgets,**kwargs):
        label_size = kwargs.pop("label_size",100)
        return self._hz(
            (wx.StaticText(self,-1,label_text,size=(label_size,-1)),0,wx.ALIGN_CENTER_VERTICAL),
            *widgets)

class MainPanel(wx.Panel,SizerMixin):
    def __init__(self,parent):
        wx.Panel.__init__(self,parent,-1)
        self.CreateWidgets()
        self.SetSizer(self.DoLayout())
        self.Fit()
    def DoLayout(self):
        sb = wx.StaticBox(self,-1,"Main Title")
        sz = wx.StaticBoxSizer(sb,wx.VERTICAL)
        title = wx.StaticText(self,-1,"A Title Goes Here")
        sz.Add(title,0,wx.ALIGN_CENTER|wx.EXPAND)
        sz.Add(wx.StaticLine(self,-1),0,wx.EXPAND,5) #seperator

        body_sizer = wx.BoxSizer(wx.HORIZONTAL)
        rightSideInputs = wx.BoxSizer(wx.VERTICAL)

        rightSideInputs.Add(self._label("Input 1:",self._widgets["input1"]),0,wx.EXPAND|wx.ALL,5)
        rightSideInputs.Add(self._label("Input 2:",self._widgets["input2"]),0,wx.EXPAND|wx.ALL,5)
        body_sizer.Add(self._widgets["checklist"],1,wx.EXPAND)
        body_sizer.Add(rightSideInputs,1,wx.EXPAND)

        sz.Add(body_sizer)

        button_sizer = wx.StdDialogButtonSizer()
        ok_btn = wx.Button(self,wx.ID_OK)
        cancel_btn = wx.Button(self,wx.ID_CANCEL)
        button_sizer.AddButton(ok_btn)
        button_sizer.AddButton(cancel_btn)
        button_sizer.Realize()
        sz.Add(button_sizer)
        return sz
    def CreateWidgets(self):
        sampleList = ['zero', 'one', 'two', 'three', 'four', 'five',
                      'six', 'seven', 'eight', 'nine', 'ten', 'eleven',
                      'twelve', 'thirteen', 'fourteen']
        self._widgets = {
            "input1":wx.TextCtrl(self,-1),
            "input2":wx.TextCtrl(self,-1),
            "checklist":wx.CheckListBox(self,-1,choices=sampleList)
        }

class MyForm(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY, title='My Form')
        self.panel = MainPanel(self)
        self.Layout()
        self.Fit()




    def EvtListBox(self, event):
        self.log.WriteText('EvtListBox: %s\n' % event.GetString())

    def EvtCheckListBox(self, event):
        index = event.GetSelection()
        label = self.lb.GetString(index)
        status = 'un'
        if self.lb.IsChecked(index):
            status = ''
        self.log.WriteText('Box %s is %schecked \n' % (label, status))
        self.lb.SetSelection(index)    # so that (un)checking also selects (moves the highlight)

    def onOK(self, event):
        # Do something
        print 'onOK handler'

    def onCancel(self, event):
        self.closeProgram()

    def closeProgram(self):
        self.Close()




# Run the program
if __name__ == '__main__':
    app = wx.PySimpleApp()
    frame = MyForm().Show()

    # import wx.lib.inspection
    # wx.lib.inspection.InspectionTool().Show()
    app.MainLoop()