I am working on extjs 4,
I have a grid panel like this
It works fine on CHROME but on IE 11,
the column of grid doesn't render properly.
code:
GRID = Ext.create('Ext.grid.Panel', {
title: 'Popup',
frame: true,
selModel: checkboxselection,
store: Ext.data.StoreManager.lookup('popupStore'),
scrollable: true,
columns: _COLS,
features: [groupingFeature],
flex: 90,
autoHeight:true,
autoWidth:true,
renderTo: 'details',
scroll: true,
viewConfig: {
style: {
overflowX: 'hidden'
}
},
listeners: {
itemclick: function(dv, record, item, index, e) {
SELECTED_GROUP_VALUE = record.get('GROUP_FIELD');
if(selectionType =='SINGLE'){
setValue(getProdId(), record);
}
},
beforeselect: function(grid, record, index, eOpts) { },
groupclick: function (view, node, group, e, eOpts) { },
headerclick: function(){
}
},
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
grid = Ext.ComponentQuery.query('#grid-item-id')[0];
grid.suspendLayout = true;
this.callParent(arguments);
}
});
I have tried viewport and other container bur still facing the same issue..
Could anybody please help.
Thanks
try grid config, columnWidths:["100%"]
Related
I'm back on the project of catalogue viewer app, and after updating to the last sencha release, I have the same problem I had a couple of month ago...the carousel don't recognize the onTap event or, it won't load correctly.
The app is quite simple, the structure is the following:
company name
list of catalogues
detailcard with the catalogue pages (3 per row)
carousel starting from the page tapped
The fact that when I use the app NOT compiled with sencha cmd, it work very smoothly, and problemless, but when I build the app (also production and packaging) with sencha cmd, it won't work.
The dataview show all the image, and when I click one of them, it pop-up the carousel, but empty. I tried to debug, and it won't do the initialize, but why only in the build version?
The code that I use is the following:
Ext.define('CIAM_app.view.Cataloghi', {
extend: 'Ext.NestedList',
xtype: 'cataloghi',
requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
fullscreen: true,
config: {
iconCls: 'doc',
iconMask: true,
title: 'Cataloghi',
styleHtmlContent: true,
store: 'lista_cataloghiStore',
variableHeights: true,
listConfig: {
itemTpl: '<tpl if="leaf == false"><img src="{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>',
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var detailCard = nestedList.getDetailCard();
var pagina = record.get('immagini_catalogo');
var n = record.get('pagine_catalogo');
items = [];
if (detailCard.getData() != null) {
detailCard.getStore().removeAll(true, true);
}
for (i = 1; i <= n; i++) {
items.push({
src: 'gallery/' + pagina + '/' + i + '.jpg',
});
}
detailCard.setData(items);
detailCard.refresh();
},
},
detailCard: {
xtype: 'dataview',
itemTpl: '<img src="{src}">',
cls: 'immagine_catalogo',
listeners: {
itemtap: function(dataView, index, target, record, e, eOpts) {
Ext.Viewport.add({
xtype: 'carousel',
extend: 'Ext.Carousel',
defaultType: 'image',
initialize: function() {
this.setItems(dataView.getData());
this.setActiveItem(index);
this.callParent();
this.element.on('tap', this.onTap, this);
},
onTap: function(e, t) {
this.fireEvent('tap', this, e, t);
this.hide();
},
style: {
'background': 'rgba(206,203,203,0.87)'
},
indicator: false,
width: '100%',
height: '100%',
centered: true,
fullscreen: true,
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
},
}).show();
}
}
}
}
});
If you want to see the webapp, here's the link: http://www.ciamcostruzioni.it/CIAM_app/not_compiled/
Thanks in advance.
I have made some changes in your code. Check it:
http://jsfiddle.net/JCarlesVilaseca/NZj3N/
Ext.define('CIAM_app.view.Cataloghi', {
extend: 'Ext.NestedList',
xtype: 'cataloghi',
requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
fullscreen: true,
config: {
iconCls: 'books',
iconMask: true,
title: 'Cataloghi',
styleHtmlContent: true,
store: Ext.create('CIAM_app.store.lista_cataloghiStore'),
variableHeights: true,
listConfig: {
itemTpl: '<tpl if="leaf == false"><img src="http://www.ciamcostruzioni.it/CIAM_app/not_compiled/{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>'
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var detailCard = nestedList.getDetailCard();
var pagina = record.get('immagini_catalogo');
var n = record.get('pagine_catalogo');
items = [];
if (detailCard.getData() !== null) {
detailCard.getStore().removeAll(true, true);
}
for (i = 1; i <= n; i++) {
items.push({
src: 'http://www.ciamcostruzioni.it/CIAM_app/not_compiled/gallery/' + pagina + '/' + i + '.jpg'
});
}
detailCard.setData(items);
detailCard.refresh();
}
},
detailCard: {
xtype: 'dataview',
itemTpl: '<img src="{src}">',
cls: 'immagine_catalogo',
listeners: {
itemtap: function(dataView, index, target, record, e, eOpts) {
Ext.Viewport.add({
xtype: 'catalogues_carousel',
listeners: {
initialize: function() {
this.setItems(dataView.getData());
this.setActiveItem(index);
}
}
}).show()
}
}
}
}
});
Ext.define('CIAM_app.view.Cataloghi_carousel', {
extend: 'Ext.Carousel',
xtype: 'catalogues_carousel',
requires: ['Ext.carousel.Carousel'],
config: {
fullscreen: true,
defaultType: 'image',
style: {
'background': 'rgba(206,203,203,0.87)',
'z-index':10
},
indicator: false,
modal: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
}
},
initialize: function() {
this.element.on('tap',function() {
this.hide();
});
}
});
I have a store, a grid, a window and a few text boxes in the window. What I need is that on clicking the actioncolumn in the grid, i need to get the rowIndex of the clicked row and pass it to the window as a parameter. There, i need to load the store and get the values and set it in the appropriate textboxes. I'm not sure how to pass the rowIndex from grid to window on click. Wen I try to alert the value of a in the testfunction, it comes up as undefined. Pls help and below is my code.
Js File:
Ext.onReady(function() {
var rIx;
Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
{firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
{firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
{firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
{firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
]
});
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
rIx=rowIndex;
//var rec = grid.getStore().getAt(rowIndex);
//alert("Edit " + rec.get('firstname'));
Ext.create('MyWindow').show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
var testFunction = function(a){alert("a= "+a);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(a);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
};
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store : Ext.data.StoreManager.lookup('employeeStore'),
height: 250,
width: 250,
title: 'My Window',
items: [
{
xtype: 'textfield',
id : 'fname',
fieldLabel:'Name'
}
],
listeners: {
afterrender: Ext.Function.pass(testFunction, [rIx])
}
});
});
Ext.Function.pass(testFunction, [rIx]) takes the current value of rIx when pass is executed. The method is being called long before rIx is ever set to anything meaningful. Javascript is a pass-by-value language. It doesn't matter that eventually rIx gets set to the row index. By that point Ext.Function.pass has already been executed and the parameter it passed in was undefined.
Another approach is to just push the rowIndex onto your window as a property.
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
Ext.create('MyWindow', {rIx: rowIndex}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store : Ext.data.StoreManager.lookup('employeeStore'),
height: 250,
width: 250,
title: 'My Window',
items: [
{
xtype: 'textfield',
id : 'fname',
fieldLabel:'Name'
}
],
listeners: {
afterrender: function(win){
alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
Another option is to setup the window's afterrender listener in your handler function instead of adding it in the window's class definition. This approach is a bit cleaner in my opinion. I'm not a big fan of adding unrelated state properties to components.
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
var win = Ext.create('MyWindow');
// add the listener after to avoid bashing any listener config
// that may already exist for the window.
win.on('afterrender', function() {
// rowIndex is available in the closure
alert("idx= " + rowIndex);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(rowIndex);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
});
win.show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
Pardon me if this doesnt make much sense as i am still trying to understand certain aspects of extjs.. I m trying to to dynamically fetch a menu when a page is loaded. But seems like my MenuFetch() function does not get called.
Here is my code and here is the page:
http://srikanthrajan.com/test/
Center = Ext.create('Ext.panel.Panel', {
title: "User Admin",
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
collapsible: true,
collapseDirection: 'left',
items: [
{
defaults: {
width: 140,
layout: 'vbox',
xtype: 'linkbutton'
},
id: 'MainMenu',
xtype: 'panel',
listeners: {
load: function(menu) {
menu.show()
MenuFetch()
this.load()
}
}
}
]
}
});
//function that uses ajax to fetch menu items and add them
function MenuFetch() {
Ext.getBody().mask('loading')
var menu = Ext.ComponentManager.get('MainMenu')
menu.removeAll(true)
Ext.Ajax.request({
url: 'PanelScripts/getMenu.php',
method: 'POST',
callback: function(opt, success, response) {
var text = response.responseText;
var obj = Ext.JSON.decode(text);
if (success && !obj.failure) {
menu.add(obj)
Ext.getBody().unmask()
menu.show()
} else {
obj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Error',obj.Error)
Ext.getBody().unmask()
}
}
});
}
PS: I am not sure if I even need the load listener. Basically I need to call the menuftech function which fetches the menu items in a json format.
Use the Ext.ComponentLoader (or loader config property) to load remote content for the menu. It seems like the xtype should be 'menu' instead of 'panel' based on what you are trying to accomplish. Try something like this:
var adminPanel = Ext.create('Ext.panel.Panel', {
title: 'User Admin',
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
renderTo: Ext.getBody(),
items:[
{
xtype: 'menu',
width: 100,
loader: {
url: 'foo.bar',
autoLoad: true,
callback: function(loader, success, response, options) {
var menu = adminPanel.down('menu');
if (success) {
menu.add(response.items);
menu.show();
}
},
scope: this
}
}
]
}
});
I have a panel whose items are a list and a panel like below
When I click on a button, I want to hide this panel. So far, I managed to do that, but this is what I get
I would like to know how to remove this grey space form the bottom of the panel.
I already this but it's not working :
this.toolsPnl.hide({type:'slide', direction:'up'});
this.doComponentLayout();
this.doLayout();
Update : Code
this.pasteBtn = new Ext.Button({
cls:'paste-copy-tools-panel',
text: 'Coller',
ui: 'normal',
handler : this.onPasteBtnTap,
scope:this
});
this.cancelBtn = new Ext.Button({
cls:'cancel-copy-tools-panel',
text: 'Annuler',
ui: 'normal',
handler: this.onCancelBtnTap,
scope:this
});
this.toolsPnl = new Ext.Panel({
layout:{type:'hbox', align:'stretch'},
height:40,
cls:'document-tools-panel',
hidden:true,
items:[this.pasteBtn,this.cancelBtn]
});
this.currentFolderPnl = new Ext.Panel({
cls:'document-current-folder-panel',
html:'/'
});
this.list = new Ext.List({
flex:1,
cls:'document-list',
id: 'document-list',
store: app.stores.Document,
itemTpl: app.templates.document
});
app.views.DocumentList.superclass.constructor.call(this, {
selectedCls : "x-item-selected",
dockedItems: [{
xtype: 'toolbar',
ui:'dark',
title: 'Documents',
items:[this.backBtn,{xtype:'spacer'},this.newBtn]
}],
layout: 'vbox',
items: [
this.currentFolderPnl,
this.list,
this.toolsPnl,
]
});
May help you with some hack. The main trick is in fixListHeight function, but for showing tools panel for the first time I have to call doComponentLayout for its container first. Don't know why this functionality doesn't work out of the box... have the feeling there is something I have missed. Nevertheless, here is the code.
new Ext.Application({
launch: function() {
// helper property
// indicates whether toolsPnl was shown already
this.first = true;
this.viewport = new Ext.TabPanel({
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'spacer'
}, {
text: 'show',
listeners: {
tap: function (btn) {
var panel = Ext.getCmp('toolsPnl');
if (panel.isHidden()) {
panel.show({type:'slide', direction:'up'});
btn.setText('hide');
} else {
panel.hide({type:'slide', direction:'up'});
btn.setText('show');
this.fixListHeight();
}
},
scope: this
}
}]
}],
tabBar: {
layout: {
type: 'fit'
}
},
tabBarDock: 'bottom',
items: [{
title: 'Some tabs here...',
id: 'docTab',
iconCls: 'favorites',
layout: 'card',
dockedItems: [{
id: 'toolsPnl',
dock: 'bottom',
html: 'Tools panel',
style: {
'background-color': 'lightblue',
'line-height': '2em',
'text-align': 'center',
'height': '40px',
'width': '100%'
},
hidden:true,
listeners: {
show: function () {
if (this.first) {
Ext.getCmp('docTab').doComponentLayout();
this.fixListHeight();
this.first = false;
}
Ext.defer(function () {
this.fixListHeight(-1);
}, 250, this);
},
scope: this
}
}],
items : [{
xtype: 'list',
id: 'docList',
itemTpl: '{item}',
store: new Ext.data.Store({
data: [{item: 'Some data in the list...'}],
fields: ['item']
})
}]
}]
});
this.fixListHeight = function (direction) {
var panel = Ext.getCmp('toolsPnl'),
tab = Ext.getCmp('docTab'),
list = Ext.getCmp('docList'),
el,
h = list.getHeight(),
dh = panel.getHeight(),
dir = direction || 1;
el = tab.getEl().child('.x-panel-body');
el.setHeight(h + dh * dir);
el.child('.x-list').setHeight(h + dh * dir);
el.down('.x-scroller').setHeight(h + dh * dir);
};
}
});
That looks like the default sencha touch grey. A simple work around would be adding the code below to the panel
style:'background-color:White'
I am having a very hard time understanding why i can't go back to the previous panel within my application. Enough talk, some code
appsDetails = Ext.extend(Ext.Panel, {
layout: 'fit',
scroll: 'verticall',
initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
items: [{
ui: 'back',
scope: 'this',
handler: function() {
console.log(this.ownerCt) //This returns "undefined"
this.ownerCt.setActiveItem(this.prevCard, {
type: 'slide',
reverse: true,
scope: this,
after: function() {
this.destroy();
}
})
}
}]
}];
this.items = [{
styleHtmlContent: true,
tpl: description,
data: this.record.data
}];
appsDetails.superclass.initComponent.call(this);
}
});
I am getting to this view above by using this code below in the previous panel
selection: function(list, index) {
if (index[0] !== undefined) {
var details = new appsDetails({
homeCard: this.appsPanel,
record: index[0],
});
this.setActiveItem(details, {type: 'slide', direction: 'left'})
}
}
I have no problem getting to the desired panel but i can't come back the previous one.
Thx for your help
You are passing a string object with value 'this'. Change this line: scope:'this' in scope:this