We Keep Coding

Scrollbar location is wrong in layout : fit

I have a Panel and in that panel I am loading grid dynamically.
Here is code for panel
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
itemId: 'MyGrid',
reference: 'MyGrid',
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
}
and Sample of grid.
Ext.define("MyApp.view.MYGrid", {
extend: 'Ext.grid.Panel',
alias: 'widget.MyGrid',
requires: [
'Ext.grid.filters.Filters',
'Ext.form.field.ComboBox',
],
emptyText: 'No data available.',
disableSelection: true,
margin: '3 3 0 3',
collapsible: true,
multiSelect: false,
closable: true,
columnLines: true,
uniqueFields: [],
});
initComponent: function() {
var me = this;
me.fields = me.prepareFields(me.headersXmlDoc);
me.columns = me.prepareColumns(me.headersXmlDoc);
me.store = me.prepareGridStore(me.headersXmlDoc);
this.callParent(arguments);
},
Now when Grid have enough data then both horizental and vertical scroll is coming correctly but When grid have less data with more columns scrollbar is coming down. I supposed just beow the last record but it comming in down.
All the grid is taking same height though it have a less record.
Example pic
https://i.stack.imgur.com/RKdTb.png
I want scrollbar just below the last data. By debugging I found layout : fit
But not sure how to overcome out from that.
Can anybody help me that. Thanks for help.

You need to apply overflowY as true for grid.I don't think there is some problem with fit layout.If above config doesn't work share some fiddle.

how to vary splitter height dynamically in kendoUI splitter

I am using kendoUI splitter.In the left side I have a panel bar and in the right side I have the tabs.I want to increase the splitter height dynamically with the tab content height ,can any one help me how to do this.
I have defined like
$("#splitter").kendoSplitter({ //To Display horizantal splitter
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }],
orientation: "horizontal",
resize: function () {
alert($("#splitter").find(".k-pane")[1].scrollHeight);
//$("#splitter").css("height", $("#splitter").find(".k-pane")[1].scrollHeight);
}
});
but I am gettting "0" in the alert.

You should try the following:
var splitter = $("#splitter").kendoSplitter({ //To Display horizantal splitter
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }],
orientation: "horizontal",
resize: function () {
if(splitter) {
alert(splitter.wrapper.height());
}
//you can also get the panes each on it's own.
//check: console.log(splitter); to see what options are available
}
}).data('kendoSplitter');
splitter.trigger('resize');
Also look at the docs.
JsFiddle

extjs viewport inside tabpanel

Good day, I am extjs newbie, I am using extjs 3, I had problem with my layout,I have the tabpanel and inside of the tab 1 will be the viewport, and the tab 2 is just a simple content, but when i click tab2, the viewport doesnt disappear, supposed to be the viewport is only at tab 1 or first tab. Below are my code, Please help, what if there is something wrong with my codes.
var Tabs;
var chatUi;
var content = "centerpanel";
var viewport1 = new Ext.Viewport({
//id: 'chatUiLayout',
layout: 'border',
//renderTo : 'liveChatTextLiveHelp',
items: [{
width: 150,
region: 'east',
title: 'east'
}, {
region: 'center',
title: 'center'
}]
});
Tabs = new Ext.TabPanel({
id: 'liveChatTextLiveHelp',
renderTo: 'div-live-chat',
activeTab: 0,
//region: 'center',
//hieght: 200,
plain: true,
items: [{
title: 'Live help',
items: [ //viewport1
],
html: "<div id='" + content + "' class='90pers' ></div>"
}, {
title: 'Tab 2',
html: "tab 2 content"
}
],
scope: this,
listeners: {
afterrender: function () {
viewport1.render(content);
},
scope: this
}
});

Viewports are special containers that represent the entire browser window. They will always render themselves to the body, making them bad candidates for being inside something else. Instead of a viewport you should try a panel or container instead.

You are probably looking for a border layout inside tab 1, similar to Windows with Layouts example.
Viewport cannot be hidden as it is bound to the browser window.

Collapsed panel in border-layout: Permanent expand on title-click

i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...
Working example: http://jsfiddle.net/suamikim/LNfm8/
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'panel2',
region: 'south',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.
I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.
I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.
Thanks

Add after titleCollapse property
floatable: false
Look at the fiddle

check item icon in sencha

I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?

If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start