Related
Well considering a grid I create in my application:
{
xtype: 'ordergrid',
itemId: 'ordergrid',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
}
}]
},
With ordergrid being defined with:
extend: 'Ext.grid.Grid',
xtype: 'ordergrid',
I wish to modify the items of the menu dynamically. I've first tried doing this through a store:
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
store: { type: 'status' }
Though this doesn't seem to work. Then I tried accessing this menu through a component query, during the init function of some controller:
Ext.define('BinkPortalFrontend.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
init: function () {
console.log('..... initializing ......');
const menus = Ext.ComponentQuery.query('ordergrid #status_menu');
const menu = menus[0];
menu.setItems([{
text: 'some',
value: 'some'
}, {
text: 'new',
value: 'mew'
}]);
},
};
However this returns an error: "Cannot read property 'setItems' of undefined"
Debugging shows the obvious problem: it doesn't find any menu.
What's more, even a "catch all" query like
Ext.ComponentQuery.query('menu');
or
Ext.ComponentQuery.query('#status_menu');
Shows an empty array: so what's going on? (I most definitely see the menu from its initial load).
There is one reason your menu is not created. Menu will created whenever button will tap or whenever getMenu() method get called.
If you want to get your menu using Ext.ComponentQuery.query(), so for this you need to do use initialize event of button and forcefully create menu using getMenu() method like below :-
{
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function(btn) {
Ext.defer(function() {
// This will print undefined because menu have not created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will print menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}
Another way you can use getMenu() method of button. It will return the menu component.
In this FIDDLE, I have created a demo using grid, button and menu. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Grid', {
title: 'Change menu items dynamically',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
itemId: 'statusbtn',
menu: {
itemId: 'status_menu',
defaults: {
// handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function (btn) {
Ext.defer(function () {
// This will undefined because menu has not been created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}, {
xtype: 'button',
align: 'right',
text: 'Change Items',
handler: function (btn) {
var newItems = [];
store.each(rec => {
newItems.push({
text: rec.get('name'),
value: rec.get('name')
})
});
/*
* You can also get menu using button
* btn.up('titlebar').down('#statusbtn').getMenu().setItems(newItems);
*/
Ext.ComponentQuery.query('#status_menu')[0].setItems(newItems);
Ext.toast('Menu items has been change. Please check', 2000);
}
}]
},
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 200,
layout: 'fit',
fullscreen: true
});
}
});
For more details about component you can also see this ComponentManager
I'm working with an accordion that has 10 grids inside of it. So basically I would like to access each grid in the accordian but not really sure how to accomplish that in ExtJS.
Example: If I want to target a grid I can do this:
Ext.ComponentQuery.query('grid');
But if I use the above code it will target all of the grids from the UI and I don't want that. I ONLY want to target the grids from my accordian.
layout: {
type: 'accordion',
animate: false,
fill: false,
hideCollapseTool: false,
collapseFirst: false,
titleCollapse: false,
multi: true,
overflowHandler: 'scroller'
}
Any ideas how to do that? Thank you in advance!
First thing accordion is not an xtype.
Accordion is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time.
As you ONLY want to target the grids from your accordian
if you have created your custom xtype:'accordion' then you can get like this me.down('accordion').query('grid') if me contain xtype:'accordion'.
If you have define reference then you can get like this lookupReference using controller or lookupReference using view.
Here I have created an small sencha fiddle demo. Hope this will help you.
//create grid
Ext.define('DemoGrid', {
extend: 'Ext.grid.Panel',
xtype: 'demogrid',
store: {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
flex: 1
});
//controller
Ext.define('DemoCnt', {
extend: 'Ext.app.ViewController',
alias: 'controller.demo',
onButtonClick: function (button) {
var accordion = this.lookupReference('demoAccordion'); //if your Accordion Layout is inside of panel/coantainer then you can use like this {this.lookupReference(your refrence name)}.
this.doGetAllGrid(accordion);
/* var panel = button.up('panel');
panel.down('[reference=demoAccordion]');
panel.down('panel') also we get like this
panel.down('panel[reference=demoAccordion]') also we get like this
*/
},
doGetAllGrid: function (accordion) {
var data = [];
//{accordion.query('grid')} return all grid as Accordion contain
Ext.Array.forEach(accordion.query('grid'), function (item) {
data.push('<b>' + item.title + '</b>');
});
Ext.Msg.alert('Success', 'Your all grid title is below :-<br>' + data.join('<br>'));
}
});
//Accordion Layout panel
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: '100%',
controller: 'demo',
height: 700,
items: [{
xtype: 'panel',
reference: 'demoAccordion',
layout: {
// layout-specific configs go here
type: 'accordion',
animate: false,
fill: false,
hideCollapseTool: false,
collapseFirst: false,
titleCollapse: false,
// multi: true,
overflowHandler: 'scroller'
},
defaults: {
xtype: 'demogrid'
},
items: [{
title: 'Grid 1'
}, {
title: 'Grid 2'
}, {
title: 'Grid 3'
}, {
title: 'Grid 4'
}, {
title: 'Grid 5'
}, {
title: 'Grid 6'
}, {
title: 'Grid 7'
}, {
title: 'Grid 8'
}, {
title: 'Grid 9'
}, {
title: 'Grid 10'
}],
}, {
xtype: 'demogrid',
margin:'10 0',
title: 'Grid 11 will not inside of Accordion Layout '
}],
buttons: [{
text: 'Get All Grid',
height: 50,
padding: '0 35',
style: 'background: transparent;border: 2px solid #737373cc;',
handler: function () {
var panel = this.up('panel');
panel.getController().doGetAllGrid(panel.down('[reference=demoAccordion]')); //Just call only common method of controller to get all grid.
}
}, {
text: 'Get All using controller method with a reference',
height: 50,
padding: '0 35',
style: 'background: transparent;border: 2px solid #737373cc;',
handler: 'onButtonClick'
}],
renderTo: Ext.getBody()
});
I want to search for specific node in an ExtJs tree. The current code that I have allows node to be searched only at the first level. Please check this fiddle
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Javascript",
leaf: true
}, {
text: "ASP.net",
leaf: true
}, {
text: "Also ASP.net",
leaf: false,
children: [{
text: '1.1 foo',
leaf: false,
children: [{
text: "1.1.1 asp.net mvc",
expanded: true
}, {
text: "1.1.2 java",
expanded: true
}, {
text: "1.1.3 extjs",
expanded: true
}]
}, {
text: '1.2 bar',
leaf: true
}]
}, {
text: "ASP.net future",
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 450,
store: store,
rootVisible: false,
multiSelect: true,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Search for ASP.net',
handler: function () {
var me = this,
panel = me.up('panel'),
rn = panel.getRootNode(),
regex = new RegExp("ASP.net");
rn.findChildBy(function (child) {
var text = child.data.text;
if (regex.test(text) === true) {
console.warn("selecting child", child);
panel.getSelectionModel().select(child, true);
}
});
}
}]
}]
});
What I want:
Ability to search across all the levels in the tree
once a node is found, I want to expand it.
How can I achieve this?
Thank you
You can use this :
var c = rn.findChild("text","Also ASP.net",true);
c.expand();
true indicates a deep search.Please have a look at findChild.
Please check out the fiddle
This is what I was looking for : http://jsfiddle.net/tdaXs/17/
Thank you Devendra for suggesting Deep Search option.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Javascript",
leaf: true
}, {
text: "ASP.net",
leaf: true
}, {
text: "Also ASP.net",
leaf: false,
children: [{
text: '1.1 foo',
leaf: false,
children: [{
text: "1.1.1 ASP.net mvc",
leaf: true,
expanded: true
}, {
text: "1.1.2 java",
leaf: true,
expanded: true
}, {
text: "1.1.3 extjs",
leaf: true,
expanded: true
}]
}, {
text: '1.2 bar',
leaf: true
}]
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 450,
store: store,
rootVisible: false,
multiSelect: true,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Search for ASP.net',
handler: function () {
var me = this,
panel = me.up('panel'),
rn = panel.getRootNode(),
regex = new RegExp("ASP.net");
//var c = rn.findChild("text", " asp.net", true);
rn.findChildBy(function (child) {
var text = child.data.text;
if (regex.test(text) === true) {
console.warn("selecting child", child);
panel.getSelectionModel().select(child, true);
}
});
}
}]
}]
});
I've tried to accomplish this a thousand different ways now, the Sencha Touch documentation is far from clear or helpful, and everyone seems to do it a different way...none of which have worked for me.
I've managed to get a List view working in the following way:
Ext.define("MyApp_eComm.view.Products", {
extend: 'Ext.navigation.View', //Needs to be navigation view to display the ProductList.js
xtype: 'products',
requires: [
'Ext.dataview.List',
'MyApp.view.ProductList',
'MyApp_eComm.view.ProductDetail'
],
config: {
title: sMY_CONST_TAB_BROWSE_TITLE,
iconCls: sMY_CONST_TAB_BROWSE_CLASS,
styleHtmlContent: true,
scrollable: true,
items: [
/*{
xtype: 'titlebar',
docked: 'top',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
},*/
{
xtype: 'productlist',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
}
]
}
})
This is my List view that goes inside the navigation view...inside the tab panel. the reason I've used a navigation view is so I can push a product details view on top from the disclosure component.
Ext.define("MyApp.view.ProductList", {
extend: 'Ext.List',
xtype: 'productlist',
requires: [
'MyApp.store.ProductStore'
],
config: {
itemTpl: '{text}',
store: 'ProductStore',
onItemDisclosure: true
}
});
Here is my model:
Ext.define('MyApp.model.ProductListModel', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
And finally here is my store with test data in, not nested at the moment:
Ext.define('MyApp.store.ProductStore', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.ProductListModel',
sorters: 'text',
data: [
{
text: 'Burgers',
},
{
text: 'Pasta',
},
{
text: 'Sausages',
},
{
text: 'Cabbage',
},
{
text: 'Lettuce',
},
{
text: 'Marmalade',
},
{
text: 'Honey',
},
{
text: 'Yogurt',
},
{
text: 'Cheese',
},
{
text: 'Milk',
},
{
text: 'Bread',
},
{
text: 'Butter',
},
{
text: 'Goats Milk',
},
{
text: 'Apple',
},
{
text: 'Oranges',
},
{
text: 'Bananas',
},
{
text: 'Jelly',
},
{
text: 'Spagetti Hoops',
},
{
text: 'Ravioli',
},
{
text: 'Wheatabix',
},
{
text: 'Cornflakes',
},
]
}
});
try to add so
config: {
title: sMY_CONST_TAB_BROWSE_TITLE,
iconCls: sMY_CONST_TAB_BROWSE_CLASS,
styleHtmlContent: true,
scrollable: true,
items:
{
xtype: 'productlist',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
}
}
I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url.
I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help.
Code:
searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
store: searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all.
I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file.
I've also tried to load the file in the app seperately by using:
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php?keywords=test',
reader: {
type: 'tree',
root: 'items'
}
}
});
and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search'
I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working :(
I don't know if this is of help, but the main javascript file is:
var tabPanel;
var homePanel = new Ext.Panel({
title: 'Home',
iconCls: 'home',
fullscreen: true,
scroll:{direction:'vertical',threshold:7},
items: [{
html: '<center><p>Home</p></center>'
}]
});
var servicePanel = new Ext.Panel({
title: 'Services',
iconCls: 'team',
fullscreen: true,
items: [{
html: '<center>Please choose a service</center>'
}]
});
var searchPanel = new Ext.Panel({
title: 'Search',
iconCls: 'search',
fullscreen: true,
items: [{
html: '<center>Search</center>'
}]
});
var feedtabpanel = new Ext.Carousel({
title: 'More',
iconCls: 'more',
fullscreen: true,
sortable : true,
xtype:'panel',
scroll:{direction:'vertical',threshold:7},
items: [
{
title: 'Contact',
html : '<center><h1>Contact Us</h1></center>',
},
{
title: 'Feedback',
html : '<center><h1>Let us know what you think<h1></center>',
},
{
title: 'Tell a friend',
html : '<center><h1>Tell your friends how much you love this app</h1></center>',
}
]
});
searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
store: searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var store = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'areas.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Location',
displayField: 'text',
store: store,
iconCls: 'locate',
});
nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
var services = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'subcats.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var servicesList = new Ext.NestedList({
fullscreen: true,
title: 'Services',
displayField: 'text',
store: services,
iconCls: 'team',
});
servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = servicesList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
animation: {
type: 'cardslide',
cover: true
},
items: [
homePanel,
nestedList,
servicesList,
searchForms,
feedtabpanel
]
});
}
})
Just update your store with the filter() function. First you have to add the correct filterParam to your store configuration. After this, you can call the filter() function in your search button handler. E.g.
searchForm.filter('keywordParam', searchfield.getValue());
After this, your store will get updated without the page refreshing. You could then use a DataView to show your search results.