How To Make Ext.dataview.List Appear In Tab Panel

This gave me a big headache wondering why even a list with simple data does not get shown in the tab panel. Turns out the List’s height is zero.

Most likely in your tab panel code, you did not specify a layout.

This also applies if you place your list inside an Ext.Panel which will be placed in one of the tab panels.

Ext.define('MyTabPanel', {
    extend: 'Ext.tab.Panel',
	config: {
	    fullscreen: true,
	    tabBarPosition: 'bottom',
	    items: [
	        {
		    title: 'Patient Info',
		    iconCls: 'user',
		    layout: 'fit',
		    items: [ { xtype: 'mylist' } ]
		},
	    ],
	},
});

Just specify layout: ‘fit’ and your Ext.dataview.List should show up.

Fit Image Inside Ext.Panel

When using an Ext.Image and putting it inside an Ext.Panel, you have to specify a width and height in order for it to appear. If you do not, then it becomes blank.

There is a workaround for this. Instead of using an Ext.Image or xtype image, put the image inside another Ext.Panel and use the IMG HTML source tag in it with a special CSS style attribute included.

{
xtype: 'panel',
html: '<img src="touch/resources/images/myimage.jpg" style="max-width:100%;"/>'
},

While this may not work in Internet Explorer browser and possibly so with Windows Phone, if your target is only Android and/or iOS, then this should be no problem at all. It should work.

.NET: Forms And Panels

I was fooling around with Panels and Forms yesterday because I was checking out GUIs with .NET. Being one used to Java, I was glad that .NET came along with some good GUI frameworks since, even until now, Java, for me still could not conquer client side GUIs. Creating a stand alone application in .NET using C# and using Visual Studio 2005 as its editor is fairly easy. Just drag and drop controls from the toolkit to the form’s design area.

The problem came when I wanted to use Panels because I wanted to have sub containers within the Form so I could switch between Panels. I kept surfing for more than 3 hours but I still could not find out why when I drag controls to the design area of a Panel, instead of, say a button, a button’s icon will be displayed instead together with the word button instead of a button that looks like in HTML forms.

Turns out, a UserControl control is what you need. Totally wasted quite some valuable time looking for that and it was in a certain forum that mentioned UserControl that I thought I could check it out. To create a UserControl class, right click on the project name in Visual Studio 2005 in the solutions explorer (right side). Choose Add Item > UserControl. Then in the design area mode, you can drag and drop controls from the toolkit to there. I hope this can help newbies who are baffled why Panels do not work as containers like Forms do. In a way, they can be considered containers but for me, they really are just for grouping sets of controls. Kind of like the group boxes.