I posted this at the Ext forums a couple of days ago, but no response, so maybe better luck here.
I currently have a combo box loading data from php through ajax. Everything works fine except that when my results are returned, the DataView covers the ComboBox (fig 2.) I have included the relevant code below, so any help would be greatly appreciated.
I may be wrong, but I think I've eliminated CSS problems, as the DataView element is rendered with an absolute position.
alt text http://img.skitch.com/20100216-8t4pmbc3e6mydqqrac9qm9ucj.jpg
fig 1.
alt text http://img.skitch.com/20100216-n5t44g8rua7fawkwjrj49fk7t4.jpg
fig 2.
var dataStore = new Ext.data.JsonStore({
url: '/ajaxGateway.php',
root: 'data',
baseParams: {
useClass: 'App_GeoIP_GeoIP',
useMethod: 'getLocationsStartingWith'
},
fields: [
{name:'text', mapping:'TITLE'},
{name:'stateName', mapping:'STATE_NAME'},
{name:'regionHierarchy', mapping:'REGION_HIERARCHY'},
{name:'id', mapping:'ID', type:'int'},
{name:'lat', mapping:'LATITUDE', type:'float'},
{name:'lng', mapping:'LONGITUDE', type:'float'}
]
});
_
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-item" style="text-align:left">',
'<span>{text}, <small>{stateName}</small></span>',
'</div></tpl>'
);
_
var locationBasedRulesTree = new Ext.tree.TreePanel({
title: 'Location Based Regions',
height: 329,
width: 480,
autoScroll: true,
useArrows: true,
animate: false,
rootVisible: false,
frame: true,
enableDrag: true,
root: new Ext.tree.AsyncTreeNode({
id:'custom_root'
}),
tbar: new Ext.Toolbar(),
listeners:
{
listenersHandlers...: function(){}
}
});
_
locationBasedRulesTree.getTopToolbar().addField(
new Ext.form.ComboBox({
store: dataStore,
displayField: 'text',
typeAhead: false,
loadingText: 'Finding...',
blankText: "Search for a Place...",
width: (Ext.isIE6) ? 155:200,
hideTrigger: true,
forceSelection: true,
selectOnFocus:true,
tpl: resultTpl,
itemSelector: 'div.search-item',
enableKeyEvents: true,
onSelect: function(record)
{
selectHandler...();
},
listeners:
{
keypress : function(comboBox, event) {
keypressHandler...();
}
}
})
);
Hard to say. The first thing I would do is rip the combo box out of your layout and try rendering it to a plain page and see if you still have this issue (should be simple to do). That will immediately confirm or rule out that it's related to your particular layout. You also did not mention whether or not this happens only in particular browser/OS combinations -- if so, it could be an Ext bug. If it happens in any browser, then it's probably an issue with your layout. Try narrowing it down first then maybe it will be more obvious where to go next.
It looks almost like the listAlign or hideParent are set wrong.. I'm not seeing that in your definition, but would double-check... try setting those to configuration options manually. I've also had issues with IE when not setting the listWidth config property.
Related
I've been facing an issue on ExtJS while developing a UI:
I have a simple array which contains:
['1234','2345','3456']
I created a grid which loads some data, one of the columns in that grid should contain a combobox, which I already done by:
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
I have the editor with an empty store:
{text: "Tickets", renderer: Utils.renderCombo, dataIndex: 'ASSOC_TKT_NUMS', flex: 1,
editor: Ext.create('Ext.form.field.ComboBox', {
editable: false,
queryMode: 'local',
store: []
})
},
And on my method "renderCombo" I'm doing this, since I need to render my array in the store (which at first uses a [] as you can see above) :
renderCombo: function(value, meta, record) {
meta.column.editor.getStore().loadData(value);
}
But that does not seems to work, I even see my column empty, not a combobox.
Is there something I'm missing or something I need to change in my implementation?
Thanks in advance.
When you specify, that this column's editor field will be combobox, first of all you need to create Cell Editor and only then specify edit field
editor: Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.ComboBox', {
editable: false,
queryMode: 'local',
store: []
})
})
I have been working on developing a custom extjs console to enable author drop an asset using html5smartfile component. But somehow, the html5smartfile component is not working the way it should. The Area where an author can drop an asset is not displaying. The same is working fine if I am creating a CQ5 dialog. But in my case where i have created a window it's not working.
I have declared my smartfile component like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false
};
But this is rendering like this:
After a lot of work, I found out that the CQ5 dialog updates the view for the component but in case of my window, I have to update it myself. Thus, with a slight manipulation, i just succeeded in displaying the drag area by tweaking the declaration like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false,
listeners: {
afterlayout: function () {
this.updateView();
}
}
}
So now the panel looks like:
But still the Drag and Drop is not working. My Window declaration is like this:
win = new CQ.Ext.Window({
height : 750,
width : 700,
layout : 'anchor',
// animateTarget : btn.el,
closeAction : 'close', // Prevent destruction on Close
id : 'manageLinkWindow',
title : '<b>Multi Link Widget Dialog</b>',
frame : true,
draggable : false,
modal : false, //Mask entire page
constrain : true,
buttonAlign : 'center',
items : [assetLinkDropField]
});
}
I think you should not use
ddAccept: 'video/.*',
This allows only videos from the content finder to be dragged and dropped. It should be "image/".
Verify your other extjs properties / configs for html5smartfile if the above doesn't resolves your problem.
I need to dynamically add a column to a page that has already been loaded. The column is represented by an object that is created AFTER the .ascx page is loaded (via user interaction). On the JavaScript side of things, I have a Panel with a TabPanel:
var reportPanel = new Ext.Panel({
layout: 'fit',
items: [
new Ext.TabPanel({
id: 'reportTabs',
renderTo: 'reportTabContainer',
activeTab: 0,
autoHeight: true,
minHeight: 600,
plain: true,
stateful: true,
deferredRender: false,//allows both reports to run at once
defaults:
{
autoHeight: true
},
items: tabsConfig
})
]
});
};
an item in tabsConfig looks like this:
{{ id: 'totalOperation', title: 'Total Operation', autoLoad: {{url: '" +Url.Action("Detail","OverallReport") +"', params: 'null', scripts: true, timeout: '9000000', method: 'POST'}}
My problem is that once the column object has been created, I need to re-render the ascx page (aka the extJSpanel) after a specific AJAX call. I have tried panel.removeAll(true) as well as panel.doLayout(false,true), and that does not remove any of the elements in the panel, or refresh the page.
In short--I need to destroy an .ascx page before an AJAX call to the controller, and let the return of the AJAX call re-populate the ascx control (using return PartialView(...) ).
Any suggestions would be greatly appreciated.
Answered my question-this little snippet of code solved it:
var contentPanel = Ext.getCmp('totalOperation');
contentPanel.autoLoad = {
url: 'URL path of controller method'
};
contentPanel.doAutoLoad();
How to remove check all option is extjs 4 checkboxmodel?
Regards
When defining a grid (in 4.2.1), set this config option to:
selModel: Ext.create('Ext.selection.CheckboxModel', { showHeaderCheckbox: false }),
(The relevant part is showHeaderCheckbox :false)
I have managed to hide it using pure CSS:
Code:
.x-column-header-checkbox {display:none;}
When you're creating your checkboxmodel, try specifying injectCheckbox: false into its configuration. From the API:
Instructs the SelectionModel whether or not to inject the checkbox header automatically or not. (Note: By not placing the checkbox in manually, the grid view will need to be rendered 2x on initial render.) Supported values are a Number index, false and the strings 'first' and 'last'.
Inside grid panel afterrender event using jquery
listeners: {
afterrender: function (grid) {
$('.x-column-header-checkbox').css('display','none');
}
}
According to API, the type of "header" property is String. Said that, the correct value is ''. It has worked for me on ExtJS 3.4
this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : true, // or false, how you like
header : ''
});
heder:false in config or injectCheckBoxHeader = false hide the entire column. CSS solution is class based so any other widget using the same selection model would also hide the entire check.
In ExtJS 4 a header config can be provided as below to display a blank or custom text in the header.
getHeaderConfig: function() {
var me = this;
showCheck = false;
return {
isCheckerHd: showCheck,
text : ' ',
width: me.headerWidth,
sortable: false,
draggable: false,
resizable: false,
hideable: false,
menuDisabled: true,
dataIndex: '',
cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
renderer: Ext.Function.bind(me.renderer, me),
//me.renderEmpty : renders a blank header over a check box column
editRenderer: me.editRenderer || me.renderEmpty,
locked: me.hasLockedHeader()
};
},
I encountered this issue in ExtJS 4.0.7 version.
First I removed checkbox layout:
.rn-grid-without-selectall .x-column-header-checkbox .x-column-header-text
{
display: none !important;
}
Then I used the following code in afterrender listener of the grid:
afterrender: function (grid) {
this.columns[0].isCheckerHd = false;
}
It is not a good solution but it can be used as a starting point.
Thanks for all the good hints here.
For Sencha 3.4, this is the extremely simple pure CSS I ended up using,
My_Panel_With_a_Grid_Without_Header_CheckBox = Ext.extend(Ext.Panel, {....
cls: 'innerpanel hiddeGridCheckBoxOnSingleSelect',
....}
in my CCS file:
.hiddeGridCheckBoxOnSingleSelect .x-grid3-hd-checker {
visibility:hidden
}
Define {Header: false} in checkboxselectionModel
this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : false,
header : false
});
I'm experiencing a problem where certain values returned from the server will throw a "code 12" in firebug and cause a floating "Loading" message in extjs that never goes away seemingly hanging my page. This problem only happens in firefox. I've found that I can replicate the problem consistently by putting an "&" in one of the values that goes in the GridPanel, but other values such as rich-text formatting sometimes will also throw the code 12. I've found that if I go into the page in opera, I can fix the data in my grid panel and save it to the server. Then refreshing the firefox page, everything goes back to the way it was. Is there some delimiter or something I can put around these values to keep this from happening? I extjs can let me save something to the server, I don't understand how getting it back causes a problem.
In firebug:
An invalid or illegal string was specified" code: "12
[Break On This Error] (function(){var D=Ext.lib.Dom;var E=Ex...El.cache;delete El._flyweights})})();
Example JSON returned from server (note the "200 & 5" causes an error, "200 and 5" will work fine)
{"summaryList":[{"shot":"","seq":"200 & 5","active":9998,"tag":"","file":"","id":"137943329348950905822686689581598049837","quick_comments":"","comments":"","priority":"","asset":"","prod":"dragon","type":"","store":"","submitby":"jstratton","status":"ip","format":"","date":"2011_5_10","approval":"hofx_pm","name":"jstratton","notes":"","uri":"137943329348950905822686689581598049837","dept":"fx","time":"10 May 2011 13:56:30","order":2}], "success":true}
The JSON store and the GridPanel
var summaryStore = new Ext.data.JsonStore({
url: 'summaryList',
root: 'summaryList',
baseParams : {
show: showSelect.getValue(),
dept: deptSelect.getValue(),
approval: typeSelect.getValue(),
roundDate: roundDateField.getValue(),
user: summaryUser.getValue(),
},
autoLoad: true,
fields: [],
});
var summaryGrid = new Ext.grid.GridPanel({
store: summaryStore,
columns : [],
// turn off multi-selection for now
tbar : [activeButton,
removeButton,
' ',
exportToSpreadsheetButton,
refreshButton,
],
renderTo: 'summaryTab',
autoHeight: true,
loadMask: {msg: 'Loading information. Thank you for your patience.'},
autoExpandColumn: 'comments',
autoSizeColumns: true,
ddGroup: 'summaryGridDD',
enableDragDrop: true,
viewConfig: {
forceFit: true,
},
titleCollapse : true,
collapsed: false,
stripeRows: true,
title: 'Summary',
frame: true,
});
Your '&' is being placed directly in the HTML, you need to HTML escape your content.