Paste the code blow inside Sencha fiddle. Look at the item that reads ProblemElement.
Ext.define('DropDownList', {
extend: 'Ext.form.ComboBox',
editable: false,
alias: 'widget.dropdownlist',
initComponent: function() {
this.callParent([arguments]);
},
onRender: function() {
this.callParent();
}
});
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [
{
"name": "Alabama"
},
{
"name": "Alaska"
},
{
"name": " <input value='ProblemElement'>"
}
]
});
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.form.Panel', {
items: [{
xtype: 'dropdownlist',
hideLabel: false,
title: 'ComboBox Test',
fieldLabel: 'Choose State',
store: states,
displayField: 'name',
htmlEncode: true,
renderTo: Ext.getBody()
}]
});
}
});
The problem I am facing is that the item displayed in the dropdown is being rendered as HTML. However after I select it it displays correctly as text (<input value='ProblemElement'>), the way I want it.
The dropdown list is actually a Boundlist, and how item text is displayed is controlled by its getInnerTpl method. You can customize the combo's dropdown with listConfig so that the inner text is passed through Ext.String.htmlEncode:
listConfig: {
getInnerTpl: function(displayField) {
return '{[Ext.String.htmlEncode(values.' + displayField + ')]}';
}
}
Full example: https://fiddle.sencha.com/#fiddle/rkk
Related
How to retrieve and click the checkbox "Alabama" programmatically? i have tried many ways but fail to retrieve the checkbox on the ext combobox model.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: document.body,
fieldLabel: 'Combobox',
labelAlign: 'right',
displayField: 'name',
id: 'multiComboBox',
multiSelect: true,
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="checkbox" />', '{name}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: [{
type: 'string',
name: 'name'
}],
data: [{
"name": "Alabama"
}, {
"name": "Alaska"
}, {
"name": "Arkansas"
}, {
"name": "California"
}]
}),
queryMode: 'local',
listeners: {
select: function (combo, records) {
var node;
Ext.each(records, function (rec) {
node = combo.getPicker().getNode(rec);
/*Ext.get(node).down('input').set({
checked: true
});*/
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function (combo, rec) {
var node = combo.getPicker().getNode(rec);
/*Ext.get(node).down('input').set({
checked: undefined
});*/
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
I have done something like below. it was selected and show the name on the field. However, when i opened the dropdown list, the checkbox isn't checked. the following code cannot direct to select function of the listener
Ext.getCmp('multiComboBox').select('Alabama')
In a extjs app, I have a tree panel that is loading json data from a store. In that information I have a property checked that allows manipulate a checkbox over a row in the tree panel.
How can I do to uncheck graphically the checkbox by listening a button? (Clean all checked boxes)
Here's a fiddle that explain a bit the situation.
https://fiddle.sencha.com/#fiddle/17v3
Update your code like so:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('modeloCapa', {
extend: 'Ext.data.Model',
fields: ['nombre']
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'modeloCapa',
proxy: {
type: 'ajax',
url: "data1.json",
reader: {
type: 'json',
root: 'Result'
}
}
});
var tree = Ext.create('Ext.tree.Panel', {
title: 'Test',
width: 500,
store: treeStore,
rootVisible: false,
renderTo: Ext.getBody(),
columns: [{
xtype: 'treecolumn',
flex: 2,
sortable: true,
dataIndex: 'titulo'
}],tbar: [{
xtype: 'button',
id: 'btnApagarCapas',
text : 'Button',
width: 100,
tooltip: 'Uncheck!!',
iconAlign : 'center',
listeners: {
click : function(){
treeStore.suspendEvents();
treeStore.getRootNode().cascadeBy(function(node) {
if (node.get('checked')) {
node.set('checked', false);
}
});
treeStore.resumeEvents();
tree.getView().refresh();
}
}
}]
});
}
});
Loop over all the nodes, uncheck the ones that are checked. The suspend events is to prevent the view from refreshing each node as it is unchecked, just do it in bulk at the end.
I created a normal window in ExtJS5 which has one grid and one button. I want to get store field items from grid store and want to do another functionality.
When i get store.fields, it shows null. But if i get in ExtJS3, then it works proper.
In below image, I am getting store fields or fields items in ExtJS3.
Here is my code (ExtJS5)
Ext.onReady(function () {
var States = Ext.create('Ext.data.Store',
{
fields: ['value'],
data:
[
{ "value": "HR" },
{ "value": "DL" },
{ "value": "RJ" }
]
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Submit',
handler: function () {
var storeFields = Ext.getCmp('grdSample').getStore().fields;
//storeFields get null;
}
},
{
xtype: 'grid',
id: 'grdSample',
store: States,
columns: [
{
header: 'Name',
dataIndex: 'value'
}
]
}
]
}]
}).show();
});
grid.getStore().getModel().getFields() should do what you want.
Ext.application({
launch: function () {
Ext.define("User", {
extend: "Ext.data.Model",
config: {
fields: [{name: "title", type: "string"}]
}
});
var myStore = Ext.create("Ext.data.Store", {
model: "User",
proxy: {
type: "ajax",
url : "http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=twilight",
reader: {
type: "json",
rootProperty: "title_popular"
}
},
autoLoad: true
});
var view = Ext.Viewport.add({
xtype: 'navigationview',
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [{
xtype:'formpanel',
title: 'SEARCH IMDB MOVIES ',
padding: 10,
items: [{
xtype: 'fieldset',
title: 'Search Movies from IMDB',
items: [{
xtype: 'textfield',
name : 'Movie Search',
label: 'Search Movie'
}, {
xtype: 'button',
text: 'Submit',
handler: function () {
view.push({
//this one also has a title
title: 'List of Movies',
padding: 10,
//once again, this view has one button
items: [{
xyz.show();
}]
});
}
}]
}]
}]
});
var xyz = new Ext.create("Ext.List", {
fullscreen: true,
store: myStore,
itemTpl: "{title}"
});
}
});
error is with xyz.show();
it will work properly if i remove xyz.show();
but i want to show list after clicking on buttton
This is a navigation view on click of button i want to show list
Change your xyz list as follows:
var xyz = new Ext.create("Ext.List", {
//this one also has a title
title: 'List of Movies',
padding: 10,
xtype:'xyz',
alias:'xyz',
hidden:true,
fullscreen: true,
store: myStore,
itemTpl: "{title}"
});
Then just below it write
view.add(xyz);
Then in your handler
handler: function () {
xyz.show();
}
Not tested but it should work with possible adjustments.
Try this :
handler: function () {
view.push({
//this one also has a title
title: 'List of Movies',
padding: 10,
//once again, this view has one button
items: [
xyz
]
});
}
i am a noob in ext js and stuck with a problem.
i have created an app
this is the init function of my controller.
init: function () {
console.log('initialized filesystem controller');
this.control({
'filesystemtree': {
itemdblclick: this.OpenFile,
select: this.NodeSelected
},
'filesystemtree filesystemmenu button[text="Delete"]': {
click:this.DeleteButtonClicked
}
});
}
and this is the view with xtype : 'filesystemtree'
Ext.define('IDE.view.fileSystem.List', {
extend: 'Ext.tree.Panel',
alias: 'widget.filesystemtree',
title: 'Navigation2',
store: 'FileSystems',
rootVisible: 'false',
dockedItems: [{
xtype:'filesystemmenu',
dock:'top'
}],
initComponent: function () {
console.log('file system tree initializing');
this.callParent(arguments);
}
})
and this is the view with xtype:filesystemmenu docked to filesystemtree
Ext.define('IDE.view.fileSystem.FileSystemMenu', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.filesystemmenu',
items: [
{
xtype: 'splitbutton',
text: 'Menu',
menu: new Ext.menu.Menu({
items: [
{
text: 'Delete'
},
{
text: 'Copy'
},
{
text: 'Paste'
},
{
text: 'Cut'
},
{
name: 'Rename',
xtype: 'textfield',
emptyText: 'Enter text to rename'
}
]
})
},
{
text: 'Add Item',
id:'FSAddItemButton'
},
'->',
{
xtype: 'box',
id: 'fileSystemNodeNameLabel'
}
]
})
but in the controller im unable to attach a click event to the delete button present in the filesystemmenu which itself is present as a docked item to the filesystemtree.
basically this line in the controller aint working.
'filesystemtree filesystemmenu button[text="Delete"]': {
click:this.DeleteButtonClicked
}
what am i doing wrong?
Look at your selector. You're asking it to find a button with the text "Delete", however you don't have any component matching the criteria, because children of menus are Ext.menu.Item by default, so your selector should be:
'filesystemtree filesystemmenu menuitem[text="Delete"]'