1

I am currently looking to dynamically add check boxes to a view from a controller in ExtJS.

New data will be sent, and I wish to add check boxes to enable or disable things being shown. I have an idea on how I will do the enabling and disabling, but I am stuck on trying to add to the view.

I have tried 

This.lookupReference('config').menu.config.items(push({
        xtype: 'checkbox',
        fieldLabel: 'test 2',
        checked: false
    }));

This only worked when I reopened the window.

I tried searching for a way to refresh the view, but I could not find a way.

Is there a better way to achieve this functionality?

EDIT: in particular I need to refresh the tbar.

EDIT 2: View's tbar

tbar: {
xtype: 'toolbar',
layout: {
    overflowHandler: 'Menu'
},
items: [ '->', {
    text: 'Config',
    reference: 'graphConfig',
    menu: {
        items: [{
            xtype: 'checkbox',
            fieldLabel: 'Test Checkbox',
            checked: false,
        }]
    }
}]
}
Phased
  • 105
  • 1
  • 7
  • What about displaying /hiding components? you can add them to the view and control their visibility from the controller. – hasnae Jan 27 '16 at 12:42
  • The idea was to remove the need to constantly update the code, but let it maintain its self. new sensor data will come into the web app from a robot, if we ever add new components, or try to graph something else, it would require changing the code of the view. – Phased Jan 27 '16 at 12:43

1 Answers1

1

You can use add() or insert() methods of any Ext.container.Container or its extension.

Fiddle to illustrate

Just select proper component where you want to add checkboxes, I describe some approaches in fiddle comments + you can check this question / answer.

Community
  • 1
  • 1
Sergey Novikov
  • 4,096
  • 7
  • 33
  • 59
  • This does work, except one thing that I should have noted, I am using window, so it renders it to the main screen, not the window (view) that I wish the check boxes to be added to. – Phased Jan 28 '16 at 00:26
  • @Phased Can you fork fiddle or just add abit more code to the question to reflect this issue? – Sergey Novikov Jan 28 '16 at 05:32
  • I am struggling to do a fiddle of a mock up. I only just started with ExtJS, everything is done, I am just adding more functionality to the app As I cant really get a fiddle working, here is 3 pics to show what I mean. http://puu.sh/mMzg5/5e01c3f39c.png http://puu.sh/mMzir/4689699730.png http://puu.sh/mMzv8/96840f1fe4.png. From those pics, 1 is from before I open the window, 2 is where the problem is, it should be displayed on the windows tbar in pic 3. – Phased Jan 28 '16 at 07:40
  • @Phased I've update my fiddle, check it now. You just have to select proper component to add you checkboxes. – Sergey Novikov Jan 28 '16 at 08:17
  • Thanks for the help, I got it adding the check boxes to the toolbar. – Phased Jan 28 '16 at 11:32