I am working in extjs4. I have collapsible panel as=
xtype: 'panel',
autoHeight : true,
border: false,
itemId : 'dashmetrics',
frame: false,
cls : 'matrix-tab-panel-container',
bodyCls : 'matrix-tab-panel-container-body',
layout: 'form',
title : 'Panel1'
collapsible : true,
titleCollapse : true,
padding:'3px 0 3px 0',
stateful: true,
getState: function() {
return {
collapsed: this.collapsed
};
},
applyState : function(state){
if(state){
Ext.apply(this, state);
}
},
stateEvents: ['collapse', 'expand']
i want to maintain state of this expand and collapse. I tried as above, But is getState() is always returning false. So how to maintain panel's collapse and expand state in extjs4?
Related
I made a panel in extJS that has tbar. I want to change the colour and style of text of the items in the tbar. Specifically I would like "Report Manager"'s colour to be BLUE and it should be underlined.
function panelReports(){
Ext.create('Ext.panel.Panel', {
layout: {
type: 'auto',
align: 'left'
},
renderTo: document.body,
tbar: [
{
enableToggle: true,
text: 'Report Manager',
scope : this,
handler : treeReportManager
}]
});
}
I tried this and it worked for me..
tbar: [
{
enableToggle: true,
text: '<u> Report Manager </u>',
style:{
color: 'blue'
} ,
scope : this,
handler : treeReportManager
}]
How can I use this to show by a div:
Html
<div class='clickable'>Tap me</div>
JS code (tap is connected to the div element above)
tap : function(e) {
overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
However this is a nightmare, I'll get these errors with e.getTarget() or e.target, it does work with .show() but its positioning is then wrong. What is the correct way to do this?
Uncaught TypeError: Object #<HTMLTableCellElement> has no method 'getPageBox'
You probably want to use event delegation on your HTML div tag. So you can give your div tag an id:
<div class='clickable' id='myId'>Tap me</div>
listeners : {
tap: {
fn: function() {},
element: 'element',
delegate: '#myId'
}
}
You can hack it by overlaying an invisible Ext.Button over your html div! You'll just have to add a painted function to render the new button...
tpl: '<div class='clickable'>Tap me</div>'
.......
listeners: {
painted : function(){
var clickable = Ext.DomQuery.select('.pageClass .clickable')[0];
var invisibleButton = new Ext.Button({
text: 'whatever',
renderTo: clickable,
cls: 'something',
width: '100%',
// set styles as transparent bg, no border etc...
handler: function(){
var overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(this);
}
});
}
}
Tested and working.
You need to do it like this:
tap : function(e) {
var overlay = Ext.create('Ext.Panel', {
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
That is to say, do not add to viewport ... create the panel instead.
I did the following code to list the searched items in the grid.
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 500,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
}],
buttons:[
{
text:'Search',
formBind: true,
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
console.log(response); //<--- the server response
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: "searchUsers",
plugins: [rowEditing],
width: 900,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
}]
});
}
});
}
}
}
]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to Fit the grid inside the Search User window
Add an icon in the grid,so that by clicking on that icon the values from the
grid must be populated to entry form for update.
Here with your code, I've found something:
Use renderTo: "searchUsers" for both FormPanel and the Grid: You add the FormPanel to the window, so this config should not exist (Please refer to renderTo document). So remove them.
Use frame: true for both FormPanel and the Grid: There you have the window as container, so the Form and Grid have been framed inside. So remove them.
You dynamically add the Grid on searching: I recommend you create the result Grid as a separate component (not inside success's result) and specify both Form and Grid as items' components of window. You still can config the Grid with hidden. When Ajax is successful, you can fill the Grid with data returned and show it.
"add an icon in the grid": You can specify a new column in columns of the Grid and use renderer config of grid panel to show the button. For example:
renderer: function(v) {
return "<input type='button'.../>";
}
Finally, you can catch the itemclick event of the grid to know if the column of the clicked cell is the cell which contains the button, the entry will be populated to somewhere you want. Don't forget to specify the grid's Selection model as cellmodel
I understood that by calling MyDetailView.Update(record.data) I send record.data to MyDetailView and can access them in the xtemplate:
tpl:'<h1>{title}></h1>'
Additionally I want to use record.data in an item of xtype 'map':
items: [
{
xtype: 'map',
getLocation: true,
padding: '20 0 0 0',
mapOptions: {
center : new google.maps.LatLng(lng, lat), // <-- here record.data.lat
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
How can I access the data in MyDetailView?
Thanks
----------------EDIT------------------
I add my complete code. In the list view I call an AppDetailcard.update(record.data).
var AppDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: false,
tpl: 'my {lat}', //<-- here it works
fullscreen: true,
dockedItems: [AppDetailcardToolbar],
items : [
{
xtype: 'map',
getLocation: true,
mapOptions: {
center : new google.maps.LatLng(data.lat, data.lng), //<-- here it does not
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
You have to also push the new record into your items array.
this.down('map').setMapCenter({
latitude: newRecord.data.latitude,
longitude: newRecord.data.longitude
});
I usually push records, not data, into the view and then use the updateRecord event to accept that record and push it further down the items array.
Look at the navigationview example on the Sencha site, in the Show.js view file, where they do exactly that.
I place tabPanel's tabBar on top postion and keep bottom style, so refer to this thread, and the display result is ok but the tab bar not extend all space, at the top right corner of page shows background. ( about 30px at my 1024px resolution).
when use Chrome to view it, if I open Developer Tools and then close it, then tab bar becomes ok. (occupy all screen with).
I try tabPanel.doLayout() or viewPort.doLayout(), both not works.
Please give any advice, Thank you !
var tabPanel = new Ext.TabPanel({
id:'tabPanel',
tabBar : {
dock : 'top',
layout : { pack : 'right' },
},
listeners: {
single: true,
afterlayout: function (panel) {
var dom = Ext.select('.x-docked-top', panel.getEl().dom).first().dom;
dom.className = dom.className.replace('x-docked-top', 'x-docked-bottom');
}
},
defaults: {
scroll: 'vertical'
},
cardSwitchAnimation: {
type: 'slide',
duration: 1
},
flex: 1,
ui: 'light',
items : [
{
iconCls : 'icon1',
items: [ scanPanel ]
},
{
iconCls : 'icon2',
items: [ logPanel ]
}
]
});
...
var viewPort = new Ext.Panel({
fullscreen : true,
layout : {
type : 'fit',
align : 'stretch'
},
items : [ tabPanel]
});
the Ext.Panel has a default setting for padding, try to move the tabBar into Ext.Panel.