This is screenshot of my sencha app deployed on android. I view two blue bars on the top. what i want is just to remove one of them. Any idea how to do it?
The codeis given below. hope this will help
Ext.define('appointMeDr.view.signUp.SignUp',{
extend:'Ext.form.Panel',
xtype:'signUpXType',
config:{
scrollable:'vertical',
items:[
{
xtype: 'toolbar',
title: 'Sign Up',
docked: 'top',
items:[ {
xtype:'button',
text: 'Back',
ui: 'back',
cls: 'back',
name: 'backToLogin'
}
]
},
{
xtype:'fieldset',
defaults :{
labelWidth : '120px'
},
items:[
{
xtype:'textfield',
label:'<sup>*</sup> Full Name: ',
placeHolder:'Full Name',
name:'name'
},
{
xtype: 'emailfield',
label: '<sup>*</sup> Email',
placeHolder:'Email',
name: 'email'
},
{
xtype:'textfield',
label:'<sup>*</sup> User Name: ',
placeHolder:'User Name',
name:'username'
},
{
xtype: 'passwordfield',
label: '<sup>*</sup> Password',
placeHolder:'Password',
name: 'password'
},
{
xtype:'textfield',
label:'<sup>*</sup> Age: ',
placeHolder:'Age',
name:'age'
},
{
xtype: 'selectfield',
name:'gender',
label: 'Gender',
options: [
{
text: 'Male',
value: 'Male'
},
{
text: 'Female',
value: 'Female'
}
]
},
{
xtype:'textfield',
label:'<sup>*</sup> Address : ',
placeHolder:'Address',
name:'address'
},
{
xtype: 'selectfield',
name:'Domain',
label: 'Select Domain',
options: [
{
text: 'Patient',
value: 'first'
},
{
text: 'Doctor',
value: 'second'
},
{
text: 'Guardian',
value: 'third'
},
{
text: 'Attendant',
value: 'forth'
}
]
}
]
},{
xtype:'panel',
margin:'10px',
items:[
{
xtype:'button',
text:'Sign Up',
flex:1,
name:'userSignUpBtn',
docked:'right'
}
]
}
]
}
});
youre probably using a navigation view and loading another panel which contains a toolbar into the navigation view so what you get is
1. blue bar from the navigation view
2. 2nd blue bar from the panel view
What you could do is load the view directly into the viewport instead of the navigation view
hope this helps :)
Related
I am developing an app using react native.
Already I have implemented a list of user data. One example of data is this.
UID234 {"name":"Chris","age":31,"traits":{"eyes":"blue","shoe_size":10}}
Here's my code.
import RNPickerSelect from 'react-native-picker-select';
...
<RNPickerSelect
onValueChange={(value) => console.log(value)} // そのユーザーのvalueを取る
// {console.log(to_user)}
items={[
{ label: 'Chris', value: 'UID234' },
{ label: 'Marge', value: 'UID345' },
{ label: 'Yuri', value: 'UID456' }
]}
style={pickerSelectStyles}
placeholder={{ label: '選択してください', value: '' }}
/>
In this case, when I select Chris, I can see "UID234" is shown on the console.
What I want to do is to print "Chris" on the screen.
How can I do that? Please help me...
The react-native-picker-select docs say the index can be passed in via the onValueChange callback. Use that to get the label.
import RNPickerSelect from 'react-native-picker-select';
...
const itemList = [
{ label: 'Chris', value: 'UID234' },
{ label: 'Marge', value: 'UID345' },
{ label: 'Yuri', value: 'UID456' }
];
<RNPickerSelect
onValueChange={(value, index) => console.log(itemList[index].label)} // <- get label from array
// {console.log(to_user)}
items={itemList}
style={pickerSelectStyles}
placeholder={{ label: '選択してください', value: '' }}
/>
you'll need to save the data in state form in order to show the label
this.state ={
user : ''
}
<RNPickerSelect
onValueChange={(value) => {this.setState({user: value,})}}
items={[
{ label: 'Chris', value: 'UID234' },
{ label: 'Marge', value: 'UID345' },
{ label: 'Yuri', value: 'UID456' }
]}
style={pickerSelectStyles}
value={this.state.user}
placeholder={{ label: '選択してください', value: '' }}
/>
I want the user to choose his region from a Dropdown menu, after that, another Dropdown menu will show with the exact cities in that region, but when I implemented Visibility widget it gave me white spaces
What I have tried to solve this problem is with Visibility Widgets, creating a new list.
#override
void initState() {
super.initState();
// * Load Data
_loadCityData();
}
// * City Data
List<Map> _citiesList;
Future _loadCityData() async {
String jsonCities = await
rootBundle.loadString("assets/json/cities.json");
setState(() {
_citiesList = List<Map>.from(jsonDecode(jsonCities) as List);
});
}
Widget _buildCitiesRun(BuildContext context) {
return DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text(
AppLocalizations.of(context).translate('Select City'),
style: normalBlack,
),
isExpanded: true,
style: editBoxLabel,
value: _selectedCity,
isDense: true,
onChanged: (String newValue) {
setState(() {
_selectedCity = newValue;
print('Selected City $_selectedCity');
});
},
items: _citiesList.map((cities) {
return DropdownMenuItem<String>(
value: cities.toString(),
child: Visibility(
visible: _selectedRegion == cities["region_name"] ? true
: false,
child: Row(
children: <Widget>[
// lanCode() is to get device language code
Text(
cities["name"][lanCode()].toString(),
style: normalBlack,
textAlign: TextAlign.center,
),
],
),
),
);
}).toList(),
),
);
}
Sample from JSON file.
Regions:
[
{
"region_id" : 4,
"name" : {
"ar" : "حائل",
"en" : "Hail"
}
},
{
"region_id" : 5,
"name" : {
"ar" : "القصيم",
"en" : "Al Qassim"
}
},
{
"region_id" : 6,
"name" : {
"ar" : "الرياض",
"en" : "Ar Riyadh"
}
},
{
"region_id" : 7,
"name" : {
"ar" : "المدينة المنورة",
"en" : "Al Madinah"
}
}
]
Cities:
[
{
"city_id" : 295,
"region_name" : "Ar Riyadh",
"name" : {
"ar" : "حفر العتك",
"en" : "Hafr Al Atk"
}
},
{
"city_id" : 296,
"region_name" : "Ar Riyadh",
"name" : {
"ar" : "المزيرع",
"en" : "Al Muzayri"
}
},
{
"city_id" : 297,
"region_name" : "Ar Riyadh",
"name" : {
"ar" : "شوية",
"en" : "Shawyah"
}
},
{
"city_id" : 306,
"region_name" : "Ar Riyadh",
"name" : {
"ar" : "الغاط",
"en" : "Al Ghat"
}
},
{
"city_id" : 307,
"region_name" : "Ar Riyadh",
"name" : {
"ar" : "مليح",
"en" : "Mulayh"
}
},
]
Please refer my screenshot below.
It shouldn't be there any white spaces.
Thanks.
I am developing a react native app that shows data in the flatlist grid view.
for that, I followed the code which I found on the expo. I work fine. But what I need is, I want the first row should render one item only. so that I can use the empty space to show some data first.
here is the Expo link.
https://snack.expo.io/#savadks1818/react-native-flatlist-grid
and here is the code
import React from 'react';
import { StyleSheet, Text, View, FlatList, Dimensions } from 'react-native';
const data = [
{ key: 'A' }, { key: 'B' }, { key: 'C' }, { key: 'D' }, { key: 'E' }, { key: 'F' }, { key: 'G' }, { key: 'H' }, { key: 'I' }, { key: 'J' },
{ key: 'K' },
// { key: 'L' },
];
const formatData = (data, numColumns) => {
const numberOfFullRows = Math.floor(data.length / numColumns);
let numberOfElementsLastRow = data.length - (numberOfFullRows * numColumns);
while (numberOfElementsLastRow !== numColumns && numberOfElementsLastRow !== 0) {
data.push({ key: `blank-${numberOfElementsLastRow}`, empty: true });
numberOfElementsLastRow++;
}
return data;
};
const numColumns = 3;
export default class App extends React.Component {
renderItem = ({ item, index }) => {
if (item.empty === true) {
return <View style={[styles.item, styles.itemInvisible]} />;
}
return (
<View
style={styles.item}
>
<Text style={styles.itemText}>{item.key}</Text>
</View>
);
};
render() {
return (
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={this.renderItem}
numColumns={3}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginVertical: 20,
},
item: {
backgroundColor: '#4D243D',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
margin: 3,
height: Dimensions.get('window').width / numColumns, // approximate a square
},
itemInvisible: {
backgroundColor: 'transparent',
},
itemText: {
color: '#fff',
},
});
you can do this by adding new obects in the data array in desired position
const data = [
{ key: 'A' },
{ empty: true, key: 'xxx' },
{ empty: true, key: 'xxx' },
{ key: 'B' },
{ key: 'C' },
{ key: 'D' },
{ key: 'E' },
{ key: 'F' },
{ key: 'G' },
{ key: 'H' },
{ key: 'I' },
{ key: 'J' },
{ key: 'K' },
{ key: 'L' },
];
to add item do
data.splice(1, 0, { empty: true, key: 'xxx' });
I want to add top tabs to one of my screens in my react-native app. I'm using react-native-navigation for navigation. I can easily to it with any of my screens defined in Navigation.startTabBasedApp, meaning any screen that is also one of my bottom tabs.
I want top tabs on a screen which is NOT one of the bottom tabs. Here is how I try to do it right now
Navigation.startSingleScreenApp({
screen: {
screen: 'screen',
title: 'screen'
},
TopTabRootScreen: {
screen: 'ToptabRoot',
title: 'ToptabRoot',
navigatorStyle: {},
topTabs: [
{
screenId: 'toptab1',
icon: icon
},
{
screenId: 'toptab2',
icon: icon
}]
}
});
I find the documentation for react-native-navigation quite lacking, which is why I I'm not sure why the code above doesn't work.
I also start a tab based app like this:
Navigation.startTabBasedApp({
tabs: [
{
label: 'tab1',
screen: 'tab1',
icon: icon,
selectedIcon: icon,
},
title: 'tab1',
navigatorStyle: {},
navigatorButtons: {}
},
{
label: 'tab2',
screen: 'tab2',
icon: Icon,
selectedIcon: Icon,
title: 'tab2'
},
{
label: 'tab3',
screen: 'tab3',
icon: Icon,
selectedIcon: Icon,
title: 'tab3'
{
label: 'tab4',
screen: 'tab4',
icon: Icon,
selectedIcon: Icon,
title: 'tab4',
navigatorButtons:
}
});
I feel like it might be doable inside the screens
static navigatorStyle = {
};
but no idea how that would look. Any help on how to do this would be appreciated.
There's an example topTabs screen in the example app
this.props.navigator.push({
screen: 'example.Types.TopTabs',
title: 'Top Tabs',
topTabs: [{
screenId: 'example.Types.TopTabs.TabOne',
title: 'Tab One',
}, {
screenId: 'example.Types.TopTabs.TabTwo',
title: 'Tab Two',
}],
});
AsyncStorage is not letting me overwrite or remove data.
This is my data
const allData = [
{
txnId: '012',
category: '',
time: 'Today, 2:00pm',
amount: 129,
type: 'Personal',
images: [],
},
{
txnId: '011',
category: '',
time: 'Today, 1:00pm',
amount: 20,
type: 'Personal',
images: [],
},
{
txnId: '010',
category: '',
time: 'Today, 10:00am',
amount: 200,
type: 'Personal',
images: [],
},
{
txnId: '009',
category: '',
time: 'Yesterday, 11:40pm',
amount: 649,
type: 'Personal',
images: [],
},
{
txnId: '008',
category: '',
time: 'Yesterday, 6:00pm',
amount: 200,
type: 'Personal',
images: [],
},
{
txnId: '007',
category: '',
time: 'Yesterday, 11:30am',
amount: 2200,
type: 'Personal',
images: [],
},
{
txnId: '006',
category: '',
time: 'Yesterday, 09:00am',
amount: 200,
type: 'Personal',
images: [],
},
{
txnId: '005',
category: '',
time: 'Yesterday, 10:00am',
amount: 200,
type: 'Personal',
images: [],
},
{
txnId: '004',
category: '',
time: 'Yesterday, 09:00am',
amount: 200,
type: 'Personal',
images: [],
},
{
txnId: '003',
category: 'Travel',
time: 'Today, 12:20pm',
amount: 2300,
type: 'Business',
status: 'Pending',
images: [],
},
{
txnId: '002',
category: 'Food',
time: 'Today, 12:02pm',
amount: 1000,
type: 'Business',
status: 'Rejected',
images: [],
},
{
txnId: '001',
category: 'Food',
time: 'Yesterday, 07:00am',
amount: 200,
type: 'Business',
status: 'Approved',
images: [],
}
];
The following functions are where I want to save and retrieve from AsyncStorage.
componentDidMount() {
AsyncStorage.getItem('allData').then(res => {
this.setState({
allData: JSON.parse(res),
});
});
console.log(this.state.allData);
}
componentWillUnmount() {
AsyncStorage.removeItem('allData');
AsyncStorage.setItem('allData', JSON.stringify(this.state.allData));
BackAndroid.removeEventListener('hardwareBackPress', this.handlesBackButton);
}
setCategory(index) {
const newData = this.state.allData.map((item, i) => {
const value = item;
if (i === index) {
value.type = item.type === 'Personal' ? 'Business' : 'Personal';
value.status = item.type === 'Personal' ? '' : 'Pending';
value.category = item.type === 'Personal' ? '' : 'Select category';
}
return value;
});
AsyncStorage.mergeItem('allData', JSON.stringify(newData));
this.setState({
allData: newData,
});
console.log(this.state.allData);
}
My render function contains the following
return (
<Transactions
allData={this.state.allData}
setCategory={(index, category) => {
const newData = this.state.allData.map((item, i) => {
const value = item;
if (index === i) {
value.category = category;
}
return value;
});
AsyncStorage.mergeItem('allData', JSON.stringify(newData));
this.setState({
allData: newData,
});
console.log(this.state.allData);
}}
onChange={this.setCategory.bind(this)}
/>);
There is nothing wrong with the state and props. Commenting out all the AsyncStorage stuff and logging the state and props gives expected result.
I think the main problem here is being caused by AsyncStorage.getItem. Without this method, all the functions and stuff work as expected. I tried putting it inside componentWillUpdate and componentWillMount as well and got the same result. What am I doing wrong?
Someone please help.
When you called AsyncStorage.getItem('allData'), The first item you get back from the promise is the error object. The second item will be the data you want.
Try this:
AsyncStorage.getItem('allData').then((error, res) => {
this.setState({
allData: JSON.parse(res),
});
});