How can I add a panel to the dockedItems of a gridPanel in extended js?
On a gridpanel I need to add a panel to it's docked items on the bottom of it. This will be used for a live newsfeed
I think you can just add the panel to bbar.
bbar:[Ext.create('Ext.panel.Panel',{
width:'100%',
height:100,
title:'Live Feed',
items:[{text:'The Docked Panel'}],
}),{text:'hello'}]
I have created a fiddle.. refer it.JSFIDDLE
Related
I have a tabpanel as follows-
var topTab = Ext.create('Ext.tab.Panel', {
region: 'center'
});
I am adding tab items on click of a button
topTab.add(someGrid);
this works well. Only the issue is, this grid is not getting fit into the tab item. I want to set layout = 'fit' to this tab.
I tried adding
topTab.items[0].setLayout but it is not working. Also tried giving height to the grid.
Any suggestions. (Using ExtJs 6)
With sencha ext js I can wrap my datagrid in a viewport widget set to layout: fit which means the grid has a height of 100% and the vertical scrollbars are visible on the grid so the column headers stay fixed when vertically is scrolled.
Ext.widget('viewport', {
layout: 'fit'
,items: [{
xtype: 'grid'
// ... your grid config
}]
});
I have googled about the kendo-ui grid and also did a sample project where I could not achieve that the grid has a height of 100% and show vertical scrollbars the same time. The height of the kendo ui grid must be set in pixel. But sencha ext js allow to set kind of 100% height for the grid by using such a viewport widget.
Does such a widget also exist for kendo ui?
With this code from the kendo ui documents:
http://docs.kendoui.com/getting-started/web/grid/walkthrough
$(window).resize(function () {
var gridElement = $("#grid"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function () {
otherElementsHeight += $(this).outerHeight();
});
gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});
Not as flexible to use as the viewport from ext js but I am really glad they provide a workaround :)
How do I change the tooltip for a panel located in a tab panel? Originally, I created a tooltip using the tabtip parameter of the panel constructor as the panel was added to the tabpanel.
You need to grab the DOM element that represents your tab's tab strip. You can use tabPanel.getTabEl(tabID) to get the strip element. You can then grab the .x-tab-strip-text span and set its qtip property.
// be sure to set your tab's itemId
var tabPanel = new Ext.TabPanel({
items: [{
title: 'one tab',
tabTip: 'something',
itemId: 'firstTabID',
html: 'haha wooo'
}]
});
// later...
// .getTabEl grabs the tabstrip DOM element
// Ext.get converts it to an Ext.Element
Ext.get( tabPanel.getTabEl('firstTabID') )
// find its descendent span that contains the tab's title text
.child('span.x-tab-strip-text', true)
// and set the tool tip
.qtip = 'something completely different!';
I'd never changed tab tooltips before so I dug around the Ext.TabPanel source looking at how they set it. I learned something too :)
I want to collapse all the panels in the accordion by default. For me first panel always active.
Guys please suggest how to fix the problem?
In ExtJS 4.2.1 you can add an extra panel, set it as hidden but expanded. You'll now be able to close all the visible panels. NOTE: This doesn't work in ExtJS 4.2.2
Using ExtJs 4.2.2,
collapsed: true
in all panels, except the one you want expanded (so collapsed: false)
It's working for sure, code tested.
I believe this is not possible, but if you need this config for visual purpose, you can create a aditional, content empty panel, and put it as a last item in accordian, and make it first to expand by default, this way you can imitate all collapsed state! Cheers!
In Accordian layout create one dummy collpased panel like
{
xtype: 'panel', // << fake hidden panel
hidden: true,
collapsed: false
}
For Example
In accordian layout items
{
xtype: 'panel', // << fake hidden panel
hidden: true,
collapsed: false
},{
xtype:'panel',
title:''Panle1'
},{
xtype:'panel',
title:''Panle2'
}
This should work.
In extjs 3.2.1 at least, simply set the property
collapsed : true
on each of the panels in your accordion layout.
I want to dispaly 'Report' hyperlink on Gridpanel paging toolbar (or Title bar)
how can i do it (click on Report link display window with grid data)
Plz help me
Thanks in advance
How about something very simple like this. (The default object for Toolbar's add method is Button. Have a look at ExtJS API documentation if you want something more fancy.)
gridPanel.getTopToolbar().add({
text:'Visit Stackoverflow.com'
});
Providing a link in the ExtJS GridPanel Titlebar.
I will be creating a button in tools config of the gridpanel, and set its ui config to plain,
also you can write the handler according to your requirements.
Ext.create('Ext.grid.Panel',{
title: 'Demo Grid Panel'
tools: [
{ ui: 'plain',text: 'Open Window', handler : function(){ //link handler}}
]
});